@zentauri-ui/zentauri-components 1.7.5 → 1.7.6
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.
- package/README.md +8 -5
- package/cli/registry.json +2 -0
- package/dist/chunk-DEZRB6DS.mjs +83 -0
- package/dist/chunk-DEZRB6DS.mjs.map +1 -0
- package/dist/chunk-V5JTDRV5.mjs +278 -0
- package/dist/chunk-V5JTDRV5.mjs.map +1 -0
- package/dist/chunk-Z4KHAD6Y.js +295 -0
- package/dist/chunk-Z4KHAD6Y.js.map +1 -0
- package/dist/chunk-ZX2IBIZT.js +92 -0
- package/dist/chunk-ZX2IBIZT.js.map +1 -0
- package/dist/design-system/context-menu.d.ts +41 -0
- package/dist/design-system/context-menu.d.ts.map +1 -0
- package/dist/design-system/index.d.ts +2 -0
- package/dist/design-system/index.d.ts.map +1 -1
- package/dist/design-system/timeline.d.ts +56 -0
- package/dist/design-system/timeline.d.ts.map +1 -0
- package/dist/ui/context-menu/context-menu.d.ts +11 -0
- package/dist/ui/context-menu/context-menu.d.ts.map +1 -0
- package/dist/ui/context-menu/index.d.ts +4 -0
- package/dist/ui/context-menu/index.d.ts.map +1 -0
- package/dist/ui/context-menu/types.d.ts +81 -0
- package/dist/ui/context-menu/types.d.ts.map +1 -0
- package/dist/ui/context-menu/variants.d.ts +7 -0
- package/dist/ui/context-menu/variants.d.ts.map +1 -0
- package/dist/ui/context-menu.js +500 -0
- package/dist/ui/context-menu.js.map +1 -0
- package/dist/ui/context-menu.mjs +488 -0
- package/dist/ui/context-menu.mjs.map +1 -0
- package/dist/ui/dropdown.js +9 -89
- package/dist/ui/dropdown.js.map +1 -1
- package/dist/ui/dropdown.mjs +1 -81
- package/dist/ui/dropdown.mjs.map +1 -1
- package/dist/ui/scroll-area/scroll-area.d.ts.map +1 -1
- package/dist/ui/scroll-area.js.map +1 -1
- package/dist/ui/scroll-area.mjs.map +1 -1
- package/dist/ui/timeline/animated/animations.d.ts +8 -0
- package/dist/ui/timeline/animated/animations.d.ts.map +1 -0
- package/dist/ui/timeline/animated/index.d.ts +6 -0
- package/dist/ui/timeline/animated/index.d.ts.map +1 -0
- package/dist/ui/timeline/animated/timeline-item-animated.d.ts +8 -0
- package/dist/ui/timeline/animated/timeline-item-animated.d.ts.map +1 -0
- package/dist/ui/timeline/animated/types.d.ts +12 -0
- package/dist/ui/timeline/animated/types.d.ts.map +1 -0
- package/dist/ui/timeline/animated.js +94 -0
- package/dist/ui/timeline/animated.js.map +1 -0
- package/dist/ui/timeline/animated.mjs +71 -0
- package/dist/ui/timeline/animated.mjs.map +1 -0
- package/dist/ui/timeline/index.d.ts +4 -0
- package/dist/ui/timeline/index.d.ts.map +1 -0
- package/dist/ui/timeline/timeline-base.d.ts +37 -0
- package/dist/ui/timeline/timeline-base.d.ts.map +1 -0
- package/dist/ui/timeline/timeline.d.ts +8 -0
- package/dist/ui/timeline/timeline.d.ts.map +1 -0
- package/dist/ui/timeline/types.d.ts +38 -0
- package/dist/ui/timeline/types.d.ts.map +1 -0
- package/dist/ui/timeline/variants.d.ts +19 -0
- package/dist/ui/timeline/variants.d.ts.map +1 -0
- package/dist/ui/timeline.js +63 -0
- package/dist/ui/timeline.js.map +1 -0
- package/dist/ui/timeline.mjs +14 -0
- package/dist/ui/timeline.mjs.map +1 -0
- package/package.json +1 -1
- package/src/design-system/context-menu.ts +44 -0
- package/src/design-system/index.ts +2 -0
- package/src/design-system/timeline.ts +87 -0
- package/src/ui/context-menu/context-menu.test.tsx +176 -0
- package/src/ui/context-menu/context-menu.tsx +536 -0
- package/src/ui/context-menu/index.ts +29 -0
- package/src/ui/context-menu/types.ts +110 -0
- package/src/ui/context-menu/variants.ts +26 -0
- package/src/ui/scroll-area/scroll-area.tsx +0 -2
- package/src/ui/timeline/animated/animations.ts +16 -0
- package/src/ui/timeline/animated/index.ts +22 -0
- package/src/ui/timeline/animated/timeline-item-animated.tsx +76 -0
- package/src/ui/timeline/animated/types.ts +21 -0
- package/src/ui/timeline/index.ts +30 -0
- package/src/ui/timeline/timeline-base.tsx +232 -0
- package/src/ui/timeline/timeline.test.tsx +262 -0
- package/src/ui/timeline/timeline.tsx +24 -0
- package/src/ui/timeline/types.ts +61 -0
- package/src/ui/timeline/variants.ts +60 -0
package/dist/ui/dropdown.js
CHANGED
|
@@ -2,116 +2,36 @@
|
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
var chunk7DCFVPWN_js = require('../chunk-7DCFVPWN.js');
|
|
5
|
+
var chunkZX2IBIZT_js = require('../chunk-ZX2IBIZT.js');
|
|
5
6
|
var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
|
|
6
7
|
var react = require('react');
|
|
7
8
|
var fi = require('react-icons/fi');
|
|
8
9
|
var classVarianceAuthority = require('class-variance-authority');
|
|
9
10
|
var jsxRuntime = require('react/jsx-runtime');
|
|
10
11
|
|
|
11
|
-
|
|
12
|
-
var zuiDropdownTriggerBase = "inline-flex items-center justify-between rounded-md font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-dropdown-trigger-ring-focus,oklch(55.1%_0.027_264.364_/_0.6))] dark:focus-visible:ring-[var(--zui-dropdown-trigger-ring-focus-dark,oklch(55.1%_0.027_264.364_/_0.6))] cursor-pointer";
|
|
13
|
-
var zuiDropdownTriggerVariants = {
|
|
14
|
-
default: "bg-[var(--zui-dropdown-trigger-default-bg,oklch(92.8%_0.006_264.531))] dark:bg-[var(--zui-dropdown-trigger-default-bg-dark,oklch(21%_0.034_264.665))] text-[color:var(--zui-dropdown-trigger-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-dropdown-trigger-default-fg-dark,#ffffff)]",
|
|
15
|
-
outline: "border border-[color:var(--zui-dropdown-trigger-outline-border,oklch(37.3%_0.034_259.733))] dark:border-[color:var(--zui-dropdown-trigger-outline-border-dark,oklch(87.2%_0.01_258.338))] text-[color:var(--zui-dropdown-trigger-outline-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-trigger-outline-fg-dark,oklch(96.7%_0.003_264.542))]",
|
|
16
|
-
ghost: "bg-[var(--zui-dropdown-trigger-ghost-bg,transparent)] dark:bg-[var(--zui-dropdown-trigger-ghost-bg-dark,transparent)] text-[color:var(--zui-dropdown-trigger-ghost-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-trigger-ghost-fg-dark,oklch(96.7%_0.003_264.542))]",
|
|
17
|
-
white: "bg-[var(--zui-dropdown-trigger-white-bg,#ffffff)] dark:bg-[var(--zui-dropdown-trigger-white-bg-dark,#ffffff)] text-[color:var(--zui-dropdown-trigger-white-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-trigger-white-fg-dark,oklch(21%_0.034_264.665))]",
|
|
18
|
-
black: "bg-[var(--zui-dropdown-trigger-black-bg,#000000)] dark:bg-[var(--zui-dropdown-trigger-black-bg-dark,#000000)] text-[color:var(--zui-dropdown-trigger-black-fg,#ffffff)] dark:text-[color:var(--zui-dropdown-trigger-black-fg-dark,#ffffff)]",
|
|
19
|
-
sky: "border border-[color:var(--zui-dropdown-trigger-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-dropdown-trigger-sky-border-dark,oklch(58.8%_0.158_241.966))] text-[color:var(--zui-dropdown-trigger-sky-fg,oklch(44.3%_0.11_240.79))] dark:text-[color:var(--zui-dropdown-trigger-sky-fg-dark,oklch(58.8%_0.158_241.966))]",
|
|
20
|
-
rose: "border border-[color:var(--zui-dropdown-trigger-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-dropdown-trigger-rose-border-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-dropdown-trigger-rose-fg,oklch(45.5%_0.188_13.697))] dark:text-[color:var(--zui-dropdown-trigger-rose-fg-dark,oklch(58.6%_0.253_17.585))]",
|
|
21
|
-
purple: "border border-[color:var(--zui-dropdown-trigger-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-dropdown-trigger-purple-border-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-dropdown-trigger-purple-fg,oklch(43.8%_0.218_303.724))] dark:text-[color:var(--zui-dropdown-trigger-purple-fg-dark,oklch(55.8%_0.288_302.321))]",
|
|
22
|
-
pink: "border border-[color:var(--zui-dropdown-trigger-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-dropdown-trigger-pink-border-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-dropdown-trigger-pink-fg,oklch(45.9%_0.187_3.815))] dark:text-[color:var(--zui-dropdown-trigger-pink-fg-dark,oklch(59.2%_0.249_0.584))]",
|
|
23
|
-
orange: "border border-[color:var(--zui-dropdown-trigger-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-dropdown-trigger-orange-border-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-dropdown-trigger-orange-fg,oklch(47%_0.157_37.304))] dark:text-[color:var(--zui-dropdown-trigger-orange-fg-dark,oklch(64.6%_0.222_41.116))]",
|
|
24
|
-
yellow: "border border-[color:var(--zui-dropdown-trigger-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-dropdown-trigger-yellow-border-dark,oklch(68.1%_0.162_75.834))] text-[color:var(--zui-dropdown-trigger-yellow-fg,oklch(47.6%_0.114_61.907))] dark:text-[color:var(--zui-dropdown-trigger-yellow-fg-dark,oklch(68.1%_0.162_75.834))]",
|
|
25
|
-
teal: "border border-[color:var(--zui-dropdown-trigger-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-dropdown-trigger-teal-border-dark,oklch(60%_0.118_184.704))] text-[color:var(--zui-dropdown-trigger-teal-fg,oklch(43.7%_0.078_188.216))] dark:text-[color:var(--zui-dropdown-trigger-teal-fg-dark,oklch(60%_0.118_184.704))]",
|
|
26
|
-
indigo: "border border-[color:var(--zui-dropdown-trigger-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-dropdown-trigger-indigo-border-dark,oklch(51.1%_0.262_276.966))] text-[color:var(--zui-dropdown-trigger-indigo-fg,oklch(39.8%_0.195_277.366))] dark:text-[color:var(--zui-dropdown-trigger-indigo-fg-dark,oklch(51.1%_0.262_276.966))]",
|
|
27
|
-
emerald: "border border-[color:var(--zui-dropdown-trigger-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-dropdown-trigger-emerald-border-dark,oklch(59.6%_0.145_163.225))] text-[color:var(--zui-dropdown-trigger-emerald-fg,oklch(43.2%_0.095_166.913))] dark:text-[color:var(--zui-dropdown-trigger-emerald-fg-dark,oklch(59.6%_0.145_163.225))]",
|
|
28
|
-
gray: "border border-[color:var(--zui-dropdown-trigger-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-dropdown-trigger-gray-border-dark,oklch(44.6%_0.03_256.802))] text-[color:var(--zui-dropdown-trigger-gray-fg,oklch(27.8%_0.033_256.848))] dark:text-[color:var(--zui-dropdown-trigger-gray-fg-dark,oklch(44.6%_0.03_256.802))]",
|
|
29
|
-
amber: "border border-[color:var(--zui-dropdown-trigger-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-dropdown-trigger-amber-border-dark,oklch(66.6%_0.179_58.318))] text-[color:var(--zui-dropdown-trigger-amber-fg,oklch(47.3%_0.137_46.201))] dark:text-[color:var(--zui-dropdown-trigger-amber-fg-dark,oklch(66.6%_0.179_58.318))]",
|
|
30
|
-
violet: "border border-[color:var(--zui-dropdown-trigger-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-dropdown-trigger-violet-border-dark,oklch(54.1%_0.281_293.009))] text-[color:var(--zui-dropdown-trigger-violet-fg,oklch(43.2%_0.232_292.759))] dark:text-[color:var(--zui-dropdown-trigger-violet-fg-dark,oklch(54.1%_0.281_293.009))]",
|
|
31
|
-
"gradient-blue": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-dropdown-trigger-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-dropdown-trigger-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-trigger-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-dropdown-trigger-gradient-blue-fg,oklch(88.2%_0.059_254.128))] dark:text-[color:var(--zui-dropdown-trigger-gradient-blue-fg-dark,oklch(88.2%_0.059_254.128))]",
|
|
32
|
-
"gradient-green": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-dropdown-trigger-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-dropdown-trigger-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-dropdown-trigger-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] text-[color:var(--zui-dropdown-trigger-gradient-green-fg,oklch(92.5%_0.084_155.995))] dark:text-[color:var(--zui-dropdown-trigger-gradient-green-fg-dark,oklch(92.5%_0.084_155.995))]",
|
|
33
|
-
"gradient-red": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-dropdown-trigger-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-dropdown-trigger-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-trigger-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-dropdown-trigger-gradient-red-fg,oklch(88.5%_0.062_18.334))] dark:text-[color:var(--zui-dropdown-trigger-gradient-red-fg-dark,oklch(88.5%_0.062_18.334))]",
|
|
34
|
-
"gradient-yellow": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-dropdown-trigger-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-dropdown-trigger-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-dropdown-trigger-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-dropdown-trigger-gradient-yellow-fg,oklch(94.5%_0.129_101.54))] dark:text-[color:var(--zui-dropdown-trigger-gradient-yellow-fg-dark,oklch(94.5%_0.129_101.54))]",
|
|
35
|
-
"gradient-purple": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-dropdown-trigger-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-dropdown-trigger-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-trigger-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-dropdown-trigger-gradient-purple-fg,oklch(90.2%_0.063_306.703))] dark:text-[color:var(--zui-dropdown-trigger-gradient-purple-fg-dark,oklch(90.2%_0.063_306.703))]",
|
|
36
|
-
"gradient-teal": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-dropdown-trigger-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-dropdown-trigger-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-dropdown-trigger-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] text-[color:var(--zui-dropdown-trigger-gradient-teal-fg,oklch(91%_0.096_180.426))] dark:text-[color:var(--zui-dropdown-trigger-gradient-teal-fg-dark,oklch(91%_0.096_180.426))]",
|
|
37
|
-
"gradient-indigo": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-dropdown-trigger-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-dropdown-trigger-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-trigger-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-dropdown-trigger-gradient-indigo-fg,oklch(87%_0.065_274.039))] dark:text-[color:var(--zui-dropdown-trigger-gradient-indigo-fg-dark,oklch(87%_0.065_274.039))]",
|
|
38
|
-
"gradient-pink": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-dropdown-trigger-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-dropdown-trigger-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-dropdown-trigger-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-dropdown-trigger-gradient-pink-fg,oklch(89.9%_0.061_343.231))] dark:text-[color:var(--zui-dropdown-trigger-gradient-pink-fg-dark,oklch(89.9%_0.061_343.231))]",
|
|
39
|
-
"gradient-orange": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-dropdown-trigger-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-dropdown-trigger-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-dropdown-trigger-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] text-[color:var(--zui-dropdown-trigger-gradient-orange-fg,oklch(90.1%_0.076_70.697))] dark:text-[color:var(--zui-dropdown-trigger-gradient-orange-fg-dark,oklch(90.1%_0.076_70.697))]"
|
|
40
|
-
};
|
|
41
|
-
var zuiDropdownTriggerSizes = {
|
|
42
|
-
sm: "px-2 py-1 text-sm",
|
|
43
|
-
md: "px-3 py-2 text-base",
|
|
44
|
-
lg: "px-4 py-3 text-lg"
|
|
45
|
-
};
|
|
46
|
-
var zuiDropdownContentBase = "absolute min-w-[200px] rounded-md p-2 shadow-md z-50 border border-[color:var(--zui-dropdown-content-border,oklch(20.8%_0.042_265.755_/_0.1))] dark:border-[color:var(--zui-dropdown-content-border-dark,#ffffff1a)] bg-[var(--zui-dropdown-content-bg,oklch(96.8%_0.007_247.896))] dark:bg-[var(--zui-dropdown-content-bg-dark,oklch(20.8%_0.042_265.755))] text-[color:var(--zui-dropdown-content-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-dropdown-content-fg-dark,oklch(96.8%_0.007_247.896))] shadow-lg rounded-lg";
|
|
47
|
-
var zuiDropdownPlacements = {
|
|
48
|
-
top: "bottom-full mb-2",
|
|
49
|
-
bottom: "top-full mt-2",
|
|
50
|
-
left: "right-full mr-2",
|
|
51
|
-
right: "left-full ml-2"
|
|
52
|
-
};
|
|
53
|
-
var zuiDropdownSpacing = {
|
|
54
|
-
none: "space-y-0",
|
|
55
|
-
default: "space-y-1",
|
|
56
|
-
sm: "space-y-2",
|
|
57
|
-
md: "space-y-3",
|
|
58
|
-
lg: "space-y-4",
|
|
59
|
-
xl: "space-y-5"
|
|
60
|
-
};
|
|
61
|
-
var zuiDropdownItemBase = "flex items-center justify-between px-3 py-2 text-sm cursor-pointer rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-dropdown-item-ring-focus,oklch(55.1%_0.027_264.364_/_0.6))] dark:focus-visible:ring-[var(--zui-dropdown-item-ring-focus-dark,oklch(55.1%_0.027_264.364_/_0.6))] font-semibold";
|
|
62
|
-
var zuiDropdownItemVariants = {
|
|
63
|
-
default: "hover:bg-[var(--zui-dropdown-item-default-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-default-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-default-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-default-fg-hover-dark,oklch(21%_0.034_264.665))] text-[color:var(--zui-dropdown-item-default-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-default-fg-dark,oklch(96.7%_0.003_264.542))]",
|
|
64
|
-
outline: "hover:bg-[var(--zui-dropdown-item-outline-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-outline-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-outline-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-outline-fg-hover-dark,oklch(21%_0.034_264.665))] border border-[color:var(--zui-dropdown-item-outline-border,#000000)] dark:border-[color:var(--zui-dropdown-item-outline-border-dark,#ffffff)] text-[color:var(--zui-dropdown-item-outline-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-outline-fg-dark,oklch(96.7%_0.003_264.542))]",
|
|
65
|
-
ghost: "hover:bg-[var(--zui-dropdown-item-ghost-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-ghost-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-ghost-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-ghost-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-ghost-bg,transparent)] dark:bg-[var(--zui-dropdown-item-ghost-bg-dark,transparent)] text-[color:var(--zui-dropdown-item-ghost-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-ghost-fg-dark,oklch(96.7%_0.003_264.542))]",
|
|
66
|
-
white: "hover:bg-[var(--zui-dropdown-item-white-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-white-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-white-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-white-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-white-bg,#ffffff)] dark:bg-[var(--zui-dropdown-item-white-bg-dark,#000000)] text-[color:var(--zui-dropdown-item-white-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-white-fg-dark,#ffffff)]",
|
|
67
|
-
black: "hover:bg-[var(--zui-dropdown-item-black-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-black-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-black-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-black-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-black-bg,#000000)] dark:bg-[var(--zui-dropdown-item-black-bg-dark,#ffffff)] text-[color:var(--zui-dropdown-item-black-fg,#ffffff)] dark:text-[color:var(--zui-dropdown-item-black-fg-dark,oklch(21%_0.034_264.665))]",
|
|
68
|
-
sky: "hover:bg-[var(--zui-dropdown-item-sky-bg-hover,oklch(95.1%_0.026_236.824))] dark:hover:bg-[var(--zui-dropdown-item-sky-bg-hover-dark,oklch(95.1%_0.026_236.824))] hover:text-[color:var(--zui-dropdown-item-sky-fg-hover,oklch(44.3%_0.11_240.79))] dark:hover:text-[color:var(--zui-dropdown-item-sky-fg-hover-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-dropdown-item-sky-bg,oklch(90.1%_0.058_230.902))] dark:bg-[var(--zui-dropdown-item-sky-bg-dark,oklch(90.1%_0.058_230.902))] text-[color:var(--zui-dropdown-item-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-dropdown-item-sky-fg-dark,oklch(44.3%_0.11_240.79))]",
|
|
69
|
-
rose: "hover:bg-[var(--zui-dropdown-item-rose-bg-hover,oklch(94.1%_0.03_12.58))] dark:hover:bg-[var(--zui-dropdown-item-rose-bg-hover-dark,oklch(94.1%_0.03_12.58))] hover:text-[color:var(--zui-dropdown-item-rose-fg-hover,oklch(45.5%_0.188_13.697))] dark:hover:text-[color:var(--zui-dropdown-item-rose-fg-hover-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-dropdown-item-rose-bg,oklch(89.2%_0.058_10.001))] dark:bg-[var(--zui-dropdown-item-rose-bg-dark,oklch(89.2%_0.058_10.001))] text-[color:var(--zui-dropdown-item-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-dropdown-item-rose-fg-dark,oklch(45.5%_0.188_13.697))]",
|
|
70
|
-
purple: "hover:bg-[var(--zui-dropdown-item-purple-bg-hover,oklch(94.6%_0.033_307.174))] dark:hover:bg-[var(--zui-dropdown-item-purple-bg-hover-dark,oklch(94.6%_0.033_307.174))] hover:text-[color:var(--zui-dropdown-item-purple-fg-hover,oklch(43.8%_0.218_303.724))] dark:hover:text-[color:var(--zui-dropdown-item-purple-fg-hover-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-dropdown-item-purple-bg,oklch(90.2%_0.063_306.703))] dark:bg-[var(--zui-dropdown-item-purple-bg-dark,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-dropdown-item-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-dropdown-item-purple-fg-dark,oklch(43.8%_0.218_303.724))]",
|
|
71
|
-
pink: "hover:bg-[var(--zui-dropdown-item-pink-bg-hover,oklch(94.8%_0.028_342.258))] dark:hover:bg-[var(--zui-dropdown-item-pink-bg-hover-dark,oklch(94.8%_0.028_342.258))] hover:text-[color:var(--zui-dropdown-item-pink-fg-hover,oklch(45.9%_0.187_3.815))] dark:hover:text-[color:var(--zui-dropdown-item-pink-fg-hover-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-dropdown-item-pink-bg,oklch(89.9%_0.061_343.231))] dark:bg-[var(--zui-dropdown-item-pink-bg-dark,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-dropdown-item-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-dropdown-item-pink-fg-dark,oklch(45.9%_0.187_3.815))]",
|
|
72
|
-
orange: "hover:bg-[var(--zui-dropdown-item-orange-bg-hover,oklch(95.4%_0.038_75.164))] dark:hover:bg-[var(--zui-dropdown-item-orange-bg-hover-dark,oklch(95.4%_0.038_75.164))] hover:text-[color:var(--zui-dropdown-item-orange-fg-hover,oklch(47%_0.157_37.304))] dark:hover:text-[color:var(--zui-dropdown-item-orange-fg-hover-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-dropdown-item-orange-bg,oklch(90.1%_0.076_70.697))] dark:bg-[var(--zui-dropdown-item-orange-bg-dark,oklch(90.1%_0.076_70.697))] text-[color:var(--zui-dropdown-item-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-dropdown-item-orange-fg-dark,oklch(47%_0.157_37.304))]",
|
|
73
|
-
yellow: "hover:bg-[var(--zui-dropdown-item-yellow-bg-hover,oklch(97.3%_0.071_103.193))] dark:hover:bg-[var(--zui-dropdown-item-yellow-bg-hover-dark,oklch(97.3%_0.071_103.193))] hover:text-[color:var(--zui-dropdown-item-yellow-fg-hover,oklch(47.6%_0.114_61.907))] dark:hover:text-[color:var(--zui-dropdown-item-yellow-fg-hover-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-dropdown-item-yellow-bg,oklch(94.5%_0.129_101.54))] dark:bg-[var(--zui-dropdown-item-yellow-bg-dark,oklch(94.5%_0.129_101.54))] text-[color:var(--zui-dropdown-item-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-dropdown-item-yellow-fg-dark,oklch(47.6%_0.114_61.907))]",
|
|
74
|
-
teal: "hover:bg-[var(--zui-dropdown-item-teal-bg-hover,oklch(95.3%_0.051_180.801))] dark:hover:bg-[var(--zui-dropdown-item-teal-bg-hover-dark,oklch(95.3%_0.051_180.801))] hover:text-[color:var(--zui-dropdown-item-teal-fg-hover,oklch(43.7%_0.078_188.216))] dark:hover:text-[color:var(--zui-dropdown-item-teal-fg-hover-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-dropdown-item-teal-bg,oklch(91%_0.096_180.426))] dark:bg-[var(--zui-dropdown-item-teal-bg-dark,oklch(91%_0.096_180.426))] text-[color:var(--zui-dropdown-item-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-dropdown-item-teal-fg-dark,oklch(43.7%_0.078_188.216))]",
|
|
75
|
-
indigo: "hover:bg-[var(--zui-dropdown-item-indigo-bg-hover,oklch(93%_0.034_272.788))] dark:hover:bg-[var(--zui-dropdown-item-indigo-bg-hover-dark,oklch(93%_0.034_272.788))] hover:text-[color:var(--zui-dropdown-item-indigo-fg-hover,oklch(39.8%_0.195_277.366))] dark:hover:text-[color:var(--zui-dropdown-item-indigo-fg-hover-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-dropdown-item-indigo-bg,oklch(87%_0.065_274.039))] dark:bg-[var(--zui-dropdown-item-indigo-bg-dark,oklch(87%_0.065_274.039))] text-[color:var(--zui-dropdown-item-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-dropdown-item-indigo-fg-dark,oklch(39.8%_0.195_277.366))]",
|
|
76
|
-
emerald: "hover:bg-[var(--zui-dropdown-item-emerald-bg-hover,oklch(95%_0.052_163.051))] dark:hover:bg-[var(--zui-dropdown-item-emerald-bg-hover-dark,oklch(95%_0.052_163.051))] hover:text-[color:var(--zui-dropdown-item-emerald-fg-hover,oklch(43.2%_0.095_166.913))] dark:hover:text-[color:var(--zui-dropdown-item-emerald-fg-hover-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-dropdown-item-emerald-bg,oklch(90.5%_0.093_164.15))] dark:bg-[var(--zui-dropdown-item-emerald-bg-dark,oklch(90.5%_0.093_164.15))] text-[color:var(--zui-dropdown-item-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-dropdown-item-emerald-fg-dark,oklch(43.2%_0.095_166.913))]",
|
|
77
|
-
gray: "hover:bg-[var(--zui-dropdown-item-gray-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-gray-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-gray-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-gray-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-gray-bg,oklch(92.8%_0.006_264.531))] dark:bg-[var(--zui-dropdown-item-gray-bg-dark,oklch(92.8%_0.006_264.531))] text-[color:var(--zui-dropdown-item-gray-fg,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-dropdown-item-gray-fg-dark,oklch(27.8%_0.033_256.848))]",
|
|
78
|
-
amber: "hover:bg-[var(--zui-dropdown-item-amber-bg-hover,oklch(96.2%_0.059_95.617))] dark:hover:bg-[var(--zui-dropdown-item-amber-bg-hover-dark,oklch(96.2%_0.059_95.617))] hover:text-[color:var(--zui-dropdown-item-amber-fg-hover,oklch(47.3%_0.137_46.201))] dark:hover:text-[color:var(--zui-dropdown-item-amber-fg-hover-dark,oklch(66.6%_0.179_58.318))] bg-[var(--zui-dropdown-item-amber-bg,oklch(92.4%_0.12_95.746))] dark:bg-[var(--zui-dropdown-item-amber-bg-dark,oklch(92.4%_0.12_95.746))] text-[color:var(--zui-dropdown-item-amber-fg,oklch(41.4%_0.112_45.904))] dark:text-[color:var(--zui-dropdown-item-amber-fg-dark,oklch(47.3%_0.137_46.201))]",
|
|
79
|
-
violet: "hover:bg-[var(--zui-dropdown-item-violet-bg-hover,oklch(94.3%_0.029_294.588))] dark:hover:bg-[var(--zui-dropdown-item-violet-bg-hover-dark,oklch(94.3%_0.029_294.588))] hover:text-[color:var(--zui-dropdown-item-violet-fg-hover,oklch(43.2%_0.232_292.759))] dark:hover:text-[color:var(--zui-dropdown-item-violet-fg-hover-dark,oklch(54.1%_0.281_293.009))] bg-[var(--zui-dropdown-item-violet-bg,oklch(89.4%_0.057_293.283))] dark:bg-[var(--zui-dropdown-item-violet-bg-dark,oklch(89.4%_0.057_293.283))] text-[color:var(--zui-dropdown-item-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-dropdown-item-violet-fg-dark,oklch(43.2%_0.232_292.759))]",
|
|
80
|
-
"gradient-blue": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-dropdown-item-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-dropdown-item-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-item-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] hover:text-[color:var(--zui-dropdown-item-gradient-blue-fg-hover,oklch(62.3%_0.214_259.815))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-blue-fg-hover-dark,oklch(37.9%_0.146_265.522))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-blue-from,oklch(88.2%_0.059_254.128))] to-[var(--zui-dropdown-item-gradient-blue-to,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-dropdown-item-gradient-blue-fg,oklch(37.9%_0.146_265.522))] dark:text-[color:var(--zui-dropdown-item-gradient-blue-fg-dark,oklch(88.2%_0.059_254.128))]",
|
|
81
|
-
"gradient-green": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-dropdown-item-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-dropdown-item-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-dropdown-item-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] hover:text-[color:var(--zui-dropdown-item-gradient-green-fg-hover,oklch(72.3%_0.219_149.579))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-green-fg-hover-dark,oklch(39.3%_0.095_152.535))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-green-from,oklch(92.5%_0.084_155.995))] to-[var(--zui-dropdown-item-gradient-green-to,oklch(93.8%_0.127_124.321))] text-[color:var(--zui-dropdown-item-gradient-green-fg,oklch(39.3%_0.095_152.535))] dark:text-[color:var(--zui-dropdown-item-gradient-green-fg-dark,oklch(92.5%_0.084_155.995))]",
|
|
82
|
-
"gradient-red": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-dropdown-item-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-dropdown-item-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-item-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] hover:text-[color:var(--zui-dropdown-item-gradient-red-fg-hover,oklch(63.7%_0.237_25.331))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-red-fg-hover-dark,oklch(39.6%_0.141_25.723))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-red-from,oklch(88.5%_0.062_18.334))] to-[var(--zui-dropdown-item-gradient-red-to,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-dropdown-item-gradient-red-fg,oklch(39.6%_0.141_25.723))] dark:text-[color:var(--zui-dropdown-item-gradient-red-fg-dark,oklch(88.5%_0.062_18.334))]",
|
|
83
|
-
"gradient-yellow": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-dropdown-item-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-dropdown-item-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-dropdown-item-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] hover:text-[color:var(--zui-dropdown-item-gradient-yellow-fg-hover,oklch(79.5%_0.184_86.047))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-yellow-fg-hover-dark,oklch(42.1%_0.095_57.708))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-yellow-from,oklch(94.5%_0.129_101.54))] to-[var(--zui-dropdown-item-gradient-yellow-to,oklch(90.1%_0.076_70.697))] text-[color:var(--zui-dropdown-item-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-dropdown-item-gradient-yellow-fg-dark,oklch(94.5%_0.129_101.54))]",
|
|
84
|
-
"gradient-purple": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-dropdown-item-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-dropdown-item-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-item-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] hover:text-[color:var(--zui-dropdown-item-gradient-purple-fg-hover,oklch(62.7%_0.265_303.9))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-purple-fg-hover-dark,oklch(38.1%_0.176_304.987))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-purple-from,oklch(90.2%_0.063_306.703))] to-[var(--zui-dropdown-item-gradient-purple-to,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-dropdown-item-gradient-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-dropdown-item-gradient-purple-fg-dark,oklch(90.2%_0.063_306.703))]",
|
|
85
|
-
"gradient-teal": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-dropdown-item-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-dropdown-item-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-dropdown-item-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] hover:text-[color:var(--zui-dropdown-item-gradient-teal-fg-hover,oklch(70.4%_0.14_182.503))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-teal-fg-hover-dark,oklch(38.6%_0.063_188.416))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-teal-from,oklch(91%_0.096_180.426))] to-[var(--zui-dropdown-item-gradient-teal-to,oklch(91.7%_0.08_205.041))] text-[color:var(--zui-dropdown-item-gradient-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-dropdown-item-gradient-teal-fg-dark,oklch(91%_0.096_180.426))]",
|
|
86
|
-
"gradient-indigo": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-dropdown-item-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-dropdown-item-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-item-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] hover:text-[color:var(--zui-dropdown-item-gradient-indigo-fg-hover,oklch(58.5%_0.233_277.117))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-indigo-fg-hover-dark,oklch(35.9%_0.144_278.697))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-indigo-from,oklch(87%_0.065_274.039))] to-[var(--zui-dropdown-item-gradient-indigo-to,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-dropdown-item-gradient-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-dropdown-item-gradient-indigo-fg-dark,oklch(87%_0.065_274.039))]",
|
|
87
|
-
"gradient-pink": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-dropdown-item-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-dropdown-item-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-dropdown-item-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] hover:text-[color:var(--zui-dropdown-item-gradient-pink-fg-hover,oklch(65.6%_0.241_354.308))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-pink-fg-hover-dark,oklch(40.8%_0.153_2.432))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-pink-from,oklch(89.9%_0.061_343.231))] to-[var(--zui-dropdown-item-gradient-pink-to,oklch(89.2%_0.058_10.001))] text-[color:var(--zui-dropdown-item-gradient-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-dropdown-item-gradient-pink-fg-dark,oklch(89.9%_0.061_343.231))]",
|
|
88
|
-
"gradient-orange": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-dropdown-item-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-dropdown-item-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-dropdown-item-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] hover:text-[color:var(--zui-dropdown-item-gradient-orange-fg-hover,oklch(70.5%_0.213_47.604))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-orange-fg-hover-dark,oklch(40.8%_0.123_38.172))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-orange-from,oklch(90.1%_0.076_70.697))] to-[var(--zui-dropdown-item-gradient-orange-to,oklch(88.5%_0.062_18.334))] text-[color:var(--zui-dropdown-item-gradient-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-dropdown-item-gradient-orange-fg-dark,oklch(90.1%_0.076_70.697))]"
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
// src/ui/dropdown/variants.ts
|
|
92
|
-
var triggerVariants = classVarianceAuthority.cva(zuiDropdownTriggerBase, {
|
|
12
|
+
var triggerVariants = classVarianceAuthority.cva(chunkZX2IBIZT_js.zuiDropdownTriggerBase, {
|
|
93
13
|
variants: {
|
|
94
|
-
variant: zuiDropdownTriggerVariants,
|
|
95
|
-
size: zuiDropdownTriggerSizes
|
|
14
|
+
variant: chunkZX2IBIZT_js.zuiDropdownTriggerVariants,
|
|
15
|
+
size: chunkZX2IBIZT_js.zuiDropdownTriggerSizes
|
|
96
16
|
},
|
|
97
17
|
defaultVariants: {
|
|
98
18
|
variant: "default",
|
|
99
19
|
size: "md"
|
|
100
20
|
}
|
|
101
21
|
});
|
|
102
|
-
var contentVariants = classVarianceAuthority.cva(zuiDropdownContentBase, {
|
|
22
|
+
var contentVariants = classVarianceAuthority.cva(chunkZX2IBIZT_js.zuiDropdownContentBase, {
|
|
103
23
|
variants: {
|
|
104
|
-
placement: zuiDropdownPlacements,
|
|
105
|
-
spacing: zuiDropdownSpacing
|
|
24
|
+
placement: chunkZX2IBIZT_js.zuiDropdownPlacements,
|
|
25
|
+
spacing: chunkZX2IBIZT_js.zuiDropdownSpacing
|
|
106
26
|
},
|
|
107
27
|
defaultVariants: {
|
|
108
28
|
placement: "bottom",
|
|
109
29
|
spacing: "default"
|
|
110
30
|
}
|
|
111
31
|
});
|
|
112
|
-
var itemVariants = classVarianceAuthority.cva(zuiDropdownItemBase, {
|
|
32
|
+
var itemVariants = classVarianceAuthority.cva(chunkZX2IBIZT_js.zuiDropdownItemBase, {
|
|
113
33
|
variants: {
|
|
114
|
-
variant: zuiDropdownItemVariants
|
|
34
|
+
variant: chunkZX2IBIZT_js.zuiDropdownItemVariants
|
|
115
35
|
},
|
|
116
36
|
defaultVariants: {
|
|
117
37
|
variant: "default"
|
package/dist/ui/dropdown.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/design-system/dropdown.ts","../../src/ui/dropdown/variants.ts","../../src/ui/dropdown/dropdown.tsx"],"names":["cva","createContext","useContext","useId","useState","jsx","cn","useRef","useClickOutside","jsxs","FiCheck"],"mappings":"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","file":"dropdown.js","sourcesContent":["export const zuiDropdownTriggerBase =\n \"inline-flex items-center justify-between rounded-md font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-dropdown-trigger-ring-focus,oklch(55.1%_0.027_264.364_/_0.6))] dark:focus-visible:ring-[var(--zui-dropdown-trigger-ring-focus-dark,oklch(55.1%_0.027_264.364_/_0.6))] cursor-pointer\";\n\nexport const zuiDropdownTriggerVariants = {\n default:\n \"bg-[var(--zui-dropdown-trigger-default-bg,oklch(92.8%_0.006_264.531))] dark:bg-[var(--zui-dropdown-trigger-default-bg-dark,oklch(21%_0.034_264.665))] text-[color:var(--zui-dropdown-trigger-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-dropdown-trigger-default-fg-dark,#ffffff)]\",\n outline:\n \"border border-[color:var(--zui-dropdown-trigger-outline-border,oklch(37.3%_0.034_259.733))] dark:border-[color:var(--zui-dropdown-trigger-outline-border-dark,oklch(87.2%_0.01_258.338))] text-[color:var(--zui-dropdown-trigger-outline-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-trigger-outline-fg-dark,oklch(96.7%_0.003_264.542))]\",\n ghost:\n \"bg-[var(--zui-dropdown-trigger-ghost-bg,transparent)] dark:bg-[var(--zui-dropdown-trigger-ghost-bg-dark,transparent)] text-[color:var(--zui-dropdown-trigger-ghost-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-trigger-ghost-fg-dark,oklch(96.7%_0.003_264.542))]\",\n white:\n \"bg-[var(--zui-dropdown-trigger-white-bg,#ffffff)] dark:bg-[var(--zui-dropdown-trigger-white-bg-dark,#ffffff)] text-[color:var(--zui-dropdown-trigger-white-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-trigger-white-fg-dark,oklch(21%_0.034_264.665))]\",\n black:\n \"bg-[var(--zui-dropdown-trigger-black-bg,#000000)] dark:bg-[var(--zui-dropdown-trigger-black-bg-dark,#000000)] text-[color:var(--zui-dropdown-trigger-black-fg,#ffffff)] dark:text-[color:var(--zui-dropdown-trigger-black-fg-dark,#ffffff)]\",\n sky: \"border border-[color:var(--zui-dropdown-trigger-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-dropdown-trigger-sky-border-dark,oklch(58.8%_0.158_241.966))] text-[color:var(--zui-dropdown-trigger-sky-fg,oklch(44.3%_0.11_240.79))] dark:text-[color:var(--zui-dropdown-trigger-sky-fg-dark,oklch(58.8%_0.158_241.966))]\",\n rose: \"border border-[color:var(--zui-dropdown-trigger-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-dropdown-trigger-rose-border-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-dropdown-trigger-rose-fg,oklch(45.5%_0.188_13.697))] dark:text-[color:var(--zui-dropdown-trigger-rose-fg-dark,oklch(58.6%_0.253_17.585))]\",\n purple:\n \"border border-[color:var(--zui-dropdown-trigger-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-dropdown-trigger-purple-border-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-dropdown-trigger-purple-fg,oklch(43.8%_0.218_303.724))] dark:text-[color:var(--zui-dropdown-trigger-purple-fg-dark,oklch(55.8%_0.288_302.321))]\",\n pink: \"border border-[color:var(--zui-dropdown-trigger-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-dropdown-trigger-pink-border-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-dropdown-trigger-pink-fg,oklch(45.9%_0.187_3.815))] dark:text-[color:var(--zui-dropdown-trigger-pink-fg-dark,oklch(59.2%_0.249_0.584))]\",\n orange:\n \"border border-[color:var(--zui-dropdown-trigger-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-dropdown-trigger-orange-border-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-dropdown-trigger-orange-fg,oklch(47%_0.157_37.304))] dark:text-[color:var(--zui-dropdown-trigger-orange-fg-dark,oklch(64.6%_0.222_41.116))]\",\n yellow:\n \"border border-[color:var(--zui-dropdown-trigger-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-dropdown-trigger-yellow-border-dark,oklch(68.1%_0.162_75.834))] text-[color:var(--zui-dropdown-trigger-yellow-fg,oklch(47.6%_0.114_61.907))] dark:text-[color:var(--zui-dropdown-trigger-yellow-fg-dark,oklch(68.1%_0.162_75.834))]\",\n teal: \"border border-[color:var(--zui-dropdown-trigger-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-dropdown-trigger-teal-border-dark,oklch(60%_0.118_184.704))] text-[color:var(--zui-dropdown-trigger-teal-fg,oklch(43.7%_0.078_188.216))] dark:text-[color:var(--zui-dropdown-trigger-teal-fg-dark,oklch(60%_0.118_184.704))]\",\n indigo:\n \"border border-[color:var(--zui-dropdown-trigger-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-dropdown-trigger-indigo-border-dark,oklch(51.1%_0.262_276.966))] text-[color:var(--zui-dropdown-trigger-indigo-fg,oklch(39.8%_0.195_277.366))] dark:text-[color:var(--zui-dropdown-trigger-indigo-fg-dark,oklch(51.1%_0.262_276.966))]\",\n emerald:\n \"border border-[color:var(--zui-dropdown-trigger-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-dropdown-trigger-emerald-border-dark,oklch(59.6%_0.145_163.225))] text-[color:var(--zui-dropdown-trigger-emerald-fg,oklch(43.2%_0.095_166.913))] dark:text-[color:var(--zui-dropdown-trigger-emerald-fg-dark,oklch(59.6%_0.145_163.225))]\",\n gray: \"border border-[color:var(--zui-dropdown-trigger-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-dropdown-trigger-gray-border-dark,oklch(44.6%_0.03_256.802))] text-[color:var(--zui-dropdown-trigger-gray-fg,oklch(27.8%_0.033_256.848))] dark:text-[color:var(--zui-dropdown-trigger-gray-fg-dark,oklch(44.6%_0.03_256.802))]\",\n amber:\n \"border border-[color:var(--zui-dropdown-trigger-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-dropdown-trigger-amber-border-dark,oklch(66.6%_0.179_58.318))] text-[color:var(--zui-dropdown-trigger-amber-fg,oklch(47.3%_0.137_46.201))] dark:text-[color:var(--zui-dropdown-trigger-amber-fg-dark,oklch(66.6%_0.179_58.318))]\",\n violet:\n \"border border-[color:var(--zui-dropdown-trigger-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-dropdown-trigger-violet-border-dark,oklch(54.1%_0.281_293.009))] text-[color:var(--zui-dropdown-trigger-violet-fg,oklch(43.2%_0.232_292.759))] dark:text-[color:var(--zui-dropdown-trigger-violet-fg-dark,oklch(54.1%_0.281_293.009))]\",\n \"gradient-blue\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-dropdown-trigger-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-dropdown-trigger-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-trigger-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-dropdown-trigger-gradient-blue-fg,oklch(88.2%_0.059_254.128))] dark:text-[color:var(--zui-dropdown-trigger-gradient-blue-fg-dark,oklch(88.2%_0.059_254.128))]\",\n \"gradient-green\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-dropdown-trigger-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-dropdown-trigger-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-dropdown-trigger-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] text-[color:var(--zui-dropdown-trigger-gradient-green-fg,oklch(92.5%_0.084_155.995))] dark:text-[color:var(--zui-dropdown-trigger-gradient-green-fg-dark,oklch(92.5%_0.084_155.995))]\",\n \"gradient-red\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-dropdown-trigger-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-dropdown-trigger-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-trigger-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-dropdown-trigger-gradient-red-fg,oklch(88.5%_0.062_18.334))] dark:text-[color:var(--zui-dropdown-trigger-gradient-red-fg-dark,oklch(88.5%_0.062_18.334))]\",\n \"gradient-yellow\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-dropdown-trigger-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-dropdown-trigger-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-dropdown-trigger-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-dropdown-trigger-gradient-yellow-fg,oklch(94.5%_0.129_101.54))] dark:text-[color:var(--zui-dropdown-trigger-gradient-yellow-fg-dark,oklch(94.5%_0.129_101.54))]\",\n \"gradient-purple\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-dropdown-trigger-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-dropdown-trigger-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-trigger-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-dropdown-trigger-gradient-purple-fg,oklch(90.2%_0.063_306.703))] dark:text-[color:var(--zui-dropdown-trigger-gradient-purple-fg-dark,oklch(90.2%_0.063_306.703))]\",\n \"gradient-teal\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-dropdown-trigger-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-dropdown-trigger-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-dropdown-trigger-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] text-[color:var(--zui-dropdown-trigger-gradient-teal-fg,oklch(91%_0.096_180.426))] dark:text-[color:var(--zui-dropdown-trigger-gradient-teal-fg-dark,oklch(91%_0.096_180.426))]\",\n \"gradient-indigo\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-dropdown-trigger-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-dropdown-trigger-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-trigger-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-dropdown-trigger-gradient-indigo-fg,oklch(87%_0.065_274.039))] dark:text-[color:var(--zui-dropdown-trigger-gradient-indigo-fg-dark,oklch(87%_0.065_274.039))]\",\n \"gradient-pink\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-dropdown-trigger-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-dropdown-trigger-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-dropdown-trigger-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-dropdown-trigger-gradient-pink-fg,oklch(89.9%_0.061_343.231))] dark:text-[color:var(--zui-dropdown-trigger-gradient-pink-fg-dark,oklch(89.9%_0.061_343.231))]\",\n \"gradient-orange\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-dropdown-trigger-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-dropdown-trigger-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-dropdown-trigger-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] text-[color:var(--zui-dropdown-trigger-gradient-orange-fg,oklch(90.1%_0.076_70.697))] dark:text-[color:var(--zui-dropdown-trigger-gradient-orange-fg-dark,oklch(90.1%_0.076_70.697))]\",\n} as const;\n\nexport const zuiDropdownTriggerSizes = {\n sm: \"px-2 py-1 text-sm\",\n md: \"px-3 py-2 text-base\",\n lg: \"px-4 py-3 text-lg\",\n} as const;\n\nexport const zuiDropdownContentBase =\n \"absolute min-w-[200px] rounded-md p-2 shadow-md z-50 border border-[color:var(--zui-dropdown-content-border,oklch(20.8%_0.042_265.755_/_0.1))] dark:border-[color:var(--zui-dropdown-content-border-dark,#ffffff1a)] bg-[var(--zui-dropdown-content-bg,oklch(96.8%_0.007_247.896))] dark:bg-[var(--zui-dropdown-content-bg-dark,oklch(20.8%_0.042_265.755))] text-[color:var(--zui-dropdown-content-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-dropdown-content-fg-dark,oklch(96.8%_0.007_247.896))] shadow-lg rounded-lg\";\n\nexport const zuiDropdownPlacements = {\n top: \"bottom-full mb-2\",\n bottom: \"top-full mt-2\",\n left: \"right-full mr-2\",\n right: \"left-full ml-2\",\n} as const;\n\nexport const zuiDropdownSpacing = {\n none: \"space-y-0\",\n default: \"space-y-1\",\n sm: \"space-y-2\",\n md: \"space-y-3\",\n lg: \"space-y-4\",\n xl: \"space-y-5\",\n} as const;\n\nexport const zuiDropdownItemBase =\n \"flex items-center justify-between px-3 py-2 text-sm cursor-pointer rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-dropdown-item-ring-focus,oklch(55.1%_0.027_264.364_/_0.6))] dark:focus-visible:ring-[var(--zui-dropdown-item-ring-focus-dark,oklch(55.1%_0.027_264.364_/_0.6))] font-semibold\";\n\nexport const zuiDropdownItemVariants = {\n default:\n \"hover:bg-[var(--zui-dropdown-item-default-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-default-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-default-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-default-fg-hover-dark,oklch(21%_0.034_264.665))] text-[color:var(--zui-dropdown-item-default-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-default-fg-dark,oklch(96.7%_0.003_264.542))]\",\n outline:\n \"hover:bg-[var(--zui-dropdown-item-outline-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-outline-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-outline-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-outline-fg-hover-dark,oklch(21%_0.034_264.665))] border border-[color:var(--zui-dropdown-item-outline-border,#000000)] dark:border-[color:var(--zui-dropdown-item-outline-border-dark,#ffffff)] text-[color:var(--zui-dropdown-item-outline-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-outline-fg-dark,oklch(96.7%_0.003_264.542))]\",\n ghost:\n \"hover:bg-[var(--zui-dropdown-item-ghost-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-ghost-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-ghost-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-ghost-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-ghost-bg,transparent)] dark:bg-[var(--zui-dropdown-item-ghost-bg-dark,transparent)] text-[color:var(--zui-dropdown-item-ghost-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-ghost-fg-dark,oklch(96.7%_0.003_264.542))]\",\n white:\n \"hover:bg-[var(--zui-dropdown-item-white-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-white-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-white-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-white-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-white-bg,#ffffff)] dark:bg-[var(--zui-dropdown-item-white-bg-dark,#000000)] text-[color:var(--zui-dropdown-item-white-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-white-fg-dark,#ffffff)]\",\n black:\n \"hover:bg-[var(--zui-dropdown-item-black-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-black-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-black-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-black-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-black-bg,#000000)] dark:bg-[var(--zui-dropdown-item-black-bg-dark,#ffffff)] text-[color:var(--zui-dropdown-item-black-fg,#ffffff)] dark:text-[color:var(--zui-dropdown-item-black-fg-dark,oklch(21%_0.034_264.665))]\",\n sky: \"hover:bg-[var(--zui-dropdown-item-sky-bg-hover,oklch(95.1%_0.026_236.824))] dark:hover:bg-[var(--zui-dropdown-item-sky-bg-hover-dark,oklch(95.1%_0.026_236.824))] hover:text-[color:var(--zui-dropdown-item-sky-fg-hover,oklch(44.3%_0.11_240.79))] dark:hover:text-[color:var(--zui-dropdown-item-sky-fg-hover-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-dropdown-item-sky-bg,oklch(90.1%_0.058_230.902))] dark:bg-[var(--zui-dropdown-item-sky-bg-dark,oklch(90.1%_0.058_230.902))] text-[color:var(--zui-dropdown-item-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-dropdown-item-sky-fg-dark,oklch(44.3%_0.11_240.79))]\",\n rose: \"hover:bg-[var(--zui-dropdown-item-rose-bg-hover,oklch(94.1%_0.03_12.58))] dark:hover:bg-[var(--zui-dropdown-item-rose-bg-hover-dark,oklch(94.1%_0.03_12.58))] hover:text-[color:var(--zui-dropdown-item-rose-fg-hover,oklch(45.5%_0.188_13.697))] dark:hover:text-[color:var(--zui-dropdown-item-rose-fg-hover-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-dropdown-item-rose-bg,oklch(89.2%_0.058_10.001))] dark:bg-[var(--zui-dropdown-item-rose-bg-dark,oklch(89.2%_0.058_10.001))] text-[color:var(--zui-dropdown-item-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-dropdown-item-rose-fg-dark,oklch(45.5%_0.188_13.697))]\",\n purple:\n \"hover:bg-[var(--zui-dropdown-item-purple-bg-hover,oklch(94.6%_0.033_307.174))] dark:hover:bg-[var(--zui-dropdown-item-purple-bg-hover-dark,oklch(94.6%_0.033_307.174))] hover:text-[color:var(--zui-dropdown-item-purple-fg-hover,oklch(43.8%_0.218_303.724))] dark:hover:text-[color:var(--zui-dropdown-item-purple-fg-hover-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-dropdown-item-purple-bg,oklch(90.2%_0.063_306.703))] dark:bg-[var(--zui-dropdown-item-purple-bg-dark,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-dropdown-item-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-dropdown-item-purple-fg-dark,oklch(43.8%_0.218_303.724))]\",\n pink: \"hover:bg-[var(--zui-dropdown-item-pink-bg-hover,oklch(94.8%_0.028_342.258))] dark:hover:bg-[var(--zui-dropdown-item-pink-bg-hover-dark,oklch(94.8%_0.028_342.258))] hover:text-[color:var(--zui-dropdown-item-pink-fg-hover,oklch(45.9%_0.187_3.815))] dark:hover:text-[color:var(--zui-dropdown-item-pink-fg-hover-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-dropdown-item-pink-bg,oklch(89.9%_0.061_343.231))] dark:bg-[var(--zui-dropdown-item-pink-bg-dark,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-dropdown-item-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-dropdown-item-pink-fg-dark,oklch(45.9%_0.187_3.815))]\",\n orange:\n \"hover:bg-[var(--zui-dropdown-item-orange-bg-hover,oklch(95.4%_0.038_75.164))] dark:hover:bg-[var(--zui-dropdown-item-orange-bg-hover-dark,oklch(95.4%_0.038_75.164))] hover:text-[color:var(--zui-dropdown-item-orange-fg-hover,oklch(47%_0.157_37.304))] dark:hover:text-[color:var(--zui-dropdown-item-orange-fg-hover-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-dropdown-item-orange-bg,oklch(90.1%_0.076_70.697))] dark:bg-[var(--zui-dropdown-item-orange-bg-dark,oklch(90.1%_0.076_70.697))] text-[color:var(--zui-dropdown-item-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-dropdown-item-orange-fg-dark,oklch(47%_0.157_37.304))]\",\n yellow:\n \"hover:bg-[var(--zui-dropdown-item-yellow-bg-hover,oklch(97.3%_0.071_103.193))] dark:hover:bg-[var(--zui-dropdown-item-yellow-bg-hover-dark,oklch(97.3%_0.071_103.193))] hover:text-[color:var(--zui-dropdown-item-yellow-fg-hover,oklch(47.6%_0.114_61.907))] dark:hover:text-[color:var(--zui-dropdown-item-yellow-fg-hover-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-dropdown-item-yellow-bg,oklch(94.5%_0.129_101.54))] dark:bg-[var(--zui-dropdown-item-yellow-bg-dark,oklch(94.5%_0.129_101.54))] text-[color:var(--zui-dropdown-item-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-dropdown-item-yellow-fg-dark,oklch(47.6%_0.114_61.907))]\",\n teal: \"hover:bg-[var(--zui-dropdown-item-teal-bg-hover,oklch(95.3%_0.051_180.801))] dark:hover:bg-[var(--zui-dropdown-item-teal-bg-hover-dark,oklch(95.3%_0.051_180.801))] hover:text-[color:var(--zui-dropdown-item-teal-fg-hover,oklch(43.7%_0.078_188.216))] dark:hover:text-[color:var(--zui-dropdown-item-teal-fg-hover-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-dropdown-item-teal-bg,oklch(91%_0.096_180.426))] dark:bg-[var(--zui-dropdown-item-teal-bg-dark,oklch(91%_0.096_180.426))] text-[color:var(--zui-dropdown-item-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-dropdown-item-teal-fg-dark,oklch(43.7%_0.078_188.216))]\",\n indigo:\n \"hover:bg-[var(--zui-dropdown-item-indigo-bg-hover,oklch(93%_0.034_272.788))] dark:hover:bg-[var(--zui-dropdown-item-indigo-bg-hover-dark,oklch(93%_0.034_272.788))] hover:text-[color:var(--zui-dropdown-item-indigo-fg-hover,oklch(39.8%_0.195_277.366))] dark:hover:text-[color:var(--zui-dropdown-item-indigo-fg-hover-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-dropdown-item-indigo-bg,oklch(87%_0.065_274.039))] dark:bg-[var(--zui-dropdown-item-indigo-bg-dark,oklch(87%_0.065_274.039))] text-[color:var(--zui-dropdown-item-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-dropdown-item-indigo-fg-dark,oklch(39.8%_0.195_277.366))]\",\n emerald:\n \"hover:bg-[var(--zui-dropdown-item-emerald-bg-hover,oklch(95%_0.052_163.051))] dark:hover:bg-[var(--zui-dropdown-item-emerald-bg-hover-dark,oklch(95%_0.052_163.051))] hover:text-[color:var(--zui-dropdown-item-emerald-fg-hover,oklch(43.2%_0.095_166.913))] dark:hover:text-[color:var(--zui-dropdown-item-emerald-fg-hover-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-dropdown-item-emerald-bg,oklch(90.5%_0.093_164.15))] dark:bg-[var(--zui-dropdown-item-emerald-bg-dark,oklch(90.5%_0.093_164.15))] text-[color:var(--zui-dropdown-item-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-dropdown-item-emerald-fg-dark,oklch(43.2%_0.095_166.913))]\",\n gray: \"hover:bg-[var(--zui-dropdown-item-gray-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-gray-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-gray-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-gray-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-gray-bg,oklch(92.8%_0.006_264.531))] dark:bg-[var(--zui-dropdown-item-gray-bg-dark,oklch(92.8%_0.006_264.531))] text-[color:var(--zui-dropdown-item-gray-fg,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-dropdown-item-gray-fg-dark,oklch(27.8%_0.033_256.848))]\",\n amber:\n \"hover:bg-[var(--zui-dropdown-item-amber-bg-hover,oklch(96.2%_0.059_95.617))] dark:hover:bg-[var(--zui-dropdown-item-amber-bg-hover-dark,oklch(96.2%_0.059_95.617))] hover:text-[color:var(--zui-dropdown-item-amber-fg-hover,oklch(47.3%_0.137_46.201))] dark:hover:text-[color:var(--zui-dropdown-item-amber-fg-hover-dark,oklch(66.6%_0.179_58.318))] bg-[var(--zui-dropdown-item-amber-bg,oklch(92.4%_0.12_95.746))] dark:bg-[var(--zui-dropdown-item-amber-bg-dark,oklch(92.4%_0.12_95.746))] text-[color:var(--zui-dropdown-item-amber-fg,oklch(41.4%_0.112_45.904))] dark:text-[color:var(--zui-dropdown-item-amber-fg-dark,oklch(47.3%_0.137_46.201))]\",\n violet:\n \"hover:bg-[var(--zui-dropdown-item-violet-bg-hover,oklch(94.3%_0.029_294.588))] dark:hover:bg-[var(--zui-dropdown-item-violet-bg-hover-dark,oklch(94.3%_0.029_294.588))] hover:text-[color:var(--zui-dropdown-item-violet-fg-hover,oklch(43.2%_0.232_292.759))] dark:hover:text-[color:var(--zui-dropdown-item-violet-fg-hover-dark,oklch(54.1%_0.281_293.009))] bg-[var(--zui-dropdown-item-violet-bg,oklch(89.4%_0.057_293.283))] dark:bg-[var(--zui-dropdown-item-violet-bg-dark,oklch(89.4%_0.057_293.283))] text-[color:var(--zui-dropdown-item-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-dropdown-item-violet-fg-dark,oklch(43.2%_0.232_292.759))]\",\n \"gradient-blue\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-dropdown-item-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-dropdown-item-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-item-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] hover:text-[color:var(--zui-dropdown-item-gradient-blue-fg-hover,oklch(62.3%_0.214_259.815))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-blue-fg-hover-dark,oklch(37.9%_0.146_265.522))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-blue-from,oklch(88.2%_0.059_254.128))] to-[var(--zui-dropdown-item-gradient-blue-to,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-dropdown-item-gradient-blue-fg,oklch(37.9%_0.146_265.522))] dark:text-[color:var(--zui-dropdown-item-gradient-blue-fg-dark,oklch(88.2%_0.059_254.128))]\",\n \"gradient-green\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-dropdown-item-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-dropdown-item-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-dropdown-item-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] hover:text-[color:var(--zui-dropdown-item-gradient-green-fg-hover,oklch(72.3%_0.219_149.579))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-green-fg-hover-dark,oklch(39.3%_0.095_152.535))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-green-from,oklch(92.5%_0.084_155.995))] to-[var(--zui-dropdown-item-gradient-green-to,oklch(93.8%_0.127_124.321))] text-[color:var(--zui-dropdown-item-gradient-green-fg,oklch(39.3%_0.095_152.535))] dark:text-[color:var(--zui-dropdown-item-gradient-green-fg-dark,oklch(92.5%_0.084_155.995))]\",\n \"gradient-red\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-dropdown-item-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-dropdown-item-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-item-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] hover:text-[color:var(--zui-dropdown-item-gradient-red-fg-hover,oklch(63.7%_0.237_25.331))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-red-fg-hover-dark,oklch(39.6%_0.141_25.723))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-red-from,oklch(88.5%_0.062_18.334))] to-[var(--zui-dropdown-item-gradient-red-to,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-dropdown-item-gradient-red-fg,oklch(39.6%_0.141_25.723))] dark:text-[color:var(--zui-dropdown-item-gradient-red-fg-dark,oklch(88.5%_0.062_18.334))]\",\n \"gradient-yellow\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-dropdown-item-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-dropdown-item-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-dropdown-item-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] hover:text-[color:var(--zui-dropdown-item-gradient-yellow-fg-hover,oklch(79.5%_0.184_86.047))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-yellow-fg-hover-dark,oklch(42.1%_0.095_57.708))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-yellow-from,oklch(94.5%_0.129_101.54))] to-[var(--zui-dropdown-item-gradient-yellow-to,oklch(90.1%_0.076_70.697))] text-[color:var(--zui-dropdown-item-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-dropdown-item-gradient-yellow-fg-dark,oklch(94.5%_0.129_101.54))]\",\n \"gradient-purple\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-dropdown-item-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-dropdown-item-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-item-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] hover:text-[color:var(--zui-dropdown-item-gradient-purple-fg-hover,oklch(62.7%_0.265_303.9))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-purple-fg-hover-dark,oklch(38.1%_0.176_304.987))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-purple-from,oklch(90.2%_0.063_306.703))] to-[var(--zui-dropdown-item-gradient-purple-to,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-dropdown-item-gradient-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-dropdown-item-gradient-purple-fg-dark,oklch(90.2%_0.063_306.703))]\",\n \"gradient-teal\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-dropdown-item-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-dropdown-item-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-dropdown-item-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] hover:text-[color:var(--zui-dropdown-item-gradient-teal-fg-hover,oklch(70.4%_0.14_182.503))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-teal-fg-hover-dark,oklch(38.6%_0.063_188.416))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-teal-from,oklch(91%_0.096_180.426))] to-[var(--zui-dropdown-item-gradient-teal-to,oklch(91.7%_0.08_205.041))] text-[color:var(--zui-dropdown-item-gradient-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-dropdown-item-gradient-teal-fg-dark,oklch(91%_0.096_180.426))]\",\n \"gradient-indigo\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-dropdown-item-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-dropdown-item-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-item-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] hover:text-[color:var(--zui-dropdown-item-gradient-indigo-fg-hover,oklch(58.5%_0.233_277.117))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-indigo-fg-hover-dark,oklch(35.9%_0.144_278.697))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-indigo-from,oklch(87%_0.065_274.039))] to-[var(--zui-dropdown-item-gradient-indigo-to,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-dropdown-item-gradient-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-dropdown-item-gradient-indigo-fg-dark,oklch(87%_0.065_274.039))]\",\n \"gradient-pink\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-dropdown-item-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-dropdown-item-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-dropdown-item-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] hover:text-[color:var(--zui-dropdown-item-gradient-pink-fg-hover,oklch(65.6%_0.241_354.308))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-pink-fg-hover-dark,oklch(40.8%_0.153_2.432))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-pink-from,oklch(89.9%_0.061_343.231))] to-[var(--zui-dropdown-item-gradient-pink-to,oklch(89.2%_0.058_10.001))] text-[color:var(--zui-dropdown-item-gradient-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-dropdown-item-gradient-pink-fg-dark,oklch(89.9%_0.061_343.231))]\",\n \"gradient-orange\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-dropdown-item-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-dropdown-item-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-dropdown-item-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] hover:text-[color:var(--zui-dropdown-item-gradient-orange-fg-hover,oklch(70.5%_0.213_47.604))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-orange-fg-hover-dark,oklch(40.8%_0.123_38.172))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-orange-from,oklch(90.1%_0.076_70.697))] to-[var(--zui-dropdown-item-gradient-orange-to,oklch(88.5%_0.062_18.334))] text-[color:var(--zui-dropdown-item-gradient-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-dropdown-item-gradient-orange-fg-dark,oklch(90.1%_0.076_70.697))]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiDropdownContentBase,\n zuiDropdownItemBase,\n zuiDropdownItemVariants,\n zuiDropdownPlacements,\n zuiDropdownSpacing,\n zuiDropdownTriggerBase,\n zuiDropdownTriggerSizes,\n zuiDropdownTriggerVariants,\n} from \"../../design-system/dropdown\";\n\nexport const triggerVariants = cva(zuiDropdownTriggerBase, {\n variants: {\n variant: zuiDropdownTriggerVariants,\n size: zuiDropdownTriggerSizes,\n },\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n },\n});\n\nexport const contentVariants = cva(zuiDropdownContentBase, {\n variants: {\n placement: zuiDropdownPlacements,\n spacing: zuiDropdownSpacing,\n },\n defaultVariants: {\n placement: \"bottom\",\n spacing: \"default\",\n },\n});\n\nexport const itemVariants = cva(zuiDropdownItemBase, {\n variants: {\n variant: zuiDropdownItemVariants,\n },\n defaultVariants: {\n variant: \"default\",\n },\n});\n","\"use client\";\n\nimport {\n createContext,\n useContext,\n useState,\n useRef,\n useEffect,\n useId,\n} from \"react\";\nimport { FiCheck } from \"react-icons/fi\";\nimport { cn } from \"../../lib/utils\";\nimport type {\n DropdownContextType,\n DropdownProps,\n DropdownTriggerProps,\n DropdownContentProps,\n DropdownItemProps,\n} from \"./types\";\nimport { triggerVariants, contentVariants, itemVariants } from \"./variants\";\nimport { useClickOutside } from \"../../hooks/useClickOutside\";\n\n/* =========================\n Context\n========================= */\nconst DropdownContext = createContext<DropdownContextType | null>(null);\n\nconst useDropdown = () => {\n const ctx = useContext(DropdownContext);\n if (!ctx) throw new Error(\"Use inside Dropdown\");\n return ctx;\n};\n\n/* =========================\n Root\n========================= */\nexport const Dropdown = ({\n children,\n defaultOpen = false,\n open: controlledOpen,\n onOpenChange,\n multiSelect = false,\n}: DropdownProps) => {\n const menuId = `${useId()}-menu`;\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const [selectedValues, setSelectedValues] = useState<string[]>([]);\n\n const open = controlledOpen ?? uncontrolledOpen;\n\n const setOpen = (val: boolean) => {\n if (controlledOpen !== undefined) {\n onOpenChange?.(val);\n } else {\n setUncontrolledOpen(val);\n }\n };\n\n const toggle = () => setOpen(!open);\n\n const toggleSelect = (value: string) => {\n if (!multiSelect) {\n setSelectedValues([value]);\n setOpen(false);\n return;\n }\n\n setSelectedValues((prev) =>\n prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value],\n );\n };\n\n return (\n <DropdownContext.Provider\n value={{\n open,\n setOpen,\n toggle,\n selectedValues,\n toggleSelect,\n multiSelect,\n menuId,\n }}\n >\n <div className=\"relative inline-block\">{children}</div>\n </DropdownContext.Provider>\n );\n};\n\n/* =========================\n Trigger\n========================= */\nexport const DropdownTrigger = ({\n children,\n className,\n variant,\n size,\n onClick,\n ...props\n}: DropdownTriggerProps) => {\n const { toggle, open, menuId } = useDropdown();\n\n return (\n <button\n type=\"button\"\n aria-expanded={open}\n aria-haspopup=\"menu\"\n aria-controls={menuId}\n className={cn(triggerVariants({ variant, size }), className)}\n {...props}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented) {\n toggle();\n }\n }}\n >\n {children}\n </button>\n );\n};\n\n/* =========================\n Content\n========================= */\nexport const DropdownContent = ({\n children,\n className,\n placement = \"bottom\",\n spacing = \"default\",\n divider,\n ...props\n}: DropdownContentProps) => {\n const { open, setOpen, menuId } = useDropdown();\n const ref = useRef<HTMLDivElement>(null);\n\n // click outside\n useClickOutside({ ref, setOpen });\n\n if (!open) return null;\n\n return (\n <div\n ref={ref}\n id={menuId}\n role=\"menu\"\n className={cn(\n contentVariants({ placement, spacing }),\n className,\n divider && \"divide-y divide-current\"\n )}\n {...props}\n >\n {children}\n </div>\n );\n};\n\n/* =========================\n Item\n========================= */\nexport const DropdownItem = ({\n children,\n value,\n className,\n variant,\n onSelect,\n leftIcon,\n rightIcon,\n ...props\n}: DropdownItemProps) => {\n const { toggleSelect, selectedValues } = useDropdown();\n const isSelected = selectedValues.includes(value);\n\n const handleClick = () => {\n toggleSelect(value);\n onSelect?.();\n };\n\n return (\n <div\n role=\"menuitem\"\n tabIndex={0}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n handleClick();\n }\n }}\n className={cn(itemVariants({ variant }), className)}\n {...props}\n >\n <div className=\"flex items-center gap-2\">\n {leftIcon}\n {children}\n </div>\n\n <div className=\"flex items-center gap-2\">\n {isSelected && <FiCheck />}\n {rightIcon}\n </div>\n </div>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/ui/dropdown/variants.ts","../../src/ui/dropdown/dropdown.tsx"],"names":["cva","zuiDropdownTriggerBase","zuiDropdownTriggerVariants","zuiDropdownTriggerSizes","zuiDropdownContentBase","zuiDropdownPlacements","zuiDropdownSpacing","zuiDropdownItemBase","zuiDropdownItemVariants","createContext","useContext","useId","useState","jsx","cn","useRef","useClickOutside","jsxs","FiCheck"],"mappings":"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","file":"dropdown.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n zuiDropdownContentBase,\n zuiDropdownItemBase,\n zuiDropdownItemVariants,\n zuiDropdownPlacements,\n zuiDropdownSpacing,\n zuiDropdownTriggerBase,\n zuiDropdownTriggerSizes,\n zuiDropdownTriggerVariants,\n} from \"../../design-system/dropdown\";\n\nexport const triggerVariants = cva(zuiDropdownTriggerBase, {\n variants: {\n variant: zuiDropdownTriggerVariants,\n size: zuiDropdownTriggerSizes,\n },\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n },\n});\n\nexport const contentVariants = cva(zuiDropdownContentBase, {\n variants: {\n placement: zuiDropdownPlacements,\n spacing: zuiDropdownSpacing,\n },\n defaultVariants: {\n placement: \"bottom\",\n spacing: \"default\",\n },\n});\n\nexport const itemVariants = cva(zuiDropdownItemBase, {\n variants: {\n variant: zuiDropdownItemVariants,\n },\n defaultVariants: {\n variant: \"default\",\n },\n});\n","\"use client\";\n\nimport {\n createContext,\n useContext,\n useState,\n useRef,\n useEffect,\n useId,\n} from \"react\";\nimport { FiCheck } from \"react-icons/fi\";\nimport { cn } from \"../../lib/utils\";\nimport type {\n DropdownContextType,\n DropdownProps,\n DropdownTriggerProps,\n DropdownContentProps,\n DropdownItemProps,\n} from \"./types\";\nimport { triggerVariants, contentVariants, itemVariants } from \"./variants\";\nimport { useClickOutside } from \"../../hooks/useClickOutside\";\n\n/* =========================\n Context\n========================= */\nconst DropdownContext = createContext<DropdownContextType | null>(null);\n\nconst useDropdown = () => {\n const ctx = useContext(DropdownContext);\n if (!ctx) throw new Error(\"Use inside Dropdown\");\n return ctx;\n};\n\n/* =========================\n Root\n========================= */\nexport const Dropdown = ({\n children,\n defaultOpen = false,\n open: controlledOpen,\n onOpenChange,\n multiSelect = false,\n}: DropdownProps) => {\n const menuId = `${useId()}-menu`;\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const [selectedValues, setSelectedValues] = useState<string[]>([]);\n\n const open = controlledOpen ?? uncontrolledOpen;\n\n const setOpen = (val: boolean) => {\n if (controlledOpen !== undefined) {\n onOpenChange?.(val);\n } else {\n setUncontrolledOpen(val);\n }\n };\n\n const toggle = () => setOpen(!open);\n\n const toggleSelect = (value: string) => {\n if (!multiSelect) {\n setSelectedValues([value]);\n setOpen(false);\n return;\n }\n\n setSelectedValues((prev) =>\n prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value],\n );\n };\n\n return (\n <DropdownContext.Provider\n value={{\n open,\n setOpen,\n toggle,\n selectedValues,\n toggleSelect,\n multiSelect,\n menuId,\n }}\n >\n <div className=\"relative inline-block\">{children}</div>\n </DropdownContext.Provider>\n );\n};\n\n/* =========================\n Trigger\n========================= */\nexport const DropdownTrigger = ({\n children,\n className,\n variant,\n size,\n onClick,\n ...props\n}: DropdownTriggerProps) => {\n const { toggle, open, menuId } = useDropdown();\n\n return (\n <button\n type=\"button\"\n aria-expanded={open}\n aria-haspopup=\"menu\"\n aria-controls={menuId}\n className={cn(triggerVariants({ variant, size }), className)}\n {...props}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented) {\n toggle();\n }\n }}\n >\n {children}\n </button>\n );\n};\n\n/* =========================\n Content\n========================= */\nexport const DropdownContent = ({\n children,\n className,\n placement = \"bottom\",\n spacing = \"default\",\n divider,\n ...props\n}: DropdownContentProps) => {\n const { open, setOpen, menuId } = useDropdown();\n const ref = useRef<HTMLDivElement>(null);\n\n // click outside\n useClickOutside({ ref, setOpen });\n\n if (!open) return null;\n\n return (\n <div\n ref={ref}\n id={menuId}\n role=\"menu\"\n className={cn(\n contentVariants({ placement, spacing }),\n className,\n divider && \"divide-y divide-current\"\n )}\n {...props}\n >\n {children}\n </div>\n );\n};\n\n/* =========================\n Item\n========================= */\nexport const DropdownItem = ({\n children,\n value,\n className,\n variant,\n onSelect,\n leftIcon,\n rightIcon,\n ...props\n}: DropdownItemProps) => {\n const { toggleSelect, selectedValues } = useDropdown();\n const isSelected = selectedValues.includes(value);\n\n const handleClick = () => {\n toggleSelect(value);\n onSelect?.();\n };\n\n return (\n <div\n role=\"menuitem\"\n tabIndex={0}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n handleClick();\n }\n }}\n className={cn(itemVariants({ variant }), className)}\n {...props}\n >\n <div className=\"flex items-center gap-2\">\n {leftIcon}\n {children}\n </div>\n\n <div className=\"flex items-center gap-2\">\n {isSelected && <FiCheck />}\n {rightIcon}\n </div>\n </div>\n );\n};\n"]}
|
package/dist/ui/dropdown.mjs
CHANGED
|
@@ -1,92 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useClickOutside } from '../chunk-VXDEPZKH.mjs';
|
|
3
|
+
import { zuiDropdownTriggerBase, zuiDropdownTriggerSizes, zuiDropdownTriggerVariants, zuiDropdownContentBase, zuiDropdownSpacing, zuiDropdownPlacements, zuiDropdownItemBase, zuiDropdownItemVariants } from '../chunk-DEZRB6DS.mjs';
|
|
3
4
|
import { cn } from '../chunk-4D54YOL6.mjs';
|
|
4
5
|
import { createContext, useId, useState, useRef, useContext } from 'react';
|
|
5
6
|
import { FiCheck } from 'react-icons/fi';
|
|
6
7
|
import { cva } from 'class-variance-authority';
|
|
7
8
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
8
9
|
|
|
9
|
-
// src/design-system/dropdown.ts
|
|
10
|
-
var zuiDropdownTriggerBase = "inline-flex items-center justify-between rounded-md font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-dropdown-trigger-ring-focus,oklch(55.1%_0.027_264.364_/_0.6))] dark:focus-visible:ring-[var(--zui-dropdown-trigger-ring-focus-dark,oklch(55.1%_0.027_264.364_/_0.6))] cursor-pointer";
|
|
11
|
-
var zuiDropdownTriggerVariants = {
|
|
12
|
-
default: "bg-[var(--zui-dropdown-trigger-default-bg,oklch(92.8%_0.006_264.531))] dark:bg-[var(--zui-dropdown-trigger-default-bg-dark,oklch(21%_0.034_264.665))] text-[color:var(--zui-dropdown-trigger-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-dropdown-trigger-default-fg-dark,#ffffff)]",
|
|
13
|
-
outline: "border border-[color:var(--zui-dropdown-trigger-outline-border,oklch(37.3%_0.034_259.733))] dark:border-[color:var(--zui-dropdown-trigger-outline-border-dark,oklch(87.2%_0.01_258.338))] text-[color:var(--zui-dropdown-trigger-outline-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-trigger-outline-fg-dark,oklch(96.7%_0.003_264.542))]",
|
|
14
|
-
ghost: "bg-[var(--zui-dropdown-trigger-ghost-bg,transparent)] dark:bg-[var(--zui-dropdown-trigger-ghost-bg-dark,transparent)] text-[color:var(--zui-dropdown-trigger-ghost-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-trigger-ghost-fg-dark,oklch(96.7%_0.003_264.542))]",
|
|
15
|
-
white: "bg-[var(--zui-dropdown-trigger-white-bg,#ffffff)] dark:bg-[var(--zui-dropdown-trigger-white-bg-dark,#ffffff)] text-[color:var(--zui-dropdown-trigger-white-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-trigger-white-fg-dark,oklch(21%_0.034_264.665))]",
|
|
16
|
-
black: "bg-[var(--zui-dropdown-trigger-black-bg,#000000)] dark:bg-[var(--zui-dropdown-trigger-black-bg-dark,#000000)] text-[color:var(--zui-dropdown-trigger-black-fg,#ffffff)] dark:text-[color:var(--zui-dropdown-trigger-black-fg-dark,#ffffff)]",
|
|
17
|
-
sky: "border border-[color:var(--zui-dropdown-trigger-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-dropdown-trigger-sky-border-dark,oklch(58.8%_0.158_241.966))] text-[color:var(--zui-dropdown-trigger-sky-fg,oklch(44.3%_0.11_240.79))] dark:text-[color:var(--zui-dropdown-trigger-sky-fg-dark,oklch(58.8%_0.158_241.966))]",
|
|
18
|
-
rose: "border border-[color:var(--zui-dropdown-trigger-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-dropdown-trigger-rose-border-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-dropdown-trigger-rose-fg,oklch(45.5%_0.188_13.697))] dark:text-[color:var(--zui-dropdown-trigger-rose-fg-dark,oklch(58.6%_0.253_17.585))]",
|
|
19
|
-
purple: "border border-[color:var(--zui-dropdown-trigger-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-dropdown-trigger-purple-border-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-dropdown-trigger-purple-fg,oklch(43.8%_0.218_303.724))] dark:text-[color:var(--zui-dropdown-trigger-purple-fg-dark,oklch(55.8%_0.288_302.321))]",
|
|
20
|
-
pink: "border border-[color:var(--zui-dropdown-trigger-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-dropdown-trigger-pink-border-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-dropdown-trigger-pink-fg,oklch(45.9%_0.187_3.815))] dark:text-[color:var(--zui-dropdown-trigger-pink-fg-dark,oklch(59.2%_0.249_0.584))]",
|
|
21
|
-
orange: "border border-[color:var(--zui-dropdown-trigger-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-dropdown-trigger-orange-border-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-dropdown-trigger-orange-fg,oklch(47%_0.157_37.304))] dark:text-[color:var(--zui-dropdown-trigger-orange-fg-dark,oklch(64.6%_0.222_41.116))]",
|
|
22
|
-
yellow: "border border-[color:var(--zui-dropdown-trigger-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-dropdown-trigger-yellow-border-dark,oklch(68.1%_0.162_75.834))] text-[color:var(--zui-dropdown-trigger-yellow-fg,oklch(47.6%_0.114_61.907))] dark:text-[color:var(--zui-dropdown-trigger-yellow-fg-dark,oklch(68.1%_0.162_75.834))]",
|
|
23
|
-
teal: "border border-[color:var(--zui-dropdown-trigger-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-dropdown-trigger-teal-border-dark,oklch(60%_0.118_184.704))] text-[color:var(--zui-dropdown-trigger-teal-fg,oklch(43.7%_0.078_188.216))] dark:text-[color:var(--zui-dropdown-trigger-teal-fg-dark,oklch(60%_0.118_184.704))]",
|
|
24
|
-
indigo: "border border-[color:var(--zui-dropdown-trigger-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-dropdown-trigger-indigo-border-dark,oklch(51.1%_0.262_276.966))] text-[color:var(--zui-dropdown-trigger-indigo-fg,oklch(39.8%_0.195_277.366))] dark:text-[color:var(--zui-dropdown-trigger-indigo-fg-dark,oklch(51.1%_0.262_276.966))]",
|
|
25
|
-
emerald: "border border-[color:var(--zui-dropdown-trigger-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-dropdown-trigger-emerald-border-dark,oklch(59.6%_0.145_163.225))] text-[color:var(--zui-dropdown-trigger-emerald-fg,oklch(43.2%_0.095_166.913))] dark:text-[color:var(--zui-dropdown-trigger-emerald-fg-dark,oklch(59.6%_0.145_163.225))]",
|
|
26
|
-
gray: "border border-[color:var(--zui-dropdown-trigger-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-dropdown-trigger-gray-border-dark,oklch(44.6%_0.03_256.802))] text-[color:var(--zui-dropdown-trigger-gray-fg,oklch(27.8%_0.033_256.848))] dark:text-[color:var(--zui-dropdown-trigger-gray-fg-dark,oklch(44.6%_0.03_256.802))]",
|
|
27
|
-
amber: "border border-[color:var(--zui-dropdown-trigger-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-dropdown-trigger-amber-border-dark,oklch(66.6%_0.179_58.318))] text-[color:var(--zui-dropdown-trigger-amber-fg,oklch(47.3%_0.137_46.201))] dark:text-[color:var(--zui-dropdown-trigger-amber-fg-dark,oklch(66.6%_0.179_58.318))]",
|
|
28
|
-
violet: "border border-[color:var(--zui-dropdown-trigger-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-dropdown-trigger-violet-border-dark,oklch(54.1%_0.281_293.009))] text-[color:var(--zui-dropdown-trigger-violet-fg,oklch(43.2%_0.232_292.759))] dark:text-[color:var(--zui-dropdown-trigger-violet-fg-dark,oklch(54.1%_0.281_293.009))]",
|
|
29
|
-
"gradient-blue": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-dropdown-trigger-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-dropdown-trigger-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-trigger-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-dropdown-trigger-gradient-blue-fg,oklch(88.2%_0.059_254.128))] dark:text-[color:var(--zui-dropdown-trigger-gradient-blue-fg-dark,oklch(88.2%_0.059_254.128))]",
|
|
30
|
-
"gradient-green": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-dropdown-trigger-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-dropdown-trigger-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-dropdown-trigger-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] text-[color:var(--zui-dropdown-trigger-gradient-green-fg,oklch(92.5%_0.084_155.995))] dark:text-[color:var(--zui-dropdown-trigger-gradient-green-fg-dark,oklch(92.5%_0.084_155.995))]",
|
|
31
|
-
"gradient-red": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-dropdown-trigger-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-dropdown-trigger-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-trigger-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-dropdown-trigger-gradient-red-fg,oklch(88.5%_0.062_18.334))] dark:text-[color:var(--zui-dropdown-trigger-gradient-red-fg-dark,oklch(88.5%_0.062_18.334))]",
|
|
32
|
-
"gradient-yellow": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-dropdown-trigger-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-dropdown-trigger-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-dropdown-trigger-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-dropdown-trigger-gradient-yellow-fg,oklch(94.5%_0.129_101.54))] dark:text-[color:var(--zui-dropdown-trigger-gradient-yellow-fg-dark,oklch(94.5%_0.129_101.54))]",
|
|
33
|
-
"gradient-purple": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-dropdown-trigger-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-dropdown-trigger-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-trigger-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-dropdown-trigger-gradient-purple-fg,oklch(90.2%_0.063_306.703))] dark:text-[color:var(--zui-dropdown-trigger-gradient-purple-fg-dark,oklch(90.2%_0.063_306.703))]",
|
|
34
|
-
"gradient-teal": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-dropdown-trigger-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-dropdown-trigger-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-dropdown-trigger-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] text-[color:var(--zui-dropdown-trigger-gradient-teal-fg,oklch(91%_0.096_180.426))] dark:text-[color:var(--zui-dropdown-trigger-gradient-teal-fg-dark,oklch(91%_0.096_180.426))]",
|
|
35
|
-
"gradient-indigo": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-dropdown-trigger-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-dropdown-trigger-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-trigger-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-dropdown-trigger-gradient-indigo-fg,oklch(87%_0.065_274.039))] dark:text-[color:var(--zui-dropdown-trigger-gradient-indigo-fg-dark,oklch(87%_0.065_274.039))]",
|
|
36
|
-
"gradient-pink": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-dropdown-trigger-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-dropdown-trigger-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-dropdown-trigger-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-dropdown-trigger-gradient-pink-fg,oklch(89.9%_0.061_343.231))] dark:text-[color:var(--zui-dropdown-trigger-gradient-pink-fg-dark,oklch(89.9%_0.061_343.231))]",
|
|
37
|
-
"gradient-orange": "bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-dropdown-trigger-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-dropdown-trigger-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-dropdown-trigger-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] text-[color:var(--zui-dropdown-trigger-gradient-orange-fg,oklch(90.1%_0.076_70.697))] dark:text-[color:var(--zui-dropdown-trigger-gradient-orange-fg-dark,oklch(90.1%_0.076_70.697))]"
|
|
38
|
-
};
|
|
39
|
-
var zuiDropdownTriggerSizes = {
|
|
40
|
-
sm: "px-2 py-1 text-sm",
|
|
41
|
-
md: "px-3 py-2 text-base",
|
|
42
|
-
lg: "px-4 py-3 text-lg"
|
|
43
|
-
};
|
|
44
|
-
var zuiDropdownContentBase = "absolute min-w-[200px] rounded-md p-2 shadow-md z-50 border border-[color:var(--zui-dropdown-content-border,oklch(20.8%_0.042_265.755_/_0.1))] dark:border-[color:var(--zui-dropdown-content-border-dark,#ffffff1a)] bg-[var(--zui-dropdown-content-bg,oklch(96.8%_0.007_247.896))] dark:bg-[var(--zui-dropdown-content-bg-dark,oklch(20.8%_0.042_265.755))] text-[color:var(--zui-dropdown-content-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-dropdown-content-fg-dark,oklch(96.8%_0.007_247.896))] shadow-lg rounded-lg";
|
|
45
|
-
var zuiDropdownPlacements = {
|
|
46
|
-
top: "bottom-full mb-2",
|
|
47
|
-
bottom: "top-full mt-2",
|
|
48
|
-
left: "right-full mr-2",
|
|
49
|
-
right: "left-full ml-2"
|
|
50
|
-
};
|
|
51
|
-
var zuiDropdownSpacing = {
|
|
52
|
-
none: "space-y-0",
|
|
53
|
-
default: "space-y-1",
|
|
54
|
-
sm: "space-y-2",
|
|
55
|
-
md: "space-y-3",
|
|
56
|
-
lg: "space-y-4",
|
|
57
|
-
xl: "space-y-5"
|
|
58
|
-
};
|
|
59
|
-
var zuiDropdownItemBase = "flex items-center justify-between px-3 py-2 text-sm cursor-pointer rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-dropdown-item-ring-focus,oklch(55.1%_0.027_264.364_/_0.6))] dark:focus-visible:ring-[var(--zui-dropdown-item-ring-focus-dark,oklch(55.1%_0.027_264.364_/_0.6))] font-semibold";
|
|
60
|
-
var zuiDropdownItemVariants = {
|
|
61
|
-
default: "hover:bg-[var(--zui-dropdown-item-default-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-default-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-default-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-default-fg-hover-dark,oklch(21%_0.034_264.665))] text-[color:var(--zui-dropdown-item-default-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-default-fg-dark,oklch(96.7%_0.003_264.542))]",
|
|
62
|
-
outline: "hover:bg-[var(--zui-dropdown-item-outline-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-outline-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-outline-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-outline-fg-hover-dark,oklch(21%_0.034_264.665))] border border-[color:var(--zui-dropdown-item-outline-border,#000000)] dark:border-[color:var(--zui-dropdown-item-outline-border-dark,#ffffff)] text-[color:var(--zui-dropdown-item-outline-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-outline-fg-dark,oklch(96.7%_0.003_264.542))]",
|
|
63
|
-
ghost: "hover:bg-[var(--zui-dropdown-item-ghost-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-ghost-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-ghost-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-ghost-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-ghost-bg,transparent)] dark:bg-[var(--zui-dropdown-item-ghost-bg-dark,transparent)] text-[color:var(--zui-dropdown-item-ghost-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-ghost-fg-dark,oklch(96.7%_0.003_264.542))]",
|
|
64
|
-
white: "hover:bg-[var(--zui-dropdown-item-white-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-white-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-white-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-white-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-white-bg,#ffffff)] dark:bg-[var(--zui-dropdown-item-white-bg-dark,#000000)] text-[color:var(--zui-dropdown-item-white-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-white-fg-dark,#ffffff)]",
|
|
65
|
-
black: "hover:bg-[var(--zui-dropdown-item-black-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-black-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-black-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-black-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-black-bg,#000000)] dark:bg-[var(--zui-dropdown-item-black-bg-dark,#ffffff)] text-[color:var(--zui-dropdown-item-black-fg,#ffffff)] dark:text-[color:var(--zui-dropdown-item-black-fg-dark,oklch(21%_0.034_264.665))]",
|
|
66
|
-
sky: "hover:bg-[var(--zui-dropdown-item-sky-bg-hover,oklch(95.1%_0.026_236.824))] dark:hover:bg-[var(--zui-dropdown-item-sky-bg-hover-dark,oklch(95.1%_0.026_236.824))] hover:text-[color:var(--zui-dropdown-item-sky-fg-hover,oklch(44.3%_0.11_240.79))] dark:hover:text-[color:var(--zui-dropdown-item-sky-fg-hover-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-dropdown-item-sky-bg,oklch(90.1%_0.058_230.902))] dark:bg-[var(--zui-dropdown-item-sky-bg-dark,oklch(90.1%_0.058_230.902))] text-[color:var(--zui-dropdown-item-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-dropdown-item-sky-fg-dark,oklch(44.3%_0.11_240.79))]",
|
|
67
|
-
rose: "hover:bg-[var(--zui-dropdown-item-rose-bg-hover,oklch(94.1%_0.03_12.58))] dark:hover:bg-[var(--zui-dropdown-item-rose-bg-hover-dark,oklch(94.1%_0.03_12.58))] hover:text-[color:var(--zui-dropdown-item-rose-fg-hover,oklch(45.5%_0.188_13.697))] dark:hover:text-[color:var(--zui-dropdown-item-rose-fg-hover-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-dropdown-item-rose-bg,oklch(89.2%_0.058_10.001))] dark:bg-[var(--zui-dropdown-item-rose-bg-dark,oklch(89.2%_0.058_10.001))] text-[color:var(--zui-dropdown-item-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-dropdown-item-rose-fg-dark,oklch(45.5%_0.188_13.697))]",
|
|
68
|
-
purple: "hover:bg-[var(--zui-dropdown-item-purple-bg-hover,oklch(94.6%_0.033_307.174))] dark:hover:bg-[var(--zui-dropdown-item-purple-bg-hover-dark,oklch(94.6%_0.033_307.174))] hover:text-[color:var(--zui-dropdown-item-purple-fg-hover,oklch(43.8%_0.218_303.724))] dark:hover:text-[color:var(--zui-dropdown-item-purple-fg-hover-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-dropdown-item-purple-bg,oklch(90.2%_0.063_306.703))] dark:bg-[var(--zui-dropdown-item-purple-bg-dark,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-dropdown-item-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-dropdown-item-purple-fg-dark,oklch(43.8%_0.218_303.724))]",
|
|
69
|
-
pink: "hover:bg-[var(--zui-dropdown-item-pink-bg-hover,oklch(94.8%_0.028_342.258))] dark:hover:bg-[var(--zui-dropdown-item-pink-bg-hover-dark,oklch(94.8%_0.028_342.258))] hover:text-[color:var(--zui-dropdown-item-pink-fg-hover,oklch(45.9%_0.187_3.815))] dark:hover:text-[color:var(--zui-dropdown-item-pink-fg-hover-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-dropdown-item-pink-bg,oklch(89.9%_0.061_343.231))] dark:bg-[var(--zui-dropdown-item-pink-bg-dark,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-dropdown-item-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-dropdown-item-pink-fg-dark,oklch(45.9%_0.187_3.815))]",
|
|
70
|
-
orange: "hover:bg-[var(--zui-dropdown-item-orange-bg-hover,oklch(95.4%_0.038_75.164))] dark:hover:bg-[var(--zui-dropdown-item-orange-bg-hover-dark,oklch(95.4%_0.038_75.164))] hover:text-[color:var(--zui-dropdown-item-orange-fg-hover,oklch(47%_0.157_37.304))] dark:hover:text-[color:var(--zui-dropdown-item-orange-fg-hover-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-dropdown-item-orange-bg,oklch(90.1%_0.076_70.697))] dark:bg-[var(--zui-dropdown-item-orange-bg-dark,oklch(90.1%_0.076_70.697))] text-[color:var(--zui-dropdown-item-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-dropdown-item-orange-fg-dark,oklch(47%_0.157_37.304))]",
|
|
71
|
-
yellow: "hover:bg-[var(--zui-dropdown-item-yellow-bg-hover,oklch(97.3%_0.071_103.193))] dark:hover:bg-[var(--zui-dropdown-item-yellow-bg-hover-dark,oklch(97.3%_0.071_103.193))] hover:text-[color:var(--zui-dropdown-item-yellow-fg-hover,oklch(47.6%_0.114_61.907))] dark:hover:text-[color:var(--zui-dropdown-item-yellow-fg-hover-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-dropdown-item-yellow-bg,oklch(94.5%_0.129_101.54))] dark:bg-[var(--zui-dropdown-item-yellow-bg-dark,oklch(94.5%_0.129_101.54))] text-[color:var(--zui-dropdown-item-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-dropdown-item-yellow-fg-dark,oklch(47.6%_0.114_61.907))]",
|
|
72
|
-
teal: "hover:bg-[var(--zui-dropdown-item-teal-bg-hover,oklch(95.3%_0.051_180.801))] dark:hover:bg-[var(--zui-dropdown-item-teal-bg-hover-dark,oklch(95.3%_0.051_180.801))] hover:text-[color:var(--zui-dropdown-item-teal-fg-hover,oklch(43.7%_0.078_188.216))] dark:hover:text-[color:var(--zui-dropdown-item-teal-fg-hover-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-dropdown-item-teal-bg,oklch(91%_0.096_180.426))] dark:bg-[var(--zui-dropdown-item-teal-bg-dark,oklch(91%_0.096_180.426))] text-[color:var(--zui-dropdown-item-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-dropdown-item-teal-fg-dark,oklch(43.7%_0.078_188.216))]",
|
|
73
|
-
indigo: "hover:bg-[var(--zui-dropdown-item-indigo-bg-hover,oklch(93%_0.034_272.788))] dark:hover:bg-[var(--zui-dropdown-item-indigo-bg-hover-dark,oklch(93%_0.034_272.788))] hover:text-[color:var(--zui-dropdown-item-indigo-fg-hover,oklch(39.8%_0.195_277.366))] dark:hover:text-[color:var(--zui-dropdown-item-indigo-fg-hover-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-dropdown-item-indigo-bg,oklch(87%_0.065_274.039))] dark:bg-[var(--zui-dropdown-item-indigo-bg-dark,oklch(87%_0.065_274.039))] text-[color:var(--zui-dropdown-item-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-dropdown-item-indigo-fg-dark,oklch(39.8%_0.195_277.366))]",
|
|
74
|
-
emerald: "hover:bg-[var(--zui-dropdown-item-emerald-bg-hover,oklch(95%_0.052_163.051))] dark:hover:bg-[var(--zui-dropdown-item-emerald-bg-hover-dark,oklch(95%_0.052_163.051))] hover:text-[color:var(--zui-dropdown-item-emerald-fg-hover,oklch(43.2%_0.095_166.913))] dark:hover:text-[color:var(--zui-dropdown-item-emerald-fg-hover-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-dropdown-item-emerald-bg,oklch(90.5%_0.093_164.15))] dark:bg-[var(--zui-dropdown-item-emerald-bg-dark,oklch(90.5%_0.093_164.15))] text-[color:var(--zui-dropdown-item-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-dropdown-item-emerald-fg-dark,oklch(43.2%_0.095_166.913))]",
|
|
75
|
-
gray: "hover:bg-[var(--zui-dropdown-item-gray-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-gray-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-gray-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-gray-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-gray-bg,oklch(92.8%_0.006_264.531))] dark:bg-[var(--zui-dropdown-item-gray-bg-dark,oklch(92.8%_0.006_264.531))] text-[color:var(--zui-dropdown-item-gray-fg,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-dropdown-item-gray-fg-dark,oklch(27.8%_0.033_256.848))]",
|
|
76
|
-
amber: "hover:bg-[var(--zui-dropdown-item-amber-bg-hover,oklch(96.2%_0.059_95.617))] dark:hover:bg-[var(--zui-dropdown-item-amber-bg-hover-dark,oklch(96.2%_0.059_95.617))] hover:text-[color:var(--zui-dropdown-item-amber-fg-hover,oklch(47.3%_0.137_46.201))] dark:hover:text-[color:var(--zui-dropdown-item-amber-fg-hover-dark,oklch(66.6%_0.179_58.318))] bg-[var(--zui-dropdown-item-amber-bg,oklch(92.4%_0.12_95.746))] dark:bg-[var(--zui-dropdown-item-amber-bg-dark,oklch(92.4%_0.12_95.746))] text-[color:var(--zui-dropdown-item-amber-fg,oklch(41.4%_0.112_45.904))] dark:text-[color:var(--zui-dropdown-item-amber-fg-dark,oklch(47.3%_0.137_46.201))]",
|
|
77
|
-
violet: "hover:bg-[var(--zui-dropdown-item-violet-bg-hover,oklch(94.3%_0.029_294.588))] dark:hover:bg-[var(--zui-dropdown-item-violet-bg-hover-dark,oklch(94.3%_0.029_294.588))] hover:text-[color:var(--zui-dropdown-item-violet-fg-hover,oklch(43.2%_0.232_292.759))] dark:hover:text-[color:var(--zui-dropdown-item-violet-fg-hover-dark,oklch(54.1%_0.281_293.009))] bg-[var(--zui-dropdown-item-violet-bg,oklch(89.4%_0.057_293.283))] dark:bg-[var(--zui-dropdown-item-violet-bg-dark,oklch(89.4%_0.057_293.283))] text-[color:var(--zui-dropdown-item-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-dropdown-item-violet-fg-dark,oklch(43.2%_0.232_292.759))]",
|
|
78
|
-
"gradient-blue": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-dropdown-item-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-dropdown-item-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-item-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] hover:text-[color:var(--zui-dropdown-item-gradient-blue-fg-hover,oklch(62.3%_0.214_259.815))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-blue-fg-hover-dark,oklch(37.9%_0.146_265.522))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-blue-from,oklch(88.2%_0.059_254.128))] to-[var(--zui-dropdown-item-gradient-blue-to,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-dropdown-item-gradient-blue-fg,oklch(37.9%_0.146_265.522))] dark:text-[color:var(--zui-dropdown-item-gradient-blue-fg-dark,oklch(88.2%_0.059_254.128))]",
|
|
79
|
-
"gradient-green": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-dropdown-item-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-dropdown-item-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-dropdown-item-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] hover:text-[color:var(--zui-dropdown-item-gradient-green-fg-hover,oklch(72.3%_0.219_149.579))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-green-fg-hover-dark,oklch(39.3%_0.095_152.535))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-green-from,oklch(92.5%_0.084_155.995))] to-[var(--zui-dropdown-item-gradient-green-to,oklch(93.8%_0.127_124.321))] text-[color:var(--zui-dropdown-item-gradient-green-fg,oklch(39.3%_0.095_152.535))] dark:text-[color:var(--zui-dropdown-item-gradient-green-fg-dark,oklch(92.5%_0.084_155.995))]",
|
|
80
|
-
"gradient-red": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-dropdown-item-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-dropdown-item-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-item-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] hover:text-[color:var(--zui-dropdown-item-gradient-red-fg-hover,oklch(63.7%_0.237_25.331))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-red-fg-hover-dark,oklch(39.6%_0.141_25.723))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-red-from,oklch(88.5%_0.062_18.334))] to-[var(--zui-dropdown-item-gradient-red-to,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-dropdown-item-gradient-red-fg,oklch(39.6%_0.141_25.723))] dark:text-[color:var(--zui-dropdown-item-gradient-red-fg-dark,oklch(88.5%_0.062_18.334))]",
|
|
81
|
-
"gradient-yellow": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-dropdown-item-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-dropdown-item-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-dropdown-item-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] hover:text-[color:var(--zui-dropdown-item-gradient-yellow-fg-hover,oklch(79.5%_0.184_86.047))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-yellow-fg-hover-dark,oklch(42.1%_0.095_57.708))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-yellow-from,oklch(94.5%_0.129_101.54))] to-[var(--zui-dropdown-item-gradient-yellow-to,oklch(90.1%_0.076_70.697))] text-[color:var(--zui-dropdown-item-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-dropdown-item-gradient-yellow-fg-dark,oklch(94.5%_0.129_101.54))]",
|
|
82
|
-
"gradient-purple": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-dropdown-item-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-dropdown-item-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-item-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] hover:text-[color:var(--zui-dropdown-item-gradient-purple-fg-hover,oklch(62.7%_0.265_303.9))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-purple-fg-hover-dark,oklch(38.1%_0.176_304.987))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-purple-from,oklch(90.2%_0.063_306.703))] to-[var(--zui-dropdown-item-gradient-purple-to,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-dropdown-item-gradient-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-dropdown-item-gradient-purple-fg-dark,oklch(90.2%_0.063_306.703))]",
|
|
83
|
-
"gradient-teal": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-dropdown-item-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-dropdown-item-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-dropdown-item-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] hover:text-[color:var(--zui-dropdown-item-gradient-teal-fg-hover,oklch(70.4%_0.14_182.503))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-teal-fg-hover-dark,oklch(38.6%_0.063_188.416))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-teal-from,oklch(91%_0.096_180.426))] to-[var(--zui-dropdown-item-gradient-teal-to,oklch(91.7%_0.08_205.041))] text-[color:var(--zui-dropdown-item-gradient-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-dropdown-item-gradient-teal-fg-dark,oklch(91%_0.096_180.426))]",
|
|
84
|
-
"gradient-indigo": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-dropdown-item-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-dropdown-item-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-item-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] hover:text-[color:var(--zui-dropdown-item-gradient-indigo-fg-hover,oklch(58.5%_0.233_277.117))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-indigo-fg-hover-dark,oklch(35.9%_0.144_278.697))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-indigo-from,oklch(87%_0.065_274.039))] to-[var(--zui-dropdown-item-gradient-indigo-to,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-dropdown-item-gradient-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-dropdown-item-gradient-indigo-fg-dark,oklch(87%_0.065_274.039))]",
|
|
85
|
-
"gradient-pink": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-dropdown-item-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-dropdown-item-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-dropdown-item-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] hover:text-[color:var(--zui-dropdown-item-gradient-pink-fg-hover,oklch(65.6%_0.241_354.308))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-pink-fg-hover-dark,oklch(40.8%_0.153_2.432))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-pink-from,oklch(89.9%_0.061_343.231))] to-[var(--zui-dropdown-item-gradient-pink-to,oklch(89.2%_0.058_10.001))] text-[color:var(--zui-dropdown-item-gradient-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-dropdown-item-gradient-pink-fg-dark,oklch(89.9%_0.061_343.231))]",
|
|
86
|
-
"gradient-orange": "hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-dropdown-item-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-dropdown-item-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-dropdown-item-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] hover:text-[color:var(--zui-dropdown-item-gradient-orange-fg-hover,oklch(70.5%_0.213_47.604))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-orange-fg-hover-dark,oklch(40.8%_0.123_38.172))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-orange-from,oklch(90.1%_0.076_70.697))] to-[var(--zui-dropdown-item-gradient-orange-to,oklch(88.5%_0.062_18.334))] text-[color:var(--zui-dropdown-item-gradient-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-dropdown-item-gradient-orange-fg-dark,oklch(90.1%_0.076_70.697))]"
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
// src/ui/dropdown/variants.ts
|
|
90
10
|
var triggerVariants = cva(zuiDropdownTriggerBase, {
|
|
91
11
|
variants: {
|
|
92
12
|
variant: zuiDropdownTriggerVariants,
|
package/dist/ui/dropdown.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/design-system/dropdown.ts","../../src/ui/dropdown/variants.ts","../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"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","file":"dropdown.mjs","sourcesContent":["export const zuiDropdownTriggerBase =\n \"inline-flex items-center justify-between rounded-md font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-dropdown-trigger-ring-focus,oklch(55.1%_0.027_264.364_/_0.6))] dark:focus-visible:ring-[var(--zui-dropdown-trigger-ring-focus-dark,oklch(55.1%_0.027_264.364_/_0.6))] cursor-pointer\";\n\nexport const zuiDropdownTriggerVariants = {\n default:\n \"bg-[var(--zui-dropdown-trigger-default-bg,oklch(92.8%_0.006_264.531))] dark:bg-[var(--zui-dropdown-trigger-default-bg-dark,oklch(21%_0.034_264.665))] text-[color:var(--zui-dropdown-trigger-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-dropdown-trigger-default-fg-dark,#ffffff)]\",\n outline:\n \"border border-[color:var(--zui-dropdown-trigger-outline-border,oklch(37.3%_0.034_259.733))] dark:border-[color:var(--zui-dropdown-trigger-outline-border-dark,oklch(87.2%_0.01_258.338))] text-[color:var(--zui-dropdown-trigger-outline-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-trigger-outline-fg-dark,oklch(96.7%_0.003_264.542))]\",\n ghost:\n \"bg-[var(--zui-dropdown-trigger-ghost-bg,transparent)] dark:bg-[var(--zui-dropdown-trigger-ghost-bg-dark,transparent)] text-[color:var(--zui-dropdown-trigger-ghost-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-trigger-ghost-fg-dark,oklch(96.7%_0.003_264.542))]\",\n white:\n \"bg-[var(--zui-dropdown-trigger-white-bg,#ffffff)] dark:bg-[var(--zui-dropdown-trigger-white-bg-dark,#ffffff)] text-[color:var(--zui-dropdown-trigger-white-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-trigger-white-fg-dark,oklch(21%_0.034_264.665))]\",\n black:\n \"bg-[var(--zui-dropdown-trigger-black-bg,#000000)] dark:bg-[var(--zui-dropdown-trigger-black-bg-dark,#000000)] text-[color:var(--zui-dropdown-trigger-black-fg,#ffffff)] dark:text-[color:var(--zui-dropdown-trigger-black-fg-dark,#ffffff)]\",\n sky: \"border border-[color:var(--zui-dropdown-trigger-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-dropdown-trigger-sky-border-dark,oklch(58.8%_0.158_241.966))] text-[color:var(--zui-dropdown-trigger-sky-fg,oklch(44.3%_0.11_240.79))] dark:text-[color:var(--zui-dropdown-trigger-sky-fg-dark,oklch(58.8%_0.158_241.966))]\",\n rose: \"border border-[color:var(--zui-dropdown-trigger-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-dropdown-trigger-rose-border-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-dropdown-trigger-rose-fg,oklch(45.5%_0.188_13.697))] dark:text-[color:var(--zui-dropdown-trigger-rose-fg-dark,oklch(58.6%_0.253_17.585))]\",\n purple:\n \"border border-[color:var(--zui-dropdown-trigger-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-dropdown-trigger-purple-border-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-dropdown-trigger-purple-fg,oklch(43.8%_0.218_303.724))] dark:text-[color:var(--zui-dropdown-trigger-purple-fg-dark,oklch(55.8%_0.288_302.321))]\",\n pink: \"border border-[color:var(--zui-dropdown-trigger-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-dropdown-trigger-pink-border-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-dropdown-trigger-pink-fg,oklch(45.9%_0.187_3.815))] dark:text-[color:var(--zui-dropdown-trigger-pink-fg-dark,oklch(59.2%_0.249_0.584))]\",\n orange:\n \"border border-[color:var(--zui-dropdown-trigger-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-dropdown-trigger-orange-border-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-dropdown-trigger-orange-fg,oklch(47%_0.157_37.304))] dark:text-[color:var(--zui-dropdown-trigger-orange-fg-dark,oklch(64.6%_0.222_41.116))]\",\n yellow:\n \"border border-[color:var(--zui-dropdown-trigger-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-dropdown-trigger-yellow-border-dark,oklch(68.1%_0.162_75.834))] text-[color:var(--zui-dropdown-trigger-yellow-fg,oklch(47.6%_0.114_61.907))] dark:text-[color:var(--zui-dropdown-trigger-yellow-fg-dark,oklch(68.1%_0.162_75.834))]\",\n teal: \"border border-[color:var(--zui-dropdown-trigger-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-dropdown-trigger-teal-border-dark,oklch(60%_0.118_184.704))] text-[color:var(--zui-dropdown-trigger-teal-fg,oklch(43.7%_0.078_188.216))] dark:text-[color:var(--zui-dropdown-trigger-teal-fg-dark,oklch(60%_0.118_184.704))]\",\n indigo:\n \"border border-[color:var(--zui-dropdown-trigger-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-dropdown-trigger-indigo-border-dark,oklch(51.1%_0.262_276.966))] text-[color:var(--zui-dropdown-trigger-indigo-fg,oklch(39.8%_0.195_277.366))] dark:text-[color:var(--zui-dropdown-trigger-indigo-fg-dark,oklch(51.1%_0.262_276.966))]\",\n emerald:\n \"border border-[color:var(--zui-dropdown-trigger-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-dropdown-trigger-emerald-border-dark,oklch(59.6%_0.145_163.225))] text-[color:var(--zui-dropdown-trigger-emerald-fg,oklch(43.2%_0.095_166.913))] dark:text-[color:var(--zui-dropdown-trigger-emerald-fg-dark,oklch(59.6%_0.145_163.225))]\",\n gray: \"border border-[color:var(--zui-dropdown-trigger-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-dropdown-trigger-gray-border-dark,oklch(44.6%_0.03_256.802))] text-[color:var(--zui-dropdown-trigger-gray-fg,oklch(27.8%_0.033_256.848))] dark:text-[color:var(--zui-dropdown-trigger-gray-fg-dark,oklch(44.6%_0.03_256.802))]\",\n amber:\n \"border border-[color:var(--zui-dropdown-trigger-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-dropdown-trigger-amber-border-dark,oklch(66.6%_0.179_58.318))] text-[color:var(--zui-dropdown-trigger-amber-fg,oklch(47.3%_0.137_46.201))] dark:text-[color:var(--zui-dropdown-trigger-amber-fg-dark,oklch(66.6%_0.179_58.318))]\",\n violet:\n \"border border-[color:var(--zui-dropdown-trigger-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-dropdown-trigger-violet-border-dark,oklch(54.1%_0.281_293.009))] text-[color:var(--zui-dropdown-trigger-violet-fg,oklch(43.2%_0.232_292.759))] dark:text-[color:var(--zui-dropdown-trigger-violet-fg-dark,oklch(54.1%_0.281_293.009))]\",\n \"gradient-blue\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-dropdown-trigger-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-dropdown-trigger-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-trigger-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-dropdown-trigger-gradient-blue-fg,oklch(88.2%_0.059_254.128))] dark:text-[color:var(--zui-dropdown-trigger-gradient-blue-fg-dark,oklch(88.2%_0.059_254.128))]\",\n \"gradient-green\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-dropdown-trigger-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-dropdown-trigger-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-dropdown-trigger-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] text-[color:var(--zui-dropdown-trigger-gradient-green-fg,oklch(92.5%_0.084_155.995))] dark:text-[color:var(--zui-dropdown-trigger-gradient-green-fg-dark,oklch(92.5%_0.084_155.995))]\",\n \"gradient-red\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-dropdown-trigger-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-dropdown-trigger-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-trigger-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-dropdown-trigger-gradient-red-fg,oklch(88.5%_0.062_18.334))] dark:text-[color:var(--zui-dropdown-trigger-gradient-red-fg-dark,oklch(88.5%_0.062_18.334))]\",\n \"gradient-yellow\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-dropdown-trigger-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-dropdown-trigger-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-dropdown-trigger-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-dropdown-trigger-gradient-yellow-fg,oklch(94.5%_0.129_101.54))] dark:text-[color:var(--zui-dropdown-trigger-gradient-yellow-fg-dark,oklch(94.5%_0.129_101.54))]\",\n \"gradient-purple\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-dropdown-trigger-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-dropdown-trigger-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-trigger-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-dropdown-trigger-gradient-purple-fg,oklch(90.2%_0.063_306.703))] dark:text-[color:var(--zui-dropdown-trigger-gradient-purple-fg-dark,oklch(90.2%_0.063_306.703))]\",\n \"gradient-teal\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-dropdown-trigger-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-dropdown-trigger-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-dropdown-trigger-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] text-[color:var(--zui-dropdown-trigger-gradient-teal-fg,oklch(91%_0.096_180.426))] dark:text-[color:var(--zui-dropdown-trigger-gradient-teal-fg-dark,oklch(91%_0.096_180.426))]\",\n \"gradient-indigo\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-dropdown-trigger-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-dropdown-trigger-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-trigger-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-dropdown-trigger-gradient-indigo-fg,oklch(87%_0.065_274.039))] dark:text-[color:var(--zui-dropdown-trigger-gradient-indigo-fg-dark,oklch(87%_0.065_274.039))]\",\n \"gradient-pink\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-dropdown-trigger-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-dropdown-trigger-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-dropdown-trigger-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-dropdown-trigger-gradient-pink-fg,oklch(89.9%_0.061_343.231))] dark:text-[color:var(--zui-dropdown-trigger-gradient-pink-fg-dark,oklch(89.9%_0.061_343.231))]\",\n \"gradient-orange\":\n \"bg-linear-to-r from-[var(--zui-dropdown-trigger-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-dropdown-trigger-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-dropdown-trigger-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-dropdown-trigger-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] text-[color:var(--zui-dropdown-trigger-gradient-orange-fg,oklch(90.1%_0.076_70.697))] dark:text-[color:var(--zui-dropdown-trigger-gradient-orange-fg-dark,oklch(90.1%_0.076_70.697))]\",\n} as const;\n\nexport const zuiDropdownTriggerSizes = {\n sm: \"px-2 py-1 text-sm\",\n md: \"px-3 py-2 text-base\",\n lg: \"px-4 py-3 text-lg\",\n} as const;\n\nexport const zuiDropdownContentBase =\n \"absolute min-w-[200px] rounded-md p-2 shadow-md z-50 border border-[color:var(--zui-dropdown-content-border,oklch(20.8%_0.042_265.755_/_0.1))] dark:border-[color:var(--zui-dropdown-content-border-dark,#ffffff1a)] bg-[var(--zui-dropdown-content-bg,oklch(96.8%_0.007_247.896))] dark:bg-[var(--zui-dropdown-content-bg-dark,oklch(20.8%_0.042_265.755))] text-[color:var(--zui-dropdown-content-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-dropdown-content-fg-dark,oklch(96.8%_0.007_247.896))] shadow-lg rounded-lg\";\n\nexport const zuiDropdownPlacements = {\n top: \"bottom-full mb-2\",\n bottom: \"top-full mt-2\",\n left: \"right-full mr-2\",\n right: \"left-full ml-2\",\n} as const;\n\nexport const zuiDropdownSpacing = {\n none: \"space-y-0\",\n default: \"space-y-1\",\n sm: \"space-y-2\",\n md: \"space-y-3\",\n lg: \"space-y-4\",\n xl: \"space-y-5\",\n} as const;\n\nexport const zuiDropdownItemBase =\n \"flex items-center justify-between px-3 py-2 text-sm cursor-pointer rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-dropdown-item-ring-focus,oklch(55.1%_0.027_264.364_/_0.6))] dark:focus-visible:ring-[var(--zui-dropdown-item-ring-focus-dark,oklch(55.1%_0.027_264.364_/_0.6))] font-semibold\";\n\nexport const zuiDropdownItemVariants = {\n default:\n \"hover:bg-[var(--zui-dropdown-item-default-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-default-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-default-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-default-fg-hover-dark,oklch(21%_0.034_264.665))] text-[color:var(--zui-dropdown-item-default-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-default-fg-dark,oklch(96.7%_0.003_264.542))]\",\n outline:\n \"hover:bg-[var(--zui-dropdown-item-outline-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-outline-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-outline-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-outline-fg-hover-dark,oklch(21%_0.034_264.665))] border border-[color:var(--zui-dropdown-item-outline-border,#000000)] dark:border-[color:var(--zui-dropdown-item-outline-border-dark,#ffffff)] text-[color:var(--zui-dropdown-item-outline-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-outline-fg-dark,oklch(96.7%_0.003_264.542))]\",\n ghost:\n \"hover:bg-[var(--zui-dropdown-item-ghost-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-ghost-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-ghost-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-ghost-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-ghost-bg,transparent)] dark:bg-[var(--zui-dropdown-item-ghost-bg-dark,transparent)] text-[color:var(--zui-dropdown-item-ghost-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-ghost-fg-dark,oklch(96.7%_0.003_264.542))]\",\n white:\n \"hover:bg-[var(--zui-dropdown-item-white-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-white-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-white-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-white-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-white-bg,#ffffff)] dark:bg-[var(--zui-dropdown-item-white-bg-dark,#000000)] text-[color:var(--zui-dropdown-item-white-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-dropdown-item-white-fg-dark,#ffffff)]\",\n black:\n \"hover:bg-[var(--zui-dropdown-item-black-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-black-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-black-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-black-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-black-bg,#000000)] dark:bg-[var(--zui-dropdown-item-black-bg-dark,#ffffff)] text-[color:var(--zui-dropdown-item-black-fg,#ffffff)] dark:text-[color:var(--zui-dropdown-item-black-fg-dark,oklch(21%_0.034_264.665))]\",\n sky: \"hover:bg-[var(--zui-dropdown-item-sky-bg-hover,oklch(95.1%_0.026_236.824))] dark:hover:bg-[var(--zui-dropdown-item-sky-bg-hover-dark,oklch(95.1%_0.026_236.824))] hover:text-[color:var(--zui-dropdown-item-sky-fg-hover,oklch(44.3%_0.11_240.79))] dark:hover:text-[color:var(--zui-dropdown-item-sky-fg-hover-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-dropdown-item-sky-bg,oklch(90.1%_0.058_230.902))] dark:bg-[var(--zui-dropdown-item-sky-bg-dark,oklch(90.1%_0.058_230.902))] text-[color:var(--zui-dropdown-item-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-dropdown-item-sky-fg-dark,oklch(44.3%_0.11_240.79))]\",\n rose: \"hover:bg-[var(--zui-dropdown-item-rose-bg-hover,oklch(94.1%_0.03_12.58))] dark:hover:bg-[var(--zui-dropdown-item-rose-bg-hover-dark,oklch(94.1%_0.03_12.58))] hover:text-[color:var(--zui-dropdown-item-rose-fg-hover,oklch(45.5%_0.188_13.697))] dark:hover:text-[color:var(--zui-dropdown-item-rose-fg-hover-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-dropdown-item-rose-bg,oklch(89.2%_0.058_10.001))] dark:bg-[var(--zui-dropdown-item-rose-bg-dark,oklch(89.2%_0.058_10.001))] text-[color:var(--zui-dropdown-item-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-dropdown-item-rose-fg-dark,oklch(45.5%_0.188_13.697))]\",\n purple:\n \"hover:bg-[var(--zui-dropdown-item-purple-bg-hover,oklch(94.6%_0.033_307.174))] dark:hover:bg-[var(--zui-dropdown-item-purple-bg-hover-dark,oklch(94.6%_0.033_307.174))] hover:text-[color:var(--zui-dropdown-item-purple-fg-hover,oklch(43.8%_0.218_303.724))] dark:hover:text-[color:var(--zui-dropdown-item-purple-fg-hover-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-dropdown-item-purple-bg,oklch(90.2%_0.063_306.703))] dark:bg-[var(--zui-dropdown-item-purple-bg-dark,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-dropdown-item-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-dropdown-item-purple-fg-dark,oklch(43.8%_0.218_303.724))]\",\n pink: \"hover:bg-[var(--zui-dropdown-item-pink-bg-hover,oklch(94.8%_0.028_342.258))] dark:hover:bg-[var(--zui-dropdown-item-pink-bg-hover-dark,oklch(94.8%_0.028_342.258))] hover:text-[color:var(--zui-dropdown-item-pink-fg-hover,oklch(45.9%_0.187_3.815))] dark:hover:text-[color:var(--zui-dropdown-item-pink-fg-hover-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-dropdown-item-pink-bg,oklch(89.9%_0.061_343.231))] dark:bg-[var(--zui-dropdown-item-pink-bg-dark,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-dropdown-item-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-dropdown-item-pink-fg-dark,oklch(45.9%_0.187_3.815))]\",\n orange:\n \"hover:bg-[var(--zui-dropdown-item-orange-bg-hover,oklch(95.4%_0.038_75.164))] dark:hover:bg-[var(--zui-dropdown-item-orange-bg-hover-dark,oklch(95.4%_0.038_75.164))] hover:text-[color:var(--zui-dropdown-item-orange-fg-hover,oklch(47%_0.157_37.304))] dark:hover:text-[color:var(--zui-dropdown-item-orange-fg-hover-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-dropdown-item-orange-bg,oklch(90.1%_0.076_70.697))] dark:bg-[var(--zui-dropdown-item-orange-bg-dark,oklch(90.1%_0.076_70.697))] text-[color:var(--zui-dropdown-item-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-dropdown-item-orange-fg-dark,oklch(47%_0.157_37.304))]\",\n yellow:\n \"hover:bg-[var(--zui-dropdown-item-yellow-bg-hover,oklch(97.3%_0.071_103.193))] dark:hover:bg-[var(--zui-dropdown-item-yellow-bg-hover-dark,oklch(97.3%_0.071_103.193))] hover:text-[color:var(--zui-dropdown-item-yellow-fg-hover,oklch(47.6%_0.114_61.907))] dark:hover:text-[color:var(--zui-dropdown-item-yellow-fg-hover-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-dropdown-item-yellow-bg,oklch(94.5%_0.129_101.54))] dark:bg-[var(--zui-dropdown-item-yellow-bg-dark,oklch(94.5%_0.129_101.54))] text-[color:var(--zui-dropdown-item-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-dropdown-item-yellow-fg-dark,oklch(47.6%_0.114_61.907))]\",\n teal: \"hover:bg-[var(--zui-dropdown-item-teal-bg-hover,oklch(95.3%_0.051_180.801))] dark:hover:bg-[var(--zui-dropdown-item-teal-bg-hover-dark,oklch(95.3%_0.051_180.801))] hover:text-[color:var(--zui-dropdown-item-teal-fg-hover,oklch(43.7%_0.078_188.216))] dark:hover:text-[color:var(--zui-dropdown-item-teal-fg-hover-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-dropdown-item-teal-bg,oklch(91%_0.096_180.426))] dark:bg-[var(--zui-dropdown-item-teal-bg-dark,oklch(91%_0.096_180.426))] text-[color:var(--zui-dropdown-item-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-dropdown-item-teal-fg-dark,oklch(43.7%_0.078_188.216))]\",\n indigo:\n \"hover:bg-[var(--zui-dropdown-item-indigo-bg-hover,oklch(93%_0.034_272.788))] dark:hover:bg-[var(--zui-dropdown-item-indigo-bg-hover-dark,oklch(93%_0.034_272.788))] hover:text-[color:var(--zui-dropdown-item-indigo-fg-hover,oklch(39.8%_0.195_277.366))] dark:hover:text-[color:var(--zui-dropdown-item-indigo-fg-hover-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-dropdown-item-indigo-bg,oklch(87%_0.065_274.039))] dark:bg-[var(--zui-dropdown-item-indigo-bg-dark,oklch(87%_0.065_274.039))] text-[color:var(--zui-dropdown-item-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-dropdown-item-indigo-fg-dark,oklch(39.8%_0.195_277.366))]\",\n emerald:\n \"hover:bg-[var(--zui-dropdown-item-emerald-bg-hover,oklch(95%_0.052_163.051))] dark:hover:bg-[var(--zui-dropdown-item-emerald-bg-hover-dark,oklch(95%_0.052_163.051))] hover:text-[color:var(--zui-dropdown-item-emerald-fg-hover,oklch(43.2%_0.095_166.913))] dark:hover:text-[color:var(--zui-dropdown-item-emerald-fg-hover-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-dropdown-item-emerald-bg,oklch(90.5%_0.093_164.15))] dark:bg-[var(--zui-dropdown-item-emerald-bg-dark,oklch(90.5%_0.093_164.15))] text-[color:var(--zui-dropdown-item-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-dropdown-item-emerald-fg-dark,oklch(43.2%_0.095_166.913))]\",\n gray: \"hover:bg-[var(--zui-dropdown-item-gray-bg-hover,oklch(96.7%_0.003_264.542))] dark:hover:bg-[var(--zui-dropdown-item-gray-bg-hover-dark,oklch(96.7%_0.003_264.542))] hover:text-[color:var(--zui-dropdown-item-gray-fg-hover,oklch(55.1%_0.027_264.364))] dark:hover:text-[color:var(--zui-dropdown-item-gray-fg-hover-dark,oklch(21%_0.034_264.665))] bg-[var(--zui-dropdown-item-gray-bg,oklch(92.8%_0.006_264.531))] dark:bg-[var(--zui-dropdown-item-gray-bg-dark,oklch(92.8%_0.006_264.531))] text-[color:var(--zui-dropdown-item-gray-fg,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-dropdown-item-gray-fg-dark,oklch(27.8%_0.033_256.848))]\",\n amber:\n \"hover:bg-[var(--zui-dropdown-item-amber-bg-hover,oklch(96.2%_0.059_95.617))] dark:hover:bg-[var(--zui-dropdown-item-amber-bg-hover-dark,oklch(96.2%_0.059_95.617))] hover:text-[color:var(--zui-dropdown-item-amber-fg-hover,oklch(47.3%_0.137_46.201))] dark:hover:text-[color:var(--zui-dropdown-item-amber-fg-hover-dark,oklch(66.6%_0.179_58.318))] bg-[var(--zui-dropdown-item-amber-bg,oklch(92.4%_0.12_95.746))] dark:bg-[var(--zui-dropdown-item-amber-bg-dark,oklch(92.4%_0.12_95.746))] text-[color:var(--zui-dropdown-item-amber-fg,oklch(41.4%_0.112_45.904))] dark:text-[color:var(--zui-dropdown-item-amber-fg-dark,oklch(47.3%_0.137_46.201))]\",\n violet:\n \"hover:bg-[var(--zui-dropdown-item-violet-bg-hover,oklch(94.3%_0.029_294.588))] dark:hover:bg-[var(--zui-dropdown-item-violet-bg-hover-dark,oklch(94.3%_0.029_294.588))] hover:text-[color:var(--zui-dropdown-item-violet-fg-hover,oklch(43.2%_0.232_292.759))] dark:hover:text-[color:var(--zui-dropdown-item-violet-fg-hover-dark,oklch(54.1%_0.281_293.009))] bg-[var(--zui-dropdown-item-violet-bg,oklch(89.4%_0.057_293.283))] dark:bg-[var(--zui-dropdown-item-violet-bg-dark,oklch(89.4%_0.057_293.283))] text-[color:var(--zui-dropdown-item-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-dropdown-item-violet-fg-dark,oklch(43.2%_0.232_292.759))]\",\n \"gradient-blue\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-dropdown-item-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-dropdown-item-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-item-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] hover:text-[color:var(--zui-dropdown-item-gradient-blue-fg-hover,oklch(62.3%_0.214_259.815))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-blue-fg-hover-dark,oklch(37.9%_0.146_265.522))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-blue-from,oklch(88.2%_0.059_254.128))] to-[var(--zui-dropdown-item-gradient-blue-to,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-dropdown-item-gradient-blue-fg,oklch(37.9%_0.146_265.522))] dark:text-[color:var(--zui-dropdown-item-gradient-blue-fg-dark,oklch(88.2%_0.059_254.128))]\",\n \"gradient-green\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-dropdown-item-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-dropdown-item-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-dropdown-item-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] hover:text-[color:var(--zui-dropdown-item-gradient-green-fg-hover,oklch(72.3%_0.219_149.579))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-green-fg-hover-dark,oklch(39.3%_0.095_152.535))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-green-from,oklch(92.5%_0.084_155.995))] to-[var(--zui-dropdown-item-gradient-green-to,oklch(93.8%_0.127_124.321))] text-[color:var(--zui-dropdown-item-gradient-green-fg,oklch(39.3%_0.095_152.535))] dark:text-[color:var(--zui-dropdown-item-gradient-green-fg-dark,oklch(92.5%_0.084_155.995))]\",\n \"gradient-red\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-dropdown-item-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-dropdown-item-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-item-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] hover:text-[color:var(--zui-dropdown-item-gradient-red-fg-hover,oklch(63.7%_0.237_25.331))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-red-fg-hover-dark,oklch(39.6%_0.141_25.723))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-red-from,oklch(88.5%_0.062_18.334))] to-[var(--zui-dropdown-item-gradient-red-to,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-dropdown-item-gradient-red-fg,oklch(39.6%_0.141_25.723))] dark:text-[color:var(--zui-dropdown-item-gradient-red-fg-dark,oklch(88.5%_0.062_18.334))]\",\n \"gradient-yellow\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-dropdown-item-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-dropdown-item-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-dropdown-item-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] hover:text-[color:var(--zui-dropdown-item-gradient-yellow-fg-hover,oklch(79.5%_0.184_86.047))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-yellow-fg-hover-dark,oklch(42.1%_0.095_57.708))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-yellow-from,oklch(94.5%_0.129_101.54))] to-[var(--zui-dropdown-item-gradient-yellow-to,oklch(90.1%_0.076_70.697))] text-[color:var(--zui-dropdown-item-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-dropdown-item-gradient-yellow-fg-dark,oklch(94.5%_0.129_101.54))]\",\n \"gradient-purple\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-dropdown-item-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-dropdown-item-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-dropdown-item-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] hover:text-[color:var(--zui-dropdown-item-gradient-purple-fg-hover,oklch(62.7%_0.265_303.9))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-purple-fg-hover-dark,oklch(38.1%_0.176_304.987))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-purple-from,oklch(90.2%_0.063_306.703))] to-[var(--zui-dropdown-item-gradient-purple-to,oklch(89.9%_0.061_343.231))] text-[color:var(--zui-dropdown-item-gradient-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-dropdown-item-gradient-purple-fg-dark,oklch(90.2%_0.063_306.703))]\",\n \"gradient-teal\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-dropdown-item-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-dropdown-item-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-dropdown-item-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] hover:text-[color:var(--zui-dropdown-item-gradient-teal-fg-hover,oklch(70.4%_0.14_182.503))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-teal-fg-hover-dark,oklch(38.6%_0.063_188.416))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-teal-from,oklch(91%_0.096_180.426))] to-[var(--zui-dropdown-item-gradient-teal-to,oklch(91.7%_0.08_205.041))] text-[color:var(--zui-dropdown-item-gradient-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-dropdown-item-gradient-teal-fg-dark,oklch(91%_0.096_180.426))]\",\n \"gradient-indigo\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-dropdown-item-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-dropdown-item-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-dropdown-item-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] hover:text-[color:var(--zui-dropdown-item-gradient-indigo-fg-hover,oklch(58.5%_0.233_277.117))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-indigo-fg-hover-dark,oklch(35.9%_0.144_278.697))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-indigo-from,oklch(87%_0.065_274.039))] to-[var(--zui-dropdown-item-gradient-indigo-to,oklch(90.2%_0.063_306.703))] text-[color:var(--zui-dropdown-item-gradient-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-dropdown-item-gradient-indigo-fg-dark,oklch(87%_0.065_274.039))]\",\n \"gradient-pink\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-dropdown-item-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-dropdown-item-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-dropdown-item-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] hover:text-[color:var(--zui-dropdown-item-gradient-pink-fg-hover,oklch(65.6%_0.241_354.308))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-pink-fg-hover-dark,oklch(40.8%_0.153_2.432))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-pink-from,oklch(89.9%_0.061_343.231))] to-[var(--zui-dropdown-item-gradient-pink-to,oklch(89.2%_0.058_10.001))] text-[color:var(--zui-dropdown-item-gradient-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-dropdown-item-gradient-pink-fg-dark,oklch(89.9%_0.061_343.231))]\",\n \"gradient-orange\":\n \"hover:bg-linear-to-r from-[var(--zui-dropdown-item-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-dropdown-item-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-dropdown-item-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-dropdown-item-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] hover:text-[color:var(--zui-dropdown-item-gradient-orange-fg-hover,oklch(70.5%_0.213_47.604))] dark:hover:text-[color:var(--zui-dropdown-item-gradient-orange-fg-hover-dark,oklch(40.8%_0.123_38.172))] bg-linear-to-r from-[var(--zui-dropdown-item-gradient-orange-from,oklch(90.1%_0.076_70.697))] to-[var(--zui-dropdown-item-gradient-orange-to,oklch(88.5%_0.062_18.334))] text-[color:var(--zui-dropdown-item-gradient-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-dropdown-item-gradient-orange-fg-dark,oklch(90.1%_0.076_70.697))]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiDropdownContentBase,\n zuiDropdownItemBase,\n zuiDropdownItemVariants,\n zuiDropdownPlacements,\n zuiDropdownSpacing,\n zuiDropdownTriggerBase,\n zuiDropdownTriggerSizes,\n zuiDropdownTriggerVariants,\n} from \"../../design-system/dropdown\";\n\nexport const triggerVariants = cva(zuiDropdownTriggerBase, {\n variants: {\n variant: zuiDropdownTriggerVariants,\n size: zuiDropdownTriggerSizes,\n },\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n },\n});\n\nexport const contentVariants = cva(zuiDropdownContentBase, {\n variants: {\n placement: zuiDropdownPlacements,\n spacing: zuiDropdownSpacing,\n },\n defaultVariants: {\n placement: \"bottom\",\n spacing: \"default\",\n },\n});\n\nexport const itemVariants = cva(zuiDropdownItemBase, {\n variants: {\n variant: zuiDropdownItemVariants,\n },\n defaultVariants: {\n variant: \"default\",\n },\n});\n","\"use client\";\n\nimport {\n createContext,\n useContext,\n useState,\n useRef,\n useEffect,\n useId,\n} from \"react\";\nimport { FiCheck } from \"react-icons/fi\";\nimport { cn } from \"../../lib/utils\";\nimport type {\n DropdownContextType,\n DropdownProps,\n DropdownTriggerProps,\n DropdownContentProps,\n DropdownItemProps,\n} from \"./types\";\nimport { triggerVariants, contentVariants, itemVariants } from \"./variants\";\nimport { useClickOutside } from \"../../hooks/useClickOutside\";\n\n/* =========================\n Context\n========================= */\nconst DropdownContext = createContext<DropdownContextType | null>(null);\n\nconst useDropdown = () => {\n const ctx = useContext(DropdownContext);\n if (!ctx) throw new Error(\"Use inside Dropdown\");\n return ctx;\n};\n\n/* =========================\n Root\n========================= */\nexport const Dropdown = ({\n children,\n defaultOpen = false,\n open: controlledOpen,\n onOpenChange,\n multiSelect = false,\n}: DropdownProps) => {\n const menuId = `${useId()}-menu`;\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const [selectedValues, setSelectedValues] = useState<string[]>([]);\n\n const open = controlledOpen ?? uncontrolledOpen;\n\n const setOpen = (val: boolean) => {\n if (controlledOpen !== undefined) {\n onOpenChange?.(val);\n } else {\n setUncontrolledOpen(val);\n }\n };\n\n const toggle = () => setOpen(!open);\n\n const toggleSelect = (value: string) => {\n if (!multiSelect) {\n setSelectedValues([value]);\n setOpen(false);\n return;\n }\n\n setSelectedValues((prev) =>\n prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value],\n );\n };\n\n return (\n <DropdownContext.Provider\n value={{\n open,\n setOpen,\n toggle,\n selectedValues,\n toggleSelect,\n multiSelect,\n menuId,\n }}\n >\n <div className=\"relative inline-block\">{children}</div>\n </DropdownContext.Provider>\n );\n};\n\n/* =========================\n Trigger\n========================= */\nexport const DropdownTrigger = ({\n children,\n className,\n variant,\n size,\n onClick,\n ...props\n}: DropdownTriggerProps) => {\n const { toggle, open, menuId } = useDropdown();\n\n return (\n <button\n type=\"button\"\n aria-expanded={open}\n aria-haspopup=\"menu\"\n aria-controls={menuId}\n className={cn(triggerVariants({ variant, size }), className)}\n {...props}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented) {\n toggle();\n }\n }}\n >\n {children}\n </button>\n );\n};\n\n/* =========================\n Content\n========================= */\nexport const DropdownContent = ({\n children,\n className,\n placement = \"bottom\",\n spacing = \"default\",\n divider,\n ...props\n}: DropdownContentProps) => {\n const { open, setOpen, menuId } = useDropdown();\n const ref = useRef<HTMLDivElement>(null);\n\n // click outside\n useClickOutside({ ref, setOpen });\n\n if (!open) return null;\n\n return (\n <div\n ref={ref}\n id={menuId}\n role=\"menu\"\n className={cn(\n contentVariants({ placement, spacing }),\n className,\n divider && \"divide-y divide-current\"\n )}\n {...props}\n >\n {children}\n </div>\n );\n};\n\n/* =========================\n Item\n========================= */\nexport const DropdownItem = ({\n children,\n value,\n className,\n variant,\n onSelect,\n leftIcon,\n rightIcon,\n ...props\n}: DropdownItemProps) => {\n const { toggleSelect, selectedValues } = useDropdown();\n const isSelected = selectedValues.includes(value);\n\n const handleClick = () => {\n toggleSelect(value);\n onSelect?.();\n };\n\n return (\n <div\n role=\"menuitem\"\n tabIndex={0}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n handleClick();\n }\n }}\n className={cn(itemVariants({ variant }), className)}\n {...props}\n >\n <div className=\"flex items-center gap-2\">\n {leftIcon}\n {children}\n </div>\n\n <div className=\"flex items-center gap-2\">\n {isSelected && <FiCheck />}\n {rightIcon}\n </div>\n </div>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/ui/dropdown/variants.ts","../../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"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","file":"dropdown.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n zuiDropdownContentBase,\n zuiDropdownItemBase,\n zuiDropdownItemVariants,\n zuiDropdownPlacements,\n zuiDropdownSpacing,\n zuiDropdownTriggerBase,\n zuiDropdownTriggerSizes,\n zuiDropdownTriggerVariants,\n} from \"../../design-system/dropdown\";\n\nexport const triggerVariants = cva(zuiDropdownTriggerBase, {\n variants: {\n variant: zuiDropdownTriggerVariants,\n size: zuiDropdownTriggerSizes,\n },\n defaultVariants: {\n variant: \"default\",\n size: \"md\",\n },\n});\n\nexport const contentVariants = cva(zuiDropdownContentBase, {\n variants: {\n placement: zuiDropdownPlacements,\n spacing: zuiDropdownSpacing,\n },\n defaultVariants: {\n placement: \"bottom\",\n spacing: \"default\",\n },\n});\n\nexport const itemVariants = cva(zuiDropdownItemBase, {\n variants: {\n variant: zuiDropdownItemVariants,\n },\n defaultVariants: {\n variant: \"default\",\n },\n});\n","\"use client\";\n\nimport {\n createContext,\n useContext,\n useState,\n useRef,\n useEffect,\n useId,\n} from \"react\";\nimport { FiCheck } from \"react-icons/fi\";\nimport { cn } from \"../../lib/utils\";\nimport type {\n DropdownContextType,\n DropdownProps,\n DropdownTriggerProps,\n DropdownContentProps,\n DropdownItemProps,\n} from \"./types\";\nimport { triggerVariants, contentVariants, itemVariants } from \"./variants\";\nimport { useClickOutside } from \"../../hooks/useClickOutside\";\n\n/* =========================\n Context\n========================= */\nconst DropdownContext = createContext<DropdownContextType | null>(null);\n\nconst useDropdown = () => {\n const ctx = useContext(DropdownContext);\n if (!ctx) throw new Error(\"Use inside Dropdown\");\n return ctx;\n};\n\n/* =========================\n Root\n========================= */\nexport const Dropdown = ({\n children,\n defaultOpen = false,\n open: controlledOpen,\n onOpenChange,\n multiSelect = false,\n}: DropdownProps) => {\n const menuId = `${useId()}-menu`;\n const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n const [selectedValues, setSelectedValues] = useState<string[]>([]);\n\n const open = controlledOpen ?? uncontrolledOpen;\n\n const setOpen = (val: boolean) => {\n if (controlledOpen !== undefined) {\n onOpenChange?.(val);\n } else {\n setUncontrolledOpen(val);\n }\n };\n\n const toggle = () => setOpen(!open);\n\n const toggleSelect = (value: string) => {\n if (!multiSelect) {\n setSelectedValues([value]);\n setOpen(false);\n return;\n }\n\n setSelectedValues((prev) =>\n prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value],\n );\n };\n\n return (\n <DropdownContext.Provider\n value={{\n open,\n setOpen,\n toggle,\n selectedValues,\n toggleSelect,\n multiSelect,\n menuId,\n }}\n >\n <div className=\"relative inline-block\">{children}</div>\n </DropdownContext.Provider>\n );\n};\n\n/* =========================\n Trigger\n========================= */\nexport const DropdownTrigger = ({\n children,\n className,\n variant,\n size,\n onClick,\n ...props\n}: DropdownTriggerProps) => {\n const { toggle, open, menuId } = useDropdown();\n\n return (\n <button\n type=\"button\"\n aria-expanded={open}\n aria-haspopup=\"menu\"\n aria-controls={menuId}\n className={cn(triggerVariants({ variant, size }), className)}\n {...props}\n onClick={(event) => {\n onClick?.(event);\n if (!event.defaultPrevented) {\n toggle();\n }\n }}\n >\n {children}\n </button>\n );\n};\n\n/* =========================\n Content\n========================= */\nexport const DropdownContent = ({\n children,\n className,\n placement = \"bottom\",\n spacing = \"default\",\n divider,\n ...props\n}: DropdownContentProps) => {\n const { open, setOpen, menuId } = useDropdown();\n const ref = useRef<HTMLDivElement>(null);\n\n // click outside\n useClickOutside({ ref, setOpen });\n\n if (!open) return null;\n\n return (\n <div\n ref={ref}\n id={menuId}\n role=\"menu\"\n className={cn(\n contentVariants({ placement, spacing }),\n className,\n divider && \"divide-y divide-current\"\n )}\n {...props}\n >\n {children}\n </div>\n );\n};\n\n/* =========================\n Item\n========================= */\nexport const DropdownItem = ({\n children,\n value,\n className,\n variant,\n onSelect,\n leftIcon,\n rightIcon,\n ...props\n}: DropdownItemProps) => {\n const { toggleSelect, selectedValues } = useDropdown();\n const isSelected = selectedValues.includes(value);\n\n const handleClick = () => {\n toggleSelect(value);\n onSelect?.();\n };\n\n return (\n <div\n role=\"menuitem\"\n tabIndex={0}\n onClick={handleClick}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n handleClick();\n }\n }}\n className={cn(itemVariants({ variant }), className)}\n {...props}\n >\n <div className=\"flex items-center gap-2\">\n {leftIcon}\n {children}\n </div>\n\n <div className=\"flex items-center gap-2\">\n {isSelected && <FiCheck />}\n {rightIcon}\n </div>\n </div>\n );\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/ui/scroll-area/scroll-area.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../src/ui/scroll-area/scroll-area.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/C,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,2CAoDhD;yBApDe,UAAU"}
|