/** * tailwind-styled-v4 — Default Preset * * Tailwind config built-in yang dipakai ketika developer tidak punya * tailwind.config.ts / tailwind.config.js di project mereka. * * Developer tidak perlu setup apapun: * npm install tailwind-styled-v4 * → langsung bisa tw.div`p-4 bg-blue-500` * * Preset ini juga menyediakan design tokens yang consistent * untuk semua project yang pakai tailwind-styled-v4. * * Override per-project: * // tailwind.config.ts * import { defaultPreset } from "tailwind-styled-v4/preset" * export default { presets: [defaultPreset], theme: { extend: {...} } } */ declare const designTokens: { readonly colors: { readonly primary: { readonly DEFAULT: "#3b82f6"; readonly hover: "#2563eb"; readonly active: "#1d4ed8"; readonly foreground: "#ffffff"; }; readonly secondary: { readonly DEFAULT: "#6366f1"; readonly hover: "#4f46e5"; readonly active: "#4338ca"; readonly foreground: "#ffffff"; }; readonly accent: { readonly DEFAULT: "#f59e0b"; readonly hover: "#d97706"; readonly active: "#b45309"; readonly foreground: "#000000"; }; readonly success: { readonly DEFAULT: "#10b981"; readonly foreground: "#ffffff"; }; readonly warning: { readonly DEFAULT: "#f59e0b"; readonly foreground: "#000000"; }; readonly danger: { readonly DEFAULT: "#ef4444"; readonly foreground: "#ffffff"; }; readonly info: { readonly DEFAULT: "#3b82f6"; readonly foreground: "#ffffff"; }; readonly surface: "#18181b"; readonly border: "#27272a"; readonly muted: "#71717a"; readonly subtle: "#3f3f46"; }; readonly spacing: { readonly 1: "0.25rem"; readonly 2: "0.5rem"; readonly 3: "0.75rem"; readonly 4: "1rem"; readonly 5: "1.25rem"; readonly 6: "1.5rem"; readonly 8: "2rem"; readonly 10: "2.5rem"; readonly 12: "3rem"; readonly 16: "4rem"; }; readonly breakpoints: { readonly sm: "40rem"; readonly md: "48rem"; readonly lg: "64rem"; readonly xl: "80rem"; readonly "2xl": "96rem"; }; readonly fontWeight: { readonly normal: "400"; readonly medium: "500"; readonly semibold: "600"; readonly bold: "700"; }; readonly fontFamily: { readonly sans: readonly ["InterVariable", "Inter", "system-ui", "sans-serif"]; readonly mono: readonly ["JetBrains Mono", "Fira Code", "Consolas", "monospace"]; }; readonly borderRadius: { readonly sm: "0.25rem"; readonly DEFAULT: "0.5rem"; readonly md: "0.5rem"; readonly lg: "0.75rem"; readonly xl: "1rem"; readonly "2xl": "1.5rem"; readonly full: "9999px"; }; readonly animation: { readonly "fade-in": "fadeIn 0.2s ease-out"; readonly "fade-out": "fadeOut 0.2s ease-in"; readonly "slide-up": "slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)"; readonly "slide-down": "slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1)"; readonly "scale-in": "scaleIn 0.2s ease-out"; }; readonly keyframes: { readonly fadeIn: { readonly from: { readonly opacity: "0"; }; readonly to: { readonly opacity: "1"; }; }; readonly fadeOut: { readonly from: { readonly opacity: "1"; }; readonly to: { readonly opacity: "0"; }; }; readonly slideUp: { readonly from: { readonly transform: "translateY(8px)"; readonly opacity: "0"; }; readonly to: { readonly transform: "translateY(0)"; readonly opacity: "1"; }; }; readonly slideDown: { readonly from: { readonly transform: "translateY(-8px)"; readonly opacity: "0"; }; readonly to: { readonly transform: "translateY(0)"; readonly opacity: "1"; }; }; readonly scaleIn: { readonly from: { readonly transform: "scale(0.95)"; readonly opacity: "0"; }; readonly to: { readonly transform: "scale(1)"; readonly opacity: "1"; }; }; }; }; declare const defaultPreset: { content: string[]; darkMode: "class"; theme: { extend: { colors: { readonly primary: { readonly DEFAULT: "#3b82f6"; readonly hover: "#2563eb"; readonly active: "#1d4ed8"; readonly foreground: "#ffffff"; }; readonly secondary: { readonly DEFAULT: "#6366f1"; readonly hover: "#4f46e5"; readonly active: "#4338ca"; readonly foreground: "#ffffff"; }; readonly accent: { readonly DEFAULT: "#f59e0b"; readonly hover: "#d97706"; readonly active: "#b45309"; readonly foreground: "#000000"; }; readonly success: { readonly DEFAULT: "#10b981"; readonly foreground: "#ffffff"; }; readonly warning: { readonly DEFAULT: "#f59e0b"; readonly foreground: "#000000"; }; readonly danger: { readonly DEFAULT: "#ef4444"; readonly foreground: "#ffffff"; }; readonly info: { readonly DEFAULT: "#3b82f6"; readonly foreground: "#ffffff"; }; readonly surface: "#18181b"; readonly border: "#27272a"; readonly muted: "#71717a"; readonly subtle: "#3f3f46"; }; fontFamily: { readonly sans: readonly ["InterVariable", "Inter", "system-ui", "sans-serif"]; readonly mono: readonly ["JetBrains Mono", "Fira Code", "Consolas", "monospace"]; }; borderRadius: { readonly sm: "0.25rem"; readonly DEFAULT: "0.5rem"; readonly md: "0.5rem"; readonly lg: "0.75rem"; readonly xl: "1rem"; readonly "2xl": "1.5rem"; readonly full: "9999px"; }; animation: { readonly "fade-in": "fadeIn 0.2s ease-out"; readonly "fade-out": "fadeOut 0.2s ease-in"; readonly "slide-up": "slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)"; readonly "slide-down": "slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1)"; readonly "scale-in": "scaleIn 0.2s ease-out"; }; keyframes: { readonly fadeIn: { readonly from: { readonly opacity: "0"; }; readonly to: { readonly opacity: "1"; }; }; readonly fadeOut: { readonly from: { readonly opacity: "1"; }; readonly to: { readonly opacity: "0"; }; }; readonly slideUp: { readonly from: { readonly transform: "translateY(8px)"; readonly opacity: "0"; }; readonly to: { readonly transform: "translateY(0)"; readonly opacity: "1"; }; }; readonly slideDown: { readonly from: { readonly transform: "translateY(-8px)"; readonly opacity: "0"; }; readonly to: { readonly transform: "translateY(0)"; readonly opacity: "1"; }; }; readonly scaleIn: { readonly from: { readonly transform: "scale(0.95)"; readonly opacity: "0"; }; readonly to: { readonly transform: "scale(1)"; readonly opacity: "1"; }; }; }; }; }; plugins: never[]; }; declare const defaultThemeCss = "@import \"tailwindcss\";\n\n@theme {\n /* colors */\n --color-primary: #3b82f6;\n --color-primary-hover: #2563eb;\n --color-primary-active: #1d4ed8;\n --color-primary-foreground: #ffffff;\n --color-secondary: #6366f1;\n --color-secondary-hover: #4f46e5;\n --color-secondary-active: #4338ca;\n --color-secondary-foreground: #ffffff;\n --color-accent: #f59e0b;\n --color-accent-hover: #d97706;\n --color-accent-active: #b45309;\n --color-accent-foreground: #000000;\n --color-success: #10b981;\n --color-success-foreground: #ffffff;\n --color-warning: #f59e0b;\n --color-warning-foreground: #000000;\n --color-danger: #ef4444;\n --color-danger-foreground: #ffffff;\n --color-info: #3b82f6;\n --color-info-foreground: #ffffff;\n --color-surface: #18181b;\n --color-border: #27272a;\n --color-muted: #71717a;\n --color-subtle: #3f3f46;\n\n /* fonts */\n --font-sans: InterVariable, Inter, system-ui, sans-serif;\n --font-mono: JetBrains Mono, Fira Code, Consolas, monospace;\n\n /* spacing */\n --spacing-1: 0.25rem;\n --spacing-2: 0.5rem;\n --spacing-3: 0.75rem;\n --spacing-4: 1rem;\n --spacing-5: 1.25rem;\n --spacing-6: 1.5rem;\n --spacing-8: 2rem;\n --spacing-10: 2.5rem;\n --spacing-12: 3rem;\n --spacing-16: 4rem;\n\n /* breakpoints */\n --breakpoint-sm: 40rem;\n --breakpoint-md: 48rem;\n --breakpoint-lg: 64rem;\n --breakpoint-xl: 80rem;\n --breakpoint-2xl: 96rem;\n\n /* border radius */\n --radius-sm: 0.25rem;\n --radius-md: 0.5rem;\n --radius-lg: 0.75rem;\n --radius-xl: 1rem;\n --radius-2xl: 1.5rem;\n --radius-full: 9999px;\n\n /* animations */\n --animate-fade-in: fadeIn 0.2s ease-out;\n --animate-fade-out: fadeOut 0.2s ease-in;\n --animate-slide-up: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n --animate-slide-down: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n --animate-scale-in: scaleIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n@keyframes fadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n@keyframes slideUp {\n from { transform: translateY(8px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n@keyframes slideDown {\n from { transform: translateY(-8px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n@keyframes scaleIn {\n from { transform: scale(0.95); opacity: 0; }\n to { transform: scale(1); opacity: 1; }\n}"; declare const defaultGlobalCss = "@import \"tailwindcss\";\n\n@theme {\n /* colors */\n --color-primary: #3b82f6;\n --color-primary-hover: #2563eb;\n --color-primary-active: #1d4ed8;\n --color-primary-foreground: #ffffff;\n --color-secondary: #6366f1;\n --color-secondary-hover: #4f46e5;\n --color-secondary-active: #4338ca;\n --color-secondary-foreground: #ffffff;\n --color-accent: #f59e0b;\n --color-accent-hover: #d97706;\n --color-accent-active: #b45309;\n --color-accent-foreground: #000000;\n --color-success: #10b981;\n --color-success-foreground: #ffffff;\n --color-warning: #f59e0b;\n --color-warning-foreground: #000000;\n --color-danger: #ef4444;\n --color-danger-foreground: #ffffff;\n --color-info: #3b82f6;\n --color-info-foreground: #ffffff;\n --color-surface: #18181b;\n --color-border: #27272a;\n --color-muted: #71717a;\n --color-subtle: #3f3f46;\n\n /* fonts */\n --font-sans: InterVariable, Inter, system-ui, sans-serif;\n --font-mono: JetBrains Mono, Fira Code, Consolas, monospace;\n\n /* spacing */\n --spacing-1: 0.25rem;\n --spacing-2: 0.5rem;\n --spacing-3: 0.75rem;\n --spacing-4: 1rem;\n --spacing-5: 1.25rem;\n --spacing-6: 1.5rem;\n --spacing-8: 2rem;\n --spacing-10: 2.5rem;\n --spacing-12: 3rem;\n --spacing-16: 4rem;\n\n /* breakpoints */\n --breakpoint-sm: 40rem;\n --breakpoint-md: 48rem;\n --breakpoint-lg: 64rem;\n --breakpoint-xl: 80rem;\n --breakpoint-2xl: 96rem;\n\n /* border radius */\n --radius-sm: 0.25rem;\n --radius-md: 0.5rem;\n --radius-lg: 0.75rem;\n --radius-xl: 1rem;\n --radius-2xl: 1.5rem;\n --radius-full: 9999px;\n\n /* animations */\n --animate-fade-in: fadeIn 0.2s ease-out;\n --animate-fade-out: fadeOut 0.2s ease-in;\n --animate-slide-up: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n --animate-slide-down: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n --animate-scale-in: scaleIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n@keyframes fadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n@keyframes slideUp {\n from { transform: translateY(8px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n@keyframes slideDown {\n from { transform: translateY(-8px); opacity: 0; }\n to { transform: translateY(0); opacity: 1; }\n}\n@keyframes scaleIn {\n from { transform: scale(0.95); opacity: 0; }\n to { transform: scale(1); opacity: 1; }\n}\n\n/* tailwind-styled-v4 \u2014 zero-config base styles */\n*, *::before, *::after {\n box-sizing: border-box;\n}\n\nhtml {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n}\n\nbody {\n margin: 0;\n font-family: var(--font-sans, system-ui, sans-serif);\n background: var(--color-surface, #18181b);\n color: var(--color-foreground, #fafafa);\n}\n"; declare function generateTailwindCss(contentPaths?: string[]): string; declare function generateTailwindConfig(safelistPath?: string, contentPaths?: string[]): string; /** * Preset extension API — jalur ekspansi untuk custom presets. * Dari monorepo checklist: "Siapkan jalur ekspansi preset tanpa memaksa perubahan compiler besar" * * Pattern: buat preset custom dengan extend/merge tanpa menyentuh compiler. */ interface PresetComponentConfig { readonly base?: string; readonly variants?: Record>; readonly defaultVariants?: Record; readonly compoundVariants?: Array<{ class: string; [key: string]: string; }>; readonly state?: Record>; readonly container?: Record; readonly containerName?: string; } interface PresetExtension { /** Token tambahan (akan di-merge dengan defaultPreset tokens) */ tokens?: Record; /** Component configs default yang bisa di-override */ components?: Record; /** CSS tambahan yang di-inject setelah @theme default */ additionalCss?: string; /** Override dark mode strategy */ darkMode?: "class" | "media"; /** Plugin tambahan untuk Tailwind config */ plugins?: unknown[]; /** Extend content paths */ content?: string[]; } interface PresetOptions { /** Nama preset (untuk debugging) */ name?: string; /** Override dark mode dari default */ darkMode?: "class" | "media"; /** Custom content paths (merged dengan default) */ content?: string[]; } /** Buat preset custom dari scratch */ declare function createPreset(extension: PresetExtension, opts?: PresetOptions): typeof defaultPreset; /** * Extend existing preset dengan tokens/components tambahan. * Tidak memerlukan perubahan compiler — semua di Tailwind config layer. * * @example * const myPreset = extendPreset(defaultPreset, { * tokens: { "brand-blue": "#1d4ed8", "brand-red": "#dc2626" }, * additionalCss: ".btn { @apply px-4 py-2 rounded; }", * }) */ declare function extendPreset(base: typeof defaultPreset, extension: PresetExtension): typeof defaultPreset; /** * Merge dua atau lebih presets — tokens, plugins, dan content di-merge. * Preset terakhir menang untuk keys yang konflik. */ declare function mergePresets(...presets: Array): typeof defaultPreset; export { type PresetComponentConfig, type PresetExtension, type PresetOptions, createPreset, defaultGlobalCss, defaultPreset, defaultThemeCss, designTokens, extendPreset, generateTailwindConfig, generateTailwindCss, mergePresets };