@zentauri-ui/zentauri-components 1.8.41 → 1.9.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 (80) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/LICENSE +21 -0
  3. package/README.md +77 -64
  4. package/dist/{chunk-RFT2FLQT.js → chunk-5IJC2OEN.js} +10 -12
  5. package/dist/chunk-5IJC2OEN.js.map +1 -0
  6. package/dist/{chunk-CJXGDY7A.mjs → chunk-DY7HLVGW.mjs} +10 -12
  7. package/dist/chunk-DY7HLVGW.mjs.map +1 -0
  8. package/dist/chunk-KVQI5PLL.mjs +399 -0
  9. package/dist/chunk-KVQI5PLL.mjs.map +1 -0
  10. package/dist/chunk-NRPG2STN.js +401 -0
  11. package/dist/chunk-NRPG2STN.js.map +1 -0
  12. package/dist/{chunk-V5JTDRV5.mjs → chunk-TKVZU56F.mjs} +11 -11
  13. package/dist/chunk-TKVZU56F.mjs.map +1 -0
  14. package/dist/{chunk-Z4KHAD6Y.js → chunk-U3VV22G4.js} +11 -11
  15. package/dist/chunk-U3VV22G4.js.map +1 -0
  16. package/dist/design-system/dynamic-stepper.d.ts +0 -1
  17. package/dist/design-system/dynamic-stepper.d.ts.map +1 -1
  18. package/dist/design-system/inputs.d.ts +65 -0
  19. package/dist/design-system/inputs.d.ts.map +1 -1
  20. package/dist/design-system/kbd.d.ts +1 -0
  21. package/dist/design-system/kbd.d.ts.map +1 -1
  22. package/dist/design-system/marquee.d.ts +9 -9
  23. package/dist/design-system/timeline.d.ts +9 -9
  24. package/dist/test-utils/axe.d.ts +30 -0
  25. package/dist/test-utils/axe.d.ts.map +1 -0
  26. package/dist/ui/dynamic-stepper/variants.d.ts +2 -2
  27. package/dist/ui/dynamic-stepper/variants.d.ts.map +1 -1
  28. package/dist/ui/dynamic-stepper.js +3 -4
  29. package/dist/ui/dynamic-stepper.js.map +1 -1
  30. package/dist/ui/dynamic-stepper.mjs +3 -4
  31. package/dist/ui/dynamic-stepper.mjs.map +1 -1
  32. package/dist/ui/inputs/animated.js +3 -3
  33. package/dist/ui/inputs/animated.mjs +1 -1
  34. package/dist/ui/inputs/variants.d.ts.map +1 -1
  35. package/dist/ui/inputs.js +4 -4
  36. package/dist/ui/inputs.mjs +2 -2
  37. package/dist/ui/kbd/animated.js +2 -2
  38. package/dist/ui/kbd/animated.mjs +1 -1
  39. package/dist/ui/kbd/variants.d.ts.map +1 -1
  40. package/dist/ui/kbd.js +4 -4
  41. package/dist/ui/kbd.mjs +2 -2
  42. package/dist/ui/marquee.js +9 -9
  43. package/dist/ui/marquee.js.map +1 -1
  44. package/dist/ui/marquee.mjs +9 -9
  45. package/dist/ui/marquee.mjs.map +1 -1
  46. package/dist/ui/search.js +2 -2
  47. package/dist/ui/search.mjs +1 -1
  48. package/dist/ui/select/select.d.ts +2 -2
  49. package/dist/ui/select/select.d.ts.map +1 -1
  50. package/dist/ui/select/types.d.ts +2 -0
  51. package/dist/ui/select/types.d.ts.map +1 -1
  52. package/dist/ui/select.js +26 -4
  53. package/dist/ui/select.js.map +1 -1
  54. package/dist/ui/select.mjs +27 -5
  55. package/dist/ui/select.mjs.map +1 -1
  56. package/dist/ui/timeline/animated.js +11 -11
  57. package/dist/ui/timeline/animated.mjs +2 -2
  58. package/dist/ui/timeline.js +14 -14
  59. package/dist/ui/timeline.mjs +2 -2
  60. package/package.json +47 -16
  61. package/src/design-system/dynamic-stepper.ts +0 -7
  62. package/src/design-system/inputs.ts +102 -0
  63. package/src/design-system/kbd.ts +3 -0
  64. package/src/design-system/marquee.ts +9 -9
  65. package/src/design-system/timeline.ts +9 -9
  66. package/src/ui/accessibility/axe-core.test.tsx +139 -0
  67. package/src/ui/dynamic-stepper/variants.ts +7 -3
  68. package/src/ui/inputs/variants.ts +57 -90
  69. package/src/ui/kbd/variants.ts +8 -10
  70. package/src/ui/select/select.test.tsx +24 -0
  71. package/src/ui/select/select.tsx +37 -4
  72. package/src/ui/select/types.ts +2 -0
  73. package/dist/chunk-CJXGDY7A.mjs.map +0 -1
  74. package/dist/chunk-D3VZKUMH.mjs +0 -340
  75. package/dist/chunk-D3VZKUMH.mjs.map +0 -1
  76. package/dist/chunk-RFT2FLQT.js.map +0 -1
  77. package/dist/chunk-UGH23TAH.js +0 -342
  78. package/dist/chunk-UGH23TAH.js.map +0 -1
  79. package/dist/chunk-V5JTDRV5.mjs.map +0 -1
  80. package/dist/chunk-Z4KHAD6Y.js.map +0 -1
@@ -1,340 +0,0 @@
1
- import { cva } from 'class-variance-authority';
2
-
3
- // src/ui/inputs/variants.ts
4
-
5
- // src/design-system/inputs.ts
6
- var zuiInputBase = [
7
- "w-full min-w-0 rounded-xl border bg-[var(--zui-input-bg,#0000000d)] dark:bg-[var(--zui-input-bg-dark,#ffffff0d)] text-[color:var(--zui-input-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-input-fg-dark,oklch(98.4%_0.003_247.858))] shadow-[var(--zui-input-shadow,0_1px_2px_rgba(15,23,42,0.08))] dark:shadow-[var(--zui-input-shadow-dark,0_1px_2px_rgba(15,23,42,0.12))]",
8
- "ring-offset-[var(--zui-input-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-input-ring-offset-dark,oklch(12.9%_0.042_264.695))] transition-colors",
9
- "placeholder:text-[color:var(--zui-input-placeholder-fg,oklch(55.4%_0.046_257.417))] dark:placeholder:text-[color:var(--zui-input-placeholder-fg-dark,oklch(55.4%_0.046_257.417))]",
10
- "focus-visible:outline-none",
11
- "disabled:cursor-not-allowed disabled:opacity-50",
12
- "read-only:cursor-default read-only:bg-[var(--zui-input-bg-read-only,#00000008)] dark:read-only:bg-[var(--zui-input-bg-read-only-dark,#ffffff08)] dark:bg-[var(--zui-input-bg-dark,#ffffff08)]",
13
- "file:h-8"
14
- ];
15
- var zuiInputAs = {
16
- input: "",
17
- textarea: "h-auto! resize-y py-2 align-top",
18
- file: [
19
- "p-0! cursor-pointer",
20
- "file:cursor-pointer file:border-0 file:border-r file:border-[color:var(--zui-input-file-border,#0000001a)] dark:file:border-[color:var(--zui-input-file-border-dark,#ffffff1a)]",
21
- "file:bg-[var(--zui-input-file-bg,#0000001a)] dark:file:bg-[var(--zui-input-file-bg-dark,#ffffff1a)] file:text-[color:var(--zui-input-file-fg,oklch(37.2%_0.044_257.287))] dark:file:text-[color:var(--zui-input-file-fg-dark,oklch(92.9%_0.013_255.508))] file:font-medium",
22
- "file:transition-colors file:duration-200",
23
- "hover:file:bg-[var(--zui-input-file-bg-hover,#00000026)] dark:hover:file:bg-[var(--zui-input-file-bg-hover-dark,#ffffff26)]",
24
- "[&:not(:disabled)]:file:hover:text-[color:var(--zui-input-file-fg-hover,#ffffff)] dark:[&:not(:disabled)]:file:hover:text-[color:var(--zui-input-file-fg-hover-dark,#ffffff)]",
25
- "disabled:file:cursor-not-allowed"
26
- ],
27
- checkbox: [
28
- "shrink-0 cursor-pointer appearance-none relative",
29
- "min-h-0! shadow-none outline-none",
30
- "border-2 border-[color:var(--zui-input-checkbox-border,#0000004d)] dark:border-[color:var(--zui-input-checkbox-border-dark,#ffffff4d)] [&:not(:checked)]:bg-[var(--zui-input-checkbox-bg,transparent)] dark:[&:not(:checked)]:bg-[var(--zui-input-checkbox-bg-dark,transparent)]",
31
- "transition-[color,box-shadow,border-color,background-color]",
32
- "disabled:cursor-not-allowed disabled:opacity-50",
33
- "read-only:cursor-default",
34
- "checked:after:absolute checked:after:content-[''] checked:after:size-3 checked:after:top-1/2 checked:after:left-1/2 checked:after:-translate-x-1/2 checked:after:-translate-y-1/2 checked:after:rounded-full checked:after:bg-current"
35
- ],
36
- radio: [
37
- "shrink-0 cursor-pointer appearance-none rounded-full",
38
- "min-h-0! shadow-none outline-none",
39
- "border-2 border-[color:var(--zui-input-radio-border,#0000004d)] dark:border-[color:var(--zui-input-radio-border-dark,#ffffff4d)] bg-[var(--zui-input-radio-bg,transparent)]! dark:bg-[var(--zui-input-radio-bg-dark,transparent)]! read-only:bg-[var(--zui-input-radio-bg-read-only,transparent)]! dark:read-only:bg-[var(--zui-input-radio-bg-read-only-dark,transparent)]!",
40
- "ring-2 ring-[var(--zui-input-radio-ring,#00000033)] dark:ring-[var(--zui-input-radio-ring-dark,#ffffff33)] ring-offset-2 ring-offset-[var(--zui-input-radio-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-input-radio-ring-offset-dark,oklch(12.9%_0.042_264.695))]",
41
- "transition-[color,box-shadow,background-color,border-color,box-shadow]",
42
- "disabled:cursor-not-allowed disabled:opacity-50",
43
- "read-only:cursor-default"
44
- ],
45
- date: "w-auto shrink-0"
46
- };
47
- var zuiInputAppearances = {
48
- default: "border-[color:var(--zui-input-default-border,#0000001a)] dark:border-[color:var(--zui-input-default-border-dark,#ffffff1a)] focus-visible:border-[color:var(--zui-input-default-border-focus,#00000033)] dark:focus-visible:border-[color:var(--zui-input-default-border-focus-dark,#ffffff33)]",
49
- warning: "border-[color:var(--zui-input-warning-border,oklch(79.5%_0.184_86.047_/_0.8))] dark:border-[color:var(--zui-input-warning-border-dark,oklch(79.5%_0.184_86.047_/_0.8))] text-[color:var(--zui-input-warning-fg,oklch(28.6%_0.066_53.813))] dark:text-[color:var(--zui-input-warning-fg-dark,oklch(98.7%_0.026_102.212))] placeholder:text-[color:var(--zui-input-warning-placeholder-fg,oklch(47.6%_0.114_61.907))] dark:placeholder:text-[color:var(--zui-input-warning-placeholder-fg-dark,oklch(90.5%_0.182_98.111_/_0.7))] focus-visible:border-[color:var(--zui-input-warning-border-focus,oklch(68.1%_0.162_75.834))] dark:focus-visible:border-[color:var(--zui-input-warning-border-focus-dark,oklch(85.2%_0.199_91.936))] focus-visible:ring-[var(--zui-input-warning-ring-focus,oklch(85.2%_0.199_91.936_/_0.8))] dark:focus-visible:ring-[var(--zui-input-warning-ring-focus-dark,oklch(85.2%_0.199_91.936_/_0.8))]",
50
- error: "border-[color:var(--zui-input-error-border,oklch(64.5%_0.246_16.439_/_0.8))] dark:border-[color:var(--zui-input-error-border-dark,oklch(64.5%_0.246_16.439_/_0.8))] text-[color:var(--zui-input-error-fg,oklch(27.1%_0.105_12.094))] dark:text-[color:var(--zui-input-error-fg-dark,oklch(96.9%_0.015_12.422))] placeholder:text-[color:var(--zui-input-error-placeholder-fg,oklch(45.5%_0.188_13.697))] dark:placeholder:text-[color:var(--zui-input-error-placeholder-fg-dark,oklch(81%_0.117_11.638_/_0.7))] focus-visible:border-[color:var(--zui-input-error-border-focus,oklch(58.6%_0.253_17.585))] dark:focus-visible:border-[color:var(--zui-input-error-border-focus-dark,oklch(71.2%_0.194_13.428))] focus-visible:ring-[var(--zui-input-error-ring-focus,oklch(71.2%_0.194_13.428_/_0.8))] dark:focus-visible:ring-[var(--zui-input-error-ring-focus-dark,oklch(71.2%_0.194_13.428_/_0.8))]",
51
- success: "border-[color:var(--zui-input-success-border,oklch(69.6%_0.17_162.48_/_0.7))] dark:border-[color:var(--zui-input-success-border-dark,oklch(69.6%_0.17_162.48_/_0.7))] text-[color:var(--zui-input-success-fg,oklch(26.2%_0.051_172.552))] dark:text-[color:var(--zui-input-success-fg-dark,oklch(97.9%_0.021_166.113))] placeholder:text-[color:var(--zui-input-success-placeholder-fg,oklch(43.2%_0.095_166.913))] dark:placeholder:text-[color:var(--zui-input-success-placeholder-fg-dark,oklch(84.5%_0.143_164.978_/_0.7))] focus-visible:border-[color:var(--zui-input-success-border-focus,oklch(59.6%_0.145_163.225))] dark:focus-visible:border-[color:var(--zui-input-success-border-focus-dark,oklch(76.5%_0.177_163.223))] focus-visible:ring-[var(--zui-input-success-ring-focus,oklch(76.5%_0.177_163.223_/_0.8))] dark:focus-visible:ring-[var(--zui-input-success-ring-focus-dark,oklch(76.5%_0.177_163.223_/_0.8))]",
52
- info: "border-[color:var(--zui-input-info-border,oklch(62.3%_0.214_259.815_/_0.8))] dark:border-[color:var(--zui-input-info-border-dark,oklch(62.3%_0.214_259.815_/_0.8))] text-[color:var(--zui-input-info-fg,oklch(28.2%_0.091_267.935))] dark:text-[color:var(--zui-input-info-fg-dark,oklch(97%_0.014_254.604))] placeholder:text-[color:var(--zui-input-info-placeholder-fg,oklch(42.4%_0.199_265.638))] dark:placeholder:text-[color:var(--zui-input-info-placeholder-fg-dark,oklch(80.9%_0.105_251.813_/_0.7))] focus-visible:border-[color:var(--zui-input-info-border-focus,oklch(54.6%_0.245_262.881))] dark:focus-visible:border-[color:var(--zui-input-info-border-focus-dark,oklch(70.7%_0.165_254.624))] focus-visible:ring-[var(--zui-input-info-ring-focus,oklch(70.7%_0.165_254.624_/_0.8))] dark:focus-visible:ring-[var(--zui-input-info-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.8))]",
53
- violet: "border-[color:var(--zui-input-violet-border,oklch(60.6%_0.25_292.717_/_0.8))] dark:border-[color:var(--zui-input-violet-border-dark,oklch(60.6%_0.25_292.717_/_0.8))] text-[color:var(--zui-input-violet-fg,oklch(28.3%_0.141_291.089))] dark:text-[color:var(--zui-input-violet-fg-dark,oklch(96.9%_0.016_293.756))] placeholder:text-[color:var(--zui-input-violet-placeholder-fg,oklch(43.2%_0.232_292.759))] dark:placeholder:text-[color:var(--zui-input-violet-placeholder-fg-dark,oklch(81.1%_0.111_293.571_/_0.7))] focus-visible:border-[color:var(--zui-input-violet-border-focus,oklch(54.1%_0.281_293.009))] dark:focus-visible:border-[color:var(--zui-input-violet-border-focus-dark,oklch(70.2%_0.183_293.541))] focus-visible:ring-[var(--zui-input-violet-ring-focus,oklch(70.2%_0.183_293.541_/_0.8))] dark:focus-visible:ring-[var(--zui-input-violet-ring-focus-dark,oklch(70.2%_0.183_293.541_/_0.8))]",
54
- amber: "border-[color:var(--zui-input-amber-border,oklch(76.9%_0.188_70.08_/_0.8))] dark:border-[color:var(--zui-input-amber-border-dark,oklch(76.9%_0.188_70.08_/_0.8))] text-[color:var(--zui-input-amber-fg,oklch(27.9%_0.077_45.635))] dark:text-[color:var(--zui-input-amber-fg-dark,oklch(98.7%_0.022_95.277))] placeholder:text-[color:var(--zui-input-amber-placeholder-fg,oklch(47.3%_0.137_46.201))] dark:placeholder:text-[color:var(--zui-input-amber-placeholder-fg-dark,oklch(87.9%_0.169_91.605_/_0.7))] focus-visible:border-[color:var(--zui-input-amber-border-focus,oklch(66.6%_0.179_58.318))] dark:focus-visible:border-[color:var(--zui-input-amber-border-focus-dark,oklch(82.8%_0.189_84.429))] focus-visible:ring-[var(--zui-input-amber-ring-focus,oklch(82.8%_0.189_84.429_/_0.8))] dark:focus-visible:ring-[var(--zui-input-amber-ring-focus-dark,oklch(82.8%_0.189_84.429_/_0.8))]",
55
- pink: "border-[color:var(--zui-input-pink-border,oklch(65.6%_0.241_354.308_/_0.8))] dark:border-[color:var(--zui-input-pink-border-dark,oklch(65.6%_0.241_354.308_/_0.8))] text-[color:var(--zui-input-pink-fg,oklch(28.4%_0.109_3.907))] dark:text-[color:var(--zui-input-pink-fg-dark,oklch(97.1%_0.014_343.198))] placeholder:text-[color:var(--zui-input-pink-placeholder-fg,oklch(45.9%_0.187_3.815))] dark:placeholder:text-[color:var(--zui-input-pink-placeholder-fg-dark,oklch(82.3%_0.12_346.018_/_0.7))] focus-visible:border-[color:var(--zui-input-pink-border-focus,oklch(59.2%_0.249_0.584))] dark:focus-visible:border-[color:var(--zui-input-pink-border-focus-dark,oklch(71.8%_0.202_349.761))] focus-visible:ring-[var(--zui-input-pink-ring-focus,oklch(71.8%_0.202_349.761_/_0.8))] dark:focus-visible:ring-[var(--zui-input-pink-ring-focus-dark,oklch(71.8%_0.202_349.761_/_0.8))]",
56
- indigo: "border-[color:var(--zui-input-indigo-border,oklch(58.5%_0.233_277.117_/_0.8))] dark:border-[color:var(--zui-input-indigo-border-dark,oklch(58.5%_0.233_277.117_/_0.8))] text-[color:var(--zui-input-indigo-fg,oklch(25.7%_0.09_281.288))] dark:text-[color:var(--zui-input-indigo-fg-dark,oklch(96.2%_0.018_272.314))] placeholder:text-[color:var(--zui-input-indigo-placeholder-fg,oklch(39.8%_0.195_277.366))] dark:placeholder:text-[color:var(--zui-input-indigo-placeholder-fg-dark,oklch(78.5%_0.115_274.713_/_0.7))] focus-visible:border-[color:var(--zui-input-indigo-border-focus,oklch(51.1%_0.262_276.966))] dark:focus-visible:border-[color:var(--zui-input-indigo-border-focus-dark,oklch(67.3%_0.182_276.935))] focus-visible:ring-[var(--zui-input-indigo-ring-focus,oklch(67.3%_0.182_276.935_/_0.8))] dark:focus-visible:ring-[var(--zui-input-indigo-ring-focus-dark,oklch(67.3%_0.182_276.935_/_0.8))]",
57
- orange: "border-[color:var(--zui-input-orange-border,oklch(70.5%_0.213_47.604_/_0.8))] dark:border-[color:var(--zui-input-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.8))] text-[color:var(--zui-input-orange-fg,oklch(26.6%_0.079_36.259))] dark:text-[color:var(--zui-input-orange-fg-dark,oklch(98%_0.016_73.684))] placeholder:text-[color:var(--zui-input-orange-placeholder-fg,oklch(47%_0.157_37.304))] dark:placeholder:text-[color:var(--zui-input-orange-placeholder-fg-dark,oklch(83.7%_0.128_66.29_/_0.7))] focus-visible:border-[color:var(--zui-input-orange-border-focus,oklch(64.6%_0.222_41.116))] dark:focus-visible:border-[color:var(--zui-input-orange-border-focus-dark,oklch(75%_0.183_55.934))] focus-visible:ring-[var(--zui-input-orange-ring-focus,oklch(75%_0.183_55.934_/_0.8))] dark:focus-visible:ring-[var(--zui-input-orange-ring-focus-dark,oklch(75%_0.183_55.934_/_0.8))]"
58
- };
59
- var zuiInputSizes = {
60
- sm: "h-8 px-3 text-xs",
61
- md: "h-9 md:h-11 px-4 text-sm",
62
- lg: "h-10 md:h-12 px-5 text-base"
63
- };
64
- var zuiInputRing = {
65
- true: "focus-visible:ring-2 focus-visible:ring-offset-2",
66
- false: ""
67
- };
68
-
69
- // src/ui/inputs/variants.ts
70
- var inputVariants = cva(zuiInputBase, {
71
- variants: {
72
- as: zuiInputAs,
73
- appearance: zuiInputAppearances,
74
- size: zuiInputSizes,
75
- ring: zuiInputRing
76
- },
77
- defaultVariants: {
78
- as: "input",
79
- appearance: "default",
80
- size: "md",
81
- ring: true
82
- },
83
- compoundVariants: [
84
- // ── textarea size overrides ──────────────────────────────────────────
85
- {
86
- as: "textarea",
87
- size: "sm",
88
- class: "min-h-[5rem]"
89
- },
90
- {
91
- as: "textarea",
92
- size: "md",
93
- class: "min-h-[6rem]"
94
- },
95
- {
96
- as: "textarea",
97
- size: "lg",
98
- class: "min-h-[7.5rem]"
99
- },
100
- // ── file input: size – height & file-button padding ──────────────────
101
- {
102
- as: "file",
103
- size: "sm",
104
- class: "h-8 text-xs pl-1 file:h-8 file:px-3 file:text-xs"
105
- },
106
- {
107
- as: "file",
108
- size: "md",
109
- class: "h-9 md:h-11 text-sm pl-1 file:h-9 md:file:h-11 file:px-4 file:text-sm"
110
- },
111
- {
112
- as: "file",
113
- size: "lg",
114
- class: "h-10 md:h-12 text-base pl-1 file:h-10 md:file:h-12 file:px-5 file:text-base"
115
- },
116
- // ── file input: appearance – file-button accent colour ───────────────
117
- {
118
- as: "file",
119
- appearance: "default",
120
- class: "file:text-slate-700 dark:file:text-slate-200"
121
- },
122
- {
123
- as: "file",
124
- appearance: "warning",
125
- class: "file:bg-yellow-500/20 file:text-yellow-800 dark:file:text-yellow-200 file:border-yellow-500/40 hover:file:bg-yellow-500/30"
126
- },
127
- {
128
- as: "file",
129
- appearance: "error",
130
- class: "file:bg-rose-500/20 file:text-rose-800 dark:file:text-rose-200 file:border-rose-500/40 hover:file:bg-rose-500/30"
131
- },
132
- {
133
- as: "file",
134
- appearance: "success",
135
- class: "file:bg-emerald-500/20 file:text-emerald-800 dark:file:text-emerald-200 file:border-emerald-500/40 hover:file:bg-emerald-500/30"
136
- },
137
- {
138
- as: "file",
139
- appearance: "info",
140
- class: "file:bg-blue-500/20 file:text-blue-800 dark:file:text-blue-200 file:border-blue-500/40 hover:file:bg-blue-500/30"
141
- },
142
- {
143
- as: "file",
144
- appearance: "violet",
145
- class: "file:bg-violet-500/20 file:text-violet-800 dark:file:text-violet-200 file:border-violet-500/40 hover:file:bg-violet-500/30"
146
- },
147
- {
148
- as: "file",
149
- appearance: "amber",
150
- class: "file:bg-amber-500/20 file:text-amber-800 dark:file:text-amber-200 file:border-amber-500/40 hover:file:bg-amber-500/30"
151
- },
152
- {
153
- as: "file",
154
- appearance: "pink",
155
- class: "file:bg-pink-500/20 file:text-pink-800 dark:file:text-pink-200 file:border-pink-500/40 hover:file:bg-pink-500/30"
156
- },
157
- {
158
- as: "file",
159
- appearance: "indigo",
160
- class: "file:bg-indigo-500/20 file:text-indigo-800 dark:file:text-indigo-200 file:border-indigo-500/40 hover:file:bg-indigo-500/30"
161
- },
162
- // ── checkbox / radio: size (overrides text-field height & padding) ───
163
- {
164
- as: "checkbox",
165
- size: "sm",
166
- class: "h-4! w-4! min-h-0! rounded-[0.35rem]! px-0! py-0!"
167
- },
168
- {
169
- as: "checkbox",
170
- size: "md",
171
- class: "h-5! w-5! min-h-0! rounded-md! px-0! py-0!"
172
- },
173
- {
174
- as: "checkbox",
175
- size: "lg",
176
- class: "h-6! w-6! min-h-0! rounded-md! px-0! py-0!"
177
- },
178
- {
179
- as: "radio",
180
- size: "sm",
181
- class: "h-4! w-4! min-h-0! px-0! py-0!"
182
- },
183
- {
184
- as: "radio",
185
- size: "md",
186
- class: "h-5! w-5! min-h-0! px-0! py-0!"
187
- },
188
- {
189
- as: "radio",
190
- size: "lg",
191
- class: "h-6! w-6! min-h-0! px-0! py-0!"
192
- },
193
- // ── checkbox: appearance (border + tick color; fill stays transparent) ─
194
- {
195
- as: "checkbox",
196
- appearance: "default",
197
- class: "border-slate-400/70! checked:border-slate-700 dark:checked:border-slate-200 checked:text-slate-700 dark:checked:text-slate-200 hover:border-slate-600 dark:hover:border-slate-300 focus-visible:border-slate-600 dark:focus-visible:border-slate-300 focus-visible:ring-slate-500/70 dark:focus-visible:ring-slate-400/70"
198
- },
199
- {
200
- as: "checkbox",
201
- appearance: "warning",
202
- class: "border-yellow-500/70! checked:border-yellow-600 dark:checked:border-yellow-400 checked:text-yellow-700 dark:checked:text-yellow-300 hover:border-yellow-600 dark:hover:border-yellow-400 focus-visible:border-yellow-600 dark:focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80"
203
- },
204
- {
205
- as: "checkbox",
206
- appearance: "error",
207
- class: "border-rose-500/70! checked:border-rose-600 dark:checked:border-rose-400 checked:text-rose-700 dark:checked:text-rose-300 hover:border-rose-600 dark:hover:border-rose-400 focus-visible:border-rose-600 dark:focus-visible:border-rose-400 focus-visible:ring-rose-400/80"
208
- },
209
- {
210
- as: "checkbox",
211
- appearance: "success",
212
- class: "border-emerald-500/70! checked:border-emerald-600 dark:checked:border-emerald-400 checked:text-emerald-700 dark:checked:text-emerald-300 hover:border-emerald-600 dark:hover:border-emerald-400 focus-visible:border-emerald-600 dark:focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80"
213
- },
214
- {
215
- as: "checkbox",
216
- appearance: "info",
217
- class: "border-blue-500/70! checked:border-blue-600 dark:checked:border-blue-400 checked:text-blue-700 dark:checked:text-blue-300 hover:border-blue-600 dark:hover:border-blue-400 focus-visible:border-blue-600 dark:focus-visible:border-blue-400 focus-visible:ring-blue-400/80"
218
- },
219
- {
220
- as: "checkbox",
221
- appearance: "violet",
222
- class: "border-violet-500/70! checked:after:bg-violet-600 dark:checked:after:bg-violet-400 checked:border-violet-600 dark:checked:border-violet-400 checked:text-violet-700 dark:checked:text-violet-300 hover:border-violet-600 dark:hover:border-violet-400 focus-visible:border-violet-600 dark:focus-visible:border-violet-400 focus-visible:ring-violet-400/80"
223
- },
224
- {
225
- as: "checkbox",
226
- appearance: "amber",
227
- class: "border-amber-500/70! checked:border-amber-400! checked:text-amber-700 dark:checked:text-amber-300 hover:border-amber-400! focus-visible:border-amber-400! focus-visible:ring-amber-400/80!"
228
- },
229
- {
230
- as: "checkbox",
231
- appearance: "pink",
232
- class: "border-pink-500/70! checked:border-pink-600 dark:checked:border-pink-400 checked:text-pink-700 dark:checked:text-pink-300 hover:border-pink-600 dark:hover:border-pink-400 focus-visible:border-pink-600 dark:focus-visible:border-pink-400 focus-visible:ring-pink-400/80"
233
- },
234
- {
235
- as: "checkbox",
236
- appearance: "indigo",
237
- class: "border-indigo-500/70! checked:border-indigo-400! checked:text-indigo-700 dark:checked:text-indigo-300 hover:border-indigo-400! focus-visible:border-indigo-400! focus-visible:ring-indigo-400/80!"
238
- },
239
- // ── radio: appearance (transparent fill, inner dot, coloured offset ring) ─
240
- {
241
- as: "radio",
242
- appearance: "default",
243
- class: "border-slate-400/70! checked:border-slate-700 dark:checked:border-slate-200 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(226,232,240)]! hover:border-slate-600 dark:hover:border-slate-300 focus-visible:border-slate-600 dark:focus-visible:border-slate-300 focus-visible:ring-slate-500/70 dark:focus-visible:ring-slate-400/70 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-slate-300/90!"
244
- },
245
- {
246
- as: "radio",
247
- appearance: "warning",
248
- class: "border-yellow-500/70! checked:border-yellow-600 dark:checked:border-yellow-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(250,204,21)]! hover:border-yellow-600 dark:hover:border-yellow-400 focus-visible:border-yellow-600 dark:focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-yellow-400/90!"
249
- },
250
- {
251
- as: "radio",
252
- appearance: "error",
253
- class: "border-rose-500/70! checked:border-rose-600 dark:checked:border-rose-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,113,133)]! hover:border-rose-600 dark:hover:border-rose-400 focus-visible:border-rose-600 dark:focus-visible:border-rose-400 focus-visible:ring-rose-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-rose-400/90!"
254
- },
255
- {
256
- as: "radio",
257
- appearance: "success",
258
- class: "border-emerald-500/70! checked:border-emerald-600 dark:checked:border-emerald-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(52,211,153)]! hover:border-emerald-600 dark:hover:border-emerald-400 focus-visible:border-emerald-600 dark:focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-emerald-400/90!"
259
- },
260
- {
261
- as: "radio",
262
- appearance: "info",
263
- class: "border-blue-500/70! checked:border-blue-600 dark:checked:border-blue-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(96,165,250)]! hover:border-blue-600 dark:hover:border-blue-400 focus-visible:border-blue-600 dark:focus-visible:border-blue-400 focus-visible:ring-blue-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-blue-400/90!"
264
- },
265
- {
266
- as: "radio",
267
- appearance: "violet",
268
- class: "border-violet-500/70! checked:border-violet-600 dark:checked:border-violet-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(167,139,250)]! hover:border-violet-600 dark:hover:border-violet-400 focus-visible:border-violet-600 dark:focus-visible:border-violet-400 focus-visible:ring-violet-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-violet-400/90!"
269
- },
270
- {
271
- as: "radio",
272
- appearance: "amber",
273
- class: "border-amber-500/70! checked:border-amber-600 dark:checked:border-amber-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,191,36)]! hover:border-amber-600 dark:hover:border-amber-400 focus-visible:border-amber-600 dark:focus-visible:border-amber-400 focus-visible:ring-amber-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-amber-400/90!"
274
- },
275
- {
276
- as: "radio",
277
- appearance: "pink",
278
- class: "border-pink-500/70! checked:border-pink-600 dark:checked:border-pink-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(244,114,182)]! hover:border-pink-600 dark:hover:border-pink-400 focus-visible:border-pink-600 dark:focus-visible:border-pink-400 focus-visible:ring-pink-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-pink-400/90!"
279
- },
280
- {
281
- as: "radio",
282
- appearance: "indigo",
283
- class: "border-indigo-500/70! checked:border-indigo-600 dark:checked:border-indigo-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(129,140,248)]! hover:border-indigo-600 dark:hover:border-indigo-400 focus-visible:border-indigo-600 dark:focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-indigo-400/90!"
284
- },
285
- {
286
- as: "date",
287
- appearance: "default",
288
- class: "bg-white dark:bg-black border border-black/10 dark:border-white/80 text-black dark:text-white"
289
- },
290
- {
291
- as: "date",
292
- appearance: "warning",
293
- class: "bg-yellow-900 dark:bg-transparent text-yellow-50 dark:text-yellow-50"
294
- },
295
- {
296
- as: "date",
297
- appearance: "error",
298
- class: "bg-rose-900 dark:bg-transparent text-rose-50 dark:text-rose-50"
299
- },
300
- {
301
- as: "date",
302
- appearance: "success",
303
- class: "bg-emerald-900 dark:bg-transparent text-emerald-50 dark:text-emerald-50"
304
- },
305
- {
306
- as: "date",
307
- appearance: "info",
308
- class: "bg-blue-900 dark:bg-transparent text-blue-50 dark:text-blue-50"
309
- },
310
- {
311
- as: "date",
312
- appearance: "violet",
313
- class: "bg-violet-900 dark:bg-transparent text-violet-50 dark:text-violet-50"
314
- },
315
- {
316
- as: "date",
317
- appearance: "amber",
318
- class: "bg-amber-900 dark:bg-transparent text-amber-50 dark:text-amber-50"
319
- },
320
- {
321
- as: "date",
322
- appearance: "pink",
323
- class: "bg-pink-900 dark:bg-transparent text-pink-50 dark:text-pink-50"
324
- },
325
- {
326
- as: "date",
327
- appearance: "indigo",
328
- class: "bg-indigo-900 dark:bg-transparent text-indigo-50 dark:text-indigo-50"
329
- },
330
- {
331
- as: "date",
332
- appearance: "orange",
333
- class: "bg-orange-900 dark:bg-transparent text-orange-50 dark:text-orange-50"
334
- }
335
- ]
336
- });
337
-
338
- export { inputVariants };
339
- //# sourceMappingURL=chunk-D3VZKUMH.mjs.map
340
- //# sourceMappingURL=chunk-D3VZKUMH.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/design-system/inputs.ts","../src/ui/inputs/variants.ts"],"names":[],"mappings":"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","file":"chunk-D3VZKUMH.mjs","sourcesContent":["export const zuiInputBase = [\n \"w-full min-w-0 rounded-xl border bg-[var(--zui-input-bg,#0000000d)] dark:bg-[var(--zui-input-bg-dark,#ffffff0d)] text-[color:var(--zui-input-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-input-fg-dark,oklch(98.4%_0.003_247.858))] shadow-[var(--zui-input-shadow,0_1px_2px_rgba(15,23,42,0.08))] dark:shadow-[var(--zui-input-shadow-dark,0_1px_2px_rgba(15,23,42,0.12))]\",\n \"ring-offset-[var(--zui-input-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-input-ring-offset-dark,oklch(12.9%_0.042_264.695))] transition-colors\",\n \"placeholder:text-[color:var(--zui-input-placeholder-fg,oklch(55.4%_0.046_257.417))] dark:placeholder:text-[color:var(--zui-input-placeholder-fg-dark,oklch(55.4%_0.046_257.417))]\",\n \"focus-visible:outline-none\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"read-only:cursor-default read-only:bg-[var(--zui-input-bg-read-only,#00000008)] dark:read-only:bg-[var(--zui-input-bg-read-only-dark,#ffffff08)] dark:bg-[var(--zui-input-bg-dark,#ffffff08)]\",\n \"file:h-8\",\n] as const;\n\nexport const zuiInputAs = {\n input: \"\",\n textarea: \"h-auto! resize-y py-2 align-top\",\n file: [\n \"p-0! cursor-pointer\",\n \"file:cursor-pointer file:border-0 file:border-r file:border-[color:var(--zui-input-file-border,#0000001a)] dark:file:border-[color:var(--zui-input-file-border-dark,#ffffff1a)]\",\n \"file:bg-[var(--zui-input-file-bg,#0000001a)] dark:file:bg-[var(--zui-input-file-bg-dark,#ffffff1a)] file:text-[color:var(--zui-input-file-fg,oklch(37.2%_0.044_257.287))] dark:file:text-[color:var(--zui-input-file-fg-dark,oklch(92.9%_0.013_255.508))] file:font-medium\",\n \"file:transition-colors file:duration-200\",\n \"hover:file:bg-[var(--zui-input-file-bg-hover,#00000026)] dark:hover:file:bg-[var(--zui-input-file-bg-hover-dark,#ffffff26)]\",\n \"[&:not(:disabled)]:file:hover:text-[color:var(--zui-input-file-fg-hover,#ffffff)] dark:[&:not(:disabled)]:file:hover:text-[color:var(--zui-input-file-fg-hover-dark,#ffffff)]\",\n \"disabled:file:cursor-not-allowed\",\n ],\n checkbox: [\n \"shrink-0 cursor-pointer appearance-none relative\",\n \"min-h-0! shadow-none outline-none\",\n \"border-2 border-[color:var(--zui-input-checkbox-border,#0000004d)] dark:border-[color:var(--zui-input-checkbox-border-dark,#ffffff4d)] [&:not(:checked)]:bg-[var(--zui-input-checkbox-bg,transparent)] dark:[&:not(:checked)]:bg-[var(--zui-input-checkbox-bg-dark,transparent)]\",\n \"transition-[color,box-shadow,border-color,background-color]\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"read-only:cursor-default\",\n \"checked:after:absolute checked:after:content-[''] checked:after:size-3 checked:after:top-1/2 checked:after:left-1/2 checked:after:-translate-x-1/2 checked:after:-translate-y-1/2 checked:after:rounded-full checked:after:bg-current\",\n ],\n radio: [\n \"shrink-0 cursor-pointer appearance-none rounded-full\",\n \"min-h-0! shadow-none outline-none\",\n \"border-2 border-[color:var(--zui-input-radio-border,#0000004d)] dark:border-[color:var(--zui-input-radio-border-dark,#ffffff4d)] bg-[var(--zui-input-radio-bg,transparent)]! dark:bg-[var(--zui-input-radio-bg-dark,transparent)]! read-only:bg-[var(--zui-input-radio-bg-read-only,transparent)]! dark:read-only:bg-[var(--zui-input-radio-bg-read-only-dark,transparent)]!\",\n \"ring-2 ring-[var(--zui-input-radio-ring,#00000033)] dark:ring-[var(--zui-input-radio-ring-dark,#ffffff33)] ring-offset-2 ring-offset-[var(--zui-input-radio-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-input-radio-ring-offset-dark,oklch(12.9%_0.042_264.695))]\",\n \"transition-[color,box-shadow,background-color,border-color,box-shadow]\",\n \"disabled:cursor-not-allowed disabled:opacity-50\",\n \"read-only:cursor-default\",\n ],\n date: \"w-auto shrink-0\",\n} as const;\n\nexport const zuiInputAppearances = {\n default:\n \"border-[color:var(--zui-input-default-border,#0000001a)] dark:border-[color:var(--zui-input-default-border-dark,#ffffff1a)] focus-visible:border-[color:var(--zui-input-default-border-focus,#00000033)] dark:focus-visible:border-[color:var(--zui-input-default-border-focus-dark,#ffffff33)]\",\n warning:\n \"border-[color:var(--zui-input-warning-border,oklch(79.5%_0.184_86.047_/_0.8))] dark:border-[color:var(--zui-input-warning-border-dark,oklch(79.5%_0.184_86.047_/_0.8))] text-[color:var(--zui-input-warning-fg,oklch(28.6%_0.066_53.813))] dark:text-[color:var(--zui-input-warning-fg-dark,oklch(98.7%_0.026_102.212))] placeholder:text-[color:var(--zui-input-warning-placeholder-fg,oklch(47.6%_0.114_61.907))] dark:placeholder:text-[color:var(--zui-input-warning-placeholder-fg-dark,oklch(90.5%_0.182_98.111_/_0.7))] focus-visible:border-[color:var(--zui-input-warning-border-focus,oklch(68.1%_0.162_75.834))] dark:focus-visible:border-[color:var(--zui-input-warning-border-focus-dark,oklch(85.2%_0.199_91.936))] focus-visible:ring-[var(--zui-input-warning-ring-focus,oklch(85.2%_0.199_91.936_/_0.8))] dark:focus-visible:ring-[var(--zui-input-warning-ring-focus-dark,oklch(85.2%_0.199_91.936_/_0.8))]\",\n error:\n \"border-[color:var(--zui-input-error-border,oklch(64.5%_0.246_16.439_/_0.8))] dark:border-[color:var(--zui-input-error-border-dark,oklch(64.5%_0.246_16.439_/_0.8))] text-[color:var(--zui-input-error-fg,oklch(27.1%_0.105_12.094))] dark:text-[color:var(--zui-input-error-fg-dark,oklch(96.9%_0.015_12.422))] placeholder:text-[color:var(--zui-input-error-placeholder-fg,oklch(45.5%_0.188_13.697))] dark:placeholder:text-[color:var(--zui-input-error-placeholder-fg-dark,oklch(81%_0.117_11.638_/_0.7))] focus-visible:border-[color:var(--zui-input-error-border-focus,oklch(58.6%_0.253_17.585))] dark:focus-visible:border-[color:var(--zui-input-error-border-focus-dark,oklch(71.2%_0.194_13.428))] focus-visible:ring-[var(--zui-input-error-ring-focus,oklch(71.2%_0.194_13.428_/_0.8))] dark:focus-visible:ring-[var(--zui-input-error-ring-focus-dark,oklch(71.2%_0.194_13.428_/_0.8))]\",\n success:\n \"border-[color:var(--zui-input-success-border,oklch(69.6%_0.17_162.48_/_0.7))] dark:border-[color:var(--zui-input-success-border-dark,oklch(69.6%_0.17_162.48_/_0.7))] text-[color:var(--zui-input-success-fg,oklch(26.2%_0.051_172.552))] dark:text-[color:var(--zui-input-success-fg-dark,oklch(97.9%_0.021_166.113))] placeholder:text-[color:var(--zui-input-success-placeholder-fg,oklch(43.2%_0.095_166.913))] dark:placeholder:text-[color:var(--zui-input-success-placeholder-fg-dark,oklch(84.5%_0.143_164.978_/_0.7))] focus-visible:border-[color:var(--zui-input-success-border-focus,oklch(59.6%_0.145_163.225))] dark:focus-visible:border-[color:var(--zui-input-success-border-focus-dark,oklch(76.5%_0.177_163.223))] focus-visible:ring-[var(--zui-input-success-ring-focus,oklch(76.5%_0.177_163.223_/_0.8))] dark:focus-visible:ring-[var(--zui-input-success-ring-focus-dark,oklch(76.5%_0.177_163.223_/_0.8))]\",\n info: \"border-[color:var(--zui-input-info-border,oklch(62.3%_0.214_259.815_/_0.8))] dark:border-[color:var(--zui-input-info-border-dark,oklch(62.3%_0.214_259.815_/_0.8))] text-[color:var(--zui-input-info-fg,oklch(28.2%_0.091_267.935))] dark:text-[color:var(--zui-input-info-fg-dark,oklch(97%_0.014_254.604))] placeholder:text-[color:var(--zui-input-info-placeholder-fg,oklch(42.4%_0.199_265.638))] dark:placeholder:text-[color:var(--zui-input-info-placeholder-fg-dark,oklch(80.9%_0.105_251.813_/_0.7))] focus-visible:border-[color:var(--zui-input-info-border-focus,oklch(54.6%_0.245_262.881))] dark:focus-visible:border-[color:var(--zui-input-info-border-focus-dark,oklch(70.7%_0.165_254.624))] focus-visible:ring-[var(--zui-input-info-ring-focus,oklch(70.7%_0.165_254.624_/_0.8))] dark:focus-visible:ring-[var(--zui-input-info-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.8))]\",\n violet:\n \"border-[color:var(--zui-input-violet-border,oklch(60.6%_0.25_292.717_/_0.8))] dark:border-[color:var(--zui-input-violet-border-dark,oklch(60.6%_0.25_292.717_/_0.8))] text-[color:var(--zui-input-violet-fg,oklch(28.3%_0.141_291.089))] dark:text-[color:var(--zui-input-violet-fg-dark,oklch(96.9%_0.016_293.756))] placeholder:text-[color:var(--zui-input-violet-placeholder-fg,oklch(43.2%_0.232_292.759))] dark:placeholder:text-[color:var(--zui-input-violet-placeholder-fg-dark,oklch(81.1%_0.111_293.571_/_0.7))] focus-visible:border-[color:var(--zui-input-violet-border-focus,oklch(54.1%_0.281_293.009))] dark:focus-visible:border-[color:var(--zui-input-violet-border-focus-dark,oklch(70.2%_0.183_293.541))] focus-visible:ring-[var(--zui-input-violet-ring-focus,oklch(70.2%_0.183_293.541_/_0.8))] dark:focus-visible:ring-[var(--zui-input-violet-ring-focus-dark,oklch(70.2%_0.183_293.541_/_0.8))]\",\n amber:\n \"border-[color:var(--zui-input-amber-border,oklch(76.9%_0.188_70.08_/_0.8))] dark:border-[color:var(--zui-input-amber-border-dark,oklch(76.9%_0.188_70.08_/_0.8))] text-[color:var(--zui-input-amber-fg,oklch(27.9%_0.077_45.635))] dark:text-[color:var(--zui-input-amber-fg-dark,oklch(98.7%_0.022_95.277))] placeholder:text-[color:var(--zui-input-amber-placeholder-fg,oklch(47.3%_0.137_46.201))] dark:placeholder:text-[color:var(--zui-input-amber-placeholder-fg-dark,oklch(87.9%_0.169_91.605_/_0.7))] focus-visible:border-[color:var(--zui-input-amber-border-focus,oklch(66.6%_0.179_58.318))] dark:focus-visible:border-[color:var(--zui-input-amber-border-focus-dark,oklch(82.8%_0.189_84.429))] focus-visible:ring-[var(--zui-input-amber-ring-focus,oklch(82.8%_0.189_84.429_/_0.8))] dark:focus-visible:ring-[var(--zui-input-amber-ring-focus-dark,oklch(82.8%_0.189_84.429_/_0.8))]\",\n pink: \"border-[color:var(--zui-input-pink-border,oklch(65.6%_0.241_354.308_/_0.8))] dark:border-[color:var(--zui-input-pink-border-dark,oklch(65.6%_0.241_354.308_/_0.8))] text-[color:var(--zui-input-pink-fg,oklch(28.4%_0.109_3.907))] dark:text-[color:var(--zui-input-pink-fg-dark,oklch(97.1%_0.014_343.198))] placeholder:text-[color:var(--zui-input-pink-placeholder-fg,oklch(45.9%_0.187_3.815))] dark:placeholder:text-[color:var(--zui-input-pink-placeholder-fg-dark,oklch(82.3%_0.12_346.018_/_0.7))] focus-visible:border-[color:var(--zui-input-pink-border-focus,oklch(59.2%_0.249_0.584))] dark:focus-visible:border-[color:var(--zui-input-pink-border-focus-dark,oklch(71.8%_0.202_349.761))] focus-visible:ring-[var(--zui-input-pink-ring-focus,oklch(71.8%_0.202_349.761_/_0.8))] dark:focus-visible:ring-[var(--zui-input-pink-ring-focus-dark,oklch(71.8%_0.202_349.761_/_0.8))]\",\n indigo:\n \"border-[color:var(--zui-input-indigo-border,oklch(58.5%_0.233_277.117_/_0.8))] dark:border-[color:var(--zui-input-indigo-border-dark,oklch(58.5%_0.233_277.117_/_0.8))] text-[color:var(--zui-input-indigo-fg,oklch(25.7%_0.09_281.288))] dark:text-[color:var(--zui-input-indigo-fg-dark,oklch(96.2%_0.018_272.314))] placeholder:text-[color:var(--zui-input-indigo-placeholder-fg,oklch(39.8%_0.195_277.366))] dark:placeholder:text-[color:var(--zui-input-indigo-placeholder-fg-dark,oklch(78.5%_0.115_274.713_/_0.7))] focus-visible:border-[color:var(--zui-input-indigo-border-focus,oklch(51.1%_0.262_276.966))] dark:focus-visible:border-[color:var(--zui-input-indigo-border-focus-dark,oklch(67.3%_0.182_276.935))] focus-visible:ring-[var(--zui-input-indigo-ring-focus,oklch(67.3%_0.182_276.935_/_0.8))] dark:focus-visible:ring-[var(--zui-input-indigo-ring-focus-dark,oklch(67.3%_0.182_276.935_/_0.8))]\",\n orange:\n \"border-[color:var(--zui-input-orange-border,oklch(70.5%_0.213_47.604_/_0.8))] dark:border-[color:var(--zui-input-orange-border-dark,oklch(70.5%_0.213_47.604_/_0.8))] text-[color:var(--zui-input-orange-fg,oklch(26.6%_0.079_36.259))] dark:text-[color:var(--zui-input-orange-fg-dark,oklch(98%_0.016_73.684))] placeholder:text-[color:var(--zui-input-orange-placeholder-fg,oklch(47%_0.157_37.304))] dark:placeholder:text-[color:var(--zui-input-orange-placeholder-fg-dark,oklch(83.7%_0.128_66.29_/_0.7))] focus-visible:border-[color:var(--zui-input-orange-border-focus,oklch(64.6%_0.222_41.116))] dark:focus-visible:border-[color:var(--zui-input-orange-border-focus-dark,oklch(75%_0.183_55.934))] focus-visible:ring-[var(--zui-input-orange-ring-focus,oklch(75%_0.183_55.934_/_0.8))] dark:focus-visible:ring-[var(--zui-input-orange-ring-focus-dark,oklch(75%_0.183_55.934_/_0.8))]\",\n} as const;\n\nexport const zuiInputSizes = {\n sm: \"h-8 px-3 text-xs\",\n md: \"h-9 md:h-11 px-4 text-sm\",\n lg: \"h-10 md:h-12 px-5 text-base\",\n} as const;\n\nexport const zuiInputRing = {\n true: \"focus-visible:ring-2 focus-visible:ring-offset-2\",\n false: \"\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiInputAppearances,\n zuiInputAs,\n zuiInputBase,\n zuiInputRing,\n zuiInputSizes,\n} from \"../../design-system/inputs\";\n\nexport const inputVariants = cva(zuiInputBase, {\n variants: {\n as: zuiInputAs,\n appearance: zuiInputAppearances,\n size: zuiInputSizes,\n ring: zuiInputRing,\n },\n defaultVariants: {\n as: \"input\",\n appearance: \"default\",\n size: \"md\",\n ring: true,\n },\n compoundVariants: [\n // ── textarea size overrides ──────────────────────────────────────────\n {\n as: \"textarea\",\n size: \"sm\",\n class: \"min-h-[5rem]\",\n },\n {\n as: \"textarea\",\n size: \"md\",\n class: \"min-h-[6rem]\",\n },\n {\n as: \"textarea\",\n size: \"lg\",\n class: \"min-h-[7.5rem]\",\n },\n // ── file input: size – height & file-button padding ──────────────────\n {\n as: \"file\",\n size: \"sm\",\n class: \"h-8 text-xs pl-1 file:h-8 file:px-3 file:text-xs\",\n },\n {\n as: \"file\",\n size: \"md\",\n class:\n \"h-9 md:h-11 text-sm pl-1 file:h-9 md:file:h-11 file:px-4 file:text-sm\",\n },\n {\n as: \"file\",\n size: \"lg\",\n class:\n \"h-10 md:h-12 text-base pl-1 file:h-10 md:file:h-12 file:px-5 file:text-base\",\n },\n // ── file input: appearance – file-button accent colour ───────────────\n {\n as: \"file\",\n appearance: \"default\",\n class: \"file:text-slate-700 dark:file:text-slate-200\",\n },\n {\n as: \"file\",\n appearance: \"warning\",\n class:\n \"file:bg-yellow-500/20 file:text-yellow-800 dark:file:text-yellow-200 file:border-yellow-500/40 hover:file:bg-yellow-500/30\",\n },\n {\n as: \"file\",\n appearance: \"error\",\n class:\n \"file:bg-rose-500/20 file:text-rose-800 dark:file:text-rose-200 file:border-rose-500/40 hover:file:bg-rose-500/30\",\n },\n {\n as: \"file\",\n appearance: \"success\",\n class:\n \"file:bg-emerald-500/20 file:text-emerald-800 dark:file:text-emerald-200 file:border-emerald-500/40 hover:file:bg-emerald-500/30\",\n },\n {\n as: \"file\",\n appearance: \"info\",\n class:\n \"file:bg-blue-500/20 file:text-blue-800 dark:file:text-blue-200 file:border-blue-500/40 hover:file:bg-blue-500/30\",\n },\n {\n as: \"file\",\n appearance: \"violet\",\n class:\n \"file:bg-violet-500/20 file:text-violet-800 dark:file:text-violet-200 file:border-violet-500/40 hover:file:bg-violet-500/30\",\n },\n {\n as: \"file\",\n appearance: \"amber\",\n class:\n \"file:bg-amber-500/20 file:text-amber-800 dark:file:text-amber-200 file:border-amber-500/40 hover:file:bg-amber-500/30\",\n },\n {\n as: \"file\",\n appearance: \"pink\",\n class:\n \"file:bg-pink-500/20 file:text-pink-800 dark:file:text-pink-200 file:border-pink-500/40 hover:file:bg-pink-500/30\",\n },\n {\n as: \"file\",\n appearance: \"indigo\",\n class:\n \"file:bg-indigo-500/20 file:text-indigo-800 dark:file:text-indigo-200 file:border-indigo-500/40 hover:file:bg-indigo-500/30\",\n },\n // ── checkbox / radio: size (overrides text-field height & padding) ───\n {\n as: \"checkbox\",\n size: \"sm\",\n class: \"h-4! w-4! min-h-0! rounded-[0.35rem]! px-0! py-0!\",\n },\n {\n as: \"checkbox\",\n size: \"md\",\n class: \"h-5! w-5! min-h-0! rounded-md! px-0! py-0!\",\n },\n {\n as: \"checkbox\",\n size: \"lg\",\n class: \"h-6! w-6! min-h-0! rounded-md! px-0! py-0!\",\n },\n {\n as: \"radio\",\n size: \"sm\",\n class: \"h-4! w-4! min-h-0! px-0! py-0!\",\n },\n {\n as: \"radio\",\n size: \"md\",\n class: \"h-5! w-5! min-h-0! px-0! py-0!\",\n },\n {\n as: \"radio\",\n size: \"lg\",\n class: \"h-6! w-6! min-h-0! px-0! py-0!\",\n },\n // ── checkbox: appearance (border + tick color; fill stays transparent) ─\n {\n as: \"checkbox\",\n appearance: \"default\",\n class:\n \"border-slate-400/70! checked:border-slate-700 dark:checked:border-slate-200 checked:text-slate-700 dark:checked:text-slate-200 hover:border-slate-600 dark:hover:border-slate-300 focus-visible:border-slate-600 dark:focus-visible:border-slate-300 focus-visible:ring-slate-500/70 dark:focus-visible:ring-slate-400/70\",\n },\n {\n as: \"checkbox\",\n appearance: \"warning\",\n class:\n \"border-yellow-500/70! checked:border-yellow-600 dark:checked:border-yellow-400 checked:text-yellow-700 dark:checked:text-yellow-300 hover:border-yellow-600 dark:hover:border-yellow-400 focus-visible:border-yellow-600 dark:focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80\",\n },\n {\n as: \"checkbox\",\n appearance: \"error\",\n class:\n \"border-rose-500/70! checked:border-rose-600 dark:checked:border-rose-400 checked:text-rose-700 dark:checked:text-rose-300 hover:border-rose-600 dark:hover:border-rose-400 focus-visible:border-rose-600 dark:focus-visible:border-rose-400 focus-visible:ring-rose-400/80\",\n },\n {\n as: \"checkbox\",\n appearance: \"success\",\n class:\n \"border-emerald-500/70! checked:border-emerald-600 dark:checked:border-emerald-400 checked:text-emerald-700 dark:checked:text-emerald-300 hover:border-emerald-600 dark:hover:border-emerald-400 focus-visible:border-emerald-600 dark:focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80\",\n },\n {\n as: \"checkbox\",\n appearance: \"info\",\n class:\n \"border-blue-500/70! checked:border-blue-600 dark:checked:border-blue-400 checked:text-blue-700 dark:checked:text-blue-300 hover:border-blue-600 dark:hover:border-blue-400 focus-visible:border-blue-600 dark:focus-visible:border-blue-400 focus-visible:ring-blue-400/80\",\n },\n {\n as: \"checkbox\",\n appearance: \"violet\",\n class:\n \"border-violet-500/70! checked:after:bg-violet-600 dark:checked:after:bg-violet-400 checked:border-violet-600 dark:checked:border-violet-400 checked:text-violet-700 dark:checked:text-violet-300 hover:border-violet-600 dark:hover:border-violet-400 focus-visible:border-violet-600 dark:focus-visible:border-violet-400 focus-visible:ring-violet-400/80\",\n },\n {\n as: \"checkbox\",\n appearance: \"amber\",\n class:\n \"border-amber-500/70! checked:border-amber-400! checked:text-amber-700 dark:checked:text-amber-300 hover:border-amber-400! focus-visible:border-amber-400! focus-visible:ring-amber-400/80!\",\n },\n {\n as: \"checkbox\",\n appearance: \"pink\",\n class:\n \"border-pink-500/70! checked:border-pink-600 dark:checked:border-pink-400 checked:text-pink-700 dark:checked:text-pink-300 hover:border-pink-600 dark:hover:border-pink-400 focus-visible:border-pink-600 dark:focus-visible:border-pink-400 focus-visible:ring-pink-400/80\",\n },\n {\n as: \"checkbox\",\n appearance: \"indigo\",\n class:\n \"border-indigo-500/70! checked:border-indigo-400! checked:text-indigo-700 dark:checked:text-indigo-300 hover:border-indigo-400! focus-visible:border-indigo-400! focus-visible:ring-indigo-400/80!\",\n },\n // ── radio: appearance (transparent fill, inner dot, coloured offset ring) ─\n {\n as: \"radio\",\n appearance: \"default\",\n class:\n \"border-slate-400/70! checked:border-slate-700 dark:checked:border-slate-200 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(226,232,240)]! hover:border-slate-600 dark:hover:border-slate-300 focus-visible:border-slate-600 dark:focus-visible:border-slate-300 focus-visible:ring-slate-500/70 dark:focus-visible:ring-slate-400/70 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-slate-300/90!\",\n },\n {\n as: \"radio\",\n appearance: \"warning\",\n class:\n \"border-yellow-500/70! checked:border-yellow-600 dark:checked:border-yellow-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(250,204,21)]! hover:border-yellow-600 dark:hover:border-yellow-400 focus-visible:border-yellow-600 dark:focus-visible:border-yellow-400 focus-visible:ring-yellow-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-yellow-400/90!\",\n },\n {\n as: \"radio\",\n appearance: \"error\",\n class:\n \"border-rose-500/70! checked:border-rose-600 dark:checked:border-rose-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,113,133)]! hover:border-rose-600 dark:hover:border-rose-400 focus-visible:border-rose-600 dark:focus-visible:border-rose-400 focus-visible:ring-rose-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-rose-400/90!\",\n },\n {\n as: \"radio\",\n appearance: \"success\",\n class:\n \"border-emerald-500/70! checked:border-emerald-600 dark:checked:border-emerald-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(52,211,153)]! hover:border-emerald-600 dark:hover:border-emerald-400 focus-visible:border-emerald-600 dark:focus-visible:border-emerald-400 focus-visible:ring-emerald-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-emerald-400/90!\",\n },\n {\n as: \"radio\",\n appearance: \"info\",\n class:\n \"border-blue-500/70! checked:border-blue-600 dark:checked:border-blue-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(96,165,250)]! hover:border-blue-600 dark:hover:border-blue-400 focus-visible:border-blue-600 dark:focus-visible:border-blue-400 focus-visible:ring-blue-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-blue-400/90!\",\n },\n {\n as: \"radio\",\n appearance: \"violet\",\n class:\n \"border-violet-500/70! checked:border-violet-600 dark:checked:border-violet-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(167,139,250)]! hover:border-violet-600 dark:hover:border-violet-400 focus-visible:border-violet-600 dark:focus-visible:border-violet-400 focus-visible:ring-violet-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-violet-400/90!\",\n },\n {\n as: \"radio\",\n appearance: \"amber\",\n class:\n \"border-amber-500/70! checked:border-amber-600 dark:checked:border-amber-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(251,191,36)]! hover:border-amber-600 dark:hover:border-amber-400 focus-visible:border-amber-600 dark:focus-visible:border-amber-400 focus-visible:ring-amber-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-amber-400/90!\",\n },\n {\n as: \"radio\",\n appearance: \"pink\",\n class:\n \"border-pink-500/70! checked:border-pink-600 dark:checked:border-pink-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(244,114,182)]! hover:border-pink-600 dark:hover:border-pink-400 focus-visible:border-pink-600 dark:focus-visible:border-pink-400 focus-visible:ring-pink-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-pink-400/90!\",\n },\n {\n as: \"radio\",\n appearance: \"indigo\",\n class:\n \"border-indigo-500/70! checked:border-indigo-600 dark:checked:border-indigo-400 checked:bg-transparent! checked:shadow-[inset_0_0_0_0.28rem_rgb(129,140,248)]! hover:border-indigo-600 dark:hover:border-indigo-400 focus-visible:border-indigo-600 dark:focus-visible:border-indigo-400 focus-visible:ring-indigo-400/80 checked:ring-2! checked:ring-offset-2! checked:ring-offset-white! dark:checked:ring-offset-slate-950! checked:ring-indigo-400/90!\",\n },\n {\n as: \"date\",\n appearance: \"default\",\n class:\n \"bg-white dark:bg-black border border-black/10 dark:border-white/80 text-black dark:text-white\",\n },\n {\n as: \"date\",\n appearance: \"warning\",\n class:\n \"bg-yellow-900 dark:bg-transparent text-yellow-50 dark:text-yellow-50\",\n },\n {\n as: \"date\",\n appearance: \"error\",\n class: \"bg-rose-900 dark:bg-transparent text-rose-50 dark:text-rose-50\",\n },\n {\n as: \"date\",\n appearance: \"success\",\n class:\n \"bg-emerald-900 dark:bg-transparent text-emerald-50 dark:text-emerald-50\",\n },\n {\n as: \"date\",\n appearance: \"info\",\n class: \"bg-blue-900 dark:bg-transparent text-blue-50 dark:text-blue-50\",\n },\n {\n as: \"date\",\n appearance: \"violet\",\n class:\n \"bg-violet-900 dark:bg-transparent text-violet-50 dark:text-violet-50\",\n },\n {\n as: \"date\",\n appearance: \"amber\",\n class:\n \"bg-amber-900 dark:bg-transparent text-amber-50 dark:text-amber-50\",\n },\n {\n as: \"date\",\n appearance: \"pink\",\n class: \"bg-pink-900 dark:bg-transparent text-pink-50 dark:text-pink-50\",\n },\n {\n as: \"date\",\n appearance: \"indigo\",\n class:\n \"bg-indigo-900 dark:bg-transparent text-indigo-50 dark:text-indigo-50\",\n },\n {\n as: \"date\",\n appearance: \"orange\",\n class:\n \"bg-orange-900 dark:bg-transparent text-orange-50 dark:text-orange-50\",\n },\n ],\n});\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/design-system/kbd.ts","../src/ui/kbd/variants.ts","../src/ui/kbd/kbd-base.tsx"],"names":["cva","jsx","cn","Fragment"],"mappings":"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","file":"chunk-RFT2FLQT.js","sourcesContent":["export const zuiKbdBase = [\n \"inline-flex items-center justify-center gap-1 align-middle\",\n \"rounded-[var(--zui-kbd-radius,0.375rem)] font-mono font-medium leading-none select-none\",\n] as const;\n\nexport const zuiKbdKeyAppearances = {\n default:\n \"bg-[var(--zui-kbd-default-bg,#0f172a)] dark:bg-[var(--zui-kbd-default-bg-dark,#f8fafc)] text-[color:var(--zui-kbd-default-fg,#f8fafc)] dark:text-[color:var(--zui-kbd-default-fg-dark,#020617)] shadow-[var(--zui-kbd-default-shadow,0_1px_2px_#0f172a14)] dark:shadow-[var(--zui-kbd-default-shadow-dark,0_1px_2px_#0f172a1f)]\",\n secondary:\n \"bg-[var(--zui-kbd-secondary-bg,#e2e8f0)] dark:bg-[var(--zui-kbd-secondary-bg-dark,#1e293b)] text-[color:var(--zui-kbd-secondary-fg,#0f172a)] dark:text-[color:var(--zui-kbd-secondary-fg-dark,#f8fafc)]\",\n destructive:\n \"bg-[var(--zui-kbd-destructive-bg,#f43f5e)] dark:bg-[var(--zui-kbd-destructive-bg-dark,#be123c)] text-[color:var(--zui-kbd-destructive-fg,#ffffff)] dark:text-[color:var(--zui-kbd-destructive-fg-dark,#ffffff)]\",\n outline:\n \"border border-[color:var(--zui-kbd-outline-border,#0000001a)] dark:border-[color:var(--zui-kbd-outline-border-dark,#ffffff1a)] bg-[var(--zui-kbd-outline-bg,#0000000d)] dark:bg-[var(--zui-kbd-outline-bg-dark,#ffffff0d)] text-[color:var(--zui-kbd-outline-fg,#0f172a)] dark:text-[color:var(--zui-kbd-outline-fg-dark,#f8fafc)]\",\n ghost:\n \"bg-transparent text-[color:var(--zui-kbd-ghost-fg,#334155)] dark:text-[color:var(--zui-kbd-ghost-fg-dark,#e2e8f0)]\",\n glass:\n \"border border-[color:var(--zui-kbd-glass-border,#00000026)] dark:border-[color:var(--zui-kbd-glass-border-dark,#ffffff26)] bg-[var(--zui-kbd-glass-bg,#0000001a)] dark:bg-[var(--zui-kbd-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-kbd-glass-fg,#0f172a)] dark:text-[color:var(--zui-kbd-glass-fg-dark,#ffffff)] backdrop-blur-md\",\n emerald:\n \"bg-[var(--zui-kbd-emerald-bg,#10b981)] dark:bg-[var(--zui-kbd-emerald-bg-dark,#065f46)] text-[color:var(--zui-kbd-emerald-fg,#ffffff)] dark:text-[color:var(--zui-kbd-emerald-fg-dark,#ffffff)]\",\n indigo:\n \"bg-[var(--zui-kbd-indigo-bg,#3730a3)] dark:bg-[var(--zui-kbd-indigo-bg-dark,#4f46e5)] text-[color:var(--zui-kbd-indigo-fg,#ffffff)] dark:text-[color:var(--zui-kbd-indigo-fg-dark,#ffffff)]\",\n purple:\n \"bg-[var(--zui-kbd-purple-bg,#6b21a8)] dark:bg-[var(--zui-kbd-purple-bg-dark,#9333ea)] text-[color:var(--zui-kbd-purple-fg,#ffffff)] dark:text-[color:var(--zui-kbd-purple-fg-dark,#ffffff)]\",\n pink: \"bg-[var(--zui-kbd-pink-bg,#9d174d)] dark:bg-[var(--zui-kbd-pink-bg-dark,#db2777)] text-[color:var(--zui-kbd-pink-fg,#ffffff)] dark:text-[color:var(--zui-kbd-pink-fg-dark,#ffffff)]\",\n rose: \"bg-[var(--zui-kbd-rose-bg,#9f1239)] dark:bg-[var(--zui-kbd-rose-bg-dark,#e11d48)] text-[color:var(--zui-kbd-rose-fg,#ffffff)] dark:text-[color:var(--zui-kbd-rose-fg-dark,#ffffff)]\",\n sky: \"bg-[var(--zui-kbd-sky-bg,#0ea5e9)] dark:bg-[var(--zui-kbd-sky-bg-dark,#0369a1)] text-[color:var(--zui-kbd-sky-fg,#ffffff)] dark:text-[color:var(--zui-kbd-sky-fg-dark,#ffffff)]\",\n teal: \"bg-[var(--zui-kbd-teal-bg,#14b8a6)] dark:bg-[var(--zui-kbd-teal-bg-dark,#0f766e)] text-[color:var(--zui-kbd-teal-fg,#ffffff)] dark:text-[color:var(--zui-kbd-teal-fg-dark,#ffffff)]\",\n yellow:\n \"bg-[var(--zui-kbd-yellow-bg,#eab308)] dark:bg-[var(--zui-kbd-yellow-bg-dark,#854d0e)] text-[color:var(--zui-kbd-yellow-fg,#ffffff)] dark:text-[color:var(--zui-kbd-yellow-fg-dark,#ffffff)]\",\n orange:\n \"bg-[var(--zui-kbd-orange-bg,#f97316)] dark:bg-[var(--zui-kbd-orange-bg-dark,#9a3412)] text-[color:var(--zui-kbd-orange-fg,#ffffff)] dark:text-[color:var(--zui-kbd-orange-fg-dark,#ffffff)]\",\n gray: \"bg-[var(--zui-kbd-gray-bg,#6b7280)] dark:bg-[var(--zui-kbd-gray-bg-dark,#374151)] text-[color:var(--zui-kbd-gray-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gray-fg-dark,#ffffff)]\",\n amber:\n \"bg-[var(--zui-kbd-amber-bg,#f59e0b)] dark:bg-[var(--zui-kbd-amber-bg-dark,#92400e)] text-[color:var(--zui-kbd-amber-fg,#ffffff)] dark:text-[color:var(--zui-kbd-amber-fg-dark,#ffffff)]\",\n violet:\n \"bg-[var(--zui-kbd-violet-bg,#5b21b6)] dark:bg-[var(--zui-kbd-violet-bg-dark,#7c3aed)] text-[color:var(--zui-kbd-violet-fg,#ffffff)] dark:text-[color:var(--zui-kbd-violet-fg-dark,#ffffff)]\",\n \"gradient-blue\":\n \"bg-linear-to-r from-[var(--zui-kbd-gradient-blue-from,#1e40af)] dark:from-[var(--zui-kbd-gradient-blue-from-dark,#2563eb)] to-[var(--zui-kbd-gradient-blue-to,#6b21a8)] dark:to-[var(--zui-kbd-gradient-blue-to-dark,#9333ea)] text-[color:var(--zui-kbd-gradient-blue-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-blue-fg-dark,#ffffff)]\",\n \"gradient-green\":\n \"bg-linear-to-r from-[var(--zui-kbd-gradient-green-from,#166534)] dark:from-[var(--zui-kbd-gradient-green-from-dark,#16a34a)] to-[var(--zui-kbd-gradient-green-to,#3f6212)] dark:to-[var(--zui-kbd-gradient-green-to-dark,#65a30d)] text-[color:var(--zui-kbd-gradient-green-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-green-fg-dark,#ffffff)]\",\n \"gradient-red\":\n \"bg-linear-to-r from-[var(--zui-kbd-gradient-red-from,#991b1b)] dark:from-[var(--zui-kbd-gradient-red-from-dark,#dc2626)] to-[var(--zui-kbd-gradient-red-to,#9d174d)] dark:to-[var(--zui-kbd-gradient-red-to-dark,#db2777)] text-[color:var(--zui-kbd-gradient-red-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-red-fg-dark,#ffffff)]\",\n \"gradient-yellow\":\n \"bg-linear-to-r from-[var(--zui-kbd-gradient-yellow-from,#854d0e)] dark:from-[var(--zui-kbd-gradient-yellow-from-dark,#ca8a04)] to-[var(--zui-kbd-gradient-yellow-to,#9a3412)] dark:to-[var(--zui-kbd-gradient-yellow-to-dark,#ea580c)] text-[color:var(--zui-kbd-gradient-yellow-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-yellow-fg-dark,#ffffff)]\",\n \"gradient-purple\":\n \"bg-linear-to-r from-[var(--zui-kbd-gradient-purple-from,#6b21a8)] dark:from-[var(--zui-kbd-gradient-purple-from-dark,#9333ea)] to-[var(--zui-kbd-gradient-purple-to,#9d174d)] dark:to-[var(--zui-kbd-gradient-purple-to-dark,#db2777)] text-[color:var(--zui-kbd-gradient-purple-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-purple-fg-dark,#ffffff)]\",\n \"gradient-teal\":\n \"bg-linear-to-r from-[var(--zui-kbd-gradient-teal-from,#115e59)] dark:from-[var(--zui-kbd-gradient-teal-from-dark,#0d9488)] to-[var(--zui-kbd-gradient-teal-to,#155e75)] dark:to-[var(--zui-kbd-gradient-teal-to-dark,#0891b2)] text-[color:var(--zui-kbd-gradient-teal-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-teal-fg-dark,#ffffff)]\",\n \"gradient-indigo\":\n \"bg-linear-to-r from-[var(--zui-kbd-gradient-indigo-from,#3730a3)] dark:from-[var(--zui-kbd-gradient-indigo-from-dark,#4f46e5)] to-[var(--zui-kbd-gradient-indigo-to,#6b21a8)] dark:to-[var(--zui-kbd-gradient-indigo-to-dark,#9333ea)] text-[color:var(--zui-kbd-gradient-indigo-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-indigo-fg-dark,#ffffff)]\",\n \"gradient-pink\":\n \"bg-linear-to-r from-[var(--zui-kbd-gradient-pink-from,#9d174d)] dark:from-[var(--zui-kbd-gradient-pink-from-dark,#db2777)] to-[var(--zui-kbd-gradient-pink-to,#9f1239)] dark:to-[var(--zui-kbd-gradient-pink-to-dark,#e11d48)] text-[color:var(--zui-kbd-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-pink-fg-dark,#ffffff)]\",\n \"gradient-orange\":\n \"bg-linear-to-r from-[var(--zui-kbd-gradient-orange-from,#9a3412)] dark:from-[var(--zui-kbd-gradient-orange-from-dark,#ea580c)] to-[var(--zui-kbd-gradient-orange-to,#991b1b)] dark:to-[var(--zui-kbd-gradient-orange-to-dark,#dc2626)] text-[color:var(--zui-kbd-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-kbd-gradient-orange-fg-dark,#ffffff)]\",\n} as const;\n\nexport type ZuiKbdAppearance = keyof typeof zuiKbdKeyAppearances;\n\nexport const zuiKbdKeyBase = [\n \"inline-flex items-center justify-center font-mono font-medium leading-none\",\n \"rounded-[var(--zui-kbd-radius,0.375rem)]\",\n \"shadow-[var(--zui-kbd-shadow,inset_0_-1px_0_#0000001f)] dark:shadow-[var(--zui-kbd-shadow-dark,inset_0_-1px_0_#0000004d)]\",\n] as const;\n\nexport const zuiKbdKeySizes = {\n sm: \"h-5 min-w-5 px-1 text-[0.7rem]\",\n md: \"h-6 min-w-6 px-1.5 text-xs\",\n lg: \"h-7 min-w-7 px-2 text-sm\",\n} as const;\n\nexport type ZuiKbdSize = keyof typeof zuiKbdKeySizes;\n\nexport const zuiKbdSeparatorSizes = {\n sm: \"text-[0.7rem]\",\n md: \"text-xs\",\n lg: \"text-sm\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiKbdKeyAppearances,\n zuiKbdKeyBase,\n zuiKbdKeySizes,\n zuiKbdSeparatorSizes,\n} from \"../../design-system/kbd\";\n\nexport const kbdKeyVariants = cva(zuiKbdKeyBase, {\n variants: {\n appearance: zuiKbdKeyAppearances,\n size: zuiKbdKeySizes,\n },\n defaultVariants: {\n appearance: \"outline\",\n size: \"md\",\n },\n});\n\nexport const kbdSeparatorVariants = cva(\n \"text-[color:var(--zui-kbd-separator-fg,#94a3b8)] dark:text-[color:var(--zui-kbd-separator-fg-dark,#64748b)]\",\n {\n variants: {\n size: zuiKbdSeparatorSizes,\n },\n defaultVariants: {\n size: \"md\",\n },\n },\n);\n","\"use client\";\n\nimport { Fragment } from \"react\";\n\nimport { zuiKbdBase } from \"../../design-system/kbd\";\nimport { cn } from \"../../lib/utils\";\n\nimport type { KbdBaseProps } from \"./types\";\nimport { kbdKeyVariants, kbdSeparatorVariants } from \"./variants\";\n\nexport function KbdBase({\n keys,\n separator,\n appearance,\n size,\n children,\n className,\n as: Wrapper = \"span\",\n ref,\n ...rest\n}: KbdBaseProps) {\n const items = keys ?? (children != null ? [children] : []);\n\n return (\n <Wrapper\n ref={ref}\n data-slot=\"kbd\"\n className={cn(zuiKbdBase, className)}\n {...rest}\n >\n {items.map((key, index) => (\n <Fragment key={index}>\n {index > 0 && separator != null ? (\n <span\n data-slot=\"kbd-separator\"\n className={kbdSeparatorVariants({ size })}\n >\n {separator}\n </span>\n ) : null}\n <kbd\n data-slot=\"kbd-key\"\n className={kbdKeyVariants({ appearance, size })}\n >\n {key}\n </kbd>\n </Fragment>\n ))}\n </Wrapper>\n );\n}\n\nKbdBase.displayName = \"Kbd\";\n"]}