@zentauri-ui/zentauri-components 1.9.0 → 1.9.1

package/dist/design-system/tree-view.d.ts

@@ -23,6 +23,27 @@ export declare const zuiTreeViewAppearances: {
     readonly "gradient-indigo": "rounded-xl border border-[color:var(--zui-tree-view-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-tree-view-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))] p-2";
     readonly "gradient-pink": "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";
     readonly "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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
+    readonly 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";
 };
 export declare const zuiTreeViewSizes: {
     readonly sm: "text-xs";
@@ -59,6 +80,27 @@ export declare const zuiTreeViewItemAppearances: {
     readonly "gradient-indigo": "data-[selected=true]:bg-linear-to-r data-[selected=true]:from-[var(--zui-tree-view-gradient-indigo-from,oklch(78.5%_0.115_274.713))] data-[selected=true]:to-[var(--zui-tree-view-gradient-indigo-to,oklch(82.7%_0.119_306.383))] dark:data-[selected=true]:from-[var(--zui-tree-view-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] dark:data-[selected=true]:to-[var(--zui-tree-view-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] data-[selected=true]:text-[color:var(--zui-tree-view-gradient-fg,#ffffff)]";
     readonly "gradient-pink": "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)]";
     readonly "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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
+    readonly 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)]";
 };
 export declare const zuiTreeViewChevron = "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-[color:var(--zui-tree-view-chevron,oklch(55.5%_0.041_257.417))] dark:text-[color:var(--zui-tree-view-chevron-dark,oklch(70.4%_0.04_256.788))] transition-transform duration-200 data-[expanded=true]:rotate-90";
 export declare const zuiTreeViewIcon = "inline-flex shrink-0 items-center justify-center text-[color:var(--zui-tree-view-icon,oklch(55.5%_0.041_257.417))] dark:text-[color:var(--zui-tree-view-icon-dark,oklch(70.4%_0.04_256.788))]";

package/dist/design-system/tree-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../src/design-system/tree-view.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,qJACwH,CAAC;AAErJ,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;CAyCzB,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX,eAAO,MAAM,mBAAmB,8dAC6b,CAAC;AAE9d,eAAO,MAAM,oBAAoB;;;;CAIvB,CAAC;AAEX,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;CA0C7B,CAAC;AAEX,eAAO,MAAM,kBAAkB,yRACyP,CAAC;AAEzR,eAAO,MAAM,eAAe,kMACqK,CAAC;AAElM,eAAO,MAAM,gBAAgB,+HACiG,CAAC"}
+{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../src/design-system/tree-view.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,qJACwH,CAAC;AAErJ,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EzB,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;;CAInB,CAAC;AAEX,eAAO,MAAM,mBAAmB,8dAC6b,CAAC;AAE9d,eAAO,MAAM,oBAAoB;;;;CAIvB,CAAC;AAEX,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2E7B,CAAC;AAEX,eAAO,MAAM,kBAAkB,yRACyP,CAAC;AAEzR,eAAO,MAAM,eAAe,kMACqK,CAAC;AAElM,eAAO,MAAM,gBAAgB,+HACiG,CAAC"}

package/dist/design-system/typography.d.ts

@@ -4,7 +4,7 @@ export declare const zuiTypographyTones: {
     readonly primary: "text-[color:var(--zui-typography-primary-fg,oklch(52%_0.105_223.128))] dark:text-[color:var(--zui-typography-primary-fg-dark,oklch(86.5%_0.127_207.078))] border-[color:var(--zui-typography-primary-border,oklch(86.5%_0.127_207.078_/_0.4))] dark:border-[color:var(--zui-typography-primary-border-dark,oklch(86.5%_0.127_207.078_/_0.4))]";
     readonly secondary: "text-[color:var(--zui-typography-secondary-fg,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-typography-secondary-fg-dark,oklch(86.9%_0.022_252.894))] border-[color:var(--zui-typography-secondary-border,#00000026)] dark:border-[color:var(--zui-typography-secondary-border-dark,#ffffff26)]";
     readonly 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))]";
-    readonly 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))]";
+    readonly 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(71.2%_0.194_13.428_/_0.4))]";
     readonly 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))]";
     readonly 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))]";
     readonly warning: "text-[color:var(--zui-typography-warning-fg,oklch(55.5%_0.163_48.998))] dark:text-[color:var(--zui-typography-warning-fg-dark,oklch(87.9%_0.169_91.605))] border-[color:var(--zui-typography-warning-border,oklch(87.9%_0.169_91.605_/_0.4))] dark:border-[color:var(--zui-typography-warning-border-dark,oklch(87.9%_0.169_91.605_/_0.4))]";

package/dist/ui/accordion/animated.js

@@ -1,13 +1,13 @@
 "use client";
 'use strict';
 
-var chunkX3O45MPI_js = require('../../chunk-X3O45MPI.js');
+var chunkSRLYXLUU_js = require('../../chunk-SRLYXLUU.js');
 var chunkZS5756ZC_js = require('../../chunk-ZS5756ZC.js');
 var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
 
 function Accordion(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkX3O45MPI_js.AccordionBase, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkSRLYXLUU_js.AccordionBase, { ...props });
 }
 Accordion.displayName = "Accordion";
 
@@ -24,8 +24,8 @@ function AccordionContentAnimated({
   transitionVariant = "default",
   ref
 }) {
-  const itemValue = chunkX3O45MPI_js.useAccordionItemValue("AccordionContent");
-  const { isOpen, size } = chunkX3O45MPI_js.useAccordionContext("AccordionContent");
+  const itemValue = chunkSRLYXLUU_js.useAccordionItemValue("AccordionContent");
+  const { isOpen, size } = chunkSRLYXLUU_js.useAccordionContext("AccordionContent");
   const open = isOpen(itemValue);
   const panelId = `${itemValue}-panel`;
   const transitionConfig = accordionContentTransitionPresets[transitionVariant];
@@ -37,7 +37,7 @@ function AccordionContentAnimated({
       id: panelId,
       role: "region",
       "data-slot": "accordion-content",
-      className: chunkZS5756ZC_js.cn(chunkX3O45MPI_js.accordionContentVariants({ size }), className),
+      className: chunkZS5756ZC_js.cn(chunkSRLYXLUU_js.accordionContentVariants({ size }), className),
       initial: motionless ? false : { opacity: 0 },
       animate: motionless ? void 0 : { opacity: 1 },
       exit: motionless ? void 0 : { opacity: 0 },
@@ -51,11 +51,11 @@ AccordionContentAnimated.displayName = "AccordionContentAnimated";
 
 Object.defineProperty(exports, "AccordionItem", {
   enumerable: true,
-  get: function () { return chunkX3O45MPI_js.AccordionItem; }
+  get: function () { return chunkSRLYXLUU_js.AccordionItem; }
 });
 Object.defineProperty(exports, "AccordionTrigger", {
   enumerable: true,
-  get: function () { return chunkX3O45MPI_js.AccordionTrigger; }
+  get: function () { return chunkSRLYXLUU_js.AccordionTrigger; }
 });
 exports.Accordion = Accordion;
 exports.AccordionContentAnimated = AccordionContentAnimated;

package/dist/ui/accordion/animated.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { AccordionBase, useAccordionItemValue, useAccordionContext, accordionContentVariants } from '../../chunk-ORFI4BCJ.mjs';
-export { AccordionItem, AccordionTrigger } from '../../chunk-ORFI4BCJ.mjs';
+import { AccordionBase, useAccordionItemValue, useAccordionContext, accordionContentVariants } from '../../chunk-URXYF25P.mjs';
+export { AccordionItem, AccordionTrigger } from '../../chunk-URXYF25P.mjs';
 import { cn } from '../../chunk-4D54YOL6.mjs';
 import { jsx } from 'react/jsx-runtime';
 import { motion } from 'framer-motion';

package/dist/ui/accordion/variants.d.ts

@@ -1,9 +1,9 @@
 export declare const accordionVariants: (props?: ({
-    appearance?: "outline" | "default" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "card" | "separated" | null | undefined;
+    appearance?: "ruby" | "outline" | "default" | "sky" | "emerald" | "rose" | "slate" | "indigo" | "cyan" | "aqua" | "blue" | "crimson" | "green" | "lavender" | "lime" | "magenta" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "mint" | "ocean" | "sapphire" | "zinc" | "stone" | "royal" | "electric" | "forest" | "sunset" | "card" | "separated" | null | undefined;
     size?: "md" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const accordionItemVariants: (props?: ({
-    appearance?: "outline" | "default" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "card" | "separated" | null | undefined;
+    appearance?: "ruby" | "outline" | "default" | "sky" | "emerald" | "rose" | "slate" | "indigo" | "cyan" | "aqua" | "blue" | "crimson" | "green" | "lavender" | "lime" | "magenta" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "mint" | "ocean" | "sapphire" | "zinc" | "stone" | "royal" | "electric" | "forest" | "sunset" | "card" | "separated" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const accordionTriggerVariants: (props?: ({
     size?: "md" | "sm" | "lg" | null | undefined;

package/dist/ui/accordion.js

@@ -1,42 +1,42 @@
 "use client";
 'use strict';
 
-var chunkX3O45MPI_js = require('../chunk-X3O45MPI.js');
+var chunkSRLYXLUU_js = require('../chunk-SRLYXLUU.js');
 require('../chunk-ZS5756ZC.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function Accordion(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkX3O45MPI_js.AccordionBase, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkSRLYXLUU_js.AccordionBase, { ...props });
 }
 Accordion.displayName = "Accordion";
 
 Object.defineProperty(exports, "AccordionContent", {
   enumerable: true,
-  get: function () { return chunkX3O45MPI_js.AccordionContent; }
+  get: function () { return chunkSRLYXLUU_js.AccordionContent; }
 });
 Object.defineProperty(exports, "AccordionItem", {
   enumerable: true,
-  get: function () { return chunkX3O45MPI_js.AccordionItem; }
+  get: function () { return chunkSRLYXLUU_js.AccordionItem; }
 });
 Object.defineProperty(exports, "AccordionTrigger", {
   enumerable: true,
-  get: function () { return chunkX3O45MPI_js.AccordionTrigger; }
+  get: function () { return chunkSRLYXLUU_js.AccordionTrigger; }
 });
 Object.defineProperty(exports, "accordionContentVariants", {
   enumerable: true,
-  get: function () { return chunkX3O45MPI_js.accordionContentVariants; }
+  get: function () { return chunkSRLYXLUU_js.accordionContentVariants; }
 });
 Object.defineProperty(exports, "accordionItemVariants", {
   enumerable: true,
-  get: function () { return chunkX3O45MPI_js.accordionItemVariants; }
+  get: function () { return chunkSRLYXLUU_js.accordionItemVariants; }
 });
 Object.defineProperty(exports, "accordionTriggerVariants", {
   enumerable: true,
-  get: function () { return chunkX3O45MPI_js.accordionTriggerVariants; }
+  get: function () { return chunkSRLYXLUU_js.accordionTriggerVariants; }
 });
 Object.defineProperty(exports, "accordionVariants", {
   enumerable: true,
-  get: function () { return chunkX3O45MPI_js.accordionVariants; }
+  get: function () { return chunkSRLYXLUU_js.accordionVariants; }
 });
 exports.Accordion = Accordion;
 //# sourceMappingURL=accordion.js.map

package/dist/ui/accordion.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { AccordionBase } from '../chunk-ORFI4BCJ.mjs';
-export { AccordionContent, AccordionItem, AccordionTrigger, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants } from '../chunk-ORFI4BCJ.mjs';
+import { AccordionBase } from '../chunk-URXYF25P.mjs';
+export { AccordionContent, AccordionItem, AccordionTrigger, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants } from '../chunk-URXYF25P.mjs';
 import '../chunk-4D54YOL6.mjs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/ui/alert/animated.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkDFCDLVZA_js = require('../../chunk-DFCDLVZA.js');
+var chunkJRB22VVK_js = require('../../chunk-JRB22VVK.js');
 require('../../chunk-ZS5756ZC.js');
 var framerMotion = require('framer-motion');
 var jsxRuntime = require('react/jsx-runtime');
@@ -31,7 +31,7 @@ var AlertAnimated = ({
 }) => {
   const motionProps = alertAnimationPresets[animation];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkDFCDLVZA_js.AlertBase,
+    chunkJRB22VVK_js.AlertBase,
     {
       as: framerMotion.motion.div,
       initial: animation === "none" ? false : void 0,

package/dist/ui/alert/animated.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { AlertBase } from '../../chunk-UROKWFPX.mjs';
+import { AlertBase } from '../../chunk-YFXGRV7X.mjs';
 import '../../chunk-4D54YOL6.mjs';
 import { motion } from 'framer-motion';
 import { jsx } from 'react/jsx-runtime';

package/dist/ui/alert/variants.d.ts

@@ -1,5 +1,5 @@
 export declare const alertVariants: (props?: ({
-    appearance?: "default" | "violet" | "gray" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "error" | "success" | "warning" | "info" | null | undefined;
+    appearance?: "ruby" | "default" | "violet" | "slate" | "gray" | "indigo" | "cyan" | "aqua" | "blue" | "crimson" | "green" | "lavender" | "lime" | "magenta" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "error" | "mint" | "ocean" | "sapphire" | "zinc" | "stone" | "royal" | "electric" | "forest" | "sunset" | "success" | "warning" | "info" | null | undefined;
     size?: "md" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const alertTitleVariants: (props?: ({

package/dist/ui/alert.js

@@ -1,46 +1,46 @@
 "use client";
 'use strict';
 
-var chunkDFCDLVZA_js = require('../chunk-DFCDLVZA.js');
+var chunkJRB22VVK_js = require('../chunk-JRB22VVK.js');
 require('../chunk-ZS5756ZC.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 var Alert = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkDFCDLVZA_js.AlertBase, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkJRB22VVK_js.AlertBase, { ...props });
 };
 Alert.displayName = "Alert";
 
 Object.defineProperty(exports, "AlertClose", {
   enumerable: true,
-  get: function () { return chunkDFCDLVZA_js.AlertClose; }
+  get: function () { return chunkJRB22VVK_js.AlertClose; }
 });
 Object.defineProperty(exports, "AlertDefaultIcon", {
   enumerable: true,
-  get: function () { return chunkDFCDLVZA_js.AlertDefaultIcon; }
+  get: function () { return chunkJRB22VVK_js.AlertDefaultIcon; }
 });
 Object.defineProperty(exports, "AlertDescription", {
   enumerable: true,
-  get: function () { return chunkDFCDLVZA_js.AlertDescription; }
+  get: function () { return chunkJRB22VVK_js.AlertDescription; }
 });
 Object.defineProperty(exports, "AlertIcon", {
   enumerable: true,
-  get: function () { return chunkDFCDLVZA_js.AlertIcon; }
+  get: function () { return chunkJRB22VVK_js.AlertIcon; }
 });
 Object.defineProperty(exports, "AlertTitle", {
   enumerable: true,
-  get: function () { return chunkDFCDLVZA_js.AlertTitle; }
+  get: function () { return chunkJRB22VVK_js.AlertTitle; }
 });
 Object.defineProperty(exports, "alertDescriptionVariants", {
   enumerable: true,
-  get: function () { return chunkDFCDLVZA_js.alertDescriptionVariants; }
+  get: function () { return chunkJRB22VVK_js.alertDescriptionVariants; }
 });
 Object.defineProperty(exports, "alertTitleVariants", {
   enumerable: true,
-  get: function () { return chunkDFCDLVZA_js.alertTitleVariants; }
+  get: function () { return chunkJRB22VVK_js.alertTitleVariants; }
 });
 Object.defineProperty(exports, "alertVariants", {
   enumerable: true,
-  get: function () { return chunkDFCDLVZA_js.alertVariants; }
+  get: function () { return chunkJRB22VVK_js.alertVariants; }
 });
 exports.Alert = Alert;
 //# sourceMappingURL=alert.js.map

package/dist/ui/alert.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { AlertBase } from '../chunk-UROKWFPX.mjs';
-export { AlertClose, AlertDefaultIcon, AlertDescription, AlertIcon, AlertTitle, alertDescriptionVariants, alertTitleVariants, alertVariants } from '../chunk-UROKWFPX.mjs';
+import { AlertBase } from '../chunk-YFXGRV7X.mjs';
+export { AlertClose, AlertDefaultIcon, AlertDescription, AlertIcon, AlertTitle, alertDescriptionVariants, alertTitleVariants, alertVariants } from '../chunk-YFXGRV7X.mjs';
 import '../chunk-4D54YOL6.mjs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/ui/animated-number/variants.d.ts

@@ -1,5 +1,5 @@
 export declare const animatedNumberAppearance: (props?: ({
-    appearance?: "default" | "violet" | "gray" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "error" | "success" | "warning" | "info" | null | undefined;
+    appearance?: "ruby" | "default" | "violet" | "slate" | "gray" | "indigo" | "cyan" | "aqua" | "blue" | "crimson" | "green" | "lavender" | "lime" | "magenta" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "yellow" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "ghost" | "error" | "mint" | "ocean" | "sapphire" | "zinc" | "stone" | "royal" | "electric" | "forest" | "sunset" | "success" | "warning" | "info" | null | undefined;
     size?: "md" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=variants.d.ts.map

package/dist/ui/animated-number.js

@@ -16,6 +16,27 @@ var zuiAnimatedNumberAppearance = {
   error: "text-[color:var(--zui-animated-number-error-fg,oklch(57.7%_0.245_27.325))] dark:text-[color:var(--zui-animated-number-error-fg-dark,oklch(70.4%_0.191_22.216))]",
   info: "text-[color:var(--zui-animated-number-info-fg,oklch(58.8%_0.158_241.966))] dark:text-[color:var(--zui-animated-number-info-fg-dark,oklch(74.6%_0.16_232.661))]",
   ghost: "text-[color:var(--zui-animated-number-ghost-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-animated-number-ghost-fg-dark,oklch(70.4%_0.04_256.788))]",
+  blue: "text-[color:var(--zui-animated-number-blue-fg,#2563eb)] dark:text-[color:var(--zui-animated-number-blue-fg-dark,#3b82f6)]",
+  cyan: "text-[color:var(--zui-animated-number-cyan-fg,#0891b2)] dark:text-[color:var(--zui-animated-number-cyan-fg-dark,#22d3ee)]",
+  green: "text-[color:var(--zui-animated-number-green-fg,#16a34a)] dark:text-[color:var(--zui-animated-number-green-fg-dark,#22c55e)]",
+  lime: "text-[color:var(--zui-animated-number-lime-fg,#65a30d)] dark:text-[color:var(--zui-animated-number-lime-fg-dark,#a3e635)]",
+  mint: "text-[color:var(--zui-animated-number-mint-fg,#10b981)] dark:text-[color:var(--zui-animated-number-mint-fg-dark,#6ee7b7)]",
+  ocean: "text-[color:var(--zui-animated-number-ocean-fg,#0284c7)] dark:text-[color:var(--zui-animated-number-ocean-fg-dark,#38bdf8)]",
+  sapphire: "text-[color:var(--zui-animated-number-sapphire-fg,#1d4ed8)] dark:text-[color:var(--zui-animated-number-sapphire-fg-dark,#60a5fa)]",
+  lavender: "text-[color:var(--zui-animated-number-lavender-fg,#8b5cf6)] dark:text-[color:var(--zui-animated-number-lavender-fg-dark,#a78bfa)]",
+  ruby: "text-[color:var(--zui-animated-number-ruby-fg,#be123c)] dark:text-[color:var(--zui-animated-number-ruby-fg-dark,#fb7185)]",
+  red: "text-[color:var(--zui-animated-number-red-fg,#dc2626)] dark:text-[color:var(--zui-animated-number-red-fg-dark,#ef4444)]",
+  slate: "text-[color:var(--zui-animated-number-slate-fg,#475569)] dark:text-[color:var(--zui-animated-number-slate-fg-dark,#64748b)]",
+  zinc: "text-[color:var(--zui-animated-number-zinc-fg,#52525b)] dark:text-[color:var(--zui-animated-number-zinc-fg-dark,#71717a)]",
+  stone: "text-[color:var(--zui-animated-number-stone-fg,#57534e)] dark:text-[color:var(--zui-animated-number-stone-fg-dark,#78716c)]",
+  royal: "text-[color:var(--zui-animated-number-royal-fg,#4338ca)] dark:text-[color:var(--zui-animated-number-royal-fg-dark,#818cf8)]",
+  electric: "text-[color:var(--zui-animated-number-electric-fg,#0ea5e9)] dark:text-[color:var(--zui-animated-number-electric-fg-dark,#38bdf8)]",
+  forest: "text-[color:var(--zui-animated-number-forest-fg,#166534)] dark:text-[color:var(--zui-animated-number-forest-fg-dark,#4ade80)]",
+  sunset: "text-[color:var(--zui-animated-number-sunset-fg,#ea580c)] dark:text-[color:var(--zui-animated-number-sunset-fg-dark,#fb923c)]",
+  magenta: "text-[color:var(--zui-animated-number-magenta-fg,#c026d3)] dark:text-[color:var(--zui-animated-number-magenta-fg-dark,#e879f9)]",
+  crimson: "text-[color:var(--zui-animated-number-crimson-fg,#b91c1c)] dark:text-[color:var(--zui-animated-number-crimson-fg-dark,#f87171)]",
+  aqua: "text-[color:var(--zui-animated-number-aqua-fg,#0f766e)] dark:text-[color:var(--zui-animated-number-aqua-fg-dark,#2dd4bf)]",
+  plum: "text-[color:var(--zui-animated-number-plum-fg,#7e22ce)] dark:text-[color:var(--zui-animated-number-plum-fg-dark,#c084fc)]",
   purple: "text-[color:var(--zui-animated-number-purple-fg,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-animated-number-purple-fg-dark,oklch(71.4%_0.203_305.504))]",
   pink: "text-[color:var(--zui-animated-number-pink-fg,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-animated-number-pink-fg-dark,oklch(71.8%_0.202_349.761))]",
   orange: "text-[color:var(--zui-animated-number-orange-fg,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-animated-number-orange-fg-dark,oklch(75%_0.183_55.934))]",

package/dist/ui/animated-number.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/design-system/animated-number.ts","../../src/ui/animated-number/variants.ts","../../src/ui/animated-number/animations.ts","../../src/ui/animated-number/animated-number.tsx"],"names":["cva","useReducedMotion","jsx","motion","cn","useState","useRef","useInView","useEffect","animate"],"mappings":"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","file":"animated-number.js","sourcesContent":["export const zuiAnimatedNumberBase =\n  \"relative flex w-full overflow-hidden [perspective:1000px]\";\n\nexport const zuiAnimatedNumberAppearance = {\n  default:\n    \"text-[color:var(--zui-animated-number-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-animated-number-default-fg-dark,oklch(98.4%_0.003_247.858))]\",\n  success:\n    \"text-[color:var(--zui-animated-number-success-fg,oklch(62.7%_0.194_149.214))] dark:text-[color:var(--zui-animated-number-success-fg-dark,oklch(79.2%_0.209_151.711))]\",\n  warning:\n    \"text-[color:var(--zui-animated-number-warning-fg,oklch(66.6%_0.179_58.318))] dark:text-[color:var(--zui-animated-number-warning-fg-dark,oklch(82.8%_0.189_84.429))]\",\n  error:\n    \"text-[color:var(--zui-animated-number-error-fg,oklch(57.7%_0.245_27.325))] dark:text-[color:var(--zui-animated-number-error-fg-dark,oklch(70.4%_0.191_22.216))]\",\n  info: \"text-[color:var(--zui-animated-number-info-fg,oklch(58.8%_0.158_241.966))] dark:text-[color:var(--zui-animated-number-info-fg-dark,oklch(74.6%_0.16_232.661))]\",\n  ghost:\n    \"text-[color:var(--zui-animated-number-ghost-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-animated-number-ghost-fg-dark,oklch(70.4%_0.04_256.788))]\",\n  purple:\n    \"text-[color:var(--zui-animated-number-purple-fg,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-animated-number-purple-fg-dark,oklch(71.4%_0.203_305.504))]\",\n  pink: \"text-[color:var(--zui-animated-number-pink-fg,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-animated-number-pink-fg-dark,oklch(71.8%_0.202_349.761))]\",\n  orange:\n    \"text-[color:var(--zui-animated-number-orange-fg,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-animated-number-orange-fg-dark,oklch(75%_0.183_55.934))]\",\n  yellow:\n    \"text-[color:var(--zui-animated-number-yellow-fg,oklch(68.1%_0.162_75.834))] dark:text-[color:var(--zui-animated-number-yellow-fg-dark,oklch(85.2%_0.199_91.936))]\",\n  teal: \"text-[color:var(--zui-animated-number-teal-fg,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-animated-number-teal-fg-dark,oklch(77.7%_0.152_181.912))]\",\n  indigo:\n    \"text-[color:var(--zui-animated-number-indigo-fg,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-animated-number-indigo-fg-dark,oklch(67.3%_0.182_276.935))]\",\n  gray: \"text-[color:var(--zui-animated-number-gray-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-animated-number-gray-fg-dark,oklch(70.7%_0.022_261.325))]\",\n  violet:\n    \"text-[color:var(--zui-animated-number-violet-fg,oklch(54.1%_0.281_293.009))] dark:text-[color:var(--zui-animated-number-violet-fg-dark,oklch(70.2%_0.183_293.541))]\",\n  \"gradient-blue\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-animated-number-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-animated-number-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-animated-number-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] bg-clip-text text-transparent\",\n  \"gradient-green\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-animated-number-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-animated-number-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-animated-number-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] bg-clip-text text-transparent\",\n  \"gradient-red\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-animated-number-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-animated-number-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-animated-number-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] bg-clip-text text-transparent\",\n  \"gradient-yellow\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-animated-number-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-animated-number-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-animated-number-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] bg-clip-text text-transparent\",\n  \"gradient-purple\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-animated-number-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-animated-number-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-animated-number-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] bg-clip-text text-transparent\",\n  \"gradient-teal\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-animated-number-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-animated-number-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-animated-number-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] bg-clip-text text-transparent\",\n  \"gradient-indigo\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-animated-number-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-animated-number-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-animated-number-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] bg-clip-text text-transparent\",\n  \"gradient-pink\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-animated-number-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-animated-number-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-animated-number-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] bg-clip-text text-transparent\",\n  \"gradient-orange\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-animated-number-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-animated-number-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-animated-number-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] bg-clip-text text-transparent\",\n} as const;\n\nexport const zuiAnimatedNumberSize = {\n  sm: \"text-2xl font-semibold tabular-nums\",\n  md: \"text-4xl font-semibold tabular-nums\",\n  lg: \"text-6xl font-bold tabular-nums\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiAnimatedNumberAppearance,\n  zuiAnimatedNumberSize,\n} from \"../../design-system/animated-number\";\n\nexport const animatedNumberAppearance = cva(\"inline-flex\", {\n  variants: {\n    appearance: zuiAnimatedNumberAppearance,\n    size: zuiAnimatedNumberSize,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n","export const animationInitialType = {\n  up: { y: \"-100%\" },\n  down: { y: \"100%\" },\n  scaleUp: { scale: 0 },\n  scaleDown: { scale: 1.25 },\n  rotateX: { rotateX: \"0\" },\n  rotateY: { rotateY: \"0\" },\n  skewX: { skewX: 20 },\n  skewY: { skewY: 20 },\n  fade: { opacity: 0 },\n};\nexport const animationFinalType = {\n  up: { y: 0 },\n  down: { y: 0 },\n  scaleUp: { scale: 1 },\n  scaleDown: { scale: 1 },\n  rotateX: { rotateX: \"360deg\" },\n  rotateY: { rotateY: \"360deg\" },\n  skewX: { skewX: 0 },\n  skewY: { skewY: 0 },\n  fade: { opacity: 1 },\n};\n","\"use client\";\nimport {\n  animate,\n  motion,\n  useInView,\n  useReducedMotion,\n  type UseInViewOptions,\n} from \"framer-motion\";\nimport { animatedNumberAppearance } from \"./variants\";\nimport { AnimatedNumberCounterProps, AnimatedNumberProps } from \"./types\";\nimport { cn } from \"../../lib/utils\";\nimport { zuiAnimatedNumberBase } from \"../../design-system/animated-number\";\nimport { animationFinalType, animationInitialType } from \"./animations\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst DEFAULT_VIEWPORT = { once: true, amount: 0.2 } as const;\n\nexport const AnimatedNumber = ({\n  number,\n  wrapperClassName,\n  className,\n  ref,\n  appearance,\n  size,\n  type = \"up\",\n  delayInSecond = 0.1,\n  transition,\n  initial,\n  whileInView,\n  viewport,\n  ...rest\n}: AnimatedNumberProps) => {\n  const numbersList = [...number.toString()];\n  const reducedMotion = useReducedMotion();\n  const motionless = Boolean(reducedMotion);\n\n  const digitVariants = {\n    hidden: animationInitialType[type],\n    visible: animationFinalType[type],\n  };\n\n  return (\n    <motion.div\n      ref={ref}\n      initial={motionless ? false : \"hidden\"}\n      whileInView={motionless ? undefined : \"visible\"}\n      viewport={viewport ?? DEFAULT_VIEWPORT}\n      transition={{\n        staggerChildren: delayInSecond,\n      }}\n      className={cn(wrapperClassName, zuiAnimatedNumberBase)}\n    >\n      {numbersList.map((digit, index) => (\n        <motion.span\n          key={index + \"-\" + digit}\n          className={cn(\n            \"inline-block\",\n            animatedNumberAppearance({ appearance, size }),\n            className,\n          )}\n          variants={digitVariants}\n          transition={transition}\n          {...rest}\n        >\n          {digit}\n        </motion.span>\n      ))}\n    </motion.div>\n  );\n};\n\nexport const AnimatedNumberCounter = ({\n  number,\n  className,\n  ref: externalRef,\n  appearance,\n  size,\n  duration = 2,\n  viewport,\n  ...rest\n}: AnimatedNumberCounterProps) => {\n  const [currentNumber, setCurrentNumber] = useState(0);\n  const reducedMotion = useReducedMotion();\n  const internalRef = useRef<HTMLParagraphElement>(null);\n  // once: false gives real two-way tracking so isInView flips false when scrolled away,\n  // preventing offscreen animations when the number prop changes later.\n  const isInView = useInView(internalRef, {\n    once: false,\n    amount: 0.2,\n    ...viewport,\n  } as UseInViewOptions);\n\n  useEffect(() => {\n    if (!isInView) return;\n\n    if (reducedMotion) {\n      setCurrentNumber(number);\n      return;\n    }\n\n    const controls = animate(currentNumber, number, {\n      duration,\n      ease: \"circOut\",\n      onUpdate: (latest) => setCurrentNumber(Math.round(latest)),\n    });\n\n    return () => controls.stop();\n    // currentNumber intentionally omitted — captured value gives smooth from→to on prop changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isInView, number, duration, reducedMotion]);\n\n  return (\n    <motion.p\n      className={cn(animatedNumberAppearance({ appearance, size }), className)}\n      ref={(node: HTMLParagraphElement) => {\n        internalRef.current = node;\n        if (externalRef) {\n          externalRef.current = node;\n        }\n      }}\n      {...rest}\n    >\n      {currentNumber}\n    </motion.p>\n  );\n};\n"]}
+{"version":3,"sources":["../../src/design-system/animated-number.ts","../../src/ui/animated-number/variants.ts","../../src/ui/animated-number/animations.ts","../../src/ui/animated-number/animated-number.tsx"],"names":["cva","useReducedMotion","jsx","motion","cn","useState","useRef","useInView","useEffect","animate"],"mappings":"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","file":"animated-number.js","sourcesContent":["export const zuiAnimatedNumberBase =\n  \"relative flex w-full overflow-hidden [perspective:1000px]\";\n\nexport const zuiAnimatedNumberAppearance = {\n  default:\n    \"text-[color:var(--zui-animated-number-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-animated-number-default-fg-dark,oklch(98.4%_0.003_247.858))]\",\n  success:\n    \"text-[color:var(--zui-animated-number-success-fg,oklch(62.7%_0.194_149.214))] dark:text-[color:var(--zui-animated-number-success-fg-dark,oklch(79.2%_0.209_151.711))]\",\n  warning:\n    \"text-[color:var(--zui-animated-number-warning-fg,oklch(66.6%_0.179_58.318))] dark:text-[color:var(--zui-animated-number-warning-fg-dark,oklch(82.8%_0.189_84.429))]\",\n  error:\n    \"text-[color:var(--zui-animated-number-error-fg,oklch(57.7%_0.245_27.325))] dark:text-[color:var(--zui-animated-number-error-fg-dark,oklch(70.4%_0.191_22.216))]\",\n  info: \"text-[color:var(--zui-animated-number-info-fg,oklch(58.8%_0.158_241.966))] dark:text-[color:var(--zui-animated-number-info-fg-dark,oklch(74.6%_0.16_232.661))]\",\n  ghost:\n    \"text-[color:var(--zui-animated-number-ghost-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-animated-number-ghost-fg-dark,oklch(70.4%_0.04_256.788))]\",\n  blue: \"text-[color:var(--zui-animated-number-blue-fg,#2563eb)] dark:text-[color:var(--zui-animated-number-blue-fg-dark,#3b82f6)]\",\n  cyan: \"text-[color:var(--zui-animated-number-cyan-fg,#0891b2)] dark:text-[color:var(--zui-animated-number-cyan-fg-dark,#22d3ee)]\",\n  green:\n    \"text-[color:var(--zui-animated-number-green-fg,#16a34a)] dark:text-[color:var(--zui-animated-number-green-fg-dark,#22c55e)]\",\n  lime: \"text-[color:var(--zui-animated-number-lime-fg,#65a30d)] dark:text-[color:var(--zui-animated-number-lime-fg-dark,#a3e635)]\",\n  mint: \"text-[color:var(--zui-animated-number-mint-fg,#10b981)] dark:text-[color:var(--zui-animated-number-mint-fg-dark,#6ee7b7)]\",\n  ocean:\n    \"text-[color:var(--zui-animated-number-ocean-fg,#0284c7)] dark:text-[color:var(--zui-animated-number-ocean-fg-dark,#38bdf8)]\",\n  sapphire:\n    \"text-[color:var(--zui-animated-number-sapphire-fg,#1d4ed8)] dark:text-[color:var(--zui-animated-number-sapphire-fg-dark,#60a5fa)]\",\n  lavender:\n    \"text-[color:var(--zui-animated-number-lavender-fg,#8b5cf6)] dark:text-[color:var(--zui-animated-number-lavender-fg-dark,#a78bfa)]\",\n  ruby: \"text-[color:var(--zui-animated-number-ruby-fg,#be123c)] dark:text-[color:var(--zui-animated-number-ruby-fg-dark,#fb7185)]\",\n  red: \"text-[color:var(--zui-animated-number-red-fg,#dc2626)] dark:text-[color:var(--zui-animated-number-red-fg-dark,#ef4444)]\",\n  slate:\n    \"text-[color:var(--zui-animated-number-slate-fg,#475569)] dark:text-[color:var(--zui-animated-number-slate-fg-dark,#64748b)]\",\n  zinc: \"text-[color:var(--zui-animated-number-zinc-fg,#52525b)] dark:text-[color:var(--zui-animated-number-zinc-fg-dark,#71717a)]\",\n  stone:\n    \"text-[color:var(--zui-animated-number-stone-fg,#57534e)] dark:text-[color:var(--zui-animated-number-stone-fg-dark,#78716c)]\",\n  royal:\n    \"text-[color:var(--zui-animated-number-royal-fg,#4338ca)] dark:text-[color:var(--zui-animated-number-royal-fg-dark,#818cf8)]\",\n  electric:\n    \"text-[color:var(--zui-animated-number-electric-fg,#0ea5e9)] dark:text-[color:var(--zui-animated-number-electric-fg-dark,#38bdf8)]\",\n  forest:\n    \"text-[color:var(--zui-animated-number-forest-fg,#166534)] dark:text-[color:var(--zui-animated-number-forest-fg-dark,#4ade80)]\",\n  sunset:\n    \"text-[color:var(--zui-animated-number-sunset-fg,#ea580c)] dark:text-[color:var(--zui-animated-number-sunset-fg-dark,#fb923c)]\",\n  magenta:\n    \"text-[color:var(--zui-animated-number-magenta-fg,#c026d3)] dark:text-[color:var(--zui-animated-number-magenta-fg-dark,#e879f9)]\",\n  crimson:\n    \"text-[color:var(--zui-animated-number-crimson-fg,#b91c1c)] dark:text-[color:var(--zui-animated-number-crimson-fg-dark,#f87171)]\",\n  aqua: \"text-[color:var(--zui-animated-number-aqua-fg,#0f766e)] dark:text-[color:var(--zui-animated-number-aqua-fg-dark,#2dd4bf)]\",\n  plum: \"text-[color:var(--zui-animated-number-plum-fg,#7e22ce)] dark:text-[color:var(--zui-animated-number-plum-fg-dark,#c084fc)]\",\n  purple:\n    \"text-[color:var(--zui-animated-number-purple-fg,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-animated-number-purple-fg-dark,oklch(71.4%_0.203_305.504))]\",\n  pink: \"text-[color:var(--zui-animated-number-pink-fg,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-animated-number-pink-fg-dark,oklch(71.8%_0.202_349.761))]\",\n  orange:\n    \"text-[color:var(--zui-animated-number-orange-fg,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-animated-number-orange-fg-dark,oklch(75%_0.183_55.934))]\",\n  yellow:\n    \"text-[color:var(--zui-animated-number-yellow-fg,oklch(68.1%_0.162_75.834))] dark:text-[color:var(--zui-animated-number-yellow-fg-dark,oklch(85.2%_0.199_91.936))]\",\n  teal: \"text-[color:var(--zui-animated-number-teal-fg,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-animated-number-teal-fg-dark,oklch(77.7%_0.152_181.912))]\",\n  indigo:\n    \"text-[color:var(--zui-animated-number-indigo-fg,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-animated-number-indigo-fg-dark,oklch(67.3%_0.182_276.935))]\",\n  gray: \"text-[color:var(--zui-animated-number-gray-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-animated-number-gray-fg-dark,oklch(70.7%_0.022_261.325))]\",\n  violet:\n    \"text-[color:var(--zui-animated-number-violet-fg,oklch(54.1%_0.281_293.009))] dark:text-[color:var(--zui-animated-number-violet-fg-dark,oklch(70.2%_0.183_293.541))]\",\n  \"gradient-blue\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-animated-number-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-animated-number-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-animated-number-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] bg-clip-text text-transparent\",\n  \"gradient-green\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-animated-number-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-animated-number-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-animated-number-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] bg-clip-text text-transparent\",\n  \"gradient-red\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-animated-number-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-animated-number-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-animated-number-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] bg-clip-text text-transparent\",\n  \"gradient-yellow\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-animated-number-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-animated-number-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-animated-number-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] bg-clip-text text-transparent\",\n  \"gradient-purple\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-animated-number-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-animated-number-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-animated-number-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] bg-clip-text text-transparent\",\n  \"gradient-teal\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-animated-number-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-animated-number-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-animated-number-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] bg-clip-text text-transparent\",\n  \"gradient-indigo\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-animated-number-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-animated-number-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-animated-number-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] bg-clip-text text-transparent\",\n  \"gradient-pink\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-animated-number-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-animated-number-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-animated-number-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] bg-clip-text text-transparent\",\n  \"gradient-orange\":\n    \"bg-linear-to-r from-[var(--zui-animated-number-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-animated-number-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-animated-number-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-animated-number-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] bg-clip-text text-transparent\",\n} as const;\n\nexport const zuiAnimatedNumberSize = {\n  sm: \"text-2xl font-semibold tabular-nums\",\n  md: \"text-4xl font-semibold tabular-nums\",\n  lg: \"text-6xl font-bold tabular-nums\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiAnimatedNumberAppearance,\n  zuiAnimatedNumberSize,\n} from \"../../design-system/animated-number\";\n\nexport const animatedNumberAppearance = cva(\"inline-flex\", {\n  variants: {\n    appearance: zuiAnimatedNumberAppearance,\n    size: zuiAnimatedNumberSize,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n","export const animationInitialType = {\n  up: { y: \"-100%\" },\n  down: { y: \"100%\" },\n  scaleUp: { scale: 0 },\n  scaleDown: { scale: 1.25 },\n  rotateX: { rotateX: \"0\" },\n  rotateY: { rotateY: \"0\" },\n  skewX: { skewX: 20 },\n  skewY: { skewY: 20 },\n  fade: { opacity: 0 },\n};\nexport const animationFinalType = {\n  up: { y: 0 },\n  down: { y: 0 },\n  scaleUp: { scale: 1 },\n  scaleDown: { scale: 1 },\n  rotateX: { rotateX: \"360deg\" },\n  rotateY: { rotateY: \"360deg\" },\n  skewX: { skewX: 0 },\n  skewY: { skewY: 0 },\n  fade: { opacity: 1 },\n};\n","\"use client\";\nimport {\n  animate,\n  motion,\n  useInView,\n  useReducedMotion,\n  type UseInViewOptions,\n} from \"framer-motion\";\nimport { animatedNumberAppearance } from \"./variants\";\nimport { AnimatedNumberCounterProps, AnimatedNumberProps } from \"./types\";\nimport { cn } from \"../../lib/utils\";\nimport { zuiAnimatedNumberBase } from \"../../design-system/animated-number\";\nimport { animationFinalType, animationInitialType } from \"./animations\";\nimport { useEffect, useRef, useState } from \"react\";\n\nconst DEFAULT_VIEWPORT = { once: true, amount: 0.2 } as const;\n\nexport const AnimatedNumber = ({\n  number,\n  wrapperClassName,\n  className,\n  ref,\n  appearance,\n  size,\n  type = \"up\",\n  delayInSecond = 0.1,\n  transition,\n  initial,\n  whileInView,\n  viewport,\n  ...rest\n}: AnimatedNumberProps) => {\n  const numbersList = [...number.toString()];\n  const reducedMotion = useReducedMotion();\n  const motionless = Boolean(reducedMotion);\n\n  const digitVariants = {\n    hidden: animationInitialType[type],\n    visible: animationFinalType[type],\n  };\n\n  return (\n    <motion.div\n      ref={ref}\n      initial={motionless ? false : \"hidden\"}\n      whileInView={motionless ? undefined : \"visible\"}\n      viewport={viewport ?? DEFAULT_VIEWPORT}\n      transition={{\n        staggerChildren: delayInSecond,\n      }}\n      className={cn(wrapperClassName, zuiAnimatedNumberBase)}\n    >\n      {numbersList.map((digit, index) => (\n        <motion.span\n          key={index + \"-\" + digit}\n          className={cn(\n            \"inline-block\",\n            animatedNumberAppearance({ appearance, size }),\n            className,\n          )}\n          variants={digitVariants}\n          transition={transition}\n          {...rest}\n        >\n          {digit}\n        </motion.span>\n      ))}\n    </motion.div>\n  );\n};\n\nexport const AnimatedNumberCounter = ({\n  number,\n  className,\n  ref: externalRef,\n  appearance,\n  size,\n  duration = 2,\n  viewport,\n  ...rest\n}: AnimatedNumberCounterProps) => {\n  const [currentNumber, setCurrentNumber] = useState(0);\n  const reducedMotion = useReducedMotion();\n  const internalRef = useRef<HTMLParagraphElement>(null);\n  // once: false gives real two-way tracking so isInView flips false when scrolled away,\n  // preventing offscreen animations when the number prop changes later.\n  const isInView = useInView(internalRef, {\n    once: false,\n    amount: 0.2,\n    ...viewport,\n  } as UseInViewOptions);\n\n  useEffect(() => {\n    if (!isInView) return;\n\n    if (reducedMotion) {\n      setCurrentNumber(number);\n      return;\n    }\n\n    const controls = animate(currentNumber, number, {\n      duration,\n      ease: \"circOut\",\n      onUpdate: (latest) => setCurrentNumber(Math.round(latest)),\n    });\n\n    return () => controls.stop();\n    // currentNumber intentionally omitted — captured value gives smooth from→to on prop changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isInView, number, duration, reducedMotion]);\n\n  return (\n    <motion.p\n      className={cn(animatedNumberAppearance({ appearance, size }), className)}\n      ref={(node: HTMLParagraphElement) => {\n        internalRef.current = node;\n        if (externalRef) {\n          externalRef.current = node;\n        }\n      }}\n      {...rest}\n    >\n      {currentNumber}\n    </motion.p>\n  );\n};\n"]}

package/dist/ui/animated-number.mjs

@@ -14,6 +14,27 @@ var zuiAnimatedNumberAppearance = {
   error: "text-[color:var(--zui-animated-number-error-fg,oklch(57.7%_0.245_27.325))] dark:text-[color:var(--zui-animated-number-error-fg-dark,oklch(70.4%_0.191_22.216))]",
   info: "text-[color:var(--zui-animated-number-info-fg,oklch(58.8%_0.158_241.966))] dark:text-[color:var(--zui-animated-number-info-fg-dark,oklch(74.6%_0.16_232.661))]",
   ghost: "text-[color:var(--zui-animated-number-ghost-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-animated-number-ghost-fg-dark,oklch(70.4%_0.04_256.788))]",
+  blue: "text-[color:var(--zui-animated-number-blue-fg,#2563eb)] dark:text-[color:var(--zui-animated-number-blue-fg-dark,#3b82f6)]",
+  cyan: "text-[color:var(--zui-animated-number-cyan-fg,#0891b2)] dark:text-[color:var(--zui-animated-number-cyan-fg-dark,#22d3ee)]",
+  green: "text-[color:var(--zui-animated-number-green-fg,#16a34a)] dark:text-[color:var(--zui-animated-number-green-fg-dark,#22c55e)]",
+  lime: "text-[color:var(--zui-animated-number-lime-fg,#65a30d)] dark:text-[color:var(--zui-animated-number-lime-fg-dark,#a3e635)]",
+  mint: "text-[color:var(--zui-animated-number-mint-fg,#10b981)] dark:text-[color:var(--zui-animated-number-mint-fg-dark,#6ee7b7)]",
+  ocean: "text-[color:var(--zui-animated-number-ocean-fg,#0284c7)] dark:text-[color:var(--zui-animated-number-ocean-fg-dark,#38bdf8)]",
+  sapphire: "text-[color:var(--zui-animated-number-sapphire-fg,#1d4ed8)] dark:text-[color:var(--zui-animated-number-sapphire-fg-dark,#60a5fa)]",
+  lavender: "text-[color:var(--zui-animated-number-lavender-fg,#8b5cf6)] dark:text-[color:var(--zui-animated-number-lavender-fg-dark,#a78bfa)]",
+  ruby: "text-[color:var(--zui-animated-number-ruby-fg,#be123c)] dark:text-[color:var(--zui-animated-number-ruby-fg-dark,#fb7185)]",
+  red: "text-[color:var(--zui-animated-number-red-fg,#dc2626)] dark:text-[color:var(--zui-animated-number-red-fg-dark,#ef4444)]",
+  slate: "text-[color:var(--zui-animated-number-slate-fg,#475569)] dark:text-[color:var(--zui-animated-number-slate-fg-dark,#64748b)]",
+  zinc: "text-[color:var(--zui-animated-number-zinc-fg,#52525b)] dark:text-[color:var(--zui-animated-number-zinc-fg-dark,#71717a)]",
+  stone: "text-[color:var(--zui-animated-number-stone-fg,#57534e)] dark:text-[color:var(--zui-animated-number-stone-fg-dark,#78716c)]",
+  royal: "text-[color:var(--zui-animated-number-royal-fg,#4338ca)] dark:text-[color:var(--zui-animated-number-royal-fg-dark,#818cf8)]",
+  electric: "text-[color:var(--zui-animated-number-electric-fg,#0ea5e9)] dark:text-[color:var(--zui-animated-number-electric-fg-dark,#38bdf8)]",
+  forest: "text-[color:var(--zui-animated-number-forest-fg,#166534)] dark:text-[color:var(--zui-animated-number-forest-fg-dark,#4ade80)]",
+  sunset: "text-[color:var(--zui-animated-number-sunset-fg,#ea580c)] dark:text-[color:var(--zui-animated-number-sunset-fg-dark,#fb923c)]",
+  magenta: "text-[color:var(--zui-animated-number-magenta-fg,#c026d3)] dark:text-[color:var(--zui-animated-number-magenta-fg-dark,#e879f9)]",
+  crimson: "text-[color:var(--zui-animated-number-crimson-fg,#b91c1c)] dark:text-[color:var(--zui-animated-number-crimson-fg-dark,#f87171)]",
+  aqua: "text-[color:var(--zui-animated-number-aqua-fg,#0f766e)] dark:text-[color:var(--zui-animated-number-aqua-fg-dark,#2dd4bf)]",
+  plum: "text-[color:var(--zui-animated-number-plum-fg,#7e22ce)] dark:text-[color:var(--zui-animated-number-plum-fg-dark,#c084fc)]",
   purple: "text-[color:var(--zui-animated-number-purple-fg,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-animated-number-purple-fg-dark,oklch(71.4%_0.203_305.504))]",
   pink: "text-[color:var(--zui-animated-number-pink-fg,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-animated-number-pink-fg-dark,oklch(71.8%_0.202_349.761))]",
   orange: "text-[color:var(--zui-animated-number-orange-fg,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-animated-number-orange-fg-dark,oklch(75%_0.183_55.934))]",