@zentauri-ui/zentauri-components 1.7.4 → 1.7.6

package/dist/ui/scroll-area.js

@@ -0,0 +1,123 @@
+"use client";
+'use strict';
+
+var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/design-system/scroll-area.ts
+var zuiScrollAreaBase = "relative min-w-0 rounded-xl outline-none transition-[background-color,border-color,box-shadow,scrollbar-color] duration-200 [scrollbar-color:var(--zui-scroll-area-thumb,#94a3b8)_var(--zui-scroll-area-track,transparent)] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-[var(--zui-scroll-area-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-scroll-area-ring-offset-focus,#ffffff)] dark:focus-visible:ring-[var(--zui-scroll-area-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))] dark:focus-visible:ring-offset-[var(--zui-scroll-area-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] [&::-webkit-scrollbar]:h-[var(--zui-scroll-area-size,0.625rem)] [&::-webkit-scrollbar]:w-[var(--zui-scroll-area-size,0.625rem)] [&::-webkit-scrollbar-corner]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-[var(--zui-scroll-area-thumb-border,transparent)] [&::-webkit-scrollbar-thumb]:bg-[var(--zui-scroll-area-thumb,#94a3b8)] [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-[var(--zui-scroll-area-track,transparent)]";
+var zuiScrollAreaAppearances = {
+  default: "[--zui-scroll-area-thumb:#94a3b8] [--zui-scroll-area-thumb-border:#f8fafc] [--zui-scroll-area-track:#e2e8f0] dark:[--zui-scroll-area-thumb:#64748b] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#1e293b]",
+  muted: "[--zui-scroll-area-thumb:#cbd5e1] [--zui-scroll-area-thumb-border:#f8fafc] [--zui-scroll-area-track:#f1f5f9] dark:[--zui-scroll-area-thumb:#475569] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#0f172a]",
+  outline: "border border-[color:var(--zui-scroll-area-outline-border,#cbd5e1)] [--zui-scroll-area-thumb:#64748b] [--zui-scroll-area-thumb-border:#ffffff] [--zui-scroll-area-track:#e2e8f0] dark:border-[color:var(--zui-scroll-area-outline-border-dark,#334155)] dark:[--zui-scroll-area-thumb:#94a3b8] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#1e293b]",
+  glass: "border border-[color:var(--zui-scroll-area-glass-border,#ffffff80)] bg-[var(--zui-scroll-area-glass-bg,#ffffff99)] backdrop-blur-md [--zui-scroll-area-thumb:oklch(70.7%_0.165_254.624_/_0.9)] [--zui-scroll-area-thumb-border:#ffffff66] [--zui-scroll-area-track:#ffffff33] dark:border-[color:var(--zui-scroll-area-glass-border-dark,#ffffff1f)] dark:bg-[var(--zui-scroll-area-glass-bg-dark,#0f172acc)] dark:[--zui-scroll-area-thumb:oklch(78.9%_0.154_211.53_/_0.8)] dark:[--zui-scroll-area-thumb-border:#02061766] dark:[--zui-scroll-area-track:#ffffff12]",
+  sky: "border border-[color:var(--zui-scroll-area-sky-border,oklch(62.3%_0.214_259.815_/_0.35))] [--zui-scroll-area-thumb:oklch(54.6%_0.245_262.881)] [--zui-scroll-area-thumb-border:#eff6ff] [--zui-scroll-area-track:#dbeafe] dark:border-[color:var(--zui-scroll-area-sky-border-dark,oklch(70.7%_0.165_254.624_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(70.7%_0.165_254.624)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#172554]",
+  emerald: "border border-[color:var(--zui-scroll-area-emerald-border,oklch(59.6%_0.145_163.225_/_0.35))] [--zui-scroll-area-thumb:oklch(59.6%_0.145_163.225)] [--zui-scroll-area-thumb-border:#ecfdf5] [--zui-scroll-area-track:#d1fae5] dark:border-[color:var(--zui-scroll-area-emerald-border-dark,oklch(69.6%_0.17_162.48_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(69.6%_0.17_162.48)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#064e3b]",
+  rose: "border border-[color:var(--zui-scroll-area-rose-border,oklch(58.6%_0.253_17.585_/_0.3))] [--zui-scroll-area-thumb:oklch(58.6%_0.253_17.585)] [--zui-scroll-area-thumb-border:#fff1f2] [--zui-scroll-area-track:#ffe4e6] dark:border-[color:var(--zui-scroll-area-rose-border-dark,oklch(71.2%_0.194_13.428_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(71.2%_0.194_13.428)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#4c0519]",
+  amber: "border border-[color:var(--zui-scroll-area-amber-border,oklch(76.9%_0.188_70.08_/_0.35))] [--zui-scroll-area-thumb:oklch(66.6%_0.179_58.318)] [--zui-scroll-area-thumb-border:#fffbeb] [--zui-scroll-area-track:#fef3c7] dark:border-[color:var(--zui-scroll-area-amber-border-dark,oklch(82.8%_0.189_84.429_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(82.8%_0.189_84.429)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#451a03]",
+  violet: "border border-[color:var(--zui-scroll-area-violet-border,oklch(60.6%_0.25_292.717_/_0.35))] [--zui-scroll-area-thumb:oklch(54.1%_0.281_293.009)] [--zui-scroll-area-thumb-border:#f5f3ff] [--zui-scroll-area-track:#ede9fe] dark:border-[color:var(--zui-scroll-area-violet-border-dark,oklch(70.2%_0.183_293.541_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(70.2%_0.183_293.541)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#2e1065]"
+};
+var zuiScrollAreaSizes = {
+  sm: "[--zui-scroll-area-size:0.375rem]",
+  md: "[--zui-scroll-area-size:0.625rem]",
+  lg: "[--zui-scroll-area-size:0.875rem]"
+};
+var zuiScrollAreaOrientations = {
+  vertical: "overflow-x-hidden overflow-y-auto",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto"
+};
+var zuiScrollAreaVisibility = {
+  auto: "",
+  hover: "[scrollbar-color:transparent_transparent] hover:[scrollbar-color:var(--zui-scroll-area-thumb,#94a3b8)_var(--zui-scroll-area-track,transparent)] [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-[var(--zui-scroll-area-thumb,#94a3b8)] [&::-webkit-scrollbar-track]:bg-transparent hover:[&::-webkit-scrollbar-track]:bg-[var(--zui-scroll-area-track,transparent)]",
+  always: "",
+  hidden: "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0"
+};
+var zuiScrollAreaShadows = {
+  false: "",
+  true: "[box-shadow:inset_0_2px_12px_rgb(15_23_42_/_0.08)] dark:[box-shadow:inset_0_2px_12px_rgb(0_0_0_/_0.3)]"
+};
+
+// src/ui/scroll-area/variants.ts
+var scrollAreaVariants = classVarianceAuthority.cva(zuiScrollAreaBase, {
+  variants: {
+    appearance: zuiScrollAreaAppearances,
+    orientation: zuiScrollAreaOrientations,
+    scrollbar: zuiScrollAreaVisibility,
+    shadow: zuiScrollAreaShadows,
+    size: zuiScrollAreaSizes
+  },
+  compoundVariants: [
+    {
+      scrollbar: "always",
+      orientation: "vertical",
+      class: "overflow-x-hidden overflow-y-scroll"
+    },
+    {
+      scrollbar: "always",
+      orientation: "horizontal",
+      class: "overflow-x-scroll overflow-y-hidden"
+    },
+    {
+      scrollbar: "always",
+      orientation: "both",
+      class: "overflow-scroll"
+    }
+  ],
+  defaultVariants: {
+    appearance: "default",
+    orientation: "vertical",
+    scrollbar: "auto",
+    shadow: false,
+    size: "md"
+  }
+});
+function ScrollArea(props) {
+  const {
+    appearance,
+    children,
+    className,
+    orientation,
+    ref,
+    role,
+    scrollbar,
+    shadow,
+    size,
+    tabIndex,
+    viewportClassName,
+    ...rest
+  } = props;
+  const ariaLabel = rest["aria-label"];
+  const ariaLabelledBy = rest["aria-labelledby"];
+  const isNamedRegion = role === "region" || ariaLabel !== void 0 || ariaLabelledBy !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-orientation": orientation ?? "vertical",
+      "data-scrollbar": scrollbar ?? "auto",
+      "data-slot": "scroll-area",
+      role: role ?? (ariaLabel !== void 0 || ariaLabelledBy !== void 0 ? "region" : void 0),
+      tabIndex: tabIndex ?? (isNamedRegion ? 0 : void 0),
+      className: chunkZS5756ZC_js.cn(
+        scrollAreaVariants({
+          appearance,
+          orientation,
+          scrollbar,
+          shadow,
+          size
+        }),
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "scroll-area-viewport", className: viewportClassName, children })
+    }
+  );
+}
+ScrollArea.displayName = "ScrollArea";
+
+exports.ScrollArea = ScrollArea;
+exports.scrollAreaVariants = scrollAreaVariants;
+//# sourceMappingURL=scroll-area.js.map
+//# sourceMappingURL=scroll-area.js.map

package/dist/ui/scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/design-system/scroll-area.ts","../../src/ui/scroll-area/variants.ts","../../src/ui/scroll-area/scroll-area.tsx"],"names":["cva","jsx","cn"],"mappings":"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","file":"scroll-area.js","sourcesContent":["export const zuiScrollAreaBase =\n  \"relative min-w-0 rounded-xl outline-none transition-[background-color,border-color,box-shadow,scrollbar-color] duration-200 [scrollbar-color:var(--zui-scroll-area-thumb,#94a3b8)_var(--zui-scroll-area-track,transparent)] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-[var(--zui-scroll-area-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-scroll-area-ring-offset-focus,#ffffff)] dark:focus-visible:ring-[var(--zui-scroll-area-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))] dark:focus-visible:ring-offset-[var(--zui-scroll-area-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] [&::-webkit-scrollbar]:h-[var(--zui-scroll-area-size,0.625rem)] [&::-webkit-scrollbar]:w-[var(--zui-scroll-area-size,0.625rem)] [&::-webkit-scrollbar-corner]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-[var(--zui-scroll-area-thumb-border,transparent)] [&::-webkit-scrollbar-thumb]:bg-[var(--zui-scroll-area-thumb,#94a3b8)] [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-[var(--zui-scroll-area-track,transparent)]\";\n\nexport const zuiScrollAreaAppearances = {\n  default:\n    \"[--zui-scroll-area-thumb:#94a3b8] [--zui-scroll-area-thumb-border:#f8fafc] [--zui-scroll-area-track:#e2e8f0] dark:[--zui-scroll-area-thumb:#64748b] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#1e293b]\",\n  muted:\n    \"[--zui-scroll-area-thumb:#cbd5e1] [--zui-scroll-area-thumb-border:#f8fafc] [--zui-scroll-area-track:#f1f5f9] dark:[--zui-scroll-area-thumb:#475569] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#0f172a]\",\n  outline:\n    \"border border-[color:var(--zui-scroll-area-outline-border,#cbd5e1)] [--zui-scroll-area-thumb:#64748b] [--zui-scroll-area-thumb-border:#ffffff] [--zui-scroll-area-track:#e2e8f0] dark:border-[color:var(--zui-scroll-area-outline-border-dark,#334155)] dark:[--zui-scroll-area-thumb:#94a3b8] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#1e293b]\",\n  glass:\n    \"border border-[color:var(--zui-scroll-area-glass-border,#ffffff80)] bg-[var(--zui-scroll-area-glass-bg,#ffffff99)] backdrop-blur-md [--zui-scroll-area-thumb:oklch(70.7%_0.165_254.624_/_0.9)] [--zui-scroll-area-thumb-border:#ffffff66] [--zui-scroll-area-track:#ffffff33] dark:border-[color:var(--zui-scroll-area-glass-border-dark,#ffffff1f)] dark:bg-[var(--zui-scroll-area-glass-bg-dark,#0f172acc)] dark:[--zui-scroll-area-thumb:oklch(78.9%_0.154_211.53_/_0.8)] dark:[--zui-scroll-area-thumb-border:#02061766] dark:[--zui-scroll-area-track:#ffffff12]\",\n  sky: \"border border-[color:var(--zui-scroll-area-sky-border,oklch(62.3%_0.214_259.815_/_0.35))] [--zui-scroll-area-thumb:oklch(54.6%_0.245_262.881)] [--zui-scroll-area-thumb-border:#eff6ff] [--zui-scroll-area-track:#dbeafe] dark:border-[color:var(--zui-scroll-area-sky-border-dark,oklch(70.7%_0.165_254.624_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(70.7%_0.165_254.624)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#172554]\",\n  emerald:\n    \"border border-[color:var(--zui-scroll-area-emerald-border,oklch(59.6%_0.145_163.225_/_0.35))] [--zui-scroll-area-thumb:oklch(59.6%_0.145_163.225)] [--zui-scroll-area-thumb-border:#ecfdf5] [--zui-scroll-area-track:#d1fae5] dark:border-[color:var(--zui-scroll-area-emerald-border-dark,oklch(69.6%_0.17_162.48_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(69.6%_0.17_162.48)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#064e3b]\",\n  rose: \"border border-[color:var(--zui-scroll-area-rose-border,oklch(58.6%_0.253_17.585_/_0.3))] [--zui-scroll-area-thumb:oklch(58.6%_0.253_17.585)] [--zui-scroll-area-thumb-border:#fff1f2] [--zui-scroll-area-track:#ffe4e6] dark:border-[color:var(--zui-scroll-area-rose-border-dark,oklch(71.2%_0.194_13.428_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(71.2%_0.194_13.428)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#4c0519]\",\n  amber:\n    \"border border-[color:var(--zui-scroll-area-amber-border,oklch(76.9%_0.188_70.08_/_0.35))] [--zui-scroll-area-thumb:oklch(66.6%_0.179_58.318)] [--zui-scroll-area-thumb-border:#fffbeb] [--zui-scroll-area-track:#fef3c7] dark:border-[color:var(--zui-scroll-area-amber-border-dark,oklch(82.8%_0.189_84.429_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(82.8%_0.189_84.429)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#451a03]\",\n  violet:\n    \"border border-[color:var(--zui-scroll-area-violet-border,oklch(60.6%_0.25_292.717_/_0.35))] [--zui-scroll-area-thumb:oklch(54.1%_0.281_293.009)] [--zui-scroll-area-thumb-border:#f5f3ff] [--zui-scroll-area-track:#ede9fe] dark:border-[color:var(--zui-scroll-area-violet-border-dark,oklch(70.2%_0.183_293.541_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(70.2%_0.183_293.541)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#2e1065]\",\n} as const;\n\nexport const zuiScrollAreaSizes = {\n  sm: \"[--zui-scroll-area-size:0.375rem]\",\n  md: \"[--zui-scroll-area-size:0.625rem]\",\n  lg: \"[--zui-scroll-area-size:0.875rem]\",\n} as const;\n\nexport const zuiScrollAreaOrientations = {\n  vertical: \"overflow-x-hidden overflow-y-auto\",\n  horizontal: \"overflow-x-auto overflow-y-hidden\",\n  both: \"overflow-auto\",\n} as const;\n\nexport const zuiScrollAreaVisibility = {\n  auto: \"\",\n  hover:\n    \"[scrollbar-color:transparent_transparent] hover:[scrollbar-color:var(--zui-scroll-area-thumb,#94a3b8)_var(--zui-scroll-area-track,transparent)] [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-[var(--zui-scroll-area-thumb,#94a3b8)] [&::-webkit-scrollbar-track]:bg-transparent hover:[&::-webkit-scrollbar-track]:bg-[var(--zui-scroll-area-track,transparent)]\",\n  always: \"\",\n  hidden:\n    \"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0\",\n} as const;\n\nexport const zuiScrollAreaShadows = {\n  false: \"\",\n  true: \"[box-shadow:inset_0_2px_12px_rgb(15_23_42_/_0.08)] dark:[box-shadow:inset_0_2px_12px_rgb(0_0_0_/_0.3)]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiScrollAreaAppearances,\n  zuiScrollAreaBase,\n  zuiScrollAreaOrientations,\n  zuiScrollAreaShadows,\n  zuiScrollAreaSizes,\n  zuiScrollAreaVisibility,\n} from \"../../design-system/scroll-area\";\n\nexport const scrollAreaVariants = cva(zuiScrollAreaBase, {\n  variants: {\n    appearance: zuiScrollAreaAppearances,\n    orientation: zuiScrollAreaOrientations,\n    scrollbar: zuiScrollAreaVisibility,\n    shadow: zuiScrollAreaShadows,\n    size: zuiScrollAreaSizes,\n  },\n  compoundVariants: [\n    {\n      scrollbar: \"always\",\n      orientation: \"vertical\",\n      class: \"overflow-x-hidden overflow-y-scroll\",\n    },\n    {\n      scrollbar: \"always\",\n      orientation: \"horizontal\",\n      class: \"overflow-x-scroll overflow-y-hidden\",\n    },\n    {\n      scrollbar: \"always\",\n      orientation: \"both\",\n      class: \"overflow-scroll\",\n    },\n  ],\n  defaultVariants: {\n    appearance: \"default\",\n    orientation: \"vertical\",\n    scrollbar: \"auto\",\n    shadow: false,\n    size: \"md\",\n  },\n});\n","\"use client\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { ScrollAreaProps } from \"./types\";\nimport { scrollAreaVariants } from \"./variants\";\n\nexport function ScrollArea(props: ScrollAreaProps) {\n  const {\n    appearance,\n    children,\n    className,\n    orientation,\n    ref,\n    role,\n    scrollbar,\n    shadow,\n    size,\n    tabIndex,\n    viewportClassName,\n    ...rest\n  } = props;\n  const ariaLabel = rest[\"aria-label\"];\n  const ariaLabelledBy = rest[\"aria-labelledby\"];\n  const isNamedRegion =\n    role === \"region\" ||\n    ariaLabel !== undefined ||\n    ariaLabelledBy !== undefined;\n\n  return (\n    <div\n      ref={ref}\n      data-orientation={orientation ?? \"vertical\"}\n      data-scrollbar={scrollbar ?? \"auto\"}\n      data-slot=\"scroll-area\"\n      role={\n        role ??\n        (ariaLabel !== undefined || ariaLabelledBy !== undefined\n          ? \"region\"\n          : undefined)\n      }\n      tabIndex={tabIndex ?? (isNamedRegion ? 0 : undefined)}\n      className={cn(\n        scrollAreaVariants({\n          appearance,\n          orientation,\n          scrollbar,\n          shadow,\n          size,\n        }),\n        className,\n      )}\n      {...rest}\n    >\n      <div data-slot=\"scroll-area-viewport\" className={viewportClassName}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\nScrollArea.displayName = \"ScrollArea\";\n"]}

package/dist/ui/scroll-area.mjs

@@ -0,0 +1,120 @@
+"use client";
+import { cn } from '../chunk-4D54YOL6.mjs';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+// src/design-system/scroll-area.ts
+var zuiScrollAreaBase = "relative min-w-0 rounded-xl outline-none transition-[background-color,border-color,box-shadow,scrollbar-color] duration-200 [scrollbar-color:var(--zui-scroll-area-thumb,#94a3b8)_var(--zui-scroll-area-track,transparent)] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-[var(--zui-scroll-area-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-scroll-area-ring-offset-focus,#ffffff)] dark:focus-visible:ring-[var(--zui-scroll-area-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))] dark:focus-visible:ring-offset-[var(--zui-scroll-area-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] [&::-webkit-scrollbar]:h-[var(--zui-scroll-area-size,0.625rem)] [&::-webkit-scrollbar]:w-[var(--zui-scroll-area-size,0.625rem)] [&::-webkit-scrollbar-corner]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-[var(--zui-scroll-area-thumb-border,transparent)] [&::-webkit-scrollbar-thumb]:bg-[var(--zui-scroll-area-thumb,#94a3b8)] [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-[var(--zui-scroll-area-track,transparent)]";
+var zuiScrollAreaAppearances = {
+  default: "[--zui-scroll-area-thumb:#94a3b8] [--zui-scroll-area-thumb-border:#f8fafc] [--zui-scroll-area-track:#e2e8f0] dark:[--zui-scroll-area-thumb:#64748b] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#1e293b]",
+  muted: "[--zui-scroll-area-thumb:#cbd5e1] [--zui-scroll-area-thumb-border:#f8fafc] [--zui-scroll-area-track:#f1f5f9] dark:[--zui-scroll-area-thumb:#475569] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#0f172a]",
+  outline: "border border-[color:var(--zui-scroll-area-outline-border,#cbd5e1)] [--zui-scroll-area-thumb:#64748b] [--zui-scroll-area-thumb-border:#ffffff] [--zui-scroll-area-track:#e2e8f0] dark:border-[color:var(--zui-scroll-area-outline-border-dark,#334155)] dark:[--zui-scroll-area-thumb:#94a3b8] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#1e293b]",
+  glass: "border border-[color:var(--zui-scroll-area-glass-border,#ffffff80)] bg-[var(--zui-scroll-area-glass-bg,#ffffff99)] backdrop-blur-md [--zui-scroll-area-thumb:oklch(70.7%_0.165_254.624_/_0.9)] [--zui-scroll-area-thumb-border:#ffffff66] [--zui-scroll-area-track:#ffffff33] dark:border-[color:var(--zui-scroll-area-glass-border-dark,#ffffff1f)] dark:bg-[var(--zui-scroll-area-glass-bg-dark,#0f172acc)] dark:[--zui-scroll-area-thumb:oklch(78.9%_0.154_211.53_/_0.8)] dark:[--zui-scroll-area-thumb-border:#02061766] dark:[--zui-scroll-area-track:#ffffff12]",
+  sky: "border border-[color:var(--zui-scroll-area-sky-border,oklch(62.3%_0.214_259.815_/_0.35))] [--zui-scroll-area-thumb:oklch(54.6%_0.245_262.881)] [--zui-scroll-area-thumb-border:#eff6ff] [--zui-scroll-area-track:#dbeafe] dark:border-[color:var(--zui-scroll-area-sky-border-dark,oklch(70.7%_0.165_254.624_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(70.7%_0.165_254.624)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#172554]",
+  emerald: "border border-[color:var(--zui-scroll-area-emerald-border,oklch(59.6%_0.145_163.225_/_0.35))] [--zui-scroll-area-thumb:oklch(59.6%_0.145_163.225)] [--zui-scroll-area-thumb-border:#ecfdf5] [--zui-scroll-area-track:#d1fae5] dark:border-[color:var(--zui-scroll-area-emerald-border-dark,oklch(69.6%_0.17_162.48_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(69.6%_0.17_162.48)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#064e3b]",
+  rose: "border border-[color:var(--zui-scroll-area-rose-border,oklch(58.6%_0.253_17.585_/_0.3))] [--zui-scroll-area-thumb:oklch(58.6%_0.253_17.585)] [--zui-scroll-area-thumb-border:#fff1f2] [--zui-scroll-area-track:#ffe4e6] dark:border-[color:var(--zui-scroll-area-rose-border-dark,oklch(71.2%_0.194_13.428_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(71.2%_0.194_13.428)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#4c0519]",
+  amber: "border border-[color:var(--zui-scroll-area-amber-border,oklch(76.9%_0.188_70.08_/_0.35))] [--zui-scroll-area-thumb:oklch(66.6%_0.179_58.318)] [--zui-scroll-area-thumb-border:#fffbeb] [--zui-scroll-area-track:#fef3c7] dark:border-[color:var(--zui-scroll-area-amber-border-dark,oklch(82.8%_0.189_84.429_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(82.8%_0.189_84.429)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#451a03]",
+  violet: "border border-[color:var(--zui-scroll-area-violet-border,oklch(60.6%_0.25_292.717_/_0.35))] [--zui-scroll-area-thumb:oklch(54.1%_0.281_293.009)] [--zui-scroll-area-thumb-border:#f5f3ff] [--zui-scroll-area-track:#ede9fe] dark:border-[color:var(--zui-scroll-area-violet-border-dark,oklch(70.2%_0.183_293.541_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(70.2%_0.183_293.541)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#2e1065]"
+};
+var zuiScrollAreaSizes = {
+  sm: "[--zui-scroll-area-size:0.375rem]",
+  md: "[--zui-scroll-area-size:0.625rem]",
+  lg: "[--zui-scroll-area-size:0.875rem]"
+};
+var zuiScrollAreaOrientations = {
+  vertical: "overflow-x-hidden overflow-y-auto",
+  horizontal: "overflow-x-auto overflow-y-hidden",
+  both: "overflow-auto"
+};
+var zuiScrollAreaVisibility = {
+  auto: "",
+  hover: "[scrollbar-color:transparent_transparent] hover:[scrollbar-color:var(--zui-scroll-area-thumb,#94a3b8)_var(--zui-scroll-area-track,transparent)] [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-[var(--zui-scroll-area-thumb,#94a3b8)] [&::-webkit-scrollbar-track]:bg-transparent hover:[&::-webkit-scrollbar-track]:bg-[var(--zui-scroll-area-track,transparent)]",
+  always: "",
+  hidden: "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0"
+};
+var zuiScrollAreaShadows = {
+  false: "",
+  true: "[box-shadow:inset_0_2px_12px_rgb(15_23_42_/_0.08)] dark:[box-shadow:inset_0_2px_12px_rgb(0_0_0_/_0.3)]"
+};
+
+// src/ui/scroll-area/variants.ts
+var scrollAreaVariants = cva(zuiScrollAreaBase, {
+  variants: {
+    appearance: zuiScrollAreaAppearances,
+    orientation: zuiScrollAreaOrientations,
+    scrollbar: zuiScrollAreaVisibility,
+    shadow: zuiScrollAreaShadows,
+    size: zuiScrollAreaSizes
+  },
+  compoundVariants: [
+    {
+      scrollbar: "always",
+      orientation: "vertical",
+      class: "overflow-x-hidden overflow-y-scroll"
+    },
+    {
+      scrollbar: "always",
+      orientation: "horizontal",
+      class: "overflow-x-scroll overflow-y-hidden"
+    },
+    {
+      scrollbar: "always",
+      orientation: "both",
+      class: "overflow-scroll"
+    }
+  ],
+  defaultVariants: {
+    appearance: "default",
+    orientation: "vertical",
+    scrollbar: "auto",
+    shadow: false,
+    size: "md"
+  }
+});
+function ScrollArea(props) {
+  const {
+    appearance,
+    children,
+    className,
+    orientation,
+    ref,
+    role,
+    scrollbar,
+    shadow,
+    size,
+    tabIndex,
+    viewportClassName,
+    ...rest
+  } = props;
+  const ariaLabel = rest["aria-label"];
+  const ariaLabelledBy = rest["aria-labelledby"];
+  const isNamedRegion = role === "region" || ariaLabel !== void 0 || ariaLabelledBy !== void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-orientation": orientation ?? "vertical",
+      "data-scrollbar": scrollbar ?? "auto",
+      "data-slot": "scroll-area",
+      role: role ?? (ariaLabel !== void 0 || ariaLabelledBy !== void 0 ? "region" : void 0),
+      tabIndex: tabIndex ?? (isNamedRegion ? 0 : void 0),
+      className: cn(
+        scrollAreaVariants({
+          appearance,
+          orientation,
+          scrollbar,
+          shadow,
+          size
+        }),
+        className
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { "data-slot": "scroll-area-viewport", className: viewportClassName, children })
+    }
+  );
+}
+ScrollArea.displayName = "ScrollArea";
+
+export { ScrollArea, scrollAreaVariants };
+//# sourceMappingURL=scroll-area.mjs.map
+//# sourceMappingURL=scroll-area.mjs.map

package/dist/ui/scroll-area.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/design-system/scroll-area.ts","../../src/ui/scroll-area/variants.ts","../../src/ui/scroll-area/scroll-area.tsx"],"names":[],"mappings":"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","file":"scroll-area.mjs","sourcesContent":["export const zuiScrollAreaBase =\n  \"relative min-w-0 rounded-xl outline-none transition-[background-color,border-color,box-shadow,scrollbar-color] duration-200 [scrollbar-color:var(--zui-scroll-area-thumb,#94a3b8)_var(--zui-scroll-area-track,transparent)] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-[var(--zui-scroll-area-ring-focus,oklch(54.6%_0.245_262.881_/_0.28))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-scroll-area-ring-offset-focus,#ffffff)] dark:focus-visible:ring-[var(--zui-scroll-area-ring-focus-dark,oklch(70.7%_0.165_254.624_/_0.28))] dark:focus-visible:ring-offset-[var(--zui-scroll-area-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] [&::-webkit-scrollbar]:h-[var(--zui-scroll-area-size,0.625rem)] [&::-webkit-scrollbar]:w-[var(--zui-scroll-area-size,0.625rem)] [&::-webkit-scrollbar-corner]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:border-2 [&::-webkit-scrollbar-thumb]:border-solid [&::-webkit-scrollbar-thumb]:border-[var(--zui-scroll-area-thumb-border,transparent)] [&::-webkit-scrollbar-thumb]:bg-[var(--zui-scroll-area-thumb,#94a3b8)] [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-[var(--zui-scroll-area-track,transparent)]\";\n\nexport const zuiScrollAreaAppearances = {\n  default:\n    \"[--zui-scroll-area-thumb:#94a3b8] [--zui-scroll-area-thumb-border:#f8fafc] [--zui-scroll-area-track:#e2e8f0] dark:[--zui-scroll-area-thumb:#64748b] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#1e293b]\",\n  muted:\n    \"[--zui-scroll-area-thumb:#cbd5e1] [--zui-scroll-area-thumb-border:#f8fafc] [--zui-scroll-area-track:#f1f5f9] dark:[--zui-scroll-area-thumb:#475569] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#0f172a]\",\n  outline:\n    \"border border-[color:var(--zui-scroll-area-outline-border,#cbd5e1)] [--zui-scroll-area-thumb:#64748b] [--zui-scroll-area-thumb-border:#ffffff] [--zui-scroll-area-track:#e2e8f0] dark:border-[color:var(--zui-scroll-area-outline-border-dark,#334155)] dark:[--zui-scroll-area-thumb:#94a3b8] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#1e293b]\",\n  glass:\n    \"border border-[color:var(--zui-scroll-area-glass-border,#ffffff80)] bg-[var(--zui-scroll-area-glass-bg,#ffffff99)] backdrop-blur-md [--zui-scroll-area-thumb:oklch(70.7%_0.165_254.624_/_0.9)] [--zui-scroll-area-thumb-border:#ffffff66] [--zui-scroll-area-track:#ffffff33] dark:border-[color:var(--zui-scroll-area-glass-border-dark,#ffffff1f)] dark:bg-[var(--zui-scroll-area-glass-bg-dark,#0f172acc)] dark:[--zui-scroll-area-thumb:oklch(78.9%_0.154_211.53_/_0.8)] dark:[--zui-scroll-area-thumb-border:#02061766] dark:[--zui-scroll-area-track:#ffffff12]\",\n  sky: \"border border-[color:var(--zui-scroll-area-sky-border,oklch(62.3%_0.214_259.815_/_0.35))] [--zui-scroll-area-thumb:oklch(54.6%_0.245_262.881)] [--zui-scroll-area-thumb-border:#eff6ff] [--zui-scroll-area-track:#dbeafe] dark:border-[color:var(--zui-scroll-area-sky-border-dark,oklch(70.7%_0.165_254.624_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(70.7%_0.165_254.624)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#172554]\",\n  emerald:\n    \"border border-[color:var(--zui-scroll-area-emerald-border,oklch(59.6%_0.145_163.225_/_0.35))] [--zui-scroll-area-thumb:oklch(59.6%_0.145_163.225)] [--zui-scroll-area-thumb-border:#ecfdf5] [--zui-scroll-area-track:#d1fae5] dark:border-[color:var(--zui-scroll-area-emerald-border-dark,oklch(69.6%_0.17_162.48_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(69.6%_0.17_162.48)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#064e3b]\",\n  rose: \"border border-[color:var(--zui-scroll-area-rose-border,oklch(58.6%_0.253_17.585_/_0.3))] [--zui-scroll-area-thumb:oklch(58.6%_0.253_17.585)] [--zui-scroll-area-thumb-border:#fff1f2] [--zui-scroll-area-track:#ffe4e6] dark:border-[color:var(--zui-scroll-area-rose-border-dark,oklch(71.2%_0.194_13.428_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(71.2%_0.194_13.428)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#4c0519]\",\n  amber:\n    \"border border-[color:var(--zui-scroll-area-amber-border,oklch(76.9%_0.188_70.08_/_0.35))] [--zui-scroll-area-thumb:oklch(66.6%_0.179_58.318)] [--zui-scroll-area-thumb-border:#fffbeb] [--zui-scroll-area-track:#fef3c7] dark:border-[color:var(--zui-scroll-area-amber-border-dark,oklch(82.8%_0.189_84.429_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(82.8%_0.189_84.429)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#451a03]\",\n  violet:\n    \"border border-[color:var(--zui-scroll-area-violet-border,oklch(60.6%_0.25_292.717_/_0.35))] [--zui-scroll-area-thumb:oklch(54.1%_0.281_293.009)] [--zui-scroll-area-thumb-border:#f5f3ff] [--zui-scroll-area-track:#ede9fe] dark:border-[color:var(--zui-scroll-area-violet-border-dark,oklch(70.2%_0.183_293.541_/_0.35))] dark:[--zui-scroll-area-thumb:oklch(70.2%_0.183_293.541)] dark:[--zui-scroll-area-thumb-border:#020617] dark:[--zui-scroll-area-track:#2e1065]\",\n} as const;\n\nexport const zuiScrollAreaSizes = {\n  sm: \"[--zui-scroll-area-size:0.375rem]\",\n  md: \"[--zui-scroll-area-size:0.625rem]\",\n  lg: \"[--zui-scroll-area-size:0.875rem]\",\n} as const;\n\nexport const zuiScrollAreaOrientations = {\n  vertical: \"overflow-x-hidden overflow-y-auto\",\n  horizontal: \"overflow-x-auto overflow-y-hidden\",\n  both: \"overflow-auto\",\n} as const;\n\nexport const zuiScrollAreaVisibility = {\n  auto: \"\",\n  hover:\n    \"[scrollbar-color:transparent_transparent] hover:[scrollbar-color:var(--zui-scroll-area-thumb,#94a3b8)_var(--zui-scroll-area-track,transparent)] [&::-webkit-scrollbar-thumb]:bg-transparent hover:[&::-webkit-scrollbar-thumb]:bg-[var(--zui-scroll-area-thumb,#94a3b8)] [&::-webkit-scrollbar-track]:bg-transparent hover:[&::-webkit-scrollbar-track]:bg-[var(--zui-scroll-area-track,transparent)]\",\n  always: \"\",\n  hidden:\n    \"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&::-webkit-scrollbar]:h-0 [&::-webkit-scrollbar]:w-0\",\n} as const;\n\nexport const zuiScrollAreaShadows = {\n  false: \"\",\n  true: \"[box-shadow:inset_0_2px_12px_rgb(15_23_42_/_0.08)] dark:[box-shadow:inset_0_2px_12px_rgb(0_0_0_/_0.3)]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiScrollAreaAppearances,\n  zuiScrollAreaBase,\n  zuiScrollAreaOrientations,\n  zuiScrollAreaShadows,\n  zuiScrollAreaSizes,\n  zuiScrollAreaVisibility,\n} from \"../../design-system/scroll-area\";\n\nexport const scrollAreaVariants = cva(zuiScrollAreaBase, {\n  variants: {\n    appearance: zuiScrollAreaAppearances,\n    orientation: zuiScrollAreaOrientations,\n    scrollbar: zuiScrollAreaVisibility,\n    shadow: zuiScrollAreaShadows,\n    size: zuiScrollAreaSizes,\n  },\n  compoundVariants: [\n    {\n      scrollbar: \"always\",\n      orientation: \"vertical\",\n      class: \"overflow-x-hidden overflow-y-scroll\",\n    },\n    {\n      scrollbar: \"always\",\n      orientation: \"horizontal\",\n      class: \"overflow-x-scroll overflow-y-hidden\",\n    },\n    {\n      scrollbar: \"always\",\n      orientation: \"both\",\n      class: \"overflow-scroll\",\n    },\n  ],\n  defaultVariants: {\n    appearance: \"default\",\n    orientation: \"vertical\",\n    scrollbar: \"auto\",\n    shadow: false,\n    size: \"md\",\n  },\n});\n","\"use client\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { ScrollAreaProps } from \"./types\";\nimport { scrollAreaVariants } from \"./variants\";\n\nexport function ScrollArea(props: ScrollAreaProps) {\n  const {\n    appearance,\n    children,\n    className,\n    orientation,\n    ref,\n    role,\n    scrollbar,\n    shadow,\n    size,\n    tabIndex,\n    viewportClassName,\n    ...rest\n  } = props;\n  const ariaLabel = rest[\"aria-label\"];\n  const ariaLabelledBy = rest[\"aria-labelledby\"];\n  const isNamedRegion =\n    role === \"region\" ||\n    ariaLabel !== undefined ||\n    ariaLabelledBy !== undefined;\n\n  return (\n    <div\n      ref={ref}\n      data-orientation={orientation ?? \"vertical\"}\n      data-scrollbar={scrollbar ?? \"auto\"}\n      data-slot=\"scroll-area\"\n      role={\n        role ??\n        (ariaLabel !== undefined || ariaLabelledBy !== undefined\n          ? \"region\"\n          : undefined)\n      }\n      tabIndex={tabIndex ?? (isNamedRegion ? 0 : undefined)}\n      className={cn(\n        scrollAreaVariants({\n          appearance,\n          orientation,\n          scrollbar,\n          shadow,\n          size,\n        }),\n        className,\n      )}\n      {...rest}\n    >\n      <div data-slot=\"scroll-area-viewport\" className={viewportClassName}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\nScrollArea.displayName = \"ScrollArea\";\n"]}

package/dist/ui/search.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkYAO62VH2_js = require('../chunk-YAO62VH2.js');
+var chunkUGH23TAH_js = require('../chunk-UGH23TAH.js');
 var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -56,7 +56,7 @@ var SearchBar = function SearchBar2({
             "aria-label": ariaLabel ?? (combobox ? void 0 : "Search"),
             "data-slot": "search-bar-input",
             className: chunkZS5756ZC_js.cn(
-              chunkYAO62VH2_js.inputVariants({ appearance, size: inputSize, ring, as: "input" }),
+              chunkUGH23TAH_js.inputVariants({ appearance, size: inputSize, ring, as: "input" }),
               leadingSlot ? "pl-10" : null,
               inputClassName,
               "[&::-webkit-search-cancel-button]:hidden"

package/dist/ui/search.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { inputVariants } from '../chunk-QXHS3HHZ.mjs';
+import { inputVariants } from '../chunk-D3VZKUMH.mjs';
 import { cn } from '../chunk-4D54YOL6.mjs';
 import { useId, Fragment } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/ui/select.js

@@ -10,8 +10,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var zuiSelectTriggerBase = "flex items-center cursor-pointer justify-between rounded-md border transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-select-trigger-ring-focus,oklch(44.6%_0.03_256.802))] dark:focus-visible:ring-[var(--zui-select-trigger-ring-focus-dark,oklch(70.7%_0.022_261.325))] focus-visible:ring-offset-2";
 var zuiSelectTriggerVariants = {
   default: "border-[color:var(--zui-select-trigger-default-border,oklch(87.2%_0.01_258.338))] dark:border-[color:var(--zui-select-trigger-default-border-dark,oklch(87.2%_0.01_258.338))] bg-[var(--zui-select-trigger-default-bg,#ffffff)] dark:bg-[var(--zui-select-trigger-default-bg-dark,#000000)] text-[color:var(--zui-select-trigger-default-fg,oklch(13%_0.028_261.692))] dark:text-[color:var(--zui-select-trigger-default-fg-dark,#ffffff)]",
-  outline: "border-2 border-[color:var(--zui-select-trigger-outline-border,oklch(55.1%_0.027_264.364))] text-[color:var(--zui-select-trigger-outline-fg,oklch(13%_0.028_261.692))] dark:text-[color:var(--zui-select-trigger-outline-fg-dark,oklch(96.7%_0.003_264.542))]",
-  ghost: "border-[color:var(--zui-select-trigger-ghost-border,transparent)] text-[color:var(--zui-select-trigger-ghost-fg,oklch(13%_0.028_261.692))] dark:text-[color:var(--zui-select-trigger-ghost-fg-dark,oklch(96.7%_0.003_264.542))]",
+  outline: "border-2 border-[color:var(--zui-select-trigger-outline-border,oklch(55.1%_0.027_264.364))] dark:border-[color:var(--zui-select-trigger-outline-border-dark,oklch(55.1%_0.027_264.364))] text-[color:var(--zui-select-trigger-outline-fg,oklch(13%_0.028_261.692))] dark:text-[color:var(--zui-select-trigger-outline-fg-dark,oklch(96.7%_0.003_264.542))]",
+  ghost: "border-[color:var(--zui-select-trigger-ghost-border,transparent)] dark:border-[color:var(--zui-select-trigger-ghost-border-dark,transparent)] text-[color:var(--zui-select-trigger-ghost-fg,oklch(13%_0.028_261.692))] dark:text-[color:var(--zui-select-trigger-ghost-fg-dark,oklch(96.7%_0.003_264.542))]",
   sky: "border-[color:var(--zui-select-trigger-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-select-trigger-sky-border-dark,oklch(58.8%_0.158_241.966))] text-[color:var(--zui-select-trigger-sky-fg,oklch(29.3%_0.066_243.157))] dark:text-[color:var(--zui-select-trigger-sky-fg-dark,oklch(58.8%_0.158_241.966))]",
   rose: "border-[color:var(--zui-select-trigger-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-select-trigger-rose-border-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-select-trigger-rose-fg,oklch(27.1%_0.105_12.094))] dark:text-[color:var(--zui-select-trigger-rose-fg-dark,oklch(58.6%_0.253_17.585))]",
   purple: "border-[color:var(--zui-select-trigger-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-select-trigger-purple-border-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-select-trigger-purple-fg,oklch(29.1%_0.149_302.717))] dark:text-[color:var(--zui-select-trigger-purple-fg-dark,oklch(55.8%_0.288_302.321))]",
@@ -19,18 +19,18 @@ var zuiSelectTriggerVariants = {
   orange: "border-[color:var(--zui-select-trigger-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-select-trigger-orange-border-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-select-trigger-orange-fg,oklch(26.6%_0.079_36.259))] dark:text-[color:var(--zui-select-trigger-orange-fg-dark,oklch(64.6%_0.222_41.116))]",
   yellow: "border-[color:var(--zui-select-trigger-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-select-trigger-yellow-border-dark,oklch(68.1%_0.162_75.834))] text-[color:var(--zui-select-trigger-yellow-fg,oklch(28.6%_0.066_53.813))] dark:text-[color:var(--zui-select-trigger-yellow-fg-dark,oklch(68.1%_0.162_75.834))]",
   teal: "border-[color:var(--zui-select-trigger-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-select-trigger-teal-border-dark,oklch(60%_0.118_184.704))] text-[color:var(--zui-select-trigger-teal-fg,oklch(27.7%_0.046_192.524))] dark:text-[color:var(--zui-select-trigger-teal-fg-dark,oklch(60%_0.118_184.704))]",
-  indigo: "border-[color:var(--zui-select-trigger-indigo-border,oklch(58.5%_0.233_277.117))] text-[color:var(--zui-select-trigger-indigo-fg,oklch(25.7%_0.09_281.288))]",
+  indigo: "border-[color:var(--zui-select-trigger-indigo-border,oklch(58.5%_0.233_277.117))] dark:border-[color:var(--zui-select-trigger-indigo-border-dark,oklch(58.5%_0.233_277.117))] text-[color:var(--zui-select-trigger-indigo-fg,oklch(25.7%_0.09_281.288))] dark:text-[color:var(--zui-select-trigger-indigo-fg-dark,oklch(58.5%_0.233_277.117))]",
   emerald: "border-[color:var(--zui-select-trigger-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-select-trigger-emerald-border-dark,oklch(59.6%_0.145_163.225))] text-[color:var(--zui-select-trigger-emerald-fg,oklch(26.2%_0.051_172.552))] dark:text-[color:var(--zui-select-trigger-emerald-fg-dark,oklch(59.6%_0.145_163.225))]",
   glass: "border-[color:var(--zui-select-trigger-glass-border,#00000026)] dark:border-[color:var(--zui-select-trigger-glass-border-dark,#ffffff26)] bg-[var(--zui-select-trigger-glass-bg,#0000001a)] dark:bg-[var(--zui-select-trigger-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-select-trigger-glass-fg,oklch(13%_0.028_261.692))] dark:text-[color:var(--zui-select-trigger-glass-fg-dark,#ffffff)] backdrop-blur-md",
-  "gradient-blue": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-blue-from,oklch(37.9%_0.146_265.522))] dark:from-[var(--zui-select-trigger-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-select-trigger-gradient-blue-to,oklch(38.1%_0.176_304.987))] dark:to-[var(--zui-select-trigger-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-blue-fg,#ffffff)]",
-  "gradient-green": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-green-from,oklch(39.3%_0.095_152.535))] dark:from-[var(--zui-select-trigger-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-select-trigger-gradient-green-to,oklch(40.5%_0.101_131.063))] dark:to-[var(--zui-select-trigger-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-green-fg,#ffffff)]",
-  "gradient-red": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-red-from,oklch(39.6%_0.141_25.723))] dark:from-[var(--zui-select-trigger-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-select-trigger-gradient-red-to,oklch(40.8%_0.153_2.432))] dark:to-[var(--zui-select-trigger-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-red-fg,#ffffff)]",
-  "gradient-yellow": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-yellow-from,oklch(42.1%_0.095_57.708))] dark:from-[var(--zui-select-trigger-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-select-trigger-gradient-yellow-to,oklch(40.8%_0.123_38.172))] dark:to-[var(--zui-select-trigger-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-yellow-fg,#ffffff)]",
-  "gradient-purple": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-purple-from,oklch(38.1%_0.176_304.987))] dark:from-[var(--zui-select-trigger-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-select-trigger-gradient-purple-to,oklch(40.8%_0.153_2.432))] dark:to-[var(--zui-select-trigger-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-purple-fg,#ffffff)]",
-  "gradient-teal": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-teal-from,oklch(38.6%_0.063_188.416))] dark:from-[var(--zui-select-trigger-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-select-trigger-gradient-teal-to,oklch(39.8%_0.07_227.392))] dark:to-[var(--zui-select-trigger-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-teal-fg,#ffffff)]",
-  "gradient-indigo": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-indigo-from,oklch(35.9%_0.144_278.697))] dark:from-[var(--zui-select-trigger-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-select-trigger-gradient-indigo-to,oklch(38.1%_0.176_304.987))] dark:to-[var(--zui-select-trigger-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-indigo-fg,#ffffff)]",
-  "gradient-pink": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-pink-from,oklch(40.8%_0.153_2.432))] dark:from-[var(--zui-select-trigger-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-select-trigger-gradient-pink-to,oklch(41%_0.159_10.272))] dark:to-[var(--zui-select-trigger-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-pink-fg,#ffffff)]",
-  "gradient-orange": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-orange-from,oklch(40.8%_0.123_38.172))] dark:from-[var(--zui-select-trigger-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-select-trigger-gradient-orange-to,oklch(39.6%_0.141_25.723))] dark:to-[var(--zui-select-trigger-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-orange-fg,#ffffff)]"
+  "gradient-blue": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-blue-from,oklch(37.9%_0.146_265.522))] dark:from-[var(--zui-select-trigger-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-select-trigger-gradient-blue-to,oklch(38.1%_0.176_304.987))] dark:to-[var(--zui-select-trigger-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-blue-fg,#ffffff)] dark:text-[color:var(--zui-select-trigger-gradient-blue-fg-dark,#ffffff)]",
+  "gradient-green": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-green-from,oklch(39.3%_0.095_152.535))] dark:from-[var(--zui-select-trigger-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-select-trigger-gradient-green-to,oklch(40.5%_0.101_131.063))] dark:to-[var(--zui-select-trigger-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-green-fg,#ffffff)] dark:text-[color:var(--zui-select-trigger-gradient-green-fg-dark,#ffffff)]",
+  "gradient-red": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-red-from,oklch(39.6%_0.141_25.723))] dark:from-[var(--zui-select-trigger-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-select-trigger-gradient-red-to,oklch(40.8%_0.153_2.432))] dark:to-[var(--zui-select-trigger-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-red-fg,#ffffff)] dark:text-[color:var(--zui-select-trigger-gradient-red-fg-dark,#ffffff)]",
+  "gradient-yellow": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-yellow-from,oklch(42.1%_0.095_57.708))] dark:from-[var(--zui-select-trigger-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-select-trigger-gradient-yellow-to,oklch(40.8%_0.123_38.172))] dark:to-[var(--zui-select-trigger-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-yellow-fg,#ffffff)] dark:text-[color:var(--zui-select-trigger-gradient-yellow-fg-dark,#ffffff)]",
+  "gradient-purple": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-purple-from,oklch(38.1%_0.176_304.987))] dark:from-[var(--zui-select-trigger-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-select-trigger-gradient-purple-to,oklch(40.8%_0.153_2.432))] dark:to-[var(--zui-select-trigger-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-purple-fg,#ffffff)] dark:text-[color:var(--zui-select-trigger-gradient-purple-fg-dark,#ffffff)]",
+  "gradient-teal": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-teal-from,oklch(38.6%_0.063_188.416))] dark:from-[var(--zui-select-trigger-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-select-trigger-gradient-teal-to,oklch(39.8%_0.07_227.392))] dark:to-[var(--zui-select-trigger-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-teal-fg,#ffffff)] dark:text-[color:var(--zui-select-trigger-gradient-teal-fg-dark,#ffffff)]",
+  "gradient-indigo": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-indigo-from,oklch(35.9%_0.144_278.697))] dark:from-[var(--zui-select-trigger-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-select-trigger-gradient-indigo-to,oklch(38.1%_0.176_304.987))] dark:to-[var(--zui-select-trigger-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-indigo-fg,#ffffff)] dark:text-[color:var(--zui-select-trigger-gradient-indigo-fg-dark,#ffffff)]",
+  "gradient-pink": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-pink-from,oklch(40.8%_0.153_2.432))] dark:from-[var(--zui-select-trigger-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-select-trigger-gradient-pink-to,oklch(41%_0.159_10.272))] dark:to-[var(--zui-select-trigger-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-select-trigger-gradient-pink-fg-dark,#ffffff)]",
+  "gradient-orange": "bg-linear-to-r from-[var(--zui-select-trigger-gradient-orange-from,oklch(40.8%_0.123_38.172))] dark:from-[var(--zui-select-trigger-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-select-trigger-gradient-orange-to,oklch(39.6%_0.141_25.723))] dark:to-[var(--zui-select-trigger-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] backdrop-blur-xl text-[color:var(--zui-select-trigger-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-select-trigger-gradient-orange-fg-dark,#ffffff)]"
 };
 var zuiSelectSizes = {
   sm: "px-2 py-1 text-sm",
@@ -39,28 +39,28 @@ var zuiSelectSizes = {
 };
 var zuiSelectItemBase = "cursor-pointer px-3 py-2 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-select-item-ring-focus,oklch(44.6%_0.03_256.802))] dark:focus-visible:ring-[var(--zui-select-item-ring-focus-dark,oklch(70.7%_0.022_261.325))] focus-visible:ring-inset";
 var zuiSelectItemAppearances = {
-  default: "bg-[var(--zui-select-item-default-bg,#ffffff)] dark:bg-[var(--zui-select-item-default-bg-dark,#000000)] text-[color:var(--zui-select-item-default-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-select-item-default-fg-dark,oklch(92.8%_0.006_264.531))] data-[selected=true]:bg-[var(--zui-select-item-default-bg,oklch(92.8%_0.006_264.531))] data-[selected=true]:text-[color:var(--zui-select-item-default-fg,oklch(37.3%_0.034_259.733))] dark:data-[selected=true]:text-[color:var(--zui-select-item-default-fg-dark,oklch(21%_0.034_264.665))]",
+  default: "bg-[var(--zui-select-item-default-bg,#ffffff)] dark:bg-[var(--zui-select-item-default-bg-dark,#000000)] text-[color:var(--zui-select-item-default-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-select-item-default-fg-dark,oklch(92.8%_0.006_264.531))] data-[selected=true]:bg-[var(--zui-select-item-default-bg,oklch(92.8%_0.006_264.531))] dark:data-[selected=true]:bg-[var(--zui-select-item-default-bg-dark,oklch(92.8%_0.006_264.531))] data-[selected=true]:text-[color:var(--zui-select-item-default-fg,oklch(37.3%_0.034_259.733))] dark:data-[selected=true]:text-[color:var(--zui-select-item-default-fg-dark,oklch(21%_0.034_264.665))]",
   glass: "bg-[var(--zui-select-item-glass-bg,#0000001a)] dark:bg-[var(--zui-select-item-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-select-item-glass-fg,oklch(37.3%_0.034_259.733))] dark:text-[color:var(--zui-select-item-glass-fg-dark,oklch(21%_0.034_264.665))] data-[selected=true]:bg-[var(--zui-select-item-glass-bg,#0000001a)] dark:data-[selected=true]:bg-[var(--zui-select-item-glass-bg-dark,#ffffff1a)] data-[selected=true]:text-[color:var(--zui-select-item-glass-fg,oklch(37.3%_0.034_259.733))] dark:data-[selected=true]:text-[color:var(--zui-select-item-glass-fg-dark,oklch(21%_0.034_264.665))]",
-  outline: "border-2 border-[color:var(--zui-select-item-outline-border,oklch(55.1%_0.027_264.364))] text-[color:var(--zui-select-item-outline-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-select-item-outline-fg-dark,oklch(96.7%_0.003_264.542))] data-[selected=true]:border-2 data-[selected=true]:border-[color:var(--zui-select-item-outline-border,oklch(55.1%_0.027_264.364))] data-[selected=true]:bg-[var(--zui-select-item-outline-bg,oklch(92.8%_0.006_264.531))] data-[selected=true]:text-[color:var(--zui-select-item-outline-fg,oklch(21%_0.034_264.665))] dark:data-[selected=true]:text-[color:var(--zui-select-item-outline-fg-dark,oklch(21%_0.034_264.665))]",
-  ghost: "border-[color:var(--zui-select-item-ghost-border,transparent)] text-[color:var(--zui-select-item-ghost-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-select-item-ghost-fg-dark,oklch(96.7%_0.003_264.542))] data-[selected=true]:border-[color:var(--zui-select-item-ghost-border,transparent)] data-[selected=true]:bg-[var(--zui-select-item-ghost-bg,transparent)] data-[selected=true]:text-[color:var(--zui-select-item-ghost-fg,oklch(21%_0.034_264.665))] dark:data-[selected=true]:text-[color:var(--zui-select-item-ghost-fg-dark,oklch(96.7%_0.003_264.542))]",
-  sky: "border-[color:var(--zui-select-item-sky-border,oklch(39.1%_0.09_240.876))] dark:border-[color:var(--zui-select-item-sky-border-dark,oklch(58.8%_0.158_241.966))] text-[color:var(--zui-select-item-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-select-item-sky-fg-dark,oklch(90.1%_0.058_230.902))] data-[selected=true]:border-[color:var(--zui-select-item-sky-border,oklch(39.1%_0.09_240.876))] dark:data-[selected=true]:border-[color:var(--zui-select-item-sky-border-dark,oklch(58.8%_0.158_241.966))] data-[selected=true]:bg-[var(--zui-select-item-sky-bg,oklch(90.1%_0.058_230.902))] data-[selected=true]:text-[color:var(--zui-select-item-sky-fg,oklch(39.1%_0.09_240.876))] dark:data-[selected=true]:text-[color:var(--zui-select-item-sky-fg-dark,oklch(39.1%_0.09_240.876))]",
-  rose: "border-[color:var(--zui-select-item-rose-border,oklch(41%_0.159_10.272))] dark:border-[color:var(--zui-select-item-rose-border-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-select-item-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-select-item-rose-fg-dark,oklch(89.2%_0.058_10.001))] data-[selected=true]:border-[color:var(--zui-select-item-rose-border,oklch(41%_0.159_10.272))] dark:data-[selected=true]:border-[color:var(--zui-select-item-rose-border-dark,oklch(58.6%_0.253_17.585))] data-[selected=true]:bg-[var(--zui-select-item-rose-bg,oklch(89.2%_0.058_10.001))] data-[selected=true]:text-[color:var(--zui-select-item-rose-fg,oklch(41%_0.159_10.272))] dark:data-[selected=true]:text-[color:var(--zui-select-item-rose-fg-dark,oklch(41%_0.159_10.272))]",
-  purple: "border-[color:var(--zui-select-item-purple-border,oklch(38.1%_0.176_304.987))] dark:border-[color:var(--zui-select-item-purple-border-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-select-item-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-select-item-purple-fg-dark,oklch(90.2%_0.063_306.703))] data-[selected=true]:border-[color:var(--zui-select-item-purple-border,oklch(38.1%_0.176_304.987))] dark:data-[selected=true]:border-[color:var(--zui-select-item-purple-border-dark,oklch(55.8%_0.288_302.321))] data-[selected=true]:bg-[var(--zui-select-item-purple-bg,oklch(90.2%_0.063_306.703))] data-[selected=true]:text-[color:var(--zui-select-item-purple-fg,oklch(38.1%_0.176_304.987))] dark:data-[selected=true]:text-[color:var(--zui-select-item-purple-fg-dark,oklch(38.1%_0.176_304.987))]",
-  pink: "border-[color:var(--zui-select-item-pink-border,oklch(40.8%_0.153_2.432))] dark:border-[color:var(--zui-select-item-pink-border-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-select-item-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-select-item-pink-fg-dark,oklch(89.9%_0.061_343.231))] data-[selected=true]:border-[color:var(--zui-select-item-pink-border,oklch(40.8%_0.153_2.432))] dark:data-[selected=true]:border-[color:var(--zui-select-item-pink-border-dark,oklch(59.2%_0.249_0.584))] data-[selected=true]:bg-[var(--zui-select-item-pink-bg,oklch(89.9%_0.061_343.231))] data-[selected=true]:text-[color:var(--zui-select-item-pink-fg,oklch(40.8%_0.153_2.432))] dark:data-[selected=true]:text-[color:var(--zui-select-item-pink-fg-dark,oklch(40.8%_0.153_2.432))]",
-  orange: "border-[color:var(--zui-select-item-orange-border,oklch(40.8%_0.123_38.172))] dark:border-[color:var(--zui-select-item-orange-border-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-select-item-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-select-item-orange-fg-dark,oklch(90.1%_0.076_70.697))] data-[selected=true]:border-[color:var(--zui-select-item-orange-border,oklch(40.8%_0.123_38.172))] dark:data-[selected=true]:border-[color:var(--zui-select-item-orange-border-dark,oklch(64.6%_0.222_41.116))] data-[selected=true]:bg-[var(--zui-select-item-orange-bg,oklch(90.1%_0.076_70.697))] data-[selected=true]:text-[color:var(--zui-select-item-orange-fg,oklch(40.8%_0.123_38.172))] dark:data-[selected=true]:text-[color:var(--zui-select-item-orange-fg-dark,oklch(40.8%_0.123_38.172))]",
-  yellow: "border-[color:var(--zui-select-item-yellow-border,oklch(42.1%_0.095_57.708))] dark:border-[color:var(--zui-select-item-yellow-border-dark,oklch(68.1%_0.162_75.834))] text-[color:var(--zui-select-item-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-select-item-yellow-fg-dark,oklch(94.5%_0.129_101.54))] data-[selected=true]:border-[color:var(--zui-select-item-yellow-border,oklch(42.1%_0.095_57.708))] dark:data-[selected=true]:border-[color:var(--zui-select-item-yellow-border-dark,oklch(68.1%_0.162_75.834))] data-[selected=true]:bg-[var(--zui-select-item-yellow-bg,oklch(94.5%_0.129_101.54))] data-[selected=true]:text-[color:var(--zui-select-item-yellow-fg,oklch(42.1%_0.095_57.708))] dark:data-[selected=true]:text-[color:var(--zui-select-item-yellow-fg-dark,oklch(42.1%_0.095_57.708))]",
-  teal: "border-[color:var(--zui-select-item-teal-border,oklch(38.6%_0.063_188.416))] dark:border-[color:var(--zui-select-item-teal-border-dark,oklch(60%_0.118_184.704))] text-[color:var(--zui-select-item-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-select-item-teal-fg-dark,oklch(91%_0.096_180.426))] data-[selected=true]:border-[color:var(--zui-select-item-teal-border,oklch(38.6%_0.063_188.416))] dark:data-[selected=true]:border-[color:var(--zui-select-item-teal-border-dark,oklch(60%_0.118_184.704))] data-[selected=true]:bg-[var(--zui-select-item-teal-bg,oklch(91%_0.096_180.426))] data-[selected=true]:text-[color:var(--zui-select-item-teal-fg,oklch(38.6%_0.063_188.416))] dark:data-[selected=true]:text-[color:var(--zui-select-item-teal-fg-dark,oklch(38.6%_0.063_188.416))]",
-  indigo: "border-[color:var(--zui-select-item-indigo-border,oklch(35.9%_0.144_278.697))] dark:border-[color:var(--zui-select-item-indigo-border-dark,oklch(51.1%_0.262_276.966))] text-[color:var(--zui-select-item-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-select-item-indigo-fg-dark,oklch(87%_0.065_274.039))] data-[selected=true]:border-[color:var(--zui-select-item-indigo-border,oklch(35.9%_0.144_278.697))] dark:data-[selected=true]:border-[color:var(--zui-select-item-indigo-border-dark,oklch(51.1%_0.262_276.966))] data-[selected=true]:bg-[var(--zui-select-item-indigo-bg,oklch(87%_0.065_274.039))] data-[selected=true]:text-[color:var(--zui-select-item-indigo-fg,oklch(35.9%_0.144_278.697))] dark:data-[selected=true]:text-[color:var(--zui-select-item-indigo-fg-dark,oklch(35.9%_0.144_278.697))]",
-  emerald: "border-[color:var(--zui-select-item-emerald-border,oklch(37.8%_0.077_168.94))] dark:border-[color:var(--zui-select-item-emerald-border-dark,oklch(59.6%_0.145_163.225))] text-[color:var(--zui-select-item-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-select-item-emerald-fg-dark,oklch(90.5%_0.093_164.15))] data-[selected=true]:border-[color:var(--zui-select-item-emerald-border,oklch(37.8%_0.077_168.94))] dark:data-[selected=true]:border-[color:var(--zui-select-item-emerald-border-dark,oklch(59.6%_0.145_163.225))] data-[selected=true]:bg-[var(--zui-select-item-emerald-bg,oklch(90.5%_0.093_164.15))] data-[selected=true]:text-[color:var(--zui-select-item-emerald-fg,oklch(37.8%_0.077_168.94))] dark:data-[selected=true]:text-[color:var(--zui-select-item-emerald-fg-dark,oklch(37.8%_0.077_168.94))]",
-  "gradient-blue": "bg-[var(--zui-select-item-gradient-blue-bg,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-blue-fg,oklch(97%_0.014_254.604))] dark:text-[color:var(--zui-select-item-gradient-blue-fg-dark,oklch(97%_0.014_254.604))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-blue-from,oklch(97%_0.014_254.604))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-blue-from-dark,oklch(97%_0.014_254.604))] data-[selected=true]:to-[var(--zui-select-item-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-blue-to-dark,oklch(97.7%_0.014_308.299))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-blue-fg,oklch(37.9%_0.146_265.522))]",
-  "gradient-green": "bg-[var(--zui-select-item-gradient-green-bg,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-green-fg,oklch(98.2%_0.018_155.826))] dark:text-[color:var(--zui-select-item-gradient-green-fg-dark,oklch(98.2%_0.018_155.826))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-green-from-dark,oklch(98.2%_0.018_155.826))] data-[selected=true]:to-[var(--zui-select-item-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-green-to-dark,oklch(98.6%_0.031_120.757))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-green-fg,oklch(39.3%_0.095_152.535))]",
-  "gradient-red": "bg-[var(--zui-select-item-gradient-red-bg,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-red-fg,oklch(97.1%_0.013_17.38))] dark:text-[color:var(--zui-select-item-gradient-red-fg-dark,oklch(97.1%_0.013_17.38))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-red-from-dark,oklch(97.1%_0.013_17.38))] data-[selected=true]:to-[var(--zui-select-item-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-red-to-dark,oklch(97.1%_0.014_343.198))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-red-fg,oklch(39.6%_0.141_25.723))]",
-  "gradient-yellow": "bg-[var(--zui-select-item-gradient-yellow-bg,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-yellow-fg,oklch(98.7%_0.026_102.212))] dark:text-[color:var(--zui-select-item-gradient-yellow-fg-dark,oklch(98.7%_0.026_102.212))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-yellow-from-dark,oklch(98.7%_0.026_102.212))] data-[selected=true]:to-[var(--zui-select-item-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-yellow-to-dark,oklch(98%_0.016_73.684))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-yellow-fg,oklch(42.1%_0.095_57.708))]",
-  "gradient-purple": "bg-[var(--zui-select-item-gradient-purple-bg,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-purple-fg,oklch(97.7%_0.014_308.299))] dark:text-[color:var(--zui-select-item-gradient-purple-fg-dark,oklch(97.7%_0.014_308.299))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-purple-from-dark,oklch(97.7%_0.014_308.299))] data-[selected=true]:to-[var(--zui-select-item-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-purple-to-dark,oklch(97.1%_0.014_343.198))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-purple-fg,oklch(38.1%_0.176_304.987))]",
-  "gradient-teal": "bg-[var(--zui-select-item-gradient-teal-bg,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-teal-fg,oklch(98.4%_0.014_180.72))] dark:text-[color:var(--zui-select-item-gradient-teal-fg-dark,oklch(98.4%_0.014_180.72))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-teal-from-dark,oklch(98.4%_0.014_180.72))] data-[selected=true]:to-[var(--zui-select-item-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-teal-to-dark,oklch(98.4%_0.019_200.873))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-teal-fg,oklch(38.6%_0.063_188.416))]",
-  "gradient-indigo": "bg-[var(--zui-select-item-gradient-indigo-bg,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-indigo-fg,oklch(96.2%_0.018_272.314))] dark:text-[color:var(--zui-select-item-gradient-indigo-fg-dark,oklch(96.2%_0.018_272.314))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-indigo-from-dark,oklch(96.2%_0.018_272.314))] data-[selected=true]:to-[var(--zui-select-item-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-indigo-to-dark,oklch(97.7%_0.014_308.299))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-indigo-fg,oklch(35.9%_0.144_278.697))]",
-  "gradient-pink": "bg-[var(--zui-select-item-gradient-pink-bg,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-pink-fg,oklch(97.1%_0.014_343.198))] dark:text-[color:var(--zui-select-item-gradient-pink-fg-dark,oklch(97.1%_0.014_343.198))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-pink-from-dark,oklch(97.1%_0.014_343.198))] data-[selected=true]:to-[var(--zui-select-item-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-pink-to-dark,oklch(96.9%_0.015_12.422))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-pink-fg,oklch(40.8%_0.153_2.432))]",
-  "gradient-orange": "bg-[var(--zui-select-item-gradient-orange-bg,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-orange-fg,oklch(98%_0.016_73.684))] dark:text-[color:var(--zui-select-item-gradient-orange-fg-dark,oklch(98%_0.016_73.684))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-orange-from,oklch(98%_0.016_73.684))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-orange-from-dark,oklch(98%_0.016_73.684))] data-[selected=true]:to-[var(--zui-select-item-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-orange-to-dark,oklch(97.1%_0.013_17.38))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-orange-fg,oklch(40.8%_0.123_38.172))]"
+  outline: "border-2 border-[color:var(--zui-select-item-outline-border,oklch(55.1%_0.027_264.364))] dark:border-[color:var(--zui-select-item-outline-border-dark,oklch(55.1%_0.027_264.364))] text-[color:var(--zui-select-item-outline-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-select-item-outline-fg-dark,oklch(96.7%_0.003_264.542))] data-[selected=true]:border-2 data-[selected=true]:border-[color:var(--zui-select-item-outline-border,oklch(55.1%_0.027_264.364))] dark:data-[selected=true]:border-[color:var(--zui-select-item-outline-border-dark,oklch(55.1%_0.027_264.364))] data-[selected=true]:bg-[var(--zui-select-item-outline-bg,oklch(92.8%_0.006_264.531))] dark:data-[selected=true]:bg-[var(--zui-select-item-outline-bg-dark,oklch(92.8%_0.006_264.531))] data-[selected=true]:text-[color:var(--zui-select-item-outline-fg,oklch(21%_0.034_264.665))] dark:data-[selected=true]:text-[color:var(--zui-select-item-outline-fg-dark,oklch(21%_0.034_264.665))]",
+  ghost: "border-[color:var(--zui-select-item-ghost-border,transparent)] dark:border-[color:var(--zui-select-item-ghost-border-dark,transparent)] text-[color:var(--zui-select-item-ghost-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-select-item-ghost-fg-dark,oklch(96.7%_0.003_264.542))] data-[selected=true]:border-[color:var(--zui-select-item-ghost-border,transparent)] dark:data-[selected=true]:border-[color:var(--zui-select-item-ghost-border-dark,transparent)] data-[selected=true]:bg-[var(--zui-select-item-ghost-bg,transparent)] dark:data-[selected=true]:bg-[var(--zui-select-item-ghost-bg-dark,transparent)] data-[selected=true]:text-[color:var(--zui-select-item-ghost-fg,oklch(21%_0.034_264.665))] dark:data-[selected=true]:text-[color:var(--zui-select-item-ghost-fg-dark,oklch(96.7%_0.003_264.542))]",
+  sky: "border-[color:var(--zui-select-item-sky-border,oklch(39.1%_0.09_240.876))] dark:border-[color:var(--zui-select-item-sky-border-dark,oklch(58.8%_0.158_241.966))] text-[color:var(--zui-select-item-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-select-item-sky-fg-dark,oklch(90.1%_0.058_230.902))] data-[selected=true]:border-[color:var(--zui-select-item-sky-border,oklch(39.1%_0.09_240.876))] dark:data-[selected=true]:border-[color:var(--zui-select-item-sky-border-dark,oklch(58.8%_0.158_241.966))] data-[selected=true]:bg-[var(--zui-select-item-sky-bg,oklch(90.1%_0.058_230.902))] dark:data-[selected=true]:bg-[var(--zui-select-item-sky-bg-dark,oklch(90.1%_0.058_230.902))] data-[selected=true]:text-[color:var(--zui-select-item-sky-fg,oklch(39.1%_0.09_240.876))] dark:data-[selected=true]:text-[color:var(--zui-select-item-sky-fg-dark,oklch(39.1%_0.09_240.876))]",
+  rose: "border-[color:var(--zui-select-item-rose-border,oklch(41%_0.159_10.272))] dark:border-[color:var(--zui-select-item-rose-border-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-select-item-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-select-item-rose-fg-dark,oklch(89.2%_0.058_10.001))] data-[selected=true]:border-[color:var(--zui-select-item-rose-border,oklch(41%_0.159_10.272))] dark:data-[selected=true]:border-[color:var(--zui-select-item-rose-border-dark,oklch(58.6%_0.253_17.585))] data-[selected=true]:bg-[var(--zui-select-item-rose-bg,oklch(89.2%_0.058_10.001))] dark:data-[selected=true]:bg-[var(--zui-select-item-rose-bg-dark,oklch(89.2%_0.058_10.001))] data-[selected=true]:text-[color:var(--zui-select-item-rose-fg,oklch(41%_0.159_10.272))] dark:data-[selected=true]:text-[color:var(--zui-select-item-rose-fg-dark,oklch(41%_0.159_10.272))]",
+  purple: "border-[color:var(--zui-select-item-purple-border,oklch(38.1%_0.176_304.987))] dark:border-[color:var(--zui-select-item-purple-border-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-select-item-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-select-item-purple-fg-dark,oklch(90.2%_0.063_306.703))] data-[selected=true]:border-[color:var(--zui-select-item-purple-border,oklch(38.1%_0.176_304.987))] dark:data-[selected=true]:border-[color:var(--zui-select-item-purple-border-dark,oklch(55.8%_0.288_302.321))] data-[selected=true]:bg-[var(--zui-select-item-purple-bg,oklch(90.2%_0.063_306.703))] dark:data-[selected=true]:bg-[var(--zui-select-item-purple-bg-dark,oklch(90.2%_0.063_306.703))] data-[selected=true]:text-[color:var(--zui-select-item-purple-fg,oklch(38.1%_0.176_304.987))] dark:data-[selected=true]:text-[color:var(--zui-select-item-purple-fg-dark,oklch(38.1%_0.176_304.987))]",
+  pink: "border-[color:var(--zui-select-item-pink-border,oklch(40.8%_0.153_2.432))] dark:border-[color:var(--zui-select-item-pink-border-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-select-item-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-select-item-pink-fg-dark,oklch(89.9%_0.061_343.231))] data-[selected=true]:border-[color:var(--zui-select-item-pink-border,oklch(40.8%_0.153_2.432))] dark:data-[selected=true]:border-[color:var(--zui-select-item-pink-border-dark,oklch(59.2%_0.249_0.584))] data-[selected=true]:bg-[var(--zui-select-item-pink-bg,oklch(89.9%_0.061_343.231))] dark:data-[selected=true]:bg-[var(--zui-select-item-pink-bg-dark,oklch(89.9%_0.061_343.231))] data-[selected=true]:text-[color:var(--zui-select-item-pink-fg,oklch(40.8%_0.153_2.432))] dark:data-[selected=true]:text-[color:var(--zui-select-item-pink-fg-dark,oklch(40.8%_0.153_2.432))]",
+  orange: "border-[color:var(--zui-select-item-orange-border,oklch(40.8%_0.123_38.172))] dark:border-[color:var(--zui-select-item-orange-border-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-select-item-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-select-item-orange-fg-dark,oklch(90.1%_0.076_70.697))] data-[selected=true]:border-[color:var(--zui-select-item-orange-border,oklch(40.8%_0.123_38.172))] dark:data-[selected=true]:border-[color:var(--zui-select-item-orange-border-dark,oklch(64.6%_0.222_41.116))] data-[selected=true]:bg-[var(--zui-select-item-orange-bg,oklch(90.1%_0.076_70.697))] dark:data-[selected=true]:bg-[var(--zui-select-item-orange-bg-dark,oklch(90.1%_0.076_70.697))] data-[selected=true]:text-[color:var(--zui-select-item-orange-fg,oklch(40.8%_0.123_38.172))] dark:data-[selected=true]:text-[color:var(--zui-select-item-orange-fg-dark,oklch(40.8%_0.123_38.172))]",
+  yellow: "border-[color:var(--zui-select-item-yellow-border,oklch(42.1%_0.095_57.708))] dark:border-[color:var(--zui-select-item-yellow-border-dark,oklch(68.1%_0.162_75.834))] text-[color:var(--zui-select-item-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-select-item-yellow-fg-dark,oklch(94.5%_0.129_101.54))] data-[selected=true]:border-[color:var(--zui-select-item-yellow-border,oklch(42.1%_0.095_57.708))] dark:data-[selected=true]:border-[color:var(--zui-select-item-yellow-border-dark,oklch(68.1%_0.162_75.834))] data-[selected=true]:bg-[var(--zui-select-item-yellow-bg,oklch(94.5%_0.129_101.54))] dark:data-[selected=true]:bg-[var(--zui-select-item-yellow-bg-dark,oklch(94.5%_0.129_101.54))] data-[selected=true]:text-[color:var(--zui-select-item-yellow-fg,oklch(42.1%_0.095_57.708))] dark:data-[selected=true]:text-[color:var(--zui-select-item-yellow-fg-dark,oklch(42.1%_0.095_57.708))]",
+  teal: "border-[color:var(--zui-select-item-teal-border,oklch(38.6%_0.063_188.416))] dark:border-[color:var(--zui-select-item-teal-border-dark,oklch(60%_0.118_184.704))] text-[color:var(--zui-select-item-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-select-item-teal-fg-dark,oklch(91%_0.096_180.426))] data-[selected=true]:border-[color:var(--zui-select-item-teal-border,oklch(38.6%_0.063_188.416))] dark:data-[selected=true]:border-[color:var(--zui-select-item-teal-border-dark,oklch(60%_0.118_184.704))] data-[selected=true]:bg-[var(--zui-select-item-teal-bg,oklch(91%_0.096_180.426))] dark:data-[selected=true]:bg-[var(--zui-select-item-teal-bg-dark,oklch(91%_0.096_180.426))] data-[selected=true]:text-[color:var(--zui-select-item-teal-fg,oklch(38.6%_0.063_188.416))] dark:data-[selected=true]:text-[color:var(--zui-select-item-teal-fg-dark,oklch(38.6%_0.063_188.416))]",
+  indigo: "border-[color:var(--zui-select-item-indigo-border,oklch(35.9%_0.144_278.697))] dark:border-[color:var(--zui-select-item-indigo-border-dark,oklch(51.1%_0.262_276.966))] text-[color:var(--zui-select-item-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-select-item-indigo-fg-dark,oklch(87%_0.065_274.039))] data-[selected=true]:border-[color:var(--zui-select-item-indigo-border,oklch(35.9%_0.144_278.697))] dark:data-[selected=true]:border-[color:var(--zui-select-item-indigo-border-dark,oklch(51.1%_0.262_276.966))] data-[selected=true]:bg-[var(--zui-select-item-indigo-bg,oklch(87%_0.065_274.039))] dark:data-[selected=true]:bg-[var(--zui-select-item-indigo-bg-dark,oklch(87%_0.065_274.039))] data-[selected=true]:text-[color:var(--zui-select-item-indigo-fg,oklch(35.9%_0.144_278.697))] dark:data-[selected=true]:text-[color:var(--zui-select-item-indigo-fg-dark,oklch(35.9%_0.144_278.697))]",
+  emerald: "border-[color:var(--zui-select-item-emerald-border,oklch(37.8%_0.077_168.94))] dark:border-[color:var(--zui-select-item-emerald-border-dark,oklch(59.6%_0.145_163.225))] text-[color:var(--zui-select-item-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-select-item-emerald-fg-dark,oklch(90.5%_0.093_164.15))] data-[selected=true]:border-[color:var(--zui-select-item-emerald-border,oklch(37.8%_0.077_168.94))] dark:data-[selected=true]:border-[color:var(--zui-select-item-emerald-border-dark,oklch(59.6%_0.145_163.225))] data-[selected=true]:bg-[var(--zui-select-item-emerald-bg,oklch(90.5%_0.093_164.15))] dark:data-[selected=true]:bg-[var(--zui-select-item-emerald-bg-dark,oklch(90.5%_0.093_164.15))] data-[selected=true]:text-[color:var(--zui-select-item-emerald-fg,oklch(37.8%_0.077_168.94))] dark:data-[selected=true]:text-[color:var(--zui-select-item-emerald-fg-dark,oklch(37.8%_0.077_168.94))]",
+  "gradient-blue": "bg-[var(--zui-select-item-gradient-blue-bg,transparent)] dark:bg-[var(--zui-select-item-gradient-blue-bg-dark,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-blue-fg,oklch(97%_0.014_254.604))] dark:text-[color:var(--zui-select-item-gradient-blue-fg-dark,oklch(97%_0.014_254.604))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-blue-from,oklch(97%_0.014_254.604))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-blue-from-dark,oklch(97%_0.014_254.604))] data-[selected=true]:to-[var(--zui-select-item-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-blue-to-dark,oklch(97.7%_0.014_308.299))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-blue-fg,oklch(37.9%_0.146_265.522))] dark:data-[selected=true]:text-[color:var(--zui-select-item-gradient-blue-fg-dark,oklch(37.9%_0.146_265.522))]",
+  "gradient-green": "bg-[var(--zui-select-item-gradient-green-bg,transparent)] dark:bg-[var(--zui-select-item-gradient-green-bg-dark,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-green-fg,oklch(98.2%_0.018_155.826))] dark:text-[color:var(--zui-select-item-gradient-green-fg-dark,oklch(98.2%_0.018_155.826))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-green-from-dark,oklch(98.2%_0.018_155.826))] data-[selected=true]:to-[var(--zui-select-item-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-green-to-dark,oklch(98.6%_0.031_120.757))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-green-fg,oklch(39.3%_0.095_152.535))] dark:data-[selected=true]:text-[color:var(--zui-select-item-gradient-green-fg-dark,oklch(39.3%_0.095_152.535))]",
+  "gradient-red": "bg-[var(--zui-select-item-gradient-red-bg,transparent)] dark:bg-[var(--zui-select-item-gradient-red-bg-dark,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-red-fg,oklch(97.1%_0.013_17.38))] dark:text-[color:var(--zui-select-item-gradient-red-fg-dark,oklch(97.1%_0.013_17.38))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-red-from-dark,oklch(97.1%_0.013_17.38))] data-[selected=true]:to-[var(--zui-select-item-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-red-to-dark,oklch(97.1%_0.014_343.198))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-red-fg,oklch(39.6%_0.141_25.723))] dark:data-[selected=true]:text-[color:var(--zui-select-item-gradient-red-fg-dark,oklch(39.6%_0.141_25.723))]",
+  "gradient-yellow": "bg-[var(--zui-select-item-gradient-yellow-bg,transparent)] dark:bg-[var(--zui-select-item-gradient-yellow-bg-dark,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-yellow-fg,oklch(98.7%_0.026_102.212))] dark:text-[color:var(--zui-select-item-gradient-yellow-fg-dark,oklch(98.7%_0.026_102.212))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-yellow-from-dark,oklch(98.7%_0.026_102.212))] data-[selected=true]:to-[var(--zui-select-item-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-yellow-to-dark,oklch(98%_0.016_73.684))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] dark:data-[selected=true]:text-[color:var(--zui-select-item-gradient-yellow-fg-dark,oklch(42.1%_0.095_57.708))]",
+  "gradient-purple": "bg-[var(--zui-select-item-gradient-purple-bg,transparent)] dark:bg-[var(--zui-select-item-gradient-purple-bg-dark,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-purple-fg,oklch(97.7%_0.014_308.299))] dark:text-[color:var(--zui-select-item-gradient-purple-fg-dark,oklch(97.7%_0.014_308.299))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-purple-from-dark,oklch(97.7%_0.014_308.299))] data-[selected=true]:to-[var(--zui-select-item-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-purple-to-dark,oklch(97.1%_0.014_343.198))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-purple-fg,oklch(38.1%_0.176_304.987))] dark:data-[selected=true]:text-[color:var(--zui-select-item-gradient-purple-fg-dark,oklch(38.1%_0.176_304.987))]",
+  "gradient-teal": "bg-[var(--zui-select-item-gradient-teal-bg,transparent)] dark:bg-[var(--zui-select-item-gradient-teal-bg-dark,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-teal-fg,oklch(98.4%_0.014_180.72))] dark:text-[color:var(--zui-select-item-gradient-teal-fg-dark,oklch(98.4%_0.014_180.72))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-teal-from-dark,oklch(98.4%_0.014_180.72))] data-[selected=true]:to-[var(--zui-select-item-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-teal-to-dark,oklch(98.4%_0.019_200.873))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-teal-fg,oklch(38.6%_0.063_188.416))] dark:data-[selected=true]:text-[color:var(--zui-select-item-gradient-teal-fg-dark,oklch(38.6%_0.063_188.416))]",
+  "gradient-indigo": "bg-[var(--zui-select-item-gradient-indigo-bg,transparent)] dark:bg-[var(--zui-select-item-gradient-indigo-bg-dark,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-indigo-fg,oklch(96.2%_0.018_272.314))] dark:text-[color:var(--zui-select-item-gradient-indigo-fg-dark,oklch(96.2%_0.018_272.314))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-indigo-from-dark,oklch(96.2%_0.018_272.314))] data-[selected=true]:to-[var(--zui-select-item-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-indigo-to-dark,oklch(97.7%_0.014_308.299))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-indigo-fg,oklch(35.9%_0.144_278.697))] dark:data-[selected=true]:text-[color:var(--zui-select-item-gradient-indigo-fg-dark,oklch(35.9%_0.144_278.697))]",
+  "gradient-pink": "bg-[var(--zui-select-item-gradient-pink-bg,transparent)] dark:bg-[var(--zui-select-item-gradient-pink-bg-dark,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-pink-fg,oklch(97.1%_0.014_343.198))] dark:text-[color:var(--zui-select-item-gradient-pink-fg-dark,oklch(97.1%_0.014_343.198))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-pink-from-dark,oklch(97.1%_0.014_343.198))] data-[selected=true]:to-[var(--zui-select-item-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-pink-to-dark,oklch(96.9%_0.015_12.422))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-pink-fg,oklch(40.8%_0.153_2.432))] dark:data-[selected=true]:text-[color:var(--zui-select-item-gradient-pink-fg-dark,oklch(40.8%_0.153_2.432))]",
+  "gradient-orange": "bg-[var(--zui-select-item-gradient-orange-bg,transparent)] dark:bg-[var(--zui-select-item-gradient-orange-bg-dark,transparent)] backdrop-blur-xl text-[color:var(--zui-select-item-gradient-orange-fg,oklch(98%_0.016_73.684))] dark:text-[color:var(--zui-select-item-gradient-orange-fg-dark,oklch(98%_0.016_73.684))] data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-select-item-gradient-orange-from,oklch(98%_0.016_73.684))] dark:data-[selected=true]:from-[var(--zui-select-item-gradient-orange-from-dark,oklch(98%_0.016_73.684))] data-[selected=true]:to-[var(--zui-select-item-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:data-[selected=true]:to-[var(--zui-select-item-gradient-orange-to-dark,oklch(97.1%_0.013_17.38))] data-[selected=true]:text-[color:var(--zui-select-item-gradient-orange-fg,oklch(40.8%_0.123_38.172))] dark:data-[selected=true]:text-[color:var(--zui-select-item-gradient-orange-fg-dark,oklch(40.8%_0.123_38.172))]"
 };
 var zuiSelectDisabled = {
   true: "opacity-50 cursor-not-allowed"
@@ -69,8 +69,8 @@ var zuiSelectContentBase = "absolute z-10 mt-2 w-full rounded-md border bg-[var(
 var zuiSelectContentAppearances = {
   default: "bg-[var(--zui-select-content-default-bg,#ffffff)] dark:bg-[var(--zui-select-content-default-bg-dark,#000000)] shadow-md",
   glass: "bg-[var(--zui-select-content-glass-bg,#0000001a)] dark:bg-[var(--zui-select-content-glass-bg-dark,#ffffff1a)] backdrop-blur-md",
-  outline: "border-2 border-[color:var(--zui-select-content-outline-border,oklch(55.1%_0.027_264.364))]",
-  ghost: "border-[color:var(--zui-select-content-ghost-border,transparent)]",
+  outline: "border-2 border-[color:var(--zui-select-content-outline-border,oklch(55.1%_0.027_264.364))] dark:border-[color:var(--zui-select-content-outline-border-dark,oklch(55.1%_0.027_264.364))]",
+  ghost: "border-[color:var(--zui-select-content-ghost-border,transparent)] dark:border-[color:var(--zui-select-content-ghost-border-dark,transparent)]",
   sky: "border-[color:var(--zui-select-content-sky-border,oklch(39.1%_0.09_240.876))] dark:border-[color:var(--zui-select-content-sky-border-dark,oklch(58.8%_0.158_241.966))]",
   rose: "border-[color:var(--zui-select-content-rose-border,oklch(41%_0.159_10.272))] dark:border-[color:var(--zui-select-content-rose-border-dark,oklch(58.6%_0.253_17.585))]",
   purple: "border-[color:var(--zui-select-content-purple-border,oklch(38.1%_0.176_304.987))] dark:border-[color:var(--zui-select-content-purple-border-dark,oklch(55.8%_0.288_302.321))]",