@vuecs/theme-tailwind 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/LICENSE +201 -0
  2. package/README.md +40 -0
  3. package/assets/index.css +172 -0
  4. package/dist/config.d.ts +25 -0
  5. package/dist/config.d.ts.map +1 -0
  6. package/dist/index.d.ts +46 -0
  7. package/dist/index.d.ts.map +1 -0
  8. package/dist/index.mjs +1397 -0
  9. package/dist/index.mjs.map +1 -0
  10. package/dist/palette.d.ts +32 -0
  11. package/dist/palette.d.ts.map +1 -0
  12. package/package.json +81 -0
package/dist/index.mjs ADDED
@@ -0,0 +1,1397 @@
1
+ import { COLOR_PALETTES, COLOR_PALETTE_SHADES, COLOR_PALETTE_STYLE_ELEMENT_ID, SEMANTIC_SCALES, applyColorPaletteCss, applyColorPaletteCss as applyColorPaletteCss$1, bindColorPalette, useColorPalette } from "@vuecs/design";
2
+ import { twMerge } from "tailwind-merge";
3
+ //#region src/palette.ts
4
+ const SEMANTIC_SCALE_SET = new Set(SEMANTIC_SCALES);
5
+ const PALETTE_NAME_SET = new Set(COLOR_PALETTES);
6
+ /**
7
+ * Build the CSS string that binds semantic scales to Tailwind palettes.
8
+ *
9
+ * Pure function — works identically on server and client. Returns a
10
+ * `:root { ... }` block; inject it into `<head>` (server) or pass it to
11
+ * `applyColorPaletteCss()` (client) to override the defaults from
12
+ * `@vuecs/design`'s `assets/index.css`.
13
+ *
14
+ * Defense-in-depth: filters entries to known semantic scales + catalog
15
+ * palette names so untrusted callers (cookie payloads, hand-edited
16
+ * localStorage, ad-hoc `setColorPalette({ … })` calls) can't emit broken
17
+ * `var(--color-undefined-…)` declarations.
18
+ */
19
+ function renderColorPaletteStyles(palette) {
20
+ const entries = Object.entries(palette).filter((entry) => SEMANTIC_SCALE_SET.has(entry[0]) && typeof entry[1] === "string" && PALETTE_NAME_SET.has(entry[1]));
21
+ if (entries.length === 0) return "";
22
+ const declarations = [];
23
+ for (const [scale, paletteName] of entries) for (const shade of COLOR_PALETTE_SHADES) declarations.push(` --vc-color-${scale}-${shade}: var(--color-${paletteName}-${shade});`);
24
+ return `:root {\n${declarations.join("\n")}\n}\n`;
25
+ }
26
+ /**
27
+ * Apply a Tailwind palette override at runtime (client-side).
28
+ * Composes `@vuecs/design`'s `applyColorPaletteCss()` with our
29
+ * `renderColorPaletteStyles()` renderer.
30
+ *
31
+ * The optional `nonce` parameter wires CSP nonce attribution onto the
32
+ * `<style id="vc-color-palette">` block. CSP-strict consumers using
33
+ * `useColorPalette` from `@vuecs/design` pass nonce via
34
+ * `nonce: () => useConfig('nonce').value`.
35
+ *
36
+ * On the server this is a no-op; use `renderColorPaletteStyles()` directly
37
+ * and inject the result into the SSR response head (or rely on
38
+ * `@vuecs/nuxt`'s palette server plugin, which dispatches through the
39
+ * theme runtime).
40
+ */
41
+ function setColorPalette(palette, doc = globalThis.document, nonce) {
42
+ applyColorPaletteCss$1(renderColorPaletteStyles(palette), doc, nonce);
43
+ }
44
+ //#endregion
45
+ //#region src/index.ts
46
+ const merge = (base, override) => twMerge(base, override);
47
+ /**
48
+ * Tailwind theme for vuecs components.
49
+ *
50
+ * Class strings reference **semantic Tailwind colors** that this package
51
+ * exposes via a Tailwind v4 `@theme` block in `assets/index.css` — e.g.
52
+ * `bg-primary-600`, `text-fg`, `border-border`. The `@theme` block maps
53
+ * Tailwind's `--color-*` names onto `--vc-color-*` CSS variables, which
54
+ * `@vuecs/design` defines as concrete OKLCH literals.
55
+ *
56
+ * Consumers must:
57
+ * 1. Use Tailwind CSS v4 (v3 is not supported).
58
+ * 2. Import `@vuecs/design` (concrete tokens) AND `@vuecs/theme-tailwind`
59
+ * (Tailwind rebind + `@theme` block + safelist) alongside their
60
+ * Tailwind stylesheet.
61
+ *
62
+ * Reskinning is done by redefining `--vc-color-*` variables (manually or
63
+ * via `setColorPalette()`, exported from this package). No theme override
64
+ * needed.
65
+ */
66
+ function tailwindTheme() {
67
+ return {
68
+ classesMergeFn: merge,
69
+ palette: {
70
+ handle: renderColorPaletteStyles,
71
+ names: COLOR_PALETTES
72
+ },
73
+ elements: {
74
+ formGroup: { classes: {
75
+ root: "flex flex-col gap-1",
76
+ label: "text-sm font-medium text-fg",
77
+ hint: "text-xs text-fg-muted",
78
+ validationError: "text-xs text-error-600",
79
+ validationWarning: "text-xs text-warning-600"
80
+ } },
81
+ formInput: {
82
+ classes: {
83
+ root: "block w-full rounded-md border border-border bg-bg px-3 py-2 text-sm text-fg shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:bg-bg-muted",
84
+ group: "flex items-stretch",
85
+ groupAppend: "inline-flex items-center rounded-r-md border border-l-0 border-border bg-bg-muted px-3 text-sm text-fg-muted",
86
+ groupPrepend: "inline-flex items-center rounded-l-md border border-r-0 border-border bg-bg-muted px-3 text-sm text-fg-muted"
87
+ },
88
+ variants: { size: {
89
+ sm: {
90
+ root: "px-2 py-1 text-xs",
91
+ groupAppend: "px-2 text-xs",
92
+ groupPrepend: "px-2 text-xs"
93
+ },
94
+ md: { root: "" },
95
+ lg: {
96
+ root: "px-4 py-3 text-base",
97
+ groupAppend: "px-4 text-base",
98
+ groupPrepend: "px-4 text-base"
99
+ }
100
+ } },
101
+ defaultVariants: { size: "md" }
102
+ },
103
+ formCheckbox: {
104
+ classes: {
105
+ root: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-border bg-bg text-on-primary shadow-sm transition-colors hover:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 data-[state=checked]:bg-primary-600 data-[state=checked]:border-primary-600 data-[state=indeterminate]:bg-primary-600 data-[state=indeterminate]:border-primary-600 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
106
+ indicator: "inline-flex items-center justify-center text-current",
107
+ label: "text-sm text-fg cursor-pointer select-none",
108
+ group: "inline-flex items-center gap-2"
109
+ },
110
+ variants: { size: {
111
+ sm: {
112
+ root: "vc-form-checkbox-sm",
113
+ label: "text-xs!"
114
+ },
115
+ md: { root: "" },
116
+ lg: {
117
+ root: "vc-form-checkbox-lg",
118
+ label: "text-base!"
119
+ }
120
+ } },
121
+ defaultVariants: { size: "md" }
122
+ },
123
+ formCheckboxGroup: { classes: { root: "flex flex-col gap-2 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:items-center" } },
124
+ formSwitch: {
125
+ classes: {
126
+ root: "inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-border bg-bg-muted p-0.5 shadow-sm transition-colors hover:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 data-[state=checked]:bg-primary-600 data-[state=checked]:border-primary-600 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
127
+ thumb: "block h-3.5 w-3.5 rounded-full bg-bg shadow ring-0 transition-transform translate-x-0 data-[state=checked]:translate-x-4",
128
+ label: "text-sm text-fg cursor-pointer select-none",
129
+ group: "inline-flex items-center gap-2"
130
+ },
131
+ variants: { size: {
132
+ sm: {
133
+ root: "vc-form-switch-sm",
134
+ label: "text-xs!"
135
+ },
136
+ md: { root: "" },
137
+ lg: {
138
+ root: "vc-form-switch-lg",
139
+ label: "text-base!"
140
+ }
141
+ } },
142
+ defaultVariants: { size: "md" }
143
+ },
144
+ formSelect: {
145
+ classes: {
146
+ trigger: "flex w-full items-center justify-between gap-2 rounded-md border border-border bg-bg px-3 py-2 text-sm text-fg shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:bg-bg-muted data-[placeholder]:text-fg-muted",
147
+ value: "truncate",
148
+ icon: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-fg-muted",
149
+ content: "z-50 overflow-hidden rounded-md border border-border bg-bg text-sm text-fg shadow-md min-w-[var(--reka-select-trigger-width)] max-h-[var(--reka-select-content-available-height)] 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",
150
+ viewport: "p-1",
151
+ item: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm py-1.5 pl-7 pr-2 outline-none data-[highlighted]:bg-bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
152
+ itemIndicator: "absolute left-2 inline-flex h-3.5 w-3.5 items-center justify-center text-primary-600",
153
+ group: "",
154
+ groupLabel: "px-2 py-1.5 text-xs font-semibold uppercase tracking-wide text-fg-muted",
155
+ separator: "-mx-1 my-1 h-px bg-border"
156
+ },
157
+ variants: { size: {
158
+ sm: {
159
+ trigger: "vc-form-select-trigger-sm",
160
+ item: "py-1 pl-6 text-xs!"
161
+ },
162
+ md: { trigger: "" },
163
+ lg: {
164
+ trigger: "vc-form-select-trigger-lg",
165
+ item: "py-2 pl-8 text-base!"
166
+ }
167
+ } },
168
+ defaultVariants: { size: "md" }
169
+ },
170
+ formSelectSearch: { classes: {
171
+ root: "relative block",
172
+ input: "block w-full rounded-md border border-border bg-bg px-3 py-2 text-sm text-fg shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:bg-bg-muted",
173
+ content: "absolute inset-x-0 top-[calc(100%+0.25rem)] z-50 max-h-60 overflow-y-auto rounded-md border border-border bg-bg shadow-md",
174
+ item: "flex cursor-pointer select-none flex-col gap-0.5 px-3 py-2 text-sm text-fg outline-none hover:bg-bg-muted",
175
+ itemActive: "bg-bg-elevated! font-semibold",
176
+ itemCurrent: "bg-bg-muted",
177
+ itemDescription: "text-xs text-fg-muted",
178
+ selected: "mt-2 flex flex-wrap gap-1",
179
+ selectedItem: "inline-flex items-center gap-1 rounded-sm border border-border bg-bg-muted px-2 py-0.5 text-xs text-fg hover:bg-bg-elevated",
180
+ selectedItemRemove: "font-semibold leading-none text-fg-muted"
181
+ } },
182
+ formRadio: {
183
+ classes: {
184
+ root: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full border border-border bg-bg shadow-sm transition-colors hover:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1 data-[state=checked]:border-primary-600 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
185
+ indicator: "block h-2 w-2 rounded-full bg-primary-600",
186
+ label: "text-sm text-fg cursor-pointer select-none",
187
+ group: "inline-flex items-center gap-2"
188
+ },
189
+ variants: { size: {
190
+ sm: {
191
+ root: "vc-form-radio-sm",
192
+ label: "text-xs!"
193
+ },
194
+ md: { root: "" },
195
+ lg: {
196
+ root: "vc-form-radio-lg",
197
+ label: "text-base!"
198
+ }
199
+ } },
200
+ defaultVariants: { size: "md" }
201
+ },
202
+ formRadioGroup: { classes: { root: "flex flex-col gap-2 data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:items-center data-[orientation=horizontal]:gap-4" } },
203
+ formPin: { classes: {
204
+ root: "inline-flex items-center gap-2",
205
+ input: "h-10 w-10 rounded-md border border-border bg-bg text-center text-lg font-medium text-fg shadow-sm tabular-nums focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:bg-bg-muted disabled:opacity-50"
206
+ } },
207
+ formSlider: { classes: {
208
+ root: "relative flex items-center select-none touch-none w-full h-5 data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-5 data-[orientation=vertical]:h-32",
209
+ track: "relative grow rounded-full bg-bg-muted h-1 data-[orientation=vertical]:w-1 data-[orientation=vertical]:h-full",
210
+ range: "absolute rounded-full bg-primary-600 h-full data-[orientation=vertical]:w-full",
211
+ thumb: "block h-4 w-4 rounded-full border-2 border-primary-600 bg-bg shadow-sm transition-shadow hover:shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
212
+ } },
213
+ formNumber: {
214
+ classes: {
215
+ root: "inline-flex w-fit items-stretch overflow-hidden rounded-md border border-border bg-bg shadow-sm focus-within:border-primary-500 focus-within:ring-1 focus-within:ring-primary-500",
216
+ input: "min-w-16 [field-sizing:content] bg-transparent border-0 px-3 py-2 text-center text-sm text-fg outline-none tabular-nums [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
217
+ decrement: "inline-flex w-8 items-center justify-center bg-bg-muted text-fg hover:bg-bg-elevated focus-visible:outline-2 focus-visible:outline-primary-500 -outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
218
+ increment: "inline-flex w-8 items-center justify-center bg-bg-muted text-fg hover:bg-bg-elevated focus-visible:outline-2 focus-visible:outline-primary-500 -outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
219
+ },
220
+ variants: { size: {
221
+ sm: {
222
+ input: "px-2 py-1 text-xs",
223
+ decrement: "w-6 text-xs",
224
+ increment: "w-6 text-xs"
225
+ },
226
+ md: { input: "" },
227
+ lg: {
228
+ input: "px-4 py-3 text-base",
229
+ decrement: "w-10 text-base",
230
+ increment: "w-10 text-base"
231
+ }
232
+ } },
233
+ defaultVariants: { size: "md" }
234
+ },
235
+ formTags: {
236
+ classes: {
237
+ root: "flex flex-wrap items-center gap-1.5 rounded-md border border-border bg-bg px-2 py-1.5 text-sm shadow-sm cursor-text focus-within:border-primary-500 focus-within:ring-1 focus-within:ring-primary-500 data-[disabled]:cursor-not-allowed data-[disabled]:bg-bg-muted data-[disabled]:opacity-60",
238
+ item: "inline-flex items-center gap-1 rounded-full bg-primary-600 px-2 py-0.5 text-xs leading-tight text-on-primary",
239
+ itemText: "select-none",
240
+ itemDelete: "inline-flex h-4 w-4 items-center justify-center rounded-full bg-transparent text-current hover:bg-black/10",
241
+ input: "flex-1 min-w-24 bg-transparent border-0 outline-none text-fg px-0 py-0.5 text-sm"
242
+ },
243
+ variants: { size: {
244
+ sm: {
245
+ root: "px-1.5! py-1!",
246
+ item: "px-1.5! py-px! text-[0.625rem]!",
247
+ input: "text-xs!"
248
+ },
249
+ md: { root: "" },
250
+ lg: {
251
+ root: "px-3! py-2! text-base!",
252
+ item: "px-2.5! py-1! text-sm!",
253
+ input: "text-base!"
254
+ }
255
+ } },
256
+ defaultVariants: { size: "md" }
257
+ },
258
+ button: {
259
+ classes: {
260
+ root: "inline-flex items-center justify-center gap-2 rounded-md font-medium shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60",
261
+ leading: "inline-flex shrink-0 items-center",
262
+ trailing: "inline-flex shrink-0 items-center",
263
+ label: ""
264
+ },
265
+ variants: { size: {
266
+ sm: { root: "px-2.5 py-1 text-xs" },
267
+ md: { root: "px-3 py-1.5 text-sm" },
268
+ lg: { root: "px-4 py-2 text-base" }
269
+ } },
270
+ compoundVariants: [
271
+ {
272
+ variants: {
273
+ variant: "solid",
274
+ color: "primary"
275
+ },
276
+ class: { root: "bg-primary-600 text-on-primary hover:bg-primary-700 focus:ring-primary-500" }
277
+ },
278
+ {
279
+ variants: {
280
+ variant: "solid",
281
+ color: "neutral"
282
+ },
283
+ class: { root: "bg-neutral-700 text-on-neutral hover:bg-neutral-800 focus:ring-neutral-500" }
284
+ },
285
+ {
286
+ variants: {
287
+ variant: "solid",
288
+ color: "success"
289
+ },
290
+ class: { root: "bg-success-600 text-on-success hover:bg-success-700 focus:ring-success-500" }
291
+ },
292
+ {
293
+ variants: {
294
+ variant: "solid",
295
+ color: "warning"
296
+ },
297
+ class: { root: "bg-warning-600 text-on-warning hover:bg-warning-700 focus:ring-warning-500" }
298
+ },
299
+ {
300
+ variants: {
301
+ variant: "solid",
302
+ color: "error"
303
+ },
304
+ class: { root: "bg-error-600 text-on-error hover:bg-error-700 focus:ring-error-500" }
305
+ },
306
+ {
307
+ variants: {
308
+ variant: "solid",
309
+ color: "info"
310
+ },
311
+ class: { root: "bg-info-600 text-on-info hover:bg-info-700 focus:ring-info-500" }
312
+ },
313
+ {
314
+ variants: {
315
+ variant: "soft",
316
+ color: "primary"
317
+ },
318
+ class: { root: "bg-primary-100 text-primary-700 hover:bg-primary-200 focus:ring-primary-500 dark:bg-primary-900/30 dark:text-primary-300 dark:hover:bg-primary-900/50" }
319
+ },
320
+ {
321
+ variants: {
322
+ variant: "soft",
323
+ color: "neutral"
324
+ },
325
+ class: { root: "bg-neutral-100 text-neutral-700 hover:bg-neutral-200 focus:ring-neutral-500 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700" }
326
+ },
327
+ {
328
+ variants: {
329
+ variant: "soft",
330
+ color: "success"
331
+ },
332
+ class: { root: "bg-success-100 text-success-700 hover:bg-success-200 focus:ring-success-500 dark:bg-success-900/30 dark:text-success-300 dark:hover:bg-success-900/50" }
333
+ },
334
+ {
335
+ variants: {
336
+ variant: "soft",
337
+ color: "warning"
338
+ },
339
+ class: { root: "bg-warning-100 text-warning-700 hover:bg-warning-200 focus:ring-warning-500 dark:bg-warning-900/30 dark:text-warning-300 dark:hover:bg-warning-900/50" }
340
+ },
341
+ {
342
+ variants: {
343
+ variant: "soft",
344
+ color: "error"
345
+ },
346
+ class: { root: "bg-error-100 text-error-700 hover:bg-error-200 focus:ring-error-500 dark:bg-error-900/30 dark:text-error-300 dark:hover:bg-error-900/50" }
347
+ },
348
+ {
349
+ variants: {
350
+ variant: "soft",
351
+ color: "info"
352
+ },
353
+ class: { root: "bg-info-100 text-info-700 hover:bg-info-200 focus:ring-info-500 dark:bg-info-900/30 dark:text-info-300 dark:hover:bg-info-900/50" }
354
+ },
355
+ {
356
+ variants: {
357
+ variant: "outline",
358
+ color: "primary"
359
+ },
360
+ class: { root: "border border-primary-600 bg-bg text-primary-700 shadow-none hover:bg-primary-50 focus:ring-primary-500 dark:text-primary-400 dark:hover:bg-primary-900/30" }
361
+ },
362
+ {
363
+ variants: {
364
+ variant: "outline",
365
+ color: "neutral"
366
+ },
367
+ class: { root: "border border-border bg-bg text-fg shadow-none hover:bg-bg-muted focus:ring-neutral-500" }
368
+ },
369
+ {
370
+ variants: {
371
+ variant: "outline",
372
+ color: "success"
373
+ },
374
+ class: { root: "border border-success-600 bg-bg text-success-700 shadow-none hover:bg-success-50 focus:ring-success-500 dark:text-success-400 dark:hover:bg-success-900/30" }
375
+ },
376
+ {
377
+ variants: {
378
+ variant: "outline",
379
+ color: "warning"
380
+ },
381
+ class: { root: "border border-warning-600 bg-bg text-warning-700 shadow-none hover:bg-warning-50 focus:ring-warning-500 dark:text-warning-400 dark:hover:bg-warning-900/30" }
382
+ },
383
+ {
384
+ variants: {
385
+ variant: "outline",
386
+ color: "error"
387
+ },
388
+ class: { root: "border border-error-600 bg-bg text-error-700 shadow-none hover:bg-error-50 focus:ring-error-500 dark:text-error-400 dark:hover:bg-error-900/30" }
389
+ },
390
+ {
391
+ variants: {
392
+ variant: "outline",
393
+ color: "info"
394
+ },
395
+ class: { root: "border border-info-600 bg-bg text-info-700 shadow-none hover:bg-info-50 focus:ring-info-500 dark:text-info-400 dark:hover:bg-info-900/30" }
396
+ },
397
+ {
398
+ variants: {
399
+ variant: "ghost",
400
+ color: "primary"
401
+ },
402
+ class: { root: "bg-transparent text-primary-700 shadow-none hover:bg-primary-50 focus:ring-primary-500 dark:text-primary-400 dark:hover:bg-primary-900/30" }
403
+ },
404
+ {
405
+ variants: {
406
+ variant: "ghost",
407
+ color: "neutral"
408
+ },
409
+ class: { root: "bg-transparent text-fg shadow-none hover:bg-bg-muted focus:ring-neutral-500" }
410
+ },
411
+ {
412
+ variants: {
413
+ variant: "ghost",
414
+ color: "success"
415
+ },
416
+ class: { root: "bg-transparent text-success-700 shadow-none hover:bg-success-50 focus:ring-success-500 dark:text-success-400 dark:hover:bg-success-900/30" }
417
+ },
418
+ {
419
+ variants: {
420
+ variant: "ghost",
421
+ color: "warning"
422
+ },
423
+ class: { root: "bg-transparent text-warning-700 shadow-none hover:bg-warning-50 focus:ring-warning-500 dark:text-warning-400 dark:hover:bg-warning-900/30" }
424
+ },
425
+ {
426
+ variants: {
427
+ variant: "ghost",
428
+ color: "error"
429
+ },
430
+ class: { root: "bg-transparent text-error-700 shadow-none hover:bg-error-50 focus:ring-error-500 dark:text-error-400 dark:hover:bg-error-900/30" }
431
+ },
432
+ {
433
+ variants: {
434
+ variant: "ghost",
435
+ color: "info"
436
+ },
437
+ class: { root: "bg-transparent text-info-700 shadow-none hover:bg-info-50 focus:ring-info-500 dark:text-info-400 dark:hover:bg-info-900/30" }
438
+ },
439
+ {
440
+ variants: {
441
+ variant: "link",
442
+ color: "primary"
443
+ },
444
+ class: { root: "bg-transparent p-0 text-primary-700 shadow-none underline underline-offset-4 hover:text-primary-800 focus:ring-primary-500 dark:text-primary-400" }
445
+ },
446
+ {
447
+ variants: {
448
+ variant: "link",
449
+ color: "neutral"
450
+ },
451
+ class: { root: "bg-transparent p-0 text-fg shadow-none underline underline-offset-4 hover:text-fg-muted focus:ring-neutral-500" }
452
+ },
453
+ {
454
+ variants: {
455
+ variant: "link",
456
+ color: "success"
457
+ },
458
+ class: { root: "bg-transparent p-0 text-success-700 shadow-none underline underline-offset-4 hover:text-success-800 focus:ring-success-500 dark:text-success-400" }
459
+ },
460
+ {
461
+ variants: {
462
+ variant: "link",
463
+ color: "warning"
464
+ },
465
+ class: { root: "bg-transparent p-0 text-warning-700 shadow-none underline underline-offset-4 hover:text-warning-800 focus:ring-warning-500 dark:text-warning-400" }
466
+ },
467
+ {
468
+ variants: {
469
+ variant: "link",
470
+ color: "error"
471
+ },
472
+ class: { root: "bg-transparent p-0 text-error-700 shadow-none underline underline-offset-4 hover:text-error-800 focus:ring-error-500 dark:text-error-400" }
473
+ },
474
+ {
475
+ variants: {
476
+ variant: "link",
477
+ color: "info"
478
+ },
479
+ class: { root: "bg-transparent p-0 text-info-700 shadow-none underline underline-offset-4 hover:text-info-800 focus:ring-info-500 dark:text-info-400" }
480
+ }
481
+ ],
482
+ defaultVariants: {
483
+ variant: "solid",
484
+ color: "primary",
485
+ size: "md"
486
+ }
487
+ },
488
+ formTextarea: {
489
+ classes: { root: "block w-full rounded-md border border-border bg-bg px-3 py-2 text-sm text-fg shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:bg-bg-muted" },
490
+ variants: { size: {
491
+ sm: { root: "px-2 py-1 text-xs" },
492
+ md: { root: "" },
493
+ lg: { root: "px-4 py-3 text-base" }
494
+ } },
495
+ defaultVariants: { size: "md" }
496
+ },
497
+ validationGroup: { classes: { item: "text-xs text-error-600" } },
498
+ list: {
499
+ classes: {
500
+ root: "relative flex flex-col gap-1",
501
+ header: "flex items-center empty:hidden",
502
+ footer: "flex items-center empty:hidden"
503
+ },
504
+ variants: { density: {
505
+ compact: { root: "gap-0" },
506
+ normal: { root: "" },
507
+ spacious: { root: "gap-3" }
508
+ } },
509
+ defaultVariants: { density: "normal" }
510
+ },
511
+ listBody: { classes: { root: "m-0 list-none p-0" } },
512
+ listItem: {
513
+ classes: {
514
+ root: "flex flex-row items-center gap-2 py-1",
515
+ text: "inline-flex min-w-0 flex-1 flex-col",
516
+ actions: "inline-flex items-center gap-1"
517
+ },
518
+ variants: {
519
+ density: {
520
+ compact: { root: "py-0.5" },
521
+ normal: { root: "" },
522
+ spacious: { root: "py-3" }
523
+ },
524
+ disabled: { true: { root: "cursor-not-allowed opacity-50" } },
525
+ active: { true: { root: "bg-primary-50 text-primary-900 dark:bg-primary-950 dark:text-primary-100" } },
526
+ selected: { true: { root: "bg-bg-muted" } }
527
+ },
528
+ defaultVariants: { density: "normal" }
529
+ },
530
+ listLoading: {
531
+ classes: { root: "py-2 text-center text-sm text-fg-muted" },
532
+ variants: { overlay: { true: { root: "absolute inset-0 z-10 flex items-center justify-center bg-bg/75 backdrop-blur-sm" } } }
533
+ },
534
+ listEmpty: { classes: { root: "rounded-md border border-warning-200 bg-warning-50 p-2 text-sm text-warning-800" } },
535
+ navigation: {
536
+ classes: {
537
+ group: "m-0 flex list-none flex-col p-0",
538
+ item: "list-none",
539
+ itemNested: "",
540
+ separator: "my-2 text-xs font-semibold uppercase tracking-wide text-fg-muted",
541
+ link: "flex cursor-pointer items-center gap-2 px-3 py-2 text-sm text-fg no-underline hover:bg-bg-muted",
542
+ linkRoot: "font-medium text-fg",
543
+ linkIcon: "inline-flex h-4 w-4 shrink-0 items-center justify-center",
544
+ linkText: "flex-1 truncate"
545
+ },
546
+ variants: { size: {
547
+ sm: {
548
+ link: "px-2 py-1 text-xs",
549
+ linkIcon: "h-3 w-3"
550
+ },
551
+ md: { link: "" },
552
+ lg: {
553
+ link: "px-4 py-3 text-base",
554
+ linkIcon: "h-5 w-5"
555
+ }
556
+ } },
557
+ defaultVariants: { size: "md" }
558
+ },
559
+ table: {
560
+ classes: {
561
+ root: "w-full border-collapse text-sm text-fg",
562
+ scrollContainer: "relative overflow-auto rounded-md border border-border"
563
+ },
564
+ variants: {
565
+ density: {
566
+ compact: { root: "[&_td]:py-1 [&_th]:py-1.5" },
567
+ normal: { root: "[&_td]:py-2 [&_th]:py-2.5" },
568
+ spacious: { root: "[&_td]:py-3 [&_th]:py-3.5" }
569
+ },
570
+ striped: { true: { root: "[&_tbody_tr:nth-child(even)]:bg-bg-muted/40" } },
571
+ bordered: { true: { root: "[&_td]:border [&_th]:border [&_td]:border-border [&_th]:border-border" } },
572
+ hover: { true: { root: "[&_tbody_tr:hover]:bg-bg-muted/60" } },
573
+ stickyHeader: { true: { root: "[&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:bg-bg [&_thead_th]:z-10" } }
574
+ },
575
+ defaultVariants: { density: "normal" }
576
+ },
577
+ tableHeader: { classes: { root: "border-b border-border bg-bg-muted/30 text-xs uppercase tracking-wide text-fg-muted" } },
578
+ tableBody: { classes: { root: "" } },
579
+ tableFooter: { classes: { root: "border-t border-border bg-bg-muted/30 font-medium" } },
580
+ tableRow: {
581
+ classes: { root: "border-b border-border last:border-b-0 transition-colors" },
582
+ variants: {
583
+ disabled: { true: { root: "opacity-50 pointer-events-none" } },
584
+ selected: { true: { root: "bg-primary-50 dark:bg-primary-950/40" } },
585
+ focused: { true: { root: "outline outline-2 outline-ring outline-offset-[-2px]" } },
586
+ rowVariant: {
587
+ success: { root: "bg-success-50 dark:bg-success-950/30" },
588
+ warning: { root: "bg-warning-50 dark:bg-warning-950/30" },
589
+ error: { root: "bg-error-50 dark:bg-error-950/30" },
590
+ info: { root: "bg-info-50 dark:bg-info-950/30" },
591
+ neutral: { root: "bg-neutral-50 dark:bg-neutral-900" },
592
+ primary: { root: "bg-primary-50 dark:bg-primary-950/30" }
593
+ }
594
+ }
595
+ },
596
+ tableCell: {
597
+ classes: { root: "px-3 align-middle" },
598
+ variants: {
599
+ align: {
600
+ left: { root: "text-left" },
601
+ center: { root: "text-center" },
602
+ right: { root: "text-right" }
603
+ },
604
+ stickyColumn: { true: { root: "sticky left-0 bg-bg z-[1]" } },
605
+ cellVariant: {
606
+ success: { root: "text-success-700 dark:text-success-300" },
607
+ warning: { root: "text-warning-700 dark:text-warning-300" },
608
+ error: { root: "text-error-700 dark:text-error-300" },
609
+ info: { root: "text-info-700 dark:text-info-300" },
610
+ neutral: { root: "text-neutral-700 dark:text-neutral-200" },
611
+ primary: { root: "text-primary-700 dark:text-primary-300" }
612
+ }
613
+ }
614
+ },
615
+ tableHeadCell: {
616
+ classes: {
617
+ root: "px-3 text-left font-medium",
618
+ sortIcon: "ml-1 inline-block text-xs leading-none"
619
+ },
620
+ variants: {
621
+ align: {
622
+ left: { root: "text-left" },
623
+ center: { root: "text-center" },
624
+ right: { root: "text-right" }
625
+ },
626
+ stickyColumn: { true: { root: "sticky left-0 bg-bg-muted z-[2]" } },
627
+ sorted: {
628
+ asc: { root: "text-fg" },
629
+ desc: { root: "text-fg" },
630
+ none: { root: "" }
631
+ }
632
+ }
633
+ },
634
+ tableEmpty: {
635
+ classes: { root: "" },
636
+ variants: { filtered: {
637
+ true: { root: "[&_td]:py-6 [&_td]:text-center [&_td]:text-fg-muted [&_td]:italic" },
638
+ false: { root: "[&_td]:py-6 [&_td]:text-center [&_td]:text-fg-muted" }
639
+ } }
640
+ },
641
+ tableLoading: { classes: {
642
+ root: "[&_td]:py-6 [&_td]:text-center [&_td]:text-fg-muted",
643
+ overlay: "bg-bg/70 backdrop-blur-[1px] text-fg-muted"
644
+ } },
645
+ tableSortIndicators: { classes: {
646
+ root: "flex flex-wrap items-center gap-1.5 rounded-md border border-border bg-bg-muted px-3 py-2 text-xs",
647
+ label: "font-semibold text-fg-muted me-1",
648
+ empty: "italic text-fg-muted",
649
+ chip: "inline-flex items-center rounded-full border border-border bg-bg text-fg transition-colors focus-within:border-primary-500",
650
+ chipToggle: "inline-flex items-center gap-1.5 bg-transparent border-0 px-2 py-1 rounded-l-full text-fg cursor-pointer hover:bg-primary-50 focus-visible:bg-primary-50 focus-visible:outline-none",
651
+ chipPosition: "text-[0.625rem] font-bold text-fg-muted",
652
+ chipLabel: "",
653
+ chipArrow: "font-bold text-primary-600",
654
+ chipRemove: "inline-flex h-7 w-6 items-center justify-center bg-transparent border-0 rounded-r-full text-fg-muted cursor-pointer hover:bg-error-100 hover:text-error-600 focus-visible:bg-error-100 focus-visible:text-error-600 focus-visible:outline-none",
655
+ add: "rounded-full border border-border bg-bg px-2 py-1 text-fg",
656
+ clear: "ms-auto rounded-full border border-transparent bg-transparent px-2.5 py-1 text-fg-muted hover:bg-bg hover:border-border hover:text-fg focus-visible:bg-bg focus-visible:border-border focus-visible:text-fg focus-visible:outline-none"
657
+ } },
658
+ pagination: {
659
+ classes: {
660
+ root: "inline-flex items-center",
661
+ item: "inline-flex",
662
+ link: "inline-flex items-center justify-center gap-1.5 rounded-md leading-none focus:outline-none focus:ring-1 focus:ring-ring",
663
+ linkActive: "border-primary-600! bg-primary-600! text-on-primary! hover:bg-primary-700!",
664
+ ellipsis: "pointer-events-none cursor-default text-fg-muted"
665
+ },
666
+ variants: {
667
+ variant: {
668
+ outline: { link: "border border-neutral-300 bg-bg text-fg hover:bg-neutral-100 dark:border-neutral-700 dark:hover:bg-neutral-700" },
669
+ soft: { link: "border border-transparent bg-bg-muted text-fg hover:bg-bg-elevated" },
670
+ ghost: { link: "border border-border bg-bg text-fg hover:bg-bg-muted" }
671
+ },
672
+ size: {
673
+ sm: { link: "h-7 min-w-7 px-2 text-xs" },
674
+ md: { link: "h-8 min-w-8 px-3 text-sm" },
675
+ lg: { link: "h-10 min-w-10 px-4 text-base" }
676
+ }
677
+ },
678
+ defaultVariants: {
679
+ variant: "outline",
680
+ size: "md"
681
+ }
682
+ },
683
+ gravatar: { classes: { root: "inline-block overflow-hidden rounded-full" } },
684
+ separator: { classes: { root: "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px" } },
685
+ tag: {
686
+ classes: {
687
+ root: "inline-flex items-center gap-1 rounded-full bg-primary-600 leading-tight text-on-primary",
688
+ icon: "inline-flex shrink-0 items-center",
689
+ remove: "inline-flex items-center justify-center rounded-full bg-transparent text-current hover:bg-black/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-on-primary"
690
+ },
691
+ variants: { size: {
692
+ sm: {
693
+ root: "px-1.5! py-px! text-[0.625rem]! gap-0.5!",
694
+ remove: "h-3! w-3!"
695
+ },
696
+ md: {
697
+ root: "px-2! py-0.5! text-xs!",
698
+ remove: "h-4! w-4!"
699
+ },
700
+ lg: {
701
+ root: "px-2.5! py-1! text-sm!",
702
+ remove: "h-5! w-5!"
703
+ }
704
+ } },
705
+ defaultVariants: { size: "md" }
706
+ },
707
+ tags: {
708
+ classes: {
709
+ root: "flex flex-wrap items-center gap-1.5",
710
+ item: ""
711
+ },
712
+ variants: { size: {
713
+ sm: { root: "gap-1" },
714
+ md: { root: "" },
715
+ lg: { root: "gap-2" }
716
+ } },
717
+ defaultVariants: { size: "md" }
718
+ },
719
+ avatar: {
720
+ classes: {
721
+ root: "inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-bg-muted text-fg-muted align-middle",
722
+ image: "h-full w-full object-cover",
723
+ fallback: "inline-flex h-full w-full items-center justify-center font-medium leading-none"
724
+ },
725
+ variants: { size: {
726
+ sm: {
727
+ root: "vc-avatar-sm",
728
+ fallback: "text-xs!"
729
+ },
730
+ md: { fallback: "text-sm!" },
731
+ lg: {
732
+ root: "vc-avatar-lg",
733
+ fallback: "text-base!"
734
+ }
735
+ } },
736
+ defaultVariants: { size: "md" }
737
+ },
738
+ aspectRatio: { classes: { root: "block w-full" } },
739
+ card: {
740
+ classes: { root: "rounded-lg" },
741
+ variants: {
742
+ variant: {
743
+ outline: { root: "border border-border bg-bg text-fg" },
744
+ soft: { root: "bg-bg-muted text-fg" },
745
+ elevated: { root: "border border-border bg-bg text-fg shadow-md" }
746
+ },
747
+ interactive: { true: { root: "transition-shadow hover:shadow-lg focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-bg cursor-pointer" } }
748
+ },
749
+ defaultVariants: { variant: "outline" }
750
+ },
751
+ cardHeader: {
752
+ classes: { root: "flex flex-col gap-1 border-b border-border" },
753
+ variants: { padding: {
754
+ compact: { root: "px-3 py-2" },
755
+ normal: { root: "px-4 py-3" },
756
+ spacious: { root: "px-6 py-4" }
757
+ } },
758
+ defaultVariants: { padding: "normal" }
759
+ },
760
+ cardTitle: { classes: { root: "text-base font-semibold leading-tight text-fg" } },
761
+ cardDescription: { classes: { root: "text-sm text-fg-muted" } },
762
+ cardBody: {
763
+ classes: { root: "text-sm text-fg" },
764
+ variants: { padding: {
765
+ compact: { root: "px-3 py-3" },
766
+ normal: { root: "px-4 py-4" },
767
+ spacious: { root: "px-6 py-6" }
768
+ } },
769
+ defaultVariants: { padding: "normal" }
770
+ },
771
+ cardFooter: {
772
+ classes: { root: "flex items-center justify-end gap-2 border-t border-border" },
773
+ variants: { padding: {
774
+ compact: { root: "px-3 py-2" },
775
+ normal: { root: "px-4 py-3" },
776
+ spacious: { root: "px-6 py-4" }
777
+ } },
778
+ defaultVariants: { padding: "normal" }
779
+ },
780
+ collapse: { classes: { root: "" } },
781
+ collapseTrigger: {
782
+ classes: {
783
+ root: "inline-flex items-center justify-between gap-2 cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-md",
784
+ chevron: "h-4 w-4 shrink-0 text-fg-muted"
785
+ },
786
+ variants: { chevron: {
787
+ auto: { chevron: "inline-flex" },
788
+ none: { chevron: "hidden" }
789
+ } },
790
+ defaultVariants: { chevron: "auto" }
791
+ },
792
+ collapseContent: { classes: { root: "overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up" } },
793
+ alert: {
794
+ classes: {
795
+ root: "relative flex items-start gap-3 rounded-md border text-sm",
796
+ icon: "inline-flex shrink-0 items-center justify-center mt-0.5",
797
+ content: "flex flex-1 flex-col gap-1 min-w-0",
798
+ closeIcon: "absolute right-2 top-2 inline-flex h-6 w-6 items-center justify-center rounded-md text-fg-muted hover:bg-bg-muted hover:text-fg focus:outline-none focus:ring-2 focus:ring-ring",
799
+ close: "inline-flex items-center justify-center rounded-md px-2 py-1 text-xs font-medium hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-ring"
800
+ },
801
+ variants: { size: {
802
+ sm: { root: "p-2 pr-8 text-xs" },
803
+ md: { root: "p-3 pr-9 text-sm" },
804
+ lg: { root: "p-4 pr-10 text-sm" }
805
+ } },
806
+ compoundVariants: [
807
+ {
808
+ variants: {
809
+ variant: "solid",
810
+ color: "primary"
811
+ },
812
+ class: { root: "bg-primary-600 text-on-primary border-primary-700" }
813
+ },
814
+ {
815
+ variants: {
816
+ variant: "solid",
817
+ color: "neutral"
818
+ },
819
+ class: { root: "bg-neutral-600 text-on-neutral border-neutral-700" }
820
+ },
821
+ {
822
+ variants: {
823
+ variant: "solid",
824
+ color: "success"
825
+ },
826
+ class: { root: "bg-success-600 text-on-success border-success-700" }
827
+ },
828
+ {
829
+ variants: {
830
+ variant: "solid",
831
+ color: "warning"
832
+ },
833
+ class: { root: "bg-warning-600 text-on-warning border-warning-700" }
834
+ },
835
+ {
836
+ variants: {
837
+ variant: "solid",
838
+ color: "error"
839
+ },
840
+ class: { root: "bg-error-600 text-on-error border-error-700" }
841
+ },
842
+ {
843
+ variants: {
844
+ variant: "solid",
845
+ color: "info"
846
+ },
847
+ class: { root: "bg-info-600 text-on-info border-info-700" }
848
+ },
849
+ {
850
+ variants: {
851
+ variant: "soft",
852
+ color: "primary"
853
+ },
854
+ class: { root: "bg-primary-50 text-primary-800 border-primary-200 dark:bg-primary-950 dark:text-primary-200 dark:border-primary-800" }
855
+ },
856
+ {
857
+ variants: {
858
+ variant: "soft",
859
+ color: "neutral"
860
+ },
861
+ class: { root: "bg-neutral-50 text-fg border-border dark:bg-neutral-900" }
862
+ },
863
+ {
864
+ variants: {
865
+ variant: "soft",
866
+ color: "success"
867
+ },
868
+ class: { root: "bg-success-50 text-success-800 border-success-200 dark:bg-success-950 dark:text-success-200 dark:border-success-800" }
869
+ },
870
+ {
871
+ variants: {
872
+ variant: "soft",
873
+ color: "warning"
874
+ },
875
+ class: { root: "bg-warning-50 text-warning-800 border-warning-200 dark:bg-warning-950 dark:text-warning-200 dark:border-warning-800" }
876
+ },
877
+ {
878
+ variants: {
879
+ variant: "soft",
880
+ color: "error"
881
+ },
882
+ class: { root: "bg-error-50 text-error-800 border-error-200 dark:bg-error-950 dark:text-error-200 dark:border-error-800" }
883
+ },
884
+ {
885
+ variants: {
886
+ variant: "soft",
887
+ color: "info"
888
+ },
889
+ class: { root: "bg-info-50 text-info-800 border-info-200 dark:bg-info-950 dark:text-info-200 dark:border-info-800" }
890
+ },
891
+ {
892
+ variants: {
893
+ variant: "outline",
894
+ color: "primary"
895
+ },
896
+ class: { root: "border-primary-600 text-primary-700 bg-transparent dark:text-primary-200" }
897
+ },
898
+ {
899
+ variants: {
900
+ variant: "outline",
901
+ color: "neutral"
902
+ },
903
+ class: { root: "border-border text-fg bg-transparent" }
904
+ },
905
+ {
906
+ variants: {
907
+ variant: "outline",
908
+ color: "success"
909
+ },
910
+ class: { root: "border-success-600 text-success-700 bg-transparent dark:text-success-200" }
911
+ },
912
+ {
913
+ variants: {
914
+ variant: "outline",
915
+ color: "warning"
916
+ },
917
+ class: { root: "border-warning-600 text-warning-700 bg-transparent dark:text-warning-200" }
918
+ },
919
+ {
920
+ variants: {
921
+ variant: "outline",
922
+ color: "error"
923
+ },
924
+ class: { root: "border-error-600 text-error-700 bg-transparent dark:text-error-200" }
925
+ },
926
+ {
927
+ variants: {
928
+ variant: "outline",
929
+ color: "info"
930
+ },
931
+ class: { root: "border-info-600 text-info-700 bg-transparent dark:text-info-200" }
932
+ }
933
+ ],
934
+ defaultVariants: {
935
+ variant: "soft",
936
+ color: "neutral",
937
+ size: "md"
938
+ }
939
+ },
940
+ alertTitle: { classes: { root: "font-semibold leading-tight" } },
941
+ alertDescription: { classes: { root: "leading-snug opacity-90" } },
942
+ badge: {
943
+ classes: { root: "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium leading-tight" },
944
+ variants: { size: {
945
+ sm: { root: "px-1.5! py-px! text-[0.625rem]!" },
946
+ md: { root: "px-2! py-0.5! text-xs!" },
947
+ lg: { root: "px-2.5! py-1! text-sm!" }
948
+ } },
949
+ compoundVariants: [
950
+ {
951
+ variants: {
952
+ variant: "solid",
953
+ color: "primary"
954
+ },
955
+ class: { root: "bg-primary-600 text-on-primary" }
956
+ },
957
+ {
958
+ variants: {
959
+ variant: "solid",
960
+ color: "neutral"
961
+ },
962
+ class: { root: "bg-neutral-700 text-on-neutral" }
963
+ },
964
+ {
965
+ variants: {
966
+ variant: "solid",
967
+ color: "success"
968
+ },
969
+ class: { root: "bg-success-600 text-on-success" }
970
+ },
971
+ {
972
+ variants: {
973
+ variant: "solid",
974
+ color: "warning"
975
+ },
976
+ class: { root: "bg-warning-600 text-on-warning" }
977
+ },
978
+ {
979
+ variants: {
980
+ variant: "solid",
981
+ color: "error"
982
+ },
983
+ class: { root: "bg-error-600 text-on-error" }
984
+ },
985
+ {
986
+ variants: {
987
+ variant: "solid",
988
+ color: "info"
989
+ },
990
+ class: { root: "bg-info-600 text-on-info" }
991
+ },
992
+ {
993
+ variants: {
994
+ variant: "soft",
995
+ color: "primary"
996
+ },
997
+ class: { root: "bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-300" }
998
+ },
999
+ {
1000
+ variants: {
1001
+ variant: "soft",
1002
+ color: "neutral"
1003
+ },
1004
+ class: { root: "bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200" }
1005
+ },
1006
+ {
1007
+ variants: {
1008
+ variant: "soft",
1009
+ color: "success"
1010
+ },
1011
+ class: { root: "bg-success-100 text-success-700 dark:bg-success-900/30 dark:text-success-300" }
1012
+ },
1013
+ {
1014
+ variants: {
1015
+ variant: "soft",
1016
+ color: "warning"
1017
+ },
1018
+ class: { root: "bg-warning-100 text-warning-700 dark:bg-warning-900/30 dark:text-warning-300" }
1019
+ },
1020
+ {
1021
+ variants: {
1022
+ variant: "soft",
1023
+ color: "error"
1024
+ },
1025
+ class: { root: "bg-error-100 text-error-700 dark:bg-error-900/30 dark:text-error-300" }
1026
+ },
1027
+ {
1028
+ variants: {
1029
+ variant: "soft",
1030
+ color: "info"
1031
+ },
1032
+ class: { root: "bg-info-100 text-info-700 dark:bg-info-900/30 dark:text-info-300" }
1033
+ },
1034
+ {
1035
+ variants: {
1036
+ variant: "outline",
1037
+ color: "primary"
1038
+ },
1039
+ class: { root: "border border-primary-600 bg-bg text-primary-700 dark:text-primary-400" }
1040
+ },
1041
+ {
1042
+ variants: {
1043
+ variant: "outline",
1044
+ color: "neutral"
1045
+ },
1046
+ class: { root: "border border-border bg-bg text-fg" }
1047
+ },
1048
+ {
1049
+ variants: {
1050
+ variant: "outline",
1051
+ color: "success"
1052
+ },
1053
+ class: { root: "border border-success-600 bg-bg text-success-700 dark:text-success-400" }
1054
+ },
1055
+ {
1056
+ variants: {
1057
+ variant: "outline",
1058
+ color: "warning"
1059
+ },
1060
+ class: { root: "border border-warning-600 bg-bg text-warning-700 dark:text-warning-400" }
1061
+ },
1062
+ {
1063
+ variants: {
1064
+ variant: "outline",
1065
+ color: "error"
1066
+ },
1067
+ class: { root: "border border-error-600 bg-bg text-error-700 dark:text-error-400" }
1068
+ },
1069
+ {
1070
+ variants: {
1071
+ variant: "outline",
1072
+ color: "info"
1073
+ },
1074
+ class: { root: "border border-info-600 bg-bg text-info-700 dark:text-info-400" }
1075
+ }
1076
+ ],
1077
+ defaultVariants: {
1078
+ variant: "soft",
1079
+ color: "neutral",
1080
+ size: "md"
1081
+ }
1082
+ },
1083
+ modal: {
1084
+ classes: {
1085
+ overlay: "fixed inset-0 z-50 bg-neutral-950/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
1086
+ content: "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border border-border bg-bg p-6 text-fg shadow-lg outline-none focus: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",
1087
+ header: "flex flex-col gap-1.5",
1088
+ title: "text-lg font-semibold text-fg",
1089
+ description: "text-sm text-fg-muted",
1090
+ body: "flex flex-col gap-2 text-sm text-fg",
1091
+ footer: "flex flex-row items-center justify-end gap-2",
1092
+ trigger: "",
1093
+ close: "focus:outline-none focus:ring-2 focus:ring-ring",
1094
+ closeIcon: "absolute right-3 top-3 inline-flex h-7 w-7 items-center justify-center rounded-md text-fg-muted hover:bg-bg-muted hover:text-fg focus:outline-none focus:ring-2 focus:ring-ring",
1095
+ back: "inline-flex h-7 w-7 items-center justify-center rounded-md text-fg-muted hover:bg-bg-muted hover:text-fg focus:outline-none focus:ring-2 focus:ring-ring"
1096
+ },
1097
+ variants: { size: {
1098
+ sm: { content: "max-w-sm p-4 gap-3" },
1099
+ md: { content: "" },
1100
+ lg: { content: "max-w-2xl" },
1101
+ xl: { content: "max-w-4xl" }
1102
+ } },
1103
+ defaultVariants: { size: "md" }
1104
+ },
1105
+ popover: {
1106
+ classes: {
1107
+ trigger: "",
1108
+ content: "z-50 w-72 rounded-md border border-border bg-bg p-4 text-sm text-fg 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",
1109
+ arrow: "fill-bg",
1110
+ close: "focus:outline-none focus:ring-2 focus:ring-ring",
1111
+ closeIcon: "absolute right-2 top-2 inline-flex h-6 w-6 items-center justify-center rounded-md text-fg-muted hover:bg-bg-muted hover:text-fg focus:outline-none focus:ring-2 focus:ring-ring"
1112
+ },
1113
+ variants: { size: {
1114
+ sm: { content: "w-56 p-3 text-xs" },
1115
+ md: { content: "" },
1116
+ lg: { content: "w-96 p-5 text-base" }
1117
+ } },
1118
+ defaultVariants: { size: "md" }
1119
+ },
1120
+ hoverCard: {
1121
+ classes: {
1122
+ trigger: "",
1123
+ content: "z-50 w-64 rounded-md border border-border bg-bg p-4 text-sm text-fg 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",
1124
+ arrow: "fill-bg"
1125
+ },
1126
+ variants: { size: {
1127
+ sm: { content: "w-48 p-3 text-xs" },
1128
+ md: { content: "" },
1129
+ lg: { content: "w-80 p-5 text-base" }
1130
+ } },
1131
+ defaultVariants: { size: "md" }
1132
+ },
1133
+ stepper: {
1134
+ classes: {
1135
+ root: "flex items-center gap-2 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
1136
+ item: "group flex flex-1 items-center gap-2 data-[orientation=vertical]:flex-row",
1137
+ trigger: "inline-flex shrink-0 items-center justify-center rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60",
1138
+ indicator: "inline-flex h-8 w-8 items-center justify-center rounded-full border border-border bg-bg text-sm font-semibold text-fg-muted group-data-[state=active]:border-primary-600 group-data-[state=active]:bg-primary-600 group-data-[state=active]:text-on-primary group-data-[state=completed]:border-primary-600 group-data-[state=completed]:bg-primary-600 group-data-[state=completed]:text-on-primary",
1139
+ title: "text-sm font-medium text-fg",
1140
+ description: "text-xs text-fg-muted",
1141
+ separator: "h-px flex-1 shrink bg-border data-[state=completed]:bg-primary-600 data-[orientation=vertical]:h-8 data-[orientation=vertical]:w-px"
1142
+ },
1143
+ variants: { size: {
1144
+ sm: {
1145
+ indicator: "vc-stepper-indicator-sm",
1146
+ title: "text-xs!",
1147
+ description: "text-[0.625rem]!"
1148
+ },
1149
+ md: { indicator: "" },
1150
+ lg: {
1151
+ indicator: "vc-stepper-indicator-lg",
1152
+ title: "text-base!",
1153
+ description: "text-sm!"
1154
+ }
1155
+ } },
1156
+ defaultVariants: { size: "md" }
1157
+ },
1158
+ toastViewport: {
1159
+ classes: { root: "fixed z-[100] flex max-h-screen w-full max-w-sm flex-col gap-2 p-4 list-none m-0 pointer-events-none [&>*]:pointer-events-auto outline-none" },
1160
+ variants: { position: {
1161
+ "top-left": { root: "top-0 left-0" },
1162
+ "top-right": { root: "top-0 right-0" },
1163
+ "top-center": { root: "top-0 left-1/2 -translate-x-1/2" },
1164
+ "bottom-left": { root: "bottom-0 left-0 flex-col-reverse" },
1165
+ "bottom-right": { root: "bottom-0 right-0 flex-col-reverse" },
1166
+ "bottom-center": { root: "bottom-0 left-1/2 -translate-x-1/2 flex-col-reverse" }
1167
+ } },
1168
+ defaultVariants: { position: "top-right" }
1169
+ },
1170
+ toast: {
1171
+ classes: {
1172
+ root: "relative pointer-events-auto flex w-full items-start gap-3 overflow-hidden rounded-md border border-border bg-bg p-4 pr-8 text-sm text-fg shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:slide-in-from-right-full data-[state=closed]:slide-out-to-right-full data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=end]:animate-out data-[swipe=end]:fade-out-80",
1173
+ body: "flex flex-col gap-1 flex-1 min-w-0",
1174
+ close: "inline-flex items-center justify-center rounded-md px-2 py-1 text-xs font-medium text-fg-muted hover:text-fg focus:outline-none focus:ring-2 focus:ring-ring",
1175
+ closeIcon: "absolute right-2 top-2 inline-flex h-6 w-6 items-center justify-center rounded-md text-fg-muted hover:bg-bg-muted hover:text-fg focus:outline-none focus:ring-2 focus:ring-ring"
1176
+ },
1177
+ compoundVariants: [
1178
+ {
1179
+ variants: {
1180
+ variant: "solid",
1181
+ color: "primary"
1182
+ },
1183
+ class: { root: "bg-primary-600 text-on-primary border-primary-700" }
1184
+ },
1185
+ {
1186
+ variants: {
1187
+ variant: "solid",
1188
+ color: "neutral"
1189
+ },
1190
+ class: { root: "bg-neutral-700 text-on-neutral border-neutral-800" }
1191
+ },
1192
+ {
1193
+ variants: {
1194
+ variant: "solid",
1195
+ color: "success"
1196
+ },
1197
+ class: { root: "bg-success-600 text-on-success border-success-700" }
1198
+ },
1199
+ {
1200
+ variants: {
1201
+ variant: "solid",
1202
+ color: "warning"
1203
+ },
1204
+ class: { root: "bg-warning-600 text-on-warning border-warning-700" }
1205
+ },
1206
+ {
1207
+ variants: {
1208
+ variant: "solid",
1209
+ color: "error"
1210
+ },
1211
+ class: { root: "bg-error-600 text-on-error border-error-700" }
1212
+ },
1213
+ {
1214
+ variants: {
1215
+ variant: "solid",
1216
+ color: "info"
1217
+ },
1218
+ class: { root: "bg-info-600 text-on-info border-info-700" }
1219
+ },
1220
+ {
1221
+ variants: {
1222
+ variant: "soft",
1223
+ color: "primary"
1224
+ },
1225
+ class: { root: "bg-primary-50 text-primary-900 border-primary-200 dark:bg-primary-950/30 dark:text-primary-200 dark:border-primary-900" }
1226
+ },
1227
+ {
1228
+ variants: {
1229
+ variant: "soft",
1230
+ color: "neutral"
1231
+ },
1232
+ class: { root: "bg-bg-muted text-fg border-border" }
1233
+ },
1234
+ {
1235
+ variants: {
1236
+ variant: "soft",
1237
+ color: "success"
1238
+ },
1239
+ class: { root: "bg-success-50 text-success-900 border-success-200 dark:bg-success-950/30 dark:text-success-200 dark:border-success-900" }
1240
+ },
1241
+ {
1242
+ variants: {
1243
+ variant: "soft",
1244
+ color: "warning"
1245
+ },
1246
+ class: { root: "bg-warning-50 text-warning-900 border-warning-200 dark:bg-warning-950/30 dark:text-warning-200 dark:border-warning-900" }
1247
+ },
1248
+ {
1249
+ variants: {
1250
+ variant: "soft",
1251
+ color: "error"
1252
+ },
1253
+ class: { root: "bg-error-50 text-error-900 border-error-200 dark:bg-error-950/30 dark:text-error-200 dark:border-error-900" }
1254
+ },
1255
+ {
1256
+ variants: {
1257
+ variant: "soft",
1258
+ color: "info"
1259
+ },
1260
+ class: { root: "bg-info-50 text-info-900 border-info-200 dark:bg-info-950/30 dark:text-info-200 dark:border-info-900" }
1261
+ },
1262
+ {
1263
+ variants: {
1264
+ variant: "outline",
1265
+ color: "primary"
1266
+ },
1267
+ class: { root: "border-primary-600 bg-bg text-primary-700 dark:text-primary-300" }
1268
+ },
1269
+ {
1270
+ variants: {
1271
+ variant: "outline",
1272
+ color: "neutral"
1273
+ },
1274
+ class: { root: "border-border bg-bg text-fg" }
1275
+ },
1276
+ {
1277
+ variants: {
1278
+ variant: "outline",
1279
+ color: "success"
1280
+ },
1281
+ class: { root: "border-success-600 bg-bg text-success-700 dark:text-success-300" }
1282
+ },
1283
+ {
1284
+ variants: {
1285
+ variant: "outline",
1286
+ color: "warning"
1287
+ },
1288
+ class: { root: "border-warning-600 bg-bg text-warning-700 dark:text-warning-300" }
1289
+ },
1290
+ {
1291
+ variants: {
1292
+ variant: "outline",
1293
+ color: "error"
1294
+ },
1295
+ class: { root: "border-error-600 bg-bg text-error-700 dark:text-error-300" }
1296
+ },
1297
+ {
1298
+ variants: {
1299
+ variant: "outline",
1300
+ color: "info"
1301
+ },
1302
+ class: { root: "border-info-600 bg-bg text-info-700 dark:text-info-300" }
1303
+ }
1304
+ ],
1305
+ defaultVariants: {
1306
+ variant: "soft",
1307
+ color: "neutral"
1308
+ }
1309
+ },
1310
+ toastTitle: { classes: { root: "text-sm font-semibold leading-tight" } },
1311
+ toastDescription: { classes: { root: "text-sm leading-snug opacity-90" } },
1312
+ toastAction: { classes: { root: "inline-flex items-center justify-center rounded-md border border-current px-2 py-1 text-xs font-medium hover:bg-bg-muted focus:outline-none focus:ring-2 focus:ring-ring shrink-0" } },
1313
+ tooltip: {
1314
+ classes: {
1315
+ trigger: "",
1316
+ content: "z-50 overflow-hidden rounded-md bg-neutral-900 px-3 py-1.5 text-xs text-on-neutral shadow-md data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95 dark:bg-neutral-50 dark:text-neutral-900",
1317
+ arrow: "fill-neutral-900 dark:fill-neutral-50"
1318
+ },
1319
+ variants: { size: {
1320
+ sm: { content: "px-2 py-1 text-[0.625rem]" },
1321
+ md: { content: "" },
1322
+ lg: { content: "px-4 py-2 text-sm" }
1323
+ } },
1324
+ defaultVariants: { size: "md" }
1325
+ },
1326
+ dropdownMenu: {
1327
+ classes: {
1328
+ trigger: "",
1329
+ content: "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-bg p-1 text-sm text-fg 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",
1330
+ item: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 outline-none data-[highlighted]:bg-bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
1331
+ checkboxItem: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm py-1.5 pl-7 pr-2 outline-none data-[highlighted]:bg-bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
1332
+ radioItem: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm py-1.5 pl-7 pr-2 outline-none data-[highlighted]:bg-bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
1333
+ radioGroup: "",
1334
+ itemIndicator: "absolute left-2 inline-flex h-3.5 w-3.5 items-center justify-center",
1335
+ label: "px-2 py-1.5 text-xs font-semibold text-fg-muted",
1336
+ separator: "-mx-1 my-1 h-px bg-border",
1337
+ group: "",
1338
+ subTrigger: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 outline-none data-[highlighted]:bg-bg-muted data-[state=open]:bg-bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
1339
+ subContent: "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-bg p-1 text-sm text-fg 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",
1340
+ arrow: "fill-bg"
1341
+ },
1342
+ variants: { size: {
1343
+ sm: {
1344
+ content: "min-w-[6rem] text-xs",
1345
+ item: "px-1.5 py-1",
1346
+ subTrigger: "px-1.5 py-1",
1347
+ subContent: "min-w-[6rem] text-xs"
1348
+ },
1349
+ md: { content: "" },
1350
+ lg: {
1351
+ content: "min-w-[12rem] text-base",
1352
+ item: "px-3 py-2",
1353
+ subTrigger: "px-3 py-2",
1354
+ subContent: "min-w-[12rem] text-base"
1355
+ }
1356
+ } },
1357
+ defaultVariants: { size: "md" }
1358
+ },
1359
+ contextMenu: {
1360
+ classes: {
1361
+ trigger: "",
1362
+ content: "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-bg p-1 text-sm text-fg 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",
1363
+ item: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 outline-none data-[highlighted]:bg-bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
1364
+ checkboxItem: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm py-1.5 pl-7 pr-2 outline-none data-[highlighted]:bg-bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
1365
+ radioItem: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm py-1.5 pl-7 pr-2 outline-none data-[highlighted]:bg-bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
1366
+ radioGroup: "",
1367
+ itemIndicator: "absolute left-2 inline-flex h-3.5 w-3.5 items-center justify-center",
1368
+ label: "px-2 py-1.5 text-xs font-semibold text-fg-muted",
1369
+ separator: "-mx-1 my-1 h-px bg-border",
1370
+ group: "",
1371
+ subTrigger: "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 outline-none data-[highlighted]:bg-bg-muted data-[state=open]:bg-bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
1372
+ subContent: "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-bg p-1 text-sm text-fg 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"
1373
+ },
1374
+ variants: { size: {
1375
+ sm: {
1376
+ content: "min-w-[6rem] text-xs",
1377
+ item: "px-1.5 py-1",
1378
+ subTrigger: "px-1.5 py-1",
1379
+ subContent: "min-w-[6rem] text-xs"
1380
+ },
1381
+ md: { content: "" },
1382
+ lg: {
1383
+ content: "min-w-[12rem] text-base",
1384
+ item: "px-3 py-2",
1385
+ subTrigger: "px-3 py-2",
1386
+ subContent: "min-w-[12rem] text-base"
1387
+ }
1388
+ } },
1389
+ defaultVariants: { size: "md" }
1390
+ }
1391
+ }
1392
+ };
1393
+ }
1394
+ //#endregion
1395
+ export { COLOR_PALETTE_STYLE_ELEMENT_ID, applyColorPaletteCss, bindColorPalette, tailwindTheme as default, merge, renderColorPaletteStyles, setColorPalette, useColorPalette };
1396
+
1397
+ //# sourceMappingURL=index.mjs.map