@llmnative/react 1.18.1 → 1.19.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 (12) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.js +15 -15
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +1392 -1344
  5. package/dist/index.mjs.map +1 -1
  6. package/dist/types/src/Theme.d.ts +7 -0
  7. package/dist/types/src/components/index.d.ts +2 -0
  8. package/dist/types/src/components/ui/DescriptionList.d.ts +38 -0
  9. package/package.json +1 -1
  10. package/themes/cyber.ts +488 -481
  11. package/themes/default.ts +502 -495
  12. package/themes/flat.ts +488 -481
package/themes/flat.ts CHANGED
@@ -1,481 +1,488 @@
1
- import type { Theme, ThemeDefinition, ThemePresetConfig } from '../src/Theme';
2
- import type { MotionRegistry } from '../src/motion';
3
-
4
- export const preset: ThemePresetConfig = {
5
- mode: 'light' as const,
6
- radius: 0.125,
7
- colors: {
8
- background: '0 0% 98%',
9
- foreground: '215 25% 16%',
10
- card: '0 0% 100%',
11
- cardForeground: '215 25% 16%',
12
- popover: '0 0% 100%',
13
- popoverForeground: '215 25% 16%',
14
- primary: '215 25% 27%',
15
- primaryForeground: '210 40% 98%',
16
- secondary: '215 15% 93%',
17
- secondaryForeground: '215 25% 27%',
18
- muted: '215 15% 93%',
19
- mutedForeground: '215 15% 50%',
20
- accent: '215 15% 90%',
21
- accentForeground: '215 25% 27%',
22
- destructive: '0 72% 51%',
23
- destructiveForeground:'0 0% 100%',
24
- success: '142.1 76.2% 36.3%',
25
- successForeground: '0 0% 100%',
26
- warning: '32.1 94.6% 43.7%',
27
- warningForeground: '0 0% 100%',
28
- info: '198.6 88.7% 48.4%',
29
- infoForeground: '0 0% 100%',
30
- border: '215 15% 85%',
31
- input: '215 15% 85%',
32
- ring: '215 25% 27%',
33
- },
34
- dark: {
35
- background: '215 20% 12%',
36
- foreground: '215 10% 85%',
37
- card: '215 20% 15%',
38
- cardForeground: '215 10% 85%',
39
- popover: '215 20% 15%',
40
- popoverForeground: '215 10% 85%',
41
- primary: '215 35% 55%',
42
- primaryForeground: '0 0% 100%',
43
- secondary: '215 20% 20%',
44
- secondaryForeground: '215 10% 75%',
45
- muted: '215 20% 20%',
46
- mutedForeground: '215 10% 55%',
47
- accent: '215 20% 22%',
48
- accentForeground: '215 10% 85%',
49
- destructive: '0 62% 40%',
50
- destructiveForeground:'0 0% 100%',
51
- success: '142.1 70.6% 45.3%',
52
- successForeground: '0 0% 100%',
53
- warning: '32.1 94.6% 55%',
54
- warningForeground: '0 0% 100%',
55
- info: '198.6 88.7% 60%',
56
- infoForeground: '0 0% 100%',
57
- border: '215 20% 22%',
58
- input: '215 20% 22%',
59
- ring: '215 35% 55%',
60
- },
61
- };
62
-
63
- export const motion: MotionRegistry = {
64
- none: {
65
- from: {},
66
- to: {},
67
- transition: { duration: 0, easing: 'linear', properties: ['opacity', 'transform', 'box-shadow'] },
68
- reducedMotion: 'always',
69
- },
70
- fade: {
71
- from: { opacity: 0 },
72
- to: { opacity: 1 },
73
- transition: { duration: 140, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['opacity'] },
74
- reducedMotion: 'respect-user',
75
- },
76
- fadeUp: {
77
- from: { opacity: 0, transform: 'translateY(4px)' },
78
- to: { opacity: 1, transform: 'translateY(0)' },
79
- transition: { duration: 140, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['opacity', 'transform'] },
80
- reducedMotion: 'respect-user',
81
- },
82
- fadeDown: {
83
- from: { opacity: 0, transform: 'translateY(-4px)' },
84
- to: { opacity: 1, transform: 'translateY(0)' },
85
- transition: { duration: 120, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['opacity', 'transform', 'visibility'] },
86
- reducedMotion: 'respect-user',
87
- },
88
- slideFromRight: {
89
- from: { opacity: 0, transform: 'translateX(100%)' },
90
- to: { opacity: 1, transform: 'translateX(0)' },
91
- transition: { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
92
- reducedMotion: 'respect-user',
93
- },
94
- slideFromLeft: {
95
- from: { opacity: 0, transform: 'translateX(-100%)' },
96
- to: { opacity: 1, transform: 'translateX(0)' },
97
- transition: { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
98
- reducedMotion: 'respect-user',
99
- },
100
- slideFromTop: {
101
- from: { opacity: 0, transform: 'translateY(-100%)' },
102
- to: { opacity: 1, transform: 'translateY(0)' },
103
- transition: { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
104
- reducedMotion: 'respect-user',
105
- },
106
- slideFromBottom: {
107
- from: { opacity: 0, transform: 'translateY(100%)' },
108
- to: { opacity: 1, transform: 'translateY(0)' },
109
- transition: { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
110
- reducedMotion: 'respect-user',
111
- },
112
- press: {
113
- from: {},
114
- to: { transform: 'scale(0.99)' },
115
- transition: { duration: 90, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['transform', 'box-shadow'] },
116
- reducedMotion: 'respect-user',
117
- },
118
- imageZoom: {
119
- from: { transform: 'scale(1)' },
120
- to: { transform: 'scale(1.06)' },
121
- transition: { duration: 300, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['transform'] },
122
- reducedMotion: 'respect-user',
123
- },
124
- };
125
-
126
- export const components: Theme = {
127
- Grid: {
128
- // REVERT NOTE (2026-07-15): see themes/default.ts for the full rationale/before-state.
129
- Card: {
130
- wrapperClassName: '',
131
- className: 'rounded-none border-0 bg-transparent shadow-none',
132
- headerClassName: 'flex justify-between border-b-0 bg-transparent px-0 py-2',
133
- bodyClassName: 'p-0 mt-2',
134
- footerClassName: 'border-t-0 bg-transparent px-0 py-2',
135
- loading: false,
136
- },
137
- Table: {
138
- wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm',
139
- className: '',
140
- headerClassName: '',
141
- bodyClassName: '',
142
- footerClassName: '',
143
- scrollClassName: 'overflow-x-auto',
144
- selectedClassName: 'bg-primary/10',
145
- },
146
- Gallery: {
147
- wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm p-3',
148
- className: '',
149
- scrollClassName: '',
150
- headerClassName: '',
151
- bodyClassName: '',
152
- footerClassName: '',
153
- selectedClassName: 'bg-primary/20',
154
- gap: 1,
155
- rowCols: 4,
156
- },
157
- Modal: {
158
- mode: 'form',
159
- size: 'lg',
160
- position: 'center',
161
- wrapperClassName: '',
162
- className: '',
163
- headerClassName: '',
164
- titleClassName: '',
165
- subtitleClassName: 'pr-1 text-muted-foreground',
166
- bodyClassName: '',
167
- footerClassName: '',
168
- iconExpand: 'fullscreen',
169
- iconCollapse: 'fullscreen-exit',
170
- motion: {
171
- center: 'fade',
172
- top: 'slideFromTop',
173
- left: 'slideFromLeft',
174
- right: 'slideFromRight',
175
- bottom: 'slideFromBottom',
176
- backdrop: 'fade',
177
- },
178
- },
179
- },
180
- Table: {
181
- wrapperClassName: '',
182
- className: '',
183
- headerClassName: '',
184
- bodyClassName: '',
185
- footerClassName: '',
186
- scrollClassName: 'overflow-x-auto',
187
- selectedClassName: 'bg-primary/10',
188
- },
189
- Gallery: {
190
- wrapperClassName: '',
191
- className: '',
192
- scrollClassName: '',
193
- headerClassName: '',
194
- bodyClassName: '',
195
- footerClassName: '',
196
- selectedClassName: 'bg-primary/20',
197
- gap: 4,
198
- rowCols: 2,
199
- },
200
- Pagination: {
201
- wrapperClassName: '',
202
- className: '',
203
- stickyClassName: 'fixed bottom-0 left-0 right-0 mx-5',
204
- scrollToTop: false,
205
- scrollBehavior: 'auto',
206
- maxItems: 5,
207
- sticky: true,
208
- align: 'end',
209
- },
210
- Carousel: {
211
- showIndicators: true,
212
- showControls: true,
213
- showCaption: true,
214
- dark: false,
215
- autoPlay: true,
216
- },
217
- Card: {
218
- wrapperClassName: '',
219
- className: '',
220
- headerClassName: 'flex justify-between bg-white/[.15] font-normal',
221
- bodyClassName: 'flex flex-col',
222
- footerClassName: '',
223
- loading: false,
224
- },
225
- Loader: {
226
- wrapperClassName: '',
227
- className: '',
228
- icon: 'loader-2',
229
- title: 'Loading..',
230
- description: '',
231
- },
232
- ActionButton: {
233
- className: 'btn-primary',
234
- badgeClassName: 'rounded-full bg-destructive text-destructive-foreground',
235
- motion: {
236
- press: 'press',
237
- },
238
- },
239
- LoadingButton: {
240
- className: 'btn-primary',
241
- badgeClassName: 'rounded-full bg-destructive text-destructive-foreground',
242
- motion: {
243
- press: 'press',
244
- },
245
- },
246
- LinkButton: {
247
- className: 'btn-outline-secondary',
248
- },
249
- Alert: {
250
- className: '',
251
- },
252
- Badge: {
253
- className: '',
254
- },
255
- Modal: {
256
- size: 'lg',
257
- position: 'center',
258
- wrapperClassName: '',
259
- className: '',
260
- headerClassName: '',
261
- titleClassName: '',
262
- subtitleClassName: 'pr-1 text-muted-foreground',
263
- bodyClassName: '',
264
- footerClassName: '',
265
- iconExpand: 'fullscreen',
266
- iconCollapse: 'fullscreen-exit',
267
- motion: {
268
- center: 'fade',
269
- top: 'slideFromTop',
270
- left: 'slideFromLeft',
271
- right: 'slideFromRight',
272
- bottom: 'slideFromBottom',
273
- backdrop: 'fade',
274
- },
275
- },
276
- Dropdown: {
277
- wrapperClassName: '',
278
- className: '',
279
- triggerClassName: 'btn btn-outline-primary',
280
- badgeClassName: '',
281
- menuClassName: 'border-border/60 bg-popover/95 shadow-lg shadow-black/5 supports-[backdrop-filter]:bg-popover/92',
282
- menuHeaderClass: 'text-muted-foreground/70',
283
- menuItemClass: '',
284
- menuDividerClass: 'bg-border/60',
285
- headerClassName: '',
286
- footerClassName: '',
287
- Menu: {
288
- wrapperClassName: '',
289
- className: 'list-none p-0 m-0',
290
- headerClassName: '',
291
- itemClassName: '',
292
- linkClassName: 'flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent',
293
- iconClassName: 'text-muted-foreground',
294
- textClassName: '',
295
- badgeClassName: '',
296
- arrowClassName: '',
297
- submenuClassName: '',
298
- },
299
- motion: {
300
- open: 'fadeDown',
301
- close: 'fadeDown',
302
- press: 'press',
303
- },
304
- },
305
- Notifications: {
306
- wrapperClassName: '',
307
- Dropdown: {
308
- className: '',
309
- triggerClassName: 'btn btn-link',
310
- menuClassName: 'mt-1 text-[11px] w-[300px] pt-1',
311
- },
312
- },
313
- Select: {
314
- wrapperClassName: '',
315
- className: '',
316
- },
317
- Autocomplete: {
318
- wrapperClassName: '',
319
- className: '',
320
- },
321
- AddressAutocomplete: {
322
- wrapperClassName: '',
323
- className: '',
324
- menuClassName: 'border-border/60 bg-popover/95 shadow-lg shadow-black/5 supports-[backdrop-filter]:bg-popover/92',
325
- itemClassName: '',
326
- },
327
- Form: {
328
- wrapperClassName: '',
329
- buttonSaveClass: 'btn-outline-primary',
330
- buttonDeleteClass: 'btn-outline-danger',
331
- buttonBackClass: 'btn-link',
332
- Card: {
333
- headerClassName: '',
334
- bodyClassName: '',
335
- footerClassName: 'flex items-center justify-end gap-3',
336
- },
337
- },
338
- Menu: {
339
- wrapperClassName: 'flex-1 overflow-auto p-4',
340
- className: 'flex flex-col mb-auto',
341
- headerClassName: '',
342
- itemClassName: '',
343
- linkClassName: 'flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground',
344
- iconClassName: 'mr-1 shrink-0',
345
- textClassName: 'flex-1',
346
- badgeClassName: 'ml-1',
347
- arrowClassName: '',
348
- submenuClassName: 'mt-1 flex flex-col gap-1 pl-4',
349
- },
350
- SideNav: {
351
- wrapperClassName: '',
352
- shellClassName: 'border-r border-border bg-card text-foreground',
353
- overlayClassName: 'shadow-lg',
354
- headerClassName: 'border-b border-border px-1.5 py-2',
355
- navClassName: 'px-1.5 py-2',
356
- footerClassName: 'border-t border-border px-1.5 py-2',
357
- groupLabelClassName: 'text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/70 select-none',
358
- groupDividerClassName: 'bg-border/60',
359
- itemClassName: 'rounded-md',
360
- itemActiveClassName: 'bg-primary/10 text-primary font-medium',
361
- itemChildActiveClassName: 'bg-accent text-foreground font-medium',
362
- itemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/80',
363
- itemIconClassName: '',
364
- itemTextClassName: '',
365
- itemBadgeClassName: 'ml-auto shrink-0 text-[10px] font-semibold leading-none px-1.5 py-[3px] rounded-full bg-primary/15 text-primary',
366
- itemCollapsedBadgeClassName: 'absolute -top-0.5 -right-1 h-[7px] w-[7px] rounded-full bg-primary ring-1 ring-card',
367
- itemToggleClassName: 'shrink-0 flex items-center justify-center w-6 h-6 rounded transition-colors text-muted-foreground/50 hover:text-foreground hover:bg-accent/80',
368
- subItemClassName: 'rounded-sm',
369
- subItemActiveClassName: 'bg-primary/10 text-primary font-medium',
370
- subItemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/80',
371
- collapseButtonClassName: 'shrink-0 flex items-center justify-center rounded-md w-8 h-8 transition-colors text-muted-foreground hover:text-foreground hover:bg-accent/80',
372
- },
373
- Toolbar: {
374
- wrapperClassName: 'z-20 w-full',
375
- stickyClassName: 'sticky top-0',
376
- restingClassName: 'bg-transparent border-transparent shadow-none',
377
- scrolledClassName: 'border-b border-border bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/85',
378
- innerClassName: 'flex min-h-13 items-center gap-3 px-4 md:px-5',
379
- leadingClassName: 'flex min-w-0 items-center gap-2 shrink-0',
380
- centerClassName: 'flex min-w-0 flex-1 items-center gap-3',
381
- trailingClassName: 'flex items-center gap-2 shrink-0',
382
- },
383
- ListCard: {
384
- wrapperClassName: '',
385
- className: '',
386
- activeClassName: 'border-primary/30 bg-primary/10',
387
- inactiveClassName: 'hover:bg-accent/60',
388
- disabledClassName: 'cursor-not-allowed opacity-60',
389
- dashedClassName: 'border-dashed',
390
- compactClassName: 'p-3',
391
- leadingClassName: '',
392
- bodyClassName: '',
393
- headerClassName: '',
394
- titleClassName: '',
395
- descriptionClassName: '',
396
- metaClassName: '',
397
- badgeClassName: '',
398
- trailingClassName: '',
399
- footerClassName: '',
400
- motion: {
401
- press: 'press',
402
- },
403
- },
404
- ProviderSwitcher: {
405
- wrapperClassName: 'w-full',
406
- className: 'w-full',
407
- triggerClassName: 'flex w-full items-center gap-2 rounded-xl px-1.5 py-1.5 text-left text-sm font-semibold text-foreground transition-colors hover:bg-accent/60',
408
- disabledClassName: 'pointer-events-none opacity-60',
409
- iconWrapperClassName: 'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary',
410
- labelClassName: 'block truncate',
411
- captionClassName: 'block truncate text-[11px] font-normal text-muted-foreground/80',
412
- chevronClassName: 'ml-auto shrink-0 text-muted-foreground/70',
413
- itemClassName: '',
414
- itemActiveClassName: '',
415
- itemInactiveClassName: '',
416
- itemMetaClassName: 'text-xs text-muted-foreground',
417
- checkClassName: 'text-primary',
418
- },
419
- Brand: {
420
- wrapperClassName: '',
421
- className: 'flex items-center',
422
- logoClassName: 'flex items-center gap-2 font-semibold',
423
- labelClassName: 'text-sm font-medium',
424
- },
425
- SignIn: {
426
- className: 'flex items-center',
427
- avatarClass: 'mx-2 rounded-full object-cover',
428
- },
429
- Image: {
430
- wrapperClassName: '',
431
- className: '',
432
- motion: {
433
- enter: 'fade',
434
- hover: false,
435
- },
436
- },
437
- ImageAvatar: {
438
- wrapperClassName: '',
439
- className: '',
440
- motion: { enter: 'fade', hover: false },
441
- },
442
- Percentage: {
443
- wrapperClassName: '',
444
- className: '',
445
- },
446
- Tab: {
447
- wrapperClassName: '',
448
- className: '',
449
- menuClassName: '',
450
- itemClassName: '',
451
- contentClassName: '',
452
- triggerClassName: '',
453
- activeTriggerClassName: '',
454
- inactiveTriggerClassName: '',
455
- motion: {
456
- enter: 'fadeUp',
457
- },
458
- },
459
- Code: {
460
- wrapperClassName: '',
461
- className: '',
462
- },
463
- CodeEditor: {
464
- wrapperClassName: '',
465
- className: '',
466
- },
467
- Prompt: {
468
- wrapperClassName: '',
469
- className: '',
470
- },
471
- Repeat: {
472
- itemClassName: '',
473
- inlineItemClassName: '',
474
- addButtonClassName: '',
475
- },
476
- };
477
-
478
- const definition: ThemeDefinition = { preset, motion, components };
479
-
480
- export default definition;
481
-
1
+ import type { Theme, ThemeDefinition, ThemePresetConfig } from '../src/Theme';
2
+ import type { MotionRegistry } from '../src/motion';
3
+
4
+ export const preset: ThemePresetConfig = {
5
+ mode: 'light' as const,
6
+ radius: 0.125,
7
+ colors: {
8
+ background: '0 0% 98%',
9
+ foreground: '215 25% 16%',
10
+ card: '0 0% 100%',
11
+ cardForeground: '215 25% 16%',
12
+ popover: '0 0% 100%',
13
+ popoverForeground: '215 25% 16%',
14
+ primary: '215 25% 27%',
15
+ primaryForeground: '210 40% 98%',
16
+ secondary: '215 15% 93%',
17
+ secondaryForeground: '215 25% 27%',
18
+ muted: '215 15% 93%',
19
+ mutedForeground: '215 15% 50%',
20
+ accent: '215 15% 90%',
21
+ accentForeground: '215 25% 27%',
22
+ destructive: '0 72% 51%',
23
+ destructiveForeground:'0 0% 100%',
24
+ success: '142.1 76.2% 36.3%',
25
+ successForeground: '0 0% 100%',
26
+ warning: '32.1 94.6% 43.7%',
27
+ warningForeground: '0 0% 100%',
28
+ info: '198.6 88.7% 48.4%',
29
+ infoForeground: '0 0% 100%',
30
+ border: '215 15% 85%',
31
+ input: '215 15% 85%',
32
+ ring: '215 25% 27%',
33
+ },
34
+ dark: {
35
+ background: '215 20% 12%',
36
+ foreground: '215 10% 85%',
37
+ card: '215 20% 15%',
38
+ cardForeground: '215 10% 85%',
39
+ popover: '215 20% 15%',
40
+ popoverForeground: '215 10% 85%',
41
+ primary: '215 35% 55%',
42
+ primaryForeground: '0 0% 100%',
43
+ secondary: '215 20% 20%',
44
+ secondaryForeground: '215 10% 75%',
45
+ muted: '215 20% 20%',
46
+ mutedForeground: '215 10% 55%',
47
+ accent: '215 20% 22%',
48
+ accentForeground: '215 10% 85%',
49
+ destructive: '0 62% 40%',
50
+ destructiveForeground:'0 0% 100%',
51
+ success: '142.1 70.6% 45.3%',
52
+ successForeground: '0 0% 100%',
53
+ warning: '32.1 94.6% 55%',
54
+ warningForeground: '0 0% 100%',
55
+ info: '198.6 88.7% 60%',
56
+ infoForeground: '0 0% 100%',
57
+ border: '215 20% 22%',
58
+ input: '215 20% 22%',
59
+ ring: '215 35% 55%',
60
+ },
61
+ };
62
+
63
+ export const motion: MotionRegistry = {
64
+ none: {
65
+ from: {},
66
+ to: {},
67
+ transition: { duration: 0, easing: 'linear', properties: ['opacity', 'transform', 'box-shadow'] },
68
+ reducedMotion: 'always',
69
+ },
70
+ fade: {
71
+ from: { opacity: 0 },
72
+ to: { opacity: 1 },
73
+ transition: { duration: 140, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['opacity'] },
74
+ reducedMotion: 'respect-user',
75
+ },
76
+ fadeUp: {
77
+ from: { opacity: 0, transform: 'translateY(4px)' },
78
+ to: { opacity: 1, transform: 'translateY(0)' },
79
+ transition: { duration: 140, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['opacity', 'transform'] },
80
+ reducedMotion: 'respect-user',
81
+ },
82
+ fadeDown: {
83
+ from: { opacity: 0, transform: 'translateY(-4px)' },
84
+ to: { opacity: 1, transform: 'translateY(0)' },
85
+ transition: { duration: 120, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['opacity', 'transform', 'visibility'] },
86
+ reducedMotion: 'respect-user',
87
+ },
88
+ slideFromRight: {
89
+ from: { opacity: 0, transform: 'translateX(100%)' },
90
+ to: { opacity: 1, transform: 'translateX(0)' },
91
+ transition: { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
92
+ reducedMotion: 'respect-user',
93
+ },
94
+ slideFromLeft: {
95
+ from: { opacity: 0, transform: 'translateX(-100%)' },
96
+ to: { opacity: 1, transform: 'translateX(0)' },
97
+ transition: { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
98
+ reducedMotion: 'respect-user',
99
+ },
100
+ slideFromTop: {
101
+ from: { opacity: 0, transform: 'translateY(-100%)' },
102
+ to: { opacity: 1, transform: 'translateY(0)' },
103
+ transition: { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
104
+ reducedMotion: 'respect-user',
105
+ },
106
+ slideFromBottom: {
107
+ from: { opacity: 0, transform: 'translateY(100%)' },
108
+ to: { opacity: 1, transform: 'translateY(0)' },
109
+ transition: { duration: 180, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', properties: ['opacity', 'transform'] },
110
+ reducedMotion: 'respect-user',
111
+ },
112
+ press: {
113
+ from: {},
114
+ to: { transform: 'scale(0.99)' },
115
+ transition: { duration: 90, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['transform', 'box-shadow'] },
116
+ reducedMotion: 'respect-user',
117
+ },
118
+ imageZoom: {
119
+ from: { transform: 'scale(1)' },
120
+ to: { transform: 'scale(1.06)' },
121
+ transition: { duration: 300, easing: 'cubic-bezier(0.2, 0, 0, 1)', properties: ['transform'] },
122
+ reducedMotion: 'respect-user',
123
+ },
124
+ };
125
+
126
+ export const components: Theme = {
127
+ Grid: {
128
+ // REVERT NOTE (2026-07-15): see themes/default.ts for the full rationale/before-state.
129
+ Card: {
130
+ wrapperClassName: '',
131
+ className: 'rounded-none border-0 bg-transparent shadow-none',
132
+ headerClassName: 'flex justify-between border-b-0 bg-transparent px-0 py-2',
133
+ bodyClassName: 'p-0 mt-2',
134
+ footerClassName: 'border-t-0 bg-transparent px-0 py-2',
135
+ loading: false,
136
+ },
137
+ Table: {
138
+ wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm',
139
+ className: '',
140
+ headerClassName: '',
141
+ bodyClassName: '',
142
+ footerClassName: '',
143
+ scrollClassName: 'overflow-x-auto',
144
+ selectedClassName: 'bg-primary/10',
145
+ },
146
+ Gallery: {
147
+ wrapperClassName: 'rounded-lg border border-border bg-card shadow-sm p-3',
148
+ className: '',
149
+ scrollClassName: '',
150
+ headerClassName: '',
151
+ bodyClassName: '',
152
+ footerClassName: '',
153
+ selectedClassName: 'bg-primary/20',
154
+ gap: 1,
155
+ rowCols: 4,
156
+ },
157
+ Modal: {
158
+ mode: 'form',
159
+ size: 'lg',
160
+ position: 'center',
161
+ wrapperClassName: '',
162
+ className: '',
163
+ headerClassName: '',
164
+ titleClassName: '',
165
+ subtitleClassName: 'pr-1 text-muted-foreground',
166
+ bodyClassName: '',
167
+ footerClassName: '',
168
+ iconExpand: 'fullscreen',
169
+ iconCollapse: 'fullscreen-exit',
170
+ motion: {
171
+ center: 'fade',
172
+ top: 'slideFromTop',
173
+ left: 'slideFromLeft',
174
+ right: 'slideFromRight',
175
+ bottom: 'slideFromBottom',
176
+ backdrop: 'fade',
177
+ },
178
+ },
179
+ },
180
+ Table: {
181
+ wrapperClassName: '',
182
+ className: '',
183
+ headerClassName: '',
184
+ bodyClassName: '',
185
+ footerClassName: '',
186
+ scrollClassName: 'overflow-x-auto',
187
+ selectedClassName: 'bg-primary/10',
188
+ },
189
+ Gallery: {
190
+ wrapperClassName: '',
191
+ className: '',
192
+ scrollClassName: '',
193
+ headerClassName: '',
194
+ bodyClassName: '',
195
+ footerClassName: '',
196
+ selectedClassName: 'bg-primary/20',
197
+ gap: 4,
198
+ rowCols: 2,
199
+ },
200
+ Pagination: {
201
+ wrapperClassName: '',
202
+ className: '',
203
+ stickyClassName: 'fixed bottom-0 left-0 right-0 mx-5',
204
+ scrollToTop: false,
205
+ scrollBehavior: 'auto',
206
+ maxItems: 5,
207
+ sticky: true,
208
+ align: 'end',
209
+ },
210
+ Carousel: {
211
+ showIndicators: true,
212
+ showControls: true,
213
+ showCaption: true,
214
+ dark: false,
215
+ autoPlay: true,
216
+ },
217
+ Card: {
218
+ wrapperClassName: '',
219
+ className: '',
220
+ headerClassName: 'flex justify-between bg-white/[.15] font-normal',
221
+ bodyClassName: 'flex flex-col',
222
+ footerClassName: '',
223
+ loading: false,
224
+ },
225
+ Loader: {
226
+ wrapperClassName: '',
227
+ className: '',
228
+ icon: 'loader-2',
229
+ title: 'Loading..',
230
+ description: '',
231
+ },
232
+ ActionButton: {
233
+ className: 'btn-primary',
234
+ badgeClassName: 'rounded-full bg-destructive text-destructive-foreground',
235
+ motion: {
236
+ press: 'press',
237
+ },
238
+ },
239
+ LoadingButton: {
240
+ className: 'btn-primary',
241
+ badgeClassName: 'rounded-full bg-destructive text-destructive-foreground',
242
+ motion: {
243
+ press: 'press',
244
+ },
245
+ },
246
+ LinkButton: {
247
+ className: 'btn-outline-secondary',
248
+ },
249
+ Alert: {
250
+ className: '',
251
+ },
252
+ Badge: {
253
+ className: '',
254
+ },
255
+ Modal: {
256
+ size: 'lg',
257
+ position: 'center',
258
+ wrapperClassName: '',
259
+ className: '',
260
+ headerClassName: '',
261
+ titleClassName: '',
262
+ subtitleClassName: 'pr-1 text-muted-foreground',
263
+ bodyClassName: '',
264
+ footerClassName: '',
265
+ iconExpand: 'fullscreen',
266
+ iconCollapse: 'fullscreen-exit',
267
+ motion: {
268
+ center: 'fade',
269
+ top: 'slideFromTop',
270
+ left: 'slideFromLeft',
271
+ right: 'slideFromRight',
272
+ bottom: 'slideFromBottom',
273
+ backdrop: 'fade',
274
+ },
275
+ },
276
+ Dropdown: {
277
+ wrapperClassName: '',
278
+ className: '',
279
+ triggerClassName: 'btn btn-outline-primary',
280
+ badgeClassName: '',
281
+ menuClassName: 'border-border/60 bg-popover/95 shadow-lg shadow-black/5 supports-[backdrop-filter]:bg-popover/92',
282
+ menuHeaderClass: 'text-muted-foreground/70',
283
+ menuItemClass: '',
284
+ menuDividerClass: 'bg-border/60',
285
+ headerClassName: '',
286
+ footerClassName: '',
287
+ Menu: {
288
+ wrapperClassName: '',
289
+ className: 'list-none p-0 m-0',
290
+ headerClassName: '',
291
+ itemClassName: '',
292
+ linkClassName: 'flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent',
293
+ iconClassName: 'text-muted-foreground',
294
+ textClassName: '',
295
+ badgeClassName: '',
296
+ arrowClassName: '',
297
+ submenuClassName: '',
298
+ },
299
+ motion: {
300
+ open: 'fadeDown',
301
+ close: 'fadeDown',
302
+ press: 'press',
303
+ },
304
+ },
305
+ Notifications: {
306
+ wrapperClassName: '',
307
+ Dropdown: {
308
+ className: '',
309
+ triggerClassName: 'btn btn-link',
310
+ menuClassName: 'mt-1 text-[11px] w-[300px] pt-1',
311
+ },
312
+ },
313
+ Select: {
314
+ wrapperClassName: '',
315
+ className: '',
316
+ },
317
+ Autocomplete: {
318
+ wrapperClassName: '',
319
+ className: '',
320
+ },
321
+ AddressAutocomplete: {
322
+ wrapperClassName: '',
323
+ className: '',
324
+ menuClassName: 'border-border/60 bg-popover/95 shadow-lg shadow-black/5 supports-[backdrop-filter]:bg-popover/92',
325
+ itemClassName: '',
326
+ },
327
+ Form: {
328
+ wrapperClassName: '',
329
+ buttonSaveClass: 'btn-outline-primary',
330
+ buttonDeleteClass: 'btn-outline-danger',
331
+ buttonBackClass: 'btn-link',
332
+ Card: {
333
+ headerClassName: '',
334
+ bodyClassName: '',
335
+ footerClassName: 'flex items-center justify-end gap-3',
336
+ },
337
+ },
338
+ Menu: {
339
+ wrapperClassName: 'flex-1 overflow-auto p-4',
340
+ className: 'flex flex-col mb-auto',
341
+ headerClassName: '',
342
+ itemClassName: '',
343
+ linkClassName: 'flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground',
344
+ iconClassName: 'mr-1 shrink-0',
345
+ textClassName: 'flex-1',
346
+ badgeClassName: 'ml-1',
347
+ arrowClassName: '',
348
+ submenuClassName: 'mt-1 flex flex-col gap-1 pl-4',
349
+ },
350
+ SideNav: {
351
+ wrapperClassName: '',
352
+ shellClassName: 'border-r border-border bg-card text-foreground',
353
+ overlayClassName: 'shadow-lg',
354
+ headerClassName: 'border-b border-border px-1.5 py-2',
355
+ navClassName: 'px-1.5 py-2',
356
+ footerClassName: 'border-t border-border px-1.5 py-2',
357
+ groupLabelClassName: 'text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground/70 select-none',
358
+ groupDividerClassName: 'bg-border/60',
359
+ itemClassName: 'rounded-md',
360
+ itemActiveClassName: 'bg-primary/10 text-primary font-medium',
361
+ itemChildActiveClassName: 'bg-accent text-foreground font-medium',
362
+ itemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/80',
363
+ itemIconClassName: '',
364
+ itemTextClassName: '',
365
+ itemBadgeClassName: 'ml-auto shrink-0 text-[10px] font-semibold leading-none px-1.5 py-[3px] rounded-full bg-primary/15 text-primary',
366
+ itemCollapsedBadgeClassName: 'absolute -top-0.5 -right-1 h-[7px] w-[7px] rounded-full bg-primary ring-1 ring-card',
367
+ itemToggleClassName: 'shrink-0 flex items-center justify-center w-6 h-6 rounded transition-colors text-muted-foreground/50 hover:text-foreground hover:bg-accent/80',
368
+ subItemClassName: 'rounded-sm',
369
+ subItemActiveClassName: 'bg-primary/10 text-primary font-medium',
370
+ subItemInactiveClassName: 'text-muted-foreground hover:text-foreground hover:bg-accent/80',
371
+ collapseButtonClassName: 'shrink-0 flex items-center justify-center rounded-md w-8 h-8 transition-colors text-muted-foreground hover:text-foreground hover:bg-accent/80',
372
+ },
373
+ Toolbar: {
374
+ wrapperClassName: 'z-20 w-full',
375
+ stickyClassName: 'sticky top-0',
376
+ restingClassName: 'bg-transparent border-transparent shadow-none',
377
+ scrolledClassName: 'border-b border-border bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/85',
378
+ innerClassName: 'flex min-h-13 items-center gap-3 px-4 md:px-5',
379
+ leadingClassName: 'flex min-w-0 items-center gap-2 shrink-0',
380
+ centerClassName: 'flex min-w-0 flex-1 items-center gap-3',
381
+ trailingClassName: 'flex items-center gap-2 shrink-0',
382
+ },
383
+ ListCard: {
384
+ wrapperClassName: '',
385
+ className: '',
386
+ activeClassName: 'border-primary/30 bg-primary/10',
387
+ inactiveClassName: 'hover:bg-accent/60',
388
+ disabledClassName: 'cursor-not-allowed opacity-60',
389
+ dashedClassName: 'border-dashed',
390
+ compactClassName: 'p-3',
391
+ leadingClassName: '',
392
+ bodyClassName: '',
393
+ headerClassName: '',
394
+ titleClassName: '',
395
+ descriptionClassName: '',
396
+ metaClassName: '',
397
+ badgeClassName: '',
398
+ trailingClassName: '',
399
+ footerClassName: '',
400
+ motion: {
401
+ press: 'press',
402
+ },
403
+ },
404
+ ProviderSwitcher: {
405
+ wrapperClassName: 'w-full',
406
+ className: 'w-full',
407
+ triggerClassName: 'flex w-full items-center gap-2 rounded-xl px-1.5 py-1.5 text-left text-sm font-semibold text-foreground transition-colors hover:bg-accent/60',
408
+ disabledClassName: 'pointer-events-none opacity-60',
409
+ iconWrapperClassName: 'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary',
410
+ labelClassName: 'block truncate',
411
+ captionClassName: 'block truncate text-[11px] font-normal text-muted-foreground/80',
412
+ chevronClassName: 'ml-auto shrink-0 text-muted-foreground/70',
413
+ itemClassName: '',
414
+ itemActiveClassName: '',
415
+ itemInactiveClassName: '',
416
+ itemMetaClassName: 'text-xs text-muted-foreground',
417
+ checkClassName: 'text-primary',
418
+ },
419
+ Brand: {
420
+ wrapperClassName: '',
421
+ className: 'flex items-center',
422
+ logoClassName: 'flex items-center gap-2 font-semibold',
423
+ labelClassName: 'text-sm font-medium',
424
+ },
425
+ SignIn: {
426
+ className: 'flex items-center',
427
+ avatarClass: 'mx-2 rounded-full object-cover',
428
+ },
429
+ Image: {
430
+ wrapperClassName: '',
431
+ className: '',
432
+ motion: {
433
+ enter: 'fade',
434
+ hover: false,
435
+ },
436
+ },
437
+ ImageAvatar: {
438
+ wrapperClassName: '',
439
+ className: '',
440
+ motion: { enter: 'fade', hover: false },
441
+ },
442
+ Percentage: {
443
+ wrapperClassName: '',
444
+ className: '',
445
+ },
446
+ DescriptionList: {
447
+ wrapperClassName: '',
448
+ className: '',
449
+ itemClassName: '',
450
+ labelClassName: '',
451
+ valueClassName: '',
452
+ },
453
+ Tab: {
454
+ wrapperClassName: '',
455
+ className: '',
456
+ menuClassName: '',
457
+ itemClassName: '',
458
+ contentClassName: '',
459
+ triggerClassName: '',
460
+ activeTriggerClassName: '',
461
+ inactiveTriggerClassName: '',
462
+ motion: {
463
+ enter: 'fadeUp',
464
+ },
465
+ },
466
+ Code: {
467
+ wrapperClassName: '',
468
+ className: '',
469
+ },
470
+ CodeEditor: {
471
+ wrapperClassName: '',
472
+ className: '',
473
+ },
474
+ Prompt: {
475
+ wrapperClassName: '',
476
+ className: '',
477
+ },
478
+ Repeat: {
479
+ itemClassName: '',
480
+ inlineItemClassName: '',
481
+ addButtonClassName: '',
482
+ },
483
+ };
484
+
485
+ const definition: ThemeDefinition = { preset, motion, components };
486
+
487
+ export default definition;
488
+