@zentauri-ui/zentauri-components 2.1.1 → 2.1.3

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 (76) hide show
  1. package/README.md +17 -16
  2. package/cli/cli.integration.test.ts +115 -0
  3. package/cli/index.mjs +254 -5
  4. package/cli/registry.json +84 -0
  5. package/dist/{chunk-TYBQZO6Y.mjs → chunk-2P4WPYC3.mjs} +3 -3
  6. package/dist/{chunk-TYBQZO6Y.mjs.map → chunk-2P4WPYC3.mjs.map} +1 -1
  7. package/dist/{chunk-ZMFRJHO6.mjs → chunk-3BL5PO3K.mjs} +3 -3
  8. package/dist/{chunk-ZMFRJHO6.mjs.map → chunk-3BL5PO3K.mjs.map} +1 -1
  9. package/dist/{chunk-TT33BIIT.js → chunk-BJDT7P2I.js} +35 -35
  10. package/dist/{chunk-TT33BIIT.js.map → chunk-BJDT7P2I.js.map} +1 -1
  11. package/dist/{chunk-7N2UYQBJ.mjs → chunk-BOTDQV6U.mjs} +4 -4
  12. package/dist/{chunk-7N2UYQBJ.mjs.map → chunk-BOTDQV6U.mjs.map} +1 -1
  13. package/dist/{chunk-3N575QVC.mjs → chunk-BPSW3SRE.mjs} +3 -3
  14. package/dist/{chunk-3N575QVC.mjs.map → chunk-BPSW3SRE.mjs.map} +1 -1
  15. package/dist/{chunk-5TVBPPS6.js → chunk-DKBMNS6F.js} +11 -11
  16. package/dist/{chunk-5TVBPPS6.js.map → chunk-DKBMNS6F.js.map} +1 -1
  17. package/dist/{chunk-4LCH4OJ5.js → chunk-E7P4O3ET.js} +10 -10
  18. package/dist/{chunk-4LCH4OJ5.js.map → chunk-E7P4O3ET.js.map} +1 -1
  19. package/dist/{chunk-VHYUH5OH.js → chunk-GNQH247A.js} +6 -6
  20. package/dist/{chunk-VHYUH5OH.js.map → chunk-GNQH247A.js.map} +1 -1
  21. package/dist/{chunk-42ZSQNDF.mjs → chunk-NIVJFG5Z.mjs} +35 -35
  22. package/dist/{chunk-42ZSQNDF.mjs.map → chunk-NIVJFG5Z.mjs.map} +1 -1
  23. package/dist/{chunk-BIQZC26Q.js → chunk-OH5VOGNW.js} +4 -4
  24. package/dist/chunk-OH5VOGNW.js.map +1 -0
  25. package/dist/chunk-SOYCLBHK.js +19 -0
  26. package/dist/{chunk-R4D5V7NT.js.map → chunk-SOYCLBHK.js.map} +1 -1
  27. package/dist/{chunk-V2LI5QZD.js → chunk-UJPB5NHW.js} +18 -18
  28. package/dist/{chunk-V2LI5QZD.js.map → chunk-UJPB5NHW.js.map} +1 -1
  29. package/dist/{chunk-TVEK6PKH.mjs → chunk-XY3TKIIH.mjs} +4 -4
  30. package/dist/chunk-XY3TKIIH.mjs.map +1 -0
  31. package/dist/{chunk-GOH2THVW.mjs → chunk-ZNI3AB3W.mjs} +3 -3
  32. package/dist/{chunk-GOH2THVW.mjs.map → chunk-ZNI3AB3W.mjs.map} +1 -1
  33. package/dist/design-system/alert.d.ts +33 -33
  34. package/dist/design-system/facade.js +4 -4
  35. package/dist/design-system/facade.mjs +3 -3
  36. package/dist/design-system/tabs.d.ts +2 -2
  37. package/dist/ui/alert/animated.js +3 -3
  38. package/dist/ui/alert/animated.mjs +2 -2
  39. package/dist/ui/alert.js +11 -11
  40. package/dist/ui/alert.mjs +3 -3
  41. package/dist/ui/buttons/animated.js +6 -6
  42. package/dist/ui/buttons/animated.mjs +4 -4
  43. package/dist/ui/buttons.js +7 -7
  44. package/dist/ui/buttons.mjs +5 -5
  45. package/dist/ui/context-menu/context-menu.d.ts.map +1 -1
  46. package/dist/ui/context-menu/types.d.ts +3 -1
  47. package/dist/ui/context-menu/types.d.ts.map +1 -1
  48. package/dist/ui/context-menu.js +17 -0
  49. package/dist/ui/context-menu.js.map +1 -1
  50. package/dist/ui/context-menu.mjs +17 -0
  51. package/dist/ui/context-menu.mjs.map +1 -1
  52. package/dist/ui/dropdown/dropdown.d.ts +1 -1
  53. package/dist/ui/dropdown/dropdown.d.ts.map +1 -1
  54. package/dist/ui/dropdown.js +43 -2
  55. package/dist/ui/dropdown.js.map +1 -1
  56. package/dist/ui/dropdown.mjs +44 -3
  57. package/dist/ui/dropdown.mjs.map +1 -1
  58. package/dist/ui/dynamic-stepper.js +16 -16
  59. package/dist/ui/dynamic-stepper.mjs +5 -5
  60. package/dist/ui/pagination.js +12 -12
  61. package/dist/ui/pagination.mjs +4 -4
  62. package/dist/ui/tabs/animated.js +3 -3
  63. package/dist/ui/tabs/animated.mjs +2 -2
  64. package/dist/ui/tabs.js +10 -10
  65. package/dist/ui/tabs.mjs +2 -2
  66. package/package.json +10 -3
  67. package/src/design-system/alert.ts +33 -33
  68. package/src/design-system/tabs.ts +2 -2
  69. package/src/hooks/useTableFilter/useTableFilter.test.ts +12 -2
  70. package/src/ui/context-menu/context-menu.test.tsx +38 -0
  71. package/src/ui/context-menu/context-menu.tsx +17 -1
  72. package/src/ui/context-menu/types.ts +3 -0
  73. package/src/ui/dropdown/dropdown.tsx +59 -2
  74. package/dist/chunk-BIQZC26Q.js.map +0 -1
  75. package/dist/chunk-R4D5V7NT.js +0 -19
  76. package/dist/chunk-TVEK6PKH.mjs.map +0 -1
package/src/design-system/alert.ts CHANGED
@@ -5,60 +5,60 @@ export const zuiAlertAppearances = {
5
5
  default:
6
6
  "border-[color:var(--zui-alert-default-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-alert-default-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-alert-default-bg,var(--zui-brand,#0000000d))] dark:bg-[var(--zui-alert-default-bg-dark,var(--zui-brand-dark,#ffffff0d))] text-[color:var(--zui-alert-default-fg,var(--zui-brand-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-default-fg-dark,var(--zui-brand-fg-dark,oklch(98.4%_0.003_247.858)))]",
7
7
  success:
8
- "border-[color:var(--zui-alert-success-border,color-mix(in oklch, var(--zui-status-success,oklch(69.6%_0.17_162.48_/_0.4)) 40%, transparent))] dark:border-[color:var(--zui-alert-success-border-dark,color-mix(in oklch, var(--zui-status-success-dark,oklch(69.6%_0.17_162.48_/_0.4)) 40%, transparent))] bg-[var(--zui-alert-success-bg,color-mix(in oklch, var(--zui-status-success,oklch(69.6%_0.17_162.48_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-alert-success-bg-dark,color-mix(in oklch, var(--zui-status-success-dark,oklch(69.6%_0.17_162.48_/_0.1)) 10%, transparent))] text-[color:var(--zui-alert-success-fg,var(--zui-status-success,oklch(26.2%_0.051_172.552)))] dark:text-[color:var(--zui-alert-success-fg-dark,var(--zui-status-success-dark,oklch(97.9%_0.021_166.113)))]",
8
+ "border-[color:var(--zui-alert-success-border,color-mix(in_oklch,_var(--zui-status-success,oklch(69.6%_0.17_162.48_/_0.4))_40%,_transparent))] dark:border-[color:var(--zui-alert-success-border-dark,color-mix(in_oklch,_var(--zui-status-success-dark,oklch(69.6%_0.17_162.48_/_0.4))_40%,_transparent))] bg-[var(--zui-alert-success-bg,color-mix(in_oklch,_var(--zui-status-success,oklch(69.6%_0.17_162.48_/_0.1))_10%,_transparent))] dark:bg-[var(--zui-alert-success-bg-dark,color-mix(in_oklch,_var(--zui-status-success-dark,oklch(69.6%_0.17_162.48_/_0.1))_10%,_transparent))] text-[color:var(--zui-alert-success-fg,var(--zui-status-success,oklch(26.2%_0.051_172.552)))] dark:text-[color:var(--zui-alert-success-fg-dark,var(--zui-status-success-dark,oklch(97.9%_0.021_166.113)))]",
9
9
  warning:
10
- "border-[color:var(--zui-alert-warning-border,color-mix(in oklch, var(--zui-status-warning,oklch(76.9%_0.188_70.08_/_0.4)) 40%, transparent))] dark:border-[color:var(--zui-alert-warning-border-dark,color-mix(in oklch, var(--zui-status-warning-dark,oklch(76.9%_0.188_70.08_/_0.4)) 40%, transparent))] bg-[var(--zui-alert-warning-bg,color-mix(in oklch, var(--zui-status-warning,oklch(76.9%_0.188_70.08_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-alert-warning-bg-dark,color-mix(in oklch, var(--zui-status-warning-dark,oklch(76.9%_0.188_70.08_/_0.1)) 10%, transparent))] text-[color:var(--zui-alert-warning-fg,var(--zui-status-warning,oklch(27.9%_0.077_45.635)))] dark:text-[color:var(--zui-alert-warning-fg-dark,var(--zui-status-warning-dark,oklch(98.7%_0.022_95.277)))]",
10
+ "border-[color:var(--zui-alert-warning-border,color-mix(in_oklch,_var(--zui-status-warning,oklch(76.9%_0.188_70.08_/_0.4))_40%,_transparent))] dark:border-[color:var(--zui-alert-warning-border-dark,color-mix(in_oklch,_var(--zui-status-warning-dark,oklch(76.9%_0.188_70.08_/_0.4))_40%,_transparent))] bg-[var(--zui-alert-warning-bg,color-mix(in_oklch,_var(--zui-status-warning,oklch(76.9%_0.188_70.08_/_0.1))_10%,_transparent))] dark:bg-[var(--zui-alert-warning-bg-dark,color-mix(in_oklch,_var(--zui-status-warning-dark,oklch(76.9%_0.188_70.08_/_0.1))_10%,_transparent))] text-[color:var(--zui-alert-warning-fg,var(--zui-status-warning,oklch(27.9%_0.077_45.635)))] dark:text-[color:var(--zui-alert-warning-fg-dark,var(--zui-status-warning-dark,oklch(98.7%_0.022_95.277)))]",
11
11
  error:
12
- "border-[color:var(--zui-alert-error-border,color-mix(in oklch, var(--zui-status-error,oklch(64.5%_0.246_16.439_/_0.5)) 40%, transparent))] dark:border-[color:var(--zui-alert-error-border-dark,color-mix(in oklch, var(--zui-status-error-dark,oklch(64.5%_0.246_16.439_/_0.5)) 40%, transparent))] bg-[var(--zui-alert-error-bg,color-mix(in oklch, var(--zui-status-error,oklch(64.5%_0.246_16.439_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-alert-error-bg-dark,color-mix(in oklch, var(--zui-status-error-dark,oklch(64.5%_0.246_16.439_/_0.1)) 10%, transparent))] text-[color:var(--zui-alert-error-fg,var(--zui-status-error,oklch(27.1%_0.105_12.094)))] dark:text-[color:var(--zui-alert-error-fg-dark,var(--zui-status-error-dark,oklch(96.9%_0.015_12.422)))]",
13
- info: "border-[color:var(--zui-alert-info-border,color-mix(in oklch, var(--zui-status-info,oklch(68.5%_0.169_237.323_/_0.4)) 40%, transparent))] dark:border-[color:var(--zui-alert-info-border-dark,color-mix(in oklch, var(--zui-status-info-dark,oklch(68.5%_0.169_237.323_/_0.4)) 40%, transparent))] bg-[var(--zui-alert-info-bg,color-mix(in oklch, var(--zui-status-info,oklch(68.5%_0.169_237.323_/_0.1)) 10%, transparent))] dark:bg-[var(--zui-alert-info-bg-dark,color-mix(in oklch, var(--zui-status-info-dark,oklch(68.5%_0.169_237.323_/_0.1)) 10%, transparent))] text-[color:var(--zui-alert-info-fg,var(--zui-status-info,oklch(29.3%_0.066_243.157)))] dark:text-[color:var(--zui-alert-info-fg-dark,var(--zui-status-info-dark,oklch(97.7%_0.013_236.62)))]",
12
+ "border-[color:var(--zui-alert-error-border,color-mix(in_oklch,_var(--zui-status-error,oklch(64.5%_0.246_16.439_/_0.5))_40%,_transparent))] dark:border-[color:var(--zui-alert-error-border-dark,color-mix(in_oklch,_var(--zui-status-error-dark,oklch(64.5%_0.246_16.439_/_0.5))_40%,_transparent))] bg-[var(--zui-alert-error-bg,color-mix(in_oklch,_var(--zui-status-error,oklch(64.5%_0.246_16.439_/_0.1))_10%,_transparent))] dark:bg-[var(--zui-alert-error-bg-dark,color-mix(in_oklch,_var(--zui-status-error-dark,oklch(64.5%_0.246_16.439_/_0.1))_10%,_transparent))] text-[color:var(--zui-alert-error-fg,var(--zui-status-error,oklch(27.1%_0.105_12.094)))] dark:text-[color:var(--zui-alert-error-fg-dark,var(--zui-status-error-dark,oklch(96.9%_0.015_12.422)))]",
13
+ info: "border-[color:var(--zui-alert-info-border,color-mix(in_oklch,_var(--zui-status-info,oklch(68.5%_0.169_237.323_/_0.4))_40%,_transparent))] dark:border-[color:var(--zui-alert-info-border-dark,color-mix(in_oklch,_var(--zui-status-info-dark,oklch(68.5%_0.169_237.323_/_0.4))_40%,_transparent))] bg-[var(--zui-alert-info-bg,color-mix(in_oklch,_var(--zui-status-info,oklch(68.5%_0.169_237.323_/_0.1))_10%,_transparent))] dark:bg-[var(--zui-alert-info-bg-dark,color-mix(in_oklch,_var(--zui-status-info-dark,oklch(68.5%_0.169_237.323_/_0.1))_10%,_transparent))] text-[color:var(--zui-alert-info-fg,var(--zui-status-info,oklch(29.3%_0.066_243.157)))] dark:text-[color:var(--zui-alert-info-fg-dark,var(--zui-status-info-dark,oklch(97.7%_0.013_236.62)))]",
14
14
  ghost:
15
15
  "border-[color:var(--zui-alert-ghost-border,var(--zui-border,transparent))] dark:border-[color:var(--zui-alert-ghost-border-dark,var(--zui-border-dark,transparent))] bg-[var(--zui-alert-ghost-bg,var(--zui-surface-soft,transparent))] dark:bg-[var(--zui-alert-ghost-bg-dark,var(--zui-surface-soft-dark,transparent))] text-[color:var(--zui-alert-ghost-fg,var(--zui-fg-muted,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-alert-ghost-fg-dark,var(--zui-fg-muted-dark,oklch(92.9%_0.013_255.508)))]",
16
- blue: "border-[color:var(--zui-alert-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[color:var(--zui-alert-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))] bg-[var(--zui-alert-blue-bg,color-mix(in oklch, var(--zui-color-blue,#2563eb) 10%, transparent))] dark:bg-[var(--zui-alert-blue-bg-dark,color-mix(in oklch, var(--zui-color-blue-dark,#3b82f6) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-blue-fg,var(--zui-color-blue,#0f172a))] dark:text-[color:var(--zui-alert-blue-fg-dark,var(--zui-color-blue-dark,#f8fafc))]",
17
- cyan: "border-[color:var(--zui-alert-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[color:var(--zui-alert-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))] bg-[var(--zui-alert-cyan-bg,color-mix(in oklch, var(--zui-color-cyan,#0891b2) 10%, transparent))] dark:bg-[var(--zui-alert-cyan-bg-dark,color-mix(in oklch, var(--zui-color-cyan-dark,#22d3ee) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-cyan-fg,var(--zui-color-cyan,#0f172a))] dark:text-[color:var(--zui-alert-cyan-fg-dark,var(--zui-color-cyan-dark,#f8fafc))]",
16
+ blue: "border-[color:var(--zui-alert-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[color:var(--zui-alert-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))] bg-[var(--zui-alert-blue-bg,color-mix(in_oklch,_var(--zui-color-blue,#2563eb)_10%,_transparent))] dark:bg-[var(--zui-alert-blue-bg-dark,color-mix(in_oklch,_var(--zui-color-blue-dark,#3b82f6)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-blue-fg,var(--zui-color-blue,#0f172a))] dark:text-[color:var(--zui-alert-blue-fg-dark,var(--zui-color-blue-dark,#f8fafc))]",
17
+ cyan: "border-[color:var(--zui-alert-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[color:var(--zui-alert-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))] bg-[var(--zui-alert-cyan-bg,color-mix(in_oklch,_var(--zui-color-cyan,#0891b2)_10%,_transparent))] dark:bg-[var(--zui-alert-cyan-bg-dark,color-mix(in_oklch,_var(--zui-color-cyan-dark,#22d3ee)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-cyan-fg,var(--zui-color-cyan,#0f172a))] dark:text-[color:var(--zui-alert-cyan-fg-dark,var(--zui-color-cyan-dark,#f8fafc))]",
18
18
  green:
19
- "border-[color:var(--zui-alert-green-border,var(--zui-color-green,#16a34a))] dark:border-[color:var(--zui-alert-green-border-dark,var(--zui-color-green-dark,#22c55e))] bg-[var(--zui-alert-green-bg,color-mix(in oklch, var(--zui-color-green,#16a34a) 10%, transparent))] dark:bg-[var(--zui-alert-green-bg-dark,color-mix(in oklch, var(--zui-color-green-dark,#22c55e) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-green-fg,var(--zui-color-green,#0f172a))] dark:text-[color:var(--zui-alert-green-fg-dark,var(--zui-color-green-dark,#f8fafc))]",
20
- lime: "border-[color:var(--zui-alert-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[color:var(--zui-alert-lime-border-dark,var(--zui-color-lime-dark,#a3e635))] bg-[var(--zui-alert-lime-bg,color-mix(in oklch, var(--zui-color-lime,#65a30d) 10%, transparent))] dark:bg-[var(--zui-alert-lime-bg-dark,color-mix(in oklch, var(--zui-color-lime-dark,#a3e635) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-lime-fg,var(--zui-color-lime,#0f172a))] dark:text-[color:var(--zui-alert-lime-fg-dark,var(--zui-color-lime-dark,#f8fafc))]",
21
- mint: "border-[color:var(--zui-alert-mint-border,var(--zui-color-mint,#10b981))] dark:border-[color:var(--zui-alert-mint-border-dark,var(--zui-color-mint-dark,#6ee7b7))] bg-[var(--zui-alert-mint-bg,color-mix(in oklch, var(--zui-color-mint,#10b981) 10%, transparent))] dark:bg-[var(--zui-alert-mint-bg-dark,color-mix(in oklch, var(--zui-color-mint-dark,#6ee7b7) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-mint-fg,var(--zui-color-mint,#0f172a))] dark:text-[color:var(--zui-alert-mint-fg-dark,var(--zui-color-mint-dark,#f8fafc))]",
19
+ "border-[color:var(--zui-alert-green-border,var(--zui-color-green,#16a34a))] dark:border-[color:var(--zui-alert-green-border-dark,var(--zui-color-green-dark,#22c55e))] bg-[var(--zui-alert-green-bg,color-mix(in_oklch,_var(--zui-color-green,#16a34a)_10%,_transparent))] dark:bg-[var(--zui-alert-green-bg-dark,color-mix(in_oklch,_var(--zui-color-green-dark,#22c55e)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-green-fg,var(--zui-color-green,#0f172a))] dark:text-[color:var(--zui-alert-green-fg-dark,var(--zui-color-green-dark,#f8fafc))]",
20
+ lime: "border-[color:var(--zui-alert-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[color:var(--zui-alert-lime-border-dark,var(--zui-color-lime-dark,#a3e635))] bg-[var(--zui-alert-lime-bg,color-mix(in_oklch,_var(--zui-color-lime,#65a30d)_10%,_transparent))] dark:bg-[var(--zui-alert-lime-bg-dark,color-mix(in_oklch,_var(--zui-color-lime-dark,#a3e635)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-lime-fg,var(--zui-color-lime,#0f172a))] dark:text-[color:var(--zui-alert-lime-fg-dark,var(--zui-color-lime-dark,#f8fafc))]",
21
+ mint: "border-[color:var(--zui-alert-mint-border,var(--zui-color-mint,#10b981))] dark:border-[color:var(--zui-alert-mint-border-dark,var(--zui-color-mint-dark,#6ee7b7))] bg-[var(--zui-alert-mint-bg,color-mix(in_oklch,_var(--zui-color-mint,#10b981)_10%,_transparent))] dark:bg-[var(--zui-alert-mint-bg-dark,color-mix(in_oklch,_var(--zui-color-mint-dark,#6ee7b7)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-mint-fg,var(--zui-color-mint,#0f172a))] dark:text-[color:var(--zui-alert-mint-fg-dark,var(--zui-color-mint-dark,#f8fafc))]",
22
22
  ocean:
23
- "border-[color:var(--zui-alert-ocean-border,var(--zui-color-ocean,#0284c7))] dark:border-[color:var(--zui-alert-ocean-border-dark,var(--zui-color-ocean-dark,#38bdf8))] bg-[var(--zui-alert-ocean-bg,color-mix(in oklch, var(--zui-color-ocean,#0284c7) 10%, transparent))] dark:bg-[var(--zui-alert-ocean-bg-dark,color-mix(in oklch, var(--zui-color-ocean-dark,#38bdf8) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-ocean-fg,var(--zui-color-ocean,#0f172a))] dark:text-[color:var(--zui-alert-ocean-fg-dark,var(--zui-color-ocean-dark,#f8fafc))]",
23
+ "border-[color:var(--zui-alert-ocean-border,var(--zui-color-ocean,#0284c7))] dark:border-[color:var(--zui-alert-ocean-border-dark,var(--zui-color-ocean-dark,#38bdf8))] bg-[var(--zui-alert-ocean-bg,color-mix(in_oklch,_var(--zui-color-ocean,#0284c7)_10%,_transparent))] dark:bg-[var(--zui-alert-ocean-bg-dark,color-mix(in_oklch,_var(--zui-color-ocean-dark,#38bdf8)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-ocean-fg,var(--zui-color-ocean,#0f172a))] dark:text-[color:var(--zui-alert-ocean-fg-dark,var(--zui-color-ocean-dark,#f8fafc))]",
24
24
  sapphire:
25
- "border-[color:var(--zui-alert-sapphire-border,var(--zui-color-sapphire,#1d4ed8))] dark:border-[color:var(--zui-alert-sapphire-border-dark,var(--zui-color-sapphire-dark,#60a5fa))] bg-[var(--zui-alert-sapphire-bg,color-mix(in oklch, var(--zui-color-sapphire,#1d4ed8) 10%, transparent))] dark:bg-[var(--zui-alert-sapphire-bg-dark,color-mix(in oklch, var(--zui-color-sapphire-dark,#60a5fa) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-sapphire-fg,var(--zui-color-sapphire,#0f172a))] dark:text-[color:var(--zui-alert-sapphire-fg-dark,var(--zui-color-sapphire-dark,#f8fafc))]",
25
+ "border-[color:var(--zui-alert-sapphire-border,var(--zui-color-sapphire,#1d4ed8))] dark:border-[color:var(--zui-alert-sapphire-border-dark,var(--zui-color-sapphire-dark,#60a5fa))] bg-[var(--zui-alert-sapphire-bg,color-mix(in_oklch,_var(--zui-color-sapphire,#1d4ed8)_10%,_transparent))] dark:bg-[var(--zui-alert-sapphire-bg-dark,color-mix(in_oklch,_var(--zui-color-sapphire-dark,#60a5fa)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-sapphire-fg,var(--zui-color-sapphire,#0f172a))] dark:text-[color:var(--zui-alert-sapphire-fg-dark,var(--zui-color-sapphire-dark,#f8fafc))]",
26
26
  lavender:
27
- "border-[color:var(--zui-alert-lavender-border,var(--zui-color-lavender,#8b5cf6))] dark:border-[color:var(--zui-alert-lavender-border-dark,var(--zui-color-lavender-dark,#a78bfa))] bg-[var(--zui-alert-lavender-bg,color-mix(in oklch, var(--zui-color-lavender,#8b5cf6) 10%, transparent))] dark:bg-[var(--zui-alert-lavender-bg-dark,color-mix(in oklch, var(--zui-color-lavender-dark,#a78bfa) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-lavender-fg,var(--zui-color-lavender,#0f172a))] dark:text-[color:var(--zui-alert-lavender-fg-dark,var(--zui-color-lavender-dark,#f8fafc))]",
28
- ruby: "border-[color:var(--zui-alert-ruby-border,var(--zui-color-ruby,#be123c))] dark:border-[color:var(--zui-alert-ruby-border-dark,var(--zui-color-ruby-dark,#fb7185))] bg-[var(--zui-alert-ruby-bg,color-mix(in oklch, var(--zui-color-ruby,#be123c) 10%, transparent))] dark:bg-[var(--zui-alert-ruby-bg-dark,color-mix(in oklch, var(--zui-color-ruby-dark,#fb7185) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-ruby-fg,var(--zui-color-ruby,#0f172a))] dark:text-[color:var(--zui-alert-ruby-fg-dark,var(--zui-color-ruby-dark,#f8fafc))]",
29
- red: "border-[color:var(--zui-alert-red-border,var(--zui-color-red,#dc2626))] dark:border-[color:var(--zui-alert-red-border-dark,var(--zui-color-red-dark,#ef4444))] bg-[var(--zui-alert-red-bg,color-mix(in oklch, var(--zui-color-red,#dc2626) 10%, transparent))] dark:bg-[var(--zui-alert-red-bg-dark,color-mix(in oklch, var(--zui-color-red-dark,#ef4444) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-red-fg,var(--zui-color-red,#0f172a))] dark:text-[color:var(--zui-alert-red-fg-dark,var(--zui-color-red-dark,#f8fafc))]",
27
+ "border-[color:var(--zui-alert-lavender-border,var(--zui-color-lavender,#8b5cf6))] dark:border-[color:var(--zui-alert-lavender-border-dark,var(--zui-color-lavender-dark,#a78bfa))] bg-[var(--zui-alert-lavender-bg,color-mix(in_oklch,_var(--zui-color-lavender,#8b5cf6)_10%,_transparent))] dark:bg-[var(--zui-alert-lavender-bg-dark,color-mix(in_oklch,_var(--zui-color-lavender-dark,#a78bfa)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-lavender-fg,var(--zui-color-lavender,#0f172a))] dark:text-[color:var(--zui-alert-lavender-fg-dark,var(--zui-color-lavender-dark,#f8fafc))]",
28
+ ruby: "border-[color:var(--zui-alert-ruby-border,var(--zui-color-ruby,#be123c))] dark:border-[color:var(--zui-alert-ruby-border-dark,var(--zui-color-ruby-dark,#fb7185))] bg-[var(--zui-alert-ruby-bg,color-mix(in_oklch,_var(--zui-color-ruby,#be123c)_10%,_transparent))] dark:bg-[var(--zui-alert-ruby-bg-dark,color-mix(in_oklch,_var(--zui-color-ruby-dark,#fb7185)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-ruby-fg,var(--zui-color-ruby,#0f172a))] dark:text-[color:var(--zui-alert-ruby-fg-dark,var(--zui-color-ruby-dark,#f8fafc))]",
29
+ red: "border-[color:var(--zui-alert-red-border,var(--zui-color-red,#dc2626))] dark:border-[color:var(--zui-alert-red-border-dark,var(--zui-color-red-dark,#ef4444))] bg-[var(--zui-alert-red-bg,color-mix(in_oklch,_var(--zui-color-red,#dc2626)_10%,_transparent))] dark:bg-[var(--zui-alert-red-bg-dark,color-mix(in_oklch,_var(--zui-color-red-dark,#ef4444)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-red-fg,var(--zui-color-red,#0f172a))] dark:text-[color:var(--zui-alert-red-fg-dark,var(--zui-color-red-dark,#f8fafc))]",
30
30
  slate:
31
- "border-[color:var(--zui-alert-slate-border,var(--zui-color-slate,#475569))] dark:border-[color:var(--zui-alert-slate-border-dark,var(--zui-color-slate-dark,#64748b))] bg-[var(--zui-alert-slate-bg,color-mix(in oklch, var(--zui-color-slate,#475569) 10%, transparent))] dark:bg-[var(--zui-alert-slate-bg-dark,color-mix(in oklch, var(--zui-color-slate-dark,#64748b) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-slate-fg,var(--zui-color-slate,#0f172a))] dark:text-[color:var(--zui-alert-slate-fg-dark,var(--zui-color-slate-dark,#f8fafc))]",
32
- zinc: "border-[color:var(--zui-alert-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[color:var(--zui-alert-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))] bg-[var(--zui-alert-zinc-bg,color-mix(in oklch, var(--zui-color-zinc,#52525b) 10%, transparent))] dark:bg-[var(--zui-alert-zinc-bg-dark,color-mix(in oklch, var(--zui-color-zinc-dark,#71717a) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-zinc-fg,var(--zui-color-zinc,#0f172a))] dark:text-[color:var(--zui-alert-zinc-fg-dark,var(--zui-color-zinc-dark,#f8fafc))]",
31
+ "border-[color:var(--zui-alert-slate-border,var(--zui-color-slate,#475569))] dark:border-[color:var(--zui-alert-slate-border-dark,var(--zui-color-slate-dark,#64748b))] bg-[var(--zui-alert-slate-bg,color-mix(in_oklch,_var(--zui-color-slate,#475569)_10%,_transparent))] dark:bg-[var(--zui-alert-slate-bg-dark,color-mix(in_oklch,_var(--zui-color-slate-dark,#64748b)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-slate-fg,var(--zui-color-slate,#0f172a))] dark:text-[color:var(--zui-alert-slate-fg-dark,var(--zui-color-slate-dark,#f8fafc))]",
32
+ zinc: "border-[color:var(--zui-alert-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[color:var(--zui-alert-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))] bg-[var(--zui-alert-zinc-bg,color-mix(in_oklch,_var(--zui-color-zinc,#52525b)_10%,_transparent))] dark:bg-[var(--zui-alert-zinc-bg-dark,color-mix(in_oklch,_var(--zui-color-zinc-dark,#71717a)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-zinc-fg,var(--zui-color-zinc,#0f172a))] dark:text-[color:var(--zui-alert-zinc-fg-dark,var(--zui-color-zinc-dark,#f8fafc))]",
33
33
  stone:
34
- "border-[color:var(--zui-alert-stone-border,var(--zui-color-stone,#57534e))] dark:border-[color:var(--zui-alert-stone-border-dark,var(--zui-color-stone-dark,#78716c))] bg-[var(--zui-alert-stone-bg,color-mix(in oklch, var(--zui-color-stone,#57534e) 10%, transparent))] dark:bg-[var(--zui-alert-stone-bg-dark,color-mix(in oklch, var(--zui-color-stone-dark,#78716c) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-stone-fg,var(--zui-color-stone,#0f172a))] dark:text-[color:var(--zui-alert-stone-fg-dark,var(--zui-color-stone-dark,#f8fafc))]",
34
+ "border-[color:var(--zui-alert-stone-border,var(--zui-color-stone,#57534e))] dark:border-[color:var(--zui-alert-stone-border-dark,var(--zui-color-stone-dark,#78716c))] bg-[var(--zui-alert-stone-bg,color-mix(in_oklch,_var(--zui-color-stone,#57534e)_10%,_transparent))] dark:bg-[var(--zui-alert-stone-bg-dark,color-mix(in_oklch,_var(--zui-color-stone-dark,#78716c)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-stone-fg,var(--zui-color-stone,#0f172a))] dark:text-[color:var(--zui-alert-stone-fg-dark,var(--zui-color-stone-dark,#f8fafc))]",
35
35
  royal:
36
- "border-[color:var(--zui-alert-royal-border,var(--zui-color-royal,#4338ca))] dark:border-[color:var(--zui-alert-royal-border-dark,var(--zui-color-royal-dark,#818cf8))] bg-[var(--zui-alert-royal-bg,color-mix(in oklch, var(--zui-color-royal,#4338ca) 10%, transparent))] dark:bg-[var(--zui-alert-royal-bg-dark,color-mix(in oklch, var(--zui-color-royal-dark,#818cf8) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-royal-fg,var(--zui-color-royal,#0f172a))] dark:text-[color:var(--zui-alert-royal-fg-dark,var(--zui-color-royal-dark,#f8fafc))]",
36
+ "border-[color:var(--zui-alert-royal-border,var(--zui-color-royal,#4338ca))] dark:border-[color:var(--zui-alert-royal-border-dark,var(--zui-color-royal-dark,#818cf8))] bg-[var(--zui-alert-royal-bg,color-mix(in_oklch,_var(--zui-color-royal,#4338ca)_10%,_transparent))] dark:bg-[var(--zui-alert-royal-bg-dark,color-mix(in_oklch,_var(--zui-color-royal-dark,#818cf8)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-royal-fg,var(--zui-color-royal,#0f172a))] dark:text-[color:var(--zui-alert-royal-fg-dark,var(--zui-color-royal-dark,#f8fafc))]",
37
37
  electric:
38
- "border-[color:var(--zui-alert-electric-border,var(--zui-color-electric,#0ea5e9))] dark:border-[color:var(--zui-alert-electric-border-dark,var(--zui-color-electric-dark,#38bdf8))] bg-[var(--zui-alert-electric-bg,color-mix(in oklch, var(--zui-color-electric,#0ea5e9) 10%, transparent))] dark:bg-[var(--zui-alert-electric-bg-dark,color-mix(in oklch, var(--zui-color-electric-dark,#38bdf8) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-electric-fg,var(--zui-color-electric,#0f172a))] dark:text-[color:var(--zui-alert-electric-fg-dark,var(--zui-color-electric-dark,#f8fafc))]",
38
+ "border-[color:var(--zui-alert-electric-border,var(--zui-color-electric,#0ea5e9))] dark:border-[color:var(--zui-alert-electric-border-dark,var(--zui-color-electric-dark,#38bdf8))] bg-[var(--zui-alert-electric-bg,color-mix(in_oklch,_var(--zui-color-electric,#0ea5e9)_10%,_transparent))] dark:bg-[var(--zui-alert-electric-bg-dark,color-mix(in_oklch,_var(--zui-color-electric-dark,#38bdf8)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-electric-fg,var(--zui-color-electric,#0f172a))] dark:text-[color:var(--zui-alert-electric-fg-dark,var(--zui-color-electric-dark,#f8fafc))]",
39
39
  forest:
40
- "border-[color:var(--zui-alert-forest-border,var(--zui-color-forest,#166534))] dark:border-[color:var(--zui-alert-forest-border-dark,var(--zui-color-forest-dark,#4ade80))] bg-[var(--zui-alert-forest-bg,color-mix(in oklch, var(--zui-color-forest,#166534) 10%, transparent))] dark:bg-[var(--zui-alert-forest-bg-dark,color-mix(in oklch, var(--zui-color-forest-dark,#4ade80) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-forest-fg,var(--zui-color-forest,#0f172a))] dark:text-[color:var(--zui-alert-forest-fg-dark,var(--zui-color-forest-dark,#f8fafc))]",
40
+ "border-[color:var(--zui-alert-forest-border,var(--zui-color-forest,#166534))] dark:border-[color:var(--zui-alert-forest-border-dark,var(--zui-color-forest-dark,#4ade80))] bg-[var(--zui-alert-forest-bg,color-mix(in_oklch,_var(--zui-color-forest,#166534)_10%,_transparent))] dark:bg-[var(--zui-alert-forest-bg-dark,color-mix(in_oklch,_var(--zui-color-forest-dark,#4ade80)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-forest-fg,var(--zui-color-forest,#0f172a))] dark:text-[color:var(--zui-alert-forest-fg-dark,var(--zui-color-forest-dark,#f8fafc))]",
41
41
  sunset:
42
- "border-[color:var(--zui-alert-sunset-border,var(--zui-color-sunset,#ea580c))] dark:border-[color:var(--zui-alert-sunset-border-dark,var(--zui-color-sunset-dark,#fb923c))] bg-[var(--zui-alert-sunset-bg,color-mix(in oklch, var(--zui-color-sunset,#ea580c) 10%, transparent))] dark:bg-[var(--zui-alert-sunset-bg-dark,color-mix(in oklch, var(--zui-color-sunset-dark,#fb923c) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-sunset-fg,var(--zui-color-sunset,#0f172a))] dark:text-[color:var(--zui-alert-sunset-fg-dark,var(--zui-color-sunset-dark,#f8fafc))]",
42
+ "border-[color:var(--zui-alert-sunset-border,var(--zui-color-sunset,#ea580c))] dark:border-[color:var(--zui-alert-sunset-border-dark,var(--zui-color-sunset-dark,#fb923c))] bg-[var(--zui-alert-sunset-bg,color-mix(in_oklch,_var(--zui-color-sunset,#ea580c)_10%,_transparent))] dark:bg-[var(--zui-alert-sunset-bg-dark,color-mix(in_oklch,_var(--zui-color-sunset-dark,#fb923c)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-sunset-fg,var(--zui-color-sunset,#0f172a))] dark:text-[color:var(--zui-alert-sunset-fg-dark,var(--zui-color-sunset-dark,#f8fafc))]",
43
43
  magenta:
44
- "border-[color:var(--zui-alert-magenta-border,var(--zui-color-magenta,#c026d3))] dark:border-[color:var(--zui-alert-magenta-border-dark,var(--zui-color-magenta-dark,#e879f9))] bg-[var(--zui-alert-magenta-bg,color-mix(in oklch, var(--zui-color-magenta,#c026d3) 10%, transparent))] dark:bg-[var(--zui-alert-magenta-bg-dark,color-mix(in oklch, var(--zui-color-magenta-dark,#e879f9) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-magenta-fg,var(--zui-color-magenta,#0f172a))] dark:text-[color:var(--zui-alert-magenta-fg-dark,var(--zui-color-magenta-dark,#f8fafc))]",
44
+ "border-[color:var(--zui-alert-magenta-border,var(--zui-color-magenta,#c026d3))] dark:border-[color:var(--zui-alert-magenta-border-dark,var(--zui-color-magenta-dark,#e879f9))] bg-[var(--zui-alert-magenta-bg,color-mix(in_oklch,_var(--zui-color-magenta,#c026d3)_10%,_transparent))] dark:bg-[var(--zui-alert-magenta-bg-dark,color-mix(in_oklch,_var(--zui-color-magenta-dark,#e879f9)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-magenta-fg,var(--zui-color-magenta,#0f172a))] dark:text-[color:var(--zui-alert-magenta-fg-dark,var(--zui-color-magenta-dark,#f8fafc))]",
45
45
  crimson:
46
- "border-[color:var(--zui-alert-crimson-border,var(--zui-color-crimson,#b91c1c))] dark:border-[color:var(--zui-alert-crimson-border-dark,var(--zui-color-crimson-dark,#f87171))] bg-[var(--zui-alert-crimson-bg,color-mix(in oklch, var(--zui-color-crimson,#b91c1c) 10%, transparent))] dark:bg-[var(--zui-alert-crimson-bg-dark,color-mix(in oklch, var(--zui-color-crimson-dark,#f87171) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-crimson-fg,var(--zui-color-crimson,#0f172a))] dark:text-[color:var(--zui-alert-crimson-fg-dark,var(--zui-color-crimson-dark,#f8fafc))]",
47
- aqua: "border-[color:var(--zui-alert-aqua-border,var(--zui-color-aqua,#0f766e))] dark:border-[color:var(--zui-alert-aqua-border-dark,var(--zui-color-aqua-dark,#2dd4bf))] bg-[var(--zui-alert-aqua-bg,color-mix(in oklch, var(--zui-color-aqua,#0f766e) 10%, transparent))] dark:bg-[var(--zui-alert-aqua-bg-dark,color-mix(in oklch, var(--zui-color-aqua-dark,#2dd4bf) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-aqua-fg,var(--zui-color-aqua,#0f172a))] dark:text-[color:var(--zui-alert-aqua-fg-dark,var(--zui-color-aqua-dark,#f8fafc))]",
48
- plum: "border-[color:var(--zui-alert-plum-border,var(--zui-color-plum,#7e22ce))] dark:border-[color:var(--zui-alert-plum-border-dark,var(--zui-color-plum-dark,#c084fc))] bg-[var(--zui-alert-plum-bg,color-mix(in oklch, var(--zui-color-plum,#7e22ce) 10%, transparent))] dark:bg-[var(--zui-alert-plum-bg-dark,color-mix(in oklch, var(--zui-color-plum-dark,#c084fc) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-plum-fg,var(--zui-color-plum,#0f172a))] dark:text-[color:var(--zui-alert-plum-fg-dark,var(--zui-color-plum-dark,#f8fafc))]",
46
+ "border-[color:var(--zui-alert-crimson-border,var(--zui-color-crimson,#b91c1c))] dark:border-[color:var(--zui-alert-crimson-border-dark,var(--zui-color-crimson-dark,#f87171))] bg-[var(--zui-alert-crimson-bg,color-mix(in_oklch,_var(--zui-color-crimson,#b91c1c)_10%,_transparent))] dark:bg-[var(--zui-alert-crimson-bg-dark,color-mix(in_oklch,_var(--zui-color-crimson-dark,#f87171)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-crimson-fg,var(--zui-color-crimson,#0f172a))] dark:text-[color:var(--zui-alert-crimson-fg-dark,var(--zui-color-crimson-dark,#f8fafc))]",
47
+ aqua: "border-[color:var(--zui-alert-aqua-border,var(--zui-color-aqua,#0f766e))] dark:border-[color:var(--zui-alert-aqua-border-dark,var(--zui-color-aqua-dark,#2dd4bf))] bg-[var(--zui-alert-aqua-bg,color-mix(in_oklch,_var(--zui-color-aqua,#0f766e)_10%,_transparent))] dark:bg-[var(--zui-alert-aqua-bg-dark,color-mix(in_oklch,_var(--zui-color-aqua-dark,#2dd4bf)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-aqua-fg,var(--zui-color-aqua,#0f172a))] dark:text-[color:var(--zui-alert-aqua-fg-dark,var(--zui-color-aqua-dark,#f8fafc))]",
48
+ plum: "border-[color:var(--zui-alert-plum-border,var(--zui-color-plum,#7e22ce))] dark:border-[color:var(--zui-alert-plum-border-dark,var(--zui-color-plum-dark,#c084fc))] bg-[var(--zui-alert-plum-bg,color-mix(in_oklch,_var(--zui-color-plum,#7e22ce)_10%,_transparent))] dark:bg-[var(--zui-alert-plum-bg-dark,color-mix(in_oklch,_var(--zui-color-plum-dark,#c084fc)_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-plum-fg,var(--zui-color-plum,#0f172a))] dark:text-[color:var(--zui-alert-plum-fg-dark,var(--zui-color-plum-dark,#f8fafc))]",
49
49
  purple:
50
- "border-[color:var(--zui-alert-purple-border,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:border-[color:var(--zui-alert-purple-border-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] bg-[var(--zui-alert-purple-bg,var(--zui-color-purple,oklch(97.7%_0.014_308.299)))] dark:bg-[var(--zui-alert-purple-bg-dark,color-mix(in oklch, var(--zui-color-purple-dark,oklch(29.1%_0.149_302.717)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-purple-fg,var(--zui-color-purple,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-purple-fg-dark,var(--zui-color-purple-dark,oklch(98.4%_0.003_247.858)))]",
51
- pink: "border-[color:var(--zui-alert-pink-border,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:border-[color:var(--zui-alert-pink-border-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] bg-[var(--zui-alert-pink-bg,var(--zui-color-pink,oklch(97.1%_0.014_343.198)))] dark:bg-[var(--zui-alert-pink-bg-dark,color-mix(in oklch, var(--zui-color-pink-dark,oklch(28.4%_0.109_3.907)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-pink-fg,var(--zui-color-pink,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-pink-fg-dark,var(--zui-color-pink-dark,oklch(98.4%_0.003_247.858)))]",
50
+ "border-[color:var(--zui-alert-purple-border,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:border-[color:var(--zui-alert-purple-border-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] bg-[var(--zui-alert-purple-bg,var(--zui-color-purple,oklch(97.7%_0.014_308.299)))] dark:bg-[var(--zui-alert-purple-bg-dark,color-mix(in_oklch,_var(--zui-color-purple-dark,oklch(29.1%_0.149_302.717))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-purple-fg,var(--zui-color-purple,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-purple-fg-dark,var(--zui-color-purple-dark,oklch(98.4%_0.003_247.858)))]",
51
+ pink: "border-[color:var(--zui-alert-pink-border,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:border-[color:var(--zui-alert-pink-border-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] bg-[var(--zui-alert-pink-bg,var(--zui-color-pink,oklch(97.1%_0.014_343.198)))] dark:bg-[var(--zui-alert-pink-bg-dark,color-mix(in_oklch,_var(--zui-color-pink-dark,oklch(28.4%_0.109_3.907))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-pink-fg,var(--zui-color-pink,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-pink-fg-dark,var(--zui-color-pink-dark,oklch(98.4%_0.003_247.858)))]",
52
52
  orange:
53
- "border-[color:var(--zui-alert-orange-border,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:border-[color:var(--zui-alert-orange-border-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] bg-[var(--zui-alert-orange-bg,var(--zui-color-orange,oklch(98%_0.016_73.684)))] dark:bg-[var(--zui-alert-orange-bg-dark,color-mix(in oklch, var(--zui-color-orange-dark,oklch(26.6%_0.079_36.259)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-orange-fg,var(--zui-color-orange,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-orange-fg-dark,var(--zui-color-orange-dark,oklch(98.4%_0.003_247.858)))]",
53
+ "border-[color:var(--zui-alert-orange-border,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:border-[color:var(--zui-alert-orange-border-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] bg-[var(--zui-alert-orange-bg,var(--zui-color-orange,oklch(98%_0.016_73.684)))] dark:bg-[var(--zui-alert-orange-bg-dark,color-mix(in_oklch,_var(--zui-color-orange-dark,oklch(26.6%_0.079_36.259))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-orange-fg,var(--zui-color-orange,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-orange-fg-dark,var(--zui-color-orange-dark,oklch(98.4%_0.003_247.858)))]",
54
54
  yellow:
55
- "border-[color:var(--zui-alert-yellow-border,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:border-[color:var(--zui-alert-yellow-border-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] bg-[var(--zui-alert-yellow-bg,var(--zui-color-yellow,oklch(98.7%_0.026_102.212)))] dark:bg-[var(--zui-alert-yellow-bg-dark,color-mix(in oklch, var(--zui-color-yellow-dark,oklch(28.6%_0.066_53.813)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-yellow-fg,var(--zui-color-yellow,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-yellow-fg-dark,var(--zui-color-yellow-dark,oklch(98.4%_0.003_247.858)))]",
56
- teal: "border-[color:var(--zui-alert-teal-border,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:border-[color:var(--zui-alert-teal-border-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] bg-[var(--zui-alert-teal-bg,var(--zui-color-teal,oklch(98.4%_0.014_180.72)))] dark:bg-[var(--zui-alert-teal-bg-dark,color-mix(in oklch, var(--zui-color-teal-dark,oklch(27.7%_0.046_192.524)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-teal-fg,var(--zui-color-teal,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-teal-fg-dark,var(--zui-color-teal-dark,oklch(98.4%_0.003_247.858)))]",
55
+ "border-[color:var(--zui-alert-yellow-border,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:border-[color:var(--zui-alert-yellow-border-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] bg-[var(--zui-alert-yellow-bg,var(--zui-color-yellow,oklch(98.7%_0.026_102.212)))] dark:bg-[var(--zui-alert-yellow-bg-dark,color-mix(in_oklch,_var(--zui-color-yellow-dark,oklch(28.6%_0.066_53.813))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-yellow-fg,var(--zui-color-yellow,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-yellow-fg-dark,var(--zui-color-yellow-dark,oklch(98.4%_0.003_247.858)))]",
56
+ teal: "border-[color:var(--zui-alert-teal-border,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:border-[color:var(--zui-alert-teal-border-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] bg-[var(--zui-alert-teal-bg,var(--zui-color-teal,oklch(98.4%_0.014_180.72)))] dark:bg-[var(--zui-alert-teal-bg-dark,color-mix(in_oklch,_var(--zui-color-teal-dark,oklch(27.7%_0.046_192.524))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-teal-fg,var(--zui-color-teal,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-teal-fg-dark,var(--zui-color-teal-dark,oklch(98.4%_0.003_247.858)))]",
57
57
  indigo:
58
- "border-[color:var(--zui-alert-indigo-border,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:border-[color:var(--zui-alert-indigo-border-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] bg-[var(--zui-alert-indigo-bg,var(--zui-color-indigo,oklch(96.2%_0.018_272.314)))] dark:bg-[var(--zui-alert-indigo-bg-dark,color-mix(in oklch, var(--zui-color-indigo-dark,oklch(25.7%_0.09_281.288)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-indigo-fg,var(--zui-color-indigo,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-indigo-fg-dark,var(--zui-color-indigo-dark,oklch(98.4%_0.003_247.858)))]",
59
- gray: "border-[color:var(--zui-alert-gray-border,var(--zui-color-gray,oklch(27.8%_0.033_256.848)))] dark:border-[color:var(--zui-alert-gray-border-dark,var(--zui-color-gray-dark,oklch(44.6%_0.03_256.802)))] bg-[var(--zui-alert-gray-bg,var(--zui-color-gray,oklch(98.5%_0.002_247.839)))] dark:bg-[var(--zui-alert-gray-bg-dark,color-mix(in oklch, var(--zui-color-gray-dark,oklch(13%_0.028_261.692)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-gray-fg,var(--zui-color-gray,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-gray-fg-dark,var(--zui-color-gray-dark,oklch(98.4%_0.003_247.858)))]",
58
+ "border-[color:var(--zui-alert-indigo-border,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:border-[color:var(--zui-alert-indigo-border-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] bg-[var(--zui-alert-indigo-bg,var(--zui-color-indigo,oklch(96.2%_0.018_272.314)))] dark:bg-[var(--zui-alert-indigo-bg-dark,color-mix(in_oklch,_var(--zui-color-indigo-dark,oklch(25.7%_0.09_281.288))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-indigo-fg,var(--zui-color-indigo,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-indigo-fg-dark,var(--zui-color-indigo-dark,oklch(98.4%_0.003_247.858)))]",
59
+ gray: "border-[color:var(--zui-alert-gray-border,var(--zui-color-gray,oklch(27.8%_0.033_256.848)))] dark:border-[color:var(--zui-alert-gray-border-dark,var(--zui-color-gray-dark,oklch(44.6%_0.03_256.802)))] bg-[var(--zui-alert-gray-bg,var(--zui-color-gray,oklch(98.5%_0.002_247.839)))] dark:bg-[var(--zui-alert-gray-bg-dark,color-mix(in_oklch,_var(--zui-color-gray-dark,oklch(13%_0.028_261.692))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-gray-fg,var(--zui-color-gray,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-gray-fg-dark,var(--zui-color-gray-dark,oklch(98.4%_0.003_247.858)))]",
60
60
  violet:
61
- "border-[color:var(--zui-alert-violet-border,var(--zui-color-violet,oklch(43.2%_0.232_292.759)))] dark:border-[color:var(--zui-alert-violet-border-dark,var(--zui-color-violet-dark,oklch(54.1%_0.281_293.009)))] bg-[var(--zui-alert-violet-bg,var(--zui-color-violet,oklch(96.9%_0.016_293.756)))] dark:bg-[var(--zui-alert-violet-bg-dark,color-mix(in oklch, var(--zui-color-violet-dark,oklch(28.3%_0.141_291.089)) 18%, transparent))] backdrop-blur-xl text-[color:var(--zui-alert-violet-fg,var(--zui-color-violet,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-violet-fg-dark,var(--zui-color-violet-dark,oklch(98.4%_0.003_247.858)))]",
61
+ "border-[color:var(--zui-alert-violet-border,var(--zui-color-violet,oklch(43.2%_0.232_292.759)))] dark:border-[color:var(--zui-alert-violet-border-dark,var(--zui-color-violet-dark,oklch(54.1%_0.281_293.009)))] bg-[var(--zui-alert-violet-bg,var(--zui-color-violet,oklch(96.9%_0.016_293.756)))] dark:bg-[var(--zui-alert-violet-bg-dark,color-mix(in_oklch,_var(--zui-color-violet-dark,oklch(28.3%_0.141_291.089))_18%,_transparent))] backdrop-blur-xl text-[color:var(--zui-alert-violet-fg,var(--zui-color-violet,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-violet-fg-dark,var(--zui-color-violet-dark,oklch(98.4%_0.003_247.858)))]",
62
62
  "gradient-blue":
63
63
  "border-[color:var(--zui-alert-gradient-blue-border,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:border-[color:var(--zui-alert-gradient-blue-border-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] bg-linear-to-r from-[var(--zui-alert-gradient-blue-from,var(--zui-color-blue,oklch(97%_0.014_254.604)))] dark:from-[var(--zui-alert-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(28.2%_0.091_267.935_/_0.7)))] to-[var(--zui-alert-gradient-blue-to,var(--zui-color-purple,oklch(97.7%_0.014_308.299)))] dark:to-[var(--zui-alert-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(29.1%_0.149_302.717_/_0.7)))] backdrop-blur-xl text-[color:var(--zui-alert-gradient-blue-fg,var(--zui-brand-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-alert-gradient-blue-fg-dark,var(--zui-brand-fg-dark,oklch(98.4%_0.003_247.858)))]",
64
64
  "gradient-green":
package/src/design-system/tabs.ts CHANGED
@@ -24,7 +24,7 @@ export const zuiTabsTriggerBase =
24
24
 
25
25
  export const zuiTabsTriggerAppearances = {
26
26
  default:
27
- "bg-[var(--zui-tabs-trigger-default-bg,transparent)] dark:bg-[var(--zui-tabs-trigger-default-bg-dark,transparent)] text-[color:var(--zui-tabs-trigger-default-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-tabs-trigger-default-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
27
+ "bg-[var(--zui-tabs-trigger-default-bg,transparent)] dark:bg-[var(--zui-tabs-trigger-default-bg-dark,transparent)] text-[color:var(--zui-tabs-trigger-default-fg,var(--zui-fg-muted,oklch(55.5%_0.041_257.417)))] dark:text-[color:var(--zui-tabs-trigger-default-fg-dark,var(--zui-fg-muted-dark,oklch(70.4%_0.04_256.788)))] hover:bg-[var(--zui-tabs-trigger-default-bg-hover,oklch(96.8%_0.007_247.896))] dark:hover:bg-[var(--zui-tabs-trigger-default-bg-hover-dark,oklch(27.9%_0.041_260.031))] hover:text-[color:var(--zui-tabs-trigger-default-fg-hover,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:hover:text-[color:var(--zui-tabs-trigger-default-fg-hover-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-default-fg-active,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-default-fg-active-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
28
28
  sky: "bg-[var(--zui-tabs-trigger-sky-bg,var(--zui-color-sky,oklch(82.8%_0.111_230.318)))] text-[color:var(--zui-tabs-trigger-sky-fg,var(--zui-color-sky,oklch(39.1%_0.09_240.876)))] dark:bg-[var(--zui-tabs-trigger-sky-bg-dark,var(--zui-color-sky-dark,oklch(39.1%_0.09_240.876)))] dark:text-[color:var(--zui-tabs-trigger-sky-fg-dark,var(--zui-color-sky-dark,oklch(90.1%_0.058_230.902)))] data-[state=active]:bg-[var(--zui-tabs-trigger-sky-bg-active,var(--zui-color-sky,oklch(39.1%_0.09_240.876)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-sky-bg-active-dark,var(--zui-color-sky-dark,oklch(50%_0.134_242.749)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-sky-fg-active,var(--zui-color-sky,oklch(97.7%_0.013_236.62)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-sky-fg-active-dark,var(--zui-color-sky-dark,oklch(95.1%_0.026_236.824)))]",
29
29
  rose: "bg-[var(--zui-tabs-trigger-rose-bg,var(--zui-color-rose,oklch(81%_0.117_11.638)))] text-[color:var(--zui-tabs-trigger-rose-fg,var(--zui-color-rose,oklch(41%_0.159_10.272)))] dark:bg-[var(--zui-tabs-trigger-rose-bg-dark,var(--zui-color-rose-dark,oklch(41%_0.159_10.272)))] dark:text-[color:var(--zui-tabs-trigger-rose-fg-dark,var(--zui-color-rose-dark,oklch(89.2%_0.058_10.001)))] data-[state=active]:bg-[var(--zui-tabs-trigger-rose-bg-active,var(--zui-color-rose,oklch(41%_0.159_10.272)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-rose-bg-active-dark,var(--zui-color-rose-dark,oklch(51.4%_0.222_16.935)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-rose-fg-active,var(--zui-color-rose,oklch(96.9%_0.015_12.422)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-rose-fg-active-dark,var(--zui-color-rose-dark,oklch(94.1%_0.03_12.58)))]",
30
30
  purple:
@@ -95,7 +95,7 @@ export const zuiTabsTriggerAppearances = {
95
95
 
96
96
  export const zuiTabsTriggerVariants = {
97
97
  default:
98
- "data-[state=active]:bg-[var(--zui-tabs-trigger-default-bg-active,var(--zui-surface-muted,#ffffff))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-default-bg-active-dark,var(--zui-surface-muted-dark,#020617))]",
98
+ "data-[state=active]:bg-[var(--zui-tabs-trigger-default-bg-active,var(--zui-surface,#ffffff))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-default-bg-active-dark,var(--zui-surface-dark,oklch(27.9%_0.041_260.031)))] data-[state=active]:font-medium data-[state=active]:shadow-sm data-[state=active]:shadow-[color:var(--zui-tabs-trigger-default-shadow,oklch(0%_0_0_/_0.06))] dark:data-[state=active]:shadow-[color:var(--zui-tabs-trigger-default-shadow-dark,oklch(0%_0_0_/_0.3))]",
99
99
  underline:
100
100
  "border-b-2 border-[color:var(--zui-tabs-trigger-underline-border,transparent)] dark:border-[color:var(--zui-tabs-trigger-underline-border-dark,transparent)] data-[state=active]:border-current rounded-none",
101
101
  pills: "",
package/src/hooks/useTableFilter/useTableFilter.test.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { act, renderHook } from "@testing-library/react";
2
2
  import { describe, expect, it, vi } from "vitest";
3
3
 
4
+ import type { TableFilterState } from "./types";
4
5
  import { useTableFilter } from "./useTableFilter";
5
6
 
6
7
  const rows = [
@@ -9,6 +10,11 @@ const rows = [
9
10
  { name: "Comet", status: "active", seats: 8 },
10
11
  ] as const;
11
12
 
13
+ type RowFilterKey = "name" | "status";
14
+ type ControlledFilterProps = {
15
+ filters: TableFilterState<RowFilterKey>;
16
+ };
17
+
12
18
  describe("useTableFilter", () => {
13
19
  it("should return all rows when no filters are active", () => {
14
20
  const { result } = renderHook(() => useTableFilter({ data: rows }));
@@ -81,14 +87,18 @@ describe("useTableFilter", () => {
81
87
 
82
88
  it("should support controlled filters", () => {
83
89
  const handleFiltersChange = vi.fn();
90
+ const initialProps: ControlledFilterProps = {
91
+ filters: { status: "active" },
92
+ };
93
+
84
94
  const { result, rerender } = renderHook(
85
- ({ filters }: { filters: Record<string, string> }) =>
95
+ ({ filters }: ControlledFilterProps) =>
86
96
  useTableFilter({
87
97
  data: rows,
88
98
  filters,
89
99
  onFiltersChange: handleFiltersChange,
90
100
  }),
91
- { initialProps: { filters: { status: "active" } } },
101
+ { initialProps },
92
102
  );
93
103
 
94
104
  expect(result.current.filteredData.length).toBe(2);
package/src/ui/context-menu/context-menu.test.tsx CHANGED
@@ -53,6 +53,44 @@ describe("ContextMenu", () => {
53
53
  expect(screen.getByText("Row actions").tagName).toBe("P");
54
54
  });
55
55
 
56
+ it("should open a cloned trigger with Enter and Space", async () => {
57
+ const user = userEvent.setup();
58
+ renderContextMenu();
59
+
60
+ const trigger = screen.getByTestId("surface");
61
+ trigger.focus();
62
+ await user.keyboard("{Enter}");
63
+
64
+ expect(screen.getByRole("menu")).toBeVisible();
65
+
66
+ await user.keyboard("{Escape}");
67
+ await waitFor(() => {
68
+ expect(screen.queryByRole("menu")).not.toBeInTheDocument();
69
+ });
70
+
71
+ await user.keyboard(" ");
72
+
73
+ expect(screen.getByRole("menu")).toBeVisible();
74
+ });
75
+
76
+ it("should open the fallback trigger with Enter", async () => {
77
+ const user = userEvent.setup();
78
+ render(
79
+ <ContextMenu>
80
+ <ContextMenuTrigger>Right-click row</ContextMenuTrigger>
81
+ <ContextMenuContent>
82
+ <ContextMenuItem>Copy</ContextMenuItem>
83
+ </ContextMenuContent>
84
+ </ContextMenu>,
85
+ );
86
+
87
+ const trigger = screen.getByRole("button", { name: "Right-click row" });
88
+ trigger.focus();
89
+ await user.keyboard("{Enter}");
90
+
91
+ expect(screen.getByRole("menu")).toBeVisible();
92
+ });
93
+
56
94
  it("should clamp using the rendered menu dimensions", async () => {
57
95
  vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
58
96
  bottom: 0,
package/src/ui/context-menu/context-menu.tsx CHANGED
@@ -15,7 +15,6 @@ import {
15
15
  useState,
16
16
  type KeyboardEvent,
17
17
  type MouseEvent,
18
- type ReactElement,
19
18
  type Ref,
20
19
  type RefObject,
21
20
  } from "react";
@@ -222,6 +221,14 @@ export const ContextMenuTrigger = ({
222
221
  openAt({ x: event.clientX, y: event.clientY });
223
222
  }
224
223
  };
224
+ const handleKeyboardTrigger = (event: KeyboardEvent<HTMLElement>) => {
225
+ if (disabled || (event.key !== "Enter" && event.key !== " ")) {
226
+ return;
227
+ }
228
+ event.preventDefault();
229
+ const rect = event.currentTarget.getBoundingClientRect();
230
+ openAt({ x: rect.left, y: rect.bottom });
231
+ };
225
232
  const childList = Children.toArray(children).filter(
226
233
  (node) => node !== null && node !== undefined && typeof node !== "boolean",
227
234
  );
@@ -239,8 +246,15 @@ export const ContextMenuTrigger = ({
239
246
  handleContextMenu(event);
240
247
  }
241
248
  },
249
+ onKeyDown: (event) => {
250
+ soleCandidate.props.onKeyDown?.(event);
251
+ if (!event.defaultPrevented) {
252
+ handleKeyboardTrigger(event);
253
+ }
254
+ },
242
255
  className: cn(className, soleCandidate.props.className),
243
256
  tabIndex: soleCandidate.props.tabIndex ?? 0,
257
+ role: soleCandidate.props.role ?? "button",
244
258
  "aria-controls": open ? contentId : undefined,
245
259
  "aria-expanded": open,
246
260
  "aria-haspopup": "menu",
@@ -251,8 +265,10 @@ export const ContextMenuTrigger = ({
251
265
  <span
252
266
  ref={triggerRef as Ref<HTMLSpanElement>}
253
267
  className={className}
268
+ role="button"
254
269
  tabIndex={0}
255
270
  onContextMenu={handleContextMenu}
271
+ onKeyDown={handleKeyboardTrigger}
256
272
  aria-controls={open ? contentId : undefined}
257
273
  aria-expanded={open}
258
274
  aria-haspopup="menu"
package/src/ui/context-menu/types.ts CHANGED
@@ -2,6 +2,7 @@ import type { VariantProps } from "class-variance-authority";
2
2
  import type {
3
3
  ComponentPropsWithRef,
4
4
  HTMLAttributes,
5
+ KeyboardEvent,
5
6
  MouseEvent,
6
7
  ReactElement,
7
8
  ReactNode,
@@ -103,8 +104,10 @@ export type ReactChildSoleCandidate = ReactElement<{
103
104
  className?: string;
104
105
  ref?: Ref<HTMLElement>;
105
106
  onContextMenu?: (event: MouseEvent<HTMLElement>) => void;
107
+ onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
106
108
  tabIndex?: number;
107
109
  "aria-controls"?: string;
108
110
  "aria-expanded"?: boolean;
109
111
  "aria-haspopup"?: string;
112
+ role?: string;
110
113
  }>;
package/src/ui/dropdown/dropdown.tsx CHANGED
@@ -7,6 +7,7 @@ import {
7
7
  useRef,
8
8
  useEffect,
9
9
  useId,
10
+ type KeyboardEvent,
10
11
  } from "react";
11
12
  import { FiCheck } from "react-icons/fi";
12
13
  import { cn } from "../../lib/utils";
@@ -136,6 +137,14 @@ export const DropdownContent = ({
136
137
  // click outside
137
138
  useClickOutside({ ref, setOpen });
138
139
 
140
+ useEffect(() => {
141
+ if (!open) {
142
+ return;
143
+ }
144
+
145
+ ref.current?.querySelector<HTMLElement>('[role="menuitem"]')?.focus();
146
+ }, [open]);
147
+
139
148
  if (!open) return null;
140
149
 
141
150
  return (
@@ -163,6 +172,8 @@ export const DropdownItem = ({
163
172
  value,
164
173
  className,
165
174
  variant,
175
+ onClick,
176
+ onKeyDown,
166
177
  onSelect,
167
178
  leftIcon,
168
179
  rightIcon,
@@ -176,15 +187,61 @@ export const DropdownItem = ({
176
187
  onSelect?.();
177
188
  };
178
189
 
190
+ const focusSiblingItem = (
191
+ event: KeyboardEvent<HTMLDivElement>,
192
+ direction: "next" | "previous" | "first" | "last",
193
+ ) => {
194
+ const menu = event.currentTarget.closest('[role="menu"]');
195
+ const items = Array.from(
196
+ menu?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? [],
197
+ );
198
+ const currentIndex = items.indexOf(event.currentTarget);
199
+
200
+ if (currentIndex === -1 || items.length === 0) {
201
+ return;
202
+ }
203
+
204
+ const nextIndex =
205
+ direction === "first"
206
+ ? 0
207
+ : direction === "last"
208
+ ? items.length - 1
209
+ : (currentIndex + (direction === "next" ? 1 : -1) + items.length) %
210
+ items.length;
211
+
212
+ items[nextIndex]?.focus();
213
+ };
214
+
179
215
  return (
180
216
  <div
181
217
  role="menuitem"
182
- tabIndex={0}
183
- onClick={handleClick}
218
+ tabIndex={-1}
219
+ onClick={(event) => {
220
+ onClick?.(event);
221
+ if (!event.defaultPrevented) {
222
+ handleClick();
223
+ }
224
+ }}
184
225
  onKeyDown={(e) => {
226
+ onKeyDown?.(e);
227
+ if (e.defaultPrevented) {
228
+ return;
229
+ }
185
230
  if (e.key === "Enter" || e.key === " ") {
186
231
  e.preventDefault();
187
232
  handleClick();
233
+ } else if (e.key === "ArrowDown") {
234
+ e.preventDefault();
235
+ focusSiblingItem(e, "next");
236
+ } else if (e.key === "ArrowUp") {
237
+ e.preventDefault();
238
+ focusSiblingItem(e, "previous");
239
+ } else if (e.key === "Home") {
240
+ e.preventDefault();
241
+ focusSiblingItem(e, "first");
242
+ } else if (e.key === "End") {
243
+ e.preventDefault();
244
+ focusSiblingItem(e, "last");
188
245
  }
189
246
  }}
190
247
  className={cn(itemVariants({ variant }), className)}
package/dist/chunk-BIQZC26Q.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/design-system/tabs.ts"],"names":[],"mappings":";;;AAAO,IAAM,eAAA,GAAkB;AAExB,IAAM,mBAAA,GAAsB;AAAA,EACjC,OAAA,EACE,6GAAA;AAAA,EACF,SAAA,EACE,wJAAA;AAAA,EACF,KAAA,EAAO;AACT;AAEO,IAAM,gBAAA,GAAmB;AAAA,EAC9B,EAAA,EAAI,aAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,mBAAA,GAAsB;AAAA,EACjC,UAAA,EAAY,UAAA;AAAA,EACZ,QAAA,EAAU;AACZ;AAEO,IAAM,kBAAA,GACX;AAEK,IAAM,yBAAA,GAA4B;AAAA,EACvC,OAAA,EACE,oTAAA;AAAA,EACF,GAAA,EAAK,m2BAAA;AAAA,EACL,IAAA,EAAM,u2BAAA;AAAA,EACN,MAAA,EACE,y5BAAA;AAAA,EACF,IAAA,EAAM,g3BAAA;AAAA,EACN,MAAA,EACE,84BAAA;AAAA,EACF,MAAA,EACE,m5BAAA;AAAA,EACF,IAAA,EAAM,s3BAAA;AAAA,EACN,MAAA,EACE,o5BAAA;AAAA,EACF,OAAA,EACE,m6BAAA;AAAA,EACF,IAAA,EAAM,k3BAAA;AAAA,EACN,eAAA,EACE,86CAAA;AAAA,EACF,gBAAA,EACE,o7CAAA;AAAA,EACF,cAAA,EACE,u4CAAA;AAAA,EACF,iBAAA,EACE,o8CAAA;AAAA,EACF,iBAAA,EACE,g8CAAA;AAAA,EACF,eAAA,EACE,+5CAAA;AAAA,EACF,iBAAA,EACE,08CAAA;AAAA,EACF,eAAA,EACE,45CAAA;AAAA,EACF,iBAAA,EACE,k7CAAA;AAAA,EACF,IAAA,EAAM,iuBAAA;AAAA,EACN,IAAA,EAAM,iuBAAA;AAAA,EACN,KAAA,EACE,ivBAAA;AAAA,EACF,IAAA,EAAM,iuBAAA;AAAA,EACN,IAAA,EAAM,iuBAAA;AAAA,EACN,KAAA,EACE,ivBAAA;AAAA,EACF,QAAA,EACE,iyBAAA;AAAA,EACF,QAAA,EACE,iyBAAA;AAAA,EACF,IAAA,EAAM,iuBAAA;AAAA,EACN,GAAA,EAAK,itBAAA;AAAA,EACL,KAAA,EACE,ivBAAA;AAAA,EACF,IAAA,EAAM,iuBAAA;AAAA,EACN,KAAA,EACE,ivBAAA;AAAA,EACF,KAAA,EACE,ivBAAA;AAAA,EACF,QAAA,EACE,iyBAAA;AAAA,EACF,MAAA,EACE,iwBAAA;AAAA,EACF,MAAA,EACE,iwBAAA;AAAA,EACF,OAAA,EACE,ixBAAA;AAAA,EACF,OAAA,EACE,ixBAAA;AAAA,EACF,IAAA,EAAM,iuBAAA;AAAA,EACN,IAAA,EAAM;AACR;AAEO,IAAM,sBAAA,GAAyB;AAAA,EACpC,OAAA,EACE,wNAAA;AAAA,EACF,SAAA,EACE,8MAAA;AAAA,EACF,KAAA,EAAO;AACT;AAEO,IAAM,mBAAA,GAAsB;AAAA,EACjC,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,aAAA;AAAA,EACJ,EAAA,EAAI;AACN","file":"chunk-BIQZC26Q.js","sourcesContent":["export const zuiTabsListBase = \"flex flex-wrap items-center gap-1\";\n\nexport const zuiTabsListVariants = {\n default:\n \"bg-[var(--zui-tabs-list-default-bg,transparent)] dark:bg-[var(--zui-tabs-list-default-bg-dark,transparent)]\",\n underline:\n \"border-b-2 border-[color:var(--zui-tabs-list-underline-border,transparent)] dark:border-[color:var(--zui-tabs-list-underline-border-dark,transparent)]\",\n pills: \"rounded-md\",\n} as const;\n\nexport const zuiTabsListSizes = {\n sm: \"text-sm p-1\",\n md: \"text-base p-1.5\",\n lg: \"text-lg p-2\",\n} as const;\n\nexport const zuiTabsOrientations = {\n horizontal: \"flex-row\",\n vertical: \"flex-col\",\n} as const;\n\nexport const zuiTabsTriggerBase =\n \"px-3 py-1.5 rounded-md transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-tabs-trigger-ring-focus,var(--zui-focus-ring,oklch(44.6%_0.043_257.281)))] dark:focus-visible:ring-[var(--zui-tabs-trigger-ring-focus-dark,var(--zui-focus-ring-dark,oklch(86.9%_0.022_252.894)))]\";\n\nexport const zuiTabsTriggerAppearances = {\n default:\n \"bg-[var(--zui-tabs-trigger-default-bg,transparent)] dark:bg-[var(--zui-tabs-trigger-default-bg-dark,transparent)] text-[color:var(--zui-tabs-trigger-default-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-tabs-trigger-default-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]\",\n sky: \"bg-[var(--zui-tabs-trigger-sky-bg,var(--zui-color-sky,oklch(82.8%_0.111_230.318)))] text-[color:var(--zui-tabs-trigger-sky-fg,var(--zui-color-sky,oklch(39.1%_0.09_240.876)))] dark:bg-[var(--zui-tabs-trigger-sky-bg-dark,var(--zui-color-sky-dark,oklch(39.1%_0.09_240.876)))] dark:text-[color:var(--zui-tabs-trigger-sky-fg-dark,var(--zui-color-sky-dark,oklch(90.1%_0.058_230.902)))] data-[state=active]:bg-[var(--zui-tabs-trigger-sky-bg-active,var(--zui-color-sky,oklch(39.1%_0.09_240.876)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-sky-bg-active-dark,var(--zui-color-sky-dark,oklch(50%_0.134_242.749)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-sky-fg-active,var(--zui-color-sky,oklch(97.7%_0.013_236.62)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-sky-fg-active-dark,var(--zui-color-sky-dark,oklch(95.1%_0.026_236.824)))]\",\n rose: \"bg-[var(--zui-tabs-trigger-rose-bg,var(--zui-color-rose,oklch(81%_0.117_11.638)))] text-[color:var(--zui-tabs-trigger-rose-fg,var(--zui-color-rose,oklch(41%_0.159_10.272)))] dark:bg-[var(--zui-tabs-trigger-rose-bg-dark,var(--zui-color-rose-dark,oklch(41%_0.159_10.272)))] dark:text-[color:var(--zui-tabs-trigger-rose-fg-dark,var(--zui-color-rose-dark,oklch(89.2%_0.058_10.001)))] data-[state=active]:bg-[var(--zui-tabs-trigger-rose-bg-active,var(--zui-color-rose,oklch(41%_0.159_10.272)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-rose-bg-active-dark,var(--zui-color-rose-dark,oklch(51.4%_0.222_16.935)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-rose-fg-active,var(--zui-color-rose,oklch(96.9%_0.015_12.422)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-rose-fg-active-dark,var(--zui-color-rose-dark,oklch(94.1%_0.03_12.58)))]\",\n purple:\n \"bg-[var(--zui-tabs-trigger-purple-bg,var(--zui-color-purple,oklch(82.7%_0.119_306.383)))] text-[color:var(--zui-tabs-trigger-purple-fg,var(--zui-color-purple,oklch(38.1%_0.176_304.987)))] dark:bg-[var(--zui-tabs-trigger-purple-bg-dark,var(--zui-color-purple-dark,oklch(38.1%_0.176_304.987)))] dark:text-[color:var(--zui-tabs-trigger-purple-fg-dark,var(--zui-color-purple-dark,oklch(90.2%_0.063_306.703)))] data-[state=active]:bg-[var(--zui-tabs-trigger-purple-bg-active,var(--zui-color-purple,oklch(38.1%_0.176_304.987)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-purple-bg-active-dark,var(--zui-color-purple-dark,oklch(49.6%_0.265_301.924)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-purple-fg-active,var(--zui-color-purple,oklch(97.7%_0.014_308.299)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-purple-fg-active-dark,var(--zui-color-purple-dark,oklch(94.6%_0.033_307.174)))]\",\n pink: \"bg-[var(--zui-tabs-trigger-pink-bg,var(--zui-color-pink,oklch(82.3%_0.12_346.018)))] text-[color:var(--zui-tabs-trigger-pink-fg,var(--zui-color-pink,oklch(40.8%_0.153_2.432)))] dark:bg-[var(--zui-tabs-trigger-pink-bg-dark,var(--zui-color-pink-dark,oklch(40.8%_0.153_2.432)))] dark:text-[color:var(--zui-tabs-trigger-pink-fg-dark,var(--zui-color-pink-dark,oklch(89.9%_0.061_343.231)))] data-[state=active]:bg-[var(--zui-tabs-trigger-pink-bg-active,var(--zui-color-pink,oklch(40.8%_0.153_2.432)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-pink-bg-active-dark,var(--zui-color-pink-dark,oklch(52.5%_0.223_3.958)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-pink-fg-active,var(--zui-color-pink,oklch(97.1%_0.014_343.198)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-pink-fg-active-dark,var(--zui-color-pink-dark,oklch(94.8%_0.028_342.258)))]\",\n orange:\n \"bg-[var(--zui-tabs-trigger-orange-bg,var(--zui-color-orange,oklch(83.7%_0.128_66.29)))] text-[color:var(--zui-tabs-trigger-orange-fg,var(--zui-color-orange,oklch(40.8%_0.123_38.172)))] dark:bg-[var(--zui-tabs-trigger-orange-bg-dark,var(--zui-color-orange-dark,oklch(40.8%_0.123_38.172)))] dark:text-[color:var(--zui-tabs-trigger-orange-fg-dark,var(--zui-color-orange-dark,oklch(90.1%_0.076_70.697)))] data-[state=active]:bg-[var(--zui-tabs-trigger-orange-bg-active,var(--zui-color-orange,oklch(40.8%_0.123_38.172)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-orange-bg-active-dark,var(--zui-color-orange-dark,oklch(55.3%_0.195_38.402)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-orange-fg-active,var(--zui-color-orange,oklch(98%_0.016_73.684)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-orange-fg-active-dark,var(--zui-color-orange-dark,oklch(95.4%_0.038_75.164)))]\",\n yellow:\n \"bg-[var(--zui-tabs-trigger-yellow-bg,var(--zui-color-yellow,oklch(90.5%_0.182_98.111)))] text-[color:var(--zui-tabs-trigger-yellow-fg,var(--zui-color-yellow,oklch(42.1%_0.095_57.708)))] dark:bg-[var(--zui-tabs-trigger-yellow-bg-dark,var(--zui-color-yellow-dark,oklch(42.1%_0.095_57.708)))] dark:text-[color:var(--zui-tabs-trigger-yellow-fg-dark,var(--zui-color-yellow-dark,oklch(94.5%_0.129_101.54)))] data-[state=active]:bg-[var(--zui-tabs-trigger-yellow-bg-active,var(--zui-color-yellow,oklch(42.1%_0.095_57.708)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-yellow-bg-active-dark,var(--zui-color-yellow-dark,oklch(55.4%_0.135_66.442)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-yellow-fg-active,var(--zui-color-yellow,oklch(98.7%_0.026_102.212)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-yellow-fg-active-dark,var(--zui-color-yellow-dark,oklch(97.3%_0.071_103.193)))]\",\n teal: \"bg-[var(--zui-tabs-trigger-teal-bg,var(--zui-color-teal,oklch(85.5%_0.138_181.071)))] text-[color:var(--zui-tabs-trigger-teal-fg,var(--zui-color-teal,oklch(38.6%_0.063_188.416)))] dark:bg-[var(--zui-tabs-trigger-teal-bg-dark,var(--zui-color-teal-dark,oklch(38.6%_0.063_188.416)))] dark:text-[color:var(--zui-tabs-trigger-teal-fg-dark,var(--zui-color-teal-dark,oklch(91%_0.096_180.426)))] data-[state=active]:bg-[var(--zui-tabs-trigger-teal-bg-active,var(--zui-color-teal,oklch(38.6%_0.063_188.416)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-teal-bg-active-dark,var(--zui-color-teal-dark,oklch(51.1%_0.096_186.391)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-teal-fg-active,var(--zui-color-teal,oklch(98.4%_0.014_180.72)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-teal-fg-active-dark,var(--zui-color-teal-dark,oklch(95.3%_0.051_180.801)))]\",\n indigo:\n \"bg-[var(--zui-tabs-trigger-indigo-bg,var(--zui-color-indigo,oklch(78.5%_0.115_274.713)))] text-[color:var(--zui-tabs-trigger-indigo-fg,var(--zui-color-indigo,oklch(35.9%_0.144_278.697)))] dark:bg-[var(--zui-tabs-trigger-indigo-bg-dark,var(--zui-color-indigo-dark,oklch(35.9%_0.144_278.697)))] dark:text-[color:var(--zui-tabs-trigger-indigo-fg-dark,var(--zui-color-indigo-dark,oklch(87%_0.065_274.039)))] data-[state=active]:bg-[var(--zui-tabs-trigger-indigo-bg-active,var(--zui-color-indigo,oklch(35.9%_0.144_278.697)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-indigo-bg-active-dark,var(--zui-color-indigo-dark,oklch(45.7%_0.24_277.023)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-indigo-fg-active,var(--zui-color-indigo,oklch(96.2%_0.018_272.314)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-indigo-fg-active-dark,var(--zui-color-indigo-dark,oklch(93%_0.034_272.788)))]\",\n emerald:\n \"bg-[var(--zui-tabs-trigger-emerald-bg,var(--zui-color-emerald,oklch(84.5%_0.143_164.978)))] text-[color:var(--zui-tabs-trigger-emerald-fg,var(--zui-color-emerald,oklch(37.8%_0.077_168.94)))] dark:bg-[var(--zui-tabs-trigger-emerald-bg-dark,var(--zui-color-emerald-dark,oklch(37.8%_0.077_168.94)))] dark:text-[color:var(--zui-tabs-trigger-emerald-fg-dark,var(--zui-color-emerald-dark,oklch(90.5%_0.093_164.15)))] data-[state=active]:bg-[var(--zui-tabs-trigger-emerald-bg-active,var(--zui-color-emerald,oklch(37.8%_0.077_168.94)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-emerald-bg-active-dark,var(--zui-color-emerald-dark,oklch(50.8%_0.118_165.612)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-emerald-fg-active,var(--zui-color-emerald,oklch(97.9%_0.021_166.113)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-emerald-fg-active-dark,var(--zui-color-emerald-dark,oklch(95%_0.052_163.051)))]\",\n gray: \"bg-[var(--zui-tabs-trigger-gray-bg,var(--zui-color-gray,oklch(87.2%_0.01_258.338)))] text-[color:var(--zui-tabs-trigger-gray-fg,var(--zui-color-gray,oklch(21%_0.034_264.665)))] dark:bg-[var(--zui-tabs-trigger-gray-bg-dark,var(--zui-color-gray-dark,oklch(21%_0.034_264.665)))] dark:text-[color:var(--zui-tabs-trigger-gray-fg-dark,var(--zui-color-gray-dark,oklch(92.8%_0.006_264.531)))] data-[state=active]:bg-[var(--zui-tabs-trigger-gray-bg-active,var(--zui-color-gray,oklch(21%_0.034_264.665)))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-gray-bg-active-dark,var(--zui-color-gray-dark,oklch(37.3%_0.034_259.733)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-gray-fg-active,var(--zui-color-gray,oklch(98.5%_0.002_247.839)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-gray-fg-active-dark,var(--zui-color-gray-dark,oklch(96.7%_0.003_264.542)))]\",\n \"gradient-blue\":\n \"bg-linear-to-r from-[var(--zui-tabs-trigger-gradient-blue-from,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:from-[var(--zui-tabs-trigger-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(42.4%_0.199_265.638)))] to-[var(--zui-tabs-trigger-gradient-blue-to,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:to-[var(--zui-tabs-trigger-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(43.8%_0.218_303.724)))] text-[color:var(--zui-tabs-trigger-gradient-blue-fg,var(--zui-brand-fg,oklch(93.2%_0.032_255.585)))] dark:text-[color:var(--zui-tabs-trigger-gradient-blue-fg-dark,var(--zui-brand-fg-dark,oklch(97%_0.014_254.604)))] data-[state=active]:from-[var(--zui-tabs-trigger-gradient-blue-from-active,var(--zui-color-blue,oklch(54.6%_0.245_262.881)))] dark:data-[state=active]:from-[var(--zui-tabs-trigger-gradient-blue-from-active-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] data-[state=active]:to-[var(--zui-tabs-trigger-gradient-blue-to-active,var(--zui-color-purple,oklch(55.8%_0.288_302.321)))] dark:data-[state=active]:to-[var(--zui-tabs-trigger-gradient-blue-to-active-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-blue-fg-active,var(--zui-brand-fg,oklch(93.2%_0.032_255.585)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-blue-fg-active-dark,var(--zui-brand-fg-dark,oklch(93.2%_0.032_255.585)))]\",\n \"gradient-green\":\n \"bg-linear-to-r from-[var(--zui-tabs-trigger-gradient-green-from,var(--zui-color-green,oklch(44.8%_0.119_151.328)))] dark:from-[var(--zui-tabs-trigger-gradient-green-from-dark,var(--zui-color-green-dark,oklch(44.8%_0.119_151.328)))] to-[var(--zui-tabs-trigger-gradient-green-to,var(--zui-color-lime,oklch(45.3%_0.124_130.933)))] dark:to-[var(--zui-tabs-trigger-gradient-green-to-dark,var(--zui-color-lime-dark,oklch(45.3%_0.124_130.933)))] text-[color:var(--zui-tabs-trigger-gradient-green-fg,var(--zui-brand-fg,oklch(96.2%_0.044_156.743)))] dark:text-[color:var(--zui-tabs-trigger-gradient-green-fg-dark,var(--zui-brand-fg-dark,oklch(98.2%_0.018_155.826)))] data-[state=active]:from-[var(--zui-tabs-trigger-gradient-green-from-active,var(--zui-color-green,oklch(62.7%_0.194_149.214)))] dark:data-[state=active]:from-[var(--zui-tabs-trigger-gradient-green-from-active-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))] data-[state=active]:to-[var(--zui-tabs-trigger-gradient-green-to-active,var(--zui-color-lime,oklch(64.8%_0.2_131.684)))] dark:data-[state=active]:to-[var(--zui-tabs-trigger-gradient-green-to-active-dark,var(--zui-color-lime-dark,oklch(64.8%_0.2_131.684)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-green-fg-active,var(--zui-brand-fg,oklch(96.2%_0.044_156.743)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-green-fg-active-dark,var(--zui-brand-fg-dark,oklch(96.2%_0.044_156.743)))]\",\n \"gradient-red\":\n \"bg-linear-to-r from-[var(--zui-tabs-trigger-gradient-red-from,var(--zui-color-red,oklch(44.4%_0.177_26.899)))] dark:from-[var(--zui-tabs-trigger-gradient-red-from-dark,var(--zui-color-red-dark,oklch(44.4%_0.177_26.899)))] to-[var(--zui-tabs-trigger-gradient-red-to,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:to-[var(--zui-tabs-trigger-gradient-red-to-dark,var(--zui-color-pink-dark,oklch(45.9%_0.187_3.815)))] text-[color:var(--zui-tabs-trigger-gradient-red-fg,var(--zui-brand-fg,oklch(93.6%_0.032_17.717)))] dark:text-[color:var(--zui-tabs-trigger-gradient-red-fg-dark,var(--zui-brand-fg-dark,oklch(97.1%_0.013_17.38)))] data-[state=active]:from-[var(--zui-tabs-trigger-gradient-red-from-active,var(--zui-color-red,oklch(57.7%_0.245_27.325)))] dark:data-[state=active]:from-[var(--zui-tabs-trigger-gradient-red-from-active-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] data-[state=active]:to-[var(--zui-tabs-trigger-gradient-red-to-active,var(--zui-color-pink,oklch(59.2%_0.249_0.584)))] dark:data-[state=active]:to-[var(--zui-tabs-trigger-gradient-red-to-active-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-red-fg-active,var(--zui-brand-fg,oklch(93.6%_0.032_17.717)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-red-fg-active-dark,var(--zui-brand-fg-dark,oklch(93.6%_0.032_17.717)))]\",\n \"gradient-yellow\":\n \"bg-linear-to-r from-[var(--zui-tabs-trigger-gradient-yellow-from,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:from-[var(--zui-tabs-trigger-gradient-yellow-from-dark,var(--zui-color-yellow-dark,oklch(47.6%_0.114_61.907)))] to-[var(--zui-tabs-trigger-gradient-yellow-to,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:to-[var(--zui-tabs-trigger-gradient-yellow-to-dark,var(--zui-color-orange-dark,oklch(47%_0.157_37.304)))] text-[color:var(--zui-tabs-trigger-gradient-yellow-fg,var(--zui-brand-fg,oklch(97.3%_0.071_103.193)))] dark:text-[color:var(--zui-tabs-trigger-gradient-yellow-fg-dark,var(--zui-brand-fg-dark,oklch(98.7%_0.026_102.212)))] data-[state=active]:from-[var(--zui-tabs-trigger-gradient-yellow-from-active,var(--zui-color-yellow,oklch(68.1%_0.162_75.834)))] dark:data-[state=active]:from-[var(--zui-tabs-trigger-gradient-yellow-from-active-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] data-[state=active]:to-[var(--zui-tabs-trigger-gradient-yellow-to-active,var(--zui-color-orange,oklch(64.6%_0.222_41.116)))] dark:data-[state=active]:to-[var(--zui-tabs-trigger-gradient-yellow-to-active-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-yellow-fg-active,var(--zui-brand-fg,oklch(97.3%_0.071_103.193)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-yellow-fg-active-dark,var(--zui-brand-fg-dark,oklch(97.3%_0.071_103.193)))]\",\n \"gradient-purple\":\n \"bg-linear-to-r from-[var(--zui-tabs-trigger-gradient-purple-from,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:from-[var(--zui-tabs-trigger-gradient-purple-from-dark,var(--zui-color-purple-dark,oklch(43.8%_0.218_303.724)))] to-[var(--zui-tabs-trigger-gradient-purple-to,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:to-[var(--zui-tabs-trigger-gradient-purple-to-dark,var(--zui-color-pink-dark,oklch(45.9%_0.187_3.815)))] text-[color:var(--zui-tabs-trigger-gradient-purple-fg,var(--zui-brand-fg,oklch(94.6%_0.033_307.174)))] dark:text-[color:var(--zui-tabs-trigger-gradient-purple-fg-dark,var(--zui-brand-fg-dark,oklch(97.7%_0.014_308.299)))] data-[state=active]:from-[var(--zui-tabs-trigger-gradient-purple-from-active,var(--zui-color-purple,oklch(55.8%_0.288_302.321)))] dark:data-[state=active]:from-[var(--zui-tabs-trigger-gradient-purple-from-active-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] data-[state=active]:to-[var(--zui-tabs-trigger-gradient-purple-to-active,var(--zui-color-pink,oklch(59.2%_0.249_0.584)))] dark:data-[state=active]:to-[var(--zui-tabs-trigger-gradient-purple-to-active-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-purple-fg-active,var(--zui-brand-fg,oklch(94.6%_0.033_307.174)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-purple-fg-active-dark,var(--zui-brand-fg-dark,oklch(94.6%_0.033_307.174)))]\",\n \"gradient-teal\":\n \"bg-linear-to-r from-[var(--zui-tabs-trigger-gradient-teal-from,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:from-[var(--zui-tabs-trigger-gradient-teal-from-dark,var(--zui-color-teal-dark,oklch(43.7%_0.078_188.216)))] to-[var(--zui-tabs-trigger-gradient-teal-to,var(--zui-color-cyan,oklch(45%_0.085_224.283)))] dark:to-[var(--zui-tabs-trigger-gradient-teal-to-dark,var(--zui-color-cyan-dark,oklch(45%_0.085_224.283)))] text-[color:var(--zui-tabs-trigger-gradient-teal-fg,var(--zui-brand-fg,oklch(95.3%_0.051_180.801)))] dark:text-[color:var(--zui-tabs-trigger-gradient-teal-fg-dark,var(--zui-brand-fg-dark,oklch(98.4%_0.014_180.72)))] data-[state=active]:from-[var(--zui-tabs-trigger-gradient-teal-from-active,var(--zui-color-teal,oklch(60%_0.118_184.704)))] dark:data-[state=active]:from-[var(--zui-tabs-trigger-gradient-teal-from-active-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] data-[state=active]:to-[var(--zui-tabs-trigger-gradient-teal-to-active,var(--zui-color-cyan,oklch(60.9%_0.126_221.723)))] dark:data-[state=active]:to-[var(--zui-tabs-trigger-gradient-teal-to-active-dark,var(--zui-color-cyan-dark,oklch(60.9%_0.126_221.723)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-teal-fg-active,var(--zui-brand-fg,oklch(95.3%_0.051_180.801)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-teal-fg-active-dark,var(--zui-brand-fg-dark,oklch(95.3%_0.051_180.801)))]\",\n \"gradient-indigo\":\n \"bg-linear-to-r from-[var(--zui-tabs-trigger-gradient-indigo-from,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:from-[var(--zui-tabs-trigger-gradient-indigo-from-dark,var(--zui-color-indigo-dark,oklch(39.8%_0.195_277.366)))] to-[var(--zui-tabs-trigger-gradient-indigo-to,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:to-[var(--zui-tabs-trigger-gradient-indigo-to-dark,var(--zui-color-purple-dark,oklch(43.8%_0.218_303.724)))] text-[color:var(--zui-tabs-trigger-gradient-indigo-fg,var(--zui-brand-fg,oklch(93%_0.034_272.788)))] dark:text-[color:var(--zui-tabs-trigger-gradient-indigo-fg-dark,var(--zui-brand-fg-dark,oklch(96.2%_0.018_272.314)))] data-[state=active]:from-[var(--zui-tabs-trigger-gradient-indigo-from-active,var(--zui-color-indigo,oklch(51.1%_0.262_276.966)))] dark:data-[state=active]:from-[var(--zui-tabs-trigger-gradient-indigo-from-active-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] data-[state=active]:to-[var(--zui-tabs-trigger-gradient-indigo-to-active,var(--zui-color-purple,oklch(55.8%_0.288_302.321)))] dark:data-[state=active]:to-[var(--zui-tabs-trigger-gradient-indigo-to-active-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-indigo-fg-active,var(--zui-brand-fg,oklch(93%_0.034_272.788)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-indigo-fg-active-dark,var(--zui-brand-fg-dark,oklch(93%_0.034_272.788)))]\",\n \"gradient-pink\":\n \"bg-linear-to-r from-[var(--zui-tabs-trigger-gradient-pink-from,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:from-[var(--zui-tabs-trigger-gradient-pink-from-dark,var(--zui-color-pink-dark,oklch(45.9%_0.187_3.815)))] to-[var(--zui-tabs-trigger-gradient-pink-to,var(--zui-color-rose,oklch(45.5%_0.188_13.697)))] dark:to-[var(--zui-tabs-trigger-gradient-pink-to-dark,var(--zui-color-rose-dark,oklch(45.5%_0.188_13.697)))] text-[color:var(--zui-tabs-trigger-gradient-pink-fg,var(--zui-brand-fg,oklch(94.8%_0.028_342.258)))] dark:text-[color:var(--zui-tabs-trigger-gradient-pink-fg-dark,var(--zui-brand-fg-dark,oklch(97.1%_0.014_343.198)))] data-[state=active]:from-[var(--zui-tabs-trigger-gradient-pink-from-active,var(--zui-color-pink,oklch(59.2%_0.249_0.584)))] dark:data-[state=active]:from-[var(--zui-tabs-trigger-gradient-pink-from-active-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] data-[state=active]:to-[var(--zui-tabs-trigger-gradient-pink-to-active,var(--zui-color-rose,oklch(58.6%_0.253_17.585)))] dark:data-[state=active]:to-[var(--zui-tabs-trigger-gradient-pink-to-active-dark,var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-pink-fg-active,var(--zui-brand-fg,oklch(94.8%_0.028_342.258)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-pink-fg-active-dark,var(--zui-brand-fg-dark,oklch(94.8%_0.028_342.258)))]\",\n \"gradient-orange\":\n \"bg-linear-to-r from-[var(--zui-tabs-trigger-gradient-orange-from,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:from-[var(--zui-tabs-trigger-gradient-orange-from-dark,var(--zui-color-orange-dark,oklch(47%_0.157_37.304)))] to-[var(--zui-tabs-trigger-gradient-orange-to,var(--zui-color-red,oklch(44.4%_0.177_26.899)))] dark:to-[var(--zui-tabs-trigger-gradient-orange-to-dark,var(--zui-color-red-dark,oklch(44.4%_0.177_26.899)))] text-[color:var(--zui-tabs-trigger-gradient-orange-fg,var(--zui-brand-fg,oklch(95.4%_0.038_75.164)))] dark:text-[color:var(--zui-tabs-trigger-gradient-orange-fg-dark,var(--zui-brand-fg-dark,oklch(98%_0.016_73.684)))] data-[state=active]:from-[var(--zui-tabs-trigger-gradient-orange-from-active,var(--zui-color-orange,oklch(64.6%_0.222_41.116)))] dark:data-[state=active]:from-[var(--zui-tabs-trigger-gradient-orange-from-active-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] data-[state=active]:to-[var(--zui-tabs-trigger-gradient-orange-to-active,var(--zui-color-red,oklch(57.7%_0.245_27.325)))] dark:data-[state=active]:to-[var(--zui-tabs-trigger-gradient-orange-to-active-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-orange-fg-active,var(--zui-brand-fg,oklch(95.4%_0.038_75.164)))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-gradient-orange-fg-active-dark,var(--zui-brand-fg-dark,oklch(95.4%_0.038_75.164)))]\",\n blue: \"bg-[var(--zui-tabs-trigger-blue-bg,var(--zui-color-blue,#bfdbfe))] text-[color:var(--zui-tabs-trigger-blue-fg,var(--zui-color-blue,#1e40af))] dark:bg-[var(--zui-tabs-trigger-blue-bg-dark,var(--zui-color-blue-dark,#1e3a8a))] dark:text-[color:var(--zui-tabs-trigger-blue-fg-dark,var(--zui-color-blue-dark,#dbeafe))] data-[state=active]:bg-[var(--zui-tabs-trigger-blue-bg-active,var(--zui-color-blue,#2563eb))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-blue-bg-active-dark,var(--zui-color-blue-dark,#3b82f6))] data-[state=active]:text-[color:var(--zui-tabs-trigger-blue-fg-active,var(--zui-color-blue,#eff6ff))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-blue-fg-active-dark,var(--zui-color-blue-dark,#eff6ff))]\",\n cyan: \"bg-[var(--zui-tabs-trigger-cyan-bg,var(--zui-color-cyan,#cffafe))] text-[color:var(--zui-tabs-trigger-cyan-fg,var(--zui-color-cyan,#0e7490))] dark:bg-[var(--zui-tabs-trigger-cyan-bg-dark,var(--zui-color-cyan-dark,#164e63))] dark:text-[color:var(--zui-tabs-trigger-cyan-fg-dark,var(--zui-color-cyan-dark,#cffafe))] data-[state=active]:bg-[var(--zui-tabs-trigger-cyan-bg-active,var(--zui-color-cyan,#0891b2))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-cyan-bg-active-dark,var(--zui-color-cyan-dark,#06b6d4))] data-[state=active]:text-[color:var(--zui-tabs-trigger-cyan-fg-active,var(--zui-color-cyan,#ecfeff))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-cyan-fg-active-dark,var(--zui-color-cyan-dark,#ecfeff))]\",\n green:\n \"bg-[var(--zui-tabs-trigger-green-bg,var(--zui-color-green,#bbf7d0))] text-[color:var(--zui-tabs-trigger-green-fg,var(--zui-color-green,#166534))] dark:bg-[var(--zui-tabs-trigger-green-bg-dark,var(--zui-color-green-dark,#14532d))] dark:text-[color:var(--zui-tabs-trigger-green-fg-dark,var(--zui-color-green-dark,#dcfce7))] data-[state=active]:bg-[var(--zui-tabs-trigger-green-bg-active,var(--zui-color-green,#16a34a))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-green-bg-active-dark,var(--zui-color-green-dark,#22c55e))] data-[state=active]:text-[color:var(--zui-tabs-trigger-green-fg-active,var(--zui-color-green,#f0fdf4))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-green-fg-active-dark,var(--zui-color-green-dark,#f0fdf4))]\",\n lime: \"bg-[var(--zui-tabs-trigger-lime-bg,var(--zui-color-lime,#d9f99d))] text-[color:var(--zui-tabs-trigger-lime-fg,var(--zui-color-lime,#3f6212))] dark:bg-[var(--zui-tabs-trigger-lime-bg-dark,var(--zui-color-lime-dark,#365314))] dark:text-[color:var(--zui-tabs-trigger-lime-fg-dark,var(--zui-color-lime-dark,#ecfccb))] data-[state=active]:bg-[var(--zui-tabs-trigger-lime-bg-active,var(--zui-color-lime,#65a30d))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-lime-bg-active-dark,var(--zui-color-lime-dark,#84cc16))] data-[state=active]:text-[color:var(--zui-tabs-trigger-lime-fg-active,var(--zui-color-lime,#f7fee7))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-lime-fg-active-dark,var(--zui-color-lime-dark,#f7fee7))]\",\n mint: \"bg-[var(--zui-tabs-trigger-mint-bg,var(--zui-color-mint,#a7f3d0))] text-[color:var(--zui-tabs-trigger-mint-fg,var(--zui-color-mint,#047857))] dark:bg-[var(--zui-tabs-trigger-mint-bg-dark,var(--zui-color-mint-dark,#064e3b))] dark:text-[color:var(--zui-tabs-trigger-mint-fg-dark,var(--zui-color-mint-dark,#d1fae5))] data-[state=active]:bg-[var(--zui-tabs-trigger-mint-bg-active,var(--zui-color-mint,#10b981))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-mint-bg-active-dark,var(--zui-color-mint-dark,#34d399))] data-[state=active]:text-[color:var(--zui-tabs-trigger-mint-fg-active,var(--zui-color-mint,#ecfdf5))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-mint-fg-active-dark,var(--zui-color-mint-dark,#ecfdf5))]\",\n ocean:\n \"bg-[var(--zui-tabs-trigger-ocean-bg,var(--zui-color-ocean,#bae6fd))] text-[color:var(--zui-tabs-trigger-ocean-fg,var(--zui-color-ocean,#075985))] dark:bg-[var(--zui-tabs-trigger-ocean-bg-dark,var(--zui-color-ocean-dark,#0c4a6e))] dark:text-[color:var(--zui-tabs-trigger-ocean-fg-dark,var(--zui-color-ocean-dark,#e0f2fe))] data-[state=active]:bg-[var(--zui-tabs-trigger-ocean-bg-active,var(--zui-color-ocean,#0284c7))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-ocean-bg-active-dark,var(--zui-color-ocean-dark,#0ea5e9))] data-[state=active]:text-[color:var(--zui-tabs-trigger-ocean-fg-active,var(--zui-color-ocean,#f0f9ff))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-ocean-fg-active-dark,var(--zui-color-ocean-dark,#f0f9ff))]\",\n sapphire:\n \"bg-[var(--zui-tabs-trigger-sapphire-bg,var(--zui-color-sapphire,#bfdbfe))] text-[color:var(--zui-tabs-trigger-sapphire-fg,var(--zui-color-sapphire,#1e40af))] dark:bg-[var(--zui-tabs-trigger-sapphire-bg-dark,var(--zui-color-sapphire-dark,#1e3a8a))] dark:text-[color:var(--zui-tabs-trigger-sapphire-fg-dark,var(--zui-color-sapphire-dark,#dbeafe))] data-[state=active]:bg-[var(--zui-tabs-trigger-sapphire-bg-active,var(--zui-color-sapphire,#1d4ed8))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-sapphire-bg-active-dark,var(--zui-color-sapphire-dark,#3b82f6))] data-[state=active]:text-[color:var(--zui-tabs-trigger-sapphire-fg-active,var(--zui-color-sapphire,#eff6ff))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-sapphire-fg-active-dark,var(--zui-color-sapphire-dark,#eff6ff))]\",\n lavender:\n \"bg-[var(--zui-tabs-trigger-lavender-bg,var(--zui-color-lavender,#ddd6fe))] text-[color:var(--zui-tabs-trigger-lavender-fg,var(--zui-color-lavender,#6d28d9))] dark:bg-[var(--zui-tabs-trigger-lavender-bg-dark,var(--zui-color-lavender-dark,#4c1d95))] dark:text-[color:var(--zui-tabs-trigger-lavender-fg-dark,var(--zui-color-lavender-dark,#ede9fe))] data-[state=active]:bg-[var(--zui-tabs-trigger-lavender-bg-active,var(--zui-color-lavender,#8b5cf6))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-lavender-bg-active-dark,var(--zui-color-lavender-dark,#a78bfa))] data-[state=active]:text-[color:var(--zui-tabs-trigger-lavender-fg-active,var(--zui-color-lavender,#faf5ff))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-lavender-fg-active-dark,var(--zui-color-lavender-dark,#faf5ff))]\",\n ruby: \"bg-[var(--zui-tabs-trigger-ruby-bg,var(--zui-color-ruby,#fecdd3))] text-[color:var(--zui-tabs-trigger-ruby-fg,var(--zui-color-ruby,#9f1239))] dark:bg-[var(--zui-tabs-trigger-ruby-bg-dark,var(--zui-color-ruby-dark,#881337))] dark:text-[color:var(--zui-tabs-trigger-ruby-fg-dark,var(--zui-color-ruby-dark,#ffe4e6))] data-[state=active]:bg-[var(--zui-tabs-trigger-ruby-bg-active,var(--zui-color-ruby,#be123c))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-ruby-bg-active-dark,var(--zui-color-ruby-dark,#fb7185))] data-[state=active]:text-[color:var(--zui-tabs-trigger-ruby-fg-active,var(--zui-color-ruby,#fff1f2))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-ruby-fg-active-dark,var(--zui-color-ruby-dark,#fff1f2))]\",\n red: \"bg-[var(--zui-tabs-trigger-red-bg,var(--zui-color-red,#fecaca))] text-[color:var(--zui-tabs-trigger-red-fg,var(--zui-color-red,#991b1b))] dark:bg-[var(--zui-tabs-trigger-red-bg-dark,var(--zui-color-red-dark,#7f1d1d))] dark:text-[color:var(--zui-tabs-trigger-red-fg-dark,var(--zui-color-red-dark,#fee2e2))] data-[state=active]:bg-[var(--zui-tabs-trigger-red-bg-active,var(--zui-color-red,#dc2626))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-red-bg-active-dark,var(--zui-color-red-dark,#ef4444))] data-[state=active]:text-[color:var(--zui-tabs-trigger-red-fg-active,var(--zui-color-red,#fef2f2))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-red-fg-active-dark,var(--zui-color-red-dark,#fef2f2))]\",\n slate:\n \"bg-[var(--zui-tabs-trigger-slate-bg,var(--zui-color-slate,#e2e8f0))] text-[color:var(--zui-tabs-trigger-slate-fg,var(--zui-color-slate,#334155))] dark:bg-[var(--zui-tabs-trigger-slate-bg-dark,var(--zui-color-slate-dark,#334155))] dark:text-[color:var(--zui-tabs-trigger-slate-fg-dark,var(--zui-color-slate-dark,#e2e8f0))] data-[state=active]:bg-[var(--zui-tabs-trigger-slate-bg-active,var(--zui-color-slate,#475569))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-slate-bg-active-dark,var(--zui-color-slate-dark,#64748b))] data-[state=active]:text-[color:var(--zui-tabs-trigger-slate-fg-active,var(--zui-color-slate,#f8fafc))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-slate-fg-active-dark,var(--zui-color-slate-dark,#f8fafc))]\",\n zinc: \"bg-[var(--zui-tabs-trigger-zinc-bg,var(--zui-color-zinc,#e4e4e7))] text-[color:var(--zui-tabs-trigger-zinc-fg,var(--zui-color-zinc,#3f3f46))] dark:bg-[var(--zui-tabs-trigger-zinc-bg-dark,var(--zui-color-zinc-dark,#3f3f46))] dark:text-[color:var(--zui-tabs-trigger-zinc-fg-dark,var(--zui-color-zinc-dark,#e4e4e7))] data-[state=active]:bg-[var(--zui-tabs-trigger-zinc-bg-active,var(--zui-color-zinc,#52525b))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-zinc-bg-active-dark,var(--zui-color-zinc-dark,#71717a))] data-[state=active]:text-[color:var(--zui-tabs-trigger-zinc-fg-active,var(--zui-color-zinc,#fafafa))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-zinc-fg-active-dark,var(--zui-color-zinc-dark,#fafafa))]\",\n stone:\n \"bg-[var(--zui-tabs-trigger-stone-bg,var(--zui-color-stone,#e7e5e4))] text-[color:var(--zui-tabs-trigger-stone-fg,var(--zui-color-stone,#44403c))] dark:bg-[var(--zui-tabs-trigger-stone-bg-dark,var(--zui-color-stone-dark,#44403c))] dark:text-[color:var(--zui-tabs-trigger-stone-fg-dark,var(--zui-color-stone-dark,#e7e5e4))] data-[state=active]:bg-[var(--zui-tabs-trigger-stone-bg-active,var(--zui-color-stone,#57534e))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-stone-bg-active-dark,var(--zui-color-stone-dark,#78716c))] data-[state=active]:text-[color:var(--zui-tabs-trigger-stone-fg-active,var(--zui-color-stone,#fafaf9))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-stone-fg-active-dark,var(--zui-color-stone-dark,#fafaf9))]\",\n royal:\n \"bg-[var(--zui-tabs-trigger-royal-bg,var(--zui-color-royal,#c7d2fe))] text-[color:var(--zui-tabs-trigger-royal-fg,var(--zui-color-royal,#3730a3))] dark:bg-[var(--zui-tabs-trigger-royal-bg-dark,var(--zui-color-royal-dark,#312e81))] dark:text-[color:var(--zui-tabs-trigger-royal-fg-dark,var(--zui-color-royal-dark,#e0e7ff))] data-[state=active]:bg-[var(--zui-tabs-trigger-royal-bg-active,var(--zui-color-royal,#4338ca))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-royal-bg-active-dark,var(--zui-color-royal-dark,#6366f1))] data-[state=active]:text-[color:var(--zui-tabs-trigger-royal-fg-active,var(--zui-color-royal,#eef2ff))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-royal-fg-active-dark,var(--zui-color-royal-dark,#eef2ff))]\",\n electric:\n \"bg-[var(--zui-tabs-trigger-electric-bg,var(--zui-color-electric,#bae6fd))] text-[color:var(--zui-tabs-trigger-electric-fg,var(--zui-color-electric,#0369a1))] dark:bg-[var(--zui-tabs-trigger-electric-bg-dark,var(--zui-color-electric-dark,#075985))] dark:text-[color:var(--zui-tabs-trigger-electric-fg-dark,var(--zui-color-electric-dark,#e0f2fe))] data-[state=active]:bg-[var(--zui-tabs-trigger-electric-bg-active,var(--zui-color-electric,#0ea5e9))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-electric-bg-active-dark,var(--zui-color-electric-dark,#38bdf8))] data-[state=active]:text-[color:var(--zui-tabs-trigger-electric-fg-active,var(--zui-color-electric,#f0f9ff))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-electric-fg-active-dark,var(--zui-color-electric-dark,#f0f9ff))]\",\n forest:\n \"bg-[var(--zui-tabs-trigger-forest-bg,var(--zui-color-forest,#bbf7d0))] text-[color:var(--zui-tabs-trigger-forest-fg,var(--zui-color-forest,#14532d))] dark:bg-[var(--zui-tabs-trigger-forest-bg-dark,var(--zui-color-forest-dark,#052e16))] dark:text-[color:var(--zui-tabs-trigger-forest-fg-dark,var(--zui-color-forest-dark,#dcfce7))] data-[state=active]:bg-[var(--zui-tabs-trigger-forest-bg-active,var(--zui-color-forest,#166534))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-forest-bg-active-dark,var(--zui-color-forest-dark,#16a34a))] data-[state=active]:text-[color:var(--zui-tabs-trigger-forest-fg-active,var(--zui-color-forest,#f0fdf4))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-forest-fg-active-dark,var(--zui-color-forest-dark,#f0fdf4))]\",\n sunset:\n \"bg-[var(--zui-tabs-trigger-sunset-bg,var(--zui-color-sunset,#fed7aa))] text-[color:var(--zui-tabs-trigger-sunset-fg,var(--zui-color-sunset,#9a3412))] dark:bg-[var(--zui-tabs-trigger-sunset-bg-dark,var(--zui-color-sunset-dark,#7c2d12))] dark:text-[color:var(--zui-tabs-trigger-sunset-fg-dark,var(--zui-color-sunset-dark,#ffedd5))] data-[state=active]:bg-[var(--zui-tabs-trigger-sunset-bg-active,var(--zui-color-sunset,#ea580c))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-sunset-bg-active-dark,var(--zui-color-sunset-dark,#f97316))] data-[state=active]:text-[color:var(--zui-tabs-trigger-sunset-fg-active,var(--zui-color-sunset,#fff7ed))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-sunset-fg-active-dark,var(--zui-color-sunset-dark,#fff7ed))]\",\n magenta:\n \"bg-[var(--zui-tabs-trigger-magenta-bg,var(--zui-color-magenta,#f5d0fe))] text-[color:var(--zui-tabs-trigger-magenta-fg,var(--zui-color-magenta,#a21caf))] dark:bg-[var(--zui-tabs-trigger-magenta-bg-dark,var(--zui-color-magenta-dark,#701a75))] dark:text-[color:var(--zui-tabs-trigger-magenta-fg-dark,var(--zui-color-magenta-dark,#fae8ff))] data-[state=active]:bg-[var(--zui-tabs-trigger-magenta-bg-active,var(--zui-color-magenta,#c026d3))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-magenta-bg-active-dark,var(--zui-color-magenta-dark,#d946ef))] data-[state=active]:text-[color:var(--zui-tabs-trigger-magenta-fg-active,var(--zui-color-magenta,#fdf4ff))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-magenta-fg-active-dark,var(--zui-color-magenta-dark,#fdf4ff))]\",\n crimson:\n \"bg-[var(--zui-tabs-trigger-crimson-bg,var(--zui-color-crimson,#fecaca))] text-[color:var(--zui-tabs-trigger-crimson-fg,var(--zui-color-crimson,#991b1b))] dark:bg-[var(--zui-tabs-trigger-crimson-bg-dark,var(--zui-color-crimson-dark,#7f1d1d))] dark:text-[color:var(--zui-tabs-trigger-crimson-fg-dark,var(--zui-color-crimson-dark,#fee2e2))] data-[state=active]:bg-[var(--zui-tabs-trigger-crimson-bg-active,var(--zui-color-crimson,#b91c1c))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-crimson-bg-active-dark,var(--zui-color-crimson-dark,#ef4444))] data-[state=active]:text-[color:var(--zui-tabs-trigger-crimson-fg-active,var(--zui-color-crimson,#fef2f2))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-crimson-fg-active-dark,var(--zui-color-crimson-dark,#fef2f2))]\",\n aqua: \"bg-[var(--zui-tabs-trigger-aqua-bg,var(--zui-color-aqua,#ccfbf1))] text-[color:var(--zui-tabs-trigger-aqua-fg,var(--zui-color-aqua,#0f766e))] dark:bg-[var(--zui-tabs-trigger-aqua-bg-dark,var(--zui-color-aqua-dark,#134e4a))] dark:text-[color:var(--zui-tabs-trigger-aqua-fg-dark,var(--zui-color-aqua-dark,#ccfbf1))] data-[state=active]:bg-[var(--zui-tabs-trigger-aqua-bg-active,var(--zui-color-aqua,#0f766e))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-aqua-bg-active-dark,var(--zui-color-aqua-dark,#14b8a6))] data-[state=active]:text-[color:var(--zui-tabs-trigger-aqua-fg-active,var(--zui-color-aqua,#f0fdfa))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-aqua-fg-active-dark,var(--zui-color-aqua-dark,#f0fdfa))]\",\n plum: \"bg-[var(--zui-tabs-trigger-plum-bg,var(--zui-color-plum,#e9d5ff))] text-[color:var(--zui-tabs-trigger-plum-fg,var(--zui-color-plum,#6b21a8))] dark:bg-[var(--zui-tabs-trigger-plum-bg-dark,var(--zui-color-plum-dark,#581c87))] dark:text-[color:var(--zui-tabs-trigger-plum-fg-dark,var(--zui-color-plum-dark,#f3e8ff))] data-[state=active]:bg-[var(--zui-tabs-trigger-plum-bg-active,var(--zui-color-plum,#7e22ce))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-plum-bg-active-dark,var(--zui-color-plum-dark,#9333ea))] data-[state=active]:text-[color:var(--zui-tabs-trigger-plum-fg-active,var(--zui-color-plum,#faf5ff))] dark:data-[state=active]:text-[color:var(--zui-tabs-trigger-plum-fg-active-dark,var(--zui-color-plum-dark,#faf5ff))]\",\n} as const;\n\nexport const zuiTabsTriggerVariants = {\n default:\n \"data-[state=active]:bg-[var(--zui-tabs-trigger-default-bg-active,var(--zui-surface-muted,#ffffff))] dark:data-[state=active]:bg-[var(--zui-tabs-trigger-default-bg-active-dark,var(--zui-surface-muted-dark,#020617))]\",\n underline:\n \"border-b-2 border-[color:var(--zui-tabs-trigger-underline-border,transparent)] dark:border-[color:var(--zui-tabs-trigger-underline-border-dark,transparent)] data-[state=active]:border-current rounded-none\",\n pills: \"\",\n} as const;\n\nexport const zuiTabsTriggerSizes = {\n sm: \"px-2 py-1\",\n md: \"px-3 py-1.5\",\n lg: \"px-4 py-2\",\n} as const;\n"]}
package/dist/chunk-R4D5V7NT.js DELETED
@@ -1,19 +0,0 @@
1
- 'use strict';
2
-
3
- var chunkV2LI5QZD_js = require('./chunk-V2LI5QZD.js');
4
- var classVarianceAuthority = require('class-variance-authority');
5
-
6
- var buttonVariants = classVarianceAuthority.cva(chunkV2LI5QZD_js.zuiButtonBase, {
7
- variants: {
8
- appearance: chunkV2LI5QZD_js.zuiButtonAppearances,
9
- size: chunkV2LI5QZD_js.zuiButtonSizes
10
- },
11
- defaultVariants: {
12
- appearance: "default",
13
- size: "md"
14
- }
15
- });
16
-
17
- exports.buttonVariants = buttonVariants;
18
- //# sourceMappingURL=chunk-R4D5V7NT.js.map
19
- //# sourceMappingURL=chunk-R4D5V7NT.js.map