@una-ui/preset 0.61.0 → 1.0.0-alpha.2

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 (8) hide show
  1. package/dist/index.d.mts +2 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.mjs +71 -47
  4. package/dist/prefixes.mjs +6 -0
  5. package/dist/shared/{preset.f7nEHBBO.mjs → preset.DRPVRXmI.mjs} +247 -225
  6. package/dist/shortcuts.mjs +1 -1
  7. package/package.json +5 -4
  8. package/una.css +93 -136
package/dist/shared/{preset.f7nEHBBO.mjs → preset.DRPVRXmI.mjs} RENAMED
@@ -6,13 +6,13 @@ const staticAccordion = {
6
6
  "accordion-trailing-icon": "i-lucide-chevron-up",
7
7
  "accordion-button-padding": "p-(x-3 y-4)",
8
8
  "accordion-button-default-variant": "btn-text",
9
- "accordion-divider": "divide-(y base)",
10
- "accordion-border": "border-(~ base) rounded-md",
9
+ "accordion-divider": "divide-(y border)",
10
+ "accordion-border": "border-(~ border) rounded-md",
11
11
  // base
12
12
  "accordion": "flex-(~ col) relative w-full",
13
13
  "accordion-item": "w-full",
14
14
  "accordion-button": "justify-start",
15
- "accordion-panel": "text-(muted 0.875em) border-(t $c-divider) accordion-button-padding",
15
+ "accordion-panel": "text-(muted-foreground 0.875em) border-(t border) accordion-button-padding",
16
16
  "accordion-leading": "text-1.2em",
17
17
  "accordion-trailing": "flex transition items-center text-1em duration-300",
18
18
  "accordion-label": "flex w-full text-1em",
@@ -31,35 +31,37 @@ const accordion = [
31
31
 
32
32
  const staticAlert = {
33
33
  // config
34
- "alert-default-variant": "alert-outline",
35
- "alert-info-icon": "i-info",
36
- "alert-error-icon": "i-error",
37
- "alert-success-icon": "i-success",
38
- "alert-warning-icon": "i-warning",
39
- "alert-close-icon": "i-close",
34
+ "alert-info-icon": "i-lucide-info",
35
+ "alert-error-icon": "i-lucide-circle-alert",
36
+ "alert-success-icon": "i-lucide-circle-check",
37
+ "alert-warning-icon": "i-lucide-triangle-alert",
38
+ "alert-close-icon": "i-lucide-x",
40
39
  // base
41
- "alert": "p-1em",
42
- "alert-title": "text-0.875em font-medium text-brand",
43
- "alert-description": "text-0.875em leading-1.4285714285714286em text-brand/90",
44
- "alert-icon-base": "h-1.25em w-1.25em",
45
- "alert-close": "p-0.5em rounded-md hover:bg-brand/10 active:bg-brand/20 transition-colors duration-200",
46
- "alert-close-icon-base": "h-1.2em w-1.2em",
47
- // wrappers
48
- "alert-inner-wrapper": "gap-0.75em flex",
49
- "alert-content-wrapper": "flex flex-col w-full space-y-0.5em",
50
- "alert-icon-wrapper": "-mt-0.2em",
51
- "alert-close-wrapper": "ml-auto pl-0.2em",
52
- "alert-close-inner-wrapper": "-mx-1.1 -my-1.1",
40
+ "alert": "rounded-lg relative grid grid-cols-[0_1fr] w-full items-start gap-y-0.14285714285714285em px-4 py-3 text-0.875em leading-1.4285714285714286em has-[>span[icon-base]]:grid-cols-[calc(var(--spacing)*4)_1fr] [&>span[icon-base]]:translate-y-0.5 has-[>span[icon-base]]:gap-x-0.8571428571428571em [&>span[icon-base]]:text-current [&>span[icon-base]]:square-1.1428571428571428em",
41
+ "alert-title": "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
42
+ "alert-description": "text-muted-foreground col-start-2 grid justify-items-start gap-0.017857142857142856em text-0.875em leading-1.4285714285714286em [&_p]:leading-relaxed",
43
+ "alert-close-wrapper": "absolute right-3 top-3",
53
44
  // static variants
54
- "alert-solid-white": "rounded-md text-brand bg-base n-gray-950 dark:n-white border",
55
- "alert-solid-black": "rounded-md text-brand bg-inverted n-white dark:n-gray-950 border border-foreground"
45
+ "alert-solid-primary": ' bg-primary text-primary-foreground [&_[data-slot="alert-description"]]:text-primary-foreground/90',
46
+ "alert-solid-gray": ' bg-secondary border text-secondary-foreground [&_[data-slot="alert-description"]]:text-secondary-foreground/90',
47
+ "alert-solid-white": ' border text-foreground bg-background [&_[data-slot="alert-description"]]:text-foreground',
48
+ "alert-solid-black": ' text-background bg-foreground [&_[data-slot="alert-description"]]:text-background',
49
+ "alert-soft-gray": ' border bg-card text-card-foreground [&_[data-slot="alert-description"]]:text-card-foreground/90',
50
+ "alert-soft-primary": ' bg-primary/10 text-primary [&_[data-slot="alert-description"]]:text-primary/90',
51
+ "alert-outline-gray": ' bg-background border text-card-foreground [&_[data-slot="alert-description"]]:text-card-foreground/90',
52
+ "alert-outline-primary": 'bg-background border border-primary/90 text-primary [&_[data-slot="alert-description"]]:text-primary/90',
53
+ "alert-text-gray": " border bg-card text-card-foreground",
54
+ "alert-text-primary": 'border border-border bg-card text-primary [&_[data-slot="alert-description"]]:text-primary/90',
55
+ "alert-border-gray": 'border-l-4 rounded-none bg-card text-card-foreground [&_[data-slot="alert-description"]]:text-card-foreground/90',
56
+ "alert-border-primary": 'border-l-4 rounded-0 border-primary/90 bg-primary/10 text-primary [&_[data-slot="alert-description"]]:text-primary/90'
56
57
  };
57
58
  const dynamicAlert = [
58
- // variants
59
- [/^alert-solid(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md text-white bg-${c}-500 dark:bg-${c}-800 n-white dark:n-${c}-400`],
60
- [/^alert-soft(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md bg-${c}-50 text-${c}-400 dark:text-${c}-300 dark:bg-${c}-950 n-${c}-800 dark:n-${c}-100`],
61
- [/^alert-outline(-(\S+))?$/, ([, , c = "primary"]) => `rounded-md border border-${c}-600 dark:border-${c}-500 text-brand n-${c}-600 dark:n-${c}-500`],
62
- [/^alert-border(-(\S+))?$/, ([, , c = "primary"]) => `border-l-4 border-${c}-400 dark:border-${c}-500 bg-${c}-50 dark:bg-${c}-950 text-${c}-400 dark:text-${c}-300 n-${c}-800 dark:n-${c}-100`]
59
+ // dynamic variants
60
+ [/^alert-border(-(\S+))?$/, ([, , c = "primary"]) => `rounded-none border-l-4 border-${c}-600 dark:border-${c}-500 bg-${c}-50 dark:bg-${c}-950 text-${c}-900 dark:text-${c}-100 [&_[data-slot="alert-description"]]:text-${c}-900/90 dark:[&_[data-slot="alert-description"]]:text-${c}-100/90`],
61
+ [/^alert-solid(-(\S+))?$/, ([, , c = "primary"]) => ` bg-${c}-600 dark:bg-${c}-500 text-background [&_[data-slot="alert-description"]]:text-background/90`],
62
+ [/^alert-outline(-(\S+))?$/, ([, , c = "primary"]) => ` bg-background border border-${c}-600 dark:border-${c}-500 text-${c}-600 dark:text-${c}-500 [&_[data-slot="alert-description"]]:text-${c}-600/90 dark:[&_[data-slot="alert-description"]]:text-${c}-500/90`],
63
+ [/^alert-soft(-(\S+))?$/, ([, , c = "primary"]) => ` border-${c}-50 bg-${c}-50 text-${c}-900 dark:border-${c}-950 dark:bg-${c}-950 dark:text-${c}-100 [&_[data-slot="alert-description"]]:text-${c}-900/90 dark:[&_[data-slot="alert-description"]]:text-${c}-100/90`],
64
+ [/^alert-text(-(\S+))?$/, ([, , c = "primary"]) => ` border bg-card text-${c}-600 dark:text-${c}-500 [&_[data-slot="alert-description"]]:text-${c}-600/90 dark:[&_[data-slot="alert-description"]]:text-${c}-500/90`]
63
65
  ];
64
66
  const alert = [
65
67
  ...dynamicAlert,
@@ -74,7 +76,7 @@ const staticAlertDialog = {
74
76
  "alert-dialog-overlay": "fixed inset-0 z-50 bg-black/80",
75
77
  "alert-dialog-content": "bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
76
78
  "alert-dialog-title": "text-lg font-semibold",
77
- "alert-dialog-description": "text-muted text-sm",
79
+ "alert-dialog-description": "text-muted-foreground text-sm",
78
80
  "alert-dialog-header": "flex flex-col gap-2 text-center sm:text-left",
79
81
  "alert-dialog-footer": "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"
80
82
  };
@@ -90,12 +92,12 @@ const staticAspectRatio = {
90
92
  // base
91
93
  "aspect-ratio": "overflow-hidden",
92
94
  // static variants
93
- "aspect-ratio-soft-gray": "bg-muted border border-base",
94
- "aspect-ratio-outline-gray": "bg-base border border-base"
95
+ "aspect-ratio-soft-gray": "bg-muted border border-border",
96
+ "aspect-ratio-outline-gray": "bg-background border border-border"
95
97
  };
96
98
  const dynamicAspectRatio = [
97
- [/^aspect-ratio-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-700/58`],
98
- [/^aspect-ratio-outline(-(\S+))?$/, ([, , c = "gray"]) => `border border-${c}-200 dark:border-${c}-700/58`]
99
+ [/^aspect-ratio-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-800`],
100
+ [/^aspect-ratio-outline(-(\S+))?$/, ([, , c = "gray"]) => `border border-${c}-200 dark:border-${c}-800`]
99
101
  ];
100
102
  const aspectRatio = [
101
103
  ...dynamicAspectRatio,
@@ -110,12 +112,12 @@ const staticAvatar = {
110
112
  "avatar-label": "uppercase",
111
113
  "avatar-icon": "text-1em",
112
114
  // variants
113
- "avatar-solid-white": "bg-base text-base border border-base",
114
- "avatar-solid-black": "bg-inverted text-inverted"
115
+ "avatar-solid-white": "bg-background text-foreground border border-border",
116
+ "avatar-solid-black": "bg-foreground text-background"
115
117
  };
116
118
  const dynamicAvatar = [
117
119
  // variants
118
- [/^avatar-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-600 dark:bg-${c}-500 text-inverted`],
120
+ [/^avatar-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-600 dark:bg-${c}-500 text-background`],
119
121
  [/^avatar-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 text-${c}-700 dark:text-${c}-400 dark:bg-${c}-900`],
120
122
  [/^avatar-outline(-(\S+))?$/, ([, , c = "gray"]) => `bg-transparent text-${c}-500 dark:text-${c}-400 border border-${c}-500 dark:border-${c}-400`]
121
123
  ];
@@ -145,9 +147,9 @@ const staticBadge = {
145
147
  "badge-close": "relative rounded-sm h-1.16em w-1.16em grid place-items-center -mr-0.375em hover:bg-brand/20 bg-transparent",
146
148
  "badge-close-icon-base": "text-brand/75 group-hover:text-brand/90",
147
149
  // variants
148
- "badge-soft-gray": "bg-muted text-muted n-gray-900 dark:n-gray-50 ring-1 ring-gray-700/10 dark:ring-gray-400/30",
149
- "badge-solid-black": "bg-inverted text-inverted n-gray-300 dark:n-gray-600",
150
- "badge-outline-white": "bg-base text-base ring-1 ring-base n-gray-600 dark:n-gray-300"
150
+ "badge-soft-gray": "bg-muted text-muted-foreground n-gray-900 dark:n-gray-50 ring-1 ring-gray-700/10 dark:ring-gray-400/30",
151
+ "badge-solid-black": "bg-foreground text-background n-gray-300 dark:n-gray-600",
152
+ "badge-outline-white": "bg-background text-foreground ring-1 ring-ring n-gray-600 dark:n-gray-300"
151
153
  };
152
154
  const dynamicBadge = [
153
155
  // variants
@@ -169,7 +171,7 @@ const staticBreadcrumb = {
169
171
  "breadcrumb-ellipsis-icon": "i-radix-icons-dots-horizontal",
170
172
  // components
171
173
  "breadcrumb-root": "",
172
- "breadcrumb-list": "flex flex-wrap items-center break-words text-muted",
174
+ "breadcrumb-list": "flex flex-wrap items-center break-words text-muted-foreground",
173
175
  "breadcrumb-link": "transition-colors font-normal px-1.5 sm:px-2.5",
174
176
  "breadcrumb-item": "inline-flex items-center gap-1.5",
175
177
  "breadcrumb-separator": "flex",
@@ -197,7 +199,7 @@ const staticBtn = {
197
199
  "btn-default-variant": "btn-solid",
198
200
  "btn-loading-icon": "i-loading",
199
201
  // base
200
- "btn": "btn-rectangle bg-transparent transition-colors leading-1.4285714285714286em shrink-0 gap-x-0.5714285714285714em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium",
202
+ "btn": "text-foreground btn-rectangle bg-transparent transition-colors leading-1.4285714285714286em shrink-0 gap-x-0.5714285714285714em rounded-md whitespace-nowrap inline-flex justify-center items-center btn-disabled font-medium outline-none",
201
203
  "btn-disabled": "disabled:n-disabled",
202
204
  "btn-label": "",
203
205
  "btn-icon-label": "size-1.1428571428571428em",
@@ -210,35 +212,51 @@ const staticBtn = {
210
212
  "btn-block": "w-full",
211
213
  "btn-reverse": "flex-row-reverse",
212
214
  // variants
213
- "btn-solid-white": "bg-base text-base ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-muted",
214
- "btn-ghost-white": "text-base btn-focus hover:bg-$c-gray-50",
215
- "btn-outline-white": "text-base ring-1 ring-base ring-inset btn-focus hover:bg-$c-gray-50",
216
- "btn-solid-gray": "bg-$c-gray-50 text-$c-gray-800 ring-1 ring-base ring-inset shadow-sm btn-focus hover:bg-$c-gray-100",
217
- "btn-ghost-gray": "text-$c-gray-600 btn-focus hover:bg-$c-gray-100",
218
- "btn-soft-gray": "text-$c-gray-600 bg-$c-gray-50 btn-focus hover:bg-$c-gray-100",
219
- "btn-outline-gray": "text-muted hover:text-$c-gray-600 ring-1 ring-base ring-inset btn-focus hover:bg-$c-gray-50",
220
- "btn-link-gray": "text-muted btn-focus hover:text-base hover:underline underline-offset-4",
221
- "btn-text-gray": "text-$c-gray-600 btn-focus hover:text-$c-gray-900",
222
- "btn-solid-black": "bg-inverted text-inverted shadow-sm btn-focus",
223
- "btn-link-black": "text-base btn-focus hover:underline underline-offset-4",
224
- "btn-text-black": "text-base btn-focus",
225
- "btn-soft-black": "text-base bg-base btn-focus shadow-sm",
226
- "btn-text-muted": "text-muted btn-focus hover:text-accent",
227
- "btn-link-muted": "text-muted btn-focus hover:underline underline-offset-4",
228
- "btn-ghost-muted": "text-accent hover:text-muted btn-focus hover:bg-muted",
229
- "btn-soft-accent": "text-accent bg-accent btn-focus",
230
- "btn-text-accent": "text-accent btn-focus",
231
- "btn-link-accent": "text-accent btn-focus hover:underline underline-offset-4"
215
+ "btn-solid-primary": "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 btn-focus",
216
+ "btn-solid": "btn-solid-primary",
217
+ "btn-solid-gray": "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/90 btn-focus",
218
+ "btn-solid-secondary": "btn-solid-gray",
219
+ "btn-solid-white": "bg-background text-foreground shadow-xs btn-focus",
220
+ "btn-solid-black": "bg-foreground text-background shadow-xs btn-focus",
221
+ "btn-outline-primary": "shadow-xs text-primary bg-background border border-primary hover:bg-primary/10 btn-focus",
222
+ "btn-outline": "btn-outline-primary",
223
+ "btn-outline-gray": "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 btn-focus",
224
+ "btn-outline-white": "text-foreground border shadow-xs hover:bg-input/50 btn-focus",
225
+ "btn-link-primary": "text-primary hover:underline underline-offset-4 btn-focus",
226
+ "btn-link": "btn-link-primary",
227
+ "btn-link-gray": "text-secondary-foreground hover:underline underline-offset-4 btn-focus",
228
+ "btn-link-black": "text-foreground hover:underline underline-offset-4 btn-focus",
229
+ "btn-link-muted": "text-muted-foreground hover:underline underline-offset-4 btn-focus",
230
+ "btn-link-accent": "text-accent-foreground hover:underline underline-offset-4 btn-focus",
231
+ "btn-text-primary": "hover:text-primary text-primary/90 btn-focus",
232
+ "btn-text": "btn-text-primary",
233
+ "btn-text-gray": "hover:text-secondary-foreground text-secondary-foreground/90 btn-focus",
234
+ "btn-text-black": "hover:text-foreground text-foreground/90 btn-focus",
235
+ "btn-text-muted": "hover:text-muted-foreground text-muted-foreground/90 btn-focus",
236
+ "btn-text-accent": "hover:text-accent-foreground text-accent-foreground/90 btn-focus",
237
+ "btn-soft-primary": "bg-primary/10 text-primary shadow-xs hover:bg-primary/15 btn-focus",
238
+ "btn-soft": "btn-soft-primary",
239
+ "btn-soft-gray": "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 btn-focus",
240
+ "btn-soft-secondary": "btn-soft-gray",
241
+ "btn-soft-black": "text-foreground bg-background shadow-xs btn-focus",
242
+ "btn-soft-accent": "text-accent-foreground bg-accent/80 hover:bg-accent btn-focus",
243
+ "btn-ghost-primary": "hover:bg-primary/10 text-primary dark:hover:bg-primary/15 btn-focus",
244
+ "btn-ghost": "btn-ghost-primary",
245
+ "btn-ghost-gray": "hover:text-secondary-foreground hover:bg-secondary/80 btn-focus",
246
+ "btn-ghost-muted": "text-muted-foreground hover:bg-secondary/80 btn-focus",
247
+ "btn-ghost-white": "text-foreground hover:bg-secondary/80 btn-focus",
248
+ "btn-focus-primary": "focus-visible:ring-3px focus-visible:border focus-visible:border-ring focus-visible:ring-ring/50",
249
+ "btn-focus": "btn-focus-primary"
232
250
  };
233
251
  const dynamicBtn = [
234
252
  // base
235
- [/^btn-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-${c}-600 dark:focus-visible:ring-${c}-500`],
253
+ [/^btn-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:border focus-visible:border-${c}-400 dark:focus-visible:border-${c}-800 focus-visible:ring-${c}-400/50 dark:focus-visible:ring-${c}-800/50`],
236
254
  // variants
237
- [/^btn-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-inverted shadow-sm bg-${c}-600 hover:bg-${c}-500 dark:bg-${c}-500 dark:hover:bg-${c}-400`],
238
- [/^btn-text(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-500 hover:text-${c}-500 dark:hover:text-${c}-400`],
239
- [/^btn-outline(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-500 dark:text-${c}-400 ring-1 ring-inset ring-${c}-500 dark:ring-${c}-400 hover:bg-${c}-50 dark:hover:bg-${c}-950`],
240
- [/^btn-soft(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-400 bg-${c}-50 dark:bg-${c}-950 hover:bg-${c}-100 dark:hover:bg-${c}-900`],
241
- [/^btn-ghost(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-400 hover:bg-${c}-100 dark:hover:bg-${c}-900`],
255
+ [/^btn-solid(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-background shadow-xs bg-${c}-600 dark:bg-${c}-500 hover:bg-${c}-600/90 dark:hover:bg-${c}-500/90`],
256
+ [/^btn-text(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} hover:text-${c}-600 hover:dark:text-${c}-500 text-${c}-600/90 dark:text-${c}-500/90`],
257
+ [/^btn-outline(-(\S+))?$/, ([, , c = "primary"]) => `shadow-xs btn-focus-${c} text-${c}-600 dark:text-${c}-500 bg-background dark:bg-input/30 border border-${c}-600/90 dark:border-${c}-500/90 hover:bg-${c}-600/10 dark:hover:bg-${c}-500/15`],
258
+ [/^btn-soft(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-500 bg-${c}-600/10 dark:bg-${c}-500/10 hover:bg-${c}-600/15 dark:hover:bg-${c}-500/15`],
259
+ [/^btn-ghost(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-500 hover:bg-${c}-600/10 dark:hover:bg-${c}-500/10`],
242
260
  [/^btn-link(-(\S+))?$/, ([, , c = "primary"]) => `btn-focus-${c} text-${c}-600 dark:text-${c}-500 hover:underline underline-offset-4`]
243
261
  ];
244
262
  const btn = [
@@ -248,20 +266,26 @@ const btn = [
248
266
 
249
267
  const staticCard = {
250
268
  // base
251
- "card": "rounded-xl shadow text-base",
269
+ "card": "text-card-foreground flex flex-col gap-6 rounded-xl py-6 shadow-sm",
252
270
  // components
253
- "card-header": "flex flex-col gap-y-1.5 p-6",
254
- "card-title": "font-semibold leading-none tracking-tight",
255
- "card-description": "text-sm text-muted",
256
- "card-content": "p-6 pt-0",
257
- "card-footer": "flex items-center p-6 pt-0",
271
+ "card-header": "[@container/card-header]:grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[[data-slot=card-action]]:grid-cols-[1fr_auto] [&.border-b]:pb-6",
272
+ "card-title": "leading-none font-semibold",
273
+ "card-description": "text-muted-foreground text-sm",
274
+ "card-content": "px-6",
275
+ "card-footer": "flex items-center px-6 [&.border-t]:pt-6",
276
+ "card-action": "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
258
277
  // static variants
259
- "card-soft-gray": "bg-muted border border-base",
260
- "card-outline-gray": "bg-base border border-base"
278
+ "card-solid-gray": "bg-card border",
279
+ "card-solid": "card-solid-gray",
280
+ "card-soft-gray": "bg-card",
281
+ "card-soft": "card-soft-gray",
282
+ "card-outline-gray": "bg-background border",
283
+ "card-outline": "card-outline-gray"
261
284
  };
262
285
  const dynamicCard = [
263
- [/^card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900 border-${c}-200 dark:border-${c}-700/58`],
264
- [/^card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border border-${c}-200 dark:border-${c}-700/58`]
286
+ [/^card-solid(-(\S+))?$/, ([, , c = "gray"]) => `border bg-background dark:bg-${c}-900 border-${c}-200 dark:border-${c}-800`],
287
+ [/^card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 dark:bg-${c}-900`],
288
+ [/^card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border bg-background dark:bg-${c}-900 border-${c}-200 dark:border-${c}-800`]
265
289
  ];
266
290
  const card = [
267
291
  ...dynamicCard,
@@ -270,24 +294,28 @@ const card = [
270
294
 
271
295
  const staticCheckbox = {
272
296
  // base
273
- "checkbox": "checkbox-primary text-md w-1em h-1em shrink-0 rounded-sm ring-offset-base focus-visible:outline-none disabled:n-disabled border border-brand bg-brand text-inverted focus-visible:(ring-2 ring-brand ring-offset-2) data-[state=unchecked]:(bg-base text-base)",
297
+ "checkbox": "dark:bg-input/30 square-1em shrink-0 rounded-4px shadow-xs transition-shadow outline-none disabled:n-disabled border border-input dark:border-input",
274
298
  "checkbox-label": "block",
275
299
  "checkbox-reverse": "flex-row-reverse",
276
300
  // wrappers
277
301
  "checkbox-wrapper": "gap-x-3 relative inline-flex items-center hover:cursor-pointer",
278
302
  // icon
279
- "checkbox-indicator": "flex items-center justify-center h-full w-full data-[state=unchecked]:opacity-0 transition-base opacity-100 text-inverted",
280
- "checkbox-icon-base": "w-1em h-1em",
303
+ "checkbox-indicator": "flex items-center justify-center text-primary-foreground transition-none",
304
+ "checkbox-icon-base": "square-0.875rem",
281
305
  "checkbox-checked-icon": "i-check",
282
306
  "checkbox-unchecked-icon": "",
283
- "checkbox-indeterminate-icon": "i-lucide-minus"
307
+ "checkbox-indeterminate-icon": "i-lucide-minus",
308
+ "checkbox-focus-primary": "focus-visible:ring-3px focus-visible:border-ring focus-visible:ring-ring/50",
309
+ "checkbox-checked-primary": "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
310
+ "checkbox-checked": "checkbox-checked-primary",
311
+ "checkbox-indeterminate-primary": "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary",
312
+ "checkbox-indeterminate": "checkbox-indeterminate-primary"
284
313
  };
285
314
  const dynamicCheckbox = [
286
- [/^checkbox-(.*)$/, ([, body], { theme }) => {
287
- const color = parseColor(body, theme);
288
- if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
289
- return `n-${body}-600 dark:n-${body}-500`;
290
- }]
315
+ [/^checkbox(-(\S+))?$/, ([, , c = "primary"]) => `checkbox-focus-${c} checkbox-checked-${c} checkbox-indeterminate-${c}`],
316
+ [/^checkbox-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:border-${c}-200 dark:focus-visible:border-${c}-800 focus-visible:ring-${c}-200/50 dark:focus-visible:ring-${c}-800/50`],
317
+ [/^checkbox-indeterminate(-(\S+))?$/, ([, , c = "primary"]) => `data-[state=indeterminate]:(bg-${c}-600 text-${c}-50) dark:data-[state=indeterminate]:(bg-${c}-500 text-${c}-900)`],
318
+ [/^checkbox-checked(-(\S+))?$/, ([, , c = "primary"]) => `data-[state=checked]:(bg-${c}-600 text-${c}-50) dark:data-[state=checked]:(bg-${c}-500 text-${c}-900)`]
291
319
  ];
292
320
  const checkbox = [
293
321
  ...dynamicCheckbox,
@@ -317,15 +345,15 @@ const staticCombobox = {
317
345
  "combobox-trigger": "px-0.8571428571428571em min-w-200px w-full justify-between font-normal [&>span]:truncate",
318
346
  "combobox-trigger-trailing": "size-1.1428571428571428em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[status=default]:(n-disabled) rtl:mr-auto ltr:ml-auto",
319
347
  "combobox-trigger-leading": "size-1.1428571428571428em",
320
- "combobox-item": "data-[highlighted]:bg-accent data-[highlighted]:text-accent relative flex cursor-default items-center gap-2 rounded-sm px-0.5em py-0.375em text-1em outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
348
+ "combobox-item": "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-0.5em py-0.375em text-1em outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
321
349
  "combobox-item-indicator": "ml-auto",
322
350
  "combobox-item-indicator-icon": "",
323
351
  "combobox-item-indicator-icon-name": "i-check",
324
352
  "combobox-anchor": "w-full",
325
353
  "combobox-empty": "py-1.7142857142857142em text-center text-1em leading-1.4285714285714286em",
326
354
  "combobox-group": "overflow-hidden p-0.2857142857142857em text-foreground",
327
- "combobox-label": "px-0.6666666666666666em py-0.5em text-0.8571428571428571em leading-1.1428571428571428em text-muted font-medium px-2",
328
- "combobox-list": "z-50 w-[--reka-popper-anchor-width] rounded-md border bg-popover text-popover overflow-hidden shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
355
+ "combobox-label": "px-0.6666666666666666em py-0.5em text-0.8571428571428571em leading-1.1428571428571428em text-muted-foreground font-medium",
356
+ "combobox-list": "z-50 w-[--reka-popper-anchor-width] rounded-md border bg-popover text-popover-foreground overflow-hidden shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
329
357
  "combobox-separator": "bg-border -mx-1 h-px",
330
358
  "combobox-viewport": "max-h-300px scroll-py-1 overflow-x-hidden overflow-y-auto"
331
359
  };
@@ -341,13 +369,13 @@ const staticDialog = {
341
369
  // base
342
370
  "dialog": "",
343
371
  // sub-components
344
- "dialog-overlay": "fixed inset-0 z-50 bg-black/80",
372
+ "dialog-overlay": "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
345
373
  "dialog-content": "bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
346
374
  "dialog-scroll-overlay": "fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80",
347
- "dialog-scroll-content": "relative z-50 grid w-full max-w-lg my-8 gap-4 border border-base bg-base p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
375
+ "dialog-scroll-content": "relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full",
348
376
  "dialog-header": "flex flex-col gap-y-1.5 text-center sm:text-left",
349
377
  "dialog-title": "text-lg font-semibold leading-none tracking-tight",
350
- "dialog-description": "text-sm text-muted",
378
+ "dialog-description": "text-sm text-muted-foreground",
351
379
  "dialog-close": "absolute right-4 top-4",
352
380
  "dialog-footer": "flex flex-col-reverse sm:flex-row sm:justify-end gap-2"
353
381
  };
@@ -371,7 +399,7 @@ const staticDrawer = {
371
399
  "drawer-handle": "mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]:block",
372
400
  "drawer-header": "flex flex-col gap-1.5 p-4",
373
401
  "drawer-title": "text-foreground font-semibold",
374
- "drawer-description": "text-muted text-sm",
402
+ "drawer-description": "text-muted-foreground text-sm",
375
403
  "drawer-footer": "mt-auto flex flex-col gap-2 p-4"
376
404
  };
377
405
  const dynamicDrawer = [
@@ -385,13 +413,13 @@ const drawer = [
385
413
  const staticDropdownMenu = {
386
414
  // configurations
387
415
  "dropdown-menu": "",
388
- "dropdown-menu-default-variant": "btn-solid-white",
416
+ "dropdown-menu-default-variant": "btn-outline-gray",
389
417
  // dropdown-menu-trigger
390
418
  "dropdown-menu-trigger": "",
391
419
  "dropdown-menu-trigger-leading": "",
392
420
  "dropdown-menu-trigger-trailing": "ml-auto",
393
421
  // dropdown-menu-content
394
- "dropdown-menu-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-md",
422
+ "dropdown-menu-content": "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
395
423
  // dropdown-menu-item
396
424
  "dropdown-menu-item-base": "text-left transition-color focus-visible:outline-0 select-none",
397
425
  "dropdown-menu-item-leading": "",
@@ -410,7 +438,7 @@ const staticDropdownMenu = {
410
438
  "dropdown-menu-sub-trigger-leading": "",
411
439
  "dropdown-menu-sub-trigger-trailing": "ml-auto opacity-75",
412
440
  "dropdown-menu-sub-trigger-trailing-icon": "i-lucide-chevron-right",
413
- "dropdown-menu-sub-content": "z-50 min-w-32 overflow-hidden rounded-md border border-base bg-popover p-1 text-popover shadow-lg"
441
+ "dropdown-menu-sub-content": "z-50 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg"
414
442
  };
415
443
  const dynamicDropdownMenu = [
416
444
  [/^dropdown-menu-([^-]+)-([^-]+)$/, ([, v = "solid", c = "white"]) => `btn-${v}-${c}`],
@@ -425,8 +453,8 @@ const staticForm = {
425
453
  // base
426
454
  "form": "",
427
455
  "form-field": "",
428
- "form-field-description": "text-muted",
429
- "form-field-hint": "text-sm leading-none text-muted",
456
+ "form-field-description": "text-muted-foreground",
457
+ "form-field-hint": "text-sm leading-none text-muted-foreground",
430
458
  "form-field-message": "",
431
459
  // wrappers
432
460
  "form-field-top-wrapper": "flex flex-col space-y-1.5 pb-0.5",
@@ -439,7 +467,7 @@ const staticForm = {
439
467
  "form-field-label-required": "after:content-['*'] after:-ms-0.9 after:text-error",
440
468
  "form-message": "text-0.8rem font-medium transition-all duration-1000 ease-in-out text-error",
441
469
  "form-label": "",
442
- "form-description": "text-sm text-muted",
470
+ "form-description": "text-sm text-muted-foreground",
443
471
  "form-item": "space-y-2"
444
472
  };
445
473
  const form = [
@@ -449,8 +477,8 @@ const form = [
449
477
  const staticFormGroup = {
450
478
  // base
451
479
  "form-group": "space-y-2",
452
- "form-group-description": "text-0.8rem text-muted",
453
- "form-group-hint": "text-sm leading-none text-muted",
480
+ "form-group-description": "text-0.8rem text-muted-foreground",
481
+ "form-group-hint": "text-sm leading-none text-muted-foreground",
454
482
  "form-group-message": "text-0.8em transition-all duration-1000 ease-in-out",
455
483
  // wrappers
456
484
  "form-group-top-wrapper": "flex flex-col space-y-1.5",
@@ -464,7 +492,7 @@ const staticFormGroup = {
464
492
  // counter
465
493
  "form-group-counter-wrapper": "text-0.8em",
466
494
  "form-group-counter-error": "text-error",
467
- "form-group-counter-current": "text-accent",
495
+ "form-group-counter-current": "text-accent-foreground",
468
496
  "form-group-counter-separator": "text-muted",
469
497
  "form-group-counter-max": "text-muted"
470
498
  };
@@ -487,14 +515,6 @@ const staticGeneral = {
487
515
  // text-size
488
516
  "text-md": "text-1rem leading-1.5rem",
489
517
  "size-md": "text-md",
490
- // text color
491
- "text-base": "text-$c-foreground",
492
- "text-inverted": "text-$c-background",
493
- "text-muted": "text-$c-muted-foreground",
494
- "text-accent": "text-$c-accent-foreground",
495
- "text-accent-foreground": "text-$c-accent",
496
- "text-popover": "text-$c-popover-foreground",
497
- "text-popover-foreground": "text-$c-popover",
498
518
  "text-info": "text-info-600 dark:text-info-500",
499
519
  "text-info-active": "text-info-500 dark:text-info-400",
500
520
  "text-error": "text-error-600 dark:text-error-500",
@@ -503,25 +523,6 @@ const staticGeneral = {
503
523
  "text-success-active": "text-success-500 dark:text-success-400",
504
524
  "text-warning": "text-warning-600 dark:text-warning-500",
505
525
  "text-warning-active": "text-warning-500 dark:text-warning-400",
506
- // ring
507
- "ring-base": "ring-$c-ring",
508
- "ring-offset-base": "ring-offset-$c-background",
509
- // border
510
- "border-base": "border-$c-border",
511
- "border-foreground": "border-$c-border-foreground",
512
- // divide
513
- "divide-base": "divide-$c-divider",
514
- // bg
515
- "bg-base": "bg-$c-background",
516
- "bg-inverted": "bg-$c-foreground",
517
- "bg-muted": "bg-$c-muted",
518
- "bg-border": "bg-$c-border",
519
- "bg-accent": "bg-$c-accent",
520
- "bg-accent-foreground": "bg-$c-accent-foreground",
521
- "bg-popover": "bg-$c-popover",
522
- "bg-popover-foreground": "bg-$c-popover-foreground",
523
- "fill-base": "fill-$c-background",
524
- "stroke-base": "stroke-$c-border",
525
526
  // transition
526
527
  "transition-base": "transition-all duration-100 ease-out",
527
528
  // overrides
@@ -543,15 +544,15 @@ const staticHoverCard = {
543
544
  "hover-card-default-variant": "outline-gray",
544
545
  // components
545
546
  "hover-card-trigger": "",
546
- "hover-card-content": "bg-base text-popover animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden",
547
- "hover-card-arrow": "!bg-transparent !border-none -mt-1px fill-base stroke-base",
547
+ "hover-card-content": "bg-background text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-none",
548
+ "hover-card-arrow": "!bg-transparent !border-none -mt-1px fill-background stroke-border",
548
549
  // static variants
549
- "hover-card-soft-gray": "bg-muted border border-base",
550
- "hover-card-outline-gray": "bg-base border border-base"
550
+ "hover-card-soft-gray": "bg-muted border border-border",
551
+ "hover-card-outline-gray": "bg-background border border-border"
551
552
  };
552
553
  const dynamicHoverCard = [
553
- [/^hover-card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 fill-${c}-50 stroke-${c}-200 border-${c}-200 dark:(bg-${c}-900 border-${c}-700/58 fill-${c}-900 stroke-${c}-700/58)`],
554
- [/^hover-card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border stroke-${c}-200 border-${c}-200 dark:(border-${c}-700/58 stroke-${c}-700/58)`]
554
+ [/^hover-card-soft(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-50 fill-${c}-50 stroke-${c}-200 border-${c}-200 dark:(bg-${c}-900 border-${c}-800 fill-${c}-900 stroke-${c}-800)`],
555
+ [/^hover-card-outline(-(\S+))?$/, ([, , c = "gray"]) => `border stroke-${c}-200 border-${c}-200 dark:(border-${c}-800 stroke-${c}-800)`]
555
556
  ];
556
557
  const hoverCard = [
557
558
  ...dynamicHoverCard,
@@ -573,7 +574,7 @@ const staticIndicator = {
573
574
  "indicator-default-variant": "indicator-solid",
574
575
  "indicator-default-placement": "indicator-top-right",
575
576
  // base
576
- "indicator": "absolute min-h-1.5em min-w-1.5em flex items-center justify-center rounded-full font-medium py-none px-0.3em ring-2 ring-$c-background",
577
+ "indicator": "absolute min-h-1.5em min-w-1.5em flex items-center justify-center rounded-full font-medium py-none px-0.3em ring-2 ring-background",
577
578
  // indicator type sizes
578
579
  "indicator-dot": "size-0.45em",
579
580
  "indicator-label": "size-0.75em",
@@ -583,10 +584,12 @@ const staticIndicator = {
583
584
  "indicator-top-right": "top-0 -ml-1.3em -mt-0.1em",
584
585
  "indicator-bottom-right": "bottom-0 -ml-1.3em -mb-0.1em",
585
586
  "indicator-top-left": "top-0 left-0 -mr-1.3em -mt-0.1em",
586
- "indicator-bottom-left": "bottom-0 left-0 -mr-1.3em -mb-0.1em"
587
+ "indicator-bottom-left": "bottom-0 left-0 -mr-1.3em -mb-0.1em",
588
+ "indicator-solid-primary": "bg-primary text-primary-foreground",
589
+ "indicator-solid": "indicator-solid-primary"
587
590
  };
588
591
  const dynamicIndicator = [
589
- [/^indicator-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-600 dark:bg-${c}-500 text-inverted`]
592
+ [/^indicator-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-${c}-600 dark:bg-${c}-500 text-background`]
590
593
  ];
591
594
  const indicator = [
592
595
  ...dynamicIndicator,
@@ -604,7 +607,7 @@ const staticInput = {
604
607
  "input-leading-padding": "pl-2.5714285714285716em",
605
608
  "input-trailing-padding": "pr-2.5714285714285716em",
606
609
  // base
607
- "input": "text-base text-0.875em leading-1.4285714285714286em px-0.8571428571428571em w-full focus-visible:outline-none input-disabled placeholder:text-muted block rounded-md shadow-sm bg-transparent transition-colors file:border-0 file:bg-transparent file:text-0.875em file:font-medium",
610
+ "input": "text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground text-0.875em leading-1.4285714285714286em px-0.8571428571428571em bg-transparent w-full focus-visible:outline-none input-disabled placeholder:text-muted-foreground block rounded-md transition-colors file:border-0 file:bg-transparent file:text-0.875em file:font-medium",
608
611
  "input-input": "h-2.5714285714285716em py-0.2857142857142857em",
609
612
  // role='input'
610
613
  "input-textarea": "min-h-4.285714285714286em py-0.5714285714em",
@@ -617,19 +620,23 @@ const staticInput = {
617
620
  "input-loading": "animate-spin square-1em",
618
621
  // wrappers
619
622
  "input-wrapper": "relative flex items-center",
620
- "input-leading-wrapper": "pointer-events-none absolute inset-y-0 start-0 flex items-center px-0.8571428571428571em text-muted",
621
- "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 end-0 flex items-center px-0.8571428571428571em text-muted",
623
+ "input-leading-wrapper": "pointer-events-none absolute inset-y-0 start-0 flex items-center px-0.8571428571428571em text-muted-foreground",
624
+ "input-trailing-wrapper": "pointer-events-none absolute inset-y-0 end-0 flex items-center px-0.8571428571428571em text-muted-foreground",
622
625
  // variants
623
- "input-outline-gray": "border border-input focus-visible:ring-input focus-visible:ring-1",
624
- "input-outline-black": "border border-input focus:ring-$c-foreground focus-visible:ring-1"
626
+ "input-outline-gray": "shadow-xs border bg-transparent dark:bg-input/30 border-input focus-visible:ring-input/50 focus-visible:ring-3px",
627
+ "input-outline-black": "shadow-xs border bg-transparent dark:bg-input/30 border-foreground focus-visible:ring-foreground/50 focus-visible:ring-3px",
628
+ "input-solid-primary": "shadow-xs bg-transparent dark:bg-input/30 border border-ring input-focus",
629
+ "input-solid": "input-solid-primary",
630
+ "input-focus-primary": "focus-visible:ring-3px focus-visible:border-ring focus-visible:ring-ring/50",
631
+ "input-focus": "input-focus-primary"
625
632
  };
626
633
  const dynamicInput = [
627
634
  // config
628
- [/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-${c}-500 dark:focus-visible:ring-${c}-400 focus-visible:ring-1`],
635
+ [/^input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:border-${c}-400 dark:focus-visible:border-${c}-500 focus-visible:ring-${c}-400/50 dark:focus-visible:ring-${c}-500/50`],
629
636
  [/^input-status(-(\S+))?$/, ([, , c = "info"]) => `text-${c}-700 dark:text-${c}-200 placeholder:text-${c}-500 dark:placeholder:text-${c}-400`],
630
637
  // variants
631
- [/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `border border-input input-focus-${c}`],
632
- [/^input-solid(-(\S+))?$/, ([, , c = "primary"]) => `input-focus-${c} border border-${c}-500 dark:border-${c}-400`]
638
+ [/^input-outline(-(\S+))?$/, ([, , c = "primary"]) => `shadow-xs border bg-transparent dark:bg-input/30 border-input input-focus-${c}`],
639
+ [/^input-solid(-(\S+))?$/, ([, , c = "primary"]) => `shadow-xs bg-transparent dark:bg-input/30 input-focus-${c} border border-${c}-500 dark:border-${c}-400`]
633
640
  ];
634
641
  const input = [
635
642
  ...dynamicInput,
@@ -644,7 +651,7 @@ const staticKbd = {
644
651
  };
645
652
  const dynamicKbd = [
646
653
  // modifiers
647
- [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-700/58`],
654
+ [/^kbd-ring(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-inset ring-${c}-200 dark:ring-${c}-800`],
648
655
  // variants
649
656
  [/^kbd-solid(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-${c}-50 text-${c}-500 dark:bg-${c}-900 dark:text-${c}-400`],
650
657
  [/^kbd-outline(-(\S+))?$/, ([, , c = "gray"]) => `kbd-ring-${c} bg-transparent text-${c}-500 dark:text-${c}-400`]
@@ -684,9 +691,9 @@ const staticNavigationMenu = {
684
691
  "navigation-menu-disabled": "n-disabled",
685
692
  // components
686
693
  "navigation-menu-indicator": "absolute data-[state=hidden]:opacity-0 duration-200 top-full data-[state=visible]:animate-fadeIn data-[state=hidden]:animate-fadeOut w-[--reka-navigation-menu-indicator-size] translate-x-[--reka-navigation-menu-indicator-position] mt--3px z-100 flex h-10px items-end justify-center overflow-hidden transition-all",
687
- "navigation-menu-indicator-arrow": "relative top-70% h-12px w-12px rotate-45deg border bg-base",
694
+ "navigation-menu-indicator-arrow": "relative top-70% h-12px w-12px rotate-45deg border bg-background",
688
695
  "navigation-menu-content": "left-0 top-0 w-full md:absolute md:w-auto",
689
- "navigation-menu-viewport": "origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover shadow md:w-[--reka-navigation-menu-viewport-width]",
696
+ "navigation-menu-viewport": "origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow md:w-[--reka-navigation-menu-viewport-width]",
690
697
  "navigation-menu-link": "",
691
698
  "navigation-menu-trigger": "",
692
699
  "navigation-menu-trigger-trailing": "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
@@ -695,7 +702,7 @@ const staticNavigationMenu = {
695
702
  "navigation-menu-content-list": "grid w-400px gap-3 p-4 md:grid-cols-2 lg:w-600px md:w-500px",
696
703
  "navigation-menu-content-item-wrapper": "flex flex-col items-start gap-1",
697
704
  "navigation-menu-content-item-label": "font-semibold leading-none",
698
- "navigation-menu-content-item-description": "line-clamp-2 text-left text-muted leading-5",
705
+ "navigation-menu-content-item-description": "line-clamp-2 text-left text-muted-foreground leading-5",
699
706
  "navigation-menu-list-horizontal": "flex flex-1 list-none items-center justify-center gap-x-1",
700
707
  "navigation-menu-list-vertical": "max-w-none list-none flex-col items-start gap-1 space-x-0",
701
708
  "navigation-menu-viewport-wrapper": "",
@@ -758,7 +765,7 @@ const dynamicPagination = [
758
765
  ],
759
766
  [
760
767
  /^pagination-unselected(?:-([^-]+))?(?:-([^-]+))?$/,
761
- ([, variant = "solid", color = "white"]) => `data-[selected=false]:btn-${variant}-${color}`
768
+ ([, variant = "outline", color = "gray"]) => `data-[selected=false]:btn-${variant}-${color}`
762
769
  ]
763
770
  ];
764
771
  const pagination = [
@@ -771,15 +778,19 @@ const staticPinInput = {
771
778
  "pin-input": "flex items-center gap-2 has-disabled:opacity-50 disabled:cursor-not-allowed",
772
779
  "pin-input-separator-icon": "i-lucide-minus",
773
780
  // components
774
- "pin-input-slot": "relative flex square-2.5714285714285716em items-center justify-center bg-transparent shadow-sm border-y border-r first:rounded-l-md first:border-l last:rounded-r-md text-0.875em leading-1.4285714285714286em transition-all outline-none text-center",
781
+ "pin-input-slot": "relative flex square-2.5714285714285716em items-center justify-center shadow-xs border-y border-r first:rounded-l-md first:border-l last:rounded-r-md text-0.875em leading-1.4285714285714286em transition-all outline-none text-center",
775
782
  "pin-input-group": "flex items-center",
776
- "pin-input-separator": "grid"
783
+ "pin-input-separator": "grid",
784
+ "pin-input-solid-primary": "shadow-xs bg-transparent dark:bg-input/30 border border-ring pin-input-focus",
785
+ "pin-input-solid": "pin-input-solid-primary",
786
+ "pin-input-focus-primary": "focus:ring-3px focus:border focus:border-ring focus:ring-ring/50",
787
+ "pin-input-focus": "pin-input-focus-primary"
777
788
  };
778
789
  const dynamicPinInput = [
779
- [/^pin-input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-${c}-500 dark:focus-visible:ring-${c}-400 focus:z-10 focus:ring-1`],
790
+ [/^pin-input-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus:ring-3px focus:border focus:border-${c}-400 dark:focus:border-${c}-500 focus:ring-${c}-400/50 dark:focus:ring-${c}-500/50 focus:z-10`],
780
791
  // dynamic preset
781
- [/^pin-input-outline(-(\S+))?$/, ([, , c = "primary"]) => `border-input pin-input-focus-${c}`],
782
- [/^pin-input-solid(-(\S+))?$/, ([, , c = "primary"]) => `border-${c}-500 focus:border dark:border-${c}-400 pin-input-focus-${c}`]
792
+ [/^pin-input-outline(-(\S+))?$/, ([, , c = "primary"]) => `bg-transparent dark:bg-input/30 border-input pin-input-focus-${c}`],
793
+ [/^pin-input-solid(-(\S+))?$/, ([, , c = "primary"]) => `bg-transparent dark:bg-input/30 border-${c}-500 dark:border-${c}-400 pin-input-focus-${c}`]
783
794
  ];
784
795
  const pinInput = [
785
796
  ...dynamicPinInput,
@@ -787,7 +798,7 @@ const pinInput = [
787
798
  ];
788
799
 
789
800
  const staticPopover = {
790
- "popover-content": "z-50 w-72 rounded-md border border-base bg-popover p-4 text-popover shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
801
+ "popover-content": "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
791
802
  };
792
803
  const dynamicPopover = [
793
804
  // dynamic preset
@@ -804,13 +815,20 @@ const staticProgress = {
804
815
  "progress-root": "relative h-0.5em w-full overflow-hidden bg-brand/20",
805
816
  "progress-indicator": "h-full w-full flex-1 bg-brand transition-all",
806
817
  // static
807
- "progress-white": "bg-inverted",
808
- "progress-black": "bg-base"
818
+ "progress-foreground": "n-foreground",
819
+ "progress-background": "n-background",
820
+ "progress-white": "progress-background",
821
+ "progress-black": "progress-foreground",
822
+ "progress-primary": "n-primary",
823
+ "progress-secondary": "n-secondary",
824
+ "progress-accent": "n-accent",
825
+ "progress-destructive": "n-destructive",
826
+ "progress-muted": "n-muted"
809
827
  };
810
828
  const dynamicProgress = [
811
829
  [/^progress-(.*)$/, ([, body], { theme }) => {
812
830
  const color = parseColor(body, theme);
813
- if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
831
+ if (color?.color)
814
832
  return `n-${body}-600 dark:n-${body}-500`;
815
833
  }]
816
834
  ];
@@ -827,17 +845,21 @@ const staticRadioGroup = {
827
845
  // components
828
846
  "radio-group-item-root": "flex flex-col",
829
847
  "radio-group-item-wrapper": "flex items-center gap-2",
830
- "radio-group-item": "aspect-square rounded-full border border-brand text-brand shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-base disabled:n-disabled",
848
+ "radio-group-item": "aspect-square rounded-full border border-brand text-brand shadow-xs focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:n-disabled",
831
849
  "radio-group-item-label": "text-0.875em font-medium",
832
- "radio-group-item-description": "text-0.875em text-muted ml-[calc(1.1em+0.5rem)]",
850
+ "radio-group-item-description": "text-0.875em text-muted-foreground ml-[calc(1.1em+0.5rem)]",
833
851
  "radio-group-indicator": "flex items-center justify-center",
834
852
  "radio-group-indicator-icon-base": "h-0.875em w-0.875em fill-brand",
835
- "radio-group-indicator-icon": "i-dot"
853
+ "radio-group-indicator-icon": "i-dot",
854
+ "radio-group-primary": "n-primary",
855
+ "radio-group-secondary": "n-secondary",
856
+ "radio-group-accent": "n-accent",
857
+ "radio-group-muted": "n-muted"
836
858
  };
837
859
  const dynamicRadioGroup = [
838
860
  [/^radio-group-(.*)$/, ([, body], { theme }) => {
839
861
  const color = parseColor(body, theme);
840
- if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
862
+ if (color?.color)
841
863
  return `n-${body}-600 dark:n-${body}-500`;
842
864
  }]
843
865
  ];
@@ -852,17 +874,17 @@ const staticResizable = {
852
874
  // base
853
875
  "resizable-panel-group": "flex h-full w-full data-[orientation=vertical]:flex-col",
854
876
  "resizable-panel": "",
855
- "resizable-handle": "relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-offset-base focus-visible:outline-none data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90",
877
+ "resizable-handle": "relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-offset-background focus-visible:outline-none data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90",
856
878
  "resizable-handle-icon-wrapper": "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border",
857
879
  "resizable-handle-icon": "square-2.5",
858
880
  // static variants
859
881
  "resizable-handle-solid-gray": "bg-border focus-visible:ring-foreground/58",
860
- "resizable-handle-solid-black": "bg-inverted focus-visible:ring-foreground/58",
861
- "resizable-handle-outline-gray": "ring-1 ring-base focus-visible:ring-foreground/58"
882
+ "resizable-handle-solid-black": "bg-foreground focus-visible:ring-foreground/58",
883
+ "resizable-handle-outline-gray": "ring-1 ring-ring focus-visible:ring-foreground/58"
862
884
  };
863
885
  const dynamicResizable = [
864
- [/^resizable-handle-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-200 dark:bg-${c}-700/58 focus-visible:ring-${c}-200 dark:focus-visible:ring-${c}-700/58`],
865
- [/^resizable-handle-outline(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-${c}-200 dark:ring-${c}-700/58 focus-visible:ring-${c}-200 dark:focus-visible:ring-${c}-700/58`]
886
+ [/^resizable-handle-solid(-(\S+))?$/, ([, , c = "gray"]) => `bg-${c}-200 dark:bg-${c}-800 focus-visible:ring-${c}-200 dark:focus-visible:ring-${c}-800`],
887
+ [/^resizable-handle-outline(-(\S+))?$/, ([, , c = "gray"]) => `ring-1 ring-${c}-200 dark:ring-${c}-800 focus-visible:ring-${c}-200 dark:focus-visible:ring-${c}-800`]
866
888
  ];
867
889
  const resizable = [
868
890
  ...dynamicResizable,
@@ -885,8 +907,8 @@ const dynamicScrollArea = [
885
907
  // dynamic preset
886
908
  [/^scroll-area(-(\S+))?$/, ([, , c], { theme }) => {
887
909
  const parsedColor = parseColor$1(c, theme);
888
- if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
889
- return `bg-${c}-200 dark:bg-${c}-700/58`;
910
+ if (parsedColor?.color)
911
+ return `bg-${c}-200 dark:bg-${c}-800`;
890
912
  return void 0;
891
913
  }]
892
914
  ];
@@ -911,11 +933,11 @@ const staticSelect = {
911
933
  "select-trigger-trailing": "size-1.1428571428571428em data-[status=error]:text-error data-[status=success]:text-success data-[status=warning]:text-warning data-[status=info]:text-info data-[status=default]:(n-disabled) rtl:mr-auto ltr:ml-auto",
912
934
  "select-trigger-leading": "size-1.1428571428571428em",
913
935
  "select-value": "text-1em data-[status=error]:text-error-active data-[status=success]:text-success-active data-[status=warning]:text-warning-active data-[status=info]:text-info-active data-[placeholder]:n-disabled",
914
- "select-content": "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-base bg-popover text-popover shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
936
+ "select-content": "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
915
937
  "select-content-popper": "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
916
938
  "select-group": "w-full",
917
939
  "select-separator": "-mx-1 my-1 h-px bg-muted",
918
- "select-item": "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-1em outline-none focus:bg-accent focus:text-accent data-[disabled]:pointer-events-none data-[disabled]:n-disabled",
940
+ "select-item": "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-1em outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:n-disabled",
919
941
  "select-item-indicator": "absolute right-2 size-1.1428571428571428em flex items-center justify-center",
920
942
  "select-item-indicator-icon": "i-check",
921
943
  "select-viewport": "p-1",
@@ -931,13 +953,13 @@ const staticSelect = {
931
953
  const dynamicSelect = [
932
954
  [/^select-([^-]+)-([^-]+)$/, ([, v = "solid", c = "gray"], { theme }) => {
933
955
  const parsedColor = parseColor$1(c, theme);
934
- if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
956
+ if (parsedColor?.color)
935
957
  return `btn-${v}-${c}`;
936
958
  return void 0;
937
959
  }],
938
960
  [/^select-item(-(\S+))?$/, ([, , c = "gray"], { theme }) => {
939
961
  const parsedColor = parseColor$1(c || "gray", theme);
940
- if ((parsedColor?.cssColor?.type === "rgb" || parsedColor?.cssColor?.type === "rgba") && parsedColor.cssColor.components)
962
+ if (parsedColor?.color)
941
963
  return `focus:bg-${c || "gray"}-100 focus:text-${c || "gray"}-800 dark:focus:bg-${c || "gray"}-800 dark:focus:text-${c || "gray"}-100`;
942
964
  return void 0;
943
965
  }]
@@ -951,7 +973,7 @@ const staticSeparator = {
951
973
  // base
952
974
  "separator": "text-md shrink-0 relative",
953
975
  "separator-default-variant": "separator-solid-gray",
954
- "separator-content": "text-0.75em text-muted bg-base absolute flex justify-center items-center",
976
+ "separator-content": "text-0.75em text-muted-foreground bg-background absolute flex justify-center items-center",
955
977
  // orientation states
956
978
  "separator-horizontal": "h-px my-4 w-full border-t-0.0625em",
957
979
  "separator-vertical": "w-px mx-4 h-full border-l-0.0625em",
@@ -965,13 +987,13 @@ const staticSeparator = {
965
987
  "separator-position-bottom": "bottom-4 left-1/2 -translate-x-1/2",
966
988
  "separator-position-top": "top-4 left-1/2 -translate-x-1/2",
967
989
  // static variants
968
- "separator-solid-gray": "border-base"
990
+ "separator-solid-gray": "border-border"
969
991
  };
970
992
  const dynamicSeparator = [
971
993
  // dynamic variants
972
- [/^separator-solid(-(\S+))?$/, ([, , c = "gray"]) => `border-solid border-${c}-200 dark:border-${c}-700/58`],
973
- [/^separator-dashed(-(\S+))?$/, ([, , c = "gray"]) => `border-dashed border-${c}-200 dark:border-${c}-700/58`],
974
- [/^separator-dotted(-(\S+))?$/, ([, , c = "gray"]) => `border-dotted border-${c}-200 dark:border-${c}-700/58`]
994
+ [/^separator-solid(-(\S+))?$/, ([, , c = "gray"]) => `border-solid border-${c}-200 dark:border-${c}-800`],
995
+ [/^separator-dashed(-(\S+))?$/, ([, , c = "gray"]) => `border-dashed border-${c}-200 dark:border-${c}-800`],
996
+ [/^separator-dotted(-(\S+))?$/, ([, , c = "gray"]) => `border-dotted border-${c}-200 dark:border-${c}-800`]
975
997
  ];
976
998
  const separator = [
977
999
  ...dynamicSeparator,
@@ -982,19 +1004,19 @@ const staticSheet = {
982
1004
  // base
983
1005
  "sheet": "",
984
1006
  // sub components
985
- "sheet-content": "fixed z-50 gap-4 bg-base p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
1007
+ "sheet-content": "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
986
1008
  "sheet-portal": "",
987
1009
  "sheet-overlay": "fixed inset-0 z-50 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
988
1010
  "sheet-close": "absolute right-4 top-4",
989
- "sheet-description": "text-sm text-muted",
990
- "sheet-footer": "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2",
991
- "sheet-header": "flex flex-col gap-y-2 text-center sm:text-left",
992
- "sheet-title": "text-lg font-semibold text-base",
1011
+ "sheet-description": "text-sm text-muted-foreground",
1012
+ "sheet-footer": "mt-auto flex flex-col gap-2 p-4",
1013
+ "sheet-header": "flex flex-col gap-1.5 p-4",
1014
+ "sheet-title": "text-foreground font-semibold",
993
1015
  // static variants
994
- "sheet-top": "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
995
- "sheet-right": "inset-y-0 right-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
996
- "sheet-bottom": "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
997
- "sheet-left": "inset-y-0 left-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm"
1016
+ "sheet-right": "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
1017
+ "sheet-left": "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
1018
+ "sheet-top": "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
1019
+ "sheet-bottom": "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t"
998
1020
  };
999
1021
  const dynamicSheet = [
1000
1022
  // dynamic preset
@@ -1062,12 +1084,12 @@ const sidebar = [
1062
1084
 
1063
1085
  const staticSkeleton = {
1064
1086
  // base
1065
- skeleton: "skeleton-gray text-md animate-pulse rounded-md w-full h-0.5em bg-brand"
1087
+ skeleton: "text-md animate-pulse rounded-md w-full h-0.5em bg-brand"
1066
1088
  };
1067
1089
  const dynamicSkeleton = [
1068
1090
  [/^skeleton-(.*)$/, ([, body], { theme }) => {
1069
1091
  const color = parseColor(body, theme);
1070
- if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
1092
+ if (color?.color)
1071
1093
  return `n-${body}-100 dark:n-${body}-800`;
1072
1094
  }]
1073
1095
  ];
@@ -1077,23 +1099,20 @@ const skeleton = [
1077
1099
  ];
1078
1100
 
1079
1101
  const staticSlider = {
1080
- // configurations
1081
- "slider-disabled": "n-disabled",
1082
- "slider-root-vertical": "flex-col w-1em h-full",
1083
- "slider-track-vertical": "w-0.5em h-full",
1084
- "slider-range-vertical": "w-full",
1085
- "slider-thumb-vertical": "w-1.25em h-1.25em",
1086
1102
  // components
1087
- "slider-root": "relative flex w-full touch-none select-none items-center",
1088
- "slider-track": "h-0.5em relative w-full grow overflow-hidden rounded-full bg-muted",
1089
- "slider-range": "absolute h-full bg-brand",
1090
- "slider-thumb": "w-1.25em h-1.25em block border-2 border-brand rounded-full bg-base focus-visible:ring-base ring-offset-base transition-colors disabled:slider-disabled focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
1091
- "slider-accent": "n-gray-300 dark:n-gray-800"
1103
+ "slider-root": "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
1104
+ "slider-track": "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-0.375em data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-0.375em",
1105
+ "slider-range": "bg-brand absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
1106
+ "slider-thumb": "square-1em border-brand bg-background ring-brand/50 block shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-none disabled:n-disabled",
1107
+ "slider-primary": "n-primary",
1108
+ "slider-secondary": "n-secondary",
1109
+ "slider-accent": "n-accent",
1110
+ "slider-muted": "n-muted"
1092
1111
  };
1093
1112
  const dynamicSlider = [
1094
1113
  [/^slider-(.*)$/, ([, body], { theme }) => {
1095
1114
  const color = parseColor(body, theme);
1096
- if ((color?.cssColor?.type === "rgb" || color?.cssColor?.type === "rgba") && color.cssColor.components)
1115
+ if (color?.color)
1097
1116
  return `n-${body}-600 dark:n-${body}-500`;
1098
1117
  }]
1099
1118
  ];
@@ -1104,27 +1123,30 @@ const slider = [
1104
1123
 
1105
1124
  const staticSwitch = {
1106
1125
  // base
1107
- "switch": "h-1.25em w-2.25em switch-disabled inline-flex shrink-0 cursor-pointer items-center border-2 border-transparent rounded-full shadow-sm transition-colors",
1126
+ "switch": "h-1.25em w-2.25em switch-disabled inline-flex shrink-0 cursor-pointer items-center border-2 border-transparent rounded-full shadow-xs transition-colors",
1108
1127
  "switch-disabled": "data-[disabled]:n-disabled",
1109
1128
  // thumb
1110
- "switch-thumb": "square-1em flex items-center justify-center pointer-events-none block rounded-full bg-base shadow-lg ring-0 transition-transform",
1129
+ "switch-thumb": "square-1em flex items-center justify-center pointer-events-none block rounded-full bg-background ring-0 transition-transform",
1111
1130
  "switch-thumb-checked": "translate-x-1.01em",
1112
1131
  "switch-thumb-unchecked": "translate-x-0.03em",
1113
1132
  // icons
1114
1133
  "switch-icon": "text-0.7em",
1115
- "switch-icon-unchecked": "text-muted",
1116
- "switch-icon-checked": "text-muted",
1134
+ "switch-icon-unchecked": "text-muted-foreground",
1135
+ "switch-icon-checked": "text-muted-foreground",
1117
1136
  // loading
1118
- "switch-loading-icon": "text-gray animate-spin text-0.8em",
1137
+ "switch-loading-icon": "text-muted-foreground animate-spin text-0.8em",
1119
1138
  "switch-loading-icon-name": "i-loading",
1120
- "switch-focus-gray": "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base focus-visible:ring-offset-2 focus-visible:ring-offset-background"
1139
+ "switch-checked-primary": "data-[state=checked]:bg-primary",
1140
+ "switch-checked": "switch-checked-primary",
1141
+ "switch-unchecked-gray": "data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
1142
+ "switch-unchecked": "switch-unchecked-gray"
1121
1143
  };
1122
1144
  const dynamicSwitch = [
1123
1145
  // base
1124
- [/^switch-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-${c}-600 dark:focus-visible:ring-${c}-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background`],
1146
+ [/^switch-focus(-(\S+))?$/, ([, , c = "primary"]) => `focus-visible:ring-3px focus-visible:outline-none focus-visible:border focus-visible:border-${c}-200 dark:focus-visible:border-${c}-800 focus-visible:ring-${c}-200/50 dark:focus-visible:ring-${c}-800/50`],
1125
1147
  // variants
1126
1148
  [/^switch-checked(-(\S+))?$/, ([, , c = "primary"]) => `data-[state=checked]:switch-focus-${c} data-[state=checked]:bg-${c}-600 dark:data-[state=checked]:bg-${c}-500`],
1127
- [/^switch-unchecked(-(\S+))?$/, ([, , c = "gray"]) => `data-[state=unchecked]:switch-focus-${c} data-[state=unchecked]:bg-${c}-200 dark:data-[state=unchecked]:bg-${c}-700/58`]
1149
+ [/^switch-unchecked(-(\S+))?$/, ([, , c = "gray"]) => `data-[state=unchecked]:switch-focus-${c} data-[state=unchecked]:bg-${c}-200 dark:data-[state=unchecked]:bg-${c}-800/80`]
1128
1150
  ];
1129
1151
  const _switch = [
1130
1152
  ...dynamicSwitch,
@@ -1135,27 +1157,27 @@ const staticTable = {
1135
1157
  // config
1136
1158
  "table-default-variant": "table-solid-gray",
1137
1159
  // table-root
1138
- "table-root": "relative w-full overflow-x-auto overflow-y-hidden border border-base rounded-md",
1160
+ "table-root": "relative w-full overflow-x-auto overflow-y-hidden border border-border rounded-md",
1139
1161
  "table": "w-full caption-bottom text-sm",
1140
1162
  "table-body": "[&_tr:last-child]:border-0",
1141
- "table-caption": "mt-4 text-sm text-muted",
1163
+ "table-caption": "mt-4 text-sm text-muted-foreground",
1142
1164
  // table-head
1143
- "table-head": "h-12 px-4 text-left align-middle font-medium text-muted [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
1144
- "table-head-pinned": "sticky bg-base",
1165
+ "table-head": "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
1166
+ "table-head-pinned": "sticky bg-background",
1145
1167
  "table-head-pinned-left": "left-0",
1146
1168
  "table-head-pinned-right": "right-0",
1147
1169
  // table-header
1148
- "table-header": "[&_tr]:border-b [&_tr]:border-base",
1170
+ "table-header": "[&_tr]:border-b [&_tr]:border-border",
1149
1171
  // table-row
1150
- "table-row": "border-b border-base transition-colors hover:bg-muted data-[filter=true]:hover:bg-base data-[state=selected]:bg-muted",
1172
+ "table-row": "border-b border-border transition-colors hover:bg-muted/50 data-[filter=true]:hover:bg-background data-[state=selected]:bg-muted",
1151
1173
  // table-cell
1152
1174
  "table-cell": "p-4 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5",
1153
- "table-cell-pinned": "sticky bg-base",
1175
+ "table-cell-pinned": "sticky bg-background",
1154
1176
  "table-cell-pinned-left": "left-0",
1155
1177
  "table-cell-pinned-right": "right-0",
1156
1178
  // table-empty
1157
1179
  "table-empty-row": "",
1158
- "table-empty-cell": "p-4 whitespace-nowrap align-middle text-sm text-muted bg-base",
1180
+ "table-empty-cell": "p-4 whitespace-nowrap align-middle text-sm text-muted-foreground bg-background",
1159
1181
  "table-empty": "flex items-center justify-center py-10",
1160
1182
  // table-loading
1161
1183
  "table-loading-icon": "animate-spin text-lg",
@@ -1166,7 +1188,7 @@ const staticTable = {
1166
1188
  "table-loading-cell": "",
1167
1189
  "table-loading": "absolute inset-x-0 overflow-hidden p-0",
1168
1190
  // table-footer
1169
- "table-footer": "border-t border-base bg-muted font-medium [&>tr]:last:border-b-0"
1191
+ "table-footer": "border-t border-border bg-muted font-medium [&>tr]:last:border-b-0"
1170
1192
  };
1171
1193
  const dynamicTable = [];
1172
1194
  const table = [
@@ -1180,12 +1202,12 @@ const staticTabs = {
1180
1202
  "tabs-disabled": "n-disabled",
1181
1203
  // components
1182
1204
  "tabs-trigger": "py-0.25em h-[calc(100%-1px)]",
1183
- "tabs-list": "bg-muted text-muted inline-flex h-2.5714285714285716em w-fit items-center justify-center rounded-lg p-[3px]",
1205
+ "tabs-list": "bg-muted text-muted-foreground inline-flex h-2.5714285714285716em w-fit items-center justify-center rounded-lg p-[3px]",
1184
1206
  "tabs-content": "flex-1 outline-none"
1185
1207
  };
1186
1208
  const dynamicTabs = [
1187
- [/^tabs-active-([^-]+)-([^-]+)$/, ([, v = "solid", c = "primary"]) => `data-[state=active]:btn-${v}-${c}`],
1188
- [/^tabs-inactive-([^-]+)-([^-]+)$/, ([, v = "solid", c = "primary"]) => `data-[state=inactive]:btn-${v}-${c}`]
1209
+ [/^tabs-active-([^-]+)-([^-]+)$/, ([, v = "outline", c = "gray"]) => `data-[state=active]:btn-${v}-${c}`],
1210
+ [/^tabs-inactive-([^-]+)-([^-]+)$/, ([, v = "outline", c = "gray"]) => `data-[state=inactive]:btn-${v}-${c}`]
1189
1211
  ];
1190
1212
  const tabs = [
1191
1213
  ...dynamicTabs,
@@ -1211,7 +1233,7 @@ const dynamicToast = [
1211
1233
  // dynamic variants
1212
1234
  [/^toast-solid(-(\S+))?$/, ([, , c = "primary"]) => `alert-solid-${c}`],
1213
1235
  [/^toast-soft(-(\S+))?$/, ([, , c = "primary"]) => `alert-soft-${c}`],
1214
- [/^toast-outline(-(\S+))?$/, ([, , c = "primary"]) => `alert-outline-${c} bg-base`],
1236
+ [/^toast-outline(-(\S+))?$/, ([, , c = "primary"]) => `alert-outline-${c} bg-background`],
1215
1237
  [/^toast-border(-(\S+))?$/, ([, , c = "primary"]) => `alert-border-${c}`]
1216
1238
  ];
1217
1239
  const toast = [
@@ -1240,8 +1262,8 @@ const toggle = [
1240
1262
 
1241
1263
  const staticTooltip = {
1242
1264
  "tooltip-content": "z-50 overflow-hidden rounded-md px-0.75em py-0.375em text-xs shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
1243
- "tooltip-white": "border border-base bg-popover text-popover",
1244
- "tooltip-black": "border border-foreground bg-popover-foreground text-popover-foreground"
1265
+ "tooltip-white": "border border-border bg-popover text-popover-foreground",
1266
+ "tooltip-black": "border border-foreground bg-popover-foreground text-popover"
1245
1267
  };
1246
1268
  const dynamicTooltip = [
1247
1269
  [/^tooltip-(.*)$/, ([, c], { theme }) => {