@zentauri-ui/zentauri-components 1.9.0 → 1.9.1

package/src/design-system/tooltip.ts

@@ -44,6 +44,37 @@ export const zuiTooltipVariants = {
     "bg-linear-to-r from-[var(--zui-tooltip-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-tooltip-gradient-pink-from-dark,oklch(45.9%_0.187_3.815))] to-[var(--zui-tooltip-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-tooltip-gradient-pink-to-dark,oklch(45.5%_0.188_13.697))] text-[color:var(--zui-tooltip-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-pink-fg-dark,#ffffff)]",
   "gradient-orange":
     "bg-linear-to-r from-[var(--zui-tooltip-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-tooltip-gradient-orange-from-dark,oklch(47%_0.157_37.304))] to-[var(--zui-tooltip-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-tooltip-gradient-orange-to-dark,oklch(44.4%_0.177_26.899))] text-[color:var(--zui-tooltip-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-tooltip-gradient-orange-fg-dark,#ffffff)]",
+  blue: "border border-[color:var(--zui-tooltip-blue-border,#2563eb)] dark:border-[color:var(--zui-tooltip-blue-border-dark,#3b82f6)] bg-[var(--zui-tooltip-blue-bg,#2563eb14)] dark:bg-[var(--zui-tooltip-blue-bg-dark,#3b82f624)] text-[color:var(--zui-tooltip-blue-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-blue-fg-dark,#f8fafc)]",
+  cyan: "border border-[color:var(--zui-tooltip-cyan-border,#0891b2)] dark:border-[color:var(--zui-tooltip-cyan-border-dark,#22d3ee)] bg-[var(--zui-tooltip-cyan-bg,#0891b214)] dark:bg-[var(--zui-tooltip-cyan-bg-dark,#22d3ee24)] text-[color:var(--zui-tooltip-cyan-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-cyan-fg-dark,#f8fafc)]",
+  lime: "border border-[color:var(--zui-tooltip-lime-border,#65a30d)] dark:border-[color:var(--zui-tooltip-lime-border-dark,#a3e635)] bg-[var(--zui-tooltip-lime-bg,#65a30d14)] dark:bg-[var(--zui-tooltip-lime-bg-dark,#a3e63524)] text-[color:var(--zui-tooltip-lime-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-lime-fg-dark,#f8fafc)]",
+  mint: "border border-[color:var(--zui-tooltip-mint-border,#10b981)] dark:border-[color:var(--zui-tooltip-mint-border-dark,#6ee7b7)] bg-[var(--zui-tooltip-mint-bg,#10b98114)] dark:bg-[var(--zui-tooltip-mint-bg-dark,#6ee7b724)] text-[color:var(--zui-tooltip-mint-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-mint-fg-dark,#f8fafc)]",
+  ocean:
+    "border border-[color:var(--zui-tooltip-ocean-border,#0284c7)] dark:border-[color:var(--zui-tooltip-ocean-border-dark,#38bdf8)] bg-[var(--zui-tooltip-ocean-bg,#0284c714)] dark:bg-[var(--zui-tooltip-ocean-bg-dark,#38bdf824)] text-[color:var(--zui-tooltip-ocean-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-ocean-fg-dark,#f8fafc)]",
+  sapphire:
+    "border border-[color:var(--zui-tooltip-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-tooltip-sapphire-border-dark,#60a5fa)] bg-[var(--zui-tooltip-sapphire-bg,#1d4ed814)] dark:bg-[var(--zui-tooltip-sapphire-bg-dark,#60a5fa24)] text-[color:var(--zui-tooltip-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-sapphire-fg-dark,#f8fafc)]",
+  lavender:
+    "border border-[color:var(--zui-tooltip-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-tooltip-lavender-border-dark,#a78bfa)] bg-[var(--zui-tooltip-lavender-bg,#8b5cf614)] dark:bg-[var(--zui-tooltip-lavender-bg-dark,#a78bfa24)] text-[color:var(--zui-tooltip-lavender-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-lavender-fg-dark,#f8fafc)]",
+  ruby: "border border-[color:var(--zui-tooltip-ruby-border,#be123c)] dark:border-[color:var(--zui-tooltip-ruby-border-dark,#fb7185)] bg-[var(--zui-tooltip-ruby-bg,#be123c14)] dark:bg-[var(--zui-tooltip-ruby-bg-dark,#fb718524)] text-[color:var(--zui-tooltip-ruby-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-ruby-fg-dark,#f8fafc)]",
+  red: "border border-[color:var(--zui-tooltip-red-border,#dc2626)] dark:border-[color:var(--zui-tooltip-red-border-dark,#ef4444)] bg-[var(--zui-tooltip-red-bg,#dc262614)] dark:bg-[var(--zui-tooltip-red-bg-dark,#ef444424)] text-[color:var(--zui-tooltip-red-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-red-fg-dark,#f8fafc)]",
+  slate:
+    "border border-[color:var(--zui-tooltip-slate-border,#475569)] dark:border-[color:var(--zui-tooltip-slate-border-dark,#64748b)] bg-[var(--zui-tooltip-slate-bg,#47556914)] dark:bg-[var(--zui-tooltip-slate-bg-dark,#64748b24)] text-[color:var(--zui-tooltip-slate-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-slate-fg-dark,#f8fafc)]",
+  zinc: "border border-[color:var(--zui-tooltip-zinc-border,#52525b)] dark:border-[color:var(--zui-tooltip-zinc-border-dark,#71717a)] bg-[var(--zui-tooltip-zinc-bg,#52525b14)] dark:bg-[var(--zui-tooltip-zinc-bg-dark,#71717a24)] text-[color:var(--zui-tooltip-zinc-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-zinc-fg-dark,#f8fafc)]",
+  stone:
+    "border border-[color:var(--zui-tooltip-stone-border,#57534e)] dark:border-[color:var(--zui-tooltip-stone-border-dark,#78716c)] bg-[var(--zui-tooltip-stone-bg,#57534e14)] dark:bg-[var(--zui-tooltip-stone-bg-dark,#78716c24)] text-[color:var(--zui-tooltip-stone-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-stone-fg-dark,#f8fafc)]",
+  royal:
+    "border border-[color:var(--zui-tooltip-royal-border,#4338ca)] dark:border-[color:var(--zui-tooltip-royal-border-dark,#818cf8)] bg-[var(--zui-tooltip-royal-bg,#4338ca14)] dark:bg-[var(--zui-tooltip-royal-bg-dark,#818cf824)] text-[color:var(--zui-tooltip-royal-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-royal-fg-dark,#f8fafc)]",
+  electric:
+    "border border-[color:var(--zui-tooltip-electric-border,#0ea5e9)] dark:border-[color:var(--zui-tooltip-electric-border-dark,#38bdf8)] bg-[var(--zui-tooltip-electric-bg,#0ea5e914)] dark:bg-[var(--zui-tooltip-electric-bg-dark,#38bdf824)] text-[color:var(--zui-tooltip-electric-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-electric-fg-dark,#f8fafc)]",
+  forest:
+    "border border-[color:var(--zui-tooltip-forest-border,#166534)] dark:border-[color:var(--zui-tooltip-forest-border-dark,#4ade80)] bg-[var(--zui-tooltip-forest-bg,#16653414)] dark:bg-[var(--zui-tooltip-forest-bg-dark,#4ade8024)] text-[color:var(--zui-tooltip-forest-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-forest-fg-dark,#f8fafc)]",
+  sunset:
+    "border border-[color:var(--zui-tooltip-sunset-border,#ea580c)] dark:border-[color:var(--zui-tooltip-sunset-border-dark,#fb923c)] bg-[var(--zui-tooltip-sunset-bg,#ea580c14)] dark:bg-[var(--zui-tooltip-sunset-bg-dark,#fb923c24)] text-[color:var(--zui-tooltip-sunset-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-sunset-fg-dark,#f8fafc)]",
+  magenta:
+    "border border-[color:var(--zui-tooltip-magenta-border,#c026d3)] dark:border-[color:var(--zui-tooltip-magenta-border-dark,#e879f9)] bg-[var(--zui-tooltip-magenta-bg,#c026d314)] dark:bg-[var(--zui-tooltip-magenta-bg-dark,#e879f924)] text-[color:var(--zui-tooltip-magenta-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-magenta-fg-dark,#f8fafc)]",
+  crimson:
+    "border border-[color:var(--zui-tooltip-crimson-border,#b91c1c)] dark:border-[color:var(--zui-tooltip-crimson-border-dark,#f87171)] bg-[var(--zui-tooltip-crimson-bg,#b91c1c14)] dark:bg-[var(--zui-tooltip-crimson-bg-dark,#f8717124)] text-[color:var(--zui-tooltip-crimson-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-crimson-fg-dark,#f8fafc)]",
+  aqua: "border border-[color:var(--zui-tooltip-aqua-border,#0f766e)] dark:border-[color:var(--zui-tooltip-aqua-border-dark,#2dd4bf)] bg-[var(--zui-tooltip-aqua-bg,#0f766e14)] dark:bg-[var(--zui-tooltip-aqua-bg-dark,#2dd4bf24)] text-[color:var(--zui-tooltip-aqua-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-aqua-fg-dark,#f8fafc)]",
+  plum: "border border-[color:var(--zui-tooltip-plum-border,#7e22ce)] dark:border-[color:var(--zui-tooltip-plum-border-dark,#c084fc)] bg-[var(--zui-tooltip-plum-bg,#7e22ce14)] dark:bg-[var(--zui-tooltip-plum-bg-dark,#c084fc24)] text-[color:var(--zui-tooltip-plum-fg,#0f172a)] dark:text-[color:var(--zui-tooltip-plum-fg-dark,#f8fafc)]",
 } as const;
 
 export const zuiTooltipSizes = {

package/src/design-system/tree-view.ts

@@ -42,6 +42,39 @@ export const zuiTreeViewAppearances = {
     "rounded-xl border border-[color:var(--zui-tree-view-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-tree-view-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] p-2",
   "gradient-orange":
     "rounded-xl border border-[color:var(--zui-tree-view-gradient-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-tree-view-gradient-orange-border-dark,oklch(64.6%_0.222_41.116))] p-2",
+  blue: "rounded-xl border border-[color:var(--zui-tree-view-blue-border,#2563eb)] dark:border-[color:var(--zui-tree-view-blue-border-dark,#3b82f6)] bg-[var(--zui-tree-view-blue-bg,transparent)] dark:bg-[var(--zui-tree-view-blue-bg-dark,transparent)] text-[color:var(--zui-tree-view-blue-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-blue-fg-dark,#f8fafc)] p-2",
+  cyan: "rounded-xl border border-[color:var(--zui-tree-view-cyan-border,#0891b2)] dark:border-[color:var(--zui-tree-view-cyan-border-dark,#22d3ee)] bg-[var(--zui-tree-view-cyan-bg,transparent)] dark:bg-[var(--zui-tree-view-cyan-bg-dark,transparent)] text-[color:var(--zui-tree-view-cyan-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-cyan-fg-dark,#f8fafc)] p-2",
+  green:
+    "rounded-xl border border-[color:var(--zui-tree-view-green-border,#16a34a)] dark:border-[color:var(--zui-tree-view-green-border-dark,#22c55e)] bg-[var(--zui-tree-view-green-bg,transparent)] dark:bg-[var(--zui-tree-view-green-bg-dark,transparent)] text-[color:var(--zui-tree-view-green-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-green-fg-dark,#f8fafc)] p-2",
+  lime: "rounded-xl border border-[color:var(--zui-tree-view-lime-border,#65a30d)] dark:border-[color:var(--zui-tree-view-lime-border-dark,#a3e635)] bg-[var(--zui-tree-view-lime-bg,transparent)] dark:bg-[var(--zui-tree-view-lime-bg-dark,transparent)] text-[color:var(--zui-tree-view-lime-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-lime-fg-dark,#f8fafc)] p-2",
+  mint: "rounded-xl border border-[color:var(--zui-tree-view-mint-border,#10b981)] dark:border-[color:var(--zui-tree-view-mint-border-dark,#6ee7b7)] bg-[var(--zui-tree-view-mint-bg,transparent)] dark:bg-[var(--zui-tree-view-mint-bg-dark,transparent)] text-[color:var(--zui-tree-view-mint-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-mint-fg-dark,#f8fafc)] p-2",
+  ocean:
+    "rounded-xl border border-[color:var(--zui-tree-view-ocean-border,#0284c7)] dark:border-[color:var(--zui-tree-view-ocean-border-dark,#38bdf8)] bg-[var(--zui-tree-view-ocean-bg,transparent)] dark:bg-[var(--zui-tree-view-ocean-bg-dark,transparent)] text-[color:var(--zui-tree-view-ocean-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-ocean-fg-dark,#f8fafc)] p-2",
+  sapphire:
+    "rounded-xl border border-[color:var(--zui-tree-view-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-tree-view-sapphire-border-dark,#60a5fa)] bg-[var(--zui-tree-view-sapphire-bg,transparent)] dark:bg-[var(--zui-tree-view-sapphire-bg-dark,transparent)] text-[color:var(--zui-tree-view-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-sapphire-fg-dark,#f8fafc)] p-2",
+  lavender:
+    "rounded-xl border border-[color:var(--zui-tree-view-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-tree-view-lavender-border-dark,#a78bfa)] bg-[var(--zui-tree-view-lavender-bg,transparent)] dark:bg-[var(--zui-tree-view-lavender-bg-dark,transparent)] text-[color:var(--zui-tree-view-lavender-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-lavender-fg-dark,#f8fafc)] p-2",
+  ruby: "rounded-xl border border-[color:var(--zui-tree-view-ruby-border,#be123c)] dark:border-[color:var(--zui-tree-view-ruby-border-dark,#fb7185)] bg-[var(--zui-tree-view-ruby-bg,transparent)] dark:bg-[var(--zui-tree-view-ruby-bg-dark,transparent)] text-[color:var(--zui-tree-view-ruby-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-ruby-fg-dark,#f8fafc)] p-2",
+  red: "rounded-xl border border-[color:var(--zui-tree-view-red-border,#dc2626)] dark:border-[color:var(--zui-tree-view-red-border-dark,#ef4444)] bg-[var(--zui-tree-view-red-bg,transparent)] dark:bg-[var(--zui-tree-view-red-bg-dark,transparent)] text-[color:var(--zui-tree-view-red-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-red-fg-dark,#f8fafc)] p-2",
+  slate:
+    "rounded-xl border border-[color:var(--zui-tree-view-slate-border,#475569)] dark:border-[color:var(--zui-tree-view-slate-border-dark,#64748b)] bg-[var(--zui-tree-view-slate-bg,transparent)] dark:bg-[var(--zui-tree-view-slate-bg-dark,transparent)] text-[color:var(--zui-tree-view-slate-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-slate-fg-dark,#f8fafc)] p-2",
+  zinc: "rounded-xl border border-[color:var(--zui-tree-view-zinc-border,#52525b)] dark:border-[color:var(--zui-tree-view-zinc-border-dark,#71717a)] bg-[var(--zui-tree-view-zinc-bg,transparent)] dark:bg-[var(--zui-tree-view-zinc-bg-dark,transparent)] text-[color:var(--zui-tree-view-zinc-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-zinc-fg-dark,#f8fafc)] p-2",
+  stone:
+    "rounded-xl border border-[color:var(--zui-tree-view-stone-border,#57534e)] dark:border-[color:var(--zui-tree-view-stone-border-dark,#78716c)] bg-[var(--zui-tree-view-stone-bg,transparent)] dark:bg-[var(--zui-tree-view-stone-bg-dark,transparent)] text-[color:var(--zui-tree-view-stone-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-stone-fg-dark,#f8fafc)] p-2",
+  royal:
+    "rounded-xl border border-[color:var(--zui-tree-view-royal-border,#4338ca)] dark:border-[color:var(--zui-tree-view-royal-border-dark,#818cf8)] bg-[var(--zui-tree-view-royal-bg,transparent)] dark:bg-[var(--zui-tree-view-royal-bg-dark,transparent)] text-[color:var(--zui-tree-view-royal-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-royal-fg-dark,#f8fafc)] p-2",
+  electric:
+    "rounded-xl border border-[color:var(--zui-tree-view-electric-border,#0ea5e9)] dark:border-[color:var(--zui-tree-view-electric-border-dark,#38bdf8)] bg-[var(--zui-tree-view-electric-bg,transparent)] dark:bg-[var(--zui-tree-view-electric-bg-dark,transparent)] text-[color:var(--zui-tree-view-electric-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-electric-fg-dark,#f8fafc)] p-2",
+  forest:
+    "rounded-xl border border-[color:var(--zui-tree-view-forest-border,#166534)] dark:border-[color:var(--zui-tree-view-forest-border-dark,#4ade80)] bg-[var(--zui-tree-view-forest-bg,transparent)] dark:bg-[var(--zui-tree-view-forest-bg-dark,transparent)] text-[color:var(--zui-tree-view-forest-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-forest-fg-dark,#f8fafc)] p-2",
+  sunset:
+    "rounded-xl border border-[color:var(--zui-tree-view-sunset-border,#ea580c)] dark:border-[color:var(--zui-tree-view-sunset-border-dark,#fb923c)] bg-[var(--zui-tree-view-sunset-bg,transparent)] dark:bg-[var(--zui-tree-view-sunset-bg-dark,transparent)] text-[color:var(--zui-tree-view-sunset-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-sunset-fg-dark,#f8fafc)] p-2",
+  magenta:
+    "rounded-xl border border-[color:var(--zui-tree-view-magenta-border,#c026d3)] dark:border-[color:var(--zui-tree-view-magenta-border-dark,#e879f9)] bg-[var(--zui-tree-view-magenta-bg,transparent)] dark:bg-[var(--zui-tree-view-magenta-bg-dark,transparent)] text-[color:var(--zui-tree-view-magenta-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-magenta-fg-dark,#f8fafc)] p-2",
+  crimson:
+    "rounded-xl border border-[color:var(--zui-tree-view-crimson-border,#b91c1c)] dark:border-[color:var(--zui-tree-view-crimson-border-dark,#f87171)] bg-[var(--zui-tree-view-crimson-bg,transparent)] dark:bg-[var(--zui-tree-view-crimson-bg-dark,transparent)] text-[color:var(--zui-tree-view-crimson-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-crimson-fg-dark,#f8fafc)] p-2",
+  aqua: "rounded-xl border border-[color:var(--zui-tree-view-aqua-border,#0f766e)] dark:border-[color:var(--zui-tree-view-aqua-border-dark,#2dd4bf)] bg-[var(--zui-tree-view-aqua-bg,transparent)] dark:bg-[var(--zui-tree-view-aqua-bg-dark,transparent)] text-[color:var(--zui-tree-view-aqua-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-aqua-fg-dark,#f8fafc)] p-2",
+  plum: "rounded-xl border border-[color:var(--zui-tree-view-plum-border,#7e22ce)] dark:border-[color:var(--zui-tree-view-plum-border-dark,#c084fc)] bg-[var(--zui-tree-view-plum-bg,transparent)] dark:bg-[var(--zui-tree-view-plum-bg-dark,transparent)] text-[color:var(--zui-tree-view-plum-fg,#0f172a)] dark:text-[color:var(--zui-tree-view-plum-fg-dark,#f8fafc)] p-2",
 } as const;
 
 export const zuiTreeViewSizes = {
@@ -101,6 +134,39 @@ export const zuiTreeViewItemAppearances = {
     "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-pink-from,oklch(82.3%_0.12_346.018))] data-[selected=true]:to-[var(--zui-tree-view-gradient-pink-to,oklch(81%_0.117_11.638))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
   "gradient-orange":
     "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-orange-from,oklch(83.7%_0.128_66.29))] data-[selected=true]:to-[var(--zui-tree-view-gradient-orange-to,oklch(80.8%_0.114_19.571))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]",
+  blue: "hover:bg-[var(--zui-tree-view-item-blue-bg-hover,#2563eb18)] dark:hover:bg-[var(--zui-tree-view-item-blue-bg-hover-dark,#3b82f62e)] hover:text-[color:var(--zui-tree-view-item-blue-fg-hover,#2563eb)] dark:hover:text-[color:var(--zui-tree-view-item-blue-fg-hover-dark,#3b82f6)] data-[selected=true]:bg-[var(--zui-tree-view-item-blue-bg,#2563eb14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-blue-bg-dark,#3b82f624)] data-[selected=true]:text-[color:var(--zui-tree-view-item-blue-fg,#2563eb)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-blue-fg-dark,#3b82f6)]",
+  cyan: "hover:bg-[var(--zui-tree-view-item-cyan-bg-hover,#0891b218)] dark:hover:bg-[var(--zui-tree-view-item-cyan-bg-hover-dark,#22d3ee2e)] hover:text-[color:var(--zui-tree-view-item-cyan-fg-hover,#0891b2)] dark:hover:text-[color:var(--zui-tree-view-item-cyan-fg-hover-dark,#22d3ee)] data-[selected=true]:bg-[var(--zui-tree-view-item-cyan-bg,#0891b214)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-cyan-bg-dark,#22d3ee24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-cyan-fg,#0891b2)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-cyan-fg-dark,#22d3ee)]",
+  green:
+    "hover:bg-[var(--zui-tree-view-item-green-bg-hover,#16a34a18)] dark:hover:bg-[var(--zui-tree-view-item-green-bg-hover-dark,#22c55e2e)] hover:text-[color:var(--zui-tree-view-item-green-fg-hover,#16a34a)] dark:hover:text-[color:var(--zui-tree-view-item-green-fg-hover-dark,#22c55e)] data-[selected=true]:bg-[var(--zui-tree-view-item-green-bg,#16a34a14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-green-bg-dark,#22c55e24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-green-fg,#16a34a)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-green-fg-dark,#22c55e)]",
+  lime: "hover:bg-[var(--zui-tree-view-item-lime-bg-hover,#65a30d18)] dark:hover:bg-[var(--zui-tree-view-item-lime-bg-hover-dark,#a3e6352e)] hover:text-[color:var(--zui-tree-view-item-lime-fg-hover,#65a30d)] dark:hover:text-[color:var(--zui-tree-view-item-lime-fg-hover-dark,#a3e635)] data-[selected=true]:bg-[var(--zui-tree-view-item-lime-bg,#65a30d14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-lime-bg-dark,#a3e63524)] data-[selected=true]:text-[color:var(--zui-tree-view-item-lime-fg,#65a30d)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-lime-fg-dark,#a3e635)]",
+  mint: "hover:bg-[var(--zui-tree-view-item-mint-bg-hover,#10b98118)] dark:hover:bg-[var(--zui-tree-view-item-mint-bg-hover-dark,#6ee7b72e)] hover:text-[color:var(--zui-tree-view-item-mint-fg-hover,#10b981)] dark:hover:text-[color:var(--zui-tree-view-item-mint-fg-hover-dark,#6ee7b7)] data-[selected=true]:bg-[var(--zui-tree-view-item-mint-bg,#10b98114)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-mint-bg-dark,#6ee7b724)] data-[selected=true]:text-[color:var(--zui-tree-view-item-mint-fg,#10b981)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-mint-fg-dark,#6ee7b7)]",
+  ocean:
+    "hover:bg-[var(--zui-tree-view-item-ocean-bg-hover,#0284c718)] dark:hover:bg-[var(--zui-tree-view-item-ocean-bg-hover-dark,#38bdf82e)] hover:text-[color:var(--zui-tree-view-item-ocean-fg-hover,#0284c7)] dark:hover:text-[color:var(--zui-tree-view-item-ocean-fg-hover-dark,#38bdf8)] data-[selected=true]:bg-[var(--zui-tree-view-item-ocean-bg,#0284c714)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-ocean-bg-dark,#38bdf824)] data-[selected=true]:text-[color:var(--zui-tree-view-item-ocean-fg,#0284c7)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-ocean-fg-dark,#38bdf8)]",
+  sapphire:
+    "hover:bg-[var(--zui-tree-view-item-sapphire-bg-hover,#1d4ed818)] dark:hover:bg-[var(--zui-tree-view-item-sapphire-bg-hover-dark,#60a5fa2e)] hover:text-[color:var(--zui-tree-view-item-sapphire-fg-hover,#1d4ed8)] dark:hover:text-[color:var(--zui-tree-view-item-sapphire-fg-hover-dark,#60a5fa)] data-[selected=true]:bg-[var(--zui-tree-view-item-sapphire-bg,#1d4ed814)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-sapphire-bg-dark,#60a5fa24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-sapphire-fg,#1d4ed8)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-sapphire-fg-dark,#60a5fa)]",
+  lavender:
+    "hover:bg-[var(--zui-tree-view-item-lavender-bg-hover,#8b5cf618)] dark:hover:bg-[var(--zui-tree-view-item-lavender-bg-hover-dark,#a78bfa2e)] hover:text-[color:var(--zui-tree-view-item-lavender-fg-hover,#8b5cf6)] dark:hover:text-[color:var(--zui-tree-view-item-lavender-fg-hover-dark,#a78bfa)] data-[selected=true]:bg-[var(--zui-tree-view-item-lavender-bg,#8b5cf614)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-lavender-bg-dark,#a78bfa24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-lavender-fg,#8b5cf6)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-lavender-fg-dark,#a78bfa)]",
+  ruby: "hover:bg-[var(--zui-tree-view-item-ruby-bg-hover,#be123c18)] dark:hover:bg-[var(--zui-tree-view-item-ruby-bg-hover-dark,#fb71852e)] hover:text-[color:var(--zui-tree-view-item-ruby-fg-hover,#be123c)] dark:hover:text-[color:var(--zui-tree-view-item-ruby-fg-hover-dark,#fb7185)] data-[selected=true]:bg-[var(--zui-tree-view-item-ruby-bg,#be123c14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-ruby-bg-dark,#fb718524)] data-[selected=true]:text-[color:var(--zui-tree-view-item-ruby-fg,#be123c)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-ruby-fg-dark,#fb7185)]",
+  red: "hover:bg-[var(--zui-tree-view-item-red-bg-hover,#dc262618)] dark:hover:bg-[var(--zui-tree-view-item-red-bg-hover-dark,#ef44442e)] hover:text-[color:var(--zui-tree-view-item-red-fg-hover,#dc2626)] dark:hover:text-[color:var(--zui-tree-view-item-red-fg-hover-dark,#ef4444)] data-[selected=true]:bg-[var(--zui-tree-view-item-red-bg,#dc262614)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-red-bg-dark,#ef444424)] data-[selected=true]:text-[color:var(--zui-tree-view-item-red-fg,#dc2626)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-red-fg-dark,#ef4444)]",
+  slate:
+    "hover:bg-[var(--zui-tree-view-item-slate-bg-hover,#47556918)] dark:hover:bg-[var(--zui-tree-view-item-slate-bg-hover-dark,#64748b2e)] hover:text-[color:var(--zui-tree-view-item-slate-fg-hover,#475569)] dark:hover:text-[color:var(--zui-tree-view-item-slate-fg-hover-dark,#64748b)] data-[selected=true]:bg-[var(--zui-tree-view-item-slate-bg,#47556914)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-slate-bg-dark,#64748b24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-slate-fg,#475569)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-slate-fg-dark,#64748b)]",
+  zinc: "hover:bg-[var(--zui-tree-view-item-zinc-bg-hover,#52525b18)] dark:hover:bg-[var(--zui-tree-view-item-zinc-bg-hover-dark,#71717a2e)] hover:text-[color:var(--zui-tree-view-item-zinc-fg-hover,#52525b)] dark:hover:text-[color:var(--zui-tree-view-item-zinc-fg-hover-dark,#71717a)] data-[selected=true]:bg-[var(--zui-tree-view-item-zinc-bg,#52525b14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-zinc-bg-dark,#71717a24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-zinc-fg,#52525b)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-zinc-fg-dark,#71717a)]",
+  stone:
+    "hover:bg-[var(--zui-tree-view-item-stone-bg-hover,#57534e18)] dark:hover:bg-[var(--zui-tree-view-item-stone-bg-hover-dark,#78716c2e)] hover:text-[color:var(--zui-tree-view-item-stone-fg-hover,#57534e)] dark:hover:text-[color:var(--zui-tree-view-item-stone-fg-hover-dark,#78716c)] data-[selected=true]:bg-[var(--zui-tree-view-item-stone-bg,#57534e14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-stone-bg-dark,#78716c24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-stone-fg,#57534e)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-stone-fg-dark,#78716c)]",
+  royal:
+    "hover:bg-[var(--zui-tree-view-item-royal-bg-hover,#4338ca18)] dark:hover:bg-[var(--zui-tree-view-item-royal-bg-hover-dark,#818cf82e)] hover:text-[color:var(--zui-tree-view-item-royal-fg-hover,#4338ca)] dark:hover:text-[color:var(--zui-tree-view-item-royal-fg-hover-dark,#818cf8)] data-[selected=true]:bg-[var(--zui-tree-view-item-royal-bg,#4338ca14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-royal-bg-dark,#818cf824)] data-[selected=true]:text-[color:var(--zui-tree-view-item-royal-fg,#4338ca)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-royal-fg-dark,#818cf8)]",
+  electric:
+    "hover:bg-[var(--zui-tree-view-item-electric-bg-hover,#0ea5e918)] dark:hover:bg-[var(--zui-tree-view-item-electric-bg-hover-dark,#38bdf82e)] hover:text-[color:var(--zui-tree-view-item-electric-fg-hover,#0ea5e9)] dark:hover:text-[color:var(--zui-tree-view-item-electric-fg-hover-dark,#38bdf8)] data-[selected=true]:bg-[var(--zui-tree-view-item-electric-bg,#0ea5e914)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-electric-bg-dark,#38bdf824)] data-[selected=true]:text-[color:var(--zui-tree-view-item-electric-fg,#0ea5e9)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-electric-fg-dark,#38bdf8)]",
+  forest:
+    "hover:bg-[var(--zui-tree-view-item-forest-bg-hover,#16653418)] dark:hover:bg-[var(--zui-tree-view-item-forest-bg-hover-dark,#4ade802e)] hover:text-[color:var(--zui-tree-view-item-forest-fg-hover,#166534)] dark:hover:text-[color:var(--zui-tree-view-item-forest-fg-hover-dark,#4ade80)] data-[selected=true]:bg-[var(--zui-tree-view-item-forest-bg,#16653414)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-forest-bg-dark,#4ade8024)] data-[selected=true]:text-[color:var(--zui-tree-view-item-forest-fg,#166534)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-forest-fg-dark,#4ade80)]",
+  sunset:
+    "hover:bg-[var(--zui-tree-view-item-sunset-bg-hover,#ea580c18)] dark:hover:bg-[var(--zui-tree-view-item-sunset-bg-hover-dark,#fb923c2e)] hover:text-[color:var(--zui-tree-view-item-sunset-fg-hover,#ea580c)] dark:hover:text-[color:var(--zui-tree-view-item-sunset-fg-hover-dark,#fb923c)] data-[selected=true]:bg-[var(--zui-tree-view-item-sunset-bg,#ea580c14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-sunset-bg-dark,#fb923c24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-sunset-fg,#ea580c)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-sunset-fg-dark,#fb923c)]",
+  magenta:
+    "hover:bg-[var(--zui-tree-view-item-magenta-bg-hover,#c026d318)] dark:hover:bg-[var(--zui-tree-view-item-magenta-bg-hover-dark,#e879f92e)] hover:text-[color:var(--zui-tree-view-item-magenta-fg-hover,#c026d3)] dark:hover:text-[color:var(--zui-tree-view-item-magenta-fg-hover-dark,#e879f9)] data-[selected=true]:bg-[var(--zui-tree-view-item-magenta-bg,#c026d314)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-magenta-bg-dark,#e879f924)] data-[selected=true]:text-[color:var(--zui-tree-view-item-magenta-fg,#c026d3)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-magenta-fg-dark,#e879f9)]",
+  crimson:
+    "hover:bg-[var(--zui-tree-view-item-crimson-bg-hover,#b91c1c18)] dark:hover:bg-[var(--zui-tree-view-item-crimson-bg-hover-dark,#f871712e)] hover:text-[color:var(--zui-tree-view-item-crimson-fg-hover,#b91c1c)] dark:hover:text-[color:var(--zui-tree-view-item-crimson-fg-hover-dark,#f87171)] data-[selected=true]:bg-[var(--zui-tree-view-item-crimson-bg,#b91c1c14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-crimson-bg-dark,#f8717124)] data-[selected=true]:text-[color:var(--zui-tree-view-item-crimson-fg,#b91c1c)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-crimson-fg-dark,#f87171)]",
+  aqua: "hover:bg-[var(--zui-tree-view-item-aqua-bg-hover,#0f766e18)] dark:hover:bg-[var(--zui-tree-view-item-aqua-bg-hover-dark,#2dd4bf2e)] hover:text-[color:var(--zui-tree-view-item-aqua-fg-hover,#0f766e)] dark:hover:text-[color:var(--zui-tree-view-item-aqua-fg-hover-dark,#2dd4bf)] data-[selected=true]:bg-[var(--zui-tree-view-item-aqua-bg,#0f766e14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-aqua-bg-dark,#2dd4bf24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-aqua-fg,#0f766e)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-aqua-fg-dark,#2dd4bf)]",
+  plum: "hover:bg-[var(--zui-tree-view-item-plum-bg-hover,#7e22ce18)] dark:hover:bg-[var(--zui-tree-view-item-plum-bg-hover-dark,#c084fc2e)] hover:text-[color:var(--zui-tree-view-item-plum-fg-hover,#7e22ce)] dark:hover:text-[color:var(--zui-tree-view-item-plum-fg-hover-dark,#c084fc)] data-[selected=true]:bg-[var(--zui-tree-view-item-plum-bg,#7e22ce14)] dark:data-[selected=true]:bg-[var(--zui-tree-view-item-plum-bg-dark,#c084fc24)] data-[selected=true]:text-[color:var(--zui-tree-view-item-plum-fg,#7e22ce)] dark:data-[selected=true]:text-[color:var(--zui-tree-view-item-plum-fg-dark,#c084fc)]",
 } as const;
 
 export const zuiTreeViewChevron =

package/src/design-system/typography.ts

@@ -10,7 +10,7 @@ export const zuiTypographyTones = {
   accent:
     "text-[color:var(--zui-typography-accent-fg,oklch(49.1%_0.27_292.581))] dark:text-[color:var(--zui-typography-accent-fg-dark,oklch(81.1%_0.111_293.571))] border-[color:var(--zui-typography-accent-border,oklch(81.1%_0.111_293.571_/_0.4))] dark:border-[color:var(--zui-typography-accent-border-dark,oklch(81.1%_0.111_293.571_/_0.4))]",
   destructive:
-    "text-[color:var(--zui-typography-destructive-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-typography-destructive-fg-dark,oklch(71.2%_0.194_13.428))] border-[color:var(--zui-typography-destructive-border,oklch(81%_0.117_11.638_/_0.4))] dark:border-[color:var(--zui-typography-destructive-border-dark,oklch(81%_0.117_11.638_/_0.4))]",
+    "text-[color:var(--zui-typography-destructive-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-typography-destructive-fg-dark,oklch(71.2%_0.194_13.428))] border-[color:var(--zui-typography-destructive-border,oklch(81%_0.117_11.638_/_0.4))] dark:border-[color:var(--zui-typography-destructive-border-dark,oklch(71.2%_0.194_13.428_/_0.4))]",
   info: "text-[color:var(--zui-typography-info-fg,oklch(50%_0.134_242.749))] dark:text-[color:var(--zui-typography-info-fg-dark,oklch(82.8%_0.111_230.318))] border-[color:var(--zui-typography-info-border,oklch(82.8%_0.111_230.318_/_0.4))] dark:border-[color:var(--zui-typography-info-border-dark,oklch(82.8%_0.111_230.318_/_0.4))]",
   success:
     "text-[color:var(--zui-typography-success-fg,oklch(50.8%_0.118_165.612))] dark:text-[color:var(--zui-typography-success-fg-dark,oklch(84.5%_0.143_164.978))] border-[color:var(--zui-typography-success-border,oklch(84.5%_0.143_164.978_/_0.4))] dark:border-[color:var(--zui-typography-success-border-dark,oklch(84.5%_0.143_164.978_/_0.4))]",

package/src/ui/dropdown/types.ts

@@ -1,5 +1,7 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from "react";
 
+import type { zuiDropdownTriggerVariants } from "../../design-system/dropdown";
+
 export type DropdownContextType = {
   open: boolean;
   setOpen: (open: boolean) => void;
@@ -10,33 +12,7 @@ export type DropdownContextType = {
   menuId: string;
 };
 
-type Variant =
-  | "default"
-  | "outline"
-  | "ghost"
-  | "white"
-  | "black"
-  | "sky"
-  | "rose"
-  | "purple"
-  | "pink"
-  | "orange"
-  | "yellow"
-  | "teal"
-  | "indigo"
-  | "emerald"
-  | "gray"
-  | "amber"
-  | "violet"
-  | "gradient-blue"
-  | "gradient-green"
-  | "gradient-red"
-  | "gradient-yellow"
-  | "gradient-purple"
-  | "gradient-teal"
-  | "gradient-indigo"
-  | "gradient-pink"
-  | "gradient-orange";
+type Variant = keyof typeof zuiDropdownTriggerVariants;
 
 export type DropdownProps = {
   children: ReactNode;

package/src/ui/inputs/variants.ts

@@ -275,5 +275,440 @@ export const inputVariants = cva(zuiInputBase, {
       appearance: "orange",
       class: zuiInputDateAppearances.orange,
     },
+    {
+      as: "file",
+      appearance: "blue",
+      class: zuiInputFileAppearances.blue,
+    },
+    {
+      as: "file",
+      appearance: "cyan",
+      class: zuiInputFileAppearances.cyan,
+    },
+    {
+      as: "file",
+      appearance: "green",
+      class: zuiInputFileAppearances.green,
+    },
+    {
+      as: "file",
+      appearance: "lime",
+      class: zuiInputFileAppearances.lime,
+    },
+    {
+      as: "file",
+      appearance: "mint",
+      class: zuiInputFileAppearances.mint,
+    },
+    {
+      as: "file",
+      appearance: "ocean",
+      class: zuiInputFileAppearances.ocean,
+    },
+    {
+      as: "file",
+      appearance: "sapphire",
+      class: zuiInputFileAppearances.sapphire,
+    },
+    {
+      as: "file",
+      appearance: "lavender",
+      class: zuiInputFileAppearances.lavender,
+    },
+    {
+      as: "file",
+      appearance: "ruby",
+      class: zuiInputFileAppearances.ruby,
+    },
+    {
+      as: "file",
+      appearance: "red",
+      class: zuiInputFileAppearances.red,
+    },
+    {
+      as: "file",
+      appearance: "slate",
+      class: zuiInputFileAppearances.slate,
+    },
+    {
+      as: "file",
+      appearance: "zinc",
+      class: zuiInputFileAppearances.zinc,
+    },
+    {
+      as: "file",
+      appearance: "stone",
+      class: zuiInputFileAppearances.stone,
+    },
+    {
+      as: "file",
+      appearance: "royal",
+      class: zuiInputFileAppearances.royal,
+    },
+    {
+      as: "file",
+      appearance: "electric",
+      class: zuiInputFileAppearances.electric,
+    },
+    {
+      as: "file",
+      appearance: "forest",
+      class: zuiInputFileAppearances.forest,
+    },
+    {
+      as: "file",
+      appearance: "sunset",
+      class: zuiInputFileAppearances.sunset,
+    },
+    {
+      as: "file",
+      appearance: "magenta",
+      class: zuiInputFileAppearances.magenta,
+    },
+    {
+      as: "file",
+      appearance: "crimson",
+      class: zuiInputFileAppearances.crimson,
+    },
+    {
+      as: "file",
+      appearance: "aqua",
+      class: zuiInputFileAppearances.aqua,
+    },
+    {
+      as: "file",
+      appearance: "plum",
+      class: zuiInputFileAppearances.plum,
+    },
+    {
+      as: "file",
+      appearance: "orange",
+      class: zuiInputFileAppearances.orange,
+    },
+    {
+      as: "checkbox",
+      appearance: "blue",
+      class: zuiInputCheckboxAppearances.blue,
+    },
+    {
+      as: "checkbox",
+      appearance: "cyan",
+      class: zuiInputCheckboxAppearances.cyan,
+    },
+    {
+      as: "checkbox",
+      appearance: "green",
+      class: zuiInputCheckboxAppearances.green,
+    },
+    {
+      as: "checkbox",
+      appearance: "lime",
+      class: zuiInputCheckboxAppearances.lime,
+    },
+    {
+      as: "checkbox",
+      appearance: "mint",
+      class: zuiInputCheckboxAppearances.mint,
+    },
+    {
+      as: "checkbox",
+      appearance: "ocean",
+      class: zuiInputCheckboxAppearances.ocean,
+    },
+    {
+      as: "checkbox",
+      appearance: "sapphire",
+      class: zuiInputCheckboxAppearances.sapphire,
+    },
+    {
+      as: "checkbox",
+      appearance: "lavender",
+      class: zuiInputCheckboxAppearances.lavender,
+    },
+    {
+      as: "checkbox",
+      appearance: "ruby",
+      class: zuiInputCheckboxAppearances.ruby,
+    },
+    {
+      as: "checkbox",
+      appearance: "red",
+      class: zuiInputCheckboxAppearances.red,
+    },
+    {
+      as: "checkbox",
+      appearance: "slate",
+      class: zuiInputCheckboxAppearances.slate,
+    },
+    {
+      as: "checkbox",
+      appearance: "zinc",
+      class: zuiInputCheckboxAppearances.zinc,
+    },
+    {
+      as: "checkbox",
+      appearance: "stone",
+      class: zuiInputCheckboxAppearances.stone,
+    },
+    {
+      as: "checkbox",
+      appearance: "royal",
+      class: zuiInputCheckboxAppearances.royal,
+    },
+    {
+      as: "checkbox",
+      appearance: "electric",
+      class: zuiInputCheckboxAppearances.electric,
+    },
+    {
+      as: "checkbox",
+      appearance: "forest",
+      class: zuiInputCheckboxAppearances.forest,
+    },
+    {
+      as: "checkbox",
+      appearance: "sunset",
+      class: zuiInputCheckboxAppearances.sunset,
+    },
+    {
+      as: "checkbox",
+      appearance: "magenta",
+      class: zuiInputCheckboxAppearances.magenta,
+    },
+    {
+      as: "checkbox",
+      appearance: "crimson",
+      class: zuiInputCheckboxAppearances.crimson,
+    },
+    {
+      as: "checkbox",
+      appearance: "aqua",
+      class: zuiInputCheckboxAppearances.aqua,
+    },
+    {
+      as: "checkbox",
+      appearance: "plum",
+      class: zuiInputCheckboxAppearances.plum,
+    },
+    {
+      as: "checkbox",
+      appearance: "orange",
+      class: zuiInputCheckboxAppearances.orange,
+    },
+    {
+      as: "radio",
+      appearance: "blue",
+      class: zuiInputRadioAppearances.blue,
+    },
+    {
+      as: "radio",
+      appearance: "cyan",
+      class: zuiInputRadioAppearances.cyan,
+    },
+    {
+      as: "radio",
+      appearance: "green",
+      class: zuiInputRadioAppearances.green,
+    },
+    {
+      as: "radio",
+      appearance: "lime",
+      class: zuiInputRadioAppearances.lime,
+    },
+    {
+      as: "radio",
+      appearance: "mint",
+      class: zuiInputRadioAppearances.mint,
+    },
+    {
+      as: "radio",
+      appearance: "ocean",
+      class: zuiInputRadioAppearances.ocean,
+    },
+    {
+      as: "radio",
+      appearance: "sapphire",
+      class: zuiInputRadioAppearances.sapphire,
+    },
+    {
+      as: "radio",
+      appearance: "lavender",
+      class: zuiInputRadioAppearances.lavender,
+    },
+    {
+      as: "radio",
+      appearance: "ruby",
+      class: zuiInputRadioAppearances.ruby,
+    },
+    {
+      as: "radio",
+      appearance: "red",
+      class: zuiInputRadioAppearances.red,
+    },
+    {
+      as: "radio",
+      appearance: "slate",
+      class: zuiInputRadioAppearances.slate,
+    },
+    {
+      as: "radio",
+      appearance: "zinc",
+      class: zuiInputRadioAppearances.zinc,
+    },
+    {
+      as: "radio",
+      appearance: "stone",
+      class: zuiInputRadioAppearances.stone,
+    },
+    {
+      as: "radio",
+      appearance: "royal",
+      class: zuiInputRadioAppearances.royal,
+    },
+    {
+      as: "radio",
+      appearance: "electric",
+      class: zuiInputRadioAppearances.electric,
+    },
+    {
+      as: "radio",
+      appearance: "forest",
+      class: zuiInputRadioAppearances.forest,
+    },
+    {
+      as: "radio",
+      appearance: "sunset",
+      class: zuiInputRadioAppearances.sunset,
+    },
+    {
+      as: "radio",
+      appearance: "magenta",
+      class: zuiInputRadioAppearances.magenta,
+    },
+    {
+      as: "radio",
+      appearance: "crimson",
+      class: zuiInputRadioAppearances.crimson,
+    },
+    {
+      as: "radio",
+      appearance: "aqua",
+      class: zuiInputRadioAppearances.aqua,
+    },
+    {
+      as: "radio",
+      appearance: "plum",
+      class: zuiInputRadioAppearances.plum,
+    },
+    {
+      as: "radio",
+      appearance: "orange",
+      class: zuiInputRadioAppearances.orange,
+    },
+    {
+      as: "date",
+      appearance: "blue",
+      class: zuiInputDateAppearances.blue,
+    },
+    {
+      as: "date",
+      appearance: "cyan",
+      class: zuiInputDateAppearances.cyan,
+    },
+    {
+      as: "date",
+      appearance: "green",
+      class: zuiInputDateAppearances.green,
+    },
+    {
+      as: "date",
+      appearance: "lime",
+      class: zuiInputDateAppearances.lime,
+    },
+    {
+      as: "date",
+      appearance: "mint",
+      class: zuiInputDateAppearances.mint,
+    },
+    {
+      as: "date",
+      appearance: "ocean",
+      class: zuiInputDateAppearances.ocean,
+    },
+    {
+      as: "date",
+      appearance: "sapphire",
+      class: zuiInputDateAppearances.sapphire,
+    },
+    {
+      as: "date",
+      appearance: "lavender",
+      class: zuiInputDateAppearances.lavender,
+    },
+    {
+      as: "date",
+      appearance: "ruby",
+      class: zuiInputDateAppearances.ruby,
+    },
+    {
+      as: "date",
+      appearance: "red",
+      class: zuiInputDateAppearances.red,
+    },
+    {
+      as: "date",
+      appearance: "slate",
+      class: zuiInputDateAppearances.slate,
+    },
+    {
+      as: "date",
+      appearance: "zinc",
+      class: zuiInputDateAppearances.zinc,
+    },
+    {
+      as: "date",
+      appearance: "stone",
+      class: zuiInputDateAppearances.stone,
+    },
+    {
+      as: "date",
+      appearance: "royal",
+      class: zuiInputDateAppearances.royal,
+    },
+    {
+      as: "date",
+      appearance: "electric",
+      class: zuiInputDateAppearances.electric,
+    },
+    {
+      as: "date",
+      appearance: "forest",
+      class: zuiInputDateAppearances.forest,
+    },
+    {
+      as: "date",
+      appearance: "sunset",
+      class: zuiInputDateAppearances.sunset,
+    },
+    {
+      as: "date",
+      appearance: "magenta",
+      class: zuiInputDateAppearances.magenta,
+    },
+    {
+      as: "date",
+      appearance: "crimson",
+      class: zuiInputDateAppearances.crimson,
+    },
+    {
+      as: "date",
+      appearance: "aqua",
+      class: zuiInputDateAppearances.aqua,
+    },
+    {
+      as: "date",
+      appearance: "plum",
+      class: zuiInputDateAppearances.plum,
+    },
   ],
 });

package/src/ui/pagination/types.ts

@@ -1,10 +1,11 @@
 import type { VariantProps } from "class-variance-authority";
 import type { ComponentPropsWithRef } from "react";
 
+import type { zuiPaginationListAppearances } from "../../design-system/pagination";
 import type { buttonVariants } from "../buttons/variants";
 
 export type PaginationAppearance = NonNullable<
-  VariantProps<typeof buttonVariants>["appearance"]
+  keyof typeof zuiPaginationListAppearances
 >;
 
 export type PaginationSize = NonNullable<
@@ -37,7 +38,8 @@ export type UsePaginationResult = {
 };
 
 export type PaginationProps = Omit<ComponentPropsWithRef<"nav">, "onChange"> &
-  VariantProps<typeof buttonVariants> & {
+  Omit<VariantProps<typeof buttonVariants>, "appearance"> & {
+    appearance?: PaginationAppearance;
     pageCount: number;
     page?: number;
     defaultPage?: number;