@zentauri-ui/zentauri-components 1.8.42 → 1.9.1

package/dist/chunk-6VZGM4DI.mjs

@@ -0,0 +1,170 @@
+import { cn } from './chunk-4D54YOL6.mjs';
+import { cva } from 'class-variance-authority';
+import { createContext, useMemo, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/design-system/empty-state.ts
+var zuiEmptyStateBase = "flex w-full flex-col items-center text-center";
+var zuiEmptyStateSizes = {
+  sm: "gap-2 p-4 text-sm",
+  md: "gap-3 p-6 text-sm",
+  lg: "gap-4 p-8 text-base"
+};
+var zuiEmptyStateAppearances = {
+  default: "text-[color:var(--zui-empty-state-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-empty-state-default-fg-dark,oklch(98.4%_0.003_247.858))]",
+  ghost: "text-[color:var(--zui-empty-state-ghost-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-empty-state-ghost-fg-dark,oklch(92.9%_0.013_255.508))]",
+  card: "rounded-2xl border border-[color:var(--zui-empty-state-card-border,#0000001a)] dark:border-[color:var(--zui-empty-state-card-border-dark,#ffffff1a)] bg-[var(--zui-empty-state-card-bg,#ffffffe6)] dark:bg-[var(--zui-empty-state-card-bg-dark,#ffffff0d)] p-8 text-[color:var(--zui-empty-state-card-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-empty-state-card-fg-dark,oklch(98.4%_0.003_247.858))] shadow-[var(--zui-empty-state-card-shadow,0_8px_24px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-empty-state-card-shadow-dark,0_18px_48px_rgba(15,23,42,0.35))]",
+  blue: "border border-[color:var(--zui-empty-state-blue-border,#2563eb)] dark:border-[color:var(--zui-empty-state-blue-border-dark,#3b82f6)] bg-[var(--zui-empty-state-blue-bg,#2563eb14)] dark:bg-[var(--zui-empty-state-blue-bg-dark,#3b82f624)] text-[color:var(--zui-empty-state-blue-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-blue-fg-dark,#f8fafc)]",
+  cyan: "border border-[color:var(--zui-empty-state-cyan-border,#0891b2)] dark:border-[color:var(--zui-empty-state-cyan-border-dark,#22d3ee)] bg-[var(--zui-empty-state-cyan-bg,#0891b214)] dark:bg-[var(--zui-empty-state-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-empty-state-cyan-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-cyan-fg-dark,#f8fafc)]",
+  green: "border border-[color:var(--zui-empty-state-green-border,#16a34a)] dark:border-[color:var(--zui-empty-state-green-border-dark,#22c55e)] bg-[var(--zui-empty-state-green-bg,#16a34a14)] dark:bg-[var(--zui-empty-state-green-bg-dark,#22c55e24)] text-[color:var(--zui-empty-state-green-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-green-fg-dark,#f8fafc)]",
+  lime: "border border-[color:var(--zui-empty-state-lime-border,#65a30d)] dark:border-[color:var(--zui-empty-state-lime-border-dark,#a3e635)] bg-[var(--zui-empty-state-lime-bg,#65a30d14)] dark:bg-[var(--zui-empty-state-lime-bg-dark,#a3e63524)] text-[color:var(--zui-empty-state-lime-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-lime-fg-dark,#f8fafc)]",
+  mint: "border border-[color:var(--zui-empty-state-mint-border,#10b981)] dark:border-[color:var(--zui-empty-state-mint-border-dark,#6ee7b7)] bg-[var(--zui-empty-state-mint-bg,#10b98114)] dark:bg-[var(--zui-empty-state-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-empty-state-mint-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-mint-fg-dark,#f8fafc)]",
+  ocean: "border border-[color:var(--zui-empty-state-ocean-border,#0284c7)] dark:border-[color:var(--zui-empty-state-ocean-border-dark,#38bdf8)] bg-[var(--zui-empty-state-ocean-bg,#0284c714)] dark:bg-[var(--zui-empty-state-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-empty-state-ocean-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-ocean-fg-dark,#f8fafc)]",
+  sapphire: "border border-[color:var(--zui-empty-state-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-empty-state-sapphire-border-dark,#60a5fa)] bg-[var(--zui-empty-state-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-empty-state-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-empty-state-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-sapphire-fg-dark,#f8fafc)]",
+  lavender: "border border-[color:var(--zui-empty-state-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-empty-state-lavender-border-dark,#a78bfa)] bg-[var(--zui-empty-state-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-empty-state-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-empty-state-lavender-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-lavender-fg-dark,#f8fafc)]",
+  ruby: "border border-[color:var(--zui-empty-state-ruby-border,#be123c)] dark:border-[color:var(--zui-empty-state-ruby-border-dark,#fb7185)] bg-[var(--zui-empty-state-ruby-bg,#be123c14)] dark:bg-[var(--zui-empty-state-ruby-bg-dark,#fb718524)] text-[color:var(--zui-empty-state-ruby-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-ruby-fg-dark,#f8fafc)]",
+  red: "border border-[color:var(--zui-empty-state-red-border,#dc2626)] dark:border-[color:var(--zui-empty-state-red-border-dark,#ef4444)] bg-[var(--zui-empty-state-red-bg,#dc262614)] dark:bg-[var(--zui-empty-state-red-bg-dark,#ef444424)] text-[color:var(--zui-empty-state-red-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-red-fg-dark,#f8fafc)]",
+  slate: "border border-[color:var(--zui-empty-state-slate-border,#475569)] dark:border-[color:var(--zui-empty-state-slate-border-dark,#64748b)] bg-[var(--zui-empty-state-slate-bg,#47556914)] dark:bg-[var(--zui-empty-state-slate-bg-dark,#64748b24)] text-[color:var(--zui-empty-state-slate-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-slate-fg-dark,#f8fafc)]",
+  zinc: "border border-[color:var(--zui-empty-state-zinc-border,#52525b)] dark:border-[color:var(--zui-empty-state-zinc-border-dark,#71717a)] bg-[var(--zui-empty-state-zinc-bg,#52525b14)] dark:bg-[var(--zui-empty-state-zinc-bg-dark,#71717a24)] text-[color:var(--zui-empty-state-zinc-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-zinc-fg-dark,#f8fafc)]",
+  stone: "border border-[color:var(--zui-empty-state-stone-border,#57534e)] dark:border-[color:var(--zui-empty-state-stone-border-dark,#78716c)] bg-[var(--zui-empty-state-stone-bg,#57534e14)] dark:bg-[var(--zui-empty-state-stone-bg-dark,#78716c24)] text-[color:var(--zui-empty-state-stone-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-stone-fg-dark,#f8fafc)]",
+  royal: "border border-[color:var(--zui-empty-state-royal-border,#4338ca)] dark:border-[color:var(--zui-empty-state-royal-border-dark,#818cf8)] bg-[var(--zui-empty-state-royal-bg,#4338ca14)] dark:bg-[var(--zui-empty-state-royal-bg-dark,#818cf824)] text-[color:var(--zui-empty-state-royal-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-royal-fg-dark,#f8fafc)]",
+  electric: "border border-[color:var(--zui-empty-state-electric-border,#0ea5e9)] dark:border-[color:var(--zui-empty-state-electric-border-dark,#38bdf8)] bg-[var(--zui-empty-state-electric-bg,#0ea5e914)] dark:bg-[var(--zui-empty-state-electric-bg-dark,#38bdf824)] text-[color:var(--zui-empty-state-electric-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-electric-fg-dark,#f8fafc)]",
+  forest: "border border-[color:var(--zui-empty-state-forest-border,#166534)] dark:border-[color:var(--zui-empty-state-forest-border-dark,#4ade80)] bg-[var(--zui-empty-state-forest-bg,#16653414)] dark:bg-[var(--zui-empty-state-forest-bg-dark,#4ade8024)] text-[color:var(--zui-empty-state-forest-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-forest-fg-dark,#f8fafc)]",
+  sunset: "border border-[color:var(--zui-empty-state-sunset-border,#ea580c)] dark:border-[color:var(--zui-empty-state-sunset-border-dark,#fb923c)] bg-[var(--zui-empty-state-sunset-bg,#ea580c14)] dark:bg-[var(--zui-empty-state-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-empty-state-sunset-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-sunset-fg-dark,#f8fafc)]",
+  magenta: "border border-[color:var(--zui-empty-state-magenta-border,#c026d3)] dark:border-[color:var(--zui-empty-state-magenta-border-dark,#e879f9)] bg-[var(--zui-empty-state-magenta-bg,#c026d314)] dark:bg-[var(--zui-empty-state-magenta-bg-dark,#e879f924)] text-[color:var(--zui-empty-state-magenta-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-magenta-fg-dark,#f8fafc)]",
+  crimson: "border border-[color:var(--zui-empty-state-crimson-border,#b91c1c)] dark:border-[color:var(--zui-empty-state-crimson-border-dark,#f87171)] bg-[var(--zui-empty-state-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-empty-state-crimson-bg-dark,#f8717124)] text-[color:var(--zui-empty-state-crimson-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-crimson-fg-dark,#f8fafc)]",
+  aqua: "border border-[color:var(--zui-empty-state-aqua-border,#0f766e)] dark:border-[color:var(--zui-empty-state-aqua-border-dark,#2dd4bf)] bg-[var(--zui-empty-state-aqua-bg,#0f766e14)] dark:bg-[var(--zui-empty-state-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-empty-state-aqua-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-aqua-fg-dark,#f8fafc)]",
+  plum: "border border-[color:var(--zui-empty-state-plum-border,#7e22ce)] dark:border-[color:var(--zui-empty-state-plum-border-dark,#c084fc)] bg-[var(--zui-empty-state-plum-bg,#7e22ce14)] dark:bg-[var(--zui-empty-state-plum-bg-dark,#c084fc24)] text-[color:var(--zui-empty-state-plum-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-plum-fg-dark,#f8fafc)]"
+};
+var zuiEmptyStateAlignments = {
+  start: "items-start text-left",
+  center: "items-center text-center",
+  end: "items-end text-right"
+};
+var zuiEmptyStateTitleBase = "font-semibold tracking-tight";
+var zuiEmptyStateTitleSizes = {
+  sm: "text-base",
+  md: "text-lg",
+  lg: "text-xl"
+};
+var zuiEmptyStateDescriptionBase = "max-w-md text-[color:var(--zui-empty-state-description-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-empty-state-description-fg-dark,oklch(70.4%_0.04_256.788))]";
+var zuiEmptyStateDescriptionSizes = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+
+// src/ui/empty-state/variants.ts
+var emptyStateVariants = cva(zuiEmptyStateBase, {
+  variants: {
+    size: zuiEmptyStateSizes,
+    appearance: zuiEmptyStateAppearances,
+    align: zuiEmptyStateAlignments
+  },
+  defaultVariants: {
+    size: "md",
+    appearance: "default",
+    align: "center"
+  }
+});
+var emptyStateTitleVariants = cva(zuiEmptyStateTitleBase, {
+  variants: {
+    size: zuiEmptyStateTitleSizes
+  },
+  defaultVariants: { size: "md" }
+});
+var emptyStateDescriptionVariants = cva(zuiEmptyStateDescriptionBase, {
+  variants: {
+    size: zuiEmptyStateDescriptionSizes
+  },
+  defaultVariants: { size: "md" }
+});
+var EmptyStateSizeContext = createContext("md");
+function useEmptyStateSize() {
+  return useContext(EmptyStateSizeContext);
+}
+function EmptyStateBase(props) {
+  const {
+    className,
+    size = "md",
+    appearance,
+    align,
+    children,
+    ref,
+    liveRegion = false,
+    as: Wrapper = "section",
+    ...rest
+  } = props;
+  const ctx = useMemo(() => size ?? "md", [size]);
+  const liveAria = typeof liveRegion === "string" ? liveRegion : liveRegion === true ? "polite" : void 0;
+  return /* @__PURE__ */ jsx(EmptyStateSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    Wrapper,
+    {
+      ref,
+      "data-slot": "empty-state",
+      "aria-live": liveAria,
+      className: cn(
+        emptyStateVariants({ size, appearance, align }),
+        className
+      ),
+      ...rest,
+      children
+    }
+  ) });
+}
+EmptyStateBase.displayName = "EmptyState";
+function EmptyStateIcon({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-state-icon",
+      className: cn("text-slate-300", className),
+      children
+    }
+  );
+}
+EmptyStateIcon.displayName = "EmptyStateIcon";
+function EmptyStateTitle({
+  className,
+  children
+}) {
+  const size = useEmptyStateSize();
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      "data-slot": "empty-state-title",
+      className: cn(emptyStateTitleVariants({ size }), className),
+      children
+    }
+  );
+}
+EmptyStateTitle.displayName = "EmptyStateTitle";
+function EmptyStateDescription({
+  className,
+  children
+}) {
+  const size = useEmptyStateSize();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "empty-state-description",
+      className: cn(emptyStateDescriptionVariants({ size }), className),
+      children
+    }
+  );
+}
+EmptyStateDescription.displayName = "EmptyStateDescription";
+function EmptyStateAction({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "empty-state-action", className: cn("mt-2", className), children });
+}
+EmptyStateAction.displayName = "EmptyStateAction";
+
+export { EmptyStateAction, EmptyStateBase, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, emptyStateDescriptionVariants, emptyStateTitleVariants, emptyStateVariants };
+//# sourceMappingURL=chunk-6VZGM4DI.mjs.map
+//# sourceMappingURL=chunk-6VZGM4DI.mjs.map

package/dist/chunk-6VZGM4DI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/design-system/empty-state.ts","../src/ui/empty-state/variants.ts","../src/ui/empty-state/empty-state-base.tsx"],"names":[],"mappings":"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","file":"chunk-6VZGM4DI.mjs","sourcesContent":["export const zuiEmptyStateBase =\n  \"flex w-full flex-col items-center text-center\";\n\nexport const zuiEmptyStateSizes = {\n  sm: \"gap-2 p-4 text-sm\",\n  md: \"gap-3 p-6 text-sm\",\n  lg: \"gap-4 p-8 text-base\",\n} as const;\n\nexport const zuiEmptyStateAppearances = {\n  default:\n    \"text-[color:var(--zui-empty-state-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-empty-state-default-fg-dark,oklch(98.4%_0.003_247.858))]\",\n  ghost:\n    \"text-[color:var(--zui-empty-state-ghost-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-empty-state-ghost-fg-dark,oklch(92.9%_0.013_255.508))]\",\n  card: \"rounded-2xl border border-[color:var(--zui-empty-state-card-border,#0000001a)] dark:border-[color:var(--zui-empty-state-card-border-dark,#ffffff1a)] bg-[var(--zui-empty-state-card-bg,#ffffffe6)] dark:bg-[var(--zui-empty-state-card-bg-dark,#ffffff0d)] p-8 text-[color:var(--zui-empty-state-card-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-empty-state-card-fg-dark,oklch(98.4%_0.003_247.858))] shadow-[var(--zui-empty-state-card-shadow,0_8px_24px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-empty-state-card-shadow-dark,0_18px_48px_rgba(15,23,42,0.35))]\",\n  blue: \"border border-[color:var(--zui-empty-state-blue-border,#2563eb)] dark:border-[color:var(--zui-empty-state-blue-border-dark,#3b82f6)] bg-[var(--zui-empty-state-blue-bg,#2563eb14)] dark:bg-[var(--zui-empty-state-blue-bg-dark,#3b82f624)] text-[color:var(--zui-empty-state-blue-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-blue-fg-dark,#f8fafc)]\",\n  cyan: \"border border-[color:var(--zui-empty-state-cyan-border,#0891b2)] dark:border-[color:var(--zui-empty-state-cyan-border-dark,#22d3ee)] bg-[var(--zui-empty-state-cyan-bg,#0891b214)] dark:bg-[var(--zui-empty-state-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-empty-state-cyan-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-cyan-fg-dark,#f8fafc)]\",\n  green:\n    \"border border-[color:var(--zui-empty-state-green-border,#16a34a)] dark:border-[color:var(--zui-empty-state-green-border-dark,#22c55e)] bg-[var(--zui-empty-state-green-bg,#16a34a14)] dark:bg-[var(--zui-empty-state-green-bg-dark,#22c55e24)] text-[color:var(--zui-empty-state-green-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-green-fg-dark,#f8fafc)]\",\n  lime: \"border border-[color:var(--zui-empty-state-lime-border,#65a30d)] dark:border-[color:var(--zui-empty-state-lime-border-dark,#a3e635)] bg-[var(--zui-empty-state-lime-bg,#65a30d14)] dark:bg-[var(--zui-empty-state-lime-bg-dark,#a3e63524)] text-[color:var(--zui-empty-state-lime-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-lime-fg-dark,#f8fafc)]\",\n  mint: \"border border-[color:var(--zui-empty-state-mint-border,#10b981)] dark:border-[color:var(--zui-empty-state-mint-border-dark,#6ee7b7)] bg-[var(--zui-empty-state-mint-bg,#10b98114)] dark:bg-[var(--zui-empty-state-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-empty-state-mint-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-mint-fg-dark,#f8fafc)]\",\n  ocean:\n    \"border border-[color:var(--zui-empty-state-ocean-border,#0284c7)] dark:border-[color:var(--zui-empty-state-ocean-border-dark,#38bdf8)] bg-[var(--zui-empty-state-ocean-bg,#0284c714)] dark:bg-[var(--zui-empty-state-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-empty-state-ocean-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-ocean-fg-dark,#f8fafc)]\",\n  sapphire:\n    \"border border-[color:var(--zui-empty-state-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-empty-state-sapphire-border-dark,#60a5fa)] bg-[var(--zui-empty-state-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-empty-state-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-empty-state-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-sapphire-fg-dark,#f8fafc)]\",\n  lavender:\n    \"border border-[color:var(--zui-empty-state-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-empty-state-lavender-border-dark,#a78bfa)] bg-[var(--zui-empty-state-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-empty-state-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-empty-state-lavender-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-lavender-fg-dark,#f8fafc)]\",\n  ruby: \"border border-[color:var(--zui-empty-state-ruby-border,#be123c)] dark:border-[color:var(--zui-empty-state-ruby-border-dark,#fb7185)] bg-[var(--zui-empty-state-ruby-bg,#be123c14)] dark:bg-[var(--zui-empty-state-ruby-bg-dark,#fb718524)] text-[color:var(--zui-empty-state-ruby-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-ruby-fg-dark,#f8fafc)]\",\n  red: \"border border-[color:var(--zui-empty-state-red-border,#dc2626)] dark:border-[color:var(--zui-empty-state-red-border-dark,#ef4444)] bg-[var(--zui-empty-state-red-bg,#dc262614)] dark:bg-[var(--zui-empty-state-red-bg-dark,#ef444424)] text-[color:var(--zui-empty-state-red-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-red-fg-dark,#f8fafc)]\",\n  slate:\n    \"border border-[color:var(--zui-empty-state-slate-border,#475569)] dark:border-[color:var(--zui-empty-state-slate-border-dark,#64748b)] bg-[var(--zui-empty-state-slate-bg,#47556914)] dark:bg-[var(--zui-empty-state-slate-bg-dark,#64748b24)] text-[color:var(--zui-empty-state-slate-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-slate-fg-dark,#f8fafc)]\",\n  zinc: \"border border-[color:var(--zui-empty-state-zinc-border,#52525b)] dark:border-[color:var(--zui-empty-state-zinc-border-dark,#71717a)] bg-[var(--zui-empty-state-zinc-bg,#52525b14)] dark:bg-[var(--zui-empty-state-zinc-bg-dark,#71717a24)] text-[color:var(--zui-empty-state-zinc-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-zinc-fg-dark,#f8fafc)]\",\n  stone:\n    \"border border-[color:var(--zui-empty-state-stone-border,#57534e)] dark:border-[color:var(--zui-empty-state-stone-border-dark,#78716c)] bg-[var(--zui-empty-state-stone-bg,#57534e14)] dark:bg-[var(--zui-empty-state-stone-bg-dark,#78716c24)] text-[color:var(--zui-empty-state-stone-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-stone-fg-dark,#f8fafc)]\",\n  royal:\n    \"border border-[color:var(--zui-empty-state-royal-border,#4338ca)] dark:border-[color:var(--zui-empty-state-royal-border-dark,#818cf8)] bg-[var(--zui-empty-state-royal-bg,#4338ca14)] dark:bg-[var(--zui-empty-state-royal-bg-dark,#818cf824)] text-[color:var(--zui-empty-state-royal-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-royal-fg-dark,#f8fafc)]\",\n  electric:\n    \"border border-[color:var(--zui-empty-state-electric-border,#0ea5e9)] dark:border-[color:var(--zui-empty-state-electric-border-dark,#38bdf8)] bg-[var(--zui-empty-state-electric-bg,#0ea5e914)] dark:bg-[var(--zui-empty-state-electric-bg-dark,#38bdf824)] text-[color:var(--zui-empty-state-electric-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-electric-fg-dark,#f8fafc)]\",\n  forest:\n    \"border border-[color:var(--zui-empty-state-forest-border,#166534)] dark:border-[color:var(--zui-empty-state-forest-border-dark,#4ade80)] bg-[var(--zui-empty-state-forest-bg,#16653414)] dark:bg-[var(--zui-empty-state-forest-bg-dark,#4ade8024)] text-[color:var(--zui-empty-state-forest-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-forest-fg-dark,#f8fafc)]\",\n  sunset:\n    \"border border-[color:var(--zui-empty-state-sunset-border,#ea580c)] dark:border-[color:var(--zui-empty-state-sunset-border-dark,#fb923c)] bg-[var(--zui-empty-state-sunset-bg,#ea580c14)] dark:bg-[var(--zui-empty-state-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-empty-state-sunset-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-sunset-fg-dark,#f8fafc)]\",\n  magenta:\n    \"border border-[color:var(--zui-empty-state-magenta-border,#c026d3)] dark:border-[color:var(--zui-empty-state-magenta-border-dark,#e879f9)] bg-[var(--zui-empty-state-magenta-bg,#c026d314)] dark:bg-[var(--zui-empty-state-magenta-bg-dark,#e879f924)] text-[color:var(--zui-empty-state-magenta-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-magenta-fg-dark,#f8fafc)]\",\n  crimson:\n    \"border border-[color:var(--zui-empty-state-crimson-border,#b91c1c)] dark:border-[color:var(--zui-empty-state-crimson-border-dark,#f87171)] bg-[var(--zui-empty-state-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-empty-state-crimson-bg-dark,#f8717124)] text-[color:var(--zui-empty-state-crimson-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-crimson-fg-dark,#f8fafc)]\",\n  aqua: \"border border-[color:var(--zui-empty-state-aqua-border,#0f766e)] dark:border-[color:var(--zui-empty-state-aqua-border-dark,#2dd4bf)] bg-[var(--zui-empty-state-aqua-bg,#0f766e14)] dark:bg-[var(--zui-empty-state-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-empty-state-aqua-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-aqua-fg-dark,#f8fafc)]\",\n  plum: \"border border-[color:var(--zui-empty-state-plum-border,#7e22ce)] dark:border-[color:var(--zui-empty-state-plum-border-dark,#c084fc)] bg-[var(--zui-empty-state-plum-bg,#7e22ce14)] dark:bg-[var(--zui-empty-state-plum-bg-dark,#c084fc24)] text-[color:var(--zui-empty-state-plum-fg,#0f172a)] dark:text-[color:var(--zui-empty-state-plum-fg-dark,#f8fafc)]\",\n} as const;\n\nexport const zuiEmptyStateAlignments = {\n  start: \"items-start text-left\",\n  center: \"items-center text-center\",\n  end: \"items-end text-right\",\n} as const;\n\nexport const zuiEmptyStateTitleBase = \"font-semibold tracking-tight\";\n\nexport const zuiEmptyStateTitleSizes = {\n  sm: \"text-base\",\n  md: \"text-lg\",\n  lg: \"text-xl\",\n} as const;\n\nexport const zuiEmptyStateDescriptionBase =\n  \"max-w-md text-[color:var(--zui-empty-state-description-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-empty-state-description-fg-dark,oklch(70.4%_0.04_256.788))]\";\n\nexport const zuiEmptyStateDescriptionSizes = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiEmptyStateAlignments,\n  zuiEmptyStateAppearances,\n  zuiEmptyStateBase,\n  zuiEmptyStateDescriptionBase,\n  zuiEmptyStateDescriptionSizes,\n  zuiEmptyStateSizes,\n  zuiEmptyStateTitleBase,\n  zuiEmptyStateTitleSizes,\n} from \"../../design-system/empty-state\";\n\nexport const emptyStateVariants = cva(zuiEmptyStateBase, {\n  variants: {\n    size: zuiEmptyStateSizes,\n    appearance: zuiEmptyStateAppearances,\n    align: zuiEmptyStateAlignments,\n  },\n  defaultVariants: {\n    size: \"md\",\n    appearance: \"default\",\n    align: \"center\",\n  },\n});\n\nexport const emptyStateTitleVariants = cva(zuiEmptyStateTitleBase, {\n  variants: {\n    size: zuiEmptyStateTitleSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport const emptyStateDescriptionVariants = cva(zuiEmptyStateDescriptionBase, {\n  variants: {\n    size: zuiEmptyStateDescriptionSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { createContext, useContext, useMemo } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  EmptyStateProps,\n  EmptyStateSectionProps,\n  EmptyStateSize,\n} from \"./types\";\nimport {\n  emptyStateDescriptionVariants,\n  emptyStateTitleVariants,\n  emptyStateVariants,\n} from \"./variants\";\n\nexport const EmptyStateSizeContext = createContext<EmptyStateSize>(\"md\");\n\nfunction useEmptyStateSize(): EmptyStateSize {\n  return useContext(EmptyStateSizeContext);\n}\n\nexport function EmptyStateBase(props: EmptyStateProps) {\n  const {\n    className,\n    size = \"md\",\n    appearance,\n    align,\n    children,\n    ref,\n    liveRegion = false,\n    as: Wrapper = \"section\",\n    ...rest\n  } = props;\n  const ctx = useMemo(() => size ?? \"md\", [size]);\n\n  const liveAria =\n    typeof liveRegion === \"string\"\n      ? liveRegion\n      : liveRegion === true\n        ? \"polite\"\n        : undefined;\n\n  return (\n    <EmptyStateSizeContext.Provider value={ctx}>\n      <Wrapper\n        ref={ref}\n        data-slot=\"empty-state\"\n        aria-live={liveAria}\n        className={cn(\n          emptyStateVariants({ size, appearance, align }),\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Wrapper>\n    </EmptyStateSizeContext.Provider>\n  );\n}\n\nEmptyStateBase.displayName = \"EmptyState\";\n\nexport function EmptyStateIcon({\n  className,\n  children,\n}: EmptyStateSectionProps) {\n  return (\n    <div\n      data-slot=\"empty-state-icon\"\n      className={cn(\"text-slate-300\", className)}\n    >\n      {children}\n    </div>\n  );\n}\n\nEmptyStateIcon.displayName = \"EmptyStateIcon\";\n\nexport function EmptyStateTitle({\n  className,\n  children,\n}: EmptyStateSectionProps) {\n  const size = useEmptyStateSize();\n  return (\n    <h2\n      data-slot=\"empty-state-title\"\n      className={cn(emptyStateTitleVariants({ size }), className)}\n    >\n      {children}\n    </h2>\n  );\n}\n\nEmptyStateTitle.displayName = \"EmptyStateTitle\";\n\nexport function EmptyStateDescription({\n  className,\n  children,\n}: EmptyStateSectionProps) {\n  const size = useEmptyStateSize();\n  return (\n    <p\n      data-slot=\"empty-state-description\"\n      className={cn(emptyStateDescriptionVariants({ size }), className)}\n    >\n      {children}\n    </p>\n  );\n}\n\nEmptyStateDescription.displayName = \"EmptyStateDescription\";\n\nexport function EmptyStateAction({\n  className,\n  children,\n}: EmptyStateSectionProps) {\n  return (\n    <div data-slot=\"empty-state-action\" className={cn(\"mt-2\", className)}>\n      {children}\n    </div>\n  );\n}\n\nEmptyStateAction.displayName = \"EmptyStateAction\";\n"]}

package/dist/{chunk-2ZKW2E7B.mjs → chunk-7PIOCFV3.mjs}

@@ -38,7 +38,22 @@ var zuiToggleTrackAppearances = {
   "gradient-teal": "bg-[var(--zui-toggle-track-gradient-teal-bg,oklch(85.5%_0.138_181.071))] dark:bg-[var(--zui-toggle-track-gradient-teal-bg-dark,oklch(85.5%_0.138_181.071))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-toggle-track-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-toggle-track-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-toggle-track-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))]",
   "gradient-indigo": "bg-[var(--zui-toggle-track-gradient-indigo-bg,oklch(78.5%_0.115_274.713))] dark:bg-[var(--zui-toggle-track-gradient-indigo-bg-dark,oklch(78.5%_0.115_274.713))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-toggle-track-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-toggle-track-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-toggle-track-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))]",
   "gradient-pink": "bg-[var(--zui-toggle-track-gradient-pink-bg,oklch(82.3%_0.12_346.018))] dark:bg-[var(--zui-toggle-track-gradient-pink-bg-dark,oklch(82.3%_0.12_346.018))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-toggle-track-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-toggle-track-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-toggle-track-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))]",
-  "gradient-orange": "bg-[var(--zui-toggle-track-gradient-orange-bg,oklch(83.7%_0.128_66.29))] dark:bg-[var(--zui-toggle-track-gradient-orange-bg-dark,oklch(83.7%_0.128_66.29))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-toggle-track-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-toggle-track-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-toggle-track-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))]"
+  "gradient-orange": "bg-[var(--zui-toggle-track-gradient-orange-bg,oklch(83.7%_0.128_66.29))] dark:bg-[var(--zui-toggle-track-gradient-orange-bg-dark,oklch(83.7%_0.128_66.29))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-toggle-track-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-toggle-track-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-toggle-track-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))]",
+  blue: "data-[state=checked]:border-[color:var(--zui-toggle-track-blue-border-checked,#2563eb66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-blue-border-checked-dark,#3b82f666)] data-[state=checked]:bg-[var(--zui-toggle-track-blue-bg-checked,#2563ebcc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-blue-bg-checked-dark,#3b82f6cc)]",
+  mint: "data-[state=checked]:border-[color:var(--zui-toggle-track-mint-border-checked,#10b98166)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-mint-border-checked-dark,#6ee7b766)] data-[state=checked]:bg-[var(--zui-toggle-track-mint-bg-checked,#10b981cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-mint-bg-checked-dark,#6ee7b7cc)]",
+  ocean: "data-[state=checked]:border-[color:var(--zui-toggle-track-ocean-border-checked,#0284c766)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-ocean-border-checked-dark,#38bdf866)] data-[state=checked]:bg-[var(--zui-toggle-track-ocean-bg-checked,#0284c7cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-ocean-bg-checked-dark,#38bdf8cc)]",
+  sapphire: "data-[state=checked]:border-[color:var(--zui-toggle-track-sapphire-border-checked,#1d4ed866)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-sapphire-border-checked-dark,#60a5fa66)] data-[state=checked]:bg-[var(--zui-toggle-track-sapphire-bg-checked,#1d4ed8cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-sapphire-bg-checked-dark,#60a5facc)]",
+  lavender: "data-[state=checked]:border-[color:var(--zui-toggle-track-lavender-border-checked,#8b5cf666)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-lavender-border-checked-dark,#a78bfa66)] data-[state=checked]:bg-[var(--zui-toggle-track-lavender-bg-checked,#8b5cf6cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-lavender-bg-checked-dark,#a78bfacc)]",
+  ruby: "data-[state=checked]:border-[color:var(--zui-toggle-track-ruby-border-checked,#be123c66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-ruby-border-checked-dark,#fb718566)] data-[state=checked]:bg-[var(--zui-toggle-track-ruby-bg-checked,#be123ccc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-ruby-bg-checked-dark,#fb7185cc)]",
+  red: "data-[state=checked]:border-[color:var(--zui-toggle-track-red-border-checked,#dc262666)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-red-border-checked-dark,#ef444466)] data-[state=checked]:bg-[var(--zui-toggle-track-red-bg-checked,#dc2626cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-red-bg-checked-dark,#ef4444cc)]",
+  royal: "data-[state=checked]:border-[color:var(--zui-toggle-track-royal-border-checked,#4338ca66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-royal-border-checked-dark,#818cf866)] data-[state=checked]:bg-[var(--zui-toggle-track-royal-bg-checked,#4338cacc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-royal-bg-checked-dark,#818cf8cc)]",
+  electric: "data-[state=checked]:border-[color:var(--zui-toggle-track-electric-border-checked,#0ea5e966)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-electric-border-checked-dark,#38bdf866)] data-[state=checked]:bg-[var(--zui-toggle-track-electric-bg-checked,#0ea5e9cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-electric-bg-checked-dark,#38bdf8cc)]",
+  forest: "data-[state=checked]:border-[color:var(--zui-toggle-track-forest-border-checked,#16653466)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-forest-border-checked-dark,#4ade8066)] data-[state=checked]:bg-[var(--zui-toggle-track-forest-bg-checked,#166534cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-forest-bg-checked-dark,#4ade80cc)]",
+  sunset: "data-[state=checked]:border-[color:var(--zui-toggle-track-sunset-border-checked,#ea580c66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-sunset-border-checked-dark,#fb923c66)] data-[state=checked]:bg-[var(--zui-toggle-track-sunset-bg-checked,#ea580ccc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-sunset-bg-checked-dark,#fb923ccc)]",
+  magenta: "data-[state=checked]:border-[color:var(--zui-toggle-track-magenta-border-checked,#c026d366)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-magenta-border-checked-dark,#e879f966)] data-[state=checked]:bg-[var(--zui-toggle-track-magenta-bg-checked,#c026d3cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-magenta-bg-checked-dark,#e879f9cc)]",
+  crimson: "data-[state=checked]:border-[color:var(--zui-toggle-track-crimson-border-checked,#b91c1c66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-crimson-border-checked-dark,#f8717166)] data-[state=checked]:bg-[var(--zui-toggle-track-crimson-bg-checked,#b91c1ccc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-crimson-bg-checked-dark,#f87171cc)]",
+  aqua: "data-[state=checked]:border-[color:var(--zui-toggle-track-aqua-border-checked,#0f766e66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-aqua-border-checked-dark,#2dd4bf66)] data-[state=checked]:bg-[var(--zui-toggle-track-aqua-bg-checked,#0f766ecc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-aqua-bg-checked-dark,#2dd4bfcc)]",
+  plum: "data-[state=checked]:border-[color:var(--zui-toggle-track-plum-border-checked,#7e22ce66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-plum-border-checked-dark,#c084fc66)] data-[state=checked]:bg-[var(--zui-toggle-track-plum-bg-checked,#7e22cecc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-plum-bg-checked-dark,#c084fccc)]"
 };
 var zuiToggleThumbBase = "pointer-events-none block rounded-full border border-[color:var(--zui-toggle-thumb-border,oklch(20.8%_0.042_265.755_/_0.3))] dark:border-[color:var(--zui-toggle-thumb-border-dark,#ffffff1a)] shadow-[var(--zui-toggle-thumb-shadow,0_1px_2px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-toggle-thumb-shadow-dark,0_1px_2px_rgba(15,23,42,0.35))] ring-0";
 var zuiToggleThumbSizes = {
@@ -74,7 +89,22 @@ var zuiToggleThumbColors = {
   "gradient-teal": "bg-[var(--zui-toggle-thumb-colors-gradient-teal-bg,oklch(70.4%_0.14_182.503))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-teal-bg-dark,oklch(70.4%_0.14_182.503))]",
   "gradient-indigo": "bg-[var(--zui-toggle-thumb-colors-gradient-indigo-bg,oklch(58.5%_0.233_277.117))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-indigo-bg-dark,oklch(58.5%_0.233_277.117))]",
   "gradient-pink": "bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg,oklch(65.6%_0.241_354.308))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg-dark,oklch(65.6%_0.241_354.308))]",
-  "gradient-orange": "bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg-dark,oklch(70.5%_0.213_47.604))]"
+  "gradient-orange": "bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg-dark,oklch(70.5%_0.213_47.604))]",
+  blue: "bg-[var(--zui-toggle-thumb-colors-blue-bg,#2563eb)] dark:bg-[var(--zui-toggle-thumb-colors-blue-bg-dark,#3b82f6)]",
+  mint: "bg-[var(--zui-toggle-thumb-colors-mint-bg,#10b981)] dark:bg-[var(--zui-toggle-thumb-colors-mint-bg-dark,#6ee7b7)]",
+  ocean: "bg-[var(--zui-toggle-thumb-colors-ocean-bg,#0284c7)] dark:bg-[var(--zui-toggle-thumb-colors-ocean-bg-dark,#38bdf8)]",
+  sapphire: "bg-[var(--zui-toggle-thumb-colors-sapphire-bg,#1d4ed8)] dark:bg-[var(--zui-toggle-thumb-colors-sapphire-bg-dark,#60a5fa)]",
+  lavender: "bg-[var(--zui-toggle-thumb-colors-lavender-bg,#8b5cf6)] dark:bg-[var(--zui-toggle-thumb-colors-lavender-bg-dark,#a78bfa)]",
+  ruby: "bg-[var(--zui-toggle-thumb-colors-ruby-bg,#be123c)] dark:bg-[var(--zui-toggle-thumb-colors-ruby-bg-dark,#fb7185)]",
+  red: "bg-[var(--zui-toggle-thumb-colors-red-bg,#dc2626)] dark:bg-[var(--zui-toggle-thumb-colors-red-bg-dark,#ef4444)]",
+  royal: "bg-[var(--zui-toggle-thumb-colors-royal-bg,#4338ca)] dark:bg-[var(--zui-toggle-thumb-colors-royal-bg-dark,#818cf8)]",
+  electric: "bg-[var(--zui-toggle-thumb-colors-electric-bg,#0ea5e9)] dark:bg-[var(--zui-toggle-thumb-colors-electric-bg-dark,#38bdf8)]",
+  forest: "bg-[var(--zui-toggle-thumb-colors-forest-bg,#166534)] dark:bg-[var(--zui-toggle-thumb-colors-forest-bg-dark,#4ade80)]",
+  sunset: "bg-[var(--zui-toggle-thumb-colors-sunset-bg,#ea580c)] dark:bg-[var(--zui-toggle-thumb-colors-sunset-bg-dark,#fb923c)]",
+  magenta: "bg-[var(--zui-toggle-thumb-colors-magenta-bg,#c026d3)] dark:bg-[var(--zui-toggle-thumb-colors-magenta-bg-dark,#e879f9)]",
+  crimson: "bg-[var(--zui-toggle-thumb-colors-crimson-bg,#b91c1c)] dark:bg-[var(--zui-toggle-thumb-colors-crimson-bg-dark,#f87171)]",
+  aqua: "bg-[var(--zui-toggle-thumb-colors-aqua-bg,#0f766e)] dark:bg-[var(--zui-toggle-thumb-colors-aqua-bg-dark,#2dd4bf)]",
+  plum: "bg-[var(--zui-toggle-thumb-colors-plum-bg,#7e22ce)] dark:bg-[var(--zui-toggle-thumb-colors-plum-bg-dark,#c084fc)]"
 };
 
 // src/ui/toggle/variants.ts
@@ -195,5 +225,5 @@ function ToggleBase(props) {
 ToggleBase.displayName = "Toggle";
 
 export { ToggleBase, hasToggleLabelChildren, toggleThumbVariants, toggleTrackVariants };
-//# sourceMappingURL=chunk-2ZKW2E7B.mjs.map
-//# sourceMappingURL=chunk-2ZKW2E7B.mjs.map
+//# sourceMappingURL=chunk-7PIOCFV3.mjs.map
+//# sourceMappingURL=chunk-7PIOCFV3.mjs.map

package/dist/chunk-7PIOCFV3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/design-system/toggle.ts","../src/ui/toggle/variants.ts","../src/ui/toggle/toggle-base.tsx"],"names":[],"mappings":"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","file":"chunk-7PIOCFV3.mjs","sourcesContent":["export const zuiToggleTrackBase =\n  \"relative inline-flex shrink-0 cursor-pointer rounded-full border border-[color:var(--zui-toggle-track-border,#0000001a)] dark:border-[color:var(--zui-toggle-track-border-dark,#ffffff1a)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-toggle-track-ring-focus,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-toggle-track-ring-focus-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-toggle-track-ring-offset-focus,oklch(98.4%_0.003_247.858))] dark:focus-visible:ring-offset-[var(--zui-toggle-track-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] data-[state=checked]:border-[color:var(--zui-toggle-track-border-checked,oklch(71.5%_0.143_215.221_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-border-checked-dark,oklch(71.5%_0.143_215.221_/_0.4))] disabled:cursor-not-allowed disabled:opacity-50\";\n\nexport const zuiToggleTrackSizes = {\n  sm: \"h-5 w-9\",\n  md: \"h-6 w-11\",\n  lg: \"h-7 w-[3.25rem]\",\n} as const;\n\nexport const zuiToggleTrackAppearances = {\n  default:\n    \"data-[state=checked]:bg-[var(--zui-toggle-track-default-bg-checked,oklch(78.9%_0.154_211.53_/_0.7))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-default-bg-checked-dark,oklch(60.9%_0.126_221.723_/_0.9))]\",\n  success:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-success-border-checked,oklch(69.6%_0.17_162.48_/_0.7))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-success-border-checked-dark,oklch(69.6%_0.17_162.48_/_0.7))] data-[state=checked]:bg-[var(--zui-toggle-track-success-bg-checked,oklch(76.5%_0.177_163.223_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-success-bg-checked-dark,oklch(59.6%_0.145_163.225_/_0.8))]\",\n  destructive:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-destructive-border-checked,oklch(64.5%_0.246_16.439_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-destructive-border-checked-dark,oklch(64.5%_0.246_16.439_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-destructive-bg-checked,oklch(71.2%_0.194_13.428_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-destructive-bg-checked-dark,oklch(58.6%_0.253_17.585_/_0.8))]\",\n  neutral:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-neutral-border-checked,oklch(55.4%_0.046_257.417_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-neutral-border-checked-dark,oklch(70.4%_0.04_256.788_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-neutral-bg-checked,oklch(70.4%_0.04_256.788_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-neutral-bg-checked-dark,oklch(44.6%_0.043_257.281_/_0.9))]\",\n  indigo:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-indigo-border-checked,oklch(58.5%_0.233_277.117_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-indigo-border-checked-dark,oklch(58.5%_0.233_277.117_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-indigo-bg-checked,oklch(67.3%_0.182_276.935_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-indigo-bg-checked-dark,oklch(51.1%_0.262_276.966_/_0.8))]\",\n  purple:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-purple-border-checked,oklch(62.7%_0.265_303.9_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-purple-border-checked-dark,oklch(62.7%_0.265_303.9_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-purple-bg-checked,oklch(71.4%_0.203_305.504_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-purple-bg-checked-dark,oklch(55.8%_0.288_302.321_/_0.8))]\",\n  pink: \"data-[state=checked]:border-[color:var(--zui-toggle-track-pink-border-checked,oklch(65.6%_0.241_354.308_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-pink-border-checked-dark,oklch(65.6%_0.241_354.308_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-pink-bg-checked,oklch(71.8%_0.202_349.761_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-pink-bg-checked-dark,oklch(59.2%_0.249_0.584_/_0.8))]\",\n  orange:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-orange-border-checked,oklch(70.5%_0.213_47.604_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-orange-border-checked-dark,oklch(70.5%_0.213_47.604_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-orange-bg-checked,oklch(75%_0.183_55.934_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-orange-bg-checked-dark,oklch(64.6%_0.222_41.116_/_0.8))]\",\n  yellow:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-yellow-border-checked,oklch(79.5%_0.184_86.047_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-yellow-border-checked-dark,oklch(79.5%_0.184_86.047_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-yellow-bg-checked,oklch(85.2%_0.199_91.936_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-yellow-bg-checked-dark,oklch(68.1%_0.162_75.834_/_0.8))]\",\n  green:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-green-border-checked,oklch(72.3%_0.219_149.579_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-green-border-checked-dark,oklch(72.3%_0.219_149.579_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-green-bg-checked,oklch(79.2%_0.209_151.711_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-green-bg-checked-dark,oklch(62.7%_0.194_149.214_/_0.8))]\",\n  teal: \"data-[state=checked]:border-[color:var(--zui-toggle-track-teal-border-checked,oklch(70.4%_0.14_182.503_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-teal-border-checked-dark,oklch(70.4%_0.14_182.503_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-teal-bg-checked,oklch(77.7%_0.152_181.912_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-teal-bg-checked-dark,oklch(60%_0.118_184.704_/_0.8))]\",\n  cyan: \"data-[state=checked]:border-[color:var(--zui-toggle-track-cyan-border-checked,oklch(71.5%_0.143_215.221_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-cyan-border-checked-dark,oklch(71.5%_0.143_215.221_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-cyan-bg-checked,oklch(78.9%_0.154_211.53_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-cyan-bg-checked-dark,oklch(60.9%_0.126_221.723_/_0.8))]\",\n  lime: \"data-[state=checked]:border-[color:var(--zui-toggle-track-lime-border-checked,oklch(76.8%_0.233_130.85_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-lime-border-checked-dark,oklch(76.8%_0.233_130.85_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-lime-bg-checked,oklch(84.1%_0.238_128.85_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-lime-bg-checked-dark,oklch(64.8%_0.2_131.684_/_0.8))]\",\n  emerald:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-emerald-border-checked,oklch(69.6%_0.17_162.48_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-emerald-border-checked-dark,oklch(69.6%_0.17_162.48_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-emerald-bg-checked,oklch(76.5%_0.177_163.223_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-emerald-bg-checked-dark,oklch(59.6%_0.145_163.225_/_0.8))]\",\n  rose: \"data-[state=checked]:border-[color:var(--zui-toggle-track-rose-border-checked,oklch(64.5%_0.246_16.439_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-rose-border-checked-dark,oklch(64.5%_0.246_16.439_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-rose-bg-checked,oklch(71.2%_0.194_13.428_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-rose-bg-checked-dark,oklch(58.6%_0.253_17.585_/_0.8))]\",\n  slate:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-slate-border-checked,oklch(55.4%_0.046_257.417_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-slate-border-checked-dark,oklch(70.4%_0.04_256.788_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-slate-bg-checked,oklch(70.4%_0.04_256.788_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-slate-bg-checked-dark,oklch(44.6%_0.043_257.281_/_0.9))]\",\n  zinc: \"data-[state=checked]:border-[color:var(--zui-toggle-track-zinc-border-checked,oklch(70.5%_0.015_286.067_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-zinc-border-checked-dark,oklch(70.5%_0.015_286.067_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-zinc-bg-checked,oklch(44.2%_0.017_285.786_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-zinc-bg-checked-dark,oklch(44.2%_0.017_285.786_/_0.9))]\",\n  gray: \"data-[state=checked]:border-[color:var(--zui-toggle-track-gray-border-checked,oklch(70.7%_0.022_261.325_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-gray-border-checked-dark,oklch(70.7%_0.022_261.325_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-gray-bg-checked,oklch(70.7%_0.022_261.325_/_0.8))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-gray-bg-checked-dark,oklch(44.6%_0.03_256.802_/_0.9))]\",\n  stone:\n    \"bg-[var(--zui-toggle-track-stone-bg,oklch(86.9%_0.005_56.366))] dark:bg-[var(--zui-toggle-track-stone-bg-dark,oklch(86.9%_0.005_56.366))] data-[state=checked]:border-[color:var(--zui-toggle-track-stone-border-checked,oklch(70.9%_0.01_56.259_/_0.4))] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-stone-border-checked-dark,oklch(70.9%_0.01_56.259_/_0.4))] data-[state=checked]:bg-[var(--zui-toggle-track-stone-bg-checked,oklch(44.4%_0.011_73.639_/_0.9))] dark:data-[state=checked]:bg-[var(--zui-toggle-track-stone-bg-checked-dark,oklch(44.4%_0.011_73.639_/_0.9))]\",\n  \"gradient-blue\":\n    \"bg-[var(--zui-toggle-track-gradient-blue-bg,oklch(80.9%_0.105_251.813))] dark:bg-[var(--zui-toggle-track-gradient-blue-bg-dark,oklch(80.9%_0.105_251.813))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-toggle-track-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-toggle-track-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-toggle-track-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))]\",\n  \"gradient-green\":\n    \"bg-[var(--zui-toggle-track-gradient-green-bg,oklch(87.1%_0.15_154.449))] dark:bg-[var(--zui-toggle-track-gradient-green-bg-dark,oklch(87.1%_0.15_154.449))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-toggle-track-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-toggle-track-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-toggle-track-gradient-green-to-dark,oklch(64.8%_0.2_131.684))]\",\n  \"gradient-red\":\n    \"bg-[var(--zui-toggle-track-gradient-red-bg,oklch(80.8%_0.114_19.571))] dark:bg-[var(--zui-toggle-track-gradient-red-bg-dark,oklch(80.8%_0.114_19.571))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-toggle-track-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-toggle-track-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-toggle-track-gradient-red-to-dark,oklch(59.2%_0.249_0.584))]\",\n  \"gradient-yellow\":\n    \"bg-[var(--zui-toggle-track-gradient-yellow-bg,oklch(90.5%_0.182_98.111))] dark:bg-[var(--zui-toggle-track-gradient-yellow-bg-dark,oklch(90.5%_0.182_98.111))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-toggle-track-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-toggle-track-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-toggle-track-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))]\",\n  \"gradient-purple\":\n    \"bg-[var(--zui-toggle-track-gradient-purple-bg,oklch(82.7%_0.119_306.383))] dark:bg-[var(--zui-toggle-track-gradient-purple-bg-dark,oklch(82.7%_0.119_306.383))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-toggle-track-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-toggle-track-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-toggle-track-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))]\",\n  \"gradient-teal\":\n    \"bg-[var(--zui-toggle-track-gradient-teal-bg,oklch(85.5%_0.138_181.071))] dark:bg-[var(--zui-toggle-track-gradient-teal-bg-dark,oklch(85.5%_0.138_181.071))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-toggle-track-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-toggle-track-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-toggle-track-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))]\",\n  \"gradient-indigo\":\n    \"bg-[var(--zui-toggle-track-gradient-indigo-bg,oklch(78.5%_0.115_274.713))] dark:bg-[var(--zui-toggle-track-gradient-indigo-bg-dark,oklch(78.5%_0.115_274.713))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-toggle-track-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-toggle-track-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-toggle-track-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))]\",\n  \"gradient-pink\":\n    \"bg-[var(--zui-toggle-track-gradient-pink-bg,oklch(82.3%_0.12_346.018))] dark:bg-[var(--zui-toggle-track-gradient-pink-bg-dark,oklch(82.3%_0.12_346.018))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-toggle-track-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-toggle-track-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-toggle-track-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))]\",\n  \"gradient-orange\":\n    \"bg-[var(--zui-toggle-track-gradient-orange-bg,oklch(83.7%_0.128_66.29))] dark:bg-[var(--zui-toggle-track-gradient-orange-bg-dark,oklch(83.7%_0.128_66.29))] data-[state=checked]:bg-linear-to-r from-[var(--zui-toggle-track-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-toggle-track-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-toggle-track-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-toggle-track-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))]\",\n  blue: \"data-[state=checked]:border-[color:var(--zui-toggle-track-blue-border-checked,#2563eb66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-blue-border-checked-dark,#3b82f666)] data-[state=checked]:bg-[var(--zui-toggle-track-blue-bg-checked,#2563ebcc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-blue-bg-checked-dark,#3b82f6cc)]\",\n  mint: \"data-[state=checked]:border-[color:var(--zui-toggle-track-mint-border-checked,#10b98166)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-mint-border-checked-dark,#6ee7b766)] data-[state=checked]:bg-[var(--zui-toggle-track-mint-bg-checked,#10b981cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-mint-bg-checked-dark,#6ee7b7cc)]\",\n  ocean:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-ocean-border-checked,#0284c766)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-ocean-border-checked-dark,#38bdf866)] data-[state=checked]:bg-[var(--zui-toggle-track-ocean-bg-checked,#0284c7cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-ocean-bg-checked-dark,#38bdf8cc)]\",\n  sapphire:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-sapphire-border-checked,#1d4ed866)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-sapphire-border-checked-dark,#60a5fa66)] data-[state=checked]:bg-[var(--zui-toggle-track-sapphire-bg-checked,#1d4ed8cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-sapphire-bg-checked-dark,#60a5facc)]\",\n  lavender:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-lavender-border-checked,#8b5cf666)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-lavender-border-checked-dark,#a78bfa66)] data-[state=checked]:bg-[var(--zui-toggle-track-lavender-bg-checked,#8b5cf6cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-lavender-bg-checked-dark,#a78bfacc)]\",\n  ruby: \"data-[state=checked]:border-[color:var(--zui-toggle-track-ruby-border-checked,#be123c66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-ruby-border-checked-dark,#fb718566)] data-[state=checked]:bg-[var(--zui-toggle-track-ruby-bg-checked,#be123ccc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-ruby-bg-checked-dark,#fb7185cc)]\",\n  red: \"data-[state=checked]:border-[color:var(--zui-toggle-track-red-border-checked,#dc262666)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-red-border-checked-dark,#ef444466)] data-[state=checked]:bg-[var(--zui-toggle-track-red-bg-checked,#dc2626cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-red-bg-checked-dark,#ef4444cc)]\",\n  royal:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-royal-border-checked,#4338ca66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-royal-border-checked-dark,#818cf866)] data-[state=checked]:bg-[var(--zui-toggle-track-royal-bg-checked,#4338cacc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-royal-bg-checked-dark,#818cf8cc)]\",\n  electric:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-electric-border-checked,#0ea5e966)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-electric-border-checked-dark,#38bdf866)] data-[state=checked]:bg-[var(--zui-toggle-track-electric-bg-checked,#0ea5e9cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-electric-bg-checked-dark,#38bdf8cc)]\",\n  forest:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-forest-border-checked,#16653466)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-forest-border-checked-dark,#4ade8066)] data-[state=checked]:bg-[var(--zui-toggle-track-forest-bg-checked,#166534cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-forest-bg-checked-dark,#4ade80cc)]\",\n  sunset:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-sunset-border-checked,#ea580c66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-sunset-border-checked-dark,#fb923c66)] data-[state=checked]:bg-[var(--zui-toggle-track-sunset-bg-checked,#ea580ccc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-sunset-bg-checked-dark,#fb923ccc)]\",\n  magenta:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-magenta-border-checked,#c026d366)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-magenta-border-checked-dark,#e879f966)] data-[state=checked]:bg-[var(--zui-toggle-track-magenta-bg-checked,#c026d3cc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-magenta-bg-checked-dark,#e879f9cc)]\",\n  crimson:\n    \"data-[state=checked]:border-[color:var(--zui-toggle-track-crimson-border-checked,#b91c1c66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-crimson-border-checked-dark,#f8717166)] data-[state=checked]:bg-[var(--zui-toggle-track-crimson-bg-checked,#b91c1ccc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-crimson-bg-checked-dark,#f87171cc)]\",\n  aqua: \"data-[state=checked]:border-[color:var(--zui-toggle-track-aqua-border-checked,#0f766e66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-aqua-border-checked-dark,#2dd4bf66)] data-[state=checked]:bg-[var(--zui-toggle-track-aqua-bg-checked,#0f766ecc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-aqua-bg-checked-dark,#2dd4bfcc)]\",\n  plum: \"data-[state=checked]:border-[color:var(--zui-toggle-track-plum-border-checked,#7e22ce66)] dark:data-[state=checked]:border-[color:var(--zui-toggle-track-plum-border-checked-dark,#c084fc66)] data-[state=checked]:bg-[var(--zui-toggle-track-plum-bg-checked,#7e22cecc)] dark:data-[state=checked]:bg-[var(--zui-toggle-track-plum-bg-checked-dark,#c084fccc)]\",\n} as const;\n\nexport const zuiToggleThumbBase =\n  \"pointer-events-none block rounded-full border border-[color:var(--zui-toggle-thumb-border,oklch(20.8%_0.042_265.755_/_0.3))] dark:border-[color:var(--zui-toggle-thumb-border-dark,#ffffff1a)] shadow-[var(--zui-toggle-thumb-shadow,0_1px_2px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-toggle-thumb-shadow-dark,0_1px_2px_rgba(15,23,42,0.35))] ring-0\";\n\nexport const zuiToggleThumbSizes = {\n  sm: \"size-4\",\n  md: \"size-5\",\n  lg: \"size-6\",\n} as const;\n\nexport const zuiToggleThumbColors = {\n  default:\n    \"bg-[var(--zui-toggle-thumb-colors-default-bg,#ffffff)] dark:bg-[var(--zui-toggle-thumb-colors-default-bg-dark,#ffffff)]\",\n  success:\n    \"bg-[var(--zui-toggle-thumb-colors-success-bg,oklch(69.6%_0.17_162.48))] dark:bg-[var(--zui-toggle-thumb-colors-success-bg-dark,oklch(69.6%_0.17_162.48))]\",\n  destructive:\n    \"bg-[var(--zui-toggle-thumb-colors-destructive-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-toggle-thumb-colors-destructive-bg-dark,oklch(64.5%_0.246_16.439))]\",\n  neutral:\n    \"bg-[var(--zui-toggle-thumb-colors-neutral-bg,oklch(55.4%_0.046_257.417))] dark:bg-[var(--zui-toggle-thumb-colors-neutral-bg-dark,oklch(55.4%_0.046_257.417))]\",\n  indigo:\n    \"bg-[var(--zui-toggle-thumb-colors-indigo-bg,oklch(58.5%_0.233_277.117))] dark:bg-[var(--zui-toggle-thumb-colors-indigo-bg-dark,oklch(58.5%_0.233_277.117))]\",\n  purple:\n    \"bg-[var(--zui-toggle-thumb-colors-purple-bg,oklch(62.7%_0.265_303.9))] dark:bg-[var(--zui-toggle-thumb-colors-purple-bg-dark,oklch(62.7%_0.265_303.9))]\",\n  pink: \"bg-[var(--zui-toggle-thumb-colors-pink-bg,oklch(65.6%_0.241_354.308))] dark:bg-[var(--zui-toggle-thumb-colors-pink-bg-dark,oklch(65.6%_0.241_354.308))]\",\n  orange:\n    \"bg-[var(--zui-toggle-thumb-colors-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-toggle-thumb-colors-orange-bg-dark,oklch(70.5%_0.213_47.604))]\",\n  yellow:\n    \"bg-[var(--zui-toggle-thumb-colors-yellow-bg,oklch(79.5%_0.184_86.047))] dark:bg-[var(--zui-toggle-thumb-colors-yellow-bg-dark,oklch(79.5%_0.184_86.047))]\",\n  green:\n    \"bg-[var(--zui-toggle-thumb-colors-green-bg,oklch(72.3%_0.219_149.579))] dark:bg-[var(--zui-toggle-thumb-colors-green-bg-dark,oklch(72.3%_0.219_149.579))]\",\n  teal: \"bg-[var(--zui-toggle-thumb-colors-teal-bg,oklch(70.4%_0.14_182.503))] dark:bg-[var(--zui-toggle-thumb-colors-teal-bg-dark,oklch(70.4%_0.14_182.503))]\",\n  cyan: \"bg-[var(--zui-toggle-thumb-colors-cyan-bg,oklch(71.5%_0.143_215.221))] dark:bg-[var(--zui-toggle-thumb-colors-cyan-bg-dark,oklch(71.5%_0.143_215.221))]\",\n  lime: \"bg-[var(--zui-toggle-thumb-colors-lime-bg,oklch(76.8%_0.233_130.85))] dark:bg-[var(--zui-toggle-thumb-colors-lime-bg-dark,oklch(76.8%_0.233_130.85))]\",\n  emerald:\n    \"bg-[var(--zui-toggle-thumb-colors-emerald-bg,oklch(69.6%_0.17_162.48))] dark:bg-[var(--zui-toggle-thumb-colors-emerald-bg-dark,oklch(69.6%_0.17_162.48))]\",\n  rose: \"bg-[var(--zui-toggle-thumb-colors-rose-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-toggle-thumb-colors-rose-bg-dark,oklch(64.5%_0.246_16.439))]\",\n  slate:\n    \"bg-[var(--zui-toggle-thumb-colors-slate-bg,oklch(55.4%_0.046_257.417))] dark:bg-[var(--zui-toggle-thumb-colors-slate-bg-dark,oklch(55.4%_0.046_257.417))]\",\n  zinc: \"bg-[var(--zui-toggle-thumb-colors-zinc-bg,oklch(55.2%_0.016_285.938))] dark:bg-[var(--zui-toggle-thumb-colors-zinc-bg-dark,oklch(55.2%_0.016_285.938))]\",\n  gray: \"bg-[var(--zui-toggle-thumb-colors-gray-bg,oklch(55.1%_0.027_264.364))] dark:bg-[var(--zui-toggle-thumb-colors-gray-bg-dark,oklch(55.1%_0.027_264.364))]\",\n  stone:\n    \"bg-[var(--zui-toggle-thumb-colors-stone-bg,oklch(55.3%_0.013_58.071))] dark:bg-[var(--zui-toggle-thumb-colors-stone-bg-dark,oklch(55.3%_0.013_58.071))]\",\n  \"gradient-blue\":\n    \"bg-[var(--zui-toggle-thumb-colors-gradient-blue-bg,oklch(62.3%_0.214_259.815))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-blue-bg-dark,oklch(62.3%_0.214_259.815))]\",\n  \"gradient-green\":\n    \"bg-[var(--zui-toggle-thumb-colors-gradient-green-bg,oklch(72.3%_0.219_149.579))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-green-bg-dark,oklch(72.3%_0.219_149.579))]\",\n  \"gradient-red\":\n    \"bg-[var(--zui-toggle-thumb-colors-gradient-red-bg,oklch(63.7%_0.237_25.331))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-red-bg-dark,oklch(63.7%_0.237_25.331))]\",\n  \"gradient-yellow\":\n    \"bg-[var(--zui-toggle-thumb-colors-gradient-yellow-bg,oklch(79.5%_0.184_86.047))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-yellow-bg-dark,oklch(79.5%_0.184_86.047))]\",\n  \"gradient-purple\":\n    \"bg-[var(--zui-toggle-thumb-colors-gradient-purple-bg,oklch(62.7%_0.265_303.9))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-purple-bg-dark,oklch(62.7%_0.265_303.9))]\",\n  \"gradient-teal\":\n    \"bg-[var(--zui-toggle-thumb-colors-gradient-teal-bg,oklch(70.4%_0.14_182.503))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-teal-bg-dark,oklch(70.4%_0.14_182.503))]\",\n  \"gradient-indigo\":\n    \"bg-[var(--zui-toggle-thumb-colors-gradient-indigo-bg,oklch(58.5%_0.233_277.117))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-indigo-bg-dark,oklch(58.5%_0.233_277.117))]\",\n  \"gradient-pink\":\n    \"bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg,oklch(65.6%_0.241_354.308))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-pink-bg-dark,oklch(65.6%_0.241_354.308))]\",\n  \"gradient-orange\":\n    \"bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-toggle-thumb-colors-gradient-orange-bg-dark,oklch(70.5%_0.213_47.604))]\",\n  blue: \"bg-[var(--zui-toggle-thumb-colors-blue-bg,#2563eb)] dark:bg-[var(--zui-toggle-thumb-colors-blue-bg-dark,#3b82f6)]\",\n  mint: \"bg-[var(--zui-toggle-thumb-colors-mint-bg,#10b981)] dark:bg-[var(--zui-toggle-thumb-colors-mint-bg-dark,#6ee7b7)]\",\n  ocean:\n    \"bg-[var(--zui-toggle-thumb-colors-ocean-bg,#0284c7)] dark:bg-[var(--zui-toggle-thumb-colors-ocean-bg-dark,#38bdf8)]\",\n  sapphire:\n    \"bg-[var(--zui-toggle-thumb-colors-sapphire-bg,#1d4ed8)] dark:bg-[var(--zui-toggle-thumb-colors-sapphire-bg-dark,#60a5fa)]\",\n  lavender:\n    \"bg-[var(--zui-toggle-thumb-colors-lavender-bg,#8b5cf6)] dark:bg-[var(--zui-toggle-thumb-colors-lavender-bg-dark,#a78bfa)]\",\n  ruby: \"bg-[var(--zui-toggle-thumb-colors-ruby-bg,#be123c)] dark:bg-[var(--zui-toggle-thumb-colors-ruby-bg-dark,#fb7185)]\",\n  red: \"bg-[var(--zui-toggle-thumb-colors-red-bg,#dc2626)] dark:bg-[var(--zui-toggle-thumb-colors-red-bg-dark,#ef4444)]\",\n  royal:\n    \"bg-[var(--zui-toggle-thumb-colors-royal-bg,#4338ca)] dark:bg-[var(--zui-toggle-thumb-colors-royal-bg-dark,#818cf8)]\",\n  electric:\n    \"bg-[var(--zui-toggle-thumb-colors-electric-bg,#0ea5e9)] dark:bg-[var(--zui-toggle-thumb-colors-electric-bg-dark,#38bdf8)]\",\n  forest:\n    \"bg-[var(--zui-toggle-thumb-colors-forest-bg,#166534)] dark:bg-[var(--zui-toggle-thumb-colors-forest-bg-dark,#4ade80)]\",\n  sunset:\n    \"bg-[var(--zui-toggle-thumb-colors-sunset-bg,#ea580c)] dark:bg-[var(--zui-toggle-thumb-colors-sunset-bg-dark,#fb923c)]\",\n  magenta:\n    \"bg-[var(--zui-toggle-thumb-colors-magenta-bg,#c026d3)] dark:bg-[var(--zui-toggle-thumb-colors-magenta-bg-dark,#e879f9)]\",\n  crimson:\n    \"bg-[var(--zui-toggle-thumb-colors-crimson-bg,#b91c1c)] dark:bg-[var(--zui-toggle-thumb-colors-crimson-bg-dark,#f87171)]\",\n  aqua: \"bg-[var(--zui-toggle-thumb-colors-aqua-bg,#0f766e)] dark:bg-[var(--zui-toggle-thumb-colors-aqua-bg-dark,#2dd4bf)]\",\n  plum: \"bg-[var(--zui-toggle-thumb-colors-plum-bg,#7e22ce)] dark:bg-[var(--zui-toggle-thumb-colors-plum-bg-dark,#c084fc)]\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiToggleThumbBase,\n  zuiToggleThumbColors,\n  zuiToggleThumbSizes,\n  zuiToggleTrackAppearances,\n  zuiToggleTrackBase,\n  zuiToggleTrackSizes,\n} from \"../../design-system/toggle\";\n\nexport const toggleTrackVariants = cva(zuiToggleTrackBase, {\n  variants: {\n    size: zuiToggleTrackSizes,\n    appearance: zuiToggleTrackAppearances,\n  },\n  defaultVariants: {\n    size: \"md\",\n    appearance: \"default\",\n  },\n});\n\nexport const toggleThumbVariants = cva(zuiToggleThumbBase, {\n  variants: {\n    size: zuiToggleThumbSizes,\n    thumbColor: zuiToggleThumbColors,\n  },\n  defaultVariants: {\n    size: \"md\",\n    thumbColor: \"default\",\n  },\n});\n","\"use client\";\n\nimport { useCallback, useId, useState, type ReactNode } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { ToggleProps } from \"./types\";\nimport { toggleThumbVariants, toggleTrackVariants } from \"./variants\";\n\nexport function hasToggleLabelChildren(node: ReactNode): boolean {\n  if (node === undefined || node === null) {\n    return false;\n  }\n  if (typeof node === \"boolean\") {\n    return false;\n  }\n  if (typeof node === \"string\") {\n    return node.trim().length > 0;\n  }\n  if (typeof node === \"number\") {\n    return true;\n  }\n  if (Array.isArray(node)) {\n    return node.some(hasToggleLabelChildren);\n  }\n  return true;\n}\n\nexport function ToggleBase(props: ToggleProps) {\n  const {\n    className,\n    size,\n    appearance,\n    checked,\n    defaultChecked = false,\n    onCheckedChange,\n    disabled,\n    ref,\n    \"aria-label\": ariaLabelProp,\n    children,\n    thumbColor,\n    ...rest\n  } = props;\n  const toggleLabelId = useId();\n  const isControlled = checked !== undefined;\n  const [uncontrolled, setUncontrolled] = useState(defaultChecked);\n  const resolved = isControlled ? Boolean(checked) : uncontrolled;\n\n  const setChecked = useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolled(next);\n      }\n      onCheckedChange?.(next);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  const thumbShiftPx = size === \"sm\" ? 16 : size === \"lg\" ? 24 : 20;\n  const labeledByChildren = hasToggleLabelChildren(children);\n  const labeling = labeledByChildren\n    ? {\n        \"aria-labelledby\": toggleLabelId,\n      }\n    : {\n        \"aria-label\": ariaLabelProp ?? \"Toggle\",\n      };\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      role=\"switch\"\n      data-slot=\"toggle\"\n      aria-checked={resolved}\n      data-state={resolved ? \"checked\" : \"unchecked\"}\n      disabled={disabled}\n      className={cn(toggleTrackVariants({ size, appearance }), className)}\n      {...labeling}\n      onClick={() => {\n        if (!disabled) {\n          setChecked(!resolved);\n        }\n      }}\n      {...rest}\n    >\n      <span\n        className=\"sr-only\"\n        id={labeledByChildren ? toggleLabelId : undefined}\n      >\n        {children}\n      </span>\n      <span\n        className={cn(\n          toggleThumbVariants({ size, thumbColor }),\n          \"absolute top-1/2 -translate-y-1/2 transition-[transform] duration-200 ease-out\",\n        )}\n        style={{ transform: `translateX(${resolved ? thumbShiftPx : 0}px)` }}\n      />\n    </button>\n  );\n}\n\nToggleBase.displayName = \"Toggle\";\n"]}

package/dist/{chunk-IM6KN77X.mjs → chunk-7XHWUEQR.mjs}

@@ -31,7 +31,28 @@ var zuiDrawerTriggerAppearances = {
   "gradient-teal": "border-[color:var(--zui-drawer-trigger-gradient-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-drawer-trigger-gradient-teal-border-dark,oklch(60%_0.118_184.704))] bg-linear-to-r from-[var(--zui-drawer-trigger-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-drawer-trigger-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.7))] to-[var(--zui-drawer-trigger-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-drawer-trigger-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.7))] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-gradient-teal-fg,oklch(43.7%_0.078_188.216))] dark:text-[color:var(--zui-drawer-trigger-gradient-teal-fg-dark,#ffffff)]",
   "gradient-indigo": "border-[color:var(--zui-drawer-trigger-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-drawer-trigger-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-linear-to-r from-[var(--zui-drawer-trigger-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-drawer-trigger-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.7))] to-[var(--zui-drawer-trigger-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-drawer-trigger-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-gradient-indigo-fg,oklch(39.8%_0.195_277.366))] dark:text-[color:var(--zui-drawer-trigger-gradient-indigo-fg-dark,#ffffff)]",
   "gradient-pink": "border-[color:var(--zui-drawer-trigger-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-drawer-trigger-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-linear-to-r from-[var(--zui-drawer-trigger-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-drawer-trigger-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.7))] to-[var(--zui-drawer-trigger-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-drawer-trigger-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-gradient-pink-fg,oklch(45.9%_0.187_3.815))] dark:text-[color:var(--zui-drawer-trigger-gradient-pink-fg-dark,#ffffff)]",
-  "gradient-orange": "border-[color:var(--zui-drawer-trigger-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-drawer-trigger-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-linear-to-r from-[var(--zui-drawer-trigger-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-drawer-trigger-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.7))] to-[var(--zui-drawer-trigger-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-drawer-trigger-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.7))] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-gradient-orange-fg,oklch(47%_0.157_37.304))] dark:text-[color:var(--zui-drawer-trigger-gradient-orange-fg-dark,#ffffff)]"
+  "gradient-orange": "border-[color:var(--zui-drawer-trigger-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-drawer-trigger-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-linear-to-r from-[var(--zui-drawer-trigger-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-drawer-trigger-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.7))] to-[var(--zui-drawer-trigger-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-drawer-trigger-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.7))] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-gradient-orange-fg,oklch(47%_0.157_37.304))] dark:text-[color:var(--zui-drawer-trigger-gradient-orange-fg-dark,#ffffff)]",
+  blue: "border border-[color:var(--zui-drawer-trigger-blue-border,#2563eb)] dark:border-[color:var(--zui-drawer-trigger-blue-border-dark,#3b82f6)] bg-[var(--zui-drawer-trigger-blue-bg,#2563eb14)] dark:bg-[var(--zui-drawer-trigger-blue-bg-dark,#3b82f624)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-blue-fg,#2563eb)] dark:text-[color:var(--zui-drawer-trigger-blue-fg-dark,#3b82f6)] hover:bg-[var(--zui-drawer-trigger-blue-bg-hover,#2563eb18)] dark:hover:bg-[var(--zui-drawer-trigger-blue-bg-hover-dark,#3b82f62e)]",
+  cyan: "border border-[color:var(--zui-drawer-trigger-cyan-border,#0891b2)] dark:border-[color:var(--zui-drawer-trigger-cyan-border-dark,#22d3ee)] bg-[var(--zui-drawer-trigger-cyan-bg,#0891b214)] dark:bg-[var(--zui-drawer-trigger-cyan-bg-dark,#22d3ee24)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-cyan-fg,#0891b2)] dark:text-[color:var(--zui-drawer-trigger-cyan-fg-dark,#22d3ee)] hover:bg-[var(--zui-drawer-trigger-cyan-bg-hover,#0891b218)] dark:hover:bg-[var(--zui-drawer-trigger-cyan-bg-hover-dark,#22d3ee2e)]",
+  green: "border border-[color:var(--zui-drawer-trigger-green-border,#16a34a)] dark:border-[color:var(--zui-drawer-trigger-green-border-dark,#22c55e)] bg-[var(--zui-drawer-trigger-green-bg,#16a34a14)] dark:bg-[var(--zui-drawer-trigger-green-bg-dark,#22c55e24)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-green-fg,#16a34a)] dark:text-[color:var(--zui-drawer-trigger-green-fg-dark,#22c55e)] hover:bg-[var(--zui-drawer-trigger-green-bg-hover,#16a34a18)] dark:hover:bg-[var(--zui-drawer-trigger-green-bg-hover-dark,#22c55e2e)]",
+  lime: "border border-[color:var(--zui-drawer-trigger-lime-border,#65a30d)] dark:border-[color:var(--zui-drawer-trigger-lime-border-dark,#a3e635)] bg-[var(--zui-drawer-trigger-lime-bg,#65a30d14)] dark:bg-[var(--zui-drawer-trigger-lime-bg-dark,#a3e63524)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-lime-fg,#65a30d)] dark:text-[color:var(--zui-drawer-trigger-lime-fg-dark,#a3e635)] hover:bg-[var(--zui-drawer-trigger-lime-bg-hover,#65a30d18)] dark:hover:bg-[var(--zui-drawer-trigger-lime-bg-hover-dark,#a3e6352e)]",
+  mint: "border border-[color:var(--zui-drawer-trigger-mint-border,#10b981)] dark:border-[color:var(--zui-drawer-trigger-mint-border-dark,#6ee7b7)] bg-[var(--zui-drawer-trigger-mint-bg,#10b98114)] dark:bg-[var(--zui-drawer-trigger-mint-bg-dark,#6ee7b724)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-mint-fg,#10b981)] dark:text-[color:var(--zui-drawer-trigger-mint-fg-dark,#6ee7b7)] hover:bg-[var(--zui-drawer-trigger-mint-bg-hover,#10b98118)] dark:hover:bg-[var(--zui-drawer-trigger-mint-bg-hover-dark,#6ee7b72e)]",
+  ocean: "border border-[color:var(--zui-drawer-trigger-ocean-border,#0284c7)] dark:border-[color:var(--zui-drawer-trigger-ocean-border-dark,#38bdf8)] bg-[var(--zui-drawer-trigger-ocean-bg,#0284c714)] dark:bg-[var(--zui-drawer-trigger-ocean-bg-dark,#38bdf824)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-ocean-fg,#0284c7)] dark:text-[color:var(--zui-drawer-trigger-ocean-fg-dark,#38bdf8)] hover:bg-[var(--zui-drawer-trigger-ocean-bg-hover,#0284c718)] dark:hover:bg-[var(--zui-drawer-trigger-ocean-bg-hover-dark,#38bdf82e)]",
+  sapphire: "border border-[color:var(--zui-drawer-trigger-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-drawer-trigger-sapphire-border-dark,#60a5fa)] bg-[var(--zui-drawer-trigger-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-drawer-trigger-sapphire-bg-dark,#60a5fa24)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-sapphire-fg,#1d4ed8)] dark:text-[color:var(--zui-drawer-trigger-sapphire-fg-dark,#60a5fa)] hover:bg-[var(--zui-drawer-trigger-sapphire-bg-hover,#1d4ed818)] dark:hover:bg-[var(--zui-drawer-trigger-sapphire-bg-hover-dark,#60a5fa2e)]",
+  lavender: "border border-[color:var(--zui-drawer-trigger-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-drawer-trigger-lavender-border-dark,#a78bfa)] bg-[var(--zui-drawer-trigger-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-drawer-trigger-lavender-bg-dark,#a78bfa24)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-lavender-fg,#8b5cf6)] dark:text-[color:var(--zui-drawer-trigger-lavender-fg-dark,#a78bfa)] hover:bg-[var(--zui-drawer-trigger-lavender-bg-hover,#8b5cf618)] dark:hover:bg-[var(--zui-drawer-trigger-lavender-bg-hover-dark,#a78bfa2e)]",
+  ruby: "border border-[color:var(--zui-drawer-trigger-ruby-border,#be123c)] dark:border-[color:var(--zui-drawer-trigger-ruby-border-dark,#fb7185)] bg-[var(--zui-drawer-trigger-ruby-bg,#be123c14)] dark:bg-[var(--zui-drawer-trigger-ruby-bg-dark,#fb718524)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-ruby-fg,#be123c)] dark:text-[color:var(--zui-drawer-trigger-ruby-fg-dark,#fb7185)] hover:bg-[var(--zui-drawer-trigger-ruby-bg-hover,#be123c18)] dark:hover:bg-[var(--zui-drawer-trigger-ruby-bg-hover-dark,#fb71852e)]",
+  red: "border border-[color:var(--zui-drawer-trigger-red-border,#dc2626)] dark:border-[color:var(--zui-drawer-trigger-red-border-dark,#ef4444)] bg-[var(--zui-drawer-trigger-red-bg,#dc262614)] dark:bg-[var(--zui-drawer-trigger-red-bg-dark,#ef444424)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-red-fg,#dc2626)] dark:text-[color:var(--zui-drawer-trigger-red-fg-dark,#ef4444)] hover:bg-[var(--zui-drawer-trigger-red-bg-hover,#dc262618)] dark:hover:bg-[var(--zui-drawer-trigger-red-bg-hover-dark,#ef44442e)]",
+  slate: "border border-[color:var(--zui-drawer-trigger-slate-border,#475569)] dark:border-[color:var(--zui-drawer-trigger-slate-border-dark,#64748b)] bg-[var(--zui-drawer-trigger-slate-bg,#47556914)] dark:bg-[var(--zui-drawer-trigger-slate-bg-dark,#64748b24)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-slate-fg,#475569)] dark:text-[color:var(--zui-drawer-trigger-slate-fg-dark,#64748b)] hover:bg-[var(--zui-drawer-trigger-slate-bg-hover,#47556918)] dark:hover:bg-[var(--zui-drawer-trigger-slate-bg-hover-dark,#64748b2e)]",
+  zinc: "border border-[color:var(--zui-drawer-trigger-zinc-border,#52525b)] dark:border-[color:var(--zui-drawer-trigger-zinc-border-dark,#71717a)] bg-[var(--zui-drawer-trigger-zinc-bg,#52525b14)] dark:bg-[var(--zui-drawer-trigger-zinc-bg-dark,#71717a24)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-zinc-fg,#52525b)] dark:text-[color:var(--zui-drawer-trigger-zinc-fg-dark,#71717a)] hover:bg-[var(--zui-drawer-trigger-zinc-bg-hover,#52525b18)] dark:hover:bg-[var(--zui-drawer-trigger-zinc-bg-hover-dark,#71717a2e)]",
+  stone: "border border-[color:var(--zui-drawer-trigger-stone-border,#57534e)] dark:border-[color:var(--zui-drawer-trigger-stone-border-dark,#78716c)] bg-[var(--zui-drawer-trigger-stone-bg,#57534e14)] dark:bg-[var(--zui-drawer-trigger-stone-bg-dark,#78716c24)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-stone-fg,#57534e)] dark:text-[color:var(--zui-drawer-trigger-stone-fg-dark,#78716c)] hover:bg-[var(--zui-drawer-trigger-stone-bg-hover,#57534e18)] dark:hover:bg-[var(--zui-drawer-trigger-stone-bg-hover-dark,#78716c2e)]",
+  royal: "border border-[color:var(--zui-drawer-trigger-royal-border,#4338ca)] dark:border-[color:var(--zui-drawer-trigger-royal-border-dark,#818cf8)] bg-[var(--zui-drawer-trigger-royal-bg,#4338ca14)] dark:bg-[var(--zui-drawer-trigger-royal-bg-dark,#818cf824)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-royal-fg,#4338ca)] dark:text-[color:var(--zui-drawer-trigger-royal-fg-dark,#818cf8)] hover:bg-[var(--zui-drawer-trigger-royal-bg-hover,#4338ca18)] dark:hover:bg-[var(--zui-drawer-trigger-royal-bg-hover-dark,#818cf82e)]",
+  electric: "border border-[color:var(--zui-drawer-trigger-electric-border,#0ea5e9)] dark:border-[color:var(--zui-drawer-trigger-electric-border-dark,#38bdf8)] bg-[var(--zui-drawer-trigger-electric-bg,#0ea5e914)] dark:bg-[var(--zui-drawer-trigger-electric-bg-dark,#38bdf824)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-electric-fg,#0ea5e9)] dark:text-[color:var(--zui-drawer-trigger-electric-fg-dark,#38bdf8)] hover:bg-[var(--zui-drawer-trigger-electric-bg-hover,#0ea5e918)] dark:hover:bg-[var(--zui-drawer-trigger-electric-bg-hover-dark,#38bdf82e)]",
+  forest: "border border-[color:var(--zui-drawer-trigger-forest-border,#166534)] dark:border-[color:var(--zui-drawer-trigger-forest-border-dark,#4ade80)] bg-[var(--zui-drawer-trigger-forest-bg,#16653414)] dark:bg-[var(--zui-drawer-trigger-forest-bg-dark,#4ade8024)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-forest-fg,#166534)] dark:text-[color:var(--zui-drawer-trigger-forest-fg-dark,#4ade80)] hover:bg-[var(--zui-drawer-trigger-forest-bg-hover,#16653418)] dark:hover:bg-[var(--zui-drawer-trigger-forest-bg-hover-dark,#4ade802e)]",
+  sunset: "border border-[color:var(--zui-drawer-trigger-sunset-border,#ea580c)] dark:border-[color:var(--zui-drawer-trigger-sunset-border-dark,#fb923c)] bg-[var(--zui-drawer-trigger-sunset-bg,#ea580c14)] dark:bg-[var(--zui-drawer-trigger-sunset-bg-dark,#fb923c24)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-sunset-fg,#ea580c)] dark:text-[color:var(--zui-drawer-trigger-sunset-fg-dark,#fb923c)] hover:bg-[var(--zui-drawer-trigger-sunset-bg-hover,#ea580c18)] dark:hover:bg-[var(--zui-drawer-trigger-sunset-bg-hover-dark,#fb923c2e)]",
+  magenta: "border border-[color:var(--zui-drawer-trigger-magenta-border,#c026d3)] dark:border-[color:var(--zui-drawer-trigger-magenta-border-dark,#e879f9)] bg-[var(--zui-drawer-trigger-magenta-bg,#c026d314)] dark:bg-[var(--zui-drawer-trigger-magenta-bg-dark,#e879f924)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-magenta-fg,#c026d3)] dark:text-[color:var(--zui-drawer-trigger-magenta-fg-dark,#e879f9)] hover:bg-[var(--zui-drawer-trigger-magenta-bg-hover,#c026d318)] dark:hover:bg-[var(--zui-drawer-trigger-magenta-bg-hover-dark,#e879f92e)]",
+  crimson: "border border-[color:var(--zui-drawer-trigger-crimson-border,#b91c1c)] dark:border-[color:var(--zui-drawer-trigger-crimson-border-dark,#f87171)] bg-[var(--zui-drawer-trigger-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-drawer-trigger-crimson-bg-dark,#f8717124)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-crimson-fg,#b91c1c)] dark:text-[color:var(--zui-drawer-trigger-crimson-fg-dark,#f87171)] hover:bg-[var(--zui-drawer-trigger-crimson-bg-hover,#b91c1c18)] dark:hover:bg-[var(--zui-drawer-trigger-crimson-bg-hover-dark,#f871712e)]",
+  aqua: "border border-[color:var(--zui-drawer-trigger-aqua-border,#0f766e)] dark:border-[color:var(--zui-drawer-trigger-aqua-border-dark,#2dd4bf)] bg-[var(--zui-drawer-trigger-aqua-bg,#0f766e14)] dark:bg-[var(--zui-drawer-trigger-aqua-bg-dark,#2dd4bf24)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-aqua-fg,#0f766e)] dark:text-[color:var(--zui-drawer-trigger-aqua-fg-dark,#2dd4bf)] hover:bg-[var(--zui-drawer-trigger-aqua-bg-hover,#0f766e18)] dark:hover:bg-[var(--zui-drawer-trigger-aqua-bg-hover-dark,#2dd4bf2e)]",
+  plum: "border border-[color:var(--zui-drawer-trigger-plum-border,#7e22ce)] dark:border-[color:var(--zui-drawer-trigger-plum-border-dark,#c084fc)] bg-[var(--zui-drawer-trigger-plum-bg,#7e22ce14)] dark:bg-[var(--zui-drawer-trigger-plum-bg-dark,#c084fc24)] backdrop-blur-xl text-[color:var(--zui-drawer-trigger-plum-fg,#7e22ce)] dark:text-[color:var(--zui-drawer-trigger-plum-fg-dark,#c084fc)] hover:bg-[var(--zui-drawer-trigger-plum-bg-hover,#7e22ce18)] dark:hover:bg-[var(--zui-drawer-trigger-plum-bg-hover-dark,#c084fc2e)]"
 };
 var zuiDrawerContentBase = "fixed z-101 flex max-h-[min(92vh,900px)] flex-col border border-[color:var(--zui-drawer-content-border,#0000001a)] dark:border-[color:var(--zui-drawer-content-border-dark,#ffffff1a)] bg-[var(--zui-drawer-content-bg,oklch(98.4%_0.003_247.858))] dark:bg-[var(--zui-drawer-content-bg-dark,oklch(12.9%_0.042_264.695))] p-6 text-[color:var(--zui-drawer-content-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-drawer-content-fg-dark,oklch(98.4%_0.003_247.858))] shadow-[var(--zui-drawer-content-shadow,0_12px_40px_rgba(15,23,42,0.14))] dark:shadow-[var(--zui-drawer-content-shadow-dark,0_24px_80px_rgba(15,23,42,0.55))] focus:outline-none";
 var zuiDrawerContentSides = {
@@ -70,7 +91,28 @@ var zuiDrawerContentAppearances = {
   "gradient-teal": "border-[color:var(--zui-drawer-content-gradient-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-drawer-content-gradient-teal-border-dark,oklch(60%_0.118_184.704))] bg-linear-to-r from-[var(--zui-drawer-content-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-drawer-content-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.7))] to-[var(--zui-drawer-content-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-drawer-content-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.7))] backdrop-blur-xl",
   "gradient-indigo": "border-[color:var(--zui-drawer-content-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-drawer-content-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-linear-to-r from-[var(--zui-drawer-content-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-drawer-content-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.7))] to-[var(--zui-drawer-content-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-drawer-content-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl",
   "gradient-pink": "border-[color:var(--zui-drawer-content-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-drawer-content-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-linear-to-r from-[var(--zui-drawer-content-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-drawer-content-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.7))] to-[var(--zui-drawer-content-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-drawer-content-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl",
-  "gradient-orange": "border-[color:var(--zui-drawer-content-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-drawer-content-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-linear-to-r from-[var(--zui-drawer-content-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-drawer-content-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.7))] to-[var(--zui-drawer-content-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-drawer-content-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.7))] backdrop-blur-xl"
+  "gradient-orange": "border-[color:var(--zui-drawer-content-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-drawer-content-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-linear-to-r from-[var(--zui-drawer-content-gradient-orange-from,oklch(98%_0.016_73.684))] dark:from-[var(--zui-drawer-content-gradient-orange-from-dark,oklch(26.6%_0.079_36.259_/_0.7))] to-[var(--zui-drawer-content-gradient-orange-to,oklch(97.1%_0.013_17.38))] dark:to-[var(--zui-drawer-content-gradient-orange-to-dark,oklch(25.8%_0.092_26.042_/_0.7))] backdrop-blur-xl",
+  blue: "border border-[color:var(--zui-drawer-content-blue-border,#2563eb)] dark:border-[color:var(--zui-drawer-content-blue-border-dark,#3b82f6)] bg-[var(--zui-drawer-content-blue-bg,#2563eb14)] dark:bg-[var(--zui-drawer-content-blue-bg-dark,#3b82f624)] text-[color:var(--zui-drawer-content-blue-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-blue-fg-dark,#f8fafc)] backdrop-blur-xl",
+  cyan: "border border-[color:var(--zui-drawer-content-cyan-border,#0891b2)] dark:border-[color:var(--zui-drawer-content-cyan-border-dark,#22d3ee)] bg-[var(--zui-drawer-content-cyan-bg,#0891b214)] dark:bg-[var(--zui-drawer-content-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-drawer-content-cyan-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-cyan-fg-dark,#f8fafc)] backdrop-blur-xl",
+  green: "border border-[color:var(--zui-drawer-content-green-border,#16a34a)] dark:border-[color:var(--zui-drawer-content-green-border-dark,#22c55e)] bg-[var(--zui-drawer-content-green-bg,#16a34a14)] dark:bg-[var(--zui-drawer-content-green-bg-dark,#22c55e24)] text-[color:var(--zui-drawer-content-green-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-green-fg-dark,#f8fafc)] backdrop-blur-xl",
+  lime: "border border-[color:var(--zui-drawer-content-lime-border,#65a30d)] dark:border-[color:var(--zui-drawer-content-lime-border-dark,#a3e635)] bg-[var(--zui-drawer-content-lime-bg,#65a30d14)] dark:bg-[var(--zui-drawer-content-lime-bg-dark,#a3e63524)] text-[color:var(--zui-drawer-content-lime-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-lime-fg-dark,#f8fafc)] backdrop-blur-xl",
+  mint: "border border-[color:var(--zui-drawer-content-mint-border,#10b981)] dark:border-[color:var(--zui-drawer-content-mint-border-dark,#6ee7b7)] bg-[var(--zui-drawer-content-mint-bg,#10b98114)] dark:bg-[var(--zui-drawer-content-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-drawer-content-mint-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-mint-fg-dark,#f8fafc)] backdrop-blur-xl",
+  ocean: "border border-[color:var(--zui-drawer-content-ocean-border,#0284c7)] dark:border-[color:var(--zui-drawer-content-ocean-border-dark,#38bdf8)] bg-[var(--zui-drawer-content-ocean-bg,#0284c714)] dark:bg-[var(--zui-drawer-content-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-drawer-content-ocean-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-ocean-fg-dark,#f8fafc)] backdrop-blur-xl",
+  sapphire: "border border-[color:var(--zui-drawer-content-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-drawer-content-sapphire-border-dark,#60a5fa)] bg-[var(--zui-drawer-content-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-drawer-content-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-drawer-content-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-sapphire-fg-dark,#f8fafc)] backdrop-blur-xl",
+  lavender: "border border-[color:var(--zui-drawer-content-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-drawer-content-lavender-border-dark,#a78bfa)] bg-[var(--zui-drawer-content-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-drawer-content-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-drawer-content-lavender-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-lavender-fg-dark,#f8fafc)] backdrop-blur-xl",
+  ruby: "border border-[color:var(--zui-drawer-content-ruby-border,#be123c)] dark:border-[color:var(--zui-drawer-content-ruby-border-dark,#fb7185)] bg-[var(--zui-drawer-content-ruby-bg,#be123c14)] dark:bg-[var(--zui-drawer-content-ruby-bg-dark,#fb718524)] text-[color:var(--zui-drawer-content-ruby-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-ruby-fg-dark,#f8fafc)] backdrop-blur-xl",
+  red: "border border-[color:var(--zui-drawer-content-red-border,#dc2626)] dark:border-[color:var(--zui-drawer-content-red-border-dark,#ef4444)] bg-[var(--zui-drawer-content-red-bg,#dc262614)] dark:bg-[var(--zui-drawer-content-red-bg-dark,#ef444424)] text-[color:var(--zui-drawer-content-red-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-red-fg-dark,#f8fafc)] backdrop-blur-xl",
+  slate: "border border-[color:var(--zui-drawer-content-slate-border,#475569)] dark:border-[color:var(--zui-drawer-content-slate-border-dark,#64748b)] bg-[var(--zui-drawer-content-slate-bg,#47556914)] dark:bg-[var(--zui-drawer-content-slate-bg-dark,#64748b24)] text-[color:var(--zui-drawer-content-slate-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-slate-fg-dark,#f8fafc)] backdrop-blur-xl",
+  zinc: "border border-[color:var(--zui-drawer-content-zinc-border,#52525b)] dark:border-[color:var(--zui-drawer-content-zinc-border-dark,#71717a)] bg-[var(--zui-drawer-content-zinc-bg,#52525b14)] dark:bg-[var(--zui-drawer-content-zinc-bg-dark,#71717a24)] text-[color:var(--zui-drawer-content-zinc-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-zinc-fg-dark,#f8fafc)] backdrop-blur-xl",
+  stone: "border border-[color:var(--zui-drawer-content-stone-border,#57534e)] dark:border-[color:var(--zui-drawer-content-stone-border-dark,#78716c)] bg-[var(--zui-drawer-content-stone-bg,#57534e14)] dark:bg-[var(--zui-drawer-content-stone-bg-dark,#78716c24)] text-[color:var(--zui-drawer-content-stone-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-stone-fg-dark,#f8fafc)] backdrop-blur-xl",
+  royal: "border border-[color:var(--zui-drawer-content-royal-border,#4338ca)] dark:border-[color:var(--zui-drawer-content-royal-border-dark,#818cf8)] bg-[var(--zui-drawer-content-royal-bg,#4338ca14)] dark:bg-[var(--zui-drawer-content-royal-bg-dark,#818cf824)] text-[color:var(--zui-drawer-content-royal-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-royal-fg-dark,#f8fafc)] backdrop-blur-xl",
+  electric: "border border-[color:var(--zui-drawer-content-electric-border,#0ea5e9)] dark:border-[color:var(--zui-drawer-content-electric-border-dark,#38bdf8)] bg-[var(--zui-drawer-content-electric-bg,#0ea5e914)] dark:bg-[var(--zui-drawer-content-electric-bg-dark,#38bdf824)] text-[color:var(--zui-drawer-content-electric-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-electric-fg-dark,#f8fafc)] backdrop-blur-xl",
+  forest: "border border-[color:var(--zui-drawer-content-forest-border,#166534)] dark:border-[color:var(--zui-drawer-content-forest-border-dark,#4ade80)] bg-[var(--zui-drawer-content-forest-bg,#16653414)] dark:bg-[var(--zui-drawer-content-forest-bg-dark,#4ade8024)] text-[color:var(--zui-drawer-content-forest-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-forest-fg-dark,#f8fafc)] backdrop-blur-xl",
+  sunset: "border border-[color:var(--zui-drawer-content-sunset-border,#ea580c)] dark:border-[color:var(--zui-drawer-content-sunset-border-dark,#fb923c)] bg-[var(--zui-drawer-content-sunset-bg,#ea580c14)] dark:bg-[var(--zui-drawer-content-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-drawer-content-sunset-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-sunset-fg-dark,#f8fafc)] backdrop-blur-xl",
+  magenta: "border border-[color:var(--zui-drawer-content-magenta-border,#c026d3)] dark:border-[color:var(--zui-drawer-content-magenta-border-dark,#e879f9)] bg-[var(--zui-drawer-content-magenta-bg,#c026d314)] dark:bg-[var(--zui-drawer-content-magenta-bg-dark,#e879f924)] text-[color:var(--zui-drawer-content-magenta-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-magenta-fg-dark,#f8fafc)] backdrop-blur-xl",
+  crimson: "border border-[color:var(--zui-drawer-content-crimson-border,#b91c1c)] dark:border-[color:var(--zui-drawer-content-crimson-border-dark,#f87171)] bg-[var(--zui-drawer-content-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-drawer-content-crimson-bg-dark,#f8717124)] text-[color:var(--zui-drawer-content-crimson-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-crimson-fg-dark,#f8fafc)] backdrop-blur-xl",
+  aqua: "border border-[color:var(--zui-drawer-content-aqua-border,#0f766e)] dark:border-[color:var(--zui-drawer-content-aqua-border-dark,#2dd4bf)] bg-[var(--zui-drawer-content-aqua-bg,#0f766e14)] dark:bg-[var(--zui-drawer-content-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-drawer-content-aqua-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-aqua-fg-dark,#f8fafc)] backdrop-blur-xl",
+  plum: "border border-[color:var(--zui-drawer-content-plum-border,#7e22ce)] dark:border-[color:var(--zui-drawer-content-plum-border-dark,#c084fc)] bg-[var(--zui-drawer-content-plum-bg,#7e22ce14)] dark:bg-[var(--zui-drawer-content-plum-bg-dark,#c084fc24)] text-[color:var(--zui-drawer-content-plum-fg,#0f172a)] dark:text-[color:var(--zui-drawer-content-plum-fg-dark,#f8fafc)] backdrop-blur-xl"
 };
 
 // src/ui/drawer/variants.ts
@@ -315,5 +357,5 @@ function DrawerClose({
 DrawerClose.displayName = "DrawerClose";
 
 export { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, drawerContentVariants, drawerOverlayVariants, useDrawerContext };
-//# sourceMappingURL=chunk-IM6KN77X.mjs.map
-//# sourceMappingURL=chunk-IM6KN77X.mjs.map
+//# sourceMappingURL=chunk-7XHWUEQR.mjs.map
+//# sourceMappingURL=chunk-7XHWUEQR.mjs.map