@zentauri-ui/zentauri-components 2.0.0 → 2.1.1

package/dist/chunk-JEDMUBYI.mjs

@@ -0,0 +1,75 @@
+// src/design-system/kbd.ts
+var zuiKbdBase = [
+  "inline-flex items-center justify-center gap-1 align-middle",
+  "rounded-[var(--zui-kbd-radius,var(--zui-radius,0.375rem))] font-mono font-medium leading-none select-none"
+];
+var zuiKbdKeyAppearances = {
+  default: "bg-[var(--zui-kbd-default-bg,var(--zui-brand,#0f172a))] dark:bg-[var(--zui-kbd-default-bg-dark,var(--zui-brand-dark,#f8fafc))] text-[color:var(--zui-kbd-default-fg,var(--zui-brand-fg,#f8fafc))] dark:text-[color:var(--zui-kbd-default-fg-dark,var(--zui-brand-fg-dark,#020617))] shadow-[var(--zui-kbd-default-shadow,var(--zui-shadow,0_1px_2px_#0f172a14))] dark:shadow-[var(--zui-kbd-default-shadow-dark,var(--zui-shadow-dark,0_1px_2px_#0f172a1f))]",
+  secondary: "bg-[var(--zui-kbd-secondary-bg,var(--zui-surface-soft,#e2e8f0))] dark:bg-[var(--zui-kbd-secondary-bg-dark,var(--zui-surface-soft-dark,#1e293b))] text-[color:var(--zui-kbd-secondary-fg,var(--zui-fg,#0f172a))] dark:text-[color:var(--zui-kbd-secondary-fg-dark,var(--zui-fg-dark,#f8fafc))]",
+  destructive: "bg-[var(--zui-kbd-destructive-bg,var(--zui-status-error,#f43f5e))] dark:bg-[var(--zui-kbd-destructive-bg-dark,var(--zui-status-error-dark,#be123c))] text-[color:var(--zui-kbd-destructive-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-destructive-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  outline: "border border-[color:var(--zui-kbd-outline-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-kbd-outline-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-kbd-outline-bg,var(--zui-surface-soft,#0000000d))] dark:bg-[var(--zui-kbd-outline-bg-dark,var(--zui-surface-soft-dark,#ffffff0d))] text-[color:var(--zui-kbd-outline-fg,var(--zui-fg,#0f172a))] dark:text-[color:var(--zui-kbd-outline-fg-dark,var(--zui-fg-dark,#f8fafc))]",
+  ghost: "bg-transparent text-[color:var(--zui-kbd-ghost-fg,var(--zui-fg,#334155))] dark:text-[color:var(--zui-kbd-ghost-fg-dark,var(--zui-fg-dark,#e2e8f0))]",
+  glass: "border border-[color:var(--zui-kbd-glass-border,var(--zui-border,#00000026))] dark:border-[color:var(--zui-kbd-glass-border-dark,var(--zui-border-dark,#ffffff26))] bg-[var(--zui-kbd-glass-bg,var(--zui-surface-soft,#0000001a))] dark:bg-[var(--zui-kbd-glass-bg-dark,var(--zui-surface-soft-dark,#ffffff1a))] text-[color:var(--zui-kbd-glass-fg,var(--zui-fg,#0f172a))] dark:text-[color:var(--zui-kbd-glass-fg-dark,var(--zui-fg-dark,#ffffff))] backdrop-blur-md",
+  emerald: "bg-[var(--zui-kbd-emerald-bg,var(--zui-color-emerald,#10b981))] dark:bg-[var(--zui-kbd-emerald-bg-dark,var(--zui-color-emerald-dark,#065f46))] text-[color:var(--zui-kbd-emerald-fg,var(--zui-brand-fg,#064e3b))] dark:text-[color:var(--zui-kbd-emerald-fg-dark,var(--zui-brand-fg-dark,#064e3b))]",
+  indigo: "bg-[var(--zui-kbd-indigo-bg,var(--zui-color-indigo,#3730a3))] dark:bg-[var(--zui-kbd-indigo-bg-dark,var(--zui-color-indigo-dark,#4f46e5))] text-[color:var(--zui-kbd-indigo-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-indigo-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  purple: "bg-[var(--zui-kbd-purple-bg,var(--zui-color-purple,#6b21a8))] dark:bg-[var(--zui-kbd-purple-bg-dark,var(--zui-color-purple-dark,#9333ea))] text-[color:var(--zui-kbd-purple-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-purple-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  pink: "bg-[var(--zui-kbd-pink-bg,var(--zui-color-pink,#9d174d))] dark:bg-[var(--zui-kbd-pink-bg-dark,var(--zui-color-pink-dark,#db2777))] text-[color:var(--zui-kbd-pink-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-pink-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  rose: "bg-[var(--zui-kbd-rose-bg,var(--zui-color-rose,#9f1239))] dark:bg-[var(--zui-kbd-rose-bg-dark,var(--zui-color-rose-dark,#e11d48))] text-[color:var(--zui-kbd-rose-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-rose-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  sky: "bg-[var(--zui-kbd-sky-bg,var(--zui-color-sky,#0ea5e9))] dark:bg-[var(--zui-kbd-sky-bg-dark,var(--zui-color-sky-dark,#0369a1))] text-[color:var(--zui-kbd-sky-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-sky-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  teal: "bg-[var(--zui-kbd-teal-bg,var(--zui-color-teal,#14b8a6))] dark:bg-[var(--zui-kbd-teal-bg-dark,var(--zui-color-teal-dark,#0f766e))] text-[color:var(--zui-kbd-teal-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-teal-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  yellow: "bg-[var(--zui-kbd-yellow-bg,var(--zui-color-yellow,#eab308))] dark:bg-[var(--zui-kbd-yellow-bg-dark,var(--zui-color-yellow-dark,#854d0e))] text-[color:var(--zui-kbd-yellow-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-yellow-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  orange: "bg-[var(--zui-kbd-orange-bg,var(--zui-color-orange,#f97316))] dark:bg-[var(--zui-kbd-orange-bg-dark,var(--zui-color-orange-dark,#9a3412))] text-[color:var(--zui-kbd-orange-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-orange-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  gray: "bg-[var(--zui-kbd-gray-bg,var(--zui-color-gray,#6b7280))] dark:bg-[var(--zui-kbd-gray-bg-dark,var(--zui-color-gray-dark,#374151))] text-[color:var(--zui-kbd-gray-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gray-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  amber: "bg-[var(--zui-kbd-amber-bg,var(--zui-color-amber,#f59e0b))] dark:bg-[var(--zui-kbd-amber-bg-dark,var(--zui-color-amber-dark,#92400e))] text-[color:var(--zui-kbd-amber-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-amber-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  violet: "bg-[var(--zui-kbd-violet-bg,var(--zui-color-violet,#5b21b6))] dark:bg-[var(--zui-kbd-violet-bg-dark,var(--zui-color-violet-dark,#7c3aed))] text-[color:var(--zui-kbd-violet-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-violet-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  "gradient-blue": "bg-linear-to-r from-[var(--zui-kbd-gradient-blue-from,var(--zui-color-blue,#1e40af))] dark:from-[var(--zui-kbd-gradient-blue-from-dark,var(--zui-color-blue-dark,#2563eb))] to-[var(--zui-kbd-gradient-blue-to,var(--zui-color-purple,#6b21a8))] dark:to-[var(--zui-kbd-gradient-blue-to-dark,var(--zui-color-purple-dark,#9333ea))] text-[color:var(--zui-kbd-gradient-blue-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-blue-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  "gradient-green": "bg-linear-to-r from-[var(--zui-kbd-gradient-green-from,var(--zui-color-green,#166534))] dark:from-[var(--zui-kbd-gradient-green-from-dark,var(--zui-color-green-dark,#16a34a))] to-[var(--zui-kbd-gradient-green-to,var(--zui-color-lime,#3f6212))] dark:to-[var(--zui-kbd-gradient-green-to-dark,var(--zui-color-lime-dark,#65a30d))] text-[color:var(--zui-kbd-gradient-green-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-green-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  "gradient-red": "bg-linear-to-r from-[var(--zui-kbd-gradient-red-from,var(--zui-color-red,#991b1b))] dark:from-[var(--zui-kbd-gradient-red-from-dark,var(--zui-color-red-dark,#dc2626))] to-[var(--zui-kbd-gradient-red-to,var(--zui-color-pink,#9d174d))] dark:to-[var(--zui-kbd-gradient-red-to-dark,var(--zui-color-pink-dark,#db2777))] text-[color:var(--zui-kbd-gradient-red-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-red-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  "gradient-yellow": "bg-linear-to-r from-[var(--zui-kbd-gradient-yellow-from,var(--zui-color-yellow,#854d0e))] dark:from-[var(--zui-kbd-gradient-yellow-from-dark,var(--zui-color-yellow-dark,#ca8a04))] to-[var(--zui-kbd-gradient-yellow-to,var(--zui-color-orange,#9a3412))] dark:to-[var(--zui-kbd-gradient-yellow-to-dark,var(--zui-color-orange-dark,#ea580c))] text-[color:var(--zui-kbd-gradient-yellow-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-yellow-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  "gradient-purple": "bg-linear-to-r from-[var(--zui-kbd-gradient-purple-from,var(--zui-color-purple,#6b21a8))] dark:from-[var(--zui-kbd-gradient-purple-from-dark,var(--zui-color-purple-dark,#9333ea))] to-[var(--zui-kbd-gradient-purple-to,var(--zui-color-pink,#9d174d))] dark:to-[var(--zui-kbd-gradient-purple-to-dark,var(--zui-color-pink-dark,#db2777))] text-[color:var(--zui-kbd-gradient-purple-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-purple-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  "gradient-teal": "bg-linear-to-r from-[var(--zui-kbd-gradient-teal-from,var(--zui-color-teal,#115e59))] dark:from-[var(--zui-kbd-gradient-teal-from-dark,var(--zui-color-teal-dark,#0d9488))] to-[var(--zui-kbd-gradient-teal-to,var(--zui-color-cyan,#155e75))] dark:to-[var(--zui-kbd-gradient-teal-to-dark,var(--zui-color-cyan-dark,#0891b2))] text-[color:var(--zui-kbd-gradient-teal-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-teal-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  "gradient-indigo": "bg-linear-to-r from-[var(--zui-kbd-gradient-indigo-from,var(--zui-color-indigo,#3730a3))] dark:from-[var(--zui-kbd-gradient-indigo-from-dark,var(--zui-color-indigo-dark,#4f46e5))] to-[var(--zui-kbd-gradient-indigo-to,var(--zui-color-purple,#6b21a8))] dark:to-[var(--zui-kbd-gradient-indigo-to-dark,var(--zui-color-purple-dark,#9333ea))] text-[color:var(--zui-kbd-gradient-indigo-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-indigo-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  "gradient-pink": "bg-linear-to-r from-[var(--zui-kbd-gradient-pink-from,var(--zui-color-pink,#9d174d))] dark:from-[var(--zui-kbd-gradient-pink-from-dark,var(--zui-color-pink-dark,#db2777))] to-[var(--zui-kbd-gradient-pink-to,var(--zui-color-rose,#9f1239))] dark:to-[var(--zui-kbd-gradient-pink-to-dark,var(--zui-color-rose-dark,#e11d48))] text-[color:var(--zui-kbd-gradient-pink-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-pink-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  "gradient-orange": "bg-linear-to-r from-[var(--zui-kbd-gradient-orange-from,var(--zui-color-orange,#9a3412))] dark:from-[var(--zui-kbd-gradient-orange-from-dark,var(--zui-color-orange-dark,#ea580c))] to-[var(--zui-kbd-gradient-orange-to,var(--zui-color-red,#991b1b))] dark:to-[var(--zui-kbd-gradient-orange-to-dark,var(--zui-color-red-dark,#dc2626))] text-[color:var(--zui-kbd-gradient-orange-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-orange-fg-dark,var(--zui-brand-fg-dark,#ffffff))]",
+  blue: "border border-[color:var(--zui-kbd-key-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[color:var(--zui-kbd-key-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))] bg-[var(--zui-kbd-key-blue-bg,var(--zui-color-blue,#2563eb))] dark:bg-[var(--zui-kbd-key-blue-bg-dark,var(--zui-color-blue-dark,#3b82f6))] text-[color:var(--zui-kbd-key-blue-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-blue-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-blue-bg-hover,color-mix(in oklch, var(--zui-color-blue,#2563eb) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-blue-bg-hover-dark,color-mix(in oklch, var(--zui-color-blue-dark,#3b82f6) 18%, transparent))]",
+  cyan: "border border-[color:var(--zui-kbd-key-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[color:var(--zui-kbd-key-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))] bg-[var(--zui-kbd-key-cyan-bg,var(--zui-color-cyan,#0891b2))] dark:bg-[var(--zui-kbd-key-cyan-bg-dark,var(--zui-color-cyan-dark,#22d3ee))] text-[color:var(--zui-kbd-key-cyan-fg,var(--zui-brand-fg,#083344))] dark:text-[color:var(--zui-kbd-key-cyan-fg-dark,var(--zui-brand-fg-dark,#083344))] hover:bg-[var(--zui-kbd-key-cyan-bg-hover,color-mix(in oklch, var(--zui-color-cyan,#0891b2) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-cyan-bg-hover-dark,color-mix(in oklch, var(--zui-color-cyan-dark,#22d3ee) 18%, transparent))]",
+  green: "border border-[color:var(--zui-kbd-key-green-border,var(--zui-color-green,#16a34a))] dark:border-[color:var(--zui-kbd-key-green-border-dark,var(--zui-color-green-dark,#22c55e))] bg-[var(--zui-kbd-key-green-bg,var(--zui-color-green,#16a34a))] dark:bg-[var(--zui-kbd-key-green-bg-dark,var(--zui-color-green-dark,#22c55e))] text-[color:var(--zui-kbd-key-green-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-green-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-green-bg-hover,color-mix(in oklch, var(--zui-color-green,#16a34a) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-green-bg-hover-dark,color-mix(in oklch, var(--zui-color-green-dark,#22c55e) 18%, transparent))]",
+  lime: "border border-[color:var(--zui-kbd-key-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[color:var(--zui-kbd-key-lime-border-dark,var(--zui-color-lime-dark,#a3e635))] bg-[var(--zui-kbd-key-lime-bg,var(--zui-color-lime,#65a30d))] dark:bg-[var(--zui-kbd-key-lime-bg-dark,var(--zui-color-lime-dark,#a3e635))] text-[color:var(--zui-kbd-key-lime-fg,var(--zui-brand-fg,#1a2e05))] dark:text-[color:var(--zui-kbd-key-lime-fg-dark,var(--zui-brand-fg-dark,#1a2e05))] hover:bg-[var(--zui-kbd-key-lime-bg-hover,color-mix(in oklch, var(--zui-color-lime,#65a30d) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-lime-bg-hover-dark,color-mix(in oklch, var(--zui-color-lime-dark,#a3e635) 18%, transparent))]",
+  mint: "border border-[color:var(--zui-kbd-key-mint-border,var(--zui-color-mint,#10b981))] dark:border-[color:var(--zui-kbd-key-mint-border-dark,var(--zui-color-mint-dark,#6ee7b7))] bg-[var(--zui-kbd-key-mint-bg,var(--zui-color-mint,#10b981))] dark:bg-[var(--zui-kbd-key-mint-bg-dark,var(--zui-color-mint-dark,#6ee7b7))] text-[color:var(--zui-kbd-key-mint-fg,var(--zui-brand-fg,#064e3b))] dark:text-[color:var(--zui-kbd-key-mint-fg-dark,var(--zui-brand-fg-dark,#064e3b))] hover:bg-[var(--zui-kbd-key-mint-bg-hover,color-mix(in oklch, var(--zui-color-mint,#10b981) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-mint-bg-hover-dark,color-mix(in oklch, var(--zui-color-mint-dark,#6ee7b7) 18%, transparent))]",
+  ocean: "border border-[color:var(--zui-kbd-key-ocean-border,var(--zui-color-ocean,#0284c7))] dark:border-[color:var(--zui-kbd-key-ocean-border-dark,var(--zui-color-ocean-dark,#38bdf8))] bg-[var(--zui-kbd-key-ocean-bg,var(--zui-color-ocean,#0284c7))] dark:bg-[var(--zui-kbd-key-ocean-bg-dark,var(--zui-color-ocean-dark,#38bdf8))] text-[color:var(--zui-kbd-key-ocean-fg,var(--zui-brand-fg,#082f49))] dark:text-[color:var(--zui-kbd-key-ocean-fg-dark,var(--zui-brand-fg-dark,#082f49))] hover:bg-[var(--zui-kbd-key-ocean-bg-hover,color-mix(in oklch, var(--zui-color-ocean,#0284c7) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-ocean-bg-hover-dark,color-mix(in oklch, var(--zui-color-ocean-dark,#38bdf8) 18%, transparent))]",
+  sapphire: "border border-[color:var(--zui-kbd-key-sapphire-border,var(--zui-color-sapphire,#1d4ed8))] dark:border-[color:var(--zui-kbd-key-sapphire-border-dark,var(--zui-color-sapphire-dark,#60a5fa))] bg-[var(--zui-kbd-key-sapphire-bg,var(--zui-color-sapphire,#1d4ed8))] dark:bg-[var(--zui-kbd-key-sapphire-bg-dark,var(--zui-color-sapphire-dark,#60a5fa))] text-[color:var(--zui-kbd-key-sapphire-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-sapphire-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-sapphire-bg-hover,color-mix(in oklch, var(--zui-color-sapphire,#1d4ed8) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-sapphire-bg-hover-dark,color-mix(in oklch, var(--zui-color-sapphire-dark,#60a5fa) 18%, transparent))]",
+  lavender: "border border-[color:var(--zui-kbd-key-lavender-border,var(--zui-color-lavender,#8b5cf6))] dark:border-[color:var(--zui-kbd-key-lavender-border-dark,var(--zui-color-lavender-dark,#a78bfa))] bg-[var(--zui-kbd-key-lavender-bg,var(--zui-color-lavender,#8b5cf6))] dark:bg-[var(--zui-kbd-key-lavender-bg-dark,var(--zui-color-lavender-dark,#a78bfa))] text-[color:var(--zui-kbd-key-lavender-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-lavender-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-lavender-bg-hover,color-mix(in oklch, var(--zui-color-lavender,#8b5cf6) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-lavender-bg-hover-dark,color-mix(in oklch, var(--zui-color-lavender-dark,#a78bfa) 18%, transparent))]",
+  ruby: "border border-[color:var(--zui-kbd-key-ruby-border,var(--zui-color-ruby,#be123c))] dark:border-[color:var(--zui-kbd-key-ruby-border-dark,var(--zui-color-ruby-dark,#fb7185))] bg-[var(--zui-kbd-key-ruby-bg,var(--zui-color-ruby,#be123c))] dark:bg-[var(--zui-kbd-key-ruby-bg-dark,var(--zui-color-ruby-dark,#fb7185))] text-[color:var(--zui-kbd-key-ruby-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-ruby-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-ruby-bg-hover,color-mix(in oklch, var(--zui-color-ruby,#be123c) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-ruby-bg-hover-dark,color-mix(in oklch, var(--zui-color-ruby-dark,#fb7185) 18%, transparent))]",
+  red: "border border-[color:var(--zui-kbd-key-red-border,var(--zui-color-red,#dc2626))] dark:border-[color:var(--zui-kbd-key-red-border-dark,var(--zui-color-red-dark,#ef4444))] bg-[var(--zui-kbd-key-red-bg,var(--zui-color-red,#dc2626))] dark:bg-[var(--zui-kbd-key-red-bg-dark,var(--zui-color-red-dark,#ef4444))] text-[color:var(--zui-kbd-key-red-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-red-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-red-bg-hover,color-mix(in oklch, var(--zui-color-red,#dc2626) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-red-bg-hover-dark,color-mix(in oklch, var(--zui-color-red-dark,#ef4444) 18%, transparent))]",
+  slate: "border border-[color:var(--zui-kbd-key-slate-border,var(--zui-color-slate,#475569))] dark:border-[color:var(--zui-kbd-key-slate-border-dark,var(--zui-color-slate-dark,#64748b))] bg-[var(--zui-kbd-key-slate-bg,var(--zui-color-slate,#475569))] dark:bg-[var(--zui-kbd-key-slate-bg-dark,var(--zui-color-slate-dark,#64748b))] text-[color:var(--zui-kbd-key-slate-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-slate-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-slate-bg-hover,color-mix(in oklch, var(--zui-color-slate,#475569) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-slate-bg-hover-dark,color-mix(in oklch, var(--zui-color-slate-dark,#64748b) 18%, transparent))]",
+  zinc: "border border-[color:var(--zui-kbd-key-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[color:var(--zui-kbd-key-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))] bg-[var(--zui-kbd-key-zinc-bg,var(--zui-color-zinc,#52525b))] dark:bg-[var(--zui-kbd-key-zinc-bg-dark,var(--zui-color-zinc-dark,#71717a))] text-[color:var(--zui-kbd-key-zinc-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-zinc-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-zinc-bg-hover,color-mix(in oklch, var(--zui-color-zinc,#52525b) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-zinc-bg-hover-dark,color-mix(in oklch, var(--zui-color-zinc-dark,#71717a) 18%, transparent))]",
+  stone: "border border-[color:var(--zui-kbd-key-stone-border,var(--zui-color-stone,#57534e))] dark:border-[color:var(--zui-kbd-key-stone-border-dark,var(--zui-color-stone-dark,#78716c))] bg-[var(--zui-kbd-key-stone-bg,var(--zui-color-stone,#57534e))] dark:bg-[var(--zui-kbd-key-stone-bg-dark,var(--zui-color-stone-dark,#78716c))] text-[color:var(--zui-kbd-key-stone-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-stone-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-stone-bg-hover,color-mix(in oklch, var(--zui-color-stone,#57534e) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-stone-bg-hover-dark,color-mix(in oklch, var(--zui-color-stone-dark,#78716c) 18%, transparent))]",
+  royal: "border border-[color:var(--zui-kbd-key-royal-border,var(--zui-color-royal,#4338ca))] dark:border-[color:var(--zui-kbd-key-royal-border-dark,var(--zui-color-royal-dark,#818cf8))] bg-[var(--zui-kbd-key-royal-bg,var(--zui-color-royal,#4338ca))] dark:bg-[var(--zui-kbd-key-royal-bg-dark,var(--zui-color-royal-dark,#818cf8))] text-[color:var(--zui-kbd-key-royal-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-royal-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-royal-bg-hover,color-mix(in oklch, var(--zui-color-royal,#4338ca) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-royal-bg-hover-dark,color-mix(in oklch, var(--zui-color-royal-dark,#818cf8) 18%, transparent))]",
+  electric: "border border-[color:var(--zui-kbd-key-electric-border,var(--zui-color-electric,#0ea5e9))] dark:border-[color:var(--zui-kbd-key-electric-border-dark,var(--zui-color-electric-dark,#38bdf8))] bg-[var(--zui-kbd-key-electric-bg,var(--zui-color-electric,#0ea5e9))] dark:bg-[var(--zui-kbd-key-electric-bg-dark,var(--zui-color-electric-dark,#38bdf8))] text-[color:var(--zui-kbd-key-electric-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-electric-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-electric-bg-hover,color-mix(in oklch, var(--zui-color-electric,#0ea5e9) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-electric-bg-hover-dark,color-mix(in oklch, var(--zui-color-electric-dark,#38bdf8) 18%, transparent))]",
+  forest: "border border-[color:var(--zui-kbd-key-forest-border,var(--zui-color-forest,#166534))] dark:border-[color:var(--zui-kbd-key-forest-border-dark,var(--zui-color-forest-dark,#4ade80))] bg-[var(--zui-kbd-key-forest-bg,var(--zui-color-forest,#166534))] dark:bg-[var(--zui-kbd-key-forest-bg-dark,var(--zui-color-forest-dark,#4ade80))] text-[color:var(--zui-kbd-key-forest-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-forest-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-forest-bg-hover,color-mix(in oklch, var(--zui-color-forest,#166534) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-forest-bg-hover-dark,color-mix(in oklch, var(--zui-color-forest-dark,#4ade80) 18%, transparent))]",
+  sunset: "border border-[color:var(--zui-kbd-key-sunset-border,var(--zui-color-sunset,#ea580c))] dark:border-[color:var(--zui-kbd-key-sunset-border-dark,var(--zui-color-sunset-dark,#fb923c))] bg-[var(--zui-kbd-key-sunset-bg,var(--zui-color-sunset,#ea580c))] dark:bg-[var(--zui-kbd-key-sunset-bg-dark,var(--zui-color-sunset-dark,#fb923c))] text-[color:var(--zui-kbd-key-sunset-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-sunset-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-sunset-bg-hover,color-mix(in oklch, var(--zui-color-sunset,#ea580c) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-sunset-bg-hover-dark,color-mix(in oklch, var(--zui-color-sunset-dark,#fb923c) 18%, transparent))]",
+  magenta: "border border-[color:var(--zui-kbd-key-magenta-border,var(--zui-color-magenta,#c026d3))] dark:border-[color:var(--zui-kbd-key-magenta-border-dark,var(--zui-color-magenta-dark,#e879f9))] bg-[var(--zui-kbd-key-magenta-bg,var(--zui-color-magenta,#c026d3))] dark:bg-[var(--zui-kbd-key-magenta-bg-dark,var(--zui-color-magenta-dark,#e879f9))] text-[color:var(--zui-kbd-key-magenta-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-magenta-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-magenta-bg-hover,color-mix(in oklch, var(--zui-color-magenta,#c026d3) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-magenta-bg-hover-dark,color-mix(in oklch, var(--zui-color-magenta-dark,#e879f9) 18%, transparent))]",
+  crimson: "border border-[color:var(--zui-kbd-key-crimson-border,var(--zui-color-crimson,#b91c1c))] dark:border-[color:var(--zui-kbd-key-crimson-border-dark,var(--zui-color-crimson-dark,#f87171))] bg-[var(--zui-kbd-key-crimson-bg,var(--zui-color-crimson,#b91c1c))] dark:bg-[var(--zui-kbd-key-crimson-bg-dark,var(--zui-color-crimson-dark,#f87171))] text-[color:var(--zui-kbd-key-crimson-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-crimson-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-crimson-bg-hover,color-mix(in oklch, var(--zui-color-crimson,#b91c1c) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-crimson-bg-hover-dark,color-mix(in oklch, var(--zui-color-crimson-dark,#f87171) 18%, transparent))]",
+  aqua: "border border-[color:var(--zui-kbd-key-aqua-border,var(--zui-color-aqua,#0f766e))] dark:border-[color:var(--zui-kbd-key-aqua-border-dark,var(--zui-color-aqua-dark,#2dd4bf))] bg-[var(--zui-kbd-key-aqua-bg,var(--zui-color-aqua,#0f766e))] dark:bg-[var(--zui-kbd-key-aqua-bg-dark,var(--zui-color-aqua-dark,#2dd4bf))] text-[color:var(--zui-kbd-key-aqua-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-aqua-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-aqua-bg-hover,color-mix(in oklch, var(--zui-color-aqua,#0f766e) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-aqua-bg-hover-dark,color-mix(in oklch, var(--zui-color-aqua-dark,#2dd4bf) 18%, transparent))]",
+  plum: "border border-[color:var(--zui-kbd-key-plum-border,var(--zui-color-plum,#7e22ce))] dark:border-[color:var(--zui-kbd-key-plum-border-dark,var(--zui-color-plum-dark,#c084fc))] bg-[var(--zui-kbd-key-plum-bg,var(--zui-color-plum,#7e22ce))] dark:bg-[var(--zui-kbd-key-plum-bg-dark,var(--zui-color-plum-dark,#c084fc))] text-[color:var(--zui-kbd-key-plum-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-plum-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-plum-bg-hover,color-mix(in oklch, var(--zui-color-plum,#7e22ce) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-plum-bg-hover-dark,color-mix(in oklch, var(--zui-color-plum-dark,#c084fc) 18%, transparent))]"
+};
+var zuiKbdKeyBase = [
+  "inline-flex items-center justify-center font-mono font-medium leading-none",
+  "rounded-[var(--zui-kbd-radius,var(--zui-radius,0.375rem))]",
+  "shadow-[var(--zui-kbd-shadow,var(--zui-shadow,inset_0_-1px_0_#0000001f))] dark:shadow-[var(--zui-kbd-shadow-dark,var(--zui-shadow-dark,inset_0_-1px_0_#0000004d))]"
+];
+var zuiKbdKeySizes = {
+  sm: "h-5 min-w-5 px-1 text-[0.7rem]",
+  md: "h-6 min-w-6 px-1.5 text-xs",
+  lg: "h-7 min-w-7 px-2 text-sm"
+};
+var zuiKbdSeparatorBase = "text-[color:var(--zui-kbd-separator-fg,var(--zui-fg,#94a3b8))] dark:text-[color:var(--zui-kbd-separator-fg-dark,var(--zui-fg-dark,#64748b))]";
+var zuiKbdSeparatorSizes = {
+  sm: "text-[0.7rem]",
+  md: "text-xs",
+  lg: "text-sm"
+};
+
+export { zuiKbdBase, zuiKbdKeyAppearances, zuiKbdKeyBase, zuiKbdKeySizes, zuiKbdSeparatorBase, zuiKbdSeparatorSizes };
+//# sourceMappingURL=chunk-JEDMUBYI.mjs.map
+//# sourceMappingURL=chunk-JEDMUBYI.mjs.map

package/dist/chunk-JEDMUBYI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/design-system/kbd.ts"],"names":[],"mappings":";AAAO,IAAM,UAAA,GAAa;AAAA,EACxB,4DAAA;AAAA,EACA;AACF;AAEO,IAAM,oBAAA,GAAuB;AAAA,EAClC,OAAA,EACE,8bAAA;AAAA,EACF,SAAA,EACE,+RAAA;AAAA,EACF,WAAA,EACE,mTAAA;AAAA,EACF,OAAA,EACE,mcAAA;AAAA,EACF,KAAA,EACE,qJAAA;AAAA,EACF,KAAA,EACE,wcAAA;AAAA,EACF,OAAA,EACE,qSAAA;AAAA,EACF,MAAA,EACE,+RAAA;AAAA,EACF,MAAA,EACE,+RAAA;AAAA,EACF,IAAA,EAAM,mRAAA;AAAA,EACN,IAAA,EAAM,mRAAA;AAAA,EACN,GAAA,EAAK,6QAAA;AAAA,EACL,IAAA,EAAM,mRAAA;AAAA,EACN,MAAA,EACE,+RAAA;AAAA,EACF,MAAA,EACE,+RAAA;AAAA,EACF,IAAA,EAAM,mRAAA;AAAA,EACN,KAAA,EACE,yRAAA;AAAA,EACF,MAAA,EACE,+RAAA;AAAA,EACF,eAAA,EACE,ueAAA;AAAA,EACF,gBAAA,EACE,2eAAA;AAAA,EACF,cAAA,EACE,2dAAA;AAAA,EACF,iBAAA,EACE,ufAAA;AAAA,EACF,iBAAA,EACE,mfAAA;AAAA,EACF,eAAA,EACE,meAAA;AAAA,EACF,iBAAA,EACE,ufAAA;AAAA,EACF,eAAA,EACE,meAAA;AAAA,EACF,iBAAA,EACE,ifAAA;AAAA,EACF,IAAA,EAAM,gsBAAA;AAAA,EACN,IAAA,EAAM,gsBAAA;AAAA,EACN,KAAA,EACE,8sBAAA;AAAA,EACF,IAAA,EAAM,gsBAAA;AAAA,EACN,IAAA,EAAM,gsBAAA;AAAA,EACN,KAAA,EACE,8sBAAA;AAAA,EACF,QAAA,EACE,wvBAAA;AAAA,EACF,QAAA,EACE,wvBAAA;AAAA,EACF,IAAA,EAAM,gsBAAA;AAAA,EACN,GAAA,EAAK,krBAAA;AAAA,EACL,KAAA,EACE,8sBAAA;AAAA,EACF,IAAA,EAAM,gsBAAA;AAAA,EACN,KAAA,EACE,8sBAAA;AAAA,EACF,KAAA,EACE,8sBAAA;AAAA,EACF,QAAA,EACE,wvBAAA;AAAA,EACF,MAAA,EACE,4tBAAA;AAAA,EACF,MAAA,EACE,4tBAAA;AAAA,EACF,OAAA,EACE,0uBAAA;AAAA,EACF,OAAA,EACE,0uBAAA;AAAA,EACF,IAAA,EAAM,gsBAAA;AAAA,EACN,IAAA,EAAM;AACR;AAIO,IAAM,aAAA,GAAgB;AAAA,EAC3B,4EAAA;AAAA,EACA,4DAAA;AAAA,EACA;AACF;AAEO,IAAM,cAAA,GAAiB;AAAA,EAC5B,EAAA,EAAI,gCAAA;AAAA,EACJ,EAAA,EAAI,4BAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAIO,IAAM,mBAAA,GACX;AAEK,IAAM,oBAAA,GAAuB;AAAA,EAClC,EAAA,EAAI,eAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN","file":"chunk-JEDMUBYI.mjs","sourcesContent":["export const zuiKbdBase = [\n  \"inline-flex items-center justify-center gap-1 align-middle\",\n  \"rounded-[var(--zui-kbd-radius,var(--zui-radius,0.375rem))] font-mono font-medium leading-none select-none\",\n] as const;\n\nexport const zuiKbdKeyAppearances = {\n  default:\n    \"bg-[var(--zui-kbd-default-bg,var(--zui-brand,#0f172a))] dark:bg-[var(--zui-kbd-default-bg-dark,var(--zui-brand-dark,#f8fafc))] text-[color:var(--zui-kbd-default-fg,var(--zui-brand-fg,#f8fafc))] dark:text-[color:var(--zui-kbd-default-fg-dark,var(--zui-brand-fg-dark,#020617))] shadow-[var(--zui-kbd-default-shadow,var(--zui-shadow,0_1px_2px_#0f172a14))] dark:shadow-[var(--zui-kbd-default-shadow-dark,var(--zui-shadow-dark,0_1px_2px_#0f172a1f))]\",\n  secondary:\n    \"bg-[var(--zui-kbd-secondary-bg,var(--zui-surface-soft,#e2e8f0))] dark:bg-[var(--zui-kbd-secondary-bg-dark,var(--zui-surface-soft-dark,#1e293b))] text-[color:var(--zui-kbd-secondary-fg,var(--zui-fg,#0f172a))] dark:text-[color:var(--zui-kbd-secondary-fg-dark,var(--zui-fg-dark,#f8fafc))]\",\n  destructive:\n    \"bg-[var(--zui-kbd-destructive-bg,var(--zui-status-error,#f43f5e))] dark:bg-[var(--zui-kbd-destructive-bg-dark,var(--zui-status-error-dark,#be123c))] text-[color:var(--zui-kbd-destructive-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-destructive-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  outline:\n    \"border border-[color:var(--zui-kbd-outline-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-kbd-outline-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-kbd-outline-bg,var(--zui-surface-soft,#0000000d))] dark:bg-[var(--zui-kbd-outline-bg-dark,var(--zui-surface-soft-dark,#ffffff0d))] text-[color:var(--zui-kbd-outline-fg,var(--zui-fg,#0f172a))] dark:text-[color:var(--zui-kbd-outline-fg-dark,var(--zui-fg-dark,#f8fafc))]\",\n  ghost:\n    \"bg-transparent text-[color:var(--zui-kbd-ghost-fg,var(--zui-fg,#334155))] dark:text-[color:var(--zui-kbd-ghost-fg-dark,var(--zui-fg-dark,#e2e8f0))]\",\n  glass:\n    \"border border-[color:var(--zui-kbd-glass-border,var(--zui-border,#00000026))] dark:border-[color:var(--zui-kbd-glass-border-dark,var(--zui-border-dark,#ffffff26))] bg-[var(--zui-kbd-glass-bg,var(--zui-surface-soft,#0000001a))] dark:bg-[var(--zui-kbd-glass-bg-dark,var(--zui-surface-soft-dark,#ffffff1a))] text-[color:var(--zui-kbd-glass-fg,var(--zui-fg,#0f172a))] dark:text-[color:var(--zui-kbd-glass-fg-dark,var(--zui-fg-dark,#ffffff))] backdrop-blur-md\",\n  emerald:\n    \"bg-[var(--zui-kbd-emerald-bg,var(--zui-color-emerald,#10b981))] dark:bg-[var(--zui-kbd-emerald-bg-dark,var(--zui-color-emerald-dark,#065f46))] text-[color:var(--zui-kbd-emerald-fg,var(--zui-brand-fg,#064e3b))] dark:text-[color:var(--zui-kbd-emerald-fg-dark,var(--zui-brand-fg-dark,#064e3b))]\",\n  indigo:\n    \"bg-[var(--zui-kbd-indigo-bg,var(--zui-color-indigo,#3730a3))] dark:bg-[var(--zui-kbd-indigo-bg-dark,var(--zui-color-indigo-dark,#4f46e5))] text-[color:var(--zui-kbd-indigo-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-indigo-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  purple:\n    \"bg-[var(--zui-kbd-purple-bg,var(--zui-color-purple,#6b21a8))] dark:bg-[var(--zui-kbd-purple-bg-dark,var(--zui-color-purple-dark,#9333ea))] text-[color:var(--zui-kbd-purple-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-purple-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  pink: \"bg-[var(--zui-kbd-pink-bg,var(--zui-color-pink,#9d174d))] dark:bg-[var(--zui-kbd-pink-bg-dark,var(--zui-color-pink-dark,#db2777))] text-[color:var(--zui-kbd-pink-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-pink-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  rose: \"bg-[var(--zui-kbd-rose-bg,var(--zui-color-rose,#9f1239))] dark:bg-[var(--zui-kbd-rose-bg-dark,var(--zui-color-rose-dark,#e11d48))] text-[color:var(--zui-kbd-rose-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-rose-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  sky: \"bg-[var(--zui-kbd-sky-bg,var(--zui-color-sky,#0ea5e9))] dark:bg-[var(--zui-kbd-sky-bg-dark,var(--zui-color-sky-dark,#0369a1))] text-[color:var(--zui-kbd-sky-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-sky-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  teal: \"bg-[var(--zui-kbd-teal-bg,var(--zui-color-teal,#14b8a6))] dark:bg-[var(--zui-kbd-teal-bg-dark,var(--zui-color-teal-dark,#0f766e))] text-[color:var(--zui-kbd-teal-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-teal-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  yellow:\n    \"bg-[var(--zui-kbd-yellow-bg,var(--zui-color-yellow,#eab308))] dark:bg-[var(--zui-kbd-yellow-bg-dark,var(--zui-color-yellow-dark,#854d0e))] text-[color:var(--zui-kbd-yellow-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-yellow-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  orange:\n    \"bg-[var(--zui-kbd-orange-bg,var(--zui-color-orange,#f97316))] dark:bg-[var(--zui-kbd-orange-bg-dark,var(--zui-color-orange-dark,#9a3412))] text-[color:var(--zui-kbd-orange-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-orange-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  gray: \"bg-[var(--zui-kbd-gray-bg,var(--zui-color-gray,#6b7280))] dark:bg-[var(--zui-kbd-gray-bg-dark,var(--zui-color-gray-dark,#374151))] text-[color:var(--zui-kbd-gray-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gray-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  amber:\n    \"bg-[var(--zui-kbd-amber-bg,var(--zui-color-amber,#f59e0b))] dark:bg-[var(--zui-kbd-amber-bg-dark,var(--zui-color-amber-dark,#92400e))] text-[color:var(--zui-kbd-amber-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-amber-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  violet:\n    \"bg-[var(--zui-kbd-violet-bg,var(--zui-color-violet,#5b21b6))] dark:bg-[var(--zui-kbd-violet-bg-dark,var(--zui-color-violet-dark,#7c3aed))] text-[color:var(--zui-kbd-violet-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-violet-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  \"gradient-blue\":\n    \"bg-linear-to-r from-[var(--zui-kbd-gradient-blue-from,var(--zui-color-blue,#1e40af))] dark:from-[var(--zui-kbd-gradient-blue-from-dark,var(--zui-color-blue-dark,#2563eb))] to-[var(--zui-kbd-gradient-blue-to,var(--zui-color-purple,#6b21a8))] dark:to-[var(--zui-kbd-gradient-blue-to-dark,var(--zui-color-purple-dark,#9333ea))] text-[color:var(--zui-kbd-gradient-blue-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-blue-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  \"gradient-green\":\n    \"bg-linear-to-r from-[var(--zui-kbd-gradient-green-from,var(--zui-color-green,#166534))] dark:from-[var(--zui-kbd-gradient-green-from-dark,var(--zui-color-green-dark,#16a34a))] to-[var(--zui-kbd-gradient-green-to,var(--zui-color-lime,#3f6212))] dark:to-[var(--zui-kbd-gradient-green-to-dark,var(--zui-color-lime-dark,#65a30d))] text-[color:var(--zui-kbd-gradient-green-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-green-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  \"gradient-red\":\n    \"bg-linear-to-r from-[var(--zui-kbd-gradient-red-from,var(--zui-color-red,#991b1b))] dark:from-[var(--zui-kbd-gradient-red-from-dark,var(--zui-color-red-dark,#dc2626))] to-[var(--zui-kbd-gradient-red-to,var(--zui-color-pink,#9d174d))] dark:to-[var(--zui-kbd-gradient-red-to-dark,var(--zui-color-pink-dark,#db2777))] text-[color:var(--zui-kbd-gradient-red-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-red-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  \"gradient-yellow\":\n    \"bg-linear-to-r from-[var(--zui-kbd-gradient-yellow-from,var(--zui-color-yellow,#854d0e))] dark:from-[var(--zui-kbd-gradient-yellow-from-dark,var(--zui-color-yellow-dark,#ca8a04))] to-[var(--zui-kbd-gradient-yellow-to,var(--zui-color-orange,#9a3412))] dark:to-[var(--zui-kbd-gradient-yellow-to-dark,var(--zui-color-orange-dark,#ea580c))] text-[color:var(--zui-kbd-gradient-yellow-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-yellow-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  \"gradient-purple\":\n    \"bg-linear-to-r from-[var(--zui-kbd-gradient-purple-from,var(--zui-color-purple,#6b21a8))] dark:from-[var(--zui-kbd-gradient-purple-from-dark,var(--zui-color-purple-dark,#9333ea))] to-[var(--zui-kbd-gradient-purple-to,var(--zui-color-pink,#9d174d))] dark:to-[var(--zui-kbd-gradient-purple-to-dark,var(--zui-color-pink-dark,#db2777))] text-[color:var(--zui-kbd-gradient-purple-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-purple-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  \"gradient-teal\":\n    \"bg-linear-to-r from-[var(--zui-kbd-gradient-teal-from,var(--zui-color-teal,#115e59))] dark:from-[var(--zui-kbd-gradient-teal-from-dark,var(--zui-color-teal-dark,#0d9488))] to-[var(--zui-kbd-gradient-teal-to,var(--zui-color-cyan,#155e75))] dark:to-[var(--zui-kbd-gradient-teal-to-dark,var(--zui-color-cyan-dark,#0891b2))] text-[color:var(--zui-kbd-gradient-teal-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-teal-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  \"gradient-indigo\":\n    \"bg-linear-to-r from-[var(--zui-kbd-gradient-indigo-from,var(--zui-color-indigo,#3730a3))] dark:from-[var(--zui-kbd-gradient-indigo-from-dark,var(--zui-color-indigo-dark,#4f46e5))] to-[var(--zui-kbd-gradient-indigo-to,var(--zui-color-purple,#6b21a8))] dark:to-[var(--zui-kbd-gradient-indigo-to-dark,var(--zui-color-purple-dark,#9333ea))] text-[color:var(--zui-kbd-gradient-indigo-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-indigo-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  \"gradient-pink\":\n    \"bg-linear-to-r from-[var(--zui-kbd-gradient-pink-from,var(--zui-color-pink,#9d174d))] dark:from-[var(--zui-kbd-gradient-pink-from-dark,var(--zui-color-pink-dark,#db2777))] to-[var(--zui-kbd-gradient-pink-to,var(--zui-color-rose,#9f1239))] dark:to-[var(--zui-kbd-gradient-pink-to-dark,var(--zui-color-rose-dark,#e11d48))] text-[color:var(--zui-kbd-gradient-pink-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-pink-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  \"gradient-orange\":\n    \"bg-linear-to-r from-[var(--zui-kbd-gradient-orange-from,var(--zui-color-orange,#9a3412))] dark:from-[var(--zui-kbd-gradient-orange-from-dark,var(--zui-color-orange-dark,#ea580c))] to-[var(--zui-kbd-gradient-orange-to,var(--zui-color-red,#991b1b))] dark:to-[var(--zui-kbd-gradient-orange-to-dark,var(--zui-color-red-dark,#dc2626))] text-[color:var(--zui-kbd-gradient-orange-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-gradient-orange-fg-dark,var(--zui-brand-fg-dark,#ffffff))]\",\n  blue: \"border border-[color:var(--zui-kbd-key-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[color:var(--zui-kbd-key-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))] bg-[var(--zui-kbd-key-blue-bg,var(--zui-color-blue,#2563eb))] dark:bg-[var(--zui-kbd-key-blue-bg-dark,var(--zui-color-blue-dark,#3b82f6))] text-[color:var(--zui-kbd-key-blue-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-blue-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-blue-bg-hover,color-mix(in oklch, var(--zui-color-blue,#2563eb) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-blue-bg-hover-dark,color-mix(in oklch, var(--zui-color-blue-dark,#3b82f6) 18%, transparent))]\",\n  cyan: \"border border-[color:var(--zui-kbd-key-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[color:var(--zui-kbd-key-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))] bg-[var(--zui-kbd-key-cyan-bg,var(--zui-color-cyan,#0891b2))] dark:bg-[var(--zui-kbd-key-cyan-bg-dark,var(--zui-color-cyan-dark,#22d3ee))] text-[color:var(--zui-kbd-key-cyan-fg,var(--zui-brand-fg,#083344))] dark:text-[color:var(--zui-kbd-key-cyan-fg-dark,var(--zui-brand-fg-dark,#083344))] hover:bg-[var(--zui-kbd-key-cyan-bg-hover,color-mix(in oklch, var(--zui-color-cyan,#0891b2) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-cyan-bg-hover-dark,color-mix(in oklch, var(--zui-color-cyan-dark,#22d3ee) 18%, transparent))]\",\n  green:\n    \"border border-[color:var(--zui-kbd-key-green-border,var(--zui-color-green,#16a34a))] dark:border-[color:var(--zui-kbd-key-green-border-dark,var(--zui-color-green-dark,#22c55e))] bg-[var(--zui-kbd-key-green-bg,var(--zui-color-green,#16a34a))] dark:bg-[var(--zui-kbd-key-green-bg-dark,var(--zui-color-green-dark,#22c55e))] text-[color:var(--zui-kbd-key-green-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-green-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-green-bg-hover,color-mix(in oklch, var(--zui-color-green,#16a34a) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-green-bg-hover-dark,color-mix(in oklch, var(--zui-color-green-dark,#22c55e) 18%, transparent))]\",\n  lime: \"border border-[color:var(--zui-kbd-key-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[color:var(--zui-kbd-key-lime-border-dark,var(--zui-color-lime-dark,#a3e635))] bg-[var(--zui-kbd-key-lime-bg,var(--zui-color-lime,#65a30d))] dark:bg-[var(--zui-kbd-key-lime-bg-dark,var(--zui-color-lime-dark,#a3e635))] text-[color:var(--zui-kbd-key-lime-fg,var(--zui-brand-fg,#1a2e05))] dark:text-[color:var(--zui-kbd-key-lime-fg-dark,var(--zui-brand-fg-dark,#1a2e05))] hover:bg-[var(--zui-kbd-key-lime-bg-hover,color-mix(in oklch, var(--zui-color-lime,#65a30d) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-lime-bg-hover-dark,color-mix(in oklch, var(--zui-color-lime-dark,#a3e635) 18%, transparent))]\",\n  mint: \"border border-[color:var(--zui-kbd-key-mint-border,var(--zui-color-mint,#10b981))] dark:border-[color:var(--zui-kbd-key-mint-border-dark,var(--zui-color-mint-dark,#6ee7b7))] bg-[var(--zui-kbd-key-mint-bg,var(--zui-color-mint,#10b981))] dark:bg-[var(--zui-kbd-key-mint-bg-dark,var(--zui-color-mint-dark,#6ee7b7))] text-[color:var(--zui-kbd-key-mint-fg,var(--zui-brand-fg,#064e3b))] dark:text-[color:var(--zui-kbd-key-mint-fg-dark,var(--zui-brand-fg-dark,#064e3b))] hover:bg-[var(--zui-kbd-key-mint-bg-hover,color-mix(in oklch, var(--zui-color-mint,#10b981) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-mint-bg-hover-dark,color-mix(in oklch, var(--zui-color-mint-dark,#6ee7b7) 18%, transparent))]\",\n  ocean:\n    \"border border-[color:var(--zui-kbd-key-ocean-border,var(--zui-color-ocean,#0284c7))] dark:border-[color:var(--zui-kbd-key-ocean-border-dark,var(--zui-color-ocean-dark,#38bdf8))] bg-[var(--zui-kbd-key-ocean-bg,var(--zui-color-ocean,#0284c7))] dark:bg-[var(--zui-kbd-key-ocean-bg-dark,var(--zui-color-ocean-dark,#38bdf8))] text-[color:var(--zui-kbd-key-ocean-fg,var(--zui-brand-fg,#082f49))] dark:text-[color:var(--zui-kbd-key-ocean-fg-dark,var(--zui-brand-fg-dark,#082f49))] hover:bg-[var(--zui-kbd-key-ocean-bg-hover,color-mix(in oklch, var(--zui-color-ocean,#0284c7) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-ocean-bg-hover-dark,color-mix(in oklch, var(--zui-color-ocean-dark,#38bdf8) 18%, transparent))]\",\n  sapphire:\n    \"border border-[color:var(--zui-kbd-key-sapphire-border,var(--zui-color-sapphire,#1d4ed8))] dark:border-[color:var(--zui-kbd-key-sapphire-border-dark,var(--zui-color-sapphire-dark,#60a5fa))] bg-[var(--zui-kbd-key-sapphire-bg,var(--zui-color-sapphire,#1d4ed8))] dark:bg-[var(--zui-kbd-key-sapphire-bg-dark,var(--zui-color-sapphire-dark,#60a5fa))] text-[color:var(--zui-kbd-key-sapphire-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-sapphire-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-sapphire-bg-hover,color-mix(in oklch, var(--zui-color-sapphire,#1d4ed8) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-sapphire-bg-hover-dark,color-mix(in oklch, var(--zui-color-sapphire-dark,#60a5fa) 18%, transparent))]\",\n  lavender:\n    \"border border-[color:var(--zui-kbd-key-lavender-border,var(--zui-color-lavender,#8b5cf6))] dark:border-[color:var(--zui-kbd-key-lavender-border-dark,var(--zui-color-lavender-dark,#a78bfa))] bg-[var(--zui-kbd-key-lavender-bg,var(--zui-color-lavender,#8b5cf6))] dark:bg-[var(--zui-kbd-key-lavender-bg-dark,var(--zui-color-lavender-dark,#a78bfa))] text-[color:var(--zui-kbd-key-lavender-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-lavender-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-lavender-bg-hover,color-mix(in oklch, var(--zui-color-lavender,#8b5cf6) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-lavender-bg-hover-dark,color-mix(in oklch, var(--zui-color-lavender-dark,#a78bfa) 18%, transparent))]\",\n  ruby: \"border border-[color:var(--zui-kbd-key-ruby-border,var(--zui-color-ruby,#be123c))] dark:border-[color:var(--zui-kbd-key-ruby-border-dark,var(--zui-color-ruby-dark,#fb7185))] bg-[var(--zui-kbd-key-ruby-bg,var(--zui-color-ruby,#be123c))] dark:bg-[var(--zui-kbd-key-ruby-bg-dark,var(--zui-color-ruby-dark,#fb7185))] text-[color:var(--zui-kbd-key-ruby-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-ruby-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-ruby-bg-hover,color-mix(in oklch, var(--zui-color-ruby,#be123c) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-ruby-bg-hover-dark,color-mix(in oklch, var(--zui-color-ruby-dark,#fb7185) 18%, transparent))]\",\n  red: \"border border-[color:var(--zui-kbd-key-red-border,var(--zui-color-red,#dc2626))] dark:border-[color:var(--zui-kbd-key-red-border-dark,var(--zui-color-red-dark,#ef4444))] bg-[var(--zui-kbd-key-red-bg,var(--zui-color-red,#dc2626))] dark:bg-[var(--zui-kbd-key-red-bg-dark,var(--zui-color-red-dark,#ef4444))] text-[color:var(--zui-kbd-key-red-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-red-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-red-bg-hover,color-mix(in oklch, var(--zui-color-red,#dc2626) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-red-bg-hover-dark,color-mix(in oklch, var(--zui-color-red-dark,#ef4444) 18%, transparent))]\",\n  slate:\n    \"border border-[color:var(--zui-kbd-key-slate-border,var(--zui-color-slate,#475569))] dark:border-[color:var(--zui-kbd-key-slate-border-dark,var(--zui-color-slate-dark,#64748b))] bg-[var(--zui-kbd-key-slate-bg,var(--zui-color-slate,#475569))] dark:bg-[var(--zui-kbd-key-slate-bg-dark,var(--zui-color-slate-dark,#64748b))] text-[color:var(--zui-kbd-key-slate-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-slate-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-slate-bg-hover,color-mix(in oklch, var(--zui-color-slate,#475569) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-slate-bg-hover-dark,color-mix(in oklch, var(--zui-color-slate-dark,#64748b) 18%, transparent))]\",\n  zinc: \"border border-[color:var(--zui-kbd-key-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[color:var(--zui-kbd-key-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))] bg-[var(--zui-kbd-key-zinc-bg,var(--zui-color-zinc,#52525b))] dark:bg-[var(--zui-kbd-key-zinc-bg-dark,var(--zui-color-zinc-dark,#71717a))] text-[color:var(--zui-kbd-key-zinc-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-zinc-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-zinc-bg-hover,color-mix(in oklch, var(--zui-color-zinc,#52525b) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-zinc-bg-hover-dark,color-mix(in oklch, var(--zui-color-zinc-dark,#71717a) 18%, transparent))]\",\n  stone:\n    \"border border-[color:var(--zui-kbd-key-stone-border,var(--zui-color-stone,#57534e))] dark:border-[color:var(--zui-kbd-key-stone-border-dark,var(--zui-color-stone-dark,#78716c))] bg-[var(--zui-kbd-key-stone-bg,var(--zui-color-stone,#57534e))] dark:bg-[var(--zui-kbd-key-stone-bg-dark,var(--zui-color-stone-dark,#78716c))] text-[color:var(--zui-kbd-key-stone-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-stone-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-stone-bg-hover,color-mix(in oklch, var(--zui-color-stone,#57534e) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-stone-bg-hover-dark,color-mix(in oklch, var(--zui-color-stone-dark,#78716c) 18%, transparent))]\",\n  royal:\n    \"border border-[color:var(--zui-kbd-key-royal-border,var(--zui-color-royal,#4338ca))] dark:border-[color:var(--zui-kbd-key-royal-border-dark,var(--zui-color-royal-dark,#818cf8))] bg-[var(--zui-kbd-key-royal-bg,var(--zui-color-royal,#4338ca))] dark:bg-[var(--zui-kbd-key-royal-bg-dark,var(--zui-color-royal-dark,#818cf8))] text-[color:var(--zui-kbd-key-royal-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-royal-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-royal-bg-hover,color-mix(in oklch, var(--zui-color-royal,#4338ca) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-royal-bg-hover-dark,color-mix(in oklch, var(--zui-color-royal-dark,#818cf8) 18%, transparent))]\",\n  electric:\n    \"border border-[color:var(--zui-kbd-key-electric-border,var(--zui-color-electric,#0ea5e9))] dark:border-[color:var(--zui-kbd-key-electric-border-dark,var(--zui-color-electric-dark,#38bdf8))] bg-[var(--zui-kbd-key-electric-bg,var(--zui-color-electric,#0ea5e9))] dark:bg-[var(--zui-kbd-key-electric-bg-dark,var(--zui-color-electric-dark,#38bdf8))] text-[color:var(--zui-kbd-key-electric-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-electric-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-electric-bg-hover,color-mix(in oklch, var(--zui-color-electric,#0ea5e9) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-electric-bg-hover-dark,color-mix(in oklch, var(--zui-color-electric-dark,#38bdf8) 18%, transparent))]\",\n  forest:\n    \"border border-[color:var(--zui-kbd-key-forest-border,var(--zui-color-forest,#166534))] dark:border-[color:var(--zui-kbd-key-forest-border-dark,var(--zui-color-forest-dark,#4ade80))] bg-[var(--zui-kbd-key-forest-bg,var(--zui-color-forest,#166534))] dark:bg-[var(--zui-kbd-key-forest-bg-dark,var(--zui-color-forest-dark,#4ade80))] text-[color:var(--zui-kbd-key-forest-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-forest-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-forest-bg-hover,color-mix(in oklch, var(--zui-color-forest,#166534) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-forest-bg-hover-dark,color-mix(in oklch, var(--zui-color-forest-dark,#4ade80) 18%, transparent))]\",\n  sunset:\n    \"border border-[color:var(--zui-kbd-key-sunset-border,var(--zui-color-sunset,#ea580c))] dark:border-[color:var(--zui-kbd-key-sunset-border-dark,var(--zui-color-sunset-dark,#fb923c))] bg-[var(--zui-kbd-key-sunset-bg,var(--zui-color-sunset,#ea580c))] dark:bg-[var(--zui-kbd-key-sunset-bg-dark,var(--zui-color-sunset-dark,#fb923c))] text-[color:var(--zui-kbd-key-sunset-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-sunset-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-sunset-bg-hover,color-mix(in oklch, var(--zui-color-sunset,#ea580c) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-sunset-bg-hover-dark,color-mix(in oklch, var(--zui-color-sunset-dark,#fb923c) 18%, transparent))]\",\n  magenta:\n    \"border border-[color:var(--zui-kbd-key-magenta-border,var(--zui-color-magenta,#c026d3))] dark:border-[color:var(--zui-kbd-key-magenta-border-dark,var(--zui-color-magenta-dark,#e879f9))] bg-[var(--zui-kbd-key-magenta-bg,var(--zui-color-magenta,#c026d3))] dark:bg-[var(--zui-kbd-key-magenta-bg-dark,var(--zui-color-magenta-dark,#e879f9))] text-[color:var(--zui-kbd-key-magenta-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-magenta-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-magenta-bg-hover,color-mix(in oklch, var(--zui-color-magenta,#c026d3) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-magenta-bg-hover-dark,color-mix(in oklch, var(--zui-color-magenta-dark,#e879f9) 18%, transparent))]\",\n  crimson:\n    \"border border-[color:var(--zui-kbd-key-crimson-border,var(--zui-color-crimson,#b91c1c))] dark:border-[color:var(--zui-kbd-key-crimson-border-dark,var(--zui-color-crimson-dark,#f87171))] bg-[var(--zui-kbd-key-crimson-bg,var(--zui-color-crimson,#b91c1c))] dark:bg-[var(--zui-kbd-key-crimson-bg-dark,var(--zui-color-crimson-dark,#f87171))] text-[color:var(--zui-kbd-key-crimson-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-crimson-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-crimson-bg-hover,color-mix(in oklch, var(--zui-color-crimson,#b91c1c) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-crimson-bg-hover-dark,color-mix(in oklch, var(--zui-color-crimson-dark,#f87171) 18%, transparent))]\",\n  aqua: \"border border-[color:var(--zui-kbd-key-aqua-border,var(--zui-color-aqua,#0f766e))] dark:border-[color:var(--zui-kbd-key-aqua-border-dark,var(--zui-color-aqua-dark,#2dd4bf))] bg-[var(--zui-kbd-key-aqua-bg,var(--zui-color-aqua,#0f766e))] dark:bg-[var(--zui-kbd-key-aqua-bg-dark,var(--zui-color-aqua-dark,#2dd4bf))] text-[color:var(--zui-kbd-key-aqua-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-aqua-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-aqua-bg-hover,color-mix(in oklch, var(--zui-color-aqua,#0f766e) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-aqua-bg-hover-dark,color-mix(in oklch, var(--zui-color-aqua-dark,#2dd4bf) 18%, transparent))]\",\n  plum: \"border border-[color:var(--zui-kbd-key-plum-border,var(--zui-color-plum,#7e22ce))] dark:border-[color:var(--zui-kbd-key-plum-border-dark,var(--zui-color-plum-dark,#c084fc))] bg-[var(--zui-kbd-key-plum-bg,var(--zui-color-plum,#7e22ce))] dark:bg-[var(--zui-kbd-key-plum-bg-dark,var(--zui-color-plum-dark,#c084fc))] text-[color:var(--zui-kbd-key-plum-fg,var(--zui-brand-fg,#ffffff))] dark:text-[color:var(--zui-kbd-key-plum-fg-dark,var(--zui-brand-fg-dark,#ffffff))] hover:bg-[var(--zui-kbd-key-plum-bg-hover,color-mix(in oklch, var(--zui-color-plum,#7e22ce) 10%, transparent))] dark:hover:bg-[var(--zui-kbd-key-plum-bg-hover-dark,color-mix(in oklch, var(--zui-color-plum-dark,#c084fc) 18%, transparent))]\",\n} as const;\n\nexport type ZuiKbdAppearance = keyof typeof zuiKbdKeyAppearances;\n\nexport const zuiKbdKeyBase = [\n  \"inline-flex items-center justify-center font-mono font-medium leading-none\",\n  \"rounded-[var(--zui-kbd-radius,var(--zui-radius,0.375rem))]\",\n  \"shadow-[var(--zui-kbd-shadow,var(--zui-shadow,inset_0_-1px_0_#0000001f))] dark:shadow-[var(--zui-kbd-shadow-dark,var(--zui-shadow-dark,inset_0_-1px_0_#0000004d))]\",\n] as const;\n\nexport const zuiKbdKeySizes = {\n  sm: \"h-5 min-w-5 px-1 text-[0.7rem]\",\n  md: \"h-6 min-w-6 px-1.5 text-xs\",\n  lg: \"h-7 min-w-7 px-2 text-sm\",\n} as const;\n\nexport type ZuiKbdSize = keyof typeof zuiKbdKeySizes;\n\nexport const zuiKbdSeparatorBase =\n  \"text-[color:var(--zui-kbd-separator-fg,var(--zui-fg,#94a3b8))] dark:text-[color:var(--zui-kbd-separator-fg-dark,var(--zui-fg-dark,#64748b))]\";\n\nexport const zuiKbdSeparatorSizes = {\n  sm: \"text-[0.7rem]\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n} as const;\n"]}

package/dist/{chunk-KEGOUZL5.js → chunk-JGPG2D2Y.js}

@@ -1,16 +1,16 @@
 'use strict';
 
-var chunkUU34Q42Q_js = require('./chunk-UU34Q42Q.js');
+var chunkD7ATXPVI_js = require('./chunk-D7ATXPVI.js');
 var chunkZS5756ZC_js = require('./chunk-ZS5756ZC.js');
 var classVarianceAuthority = require('class-variance-authority');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
-var tooltipVariants = classVarianceAuthority.cva(chunkUU34Q42Q_js.zuiTooltipBase, {
+var tooltipVariants = classVarianceAuthority.cva(chunkD7ATXPVI_js.zuiTooltipBase, {
   variants: {
-    variant: chunkUU34Q42Q_js.zuiTooltipVariants,
-    size: chunkUU34Q42Q_js.zuiTooltipSizes,
-    width: chunkUU34Q42Q_js.zuiTooltipWidths
+    variant: chunkD7ATXPVI_js.zuiTooltipVariants,
+    size: chunkD7ATXPVI_js.zuiTooltipSizes,
+    width: chunkD7ATXPVI_js.zuiTooltipWidths
   },
   defaultVariants: {
     variant: "default",
@@ -205,5 +205,5 @@ exports.TooltipContext = TooltipContext;
 exports.TooltipTrigger = TooltipTrigger;
 exports.tooltipVariants = tooltipVariants;
 exports.useTooltip = useTooltip;
-//# sourceMappingURL=chunk-KEGOUZL5.js.map
-//# sourceMappingURL=chunk-KEGOUZL5.js.map
+//# sourceMappingURL=chunk-JGPG2D2Y.js.map
+//# sourceMappingURL=chunk-JGPG2D2Y.js.map

package/dist/{chunk-KEGOUZL5.js.map → chunk-JGPG2D2Y.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/ui/tooltip/variants.ts","../src/ui/tooltip/tooltip-base.tsx"],"names":["cva","zuiTooltipBase","zuiTooltipVariants","zuiTooltipSizes","zuiTooltipWidths","createContext","useContext","useState","useId","useCallback","useRef","useEffect","jsx","Children","isValidElement","cloneElement","cn"],"mappings":";;;;;;;;AASO,IAAM,eAAA,GAAkBA,2BAAIC,+BAAA,EAAgB;AAAA,EACjD,QAAA,EAAU;AAAA,IACR,OAAA,EAASC,mCAAA;AAAA,IACT,IAAA,EAAMC,gCAAA;AAAA,IACN,KAAA,EAAOC;AAAA,GACT;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,SAAA;AAAA,IACT,IAAA,EAAM,IAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC;ACSM,IAAM,cAAA,GAAiBC,oBAAyC,IAAI;AAEpE,IAAM,aAAa,MAAM;AAC9B,EAAA,MAAM,OAAA,GAAUC,iBAAW,cAAc,CAAA;AACzC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,MAAM,gDAAgD,CAAA;AAAA,EAClE;AACA,EAAA,OAAO,OAAA;AACT;AAEA,SAAS,gBAAA,CACP,SAAA,EACA,QAAA,EACA,IAAA,EACoB;AACpB,EAAA,IAAI,CAAC,IAAA,EAAM;AACT,IAAA,OAAO,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAAA,EACnD;AACA,EAAA,MAAM,UACJ,OAAO,QAAA,KAAa,QAAA,IAAY,QAAA,CAAS,MAAK,CAAE,MAAA,GAAS,CAAA,GACrD,QAAA,CAAS,MAAM,KAAK,CAAA,CAAE,MAAA,CAAO,OAAO,IACpC,EAAC;AACP,EAAA,MAAM,MAAA,GAAS,CAAC,mBAAG,IAAI,GAAA,CAAI,CAAC,GAAG,OAAA,EAAS,SAAS,CAAC,CAAC,CAAA;AACnD,EAAA,OAAO,MAAA,CAAO,KAAK,GAAG,CAAA;AACxB;AAEO,IAAM,UAAU,CAAC;AAAA,EACtB,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,IAAA,EAAM,cAAA;AAAA,EACN,YAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,KAAA,GAAQ;AACV,CAAA,KAAoB;AAClB,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAIC,eAAS,WAAW,CAAA;AACpE,EAAA,MAAM,SAAA,GAAY,CAAA,EAAGC,WAAA,EAAO,CAAA,QAAA,CAAA;AAE5B,EAAA,MAAM,eAAe,cAAA,KAAmB,MAAA;AACxC,EAAA,MAAM,IAAA,GAAO,eAAe,cAAA,GAAiB,gBAAA;AAE7C,EAAA,MAAM,OAAA,GAAUC,iBAAA;AAAA,IACd,CAAC,KAAA,KAAmB;AAClB,MAAA,IAAI,CAAC,YAAA,EAAc,mBAAA,CAAoB,KAAK,CAAA;AAC5C,MAAA,YAAA,GAAe,KAAK,CAAA;AAAA,IACtB,CAAA;AAAA,IACA,CAAC,cAAc,YAAY;AAAA,GAC7B;AAEA,EAAA,MAAM,cAAA,GAAiBC,aAA6C,IAAI,CAAA;AAExE,EAAA,MAAM,iBAAA,GAAoBD,kBAAY,MAAM;AAC1C,IAAA,IAAI,cAAA,CAAe,YAAY,IAAA,EAAM;AACnC,MAAA,YAAA,CAAa,eAAe,OAAO,CAAA;AACnC,MAAA,cAAA,CAAe,OAAA,GAAU,IAAA;AAAA,IAC3B;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,mBAAA,GAAsBA,kBAAY,MAAM;AAC5C,IAAA,iBAAA,EAAkB;AAClB,IAAA,cAAA,CAAe,OAAA,GAAU,WAAW,MAAM;AACxC,MAAA,cAAA,CAAe,OAAA,GAAU,IAAA;AACzB,MAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,IACd,GAAG,KAAK,CAAA;AAAA,EACV,CAAA,EAAG,CAAC,iBAAA,EAAmB,KAAA,EAAO,OAAO,CAAC,CAAA;AAEtC,EAAAE,eAAA,CAAU,MAAM,MAAM,iBAAA,EAAkB,EAAG,CAAC,iBAAiB,CAAC,CAAA;AAE9D,EAAA,uBACEC,cAAA;AAAA,IAAC,cAAA,CAAe,QAAA;AAAA,IAAf;AAAA,MACC,KAAA,EAAO;AAAA,QACL,IAAA;AAAA,QACA,OAAA;AAAA,QACA,QAAA;AAAA,QACA,KAAA;AAAA,QACA,mBAAA;AAAA,QACA,iBAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,kBAAAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EAAyB,QAAA,EAAS;AAAA;AAAA,GACnD;AAEJ;AAEO,IAAM,iBAAiB,CAAC;AAAA,EAC7B,QAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,MAAM,EAAE,OAAA,EAAS,mBAAA,EAAqB,mBAAmB,IAAA,EAAM,SAAA,KAC7D,UAAA,EAAW;AAEb,EAAA,MAAM,YAAA,GAAkC,MAAM,mBAAA,EAAoB;AAClE,EAAA,MAAM,eAAkC,MAAM;AAC5C,IAAA,iBAAA,EAAkB;AAClB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,EACf,CAAA;AACA,EAAA,MAAM,UAA6B,MAAM;AACvC,IAAA,iBAAA,EAAkB;AAClB,IAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,EACd,CAAA;AACA,EAAA,MAAM,SAA4B,MAAM;AACtC,IAAA,iBAAA,EAAkB;AAClB,IAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,EACf,CAAA;AACA,EAAA,MAAM,SAAA,GAAkC,CAAC,KAAA,KAAU;AACjD,IAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,MAAA,iBAAA,EAAkB;AAClB,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,IACf;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,SAAA,GAAYC,cAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,MAAA;AAAA,IAC3C,CAAC,IAAA,KAAS,IAAA,KAAS,QAAQ,IAAA,KAAS,MAAA,IAAa,OAAO,IAAA,KAAS;AAAA,GACnE;AAEA,EAAA,MAAM,aAAA,GACJ,SAAA,CAAU,MAAA,KAAW,CAAA,IAAKC,oBAAA,CAAe,SAAA,CAAU,CAAC,CAAC,CAAA,GAChD,SAAA,CAAU,CAAC,CAAA,GASZ,MAAA;AAEN,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,MAAM,WAAA,GAAc,gBAAA;AAAA,MAClB,SAAA;AAAA,MACA,aAAA,CAAc,MAAM,kBAAkB,CAAA;AAAA,MACtC;AAAA,KACF;AACA,IAAA,OAAOC,mBAAa,aAAA,EAAe;AAAA,MACjC,YAAA,EAAc,CAAC,KAAA,KAA4B;AACzC,QAAA,aAAA,CAAc,KAAA,CAAM,eAAe,KAAK,CAAA;AACxC,QAAA,IAAI,CAAC,MAAM,gBAAA,EAAkB;AAC3B,UAAA,mBAAA,EAAoB;AAAA,QACtB;AAAA,MACF,CAAA;AAAA,MACA,YAAA,EAAc,CAAC,KAAA,KAA4B;AACzC,QAAA,aAAA,CAAc,KAAA,CAAM,eAAe,KAAK,CAAA;AACxC,QAAA,iBAAA,EAAkB;AAClB,QAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,MACf,CAAA;AAAA,MACA,OAAA,EAAS,CAAC,KAAA,KAA4B;AACpC,QAAA,aAAA,CAAc,KAAA,CAAM,UAAU,KAAK,CAAA;AACnC,QAAA,IAAI,CAAC,MAAM,gBAAA,EAAkB;AAC3B,UAAA,iBAAA,EAAkB;AAClB,UAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,QACd;AAAA,MACF,CAAA;AAAA,MACA,MAAA,EAAQ,CAAC,KAAA,KAA4B;AACnC,QAAA,aAAA,CAAc,KAAA,CAAM,SAAS,KAAK,CAAA;AAClC,QAAA,iBAAA,EAAkB;AAClB,QAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,MACf,CAAA;AAAA,MACA,SAAA,EAAW,CAAC,KAAA,KAA+B;AACzC,QAAA,aAAA,CAAc,KAAA,CAAM,YAAY,KAAK,CAAA;AACrC,QAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,UAAA,iBAAA,EAAkB;AAClB,UAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,QACf;AAAA,MACF,CAAA;AAAA,MACA,SAAA,EAAWC,mBAAA,CAAG,SAAA,EAAW,aAAA,CAAc,MAAM,SAAS,CAAA;AAAA,MACtD,kBAAA,EAAoB;AAAA,KACrB,CAAA;AAAA,EACH;AAEA,EAAA,uBACEJ,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,QAAA,EAAU,CAAA;AAAA,MACV,kBAAA,EAAkB,gBAAA,CAAiB,SAAA,EAAW,MAAA,EAAW,IAAI,CAAA;AAAA,MAC7D,YAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAEO,IAAM,iBAAiB,CAAC;AAAA,EAC7B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,MAAM,EAAE,IAAA,EAAM,QAAA,EAAU,SAAA,KAAc,UAAA,EAAW;AAEjD,EAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAElB,EAAA,MAAM,cAAA,GAAiB;AAAA,IACrB,GAAA,EAAK,kBAAA;AAAA,IACL,MAAA,EAAQ,eAAA;AAAA,IACR,IAAA,EAAM,0CAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,SAAA;AAAA,MACJ,WAAA,EAAW,IAAA;AAAA,MACX,IAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAWI,mBAAA;AAAA,QACT,eAAA,CAAgB,EAAE,OAAA,EAAS,IAAA,EAAM,OAAO,CAAA;AAAA,QACxC,eAAe,QAAQ,CAAA;AAAA,QACvB;AAAA,OACF;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-KEGOUZL5.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiTooltipBase,\n  zuiTooltipSizes,\n  zuiTooltipVariants,\n  zuiTooltipWidths,\n} from \"../../design-system/tooltip\";\n\nexport const tooltipVariants = cva(zuiTooltipBase, {\n  variants: {\n    variant: zuiTooltipVariants,\n    size: zuiTooltipSizes,\n    width: zuiTooltipWidths,\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n    width: \"xs\",\n  },\n});\n","\"use client\";\n\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type FocusEventHandler,\n  type ReactElement,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  TooltipProps,\n  TooltipContextType,\n  TooltipTriggerProps,\n  TooltipContentProps,\n} from \"./types\";\nimport { tooltipVariants } from \"./variants\";\n\nexport const TooltipContext = createContext<TooltipContextType | null>(null);\n\nexport const useTooltip = () => {\n  const context = useContext(TooltipContext);\n  if (!context) {\n    throw new Error(\"Tooltip components must be used within Tooltip\");\n  }\n  return context;\n};\n\nfunction mergeDescribedBy(\n  tooltipId: string,\n  existing: unknown,\n  open: boolean,\n): string | undefined {\n  if (!open) {\n    return typeof existing === \"string\" ? existing : undefined;\n  }\n  const baseIds =\n    typeof existing === \"string\" && existing.trim().length > 0\n      ? existing.split(/\\s+/).filter(Boolean)\n      : [];\n  const merged = [...new Set([...baseIds, tooltipId])];\n  return merged.join(\" \");\n}\n\nexport const Tooltip = ({\n  children,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  position = \"top\",\n  delay = 100,\n}: TooltipProps) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const tooltipId = `${useId()}-tooltip`;\n\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value);\n      onOpenChange?.(value);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const cancelDelayedOpen = useCallback(() => {\n    if (showTimeoutRef.current !== null) {\n      clearTimeout(showTimeoutRef.current);\n      showTimeoutRef.current = null;\n    }\n  }, []);\n\n  const scheduleDelayedOpen = useCallback(() => {\n    cancelDelayedOpen();\n    showTimeoutRef.current = setTimeout(() => {\n      showTimeoutRef.current = null;\n      setOpen(true);\n    }, delay);\n  }, [cancelDelayedOpen, delay, setOpen]);\n\n  useEffect(() => () => cancelDelayedOpen(), [cancelDelayedOpen]);\n\n  return (\n    <TooltipContext.Provider\n      value={{\n        open,\n        setOpen,\n        position,\n        delay,\n        scheduleDelayedOpen,\n        cancelDelayedOpen,\n        tooltipId,\n      }}\n    >\n      <div className=\"relative inline-block\">{children}</div>\n    </TooltipContext.Provider>\n  );\n};\n\nexport const TooltipTrigger = ({\n  children,\n  className,\n}: TooltipTriggerProps) => {\n  const { setOpen, scheduleDelayedOpen, cancelDelayedOpen, open, tooltipId } =\n    useTooltip();\n\n  const onMouseEnter: MouseEventHandler = () => scheduleDelayedOpen();\n  const onMouseLeave: MouseEventHandler = () => {\n    cancelDelayedOpen();\n    setOpen(false);\n  };\n  const onFocus: FocusEventHandler = () => {\n    cancelDelayedOpen();\n    setOpen(true);\n  };\n  const onBlur: FocusEventHandler = () => {\n    cancelDelayedOpen();\n    setOpen(false);\n  };\n  const onKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === \"Escape\") {\n      cancelDelayedOpen();\n      setOpen(false);\n    }\n  };\n\n  const childList = Children.toArray(children).filter(\n    (node) => node !== null && node !== undefined && typeof node !== \"boolean\",\n  );\n\n  const soleCandidate =\n    childList.length === 1 && isValidElement(childList[0])\n      ? (childList[0] as ReactElement<{\n          className?: string;\n          \"aria-describedby\"?: string;\n          onMouseEnter?: MouseEventHandler;\n          onMouseLeave?: MouseEventHandler;\n          onFocus?: FocusEventHandler;\n          onBlur?: FocusEventHandler;\n          onKeyDown?: KeyboardEventHandler;\n        }>)\n      : undefined;\n\n  if (soleCandidate) {\n    const describedBy = mergeDescribedBy(\n      tooltipId,\n      soleCandidate.props[\"aria-describedby\"],\n      open,\n    );\n    return cloneElement(soleCandidate, {\n      onMouseEnter: (event: React.MouseEvent) => {\n        soleCandidate.props.onMouseEnter?.(event);\n        if (!event.defaultPrevented) {\n          scheduleDelayedOpen();\n        }\n      },\n      onMouseLeave: (event: React.MouseEvent) => {\n        soleCandidate.props.onMouseLeave?.(event);\n        cancelDelayedOpen();\n        setOpen(false);\n      },\n      onFocus: (event: React.FocusEvent) => {\n        soleCandidate.props.onFocus?.(event);\n        if (!event.defaultPrevented) {\n          cancelDelayedOpen();\n          setOpen(true);\n        }\n      },\n      onBlur: (event: React.FocusEvent) => {\n        soleCandidate.props.onBlur?.(event);\n        cancelDelayedOpen();\n        setOpen(false);\n      },\n      onKeyDown: (event: React.KeyboardEvent) => {\n        soleCandidate.props.onKeyDown?.(event);\n        if (event.key === \"Escape\") {\n          cancelDelayedOpen();\n          setOpen(false);\n        }\n      },\n      className: cn(className, soleCandidate.props.className),\n      \"aria-describedby\": describedBy,\n    });\n  }\n\n  return (\n    <span\n      className={className}\n      tabIndex={0}\n      aria-describedby={mergeDescribedBy(tooltipId, undefined, open)}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n    >\n      {children}\n    </span>\n  );\n};\n\nexport const TooltipContent = ({\n  children,\n  className,\n  variant,\n  size,\n  width,\n}: TooltipContentProps) => {\n  const { open, position, tooltipId } = useTooltip();\n\n  if (!open) return null;\n\n  const positionStyles = {\n    top: \"bottom-full mb-2\",\n    bottom: \"top-full mt-2\",\n    left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n    right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n  };\n\n  return (\n    <div\n      id={tooltipId}\n      data-open={open}\n      role=\"tooltip\"\n      className={cn(\n        tooltipVariants({ variant, size, width }),\n        positionStyles[position],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"]}
+{"version":3,"sources":["../src/ui/tooltip/variants.ts","../src/ui/tooltip/tooltip-base.tsx"],"names":["cva","zuiTooltipBase","zuiTooltipVariants","zuiTooltipSizes","zuiTooltipWidths","createContext","useContext","useState","useId","useCallback","useRef","useEffect","jsx","Children","isValidElement","cloneElement","cn"],"mappings":"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","file":"chunk-JGPG2D2Y.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiTooltipBase,\n  zuiTooltipSizes,\n  zuiTooltipVariants,\n  zuiTooltipWidths,\n} from \"../../design-system/tooltip\";\n\nexport const tooltipVariants = cva(zuiTooltipBase, {\n  variants: {\n    variant: zuiTooltipVariants,\n    size: zuiTooltipSizes,\n    width: zuiTooltipWidths,\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n    width: \"xs\",\n  },\n});\n","\"use client\";\n\nimport {\n  Children,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type FocusEventHandler,\n  type ReactElement,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  TooltipProps,\n  TooltipContextType,\n  TooltipTriggerProps,\n  TooltipContentProps,\n} from \"./types\";\nimport { tooltipVariants } from \"./variants\";\n\nexport const TooltipContext = createContext<TooltipContextType | null>(null);\n\nexport const useTooltip = () => {\n  const context = useContext(TooltipContext);\n  if (!context) {\n    throw new Error(\"Tooltip components must be used within Tooltip\");\n  }\n  return context;\n};\n\nfunction mergeDescribedBy(\n  tooltipId: string,\n  existing: unknown,\n  open: boolean,\n): string | undefined {\n  if (!open) {\n    return typeof existing === \"string\" ? existing : undefined;\n  }\n  const baseIds =\n    typeof existing === \"string\" && existing.trim().length > 0\n      ? existing.split(/\\s+/).filter(Boolean)\n      : [];\n  const merged = [...new Set([...baseIds, tooltipId])];\n  return merged.join(\" \");\n}\n\nexport const Tooltip = ({\n  children,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  position = \"top\",\n  delay = 100,\n}: TooltipProps) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const tooltipId = `${useId()}-tooltip`;\n\n  const isControlled = controlledOpen !== undefined;\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value);\n      onOpenChange?.(value);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const cancelDelayedOpen = useCallback(() => {\n    if (showTimeoutRef.current !== null) {\n      clearTimeout(showTimeoutRef.current);\n      showTimeoutRef.current = null;\n    }\n  }, []);\n\n  const scheduleDelayedOpen = useCallback(() => {\n    cancelDelayedOpen();\n    showTimeoutRef.current = setTimeout(() => {\n      showTimeoutRef.current = null;\n      setOpen(true);\n    }, delay);\n  }, [cancelDelayedOpen, delay, setOpen]);\n\n  useEffect(() => () => cancelDelayedOpen(), [cancelDelayedOpen]);\n\n  return (\n    <TooltipContext.Provider\n      value={{\n        open,\n        setOpen,\n        position,\n        delay,\n        scheduleDelayedOpen,\n        cancelDelayedOpen,\n        tooltipId,\n      }}\n    >\n      <div className=\"relative inline-block\">{children}</div>\n    </TooltipContext.Provider>\n  );\n};\n\nexport const TooltipTrigger = ({\n  children,\n  className,\n}: TooltipTriggerProps) => {\n  const { setOpen, scheduleDelayedOpen, cancelDelayedOpen, open, tooltipId } =\n    useTooltip();\n\n  const onMouseEnter: MouseEventHandler = () => scheduleDelayedOpen();\n  const onMouseLeave: MouseEventHandler = () => {\n    cancelDelayedOpen();\n    setOpen(false);\n  };\n  const onFocus: FocusEventHandler = () => {\n    cancelDelayedOpen();\n    setOpen(true);\n  };\n  const onBlur: FocusEventHandler = () => {\n    cancelDelayedOpen();\n    setOpen(false);\n  };\n  const onKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key === \"Escape\") {\n      cancelDelayedOpen();\n      setOpen(false);\n    }\n  };\n\n  const childList = Children.toArray(children).filter(\n    (node) => node !== null && node !== undefined && typeof node !== \"boolean\",\n  );\n\n  const soleCandidate =\n    childList.length === 1 && isValidElement(childList[0])\n      ? (childList[0] as ReactElement<{\n          className?: string;\n          \"aria-describedby\"?: string;\n          onMouseEnter?: MouseEventHandler;\n          onMouseLeave?: MouseEventHandler;\n          onFocus?: FocusEventHandler;\n          onBlur?: FocusEventHandler;\n          onKeyDown?: KeyboardEventHandler;\n        }>)\n      : undefined;\n\n  if (soleCandidate) {\n    const describedBy = mergeDescribedBy(\n      tooltipId,\n      soleCandidate.props[\"aria-describedby\"],\n      open,\n    );\n    return cloneElement(soleCandidate, {\n      onMouseEnter: (event: React.MouseEvent) => {\n        soleCandidate.props.onMouseEnter?.(event);\n        if (!event.defaultPrevented) {\n          scheduleDelayedOpen();\n        }\n      },\n      onMouseLeave: (event: React.MouseEvent) => {\n        soleCandidate.props.onMouseLeave?.(event);\n        cancelDelayedOpen();\n        setOpen(false);\n      },\n      onFocus: (event: React.FocusEvent) => {\n        soleCandidate.props.onFocus?.(event);\n        if (!event.defaultPrevented) {\n          cancelDelayedOpen();\n          setOpen(true);\n        }\n      },\n      onBlur: (event: React.FocusEvent) => {\n        soleCandidate.props.onBlur?.(event);\n        cancelDelayedOpen();\n        setOpen(false);\n      },\n      onKeyDown: (event: React.KeyboardEvent) => {\n        soleCandidate.props.onKeyDown?.(event);\n        if (event.key === \"Escape\") {\n          cancelDelayedOpen();\n          setOpen(false);\n        }\n      },\n      className: cn(className, soleCandidate.props.className),\n      \"aria-describedby\": describedBy,\n    });\n  }\n\n  return (\n    <span\n      className={className}\n      tabIndex={0}\n      aria-describedby={mergeDescribedBy(tooltipId, undefined, open)}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onKeyDown={onKeyDown}\n    >\n      {children}\n    </span>\n  );\n};\n\nexport const TooltipContent = ({\n  children,\n  className,\n  variant,\n  size,\n  width,\n}: TooltipContentProps) => {\n  const { open, position, tooltipId } = useTooltip();\n\n  if (!open) return null;\n\n  const positionStyles = {\n    top: \"bottom-full mb-2\",\n    bottom: \"top-full mt-2\",\n    left: \"right-full top-1/2 -translate-y-1/2 mr-2\",\n    right: \"left-full top-1/2 -translate-y-1/2 ml-2\",\n  };\n\n  return (\n    <div\n      id={tooltipId}\n      data-open={open}\n      role=\"tooltip\"\n      className={cn(\n        tooltipVariants({ variant, size, width }),\n        positionStyles[position],\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"]}

package/dist/chunk-JOLSS7UY.mjs

@@ -0,0 +1,61 @@
+// src/design-system/avatar.ts
+var zuiAvatarBase = "relative flex shrink-0 overflow-hidden rounded-full border border-[color:var(--zui-avatar-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-avatar-border-dark,var(--zui-border-dark,#ffffff1a))] text-[color:var(--zui-avatar-fg,var(--zui-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-fg-dark,var(--zui-fg-dark,oklch(92.9%_0.013_255.508)))]";
+var zuiAvatarAppearances = {
+  default: "border-[color:var(--zui-avatar-default-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-avatar-default-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-avatar-default-bg,var(--zui-brand,#0000001a))] dark:bg-[var(--zui-avatar-default-bg-dark,var(--zui-brand-dark,#ffffff1a))] text-[color:var(--zui-avatar-default-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-default-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]",
+  muted: "border-[color:var(--zui-avatar-muted-border,var(--zui-border,#00000066))] bg-[var(--zui-avatar-muted-bg,var(--zui-surface-soft,oklch(98.4%_0.003_247.858)))] dark:border-[color:var(--zui-avatar-muted-border-dark,var(--zui-border-dark,#ffffff1a))] dark:bg-[var(--zui-avatar-muted-bg-dark,var(--zui-surface-soft-dark,oklch(12.9%_0.042_264.695_/_0.4)))] text-[color:var(--zui-avatar-muted-fg,var(--zui-fg-muted,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-muted-fg-dark,var(--zui-fg-muted-dark,oklch(92.9%_0.013_255.508)))]",
+  blue: "border-[color:var(--zui-avatar-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[color:var(--zui-avatar-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))] bg-[var(--zui-avatar-blue-bg,color-mix(in oklch, var(--zui-color-blue,#2563eb) 10%, transparent))] dark:bg-[var(--zui-avatar-blue-bg-dark,color-mix(in oklch, var(--zui-color-blue-dark,#3b82f6) 18%, transparent))] text-[color:var(--zui-avatar-blue-fg,var(--zui-color-blue,#0f172a))] dark:text-[color:var(--zui-avatar-blue-fg-dark,var(--zui-color-blue-dark,#f8fafc))]",
+  cyan: "border-[color:var(--zui-avatar-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[color:var(--zui-avatar-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))] bg-[var(--zui-avatar-cyan-bg,color-mix(in oklch, var(--zui-color-cyan,#0891b2) 10%, transparent))] dark:bg-[var(--zui-avatar-cyan-bg-dark,color-mix(in oklch, var(--zui-color-cyan-dark,#22d3ee) 18%, transparent))] text-[color:var(--zui-avatar-cyan-fg,var(--zui-color-cyan,#0f172a))] dark:text-[color:var(--zui-avatar-cyan-fg-dark,var(--zui-color-cyan-dark,#f8fafc))]",
+  green: "border-[color:var(--zui-avatar-green-border,var(--zui-color-green,#16a34a))] dark:border-[color:var(--zui-avatar-green-border-dark,var(--zui-color-green-dark,#22c55e))] bg-[var(--zui-avatar-green-bg,color-mix(in oklch, var(--zui-color-green,#16a34a) 10%, transparent))] dark:bg-[var(--zui-avatar-green-bg-dark,color-mix(in oklch, var(--zui-color-green-dark,#22c55e) 18%, transparent))] text-[color:var(--zui-avatar-green-fg,var(--zui-color-green,#0f172a))] dark:text-[color:var(--zui-avatar-green-fg-dark,var(--zui-color-green-dark,#f8fafc))]",
+  lime: "border-[color:var(--zui-avatar-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[color:var(--zui-avatar-lime-border-dark,var(--zui-color-lime-dark,#a3e635))] bg-[var(--zui-avatar-lime-bg,color-mix(in oklch, var(--zui-color-lime,#65a30d) 10%, transparent))] dark:bg-[var(--zui-avatar-lime-bg-dark,color-mix(in oklch, var(--zui-color-lime-dark,#a3e635) 18%, transparent))] text-[color:var(--zui-avatar-lime-fg,var(--zui-color-lime,#0f172a))] dark:text-[color:var(--zui-avatar-lime-fg-dark,var(--zui-color-lime-dark,#f8fafc))]",
+  mint: "border-[color:var(--zui-avatar-mint-border,var(--zui-color-mint,#10b981))] dark:border-[color:var(--zui-avatar-mint-border-dark,var(--zui-color-mint-dark,#6ee7b7))] bg-[var(--zui-avatar-mint-bg,color-mix(in oklch, var(--zui-color-mint,#10b981) 10%, transparent))] dark:bg-[var(--zui-avatar-mint-bg-dark,color-mix(in oklch, var(--zui-color-mint-dark,#6ee7b7) 18%, transparent))] text-[color:var(--zui-avatar-mint-fg,var(--zui-color-mint,#0f172a))] dark:text-[color:var(--zui-avatar-mint-fg-dark,var(--zui-color-mint-dark,#f8fafc))]",
+  ocean: "border-[color:var(--zui-avatar-ocean-border,var(--zui-color-ocean,#0284c7))] dark:border-[color:var(--zui-avatar-ocean-border-dark,var(--zui-color-ocean-dark,#38bdf8))] bg-[var(--zui-avatar-ocean-bg,color-mix(in oklch, var(--zui-color-ocean,#0284c7) 10%, transparent))] dark:bg-[var(--zui-avatar-ocean-bg-dark,color-mix(in oklch, var(--zui-color-ocean-dark,#38bdf8) 18%, transparent))] text-[color:var(--zui-avatar-ocean-fg,var(--zui-color-ocean,#0f172a))] dark:text-[color:var(--zui-avatar-ocean-fg-dark,var(--zui-color-ocean-dark,#f8fafc))]",
+  sapphire: "border-[color:var(--zui-avatar-sapphire-border,var(--zui-color-sapphire,#1d4ed8))] dark:border-[color:var(--zui-avatar-sapphire-border-dark,var(--zui-color-sapphire-dark,#60a5fa))] bg-[var(--zui-avatar-sapphire-bg,color-mix(in oklch, var(--zui-color-sapphire,#1d4ed8) 10%, transparent))] dark:bg-[var(--zui-avatar-sapphire-bg-dark,color-mix(in oklch, var(--zui-color-sapphire-dark,#60a5fa) 18%, transparent))] text-[color:var(--zui-avatar-sapphire-fg,var(--zui-color-sapphire,#0f172a))] dark:text-[color:var(--zui-avatar-sapphire-fg-dark,var(--zui-color-sapphire-dark,#f8fafc))]",
+  lavender: "border-[color:var(--zui-avatar-lavender-border,var(--zui-color-lavender,#8b5cf6))] dark:border-[color:var(--zui-avatar-lavender-border-dark,var(--zui-color-lavender-dark,#a78bfa))] bg-[var(--zui-avatar-lavender-bg,color-mix(in oklch, var(--zui-color-lavender,#8b5cf6) 10%, transparent))] dark:bg-[var(--zui-avatar-lavender-bg-dark,color-mix(in oklch, var(--zui-color-lavender-dark,#a78bfa) 18%, transparent))] text-[color:var(--zui-avatar-lavender-fg,var(--zui-color-lavender,#0f172a))] dark:text-[color:var(--zui-avatar-lavender-fg-dark,var(--zui-color-lavender-dark,#f8fafc))]",
+  ruby: "border-[color:var(--zui-avatar-ruby-border,var(--zui-color-ruby,#be123c))] dark:border-[color:var(--zui-avatar-ruby-border-dark,var(--zui-color-ruby-dark,#fb7185))] bg-[var(--zui-avatar-ruby-bg,color-mix(in oklch, var(--zui-color-ruby,#be123c) 10%, transparent))] dark:bg-[var(--zui-avatar-ruby-bg-dark,color-mix(in oklch, var(--zui-color-ruby-dark,#fb7185) 18%, transparent))] text-[color:var(--zui-avatar-ruby-fg,var(--zui-color-ruby,#0f172a))] dark:text-[color:var(--zui-avatar-ruby-fg-dark,var(--zui-color-ruby-dark,#f8fafc))]",
+  red: "border-[color:var(--zui-avatar-red-border,var(--zui-color-red,#dc2626))] dark:border-[color:var(--zui-avatar-red-border-dark,var(--zui-color-red-dark,#ef4444))] bg-[var(--zui-avatar-red-bg,color-mix(in oklch, var(--zui-color-red,#dc2626) 10%, transparent))] dark:bg-[var(--zui-avatar-red-bg-dark,color-mix(in oklch, var(--zui-color-red-dark,#ef4444) 18%, transparent))] text-[color:var(--zui-avatar-red-fg,var(--zui-color-red,#0f172a))] dark:text-[color:var(--zui-avatar-red-fg-dark,var(--zui-color-red-dark,#f8fafc))]",
+  slate: "border-[color:var(--zui-avatar-slate-border,var(--zui-color-slate,#475569))] dark:border-[color:var(--zui-avatar-slate-border-dark,var(--zui-color-slate-dark,#64748b))] bg-[var(--zui-avatar-slate-bg,color-mix(in oklch, var(--zui-color-slate,#475569) 10%, transparent))] dark:bg-[var(--zui-avatar-slate-bg-dark,color-mix(in oklch, var(--zui-color-slate-dark,#64748b) 18%, transparent))] text-[color:var(--zui-avatar-slate-fg,var(--zui-color-slate,#0f172a))] dark:text-[color:var(--zui-avatar-slate-fg-dark,var(--zui-color-slate-dark,#f8fafc))]",
+  zinc: "border-[color:var(--zui-avatar-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[color:var(--zui-avatar-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))] bg-[var(--zui-avatar-zinc-bg,color-mix(in oklch, var(--zui-color-zinc,#52525b) 10%, transparent))] dark:bg-[var(--zui-avatar-zinc-bg-dark,color-mix(in oklch, var(--zui-color-zinc-dark,#71717a) 18%, transparent))] text-[color:var(--zui-avatar-zinc-fg,var(--zui-color-zinc,#0f172a))] dark:text-[color:var(--zui-avatar-zinc-fg-dark,var(--zui-color-zinc-dark,#f8fafc))]",
+  stone: "border-[color:var(--zui-avatar-stone-border,var(--zui-color-stone,#57534e))] dark:border-[color:var(--zui-avatar-stone-border-dark,var(--zui-color-stone-dark,#78716c))] bg-[var(--zui-avatar-stone-bg,color-mix(in oklch, var(--zui-color-stone,#57534e) 10%, transparent))] dark:bg-[var(--zui-avatar-stone-bg-dark,color-mix(in oklch, var(--zui-color-stone-dark,#78716c) 18%, transparent))] text-[color:var(--zui-avatar-stone-fg,var(--zui-color-stone,#0f172a))] dark:text-[color:var(--zui-avatar-stone-fg-dark,var(--zui-color-stone-dark,#f8fafc))]",
+  royal: "border-[color:var(--zui-avatar-royal-border,var(--zui-color-royal,#4338ca))] dark:border-[color:var(--zui-avatar-royal-border-dark,var(--zui-color-royal-dark,#818cf8))] bg-[var(--zui-avatar-royal-bg,color-mix(in oklch, var(--zui-color-royal,#4338ca) 10%, transparent))] dark:bg-[var(--zui-avatar-royal-bg-dark,color-mix(in oklch, var(--zui-color-royal-dark,#818cf8) 18%, transparent))] text-[color:var(--zui-avatar-royal-fg,var(--zui-color-royal,#0f172a))] dark:text-[color:var(--zui-avatar-royal-fg-dark,var(--zui-color-royal-dark,#f8fafc))]",
+  electric: "border-[color:var(--zui-avatar-electric-border,var(--zui-color-electric,#0ea5e9))] dark:border-[color:var(--zui-avatar-electric-border-dark,var(--zui-color-electric-dark,#38bdf8))] bg-[var(--zui-avatar-electric-bg,color-mix(in oklch, var(--zui-color-electric,#0ea5e9) 10%, transparent))] dark:bg-[var(--zui-avatar-electric-bg-dark,color-mix(in oklch, var(--zui-color-electric-dark,#38bdf8) 18%, transparent))] text-[color:var(--zui-avatar-electric-fg,var(--zui-color-electric,#0f172a))] dark:text-[color:var(--zui-avatar-electric-fg-dark,var(--zui-color-electric-dark,#f8fafc))]",
+  forest: "border-[color:var(--zui-avatar-forest-border,var(--zui-color-forest,#166534))] dark:border-[color:var(--zui-avatar-forest-border-dark,var(--zui-color-forest-dark,#4ade80))] bg-[var(--zui-avatar-forest-bg,color-mix(in oklch, var(--zui-color-forest,#166534) 10%, transparent))] dark:bg-[var(--zui-avatar-forest-bg-dark,color-mix(in oklch, var(--zui-color-forest-dark,#4ade80) 18%, transparent))] text-[color:var(--zui-avatar-forest-fg,var(--zui-color-forest,#0f172a))] dark:text-[color:var(--zui-avatar-forest-fg-dark,var(--zui-color-forest-dark,#f8fafc))]",
+  sunset: "border-[color:var(--zui-avatar-sunset-border,var(--zui-color-sunset,#ea580c))] dark:border-[color:var(--zui-avatar-sunset-border-dark,var(--zui-color-sunset-dark,#fb923c))] bg-[var(--zui-avatar-sunset-bg,color-mix(in oklch, var(--zui-color-sunset,#ea580c) 10%, transparent))] dark:bg-[var(--zui-avatar-sunset-bg-dark,color-mix(in oklch, var(--zui-color-sunset-dark,#fb923c) 18%, transparent))] text-[color:var(--zui-avatar-sunset-fg,var(--zui-color-sunset,#0f172a))] dark:text-[color:var(--zui-avatar-sunset-fg-dark,var(--zui-color-sunset-dark,#f8fafc))]",
+  magenta: "border-[color:var(--zui-avatar-magenta-border,var(--zui-color-magenta,#c026d3))] dark:border-[color:var(--zui-avatar-magenta-border-dark,var(--zui-color-magenta-dark,#e879f9))] bg-[var(--zui-avatar-magenta-bg,color-mix(in oklch, var(--zui-color-magenta,#c026d3) 10%, transparent))] dark:bg-[var(--zui-avatar-magenta-bg-dark,color-mix(in oklch, var(--zui-color-magenta-dark,#e879f9) 18%, transparent))] text-[color:var(--zui-avatar-magenta-fg,var(--zui-color-magenta,#0f172a))] dark:text-[color:var(--zui-avatar-magenta-fg-dark,var(--zui-color-magenta-dark,#f8fafc))]",
+  crimson: "border-[color:var(--zui-avatar-crimson-border,var(--zui-color-crimson,#b91c1c))] dark:border-[color:var(--zui-avatar-crimson-border-dark,var(--zui-color-crimson-dark,#f87171))] bg-[var(--zui-avatar-crimson-bg,color-mix(in oklch, var(--zui-color-crimson,#b91c1c) 10%, transparent))] dark:bg-[var(--zui-avatar-crimson-bg-dark,color-mix(in oklch, var(--zui-color-crimson-dark,#f87171) 18%, transparent))] text-[color:var(--zui-avatar-crimson-fg,var(--zui-color-crimson,#0f172a))] dark:text-[color:var(--zui-avatar-crimson-fg-dark,var(--zui-color-crimson-dark,#f8fafc))]",
+  aqua: "border-[color:var(--zui-avatar-aqua-border,var(--zui-color-aqua,#0f766e))] dark:border-[color:var(--zui-avatar-aqua-border-dark,var(--zui-color-aqua-dark,#2dd4bf))] bg-[var(--zui-avatar-aqua-bg,color-mix(in oklch, var(--zui-color-aqua,#0f766e) 10%, transparent))] dark:bg-[var(--zui-avatar-aqua-bg-dark,color-mix(in oklch, var(--zui-color-aqua-dark,#2dd4bf) 18%, transparent))] text-[color:var(--zui-avatar-aqua-fg,var(--zui-color-aqua,#0f172a))] dark:text-[color:var(--zui-avatar-aqua-fg-dark,var(--zui-color-aqua-dark,#f8fafc))]",
+  plum: "border-[color:var(--zui-avatar-plum-border,var(--zui-color-plum,#7e22ce))] dark:border-[color:var(--zui-avatar-plum-border-dark,var(--zui-color-plum-dark,#c084fc))] bg-[var(--zui-avatar-plum-bg,color-mix(in oklch, var(--zui-color-plum,#7e22ce) 10%, transparent))] dark:bg-[var(--zui-avatar-plum-bg-dark,color-mix(in oklch, var(--zui-color-plum-dark,#c084fc) 18%, transparent))] text-[color:var(--zui-avatar-plum-fg,var(--zui-color-plum,#0f172a))] dark:text-[color:var(--zui-avatar-plum-fg-dark,var(--zui-color-plum-dark,#f8fafc))]",
+  sky: "border-[color:var(--zui-avatar-sky-border,var(--zui-color-sky,oklch(44.3%_0.11_240.79)))] dark:border-[color:var(--zui-avatar-sky-border-dark,var(--zui-color-sky-dark,oklch(58.8%_0.158_241.966)))] bg-[var(--zui-avatar-sky-bg,color-mix(in oklch, var(--zui-color-sky,oklch(95.1%_0.026_236.824)) 10%, transparent))] dark:bg-[var(--zui-avatar-sky-bg-dark,color-mix(in oklch, var(--zui-color-sky-dark,oklch(58.8%_0.158_241.966)) 18%, transparent))] text-[color:var(--zui-avatar-sky-fg,var(--zui-color-sky,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-sky-fg-dark,var(--zui-color-sky-dark,oklch(92.9%_0.013_255.508)))]",
+  rose: "border-[color:var(--zui-avatar-rose-border,var(--zui-color-rose,oklch(45.5%_0.188_13.697)))] dark:border-[color:var(--zui-avatar-rose-border-dark,var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)))] bg-[var(--zui-avatar-rose-bg,color-mix(in oklch, var(--zui-color-rose,oklch(94.1%_0.03_12.58)) 10%, transparent))] dark:bg-[var(--zui-avatar-rose-bg-dark,color-mix(in oklch, var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)) 18%, transparent))] text-[color:var(--zui-avatar-rose-fg,var(--zui-color-rose,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-rose-fg-dark,var(--zui-color-rose-dark,oklch(92.9%_0.013_255.508)))]",
+  purple: "border-[color:var(--zui-avatar-purple-border,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:border-[color:var(--zui-avatar-purple-border-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] bg-[var(--zui-avatar-purple-bg,color-mix(in oklch, var(--zui-color-purple,oklch(94.6%_0.033_307.174)) 10%, transparent))] dark:bg-[var(--zui-avatar-purple-bg-dark,color-mix(in oklch, var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)) 18%, transparent))] text-[color:var(--zui-avatar-purple-fg,var(--zui-color-purple,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-purple-fg-dark,var(--zui-color-purple-dark,oklch(92.9%_0.013_255.508)))]",
+  pink: "border-[color:var(--zui-avatar-pink-border,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:border-[color:var(--zui-avatar-pink-border-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] bg-[var(--zui-avatar-pink-bg,color-mix(in oklch, var(--zui-color-pink,oklch(94.8%_0.028_342.258)) 10%, transparent))] dark:bg-[var(--zui-avatar-pink-bg-dark,color-mix(in oklch, var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)) 18%, transparent))] text-[color:var(--zui-avatar-pink-fg,var(--zui-color-pink,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-pink-fg-dark,var(--zui-color-pink-dark,oklch(92.9%_0.013_255.508)))]",
+  orange: "border-[color:var(--zui-avatar-orange-border,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:border-[color:var(--zui-avatar-orange-border-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] bg-[var(--zui-avatar-orange-bg,color-mix(in oklch, var(--zui-color-orange,oklch(95.4%_0.038_75.164)) 10%, transparent))] dark:bg-[var(--zui-avatar-orange-bg-dark,color-mix(in oklch, var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)) 18%, transparent))] text-[color:var(--zui-avatar-orange-fg,var(--zui-color-orange,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-orange-fg-dark,var(--zui-color-orange-dark,oklch(92.9%_0.013_255.508)))]",
+  yellow: "border-[color:var(--zui-avatar-yellow-border,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:border-[color:var(--zui-avatar-yellow-border-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] bg-[var(--zui-avatar-yellow-bg,color-mix(in oklch, var(--zui-color-yellow,oklch(97.3%_0.071_103.193)) 10%, transparent))] dark:bg-[var(--zui-avatar-yellow-bg-dark,color-mix(in oklch, var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)) 18%, transparent))] text-[color:var(--zui-avatar-yellow-fg,var(--zui-color-yellow,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-yellow-fg-dark,var(--zui-color-yellow-dark,oklch(92.9%_0.013_255.508)))]",
+  teal: "border-[color:var(--zui-avatar-teal-border,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:border-[color:var(--zui-avatar-teal-border-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] bg-[var(--zui-avatar-teal-bg,color-mix(in oklch, var(--zui-color-teal,oklch(95.3%_0.051_180.801)) 10%, transparent))] dark:bg-[var(--zui-avatar-teal-bg-dark,color-mix(in oklch, var(--zui-color-teal-dark,oklch(60%_0.118_184.704)) 18%, transparent))] text-[color:var(--zui-avatar-teal-fg,var(--zui-color-teal,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-teal-fg-dark,var(--zui-color-teal-dark,oklch(92.9%_0.013_255.508)))]",
+  indigo: "border-[color:var(--zui-avatar-indigo-border,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:border-[color:var(--zui-avatar-indigo-border-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] bg-[var(--zui-avatar-indigo-bg,color-mix(in oklch, var(--zui-color-indigo,oklch(93%_0.034_272.788)) 10%, transparent))] dark:bg-[var(--zui-avatar-indigo-bg-dark,color-mix(in oklch, var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)) 18%, transparent))] text-[color:var(--zui-avatar-indigo-fg,var(--zui-color-indigo,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-indigo-fg-dark,var(--zui-color-indigo-dark,oklch(92.9%_0.013_255.508)))]",
+  emerald: "border-[color:var(--zui-avatar-emerald-border,var(--zui-color-emerald,oklch(43.2%_0.095_166.913)))] dark:border-[color:var(--zui-avatar-emerald-border-dark,var(--zui-color-emerald-dark,oklch(59.6%_0.145_163.225)))] bg-[var(--zui-avatar-emerald-bg,color-mix(in oklch, var(--zui-color-emerald,oklch(95%_0.052_163.051)) 10%, transparent))] dark:bg-[var(--zui-avatar-emerald-bg-dark,color-mix(in oklch, var(--zui-color-emerald-dark,oklch(59.6%_0.145_163.225)) 18%, transparent))] text-[color:var(--zui-avatar-emerald-fg,var(--zui-color-emerald,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-emerald-fg-dark,var(--zui-color-emerald-dark,oklch(92.9%_0.013_255.508)))]",
+  gray: "border-[color:var(--zui-avatar-gray-border,var(--zui-color-gray,oklch(27.8%_0.033_256.848)))] dark:border-[color:var(--zui-avatar-gray-border-dark,var(--zui-color-gray-dark,oklch(44.6%_0.03_256.802)))] bg-[var(--zui-avatar-gray-bg,color-mix(in oklch, var(--zui-color-gray,oklch(96.7%_0.003_264.542)) 10%, transparent))] dark:bg-[var(--zui-avatar-gray-bg-dark,color-mix(in oklch, var(--zui-color-gray-dark,oklch(44.6%_0.03_256.802)) 18%, transparent))] text-[color:var(--zui-avatar-gray-fg,var(--zui-color-gray,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gray-fg-dark,var(--zui-color-gray-dark,oklch(92.9%_0.013_255.508)))]",
+  amber: "border-[color:var(--zui-avatar-amber-border,var(--zui-color-amber,oklch(47.3%_0.137_46.201)))] dark:border-[color:var(--zui-avatar-amber-border-dark,var(--zui-color-amber-dark,oklch(66.6%_0.179_58.318)))] bg-[var(--zui-avatar-amber-bg,color-mix(in oklch, var(--zui-color-amber,oklch(96.2%_0.059_95.617)) 10%, transparent))] dark:bg-[var(--zui-avatar-amber-bg-dark,color-mix(in oklch, var(--zui-color-amber-dark,oklch(66.6%_0.179_58.318)) 18%, transparent))] text-[color:var(--zui-avatar-amber-fg,var(--zui-color-amber,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-amber-fg-dark,var(--zui-color-amber-dark,oklch(92.9%_0.013_255.508)))]",
+  violet: "border-[color:var(--zui-avatar-violet-border,var(--zui-color-violet,oklch(43.2%_0.232_292.759)))] dark:border-[color:var(--zui-avatar-violet-border-dark,var(--zui-color-violet-dark,oklch(54.1%_0.281_293.009)))] bg-[var(--zui-avatar-violet-bg,color-mix(in oklch, var(--zui-color-violet,oklch(94.3%_0.029_294.588)) 10%, transparent))] dark:bg-[var(--zui-avatar-violet-bg-dark,color-mix(in oklch, var(--zui-color-violet-dark,oklch(54.1%_0.281_293.009)) 18%, transparent))] text-[color:var(--zui-avatar-violet-fg,var(--zui-color-violet,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-violet-fg-dark,var(--zui-color-violet-dark,oklch(92.9%_0.013_255.508)))]",
+  "gradient-blue": "bg-linear-to-r from-[var(--zui-avatar-gradient-blue-from,var(--zui-color-blue,oklch(62.3%_0.214_259.815)))] dark:from-[var(--zui-avatar-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] to-[var(--zui-avatar-gradient-blue-to,var(--zui-color-purple,oklch(62.7%_0.265_303.9)))] dark:to-[var(--zui-avatar-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-blue-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-blue-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]",
+  "gradient-green": "bg-linear-to-r from-[var(--zui-avatar-gradient-green-from,var(--zui-color-green,oklch(72.3%_0.219_149.579)))] dark:from-[var(--zui-avatar-gradient-green-from-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))] to-[var(--zui-avatar-gradient-green-to,var(--zui-color-lime,oklch(76.8%_0.233_130.85)))] dark:to-[var(--zui-avatar-gradient-green-to-dark,var(--zui-color-lime-dark,oklch(64.8%_0.2_131.684)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-green-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-green-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]",
+  "gradient-red": "bg-linear-to-r from-[var(--zui-avatar-gradient-red-from,var(--zui-color-red,oklch(63.7%_0.237_25.331)))] dark:from-[var(--zui-avatar-gradient-red-from-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] to-[var(--zui-avatar-gradient-red-to,var(--zui-color-pink,oklch(65.6%_0.241_354.308)))] dark:to-[var(--zui-avatar-gradient-red-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-red-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-red-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]",
+  "gradient-yellow": "bg-linear-to-r from-[var(--zui-avatar-gradient-yellow-from,var(--zui-color-yellow,oklch(79.5%_0.184_86.047)))] dark:from-[var(--zui-avatar-gradient-yellow-from-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] to-[var(--zui-avatar-gradient-yellow-to,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:to-[var(--zui-avatar-gradient-yellow-to-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-yellow-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-yellow-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]",
+  "gradient-purple": "bg-linear-to-r from-[var(--zui-avatar-gradient-purple-from,var(--zui-color-purple,oklch(62.7%_0.265_303.9)))] dark:from-[var(--zui-avatar-gradient-purple-from-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] to-[var(--zui-avatar-gradient-purple-to,var(--zui-color-pink,oklch(65.6%_0.241_354.308)))] dark:to-[var(--zui-avatar-gradient-purple-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-purple-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-purple-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]",
+  "gradient-teal": "bg-linear-to-r from-[var(--zui-avatar-gradient-teal-from,var(--zui-color-teal,oklch(70.4%_0.14_182.503)))] dark:from-[var(--zui-avatar-gradient-teal-from-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] to-[var(--zui-avatar-gradient-teal-to,var(--zui-color-cyan,oklch(71.5%_0.143_215.221)))] dark:to-[var(--zui-avatar-gradient-teal-to-dark,var(--zui-color-cyan-dark,oklch(60.9%_0.126_221.723)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-teal-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-teal-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]",
+  "gradient-indigo": "bg-linear-to-r from-[var(--zui-avatar-gradient-indigo-from,var(--zui-color-indigo,oklch(58.5%_0.233_277.117)))] dark:from-[var(--zui-avatar-gradient-indigo-from-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] to-[var(--zui-avatar-gradient-indigo-to,var(--zui-color-purple,oklch(62.7%_0.265_303.9)))] dark:to-[var(--zui-avatar-gradient-indigo-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-indigo-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-indigo-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]",
+  "gradient-pink": "bg-linear-to-r from-[var(--zui-avatar-gradient-pink-from,var(--zui-color-pink,oklch(65.6%_0.241_354.308)))] dark:from-[var(--zui-avatar-gradient-pink-from-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] to-[var(--zui-avatar-gradient-pink-to,var(--zui-color-rose,oklch(64.5%_0.246_16.439)))] dark:to-[var(--zui-avatar-gradient-pink-to-dark,var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-pink-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-pink-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]",
+  "gradient-orange": "bg-linear-to-r from-[var(--zui-avatar-gradient-orange-from,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:from-[var(--zui-avatar-gradient-orange-from-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] to-[var(--zui-avatar-gradient-orange-to,var(--zui-color-red,oklch(63.7%_0.237_25.331)))] dark:to-[var(--zui-avatar-gradient-orange-to-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-orange-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-orange-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]"
+};
+var zuiAvatarSizes = {
+  sm: "size-8 text-xs",
+  md: "size-10 text-sm",
+  lg: "size-12 text-base",
+  xl: "size-16 text-lg"
+};
+var zuiAvatarImageBase = "aspect-square size-full object-cover";
+var zuiAvatarFallbackBase = "flex size-full items-center justify-center bg-[var(--zui-avatar-fallback-bg,var(--zui-surface-soft,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-avatar-fallback-bg-dark,var(--zui-surface-soft-dark,oklch(27.9%_0.041_260.031)))] font-medium text-[color:var(--zui-avatar-fallback-fg,var(--zui-fg,oklch(27.9%_0.041_260.031)))] dark:text-[color:var(--zui-avatar-fallback-fg-dark,var(--zui-fg-dark,oklch(96.8%_0.007_247.896)))]";
+var zuiAvatarGroupBase = "flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-[var(--zui-avatar-group-ring,var(--zui-focus-ring,#ffffff))] dark:[&_[data-slot=avatar]]:ring-[var(--zui-avatar-group-ring-dark,var(--zui-focus-ring-dark,oklch(12.9%_0.042_264.695)))] [&_[data-slot=avatar]]:first:ml-0";
+
+export { zuiAvatarAppearances, zuiAvatarBase, zuiAvatarFallbackBase, zuiAvatarGroupBase, zuiAvatarImageBase, zuiAvatarSizes };
+//# sourceMappingURL=chunk-JOLSS7UY.mjs.map
+//# sourceMappingURL=chunk-JOLSS7UY.mjs.map

package/dist/chunk-JOLSS7UY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/design-system/avatar.ts"],"names":[],"mappings":";AAAO,IAAM,aAAA,GACX;AAEK,IAAM,oBAAA,GAAuB;AAAA,EAClC,OAAA,EACE,kfAAA;AAAA,EACF,KAAA,EACE,4hBAAA;AAAA,EACF,IAAA,EAAM,ohBAAA;AAAA,EACN,IAAA,EAAM,ohBAAA;AAAA,EACN,KAAA,EACE,giBAAA;AAAA,EACF,IAAA,EAAM,ohBAAA;AAAA,EACN,IAAA,EAAM,ohBAAA;AAAA,EACN,KAAA,EACE,giBAAA;AAAA,EACF,QAAA,EACE,okBAAA;AAAA,EACF,QAAA,EACE,okBAAA;AAAA,EACF,IAAA,EAAM,ohBAAA;AAAA,EACN,GAAA,EAAK,wgBAAA;AAAA,EACL,KAAA,EACE,giBAAA;AAAA,EACF,IAAA,EAAM,ohBAAA;AAAA,EACN,KAAA,EACE,giBAAA;AAAA,EACF,KAAA,EACE,giBAAA;AAAA,EACF,QAAA,EACE,okBAAA;AAAA,EACF,MAAA,EACE,4iBAAA;AAAA,EACF,MAAA,EACE,4iBAAA;AAAA,EACF,OAAA,EACE,wjBAAA;AAAA,EACF,OAAA,EACE,wjBAAA;AAAA,EACF,IAAA,EAAM,ohBAAA;AAAA,EACN,IAAA,EAAM,ohBAAA;AAAA,EACN,GAAA,EAAK,wnBAAA;AAAA,EACL,IAAA,EAAM,goBAAA;AAAA,EACN,MAAA,EACE,8pBAAA;AAAA,EACF,IAAA,EAAM,goBAAA;AAAA,EACN,MAAA,EACE,wpBAAA;AAAA,EACF,MAAA,EACE,2pBAAA;AAAA,EACF,IAAA,EAAM,koBAAA;AAAA,EACN,MAAA,EACE,4pBAAA;AAAA,EACF,OAAA,EACE,wqBAAA;AAAA,EACF,IAAA,EAAM,ooBAAA;AAAA,EACN,KAAA,EACE,8oBAAA;AAAA,EACF,MAAA,EACE,8pBAAA;AAAA,EACF,eAAA,EACE,0nBAAA;AAAA,EACF,gBAAA,EACE,6nBAAA;AAAA,EACF,cAAA,EACE,4mBAAA;AAAA,EACF,iBAAA,EACE,woBAAA;AAAA,EACF,iBAAA,EACE,ooBAAA;AAAA,EACF,eAAA,EACE,qnBAAA;AAAA,EACF,iBAAA,EACE,0oBAAA;AAAA,EACF,eAAA,EACE,onBAAA;AAAA,EACF,iBAAA,EACE;AACJ;AAEO,IAAM,cAAA,GAAiB;AAAA,EAC5B,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,mBAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,kBAAA,GAAqB;AAE3B,IAAM,qBAAA,GACX;AAEK,IAAM,kBAAA,GACX","file":"chunk-JOLSS7UY.mjs","sourcesContent":["export const zuiAvatarBase =\n  \"relative flex shrink-0 overflow-hidden rounded-full border border-[color:var(--zui-avatar-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-avatar-border-dark,var(--zui-border-dark,#ffffff1a))] text-[color:var(--zui-avatar-fg,var(--zui-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-fg-dark,var(--zui-fg-dark,oklch(92.9%_0.013_255.508)))]\";\n\nexport const zuiAvatarAppearances = {\n  default:\n    \"border-[color:var(--zui-avatar-default-border,var(--zui-border,#0000001a))] dark:border-[color:var(--zui-avatar-default-border-dark,var(--zui-border-dark,#ffffff1a))] bg-[var(--zui-avatar-default-bg,var(--zui-brand,#0000001a))] dark:bg-[var(--zui-avatar-default-bg-dark,var(--zui-brand-dark,#ffffff1a))] text-[color:var(--zui-avatar-default-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-default-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]\",\n  muted:\n    \"border-[color:var(--zui-avatar-muted-border,var(--zui-border,#00000066))] bg-[var(--zui-avatar-muted-bg,var(--zui-surface-soft,oklch(98.4%_0.003_247.858)))] dark:border-[color:var(--zui-avatar-muted-border-dark,var(--zui-border-dark,#ffffff1a))] dark:bg-[var(--zui-avatar-muted-bg-dark,var(--zui-surface-soft-dark,oklch(12.9%_0.042_264.695_/_0.4)))] text-[color:var(--zui-avatar-muted-fg,var(--zui-fg-muted,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-muted-fg-dark,var(--zui-fg-muted-dark,oklch(92.9%_0.013_255.508)))]\",\n  blue: \"border-[color:var(--zui-avatar-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[color:var(--zui-avatar-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))] bg-[var(--zui-avatar-blue-bg,color-mix(in oklch, var(--zui-color-blue,#2563eb) 10%, transparent))] dark:bg-[var(--zui-avatar-blue-bg-dark,color-mix(in oklch, var(--zui-color-blue-dark,#3b82f6) 18%, transparent))] text-[color:var(--zui-avatar-blue-fg,var(--zui-color-blue,#0f172a))] dark:text-[color:var(--zui-avatar-blue-fg-dark,var(--zui-color-blue-dark,#f8fafc))]\",\n  cyan: \"border-[color:var(--zui-avatar-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[color:var(--zui-avatar-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))] bg-[var(--zui-avatar-cyan-bg,color-mix(in oklch, var(--zui-color-cyan,#0891b2) 10%, transparent))] dark:bg-[var(--zui-avatar-cyan-bg-dark,color-mix(in oklch, var(--zui-color-cyan-dark,#22d3ee) 18%, transparent))] text-[color:var(--zui-avatar-cyan-fg,var(--zui-color-cyan,#0f172a))] dark:text-[color:var(--zui-avatar-cyan-fg-dark,var(--zui-color-cyan-dark,#f8fafc))]\",\n  green:\n    \"border-[color:var(--zui-avatar-green-border,var(--zui-color-green,#16a34a))] dark:border-[color:var(--zui-avatar-green-border-dark,var(--zui-color-green-dark,#22c55e))] bg-[var(--zui-avatar-green-bg,color-mix(in oklch, var(--zui-color-green,#16a34a) 10%, transparent))] dark:bg-[var(--zui-avatar-green-bg-dark,color-mix(in oklch, var(--zui-color-green-dark,#22c55e) 18%, transparent))] text-[color:var(--zui-avatar-green-fg,var(--zui-color-green,#0f172a))] dark:text-[color:var(--zui-avatar-green-fg-dark,var(--zui-color-green-dark,#f8fafc))]\",\n  lime: \"border-[color:var(--zui-avatar-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[color:var(--zui-avatar-lime-border-dark,var(--zui-color-lime-dark,#a3e635))] bg-[var(--zui-avatar-lime-bg,color-mix(in oklch, var(--zui-color-lime,#65a30d) 10%, transparent))] dark:bg-[var(--zui-avatar-lime-bg-dark,color-mix(in oklch, var(--zui-color-lime-dark,#a3e635) 18%, transparent))] text-[color:var(--zui-avatar-lime-fg,var(--zui-color-lime,#0f172a))] dark:text-[color:var(--zui-avatar-lime-fg-dark,var(--zui-color-lime-dark,#f8fafc))]\",\n  mint: \"border-[color:var(--zui-avatar-mint-border,var(--zui-color-mint,#10b981))] dark:border-[color:var(--zui-avatar-mint-border-dark,var(--zui-color-mint-dark,#6ee7b7))] bg-[var(--zui-avatar-mint-bg,color-mix(in oklch, var(--zui-color-mint,#10b981) 10%, transparent))] dark:bg-[var(--zui-avatar-mint-bg-dark,color-mix(in oklch, var(--zui-color-mint-dark,#6ee7b7) 18%, transparent))] text-[color:var(--zui-avatar-mint-fg,var(--zui-color-mint,#0f172a))] dark:text-[color:var(--zui-avatar-mint-fg-dark,var(--zui-color-mint-dark,#f8fafc))]\",\n  ocean:\n    \"border-[color:var(--zui-avatar-ocean-border,var(--zui-color-ocean,#0284c7))] dark:border-[color:var(--zui-avatar-ocean-border-dark,var(--zui-color-ocean-dark,#38bdf8))] bg-[var(--zui-avatar-ocean-bg,color-mix(in oklch, var(--zui-color-ocean,#0284c7) 10%, transparent))] dark:bg-[var(--zui-avatar-ocean-bg-dark,color-mix(in oklch, var(--zui-color-ocean-dark,#38bdf8) 18%, transparent))] text-[color:var(--zui-avatar-ocean-fg,var(--zui-color-ocean,#0f172a))] dark:text-[color:var(--zui-avatar-ocean-fg-dark,var(--zui-color-ocean-dark,#f8fafc))]\",\n  sapphire:\n    \"border-[color:var(--zui-avatar-sapphire-border,var(--zui-color-sapphire,#1d4ed8))] dark:border-[color:var(--zui-avatar-sapphire-border-dark,var(--zui-color-sapphire-dark,#60a5fa))] bg-[var(--zui-avatar-sapphire-bg,color-mix(in oklch, var(--zui-color-sapphire,#1d4ed8) 10%, transparent))] dark:bg-[var(--zui-avatar-sapphire-bg-dark,color-mix(in oklch, var(--zui-color-sapphire-dark,#60a5fa) 18%, transparent))] text-[color:var(--zui-avatar-sapphire-fg,var(--zui-color-sapphire,#0f172a))] dark:text-[color:var(--zui-avatar-sapphire-fg-dark,var(--zui-color-sapphire-dark,#f8fafc))]\",\n  lavender:\n    \"border-[color:var(--zui-avatar-lavender-border,var(--zui-color-lavender,#8b5cf6))] dark:border-[color:var(--zui-avatar-lavender-border-dark,var(--zui-color-lavender-dark,#a78bfa))] bg-[var(--zui-avatar-lavender-bg,color-mix(in oklch, var(--zui-color-lavender,#8b5cf6) 10%, transparent))] dark:bg-[var(--zui-avatar-lavender-bg-dark,color-mix(in oklch, var(--zui-color-lavender-dark,#a78bfa) 18%, transparent))] text-[color:var(--zui-avatar-lavender-fg,var(--zui-color-lavender,#0f172a))] dark:text-[color:var(--zui-avatar-lavender-fg-dark,var(--zui-color-lavender-dark,#f8fafc))]\",\n  ruby: \"border-[color:var(--zui-avatar-ruby-border,var(--zui-color-ruby,#be123c))] dark:border-[color:var(--zui-avatar-ruby-border-dark,var(--zui-color-ruby-dark,#fb7185))] bg-[var(--zui-avatar-ruby-bg,color-mix(in oklch, var(--zui-color-ruby,#be123c) 10%, transparent))] dark:bg-[var(--zui-avatar-ruby-bg-dark,color-mix(in oklch, var(--zui-color-ruby-dark,#fb7185) 18%, transparent))] text-[color:var(--zui-avatar-ruby-fg,var(--zui-color-ruby,#0f172a))] dark:text-[color:var(--zui-avatar-ruby-fg-dark,var(--zui-color-ruby-dark,#f8fafc))]\",\n  red: \"border-[color:var(--zui-avatar-red-border,var(--zui-color-red,#dc2626))] dark:border-[color:var(--zui-avatar-red-border-dark,var(--zui-color-red-dark,#ef4444))] bg-[var(--zui-avatar-red-bg,color-mix(in oklch, var(--zui-color-red,#dc2626) 10%, transparent))] dark:bg-[var(--zui-avatar-red-bg-dark,color-mix(in oklch, var(--zui-color-red-dark,#ef4444) 18%, transparent))] text-[color:var(--zui-avatar-red-fg,var(--zui-color-red,#0f172a))] dark:text-[color:var(--zui-avatar-red-fg-dark,var(--zui-color-red-dark,#f8fafc))]\",\n  slate:\n    \"border-[color:var(--zui-avatar-slate-border,var(--zui-color-slate,#475569))] dark:border-[color:var(--zui-avatar-slate-border-dark,var(--zui-color-slate-dark,#64748b))] bg-[var(--zui-avatar-slate-bg,color-mix(in oklch, var(--zui-color-slate,#475569) 10%, transparent))] dark:bg-[var(--zui-avatar-slate-bg-dark,color-mix(in oklch, var(--zui-color-slate-dark,#64748b) 18%, transparent))] text-[color:var(--zui-avatar-slate-fg,var(--zui-color-slate,#0f172a))] dark:text-[color:var(--zui-avatar-slate-fg-dark,var(--zui-color-slate-dark,#f8fafc))]\",\n  zinc: \"border-[color:var(--zui-avatar-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[color:var(--zui-avatar-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))] bg-[var(--zui-avatar-zinc-bg,color-mix(in oklch, var(--zui-color-zinc,#52525b) 10%, transparent))] dark:bg-[var(--zui-avatar-zinc-bg-dark,color-mix(in oklch, var(--zui-color-zinc-dark,#71717a) 18%, transparent))] text-[color:var(--zui-avatar-zinc-fg,var(--zui-color-zinc,#0f172a))] dark:text-[color:var(--zui-avatar-zinc-fg-dark,var(--zui-color-zinc-dark,#f8fafc))]\",\n  stone:\n    \"border-[color:var(--zui-avatar-stone-border,var(--zui-color-stone,#57534e))] dark:border-[color:var(--zui-avatar-stone-border-dark,var(--zui-color-stone-dark,#78716c))] bg-[var(--zui-avatar-stone-bg,color-mix(in oklch, var(--zui-color-stone,#57534e) 10%, transparent))] dark:bg-[var(--zui-avatar-stone-bg-dark,color-mix(in oklch, var(--zui-color-stone-dark,#78716c) 18%, transparent))] text-[color:var(--zui-avatar-stone-fg,var(--zui-color-stone,#0f172a))] dark:text-[color:var(--zui-avatar-stone-fg-dark,var(--zui-color-stone-dark,#f8fafc))]\",\n  royal:\n    \"border-[color:var(--zui-avatar-royal-border,var(--zui-color-royal,#4338ca))] dark:border-[color:var(--zui-avatar-royal-border-dark,var(--zui-color-royal-dark,#818cf8))] bg-[var(--zui-avatar-royal-bg,color-mix(in oklch, var(--zui-color-royal,#4338ca) 10%, transparent))] dark:bg-[var(--zui-avatar-royal-bg-dark,color-mix(in oklch, var(--zui-color-royal-dark,#818cf8) 18%, transparent))] text-[color:var(--zui-avatar-royal-fg,var(--zui-color-royal,#0f172a))] dark:text-[color:var(--zui-avatar-royal-fg-dark,var(--zui-color-royal-dark,#f8fafc))]\",\n  electric:\n    \"border-[color:var(--zui-avatar-electric-border,var(--zui-color-electric,#0ea5e9))] dark:border-[color:var(--zui-avatar-electric-border-dark,var(--zui-color-electric-dark,#38bdf8))] bg-[var(--zui-avatar-electric-bg,color-mix(in oklch, var(--zui-color-electric,#0ea5e9) 10%, transparent))] dark:bg-[var(--zui-avatar-electric-bg-dark,color-mix(in oklch, var(--zui-color-electric-dark,#38bdf8) 18%, transparent))] text-[color:var(--zui-avatar-electric-fg,var(--zui-color-electric,#0f172a))] dark:text-[color:var(--zui-avatar-electric-fg-dark,var(--zui-color-electric-dark,#f8fafc))]\",\n  forest:\n    \"border-[color:var(--zui-avatar-forest-border,var(--zui-color-forest,#166534))] dark:border-[color:var(--zui-avatar-forest-border-dark,var(--zui-color-forest-dark,#4ade80))] bg-[var(--zui-avatar-forest-bg,color-mix(in oklch, var(--zui-color-forest,#166534) 10%, transparent))] dark:bg-[var(--zui-avatar-forest-bg-dark,color-mix(in oklch, var(--zui-color-forest-dark,#4ade80) 18%, transparent))] text-[color:var(--zui-avatar-forest-fg,var(--zui-color-forest,#0f172a))] dark:text-[color:var(--zui-avatar-forest-fg-dark,var(--zui-color-forest-dark,#f8fafc))]\",\n  sunset:\n    \"border-[color:var(--zui-avatar-sunset-border,var(--zui-color-sunset,#ea580c))] dark:border-[color:var(--zui-avatar-sunset-border-dark,var(--zui-color-sunset-dark,#fb923c))] bg-[var(--zui-avatar-sunset-bg,color-mix(in oklch, var(--zui-color-sunset,#ea580c) 10%, transparent))] dark:bg-[var(--zui-avatar-sunset-bg-dark,color-mix(in oklch, var(--zui-color-sunset-dark,#fb923c) 18%, transparent))] text-[color:var(--zui-avatar-sunset-fg,var(--zui-color-sunset,#0f172a))] dark:text-[color:var(--zui-avatar-sunset-fg-dark,var(--zui-color-sunset-dark,#f8fafc))]\",\n  magenta:\n    \"border-[color:var(--zui-avatar-magenta-border,var(--zui-color-magenta,#c026d3))] dark:border-[color:var(--zui-avatar-magenta-border-dark,var(--zui-color-magenta-dark,#e879f9))] bg-[var(--zui-avatar-magenta-bg,color-mix(in oklch, var(--zui-color-magenta,#c026d3) 10%, transparent))] dark:bg-[var(--zui-avatar-magenta-bg-dark,color-mix(in oklch, var(--zui-color-magenta-dark,#e879f9) 18%, transparent))] text-[color:var(--zui-avatar-magenta-fg,var(--zui-color-magenta,#0f172a))] dark:text-[color:var(--zui-avatar-magenta-fg-dark,var(--zui-color-magenta-dark,#f8fafc))]\",\n  crimson:\n    \"border-[color:var(--zui-avatar-crimson-border,var(--zui-color-crimson,#b91c1c))] dark:border-[color:var(--zui-avatar-crimson-border-dark,var(--zui-color-crimson-dark,#f87171))] bg-[var(--zui-avatar-crimson-bg,color-mix(in oklch, var(--zui-color-crimson,#b91c1c) 10%, transparent))] dark:bg-[var(--zui-avatar-crimson-bg-dark,color-mix(in oklch, var(--zui-color-crimson-dark,#f87171) 18%, transparent))] text-[color:var(--zui-avatar-crimson-fg,var(--zui-color-crimson,#0f172a))] dark:text-[color:var(--zui-avatar-crimson-fg-dark,var(--zui-color-crimson-dark,#f8fafc))]\",\n  aqua: \"border-[color:var(--zui-avatar-aqua-border,var(--zui-color-aqua,#0f766e))] dark:border-[color:var(--zui-avatar-aqua-border-dark,var(--zui-color-aqua-dark,#2dd4bf))] bg-[var(--zui-avatar-aqua-bg,color-mix(in oklch, var(--zui-color-aqua,#0f766e) 10%, transparent))] dark:bg-[var(--zui-avatar-aqua-bg-dark,color-mix(in oklch, var(--zui-color-aqua-dark,#2dd4bf) 18%, transparent))] text-[color:var(--zui-avatar-aqua-fg,var(--zui-color-aqua,#0f172a))] dark:text-[color:var(--zui-avatar-aqua-fg-dark,var(--zui-color-aqua-dark,#f8fafc))]\",\n  plum: \"border-[color:var(--zui-avatar-plum-border,var(--zui-color-plum,#7e22ce))] dark:border-[color:var(--zui-avatar-plum-border-dark,var(--zui-color-plum-dark,#c084fc))] bg-[var(--zui-avatar-plum-bg,color-mix(in oklch, var(--zui-color-plum,#7e22ce) 10%, transparent))] dark:bg-[var(--zui-avatar-plum-bg-dark,color-mix(in oklch, var(--zui-color-plum-dark,#c084fc) 18%, transparent))] text-[color:var(--zui-avatar-plum-fg,var(--zui-color-plum,#0f172a))] dark:text-[color:var(--zui-avatar-plum-fg-dark,var(--zui-color-plum-dark,#f8fafc))]\",\n  sky: \"border-[color:var(--zui-avatar-sky-border,var(--zui-color-sky,oklch(44.3%_0.11_240.79)))] dark:border-[color:var(--zui-avatar-sky-border-dark,var(--zui-color-sky-dark,oklch(58.8%_0.158_241.966)))] bg-[var(--zui-avatar-sky-bg,color-mix(in oklch, var(--zui-color-sky,oklch(95.1%_0.026_236.824)) 10%, transparent))] dark:bg-[var(--zui-avatar-sky-bg-dark,color-mix(in oklch, var(--zui-color-sky-dark,oklch(58.8%_0.158_241.966)) 18%, transparent))] text-[color:var(--zui-avatar-sky-fg,var(--zui-color-sky,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-sky-fg-dark,var(--zui-color-sky-dark,oklch(92.9%_0.013_255.508)))]\",\n  rose: \"border-[color:var(--zui-avatar-rose-border,var(--zui-color-rose,oklch(45.5%_0.188_13.697)))] dark:border-[color:var(--zui-avatar-rose-border-dark,var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)))] bg-[var(--zui-avatar-rose-bg,color-mix(in oklch, var(--zui-color-rose,oklch(94.1%_0.03_12.58)) 10%, transparent))] dark:bg-[var(--zui-avatar-rose-bg-dark,color-mix(in oklch, var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)) 18%, transparent))] text-[color:var(--zui-avatar-rose-fg,var(--zui-color-rose,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-rose-fg-dark,var(--zui-color-rose-dark,oklch(92.9%_0.013_255.508)))]\",\n  purple:\n    \"border-[color:var(--zui-avatar-purple-border,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:border-[color:var(--zui-avatar-purple-border-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] bg-[var(--zui-avatar-purple-bg,color-mix(in oklch, var(--zui-color-purple,oklch(94.6%_0.033_307.174)) 10%, transparent))] dark:bg-[var(--zui-avatar-purple-bg-dark,color-mix(in oklch, var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)) 18%, transparent))] text-[color:var(--zui-avatar-purple-fg,var(--zui-color-purple,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-purple-fg-dark,var(--zui-color-purple-dark,oklch(92.9%_0.013_255.508)))]\",\n  pink: \"border-[color:var(--zui-avatar-pink-border,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:border-[color:var(--zui-avatar-pink-border-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] bg-[var(--zui-avatar-pink-bg,color-mix(in oklch, var(--zui-color-pink,oklch(94.8%_0.028_342.258)) 10%, transparent))] dark:bg-[var(--zui-avatar-pink-bg-dark,color-mix(in oklch, var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)) 18%, transparent))] text-[color:var(--zui-avatar-pink-fg,var(--zui-color-pink,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-pink-fg-dark,var(--zui-color-pink-dark,oklch(92.9%_0.013_255.508)))]\",\n  orange:\n    \"border-[color:var(--zui-avatar-orange-border,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:border-[color:var(--zui-avatar-orange-border-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] bg-[var(--zui-avatar-orange-bg,color-mix(in oklch, var(--zui-color-orange,oklch(95.4%_0.038_75.164)) 10%, transparent))] dark:bg-[var(--zui-avatar-orange-bg-dark,color-mix(in oklch, var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)) 18%, transparent))] text-[color:var(--zui-avatar-orange-fg,var(--zui-color-orange,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-orange-fg-dark,var(--zui-color-orange-dark,oklch(92.9%_0.013_255.508)))]\",\n  yellow:\n    \"border-[color:var(--zui-avatar-yellow-border,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:border-[color:var(--zui-avatar-yellow-border-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] bg-[var(--zui-avatar-yellow-bg,color-mix(in oklch, var(--zui-color-yellow,oklch(97.3%_0.071_103.193)) 10%, transparent))] dark:bg-[var(--zui-avatar-yellow-bg-dark,color-mix(in oklch, var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)) 18%, transparent))] text-[color:var(--zui-avatar-yellow-fg,var(--zui-color-yellow,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-yellow-fg-dark,var(--zui-color-yellow-dark,oklch(92.9%_0.013_255.508)))]\",\n  teal: \"border-[color:var(--zui-avatar-teal-border,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:border-[color:var(--zui-avatar-teal-border-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] bg-[var(--zui-avatar-teal-bg,color-mix(in oklch, var(--zui-color-teal,oklch(95.3%_0.051_180.801)) 10%, transparent))] dark:bg-[var(--zui-avatar-teal-bg-dark,color-mix(in oklch, var(--zui-color-teal-dark,oklch(60%_0.118_184.704)) 18%, transparent))] text-[color:var(--zui-avatar-teal-fg,var(--zui-color-teal,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-teal-fg-dark,var(--zui-color-teal-dark,oklch(92.9%_0.013_255.508)))]\",\n  indigo:\n    \"border-[color:var(--zui-avatar-indigo-border,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:border-[color:var(--zui-avatar-indigo-border-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] bg-[var(--zui-avatar-indigo-bg,color-mix(in oklch, var(--zui-color-indigo,oklch(93%_0.034_272.788)) 10%, transparent))] dark:bg-[var(--zui-avatar-indigo-bg-dark,color-mix(in oklch, var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)) 18%, transparent))] text-[color:var(--zui-avatar-indigo-fg,var(--zui-color-indigo,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-indigo-fg-dark,var(--zui-color-indigo-dark,oklch(92.9%_0.013_255.508)))]\",\n  emerald:\n    \"border-[color:var(--zui-avatar-emerald-border,var(--zui-color-emerald,oklch(43.2%_0.095_166.913)))] dark:border-[color:var(--zui-avatar-emerald-border-dark,var(--zui-color-emerald-dark,oklch(59.6%_0.145_163.225)))] bg-[var(--zui-avatar-emerald-bg,color-mix(in oklch, var(--zui-color-emerald,oklch(95%_0.052_163.051)) 10%, transparent))] dark:bg-[var(--zui-avatar-emerald-bg-dark,color-mix(in oklch, var(--zui-color-emerald-dark,oklch(59.6%_0.145_163.225)) 18%, transparent))] text-[color:var(--zui-avatar-emerald-fg,var(--zui-color-emerald,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-emerald-fg-dark,var(--zui-color-emerald-dark,oklch(92.9%_0.013_255.508)))]\",\n  gray: \"border-[color:var(--zui-avatar-gray-border,var(--zui-color-gray,oklch(27.8%_0.033_256.848)))] dark:border-[color:var(--zui-avatar-gray-border-dark,var(--zui-color-gray-dark,oklch(44.6%_0.03_256.802)))] bg-[var(--zui-avatar-gray-bg,color-mix(in oklch, var(--zui-color-gray,oklch(96.7%_0.003_264.542)) 10%, transparent))] dark:bg-[var(--zui-avatar-gray-bg-dark,color-mix(in oklch, var(--zui-color-gray-dark,oklch(44.6%_0.03_256.802)) 18%, transparent))] text-[color:var(--zui-avatar-gray-fg,var(--zui-color-gray,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gray-fg-dark,var(--zui-color-gray-dark,oklch(92.9%_0.013_255.508)))]\",\n  amber:\n    \"border-[color:var(--zui-avatar-amber-border,var(--zui-color-amber,oklch(47.3%_0.137_46.201)))] dark:border-[color:var(--zui-avatar-amber-border-dark,var(--zui-color-amber-dark,oklch(66.6%_0.179_58.318)))] bg-[var(--zui-avatar-amber-bg,color-mix(in oklch, var(--zui-color-amber,oklch(96.2%_0.059_95.617)) 10%, transparent))] dark:bg-[var(--zui-avatar-amber-bg-dark,color-mix(in oklch, var(--zui-color-amber-dark,oklch(66.6%_0.179_58.318)) 18%, transparent))] text-[color:var(--zui-avatar-amber-fg,var(--zui-color-amber,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-amber-fg-dark,var(--zui-color-amber-dark,oklch(92.9%_0.013_255.508)))]\",\n  violet:\n    \"border-[color:var(--zui-avatar-violet-border,var(--zui-color-violet,oklch(43.2%_0.232_292.759)))] dark:border-[color:var(--zui-avatar-violet-border-dark,var(--zui-color-violet-dark,oklch(54.1%_0.281_293.009)))] bg-[var(--zui-avatar-violet-bg,color-mix(in oklch, var(--zui-color-violet,oklch(94.3%_0.029_294.588)) 10%, transparent))] dark:bg-[var(--zui-avatar-violet-bg-dark,color-mix(in oklch, var(--zui-color-violet-dark,oklch(54.1%_0.281_293.009)) 18%, transparent))] text-[color:var(--zui-avatar-violet-fg,var(--zui-color-violet,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-violet-fg-dark,var(--zui-color-violet-dark,oklch(92.9%_0.013_255.508)))]\",\n  \"gradient-blue\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-blue-from,var(--zui-color-blue,oklch(62.3%_0.214_259.815)))] dark:from-[var(--zui-avatar-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] to-[var(--zui-avatar-gradient-blue-to,var(--zui-color-purple,oklch(62.7%_0.265_303.9)))] dark:to-[var(--zui-avatar-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-blue-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-blue-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]\",\n  \"gradient-green\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-green-from,var(--zui-color-green,oklch(72.3%_0.219_149.579)))] dark:from-[var(--zui-avatar-gradient-green-from-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))] to-[var(--zui-avatar-gradient-green-to,var(--zui-color-lime,oklch(76.8%_0.233_130.85)))] dark:to-[var(--zui-avatar-gradient-green-to-dark,var(--zui-color-lime-dark,oklch(64.8%_0.2_131.684)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-green-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-green-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]\",\n  \"gradient-red\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-red-from,var(--zui-color-red,oklch(63.7%_0.237_25.331)))] dark:from-[var(--zui-avatar-gradient-red-from-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] to-[var(--zui-avatar-gradient-red-to,var(--zui-color-pink,oklch(65.6%_0.241_354.308)))] dark:to-[var(--zui-avatar-gradient-red-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-red-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-red-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]\",\n  \"gradient-yellow\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-yellow-from,var(--zui-color-yellow,oklch(79.5%_0.184_86.047)))] dark:from-[var(--zui-avatar-gradient-yellow-from-dark,var(--zui-color-yellow-dark,oklch(68.1%_0.162_75.834)))] to-[var(--zui-avatar-gradient-yellow-to,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:to-[var(--zui-avatar-gradient-yellow-to-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-yellow-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-yellow-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]\",\n  \"gradient-purple\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-purple-from,var(--zui-color-purple,oklch(62.7%_0.265_303.9)))] dark:from-[var(--zui-avatar-gradient-purple-from-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] to-[var(--zui-avatar-gradient-purple-to,var(--zui-color-pink,oklch(65.6%_0.241_354.308)))] dark:to-[var(--zui-avatar-gradient-purple-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-purple-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-purple-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]\",\n  \"gradient-teal\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-teal-from,var(--zui-color-teal,oklch(70.4%_0.14_182.503)))] dark:from-[var(--zui-avatar-gradient-teal-from-dark,var(--zui-color-teal-dark,oklch(60%_0.118_184.704)))] to-[var(--zui-avatar-gradient-teal-to,var(--zui-color-cyan,oklch(71.5%_0.143_215.221)))] dark:to-[var(--zui-avatar-gradient-teal-to-dark,var(--zui-color-cyan-dark,oklch(60.9%_0.126_221.723)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-teal-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-teal-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]\",\n  \"gradient-indigo\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-indigo-from,var(--zui-color-indigo,oklch(58.5%_0.233_277.117)))] dark:from-[var(--zui-avatar-gradient-indigo-from-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] to-[var(--zui-avatar-gradient-indigo-to,var(--zui-color-purple,oklch(62.7%_0.265_303.9)))] dark:to-[var(--zui-avatar-gradient-indigo-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-indigo-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-indigo-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]\",\n  \"gradient-pink\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-pink-from,var(--zui-color-pink,oklch(65.6%_0.241_354.308)))] dark:from-[var(--zui-avatar-gradient-pink-from-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] to-[var(--zui-avatar-gradient-pink-to,var(--zui-color-rose,oklch(64.5%_0.246_16.439)))] dark:to-[var(--zui-avatar-gradient-pink-to-dark,var(--zui-color-rose-dark,oklch(58.6%_0.253_17.585)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-pink-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-pink-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]\",\n  \"gradient-orange\":\n    \"bg-linear-to-r from-[var(--zui-avatar-gradient-orange-from,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:from-[var(--zui-avatar-gradient-orange-from-dark,var(--zui-color-orange-dark,oklch(64.6%_0.222_41.116)))] to-[var(--zui-avatar-gradient-orange-to,var(--zui-color-red,oklch(63.7%_0.237_25.331)))] dark:to-[var(--zui-avatar-gradient-orange-to-dark,var(--zui-color-red-dark,oklch(57.7%_0.245_27.325)))] backdrop-blur-xl text-[color:var(--zui-avatar-gradient-orange-fg,var(--zui-brand-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-avatar-gradient-orange-fg-dark,var(--zui-brand-fg-dark,oklch(92.9%_0.013_255.508)))]\",\n} as const;\n\nexport const zuiAvatarSizes = {\n  sm: \"size-8 text-xs\",\n  md: \"size-10 text-sm\",\n  lg: \"size-12 text-base\",\n  xl: \"size-16 text-lg\",\n} as const;\n\nexport const zuiAvatarImageBase = \"aspect-square size-full object-cover\";\n\nexport const zuiAvatarFallbackBase =\n  \"flex size-full items-center justify-center bg-[var(--zui-avatar-fallback-bg,var(--zui-surface-soft,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-avatar-fallback-bg-dark,var(--zui-surface-soft-dark,oklch(27.9%_0.041_260.031)))] font-medium text-[color:var(--zui-avatar-fallback-fg,var(--zui-fg,oklch(27.9%_0.041_260.031)))] dark:text-[color:var(--zui-avatar-fallback-fg-dark,var(--zui-fg-dark,oklch(96.8%_0.007_247.896)))]\";\n\nexport const zuiAvatarGroupBase =\n  \"flex items-center [&_[data-slot=avatar]]:-ml-2 [&_[data-slot=avatar]]:ring-2 [&_[data-slot=avatar]]:ring-[var(--zui-avatar-group-ring,var(--zui-focus-ring,#ffffff))] dark:[&_[data-slot=avatar]]:ring-[var(--zui-avatar-group-ring-dark,var(--zui-focus-ring-dark,oklch(12.9%_0.042_264.695)))] [&_[data-slot=avatar]]:first:ml-0\";\n"]}

package/dist/chunk-KJMW7S5X.js

@@ -0,0 +1,78 @@
+'use strict';
+
+// src/design-system/divider.ts
+var zuiDividerAppearances = {
+  default: "text-[color:var(--zui-divider-default-fg,var(--zui-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-divider-default-fg-dark,var(--zui-fg-dark,oklch(92.9%_0.013_255.508)))]",
+  muted: "text-[color:var(--zui-divider-muted-fg,var(--zui-fg-muted,oklch(55.4%_0.046_257.417)))] dark:text-[color:var(--zui-divider-muted-fg-dark,var(--zui-fg-muted-dark,oklch(55.4%_0.046_257.417)))]",
+  primary: "text-[color:var(--zui-divider-primary-fg,var(--zui-brand,oklch(52%_0.105_223.128)))] dark:text-[color:var(--zui-divider-primary-fg-dark,var(--zui-brand-dark,oklch(86.5%_0.127_207.078)))]",
+  destructive: "text-[color:var(--zui-divider-destructive-fg,var(--zui-status-error,oklch(58.6%_0.253_17.585)))] dark:text-[color:var(--zui-divider-destructive-fg-dark,var(--zui-status-error-dark,oklch(71.2%_0.194_13.428)))]",
+  ghost: "text-[color:var(--zui-divider-ghost-fg,var(--zui-fg-muted,oklch(70.4%_0.04_256.788)))] dark:text-[color:var(--zui-divider-ghost-fg-dark,var(--zui-fg-muted-dark,oklch(44.6%_0.043_257.281)))]",
+  sky: "text-[color:var(--zui-divider-sky-fg,var(--zui-color-sky,oklch(58.8%_0.158_241.966)))] dark:text-[color:var(--zui-divider-sky-fg-dark,var(--zui-color-sky-dark,oklch(74.6%_0.16_232.661)))]",
+  rose: "text-[color:var(--zui-divider-rose-fg,var(--zui-color-rose,oklch(58.6%_0.253_17.585)))] dark:text-[color:var(--zui-divider-rose-fg-dark,var(--zui-color-rose-dark,oklch(71.2%_0.194_13.428)))]",
+  purple: "text-[color:var(--zui-divider-purple-fg,var(--zui-color-purple,oklch(55.8%_0.288_302.321)))] dark:text-[color:var(--zui-divider-purple-fg-dark,var(--zui-color-purple-dark,oklch(71.4%_0.203_305.504)))]",
+  pink: "text-[color:var(--zui-divider-pink-fg,var(--zui-color-pink,oklch(59.2%_0.249_0.584)))] dark:text-[color:var(--zui-divider-pink-fg-dark,var(--zui-color-pink-dark,oklch(71.8%_0.202_349.761)))]",
+  orange: "text-[color:var(--zui-divider-orange-fg,var(--zui-color-orange,oklch(64.6%_0.222_41.116)))] dark:text-[color:var(--zui-divider-orange-fg-dark,var(--zui-color-orange-dark,oklch(75%_0.183_55.934)))]",
+  yellow: "text-[color:var(--zui-divider-yellow-fg,var(--zui-color-yellow,oklch(68.1%_0.162_75.834)))] dark:text-[color:var(--zui-divider-yellow-fg-dark,var(--zui-color-yellow-dark,oklch(85.2%_0.199_91.936)))]",
+  teal: "text-[color:var(--zui-divider-teal-fg,var(--zui-color-teal,oklch(60%_0.118_184.704)))] dark:text-[color:var(--zui-divider-teal-fg-dark,var(--zui-color-teal-dark,oklch(77.7%_0.152_181.912)))]",
+  indigo: "text-[color:var(--zui-divider-indigo-fg,var(--zui-color-indigo,oklch(51.1%_0.262_276.966)))] dark:text-[color:var(--zui-divider-indigo-fg-dark,var(--zui-color-indigo-dark,oklch(67.3%_0.182_276.935)))]",
+  emerald: "text-[color:var(--zui-divider-emerald-fg,var(--zui-color-emerald,oklch(59.6%_0.145_163.225)))] dark:text-[color:var(--zui-divider-emerald-fg-dark,var(--zui-color-emerald-dark,oklch(76.5%_0.177_163.223)))]",
+  gray: "text-[color:var(--zui-divider-gray-fg,var(--zui-color-gray,oklch(44.6%_0.03_256.802)))] dark:text-[color:var(--zui-divider-gray-fg-dark,var(--zui-color-gray-dark,oklch(70.7%_0.022_261.325)))]",
+  amber: "text-[color:var(--zui-divider-amber-fg,var(--zui-color-amber,oklch(66.6%_0.179_58.318)))] dark:text-[color:var(--zui-divider-amber-fg-dark,var(--zui-color-amber-dark,oklch(82.8%_0.189_84.429)))]",
+  violet: "text-[color:var(--zui-divider-violet-fg,var(--zui-color-violet,oklch(54.1%_0.281_293.009)))] dark:text-[color:var(--zui-divider-violet-fg-dark,var(--zui-color-violet-dark,oklch(70.2%_0.183_293.541)))]",
+  "gradient-blue": "text-[color:var(--zui-divider-gradient-blue-fg,var(--zui-color-blue,oklch(54.6%_0.245_262.881)))] dark:text-[color:var(--zui-divider-gradient-blue-fg-dark,var(--zui-color-blue-dark,oklch(70.7%_0.165_254.624)))]",
+  "gradient-green": "text-[color:var(--zui-divider-gradient-green-fg,var(--zui-color-green,oklch(62.7%_0.194_149.214)))] dark:text-[color:var(--zui-divider-gradient-green-fg-dark,var(--zui-color-green-dark,oklch(79.2%_0.209_151.711)))]",
+  "gradient-red": "text-[color:var(--zui-divider-gradient-red-fg,var(--zui-color-red,oklch(57.7%_0.245_27.325)))] dark:text-[color:var(--zui-divider-gradient-red-fg-dark,var(--zui-color-red-dark,oklch(70.4%_0.191_22.216)))]",
+  "gradient-yellow": "text-[color:var(--zui-divider-gradient-yellow-fg,var(--zui-color-yellow,oklch(68.1%_0.162_75.834)))] dark:text-[color:var(--zui-divider-gradient-yellow-fg-dark,var(--zui-color-yellow-dark,oklch(85.2%_0.199_91.936)))]",
+  "gradient-purple": "text-[color:var(--zui-divider-gradient-purple-fg,var(--zui-color-purple,oklch(55.8%_0.288_302.321)))] dark:text-[color:var(--zui-divider-gradient-purple-fg-dark,var(--zui-color-purple-dark,oklch(71.4%_0.203_305.504)))]",
+  "gradient-teal": "text-[color:var(--zui-divider-gradient-teal-fg,var(--zui-color-teal,oklch(60%_0.118_184.704)))] dark:text-[color:var(--zui-divider-gradient-teal-fg-dark,var(--zui-color-teal-dark,oklch(77.7%_0.152_181.912)))]",
+  "gradient-indigo": "text-[color:var(--zui-divider-gradient-indigo-fg,var(--zui-color-indigo,oklch(51.1%_0.262_276.966)))] dark:text-[color:var(--zui-divider-gradient-indigo-fg-dark,var(--zui-color-indigo-dark,oklch(67.3%_0.182_276.935)))]",
+  "gradient-pink": "text-[color:var(--zui-divider-gradient-pink-fg,var(--zui-color-pink,oklch(59.2%_0.249_0.584)))] dark:text-[color:var(--zui-divider-gradient-pink-fg-dark,var(--zui-color-pink-dark,oklch(71.8%_0.202_349.761)))]",
+  "gradient-orange": "text-[color:var(--zui-divider-gradient-orange-fg,var(--zui-color-orange,oklch(64.6%_0.222_41.116)))] dark:text-[color:var(--zui-divider-gradient-orange-fg-dark,var(--zui-color-orange-dark,oklch(75%_0.183_55.934)))]",
+  blue: "text-[color:var(--zui-divider-blue-fg,var(--zui-color-blue,#2563eb))] dark:text-[color:var(--zui-divider-blue-fg-dark,var(--zui-color-blue-dark,#3b82f6))]",
+  cyan: "text-[color:var(--zui-divider-cyan-fg,var(--zui-color-cyan,#0891b2))] dark:text-[color:var(--zui-divider-cyan-fg-dark,var(--zui-color-cyan-dark,#22d3ee))]",
+  green: "text-[color:var(--zui-divider-green-fg,var(--zui-color-green,#16a34a))] dark:text-[color:var(--zui-divider-green-fg-dark,var(--zui-color-green-dark,#22c55e))]",
+  lime: "text-[color:var(--zui-divider-lime-fg,var(--zui-color-lime,#65a30d))] dark:text-[color:var(--zui-divider-lime-fg-dark,var(--zui-color-lime-dark,#a3e635))]",
+  mint: "text-[color:var(--zui-divider-mint-fg,var(--zui-color-mint,#10b981))] dark:text-[color:var(--zui-divider-mint-fg-dark,var(--zui-color-mint-dark,#6ee7b7))]",
+  ocean: "text-[color:var(--zui-divider-ocean-fg,var(--zui-color-ocean,#0284c7))] dark:text-[color:var(--zui-divider-ocean-fg-dark,var(--zui-color-ocean-dark,#38bdf8))]",
+  sapphire: "text-[color:var(--zui-divider-sapphire-fg,var(--zui-color-sapphire,#1d4ed8))] dark:text-[color:var(--zui-divider-sapphire-fg-dark,var(--zui-color-sapphire-dark,#60a5fa))]",
+  lavender: "text-[color:var(--zui-divider-lavender-fg,var(--zui-color-lavender,#8b5cf6))] dark:text-[color:var(--zui-divider-lavender-fg-dark,var(--zui-color-lavender-dark,#a78bfa))]",
+  ruby: "text-[color:var(--zui-divider-ruby-fg,var(--zui-color-ruby,#be123c))] dark:text-[color:var(--zui-divider-ruby-fg-dark,var(--zui-color-ruby-dark,#fb7185))]",
+  red: "text-[color:var(--zui-divider-red-fg,var(--zui-color-red,#dc2626))] dark:text-[color:var(--zui-divider-red-fg-dark,var(--zui-color-red-dark,#ef4444))]",
+  slate: "text-[color:var(--zui-divider-slate-fg,var(--zui-color-slate,#475569))] dark:text-[color:var(--zui-divider-slate-fg-dark,var(--zui-color-slate-dark,#64748b))]",
+  zinc: "text-[color:var(--zui-divider-zinc-fg,var(--zui-color-zinc,#52525b))] dark:text-[color:var(--zui-divider-zinc-fg-dark,var(--zui-color-zinc-dark,#71717a))]",
+  stone: "text-[color:var(--zui-divider-stone-fg,var(--zui-color-stone,#57534e))] dark:text-[color:var(--zui-divider-stone-fg-dark,var(--zui-color-stone-dark,#78716c))]",
+  royal: "text-[color:var(--zui-divider-royal-fg,var(--zui-color-royal,#4338ca))] dark:text-[color:var(--zui-divider-royal-fg-dark,var(--zui-color-royal-dark,#818cf8))]",
+  electric: "text-[color:var(--zui-divider-electric-fg,var(--zui-color-electric,#0ea5e9))] dark:text-[color:var(--zui-divider-electric-fg-dark,var(--zui-color-electric-dark,#38bdf8))]",
+  forest: "text-[color:var(--zui-divider-forest-fg,var(--zui-color-forest,#166534))] dark:text-[color:var(--zui-divider-forest-fg-dark,var(--zui-color-forest-dark,#4ade80))]",
+  sunset: "text-[color:var(--zui-divider-sunset-fg,var(--zui-color-sunset,#ea580c))] dark:text-[color:var(--zui-divider-sunset-fg-dark,var(--zui-color-sunset-dark,#fb923c))]",
+  magenta: "text-[color:var(--zui-divider-magenta-fg,var(--zui-color-magenta,#c026d3))] dark:text-[color:var(--zui-divider-magenta-fg-dark,var(--zui-color-magenta-dark,#e879f9))]",
+  crimson: "text-[color:var(--zui-divider-crimson-fg,var(--zui-color-crimson,#b91c1c))] dark:text-[color:var(--zui-divider-crimson-fg-dark,var(--zui-color-crimson-dark,#f87171))]",
+  aqua: "text-[color:var(--zui-divider-aqua-fg,var(--zui-color-aqua,#0f766e))] dark:text-[color:var(--zui-divider-aqua-fg-dark,var(--zui-color-aqua-dark,#2dd4bf))]",
+  plum: "text-[color:var(--zui-divider-plum-fg,var(--zui-color-plum,#7e22ce))] dark:text-[color:var(--zui-divider-plum-fg-dark,var(--zui-color-plum-dark,#c084fc))]"
+};
+var zuiDividerBase = "flex w-full items-center gap-3";
+var zuiDividerOrientations = {
+  horizontal: "w-full flex-row",
+  vertical: "h-full min-h-[2rem] w-auto flex-col self-stretch"
+};
+var zuiDividerSizes = {
+  sm: "",
+  md: "",
+  lg: ""
+};
+var zuiDividerLineBase = "shrink grow rounded-full bg-current opacity-80";
+var zuiDividerLineOrientations = {
+  horizontal: "h-px",
+  vertical: "w-px flex-1"
+};
+var zuiDividerLabelBase = "shrink-0 text-xs font-medium uppercase tracking-wide text-current";
+
+exports.zuiDividerAppearances = zuiDividerAppearances;
+exports.zuiDividerBase = zuiDividerBase;
+exports.zuiDividerLabelBase = zuiDividerLabelBase;
+exports.zuiDividerLineBase = zuiDividerLineBase;
+exports.zuiDividerLineOrientations = zuiDividerLineOrientations;
+exports.zuiDividerOrientations = zuiDividerOrientations;
+exports.zuiDividerSizes = zuiDividerSizes;
+//# sourceMappingURL=chunk-KJMW7S5X.js.map
+//# sourceMappingURL=chunk-KJMW7S5X.js.map

package/dist/chunk-KJMW7S5X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/design-system/divider.ts"],"names":[],"mappings":";;;AAAO,IAAM,qBAAA,GAAwB;AAAA,EACnC,OAAA,EACE,wLAAA;AAAA,EACF,KAAA,EACE,gMAAA;AAAA,EACF,OAAA,EACE,4LAAA;AAAA,EACF,WAAA,EACE,kNAAA;AAAA,EACF,KAAA,EACE,+LAAA;AAAA,EACF,GAAA,EAAK,6LAAA;AAAA,EACL,IAAA,EAAM,gMAAA;AAAA,EACN,MAAA,EACE,0MAAA;AAAA,EACF,IAAA,EAAM,gMAAA;AAAA,EACN,MAAA,EACE,sMAAA;AAAA,EACF,MAAA,EACE,wMAAA;AAAA,EACF,IAAA,EAAM,gMAAA;AAAA,EACN,MAAA,EACE,0MAAA;AAAA,EACF,OAAA,EACE,8MAAA;AAAA,EACF,IAAA,EAAM,iMAAA;AAAA,EACN,KAAA,EACE,oMAAA;AAAA,EACF,MAAA,EACE,0MAAA;AAAA,EACF,eAAA,EACE,oNAAA;AAAA,EACF,gBAAA,EACE,wNAAA;AAAA,EACF,cAAA,EACE,8MAAA;AAAA,EACF,iBAAA,EACE,0NAAA;AAAA,EACF,iBAAA,EACE,4NAAA;AAAA,EACF,eAAA,EACE,kNAAA;AAAA,EACF,iBAAA,EACE,4NAAA;AAAA,EACF,eAAA,EACE,kNAAA;AAAA,EACF,iBAAA,EACE,wNAAA;AAAA,EACF,IAAA,EAAM,4JAAA;AAAA,EACN,IAAA,EAAM,4JAAA;AAAA,EACN,KAAA,EACE,gKAAA;AAAA,EACF,IAAA,EAAM,4JAAA;AAAA,EACN,IAAA,EAAM,4JAAA;AAAA,EACN,KAAA,EACE,gKAAA;AAAA,EACF,QAAA,EACE,4KAAA;AAAA,EACF,QAAA,EACE,4KAAA;AAAA,EACF,IAAA,EAAM,4JAAA;AAAA,EACN,GAAA,EAAK,wJAAA;AAAA,EACL,KAAA,EACE,gKAAA;AAAA,EACF,IAAA,EAAM,4JAAA;AAAA,EACN,KAAA,EACE,gKAAA;AAAA,EACF,KAAA,EACE,gKAAA;AAAA,EACF,QAAA,EACE,4KAAA;AAAA,EACF,MAAA,EACE,oKAAA;AAAA,EACF,MAAA,EACE,oKAAA;AAAA,EACF,OAAA,EACE,wKAAA;AAAA,EACF,OAAA,EACE,wKAAA;AAAA,EACF,IAAA,EAAM,4JAAA;AAAA,EACN,IAAA,EAAM;AACR;AAEO,IAAM,cAAA,GAAiB;AAEvB,IAAM,sBAAA,GAAyB;AAAA,EACpC,UAAA,EAAY,iBAAA;AAAA,EACZ,QAAA,EAAU;AACZ;AAEO,IAAM,eAAA,GAAkB;AAAA,EAC7B,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI,EAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,kBAAA,GACX;AAEK,IAAM,0BAAA,GAA6B;AAAA,EACxC,UAAA,EAAY,MAAA;AAAA,EACZ,QAAA,EAAU;AACZ;AAEO,IAAM,mBAAA,GACX","file":"chunk-KJMW7S5X.js","sourcesContent":["export const zuiDividerAppearances = {\n  default:\n    \"text-[color:var(--zui-divider-default-fg,var(--zui-fg,oklch(37.2%_0.044_257.287)))] dark:text-[color:var(--zui-divider-default-fg-dark,var(--zui-fg-dark,oklch(92.9%_0.013_255.508)))]\",\n  muted:\n    \"text-[color:var(--zui-divider-muted-fg,var(--zui-fg-muted,oklch(55.4%_0.046_257.417)))] dark:text-[color:var(--zui-divider-muted-fg-dark,var(--zui-fg-muted-dark,oklch(55.4%_0.046_257.417)))]\",\n  primary:\n    \"text-[color:var(--zui-divider-primary-fg,var(--zui-brand,oklch(52%_0.105_223.128)))] dark:text-[color:var(--zui-divider-primary-fg-dark,var(--zui-brand-dark,oklch(86.5%_0.127_207.078)))]\",\n  destructive:\n    \"text-[color:var(--zui-divider-destructive-fg,var(--zui-status-error,oklch(58.6%_0.253_17.585)))] dark:text-[color:var(--zui-divider-destructive-fg-dark,var(--zui-status-error-dark,oklch(71.2%_0.194_13.428)))]\",\n  ghost:\n    \"text-[color:var(--zui-divider-ghost-fg,var(--zui-fg-muted,oklch(70.4%_0.04_256.788)))] dark:text-[color:var(--zui-divider-ghost-fg-dark,var(--zui-fg-muted-dark,oklch(44.6%_0.043_257.281)))]\",\n  sky: \"text-[color:var(--zui-divider-sky-fg,var(--zui-color-sky,oklch(58.8%_0.158_241.966)))] dark:text-[color:var(--zui-divider-sky-fg-dark,var(--zui-color-sky-dark,oklch(74.6%_0.16_232.661)))]\",\n  rose: \"text-[color:var(--zui-divider-rose-fg,var(--zui-color-rose,oklch(58.6%_0.253_17.585)))] dark:text-[color:var(--zui-divider-rose-fg-dark,var(--zui-color-rose-dark,oklch(71.2%_0.194_13.428)))]\",\n  purple:\n    \"text-[color:var(--zui-divider-purple-fg,var(--zui-color-purple,oklch(55.8%_0.288_302.321)))] dark:text-[color:var(--zui-divider-purple-fg-dark,var(--zui-color-purple-dark,oklch(71.4%_0.203_305.504)))]\",\n  pink: \"text-[color:var(--zui-divider-pink-fg,var(--zui-color-pink,oklch(59.2%_0.249_0.584)))] dark:text-[color:var(--zui-divider-pink-fg-dark,var(--zui-color-pink-dark,oklch(71.8%_0.202_349.761)))]\",\n  orange:\n    \"text-[color:var(--zui-divider-orange-fg,var(--zui-color-orange,oklch(64.6%_0.222_41.116)))] dark:text-[color:var(--zui-divider-orange-fg-dark,var(--zui-color-orange-dark,oklch(75%_0.183_55.934)))]\",\n  yellow:\n    \"text-[color:var(--zui-divider-yellow-fg,var(--zui-color-yellow,oklch(68.1%_0.162_75.834)))] dark:text-[color:var(--zui-divider-yellow-fg-dark,var(--zui-color-yellow-dark,oklch(85.2%_0.199_91.936)))]\",\n  teal: \"text-[color:var(--zui-divider-teal-fg,var(--zui-color-teal,oklch(60%_0.118_184.704)))] dark:text-[color:var(--zui-divider-teal-fg-dark,var(--zui-color-teal-dark,oklch(77.7%_0.152_181.912)))]\",\n  indigo:\n    \"text-[color:var(--zui-divider-indigo-fg,var(--zui-color-indigo,oklch(51.1%_0.262_276.966)))] dark:text-[color:var(--zui-divider-indigo-fg-dark,var(--zui-color-indigo-dark,oklch(67.3%_0.182_276.935)))]\",\n  emerald:\n    \"text-[color:var(--zui-divider-emerald-fg,var(--zui-color-emerald,oklch(59.6%_0.145_163.225)))] dark:text-[color:var(--zui-divider-emerald-fg-dark,var(--zui-color-emerald-dark,oklch(76.5%_0.177_163.223)))]\",\n  gray: \"text-[color:var(--zui-divider-gray-fg,var(--zui-color-gray,oklch(44.6%_0.03_256.802)))] dark:text-[color:var(--zui-divider-gray-fg-dark,var(--zui-color-gray-dark,oklch(70.7%_0.022_261.325)))]\",\n  amber:\n    \"text-[color:var(--zui-divider-amber-fg,var(--zui-color-amber,oklch(66.6%_0.179_58.318)))] dark:text-[color:var(--zui-divider-amber-fg-dark,var(--zui-color-amber-dark,oklch(82.8%_0.189_84.429)))]\",\n  violet:\n    \"text-[color:var(--zui-divider-violet-fg,var(--zui-color-violet,oklch(54.1%_0.281_293.009)))] dark:text-[color:var(--zui-divider-violet-fg-dark,var(--zui-color-violet-dark,oklch(70.2%_0.183_293.541)))]\",\n  \"gradient-blue\":\n    \"text-[color:var(--zui-divider-gradient-blue-fg,var(--zui-color-blue,oklch(54.6%_0.245_262.881)))] dark:text-[color:var(--zui-divider-gradient-blue-fg-dark,var(--zui-color-blue-dark,oklch(70.7%_0.165_254.624)))]\",\n  \"gradient-green\":\n    \"text-[color:var(--zui-divider-gradient-green-fg,var(--zui-color-green,oklch(62.7%_0.194_149.214)))] dark:text-[color:var(--zui-divider-gradient-green-fg-dark,var(--zui-color-green-dark,oklch(79.2%_0.209_151.711)))]\",\n  \"gradient-red\":\n    \"text-[color:var(--zui-divider-gradient-red-fg,var(--zui-color-red,oklch(57.7%_0.245_27.325)))] dark:text-[color:var(--zui-divider-gradient-red-fg-dark,var(--zui-color-red-dark,oklch(70.4%_0.191_22.216)))]\",\n  \"gradient-yellow\":\n    \"text-[color:var(--zui-divider-gradient-yellow-fg,var(--zui-color-yellow,oklch(68.1%_0.162_75.834)))] dark:text-[color:var(--zui-divider-gradient-yellow-fg-dark,var(--zui-color-yellow-dark,oklch(85.2%_0.199_91.936)))]\",\n  \"gradient-purple\":\n    \"text-[color:var(--zui-divider-gradient-purple-fg,var(--zui-color-purple,oklch(55.8%_0.288_302.321)))] dark:text-[color:var(--zui-divider-gradient-purple-fg-dark,var(--zui-color-purple-dark,oklch(71.4%_0.203_305.504)))]\",\n  \"gradient-teal\":\n    \"text-[color:var(--zui-divider-gradient-teal-fg,var(--zui-color-teal,oklch(60%_0.118_184.704)))] dark:text-[color:var(--zui-divider-gradient-teal-fg-dark,var(--zui-color-teal-dark,oklch(77.7%_0.152_181.912)))]\",\n  \"gradient-indigo\":\n    \"text-[color:var(--zui-divider-gradient-indigo-fg,var(--zui-color-indigo,oklch(51.1%_0.262_276.966)))] dark:text-[color:var(--zui-divider-gradient-indigo-fg-dark,var(--zui-color-indigo-dark,oklch(67.3%_0.182_276.935)))]\",\n  \"gradient-pink\":\n    \"text-[color:var(--zui-divider-gradient-pink-fg,var(--zui-color-pink,oklch(59.2%_0.249_0.584)))] dark:text-[color:var(--zui-divider-gradient-pink-fg-dark,var(--zui-color-pink-dark,oklch(71.8%_0.202_349.761)))]\",\n  \"gradient-orange\":\n    \"text-[color:var(--zui-divider-gradient-orange-fg,var(--zui-color-orange,oklch(64.6%_0.222_41.116)))] dark:text-[color:var(--zui-divider-gradient-orange-fg-dark,var(--zui-color-orange-dark,oklch(75%_0.183_55.934)))]\",\n  blue: \"text-[color:var(--zui-divider-blue-fg,var(--zui-color-blue,#2563eb))] dark:text-[color:var(--zui-divider-blue-fg-dark,var(--zui-color-blue-dark,#3b82f6))]\",\n  cyan: \"text-[color:var(--zui-divider-cyan-fg,var(--zui-color-cyan,#0891b2))] dark:text-[color:var(--zui-divider-cyan-fg-dark,var(--zui-color-cyan-dark,#22d3ee))]\",\n  green:\n    \"text-[color:var(--zui-divider-green-fg,var(--zui-color-green,#16a34a))] dark:text-[color:var(--zui-divider-green-fg-dark,var(--zui-color-green-dark,#22c55e))]\",\n  lime: \"text-[color:var(--zui-divider-lime-fg,var(--zui-color-lime,#65a30d))] dark:text-[color:var(--zui-divider-lime-fg-dark,var(--zui-color-lime-dark,#a3e635))]\",\n  mint: \"text-[color:var(--zui-divider-mint-fg,var(--zui-color-mint,#10b981))] dark:text-[color:var(--zui-divider-mint-fg-dark,var(--zui-color-mint-dark,#6ee7b7))]\",\n  ocean:\n    \"text-[color:var(--zui-divider-ocean-fg,var(--zui-color-ocean,#0284c7))] dark:text-[color:var(--zui-divider-ocean-fg-dark,var(--zui-color-ocean-dark,#38bdf8))]\",\n  sapphire:\n    \"text-[color:var(--zui-divider-sapphire-fg,var(--zui-color-sapphire,#1d4ed8))] dark:text-[color:var(--zui-divider-sapphire-fg-dark,var(--zui-color-sapphire-dark,#60a5fa))]\",\n  lavender:\n    \"text-[color:var(--zui-divider-lavender-fg,var(--zui-color-lavender,#8b5cf6))] dark:text-[color:var(--zui-divider-lavender-fg-dark,var(--zui-color-lavender-dark,#a78bfa))]\",\n  ruby: \"text-[color:var(--zui-divider-ruby-fg,var(--zui-color-ruby,#be123c))] dark:text-[color:var(--zui-divider-ruby-fg-dark,var(--zui-color-ruby-dark,#fb7185))]\",\n  red: \"text-[color:var(--zui-divider-red-fg,var(--zui-color-red,#dc2626))] dark:text-[color:var(--zui-divider-red-fg-dark,var(--zui-color-red-dark,#ef4444))]\",\n  slate:\n    \"text-[color:var(--zui-divider-slate-fg,var(--zui-color-slate,#475569))] dark:text-[color:var(--zui-divider-slate-fg-dark,var(--zui-color-slate-dark,#64748b))]\",\n  zinc: \"text-[color:var(--zui-divider-zinc-fg,var(--zui-color-zinc,#52525b))] dark:text-[color:var(--zui-divider-zinc-fg-dark,var(--zui-color-zinc-dark,#71717a))]\",\n  stone:\n    \"text-[color:var(--zui-divider-stone-fg,var(--zui-color-stone,#57534e))] dark:text-[color:var(--zui-divider-stone-fg-dark,var(--zui-color-stone-dark,#78716c))]\",\n  royal:\n    \"text-[color:var(--zui-divider-royal-fg,var(--zui-color-royal,#4338ca))] dark:text-[color:var(--zui-divider-royal-fg-dark,var(--zui-color-royal-dark,#818cf8))]\",\n  electric:\n    \"text-[color:var(--zui-divider-electric-fg,var(--zui-color-electric,#0ea5e9))] dark:text-[color:var(--zui-divider-electric-fg-dark,var(--zui-color-electric-dark,#38bdf8))]\",\n  forest:\n    \"text-[color:var(--zui-divider-forest-fg,var(--zui-color-forest,#166534))] dark:text-[color:var(--zui-divider-forest-fg-dark,var(--zui-color-forest-dark,#4ade80))]\",\n  sunset:\n    \"text-[color:var(--zui-divider-sunset-fg,var(--zui-color-sunset,#ea580c))] dark:text-[color:var(--zui-divider-sunset-fg-dark,var(--zui-color-sunset-dark,#fb923c))]\",\n  magenta:\n    \"text-[color:var(--zui-divider-magenta-fg,var(--zui-color-magenta,#c026d3))] dark:text-[color:var(--zui-divider-magenta-fg-dark,var(--zui-color-magenta-dark,#e879f9))]\",\n  crimson:\n    \"text-[color:var(--zui-divider-crimson-fg,var(--zui-color-crimson,#b91c1c))] dark:text-[color:var(--zui-divider-crimson-fg-dark,var(--zui-color-crimson-dark,#f87171))]\",\n  aqua: \"text-[color:var(--zui-divider-aqua-fg,var(--zui-color-aqua,#0f766e))] dark:text-[color:var(--zui-divider-aqua-fg-dark,var(--zui-color-aqua-dark,#2dd4bf))]\",\n  plum: \"text-[color:var(--zui-divider-plum-fg,var(--zui-color-plum,#7e22ce))] dark:text-[color:var(--zui-divider-plum-fg-dark,var(--zui-color-plum-dark,#c084fc))]\",\n} as const;\n\nexport const zuiDividerBase = \"flex w-full items-center gap-3\";\n\nexport const zuiDividerOrientations = {\n  horizontal: \"w-full flex-row\",\n  vertical: \"h-full min-h-[2rem] w-auto flex-col self-stretch\",\n} as const;\n\nexport const zuiDividerSizes = {\n  sm: \"\",\n  md: \"\",\n  lg: \"\",\n} as const;\n\nexport const zuiDividerLineBase =\n  \"shrink grow rounded-full bg-current opacity-80\";\n\nexport const zuiDividerLineOrientations = {\n  horizontal: \"h-px\",\n  vertical: \"w-px flex-1\",\n} as const;\n\nexport const zuiDividerLabelBase =\n  \"shrink-0 text-xs font-medium uppercase tracking-wide text-current\";\n"]}