@forthtilliath/shadcn-ui 0.2.0 → 0.3.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 (32) hide show
  1. package/README.md +22 -12
  2. package/dist/components/blocks/accordion.d.ts.map +1 -1
  3. package/dist/components/blocks/animated-tabs.d.ts.map +1 -1
  4. package/dist/components/blocks/animated-tabs.js +0 -18
  5. package/dist/components/blocks/data-table-ext/pagination.d.ts +2 -2
  6. package/dist/components/blocks/data-table-ext/pagination.d.ts.map +1 -1
  7. package/dist/components/blocks/data-table-ext/pagination.js +6 -10
  8. package/dist/components/blocks/data-table-ext/utils/table-config.d.ts.map +1 -1
  9. package/dist/components/blocks/data-table-ext/utils/table-config.js +1 -16
  10. package/dist/components/blocks/data-table.d.ts +1 -1
  11. package/dist/components/blocks/data-table.js +2 -2
  12. package/dist/components/carousel.d.ts.map +1 -1
  13. package/dist/components/carousel.js +0 -1
  14. package/dist/components/chart.d.ts.map +1 -1
  15. package/dist/components/chart.js +3 -2
  16. package/dist/components/form.d.ts +2 -2
  17. package/dist/components/form.d.ts.map +1 -1
  18. package/dist/components/pagination.d.ts.map +1 -1
  19. package/dist/components/pagination.js +6 -1
  20. package/dist/components/sidebar.d.ts.map +1 -1
  21. package/dist/components/sidebar.js +0 -2
  22. package/dist/hooks/use-mobile.js +1 -1
  23. package/dist/styles/themes/brutalist.css +193 -0
  24. package/dist/styles/themes/crt.css +238 -0
  25. package/dist/styles/themes/default.css +2 -1
  26. package/dist/styles/themes/glass.css +178 -0
  27. package/dist/styles/themes/memphis.css +220 -0
  28. package/dist/styles/themes/newspaper.css +204 -0
  29. package/dist/styles/themes/pixel.css +189 -0
  30. package/dist/styles/themes/sketch.css +214 -0
  31. package/dist/styles/themes/synthwave.css +205 -0
  32. package/package.json +55 -48
package/dist/styles/themes/synthwave.css ADDED
@@ -0,0 +1,205 @@
1
+ /*
2
+ * synthwave — Synthwave: sunset sky over a perspective grid, chrome titles, neon gradient buttons.
3
+ *
4
+ * Tokens plus signature effects: plain CSS rules on shadcn's data-slot
5
+ * attributes, active only while this theme is imported. Fonts fall back to
6
+ * system stacks; for the full look, load Rajdhani, Orbitron, Share Tech Mono
7
+ * (e.g. from Google Fonts, or next/font).
8
+ */
9
+
10
+ :root {
11
+ --background: oklch(0.94 0.035 320);
12
+ --foreground: oklch(0.28 0.1 300);
13
+ --card: oklch(0.98 0.02 280);
14
+ --card-foreground: oklch(0.28 0.1 300);
15
+ --popover: oklch(0.98 0.02 280);
16
+ --popover-foreground: oklch(0.28 0.1 300);
17
+ --primary: oklch(0.55 0.24 330);
18
+ --primary-foreground: oklch(1 0 0);
19
+ --secondary: oklch(0.88 0.07 200);
20
+ --secondary-foreground: oklch(0.3 0.1 250);
21
+ --muted: oklch(0.92 0.04 300);
22
+ --muted-foreground: oklch(0.47 0.1 300);
23
+ --accent: oklch(0.88 0.08 80);
24
+ --accent-foreground: oklch(0.35 0.1 50);
25
+ --destructive: oklch(0.54 0.2 25);
26
+ --destructive-foreground: oklch(1 0 0);
27
+ --border: oklch(0.8 0.1 320);
28
+ --input: oklch(0.8 0.1 320);
29
+ --ring: oklch(0.55 0.24 330);
30
+ --chart-1: oklch(0.55 0.24 330);
31
+ --chart-2: oklch(0.62 0.15 200);
32
+ --chart-3: oklch(0.7 0.16 55);
33
+ --chart-4: oklch(0.5 0.22 295);
34
+ --chart-5: oklch(0.75 0.15 150);
35
+ --sidebar: oklch(0.98 0.02 280);
36
+ --sidebar-foreground: oklch(0.28 0.1 300);
37
+ --sidebar-primary: oklch(0.55 0.24 330);
38
+ --sidebar-primary-foreground: oklch(1 0 0);
39
+ --sidebar-accent: oklch(0.88 0.08 80);
40
+ --sidebar-accent-foreground: oklch(0.35 0.1 50);
41
+ --sidebar-border: oklch(0.8 0.1 320);
42
+ --sidebar-ring: oklch(0.55 0.24 330);
43
+ --font-sans:
44
+ "Rajdhani", "Exo 2", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
45
+ sans-serif;
46
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
47
+ --font-mono:
48
+ "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
49
+ "Liberation Mono", monospace;
50
+ --font-display:
51
+ "Orbitron", "Audiowide", "Rajdhani", ui-sans-serif, system-ui,
52
+ -apple-system, "Segoe UI", sans-serif;
53
+ --radius: 0.375rem;
54
+ --shadow-2xs: 0 2px 8px -2px oklch(0.6 0.24 330 / 0.12);
55
+ --shadow-xs: 0 3px 12px -2px oklch(0.6 0.24 330 / 0.15);
56
+ --shadow-sm: 0 4px 16px -2px oklch(0.6 0.24 330 / 0.18);
57
+ --shadow: 0 5px 20px -2px oklch(0.6 0.24 330 / 0.21);
58
+ --shadow-md: 0 6px 24px -2px oklch(0.6 0.24 330 / 0.24);
59
+ --shadow-lg: 0 7px 28px -2px oklch(0.6 0.24 330 / 0.27);
60
+ --shadow-xl: 0 8px 32px -2px oklch(0.6 0.24 330 / 0.3);
61
+ --shadow-2xl: 0 9px 36px -2px oklch(0.6 0.24 330 / 0.33);
62
+ --synth-sky: linear-gradient(
63
+ 180deg,
64
+ oklch(0.93 0.05 250) 0%,
65
+ oklch(0.93 0.06 330) 55%,
66
+ oklch(0.9 0.09 60) 100%
67
+ );
68
+ --synth-grid: oklch(0.6 0.2 330 / 0.35);
69
+ --synth-button: linear-gradient(
70
+ 90deg,
71
+ oklch(0.55 0.24 330),
72
+ oklch(0.5 0.22 295)
73
+ );
74
+ }
75
+
76
+ .dark {
77
+ --background: oklch(0.16 0.07 300);
78
+ --foreground: oklch(0.96 0.03 330);
79
+ --card: oklch(0.2 0.09 300);
80
+ --card-foreground: oklch(0.96 0.03 330);
81
+ --popover: oklch(0.2 0.09 300);
82
+ --popover-foreground: oklch(0.96 0.03 330);
83
+ --primary: oklch(0.72 0.24 350);
84
+ --primary-foreground: oklch(0.16 0.07 300);
85
+ --secondary: oklch(0.83 0.14 200);
86
+ --secondary-foreground: oklch(0.16 0.07 300);
87
+ --muted: oklch(0.26 0.09 300);
88
+ --muted-foreground: oklch(0.8 0.07 320);
89
+ --accent: oklch(0.8 0.16 55);
90
+ --accent-foreground: oklch(0.16 0.07 300);
91
+ --destructive: oklch(0.7 0.21 25);
92
+ --destructive-foreground: oklch(0.16 0.07 300);
93
+ --border: oklch(0.55 0.2 340);
94
+ --input: oklch(0.55 0.2 340);
95
+ --ring: oklch(0.72 0.24 350);
96
+ --chart-1: oklch(0.72 0.24 350);
97
+ --chart-2: oklch(0.83 0.14 200);
98
+ --chart-3: oklch(0.8 0.16 55);
99
+ --chart-4: oklch(0.65 0.22 295);
100
+ --chart-5: oklch(0.85 0.18 150);
101
+ --sidebar: oklch(0.2 0.09 300);
102
+ --sidebar-foreground: oklch(0.96 0.03 330);
103
+ --sidebar-primary: oklch(0.72 0.24 350);
104
+ --sidebar-primary-foreground: oklch(0.16 0.07 300);
105
+ --sidebar-accent: oklch(0.8 0.16 55);
106
+ --sidebar-accent-foreground: oklch(0.16 0.07 300);
107
+ --sidebar-border: oklch(0.55 0.2 340);
108
+ --sidebar-ring: oklch(0.72 0.24 350);
109
+ --font-sans:
110
+ "Rajdhani", "Exo 2", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
111
+ sans-serif;
112
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
113
+ --font-mono:
114
+ "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
115
+ "Liberation Mono", monospace;
116
+ --font-display:
117
+ "Orbitron", "Audiowide", "Rajdhani", ui-sans-serif, system-ui,
118
+ -apple-system, "Segoe UI", sans-serif;
119
+ --radius: 0.375rem;
120
+ --shadow-2xs: 0 0 8px -1px oklch(0.72 0.24 350 / 0.3);
121
+ --shadow-xs: 0 0 13px -1px oklch(0.72 0.24 350 / 0.34);
122
+ --shadow-sm: 0 0 18px -1px oklch(0.72 0.24 350 / 0.38);
123
+ --shadow: 0 0 23px -1px oklch(0.72 0.24 350 / 0.42);
124
+ --shadow-md: 0 0 28px -1px oklch(0.72 0.24 350 / 0.46);
125
+ --shadow-lg: 0 0 33px -1px oklch(0.72 0.24 350 / 0.5);
126
+ --shadow-xl: 0 0 38px -1px oklch(0.72 0.24 350 / 0.54);
127
+ --shadow-2xl: 0 0 43px -1px oklch(0.72 0.24 350 / 0.58);
128
+ --synth-sky: linear-gradient(
129
+ 180deg,
130
+ oklch(0.14 0.06 290) 0%,
131
+ oklch(0.2 0.1 310) 50%,
132
+ oklch(0.42 0.2 350) 85%,
133
+ oklch(0.62 0.19 45) 100%
134
+ );
135
+ --synth-grid: oklch(0.72 0.25 340 / 0.55);
136
+ --synth-button: linear-gradient(
137
+ 90deg,
138
+ oklch(0.78 0.17 55),
139
+ oklch(0.7 0.25 350)
140
+ );
141
+ }
142
+
143
+ /* Signature effects */
144
+
145
+ :where([data-slot="button"][class*="shadow-xs"]):focus-visible {
146
+ outline: 2px solid var(--ring);
147
+ outline-offset: 2px;
148
+ }
149
+
150
+ body {
151
+ background-color: var(--background);
152
+ background-image: var(--synth-sky);
153
+ background-attachment: fixed;
154
+ }
155
+
156
+ /* Neon grid on the horizon, in perspective. */
157
+ body::before {
158
+ content: "";
159
+ position: fixed;
160
+ left: -50%;
161
+ right: -50%;
162
+ bottom: 0;
163
+ height: 45vh;
164
+ z-index: -1;
165
+ pointer-events: none;
166
+ background-image:
167
+ linear-gradient(var(--synth-grid) 1px, transparent 1px),
168
+ linear-gradient(90deg, var(--synth-grid) 1px, transparent 1px);
169
+ background-size: 48px 48px;
170
+ transform: perspective(320px) rotateX(62deg);
171
+ transform-origin: bottom;
172
+ mask-image: linear-gradient(to top, black 10%, transparent 90%);
173
+ }
174
+
175
+ [data-slot="card"] {
176
+ border: 1px solid var(--border);
177
+ box-shadow: var(--shadow-lg);
178
+ }
179
+
180
+ [data-slot="card-title"],
181
+ [data-slot="dialog-title"],
182
+ [data-slot="alert-dialog-title"],
183
+ [data-slot="sheet-title"],
184
+ [data-slot="drawer-title"] {
185
+ font-family: var(--font-display);
186
+ text-transform: uppercase;
187
+ letter-spacing: 0.06em;
188
+ background: linear-gradient(180deg, var(--foreground) 35%, var(--primary));
189
+ -webkit-background-clip: text;
190
+ background-clip: text;
191
+ color: transparent;
192
+ }
193
+
194
+ [data-slot="button"][class*="shadow-xs"] {
195
+ font-style: italic;
196
+ font-weight: 700;
197
+ text-transform: uppercase;
198
+ letter-spacing: 0.08em;
199
+ }
200
+
201
+ [data-slot="button"][class*="bg-primary"] {
202
+ background-image: var(--synth-button);
203
+ border: 0;
204
+ box-shadow: var(--shadow-md);
205
+ }
package/package.json CHANGED
@@ -1,47 +1,50 @@
1
1
  {
2
2
  "name": "@forthtilliath/shadcn-ui",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
+ "sideEffects": [
6
+ "*.css"
7
+ ],
5
8
  "license": "MIT",
6
9
  "publishConfig": {
7
10
  "access": "public"
8
11
  },
9
12
  "repository": {
10
13
  "type": "git",
11
- "url": "https://github.com/Forthtilliath/turborepo.git",
14
+ "url": "https://github.com/Forthtilliath/forthtilliath-packages.git",
12
15
  "directory": "packages/react/shadcn-ui"
13
16
  },
14
- "homepage": "https://github.com/Forthtilliath/turborepo/tree/main/packages/react/shadcn-ui#readme",
15
- "bugs": "https://github.com/Forthtilliath/turborepo/issues",
17
+ "homepage": "https://github.com/Forthtilliath/forthtilliath-packages/tree/main/packages/react/shadcn-ui#readme",
18
+ "bugs": "https://github.com/Forthtilliath/forthtilliath-packages/issues",
16
19
  "dependencies": {
17
- "@hookform/resolvers": "^5.4.0",
18
- "@radix-ui/react-accordion": "^1.2.16",
19
- "@radix-ui/react-alert-dialog": "^1.1.19",
20
- "@radix-ui/react-aspect-ratio": "^1.1.11",
21
- "@radix-ui/react-avatar": "^1.2.2",
22
- "@radix-ui/react-checkbox": "^1.3.7",
23
- "@radix-ui/react-collapsible": "^1.1.16",
24
- "@radix-ui/react-context-menu": "^2.3.3",
25
- "@radix-ui/react-dialog": "^1.1.19",
26
- "@radix-ui/react-dropdown-menu": "^2.1.20",
27
- "@radix-ui/react-hover-card": "^1.1.19",
20
+ "@hookform/resolvers": "^5.7.1",
21
+ "@radix-ui/react-accordion": "^1.2.20",
22
+ "@radix-ui/react-alert-dialog": "^1.1.23",
23
+ "@radix-ui/react-aspect-ratio": "^1.1.15",
24
+ "@radix-ui/react-avatar": "^1.2.6",
25
+ "@radix-ui/react-checkbox": "^1.3.11",
26
+ "@radix-ui/react-collapsible": "^1.1.20",
27
+ "@radix-ui/react-context-menu": "^2.3.7",
28
+ "@radix-ui/react-dialog": "^1.1.23",
29
+ "@radix-ui/react-dropdown-menu": "^2.1.24",
30
+ "@radix-ui/react-hover-card": "^1.1.23",
28
31
  "@radix-ui/react-icons": "^1.3.2",
29
- "@radix-ui/react-label": "^2.1.11",
30
- "@radix-ui/react-menubar": "^1.1.20",
31
- "@radix-ui/react-navigation-menu": "^1.2.18",
32
- "@radix-ui/react-popover": "^1.1.19",
33
- "@radix-ui/react-progress": "^1.1.12",
34
- "@radix-ui/react-radio-group": "^1.4.3",
35
- "@radix-ui/react-scroll-area": "^1.2.14",
36
- "@radix-ui/react-select": "^2.3.3",
37
- "@radix-ui/react-separator": "^1.1.11",
38
- "@radix-ui/react-slider": "^1.4.3",
39
- "@radix-ui/react-slot": "^1.3.0",
40
- "@radix-ui/react-switch": "^1.3.3",
41
- "@radix-ui/react-tabs": "^1.1.17",
42
- "@radix-ui/react-toggle": "^1.1.14",
43
- "@radix-ui/react-toggle-group": "^1.1.15",
44
- "@radix-ui/react-tooltip": "^1.2.12",
32
+ "@radix-ui/react-label": "^2.1.15",
33
+ "@radix-ui/react-menubar": "^1.1.24",
34
+ "@radix-ui/react-navigation-menu": "^1.2.22",
35
+ "@radix-ui/react-popover": "^1.1.23",
36
+ "@radix-ui/react-progress": "^1.1.16",
37
+ "@radix-ui/react-radio-group": "^1.4.7",
38
+ "@radix-ui/react-scroll-area": "^1.2.18",
39
+ "@radix-ui/react-select": "^2.3.7",
40
+ "@radix-ui/react-separator": "^1.1.15",
41
+ "@radix-ui/react-slider": "^1.4.7",
42
+ "@radix-ui/react-slot": "^1.3.3",
43
+ "@radix-ui/react-switch": "^1.3.7",
44
+ "@radix-ui/react-tabs": "^1.1.21",
45
+ "@radix-ui/react-toggle": "^1.1.18",
46
+ "@radix-ui/react-toggle-group": "^1.1.19",
47
+ "@radix-ui/react-tooltip": "^1.2.16",
45
48
  "@tanstack/react-table": "^8.21.3",
46
49
  "class-variance-authority": "^0.7.1",
47
50
  "clsx": "^2.1.1",
@@ -50,32 +53,36 @@
50
53
  "date-fns-tz": "^3.2.0",
51
54
  "embla-carousel-react": "^8.6.0",
52
55
  "input-otp": "^1.4.2",
53
- "lucide-react": "^1.24.0",
54
- "motion": "^12.42.2",
56
+ "lucide-react": "^1.31.0",
57
+ "motion": "^12.43.0",
55
58
  "next-themes": "^0.4.6",
56
- "react": "^19.2.7",
57
59
  "react-day-picker": "^10.0.1",
58
- "react-dom": "^19.2.7",
59
- "react-hook-form": "^7.81.0",
60
+ "react-hook-form": "^7.85.0",
60
61
  "react-resizable-panels": "^4.12.2",
61
- "recharts": "^3.9.2",
62
- "sonner": "^2.0.7",
62
+ "recharts": "^3.10.1",
63
+ "sonner": "2.0.7",
63
64
  "tailwind-merge": "^3.6.0",
64
65
  "tw-animate-css": "^1.4.0",
65
66
  "vaul": "^1.1.2",
66
67
  "zod": "^4.4.3"
67
68
  },
69
+ "peerDependencies": {
70
+ "react": ">=19",
71
+ "react-dom": ">=19"
72
+ },
68
73
  "devDependencies": {
69
- "@tailwindcss/postcss": "4.1.12",
70
- "@turbo/gen": "^2.10.5",
71
- "@types/node": "^26.1.1",
72
- "@types/react": "^19.2.17",
73
- "@types/react-dom": "^19.2.3",
74
+ "@tailwindcss/postcss": "4.3.3",
75
+ "@turbo/gen": "^2.10.9",
76
+ "@types/node": "^26.2.0",
77
+ "@types/react": "^19.2.18",
78
+ "@types/react-dom": "^19.2.4",
74
79
  "eslint": "10.7.0",
75
- "tailwindcss": "4.1.12",
80
+ "react": "^19.2.8",
81
+ "react-dom": "^19.2.8",
82
+ "tailwindcss": "4.3.3",
76
83
  "typescript": "^5.9.3",
77
- "@forthtilliath/eslint-config": "0.0.0",
78
- "@forthtilliath/typescript-config": "0.0.0"
84
+ "@forthtilliath/eslint-config": "0.8.0",
85
+ "@forthtilliath/typescript-config": "0.1.1"
79
86
  },
80
87
  "files": [
81
88
  "dist"
@@ -89,9 +96,9 @@
89
96
  "scripts": {
90
97
  "lint": "eslint . --max-warnings 0",
91
98
  "check-types": "tsc --noEmit",
92
- "clean": "rm -rf dist",
99
+ "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
93
100
  "dev": "tsc --watch",
94
101
  "build": "pnpm run clean && tsc",
95
- "postbuild": "node -e \"require('node:fs').cpSync('src/styles', 'dist/styles', { recursive: true })\""
102
+ "postbuild": "node -e \"require('node:fs').cpSync('src/styles', 'dist/styles', { recursive: true })\" && node scripts/add-dist-import-extensions.js"
96
103
  }
97
104
  }