@tailwind-styled/preset 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +21 -0
  2. package/src/defaultPreset.ts +171 -0
  3. package/tsconfig.json +9 -0
package/package.json ADDED
@@ -0,0 +1,21 @@
1
+ {
2
+ "name": "@tailwind-styled/preset",
3
+ "version": "2.0.0",
4
+ "description": "Default Tailwind preset for tailwind-styled-v4 — zero-config styling",
5
+ "license": "MIT",
6
+ "type": "module",
7
+ "main": "./dist/defaultPreset.cjs",
8
+ "module": "./dist/defaultPreset.js",
9
+ "types": "./dist/defaultPreset.d.ts",
10
+ "exports": {
11
+ ".": {
12
+ "types": "./dist/defaultPreset.d.ts",
13
+ "import": "./dist/defaultPreset.js",
14
+ "require": "./dist/defaultPreset.cjs"
15
+ }
16
+ },
17
+ "scripts": {
18
+ "build": "tsup src/defaultPreset.ts --format cjs,esm --dts --out-dir dist --clean",
19
+ "dev": "tsup src/defaultPreset.ts --format cjs,esm --dts --out-dir dist --watch"
20
+ }
21
+ }
package/src/defaultPreset.ts ADDED
@@ -0,0 +1,171 @@
1
+ /**
2
+ * tailwind-styled-v4 — Default Preset
3
+ *
4
+ * Tailwind config built-in yang dipakai ketika developer tidak punya
5
+ * tailwind.config.ts / tailwind.config.js di project mereka.
6
+ *
7
+ * Developer tidak perlu setup apapun:
8
+ * npm install tailwind-styled-v4
9
+ * → langsung bisa tw.div`p-4 bg-blue-500`
10
+ *
11
+ * Preset ini juga menyediakan design tokens yang consistent
12
+ * untuk semua project yang pakai tailwind-styled-v4.
13
+ *
14
+ * Override per-project:
15
+ * // tailwind.config.ts
16
+ * import { defaultPreset } from "tailwind-styled-v4/preset"
17
+ * export default { presets: [defaultPreset], theme: { extend: {...} } }
18
+ */
19
+
20
+ // ─────────────────────────────────────────────────────────────────────────────
21
+ // Content paths — auto-detect berdasarkan project structure
22
+ // ─────────────────────────────────────────────────────────────────────────────
23
+
24
+ const STANDARD_CONTENT_PATHS = [
25
+ // Next.js App Router
26
+ "./src/**/*.{tsx,ts,jsx,js,mdx}",
27
+ "./app/**/*.{tsx,ts,jsx,js,mdx}",
28
+ "./pages/**/*.{tsx,ts,jsx,js,mdx}",
29
+ "./components/**/*.{tsx,ts,jsx,js,mdx}",
30
+ // Vite / React
31
+ "./src/**/*.{tsx,ts,jsx,js}",
32
+ "./index.html",
33
+ // Monorepo
34
+ "../../packages/**/src/**/*.{tsx,ts,jsx,js}",
35
+ ]
36
+
37
+ // ─────────────────────────────────────────────────────────────────────────────
38
+ // Design tokens — consistent across all tailwind-styled-v4 projects
39
+ // ─────────────────────────────────────────────────────────────────────────────
40
+
41
+ export const designTokens = {
42
+ colors: {
43
+ // Brand
44
+ primary: { DEFAULT: "#3b82f6", hover: "#2563eb", active: "#1d4ed8", foreground: "#ffffff" },
45
+ secondary: { DEFAULT: "#6366f1", hover: "#4f46e5", active: "#4338ca", foreground: "#ffffff" },
46
+ accent: { DEFAULT: "#f59e0b", hover: "#d97706", active: "#b45309", foreground: "#000000" },
47
+ // Semantic
48
+ success: { DEFAULT: "#10b981", foreground: "#ffffff" },
49
+ warning: { DEFAULT: "#f59e0b", foreground: "#000000" },
50
+ danger: { DEFAULT: "#ef4444", foreground: "#ffffff" },
51
+ info: { DEFAULT: "#3b82f6", foreground: "#ffffff" },
52
+ // Neutral
53
+ surface: "#18181b",
54
+ border: "#27272a",
55
+ muted: "#71717a",
56
+ subtle: "#3f3f46",
57
+ },
58
+
59
+ fontFamily: {
60
+ sans: ["InterVariable", "Inter", "system-ui", "sans-serif"],
61
+ mono: ["JetBrains Mono", "Fira Code", "Consolas", "monospace"],
62
+ },
63
+
64
+ borderRadius: {
65
+ sm: "0.25rem",
66
+ DEFAULT: "0.5rem",
67
+ md: "0.5rem",
68
+ lg: "0.75rem",
69
+ xl: "1rem",
70
+ "2xl": "1.5rem",
71
+ full: "9999px",
72
+ },
73
+
74
+ animation: {
75
+ "fade-in": "fadeIn 0.2s ease-out",
76
+ "fade-out": "fadeOut 0.2s ease-in",
77
+ "slide-up": "slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
78
+ "slide-down": "slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
79
+ "scale-in": "scaleIn 0.2s ease-out",
80
+ },
81
+
82
+ keyframes: {
83
+ fadeIn: { from: { opacity: "0" }, to: { opacity: "1" } },
84
+ fadeOut: { from: { opacity: "1" }, to: { opacity: "0" } },
85
+ slideUp: {
86
+ from: { transform: "translateY(8px)", opacity: "0" },
87
+ to: { transform: "translateY(0)", opacity: "1" },
88
+ },
89
+ slideDown: {
90
+ from: { transform: "translateY(-8px)", opacity: "0" },
91
+ to: { transform: "translateY(0)", opacity: "1" },
92
+ },
93
+ scaleIn: {
94
+ from: { transform: "scale(0.95)", opacity: "0" },
95
+ to: { transform: "scale(1)", opacity: "1" },
96
+ },
97
+ },
98
+ } as const
99
+
100
+ // ─────────────────────────────────────────────────────────────────────────────
101
+ // Default Tailwind Config — dipakai sebagai fallback + preset
102
+ // ─────────────────────────────────────────────────────────────────────────────
103
+
104
+ export const defaultPreset = {
105
+ content: STANDARD_CONTENT_PATHS,
106
+
107
+ darkMode: "class" as const,
108
+
109
+ theme: {
110
+ extend: {
111
+ colors: designTokens.colors,
112
+ fontFamily: designTokens.fontFamily,
113
+ borderRadius: designTokens.borderRadius,
114
+ animation: designTokens.animation,
115
+ keyframes: designTokens.keyframes,
116
+ },
117
+ },
118
+
119
+ plugins: [],
120
+ }
121
+
122
+ // ─────────────────────────────────────────────────────────────────────────────
123
+ // Zero-config tailwind.config.ts generator
124
+ // Dipakai oleh CLI dan withTailwindStyled saat tidak ada user config
125
+ // ─────────────────────────────────────────────────────────────────────────────
126
+
127
+ export function generateTailwindConfig(
128
+ safelistPath = ".tailwind-styled-safelist.json",
129
+ contentPaths = STANDARD_CONTENT_PATHS
130
+ ): string {
131
+ return `import type { Config } from "tailwindcss"
132
+ import { defaultPreset } from "tailwind-styled-v4/preset"
133
+
134
+ // Auto-generated safelist dari tailwind-styled-v4 compiler
135
+ const safelist = (() => {
136
+ try { return require(${JSON.stringify(safelistPath)}) as string[] }
137
+ catch { return [] }
138
+ })()
139
+
140
+ export default {
141
+ presets: [defaultPreset],
142
+ content: ${JSON.stringify(contentPaths, null, 2)},
143
+ safelist,
144
+ } satisfies Config
145
+ `
146
+ }
147
+
148
+ // ─────────────────────────────────────────────────────────────────────────────
149
+ // Zero-config globals.css — tidak perlu @tailwind base dll
150
+ // ─────────────────────────────────────────────────────────────────────────────
151
+
152
+ export const defaultGlobalCss = `@import "tailwindcss";
153
+
154
+ /* tailwind-styled-v4 — zero-config base styles */
155
+ *, *::before, *::after {
156
+ box-sizing: border-box;
157
+ }
158
+
159
+ html {
160
+ -webkit-font-smoothing: antialiased;
161
+ -moz-osx-font-smoothing: grayscale;
162
+ text-rendering: optimizeLegibility;
163
+ }
164
+
165
+ body {
166
+ margin: 0;
167
+ font-family: var(--font-sans, system-ui, sans-serif);
168
+ background: var(--color-background, #09090b);
169
+ color: var(--color-foreground, #fafafa);
170
+ }
171
+ `
package/tsconfig.json ADDED
@@ -0,0 +1,9 @@
1
+ {
2
+ "extends": "../../tsconfig.base.json",
3
+ "compilerOptions": {
4
+ "outDir": "dist",
5
+ "declarationDir": "dist"
6
+ },
7
+ "include": ["src"],
8
+ "exclude": ["node_modules", "dist"]
9
+ }