@zentauri-ui/zentauri-components 1.9.0 → 1.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "keywords": [
     "react",
@@ -86,6 +86,20 @@
       "require": "./dist/hooks/*.js"
     }
   },
+  "scripts": {
+    "dev": "cross-env NODE_OPTIONS=--max-old-space-size=8192 tsup --watch",
+    "build:js": "cross-env NODE_OPTIONS=--max-old-space-size=8192 tsup",
+    "build:types": "tsc -p tsconfig.emit-types.json",
+    "build": "npm run build:js && npm run build:types",
+    "generate:registry": "node scripts/generate-registry.mjs",
+    "update:test-health": "node scripts/update-test-health.mjs",
+    "check:tokens": "node scripts/check-design-tokens.mjs",
+    "check:exports": "node scripts/check-exports.mjs",
+    "prepack": "npm run build && node scripts/generate-registry.mjs && node scripts/check-design-tokens.mjs && node scripts/check-exports.mjs",
+    "test": "vitest run",
+    "test:a11y": "vitest run src/ui/accessibility/axe-core.test.tsx",
+    "test:watch": "vitest"
+  },
   "peerDependencies": {
     "class-variance-authority": "*",
     "clsx": "*",
@@ -108,6 +122,7 @@
     }
   },
   "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -119,20 +134,6 @@
     "jsdom": "^26.1.0",
     "tsup": "^8.5.1",
     "typescript": "^5",
-    "vitest": "^4.1.4",
-    "@repo/typescript-config": "0.0.0"
-  },
-  "scripts": {
-    "dev": "cross-env NODE_OPTIONS=--max-old-space-size=8192 tsup --watch",
-    "build:js": "cross-env NODE_OPTIONS=--max-old-space-size=8192 tsup",
-    "build:types": "tsc -p tsconfig.emit-types.json",
-    "build": "npm run build:js && npm run build:types",
-    "generate:registry": "node scripts/generate-registry.mjs",
-    "update:test-health": "node scripts/update-test-health.mjs",
-    "check:tokens": "node scripts/check-design-tokens.mjs",
-    "check:exports": "node scripts/check-exports.mjs",
-    "test": "vitest run",
-    "test:a11y": "vitest run src/ui/accessibility/axe-core.test.tsx",
-    "test:watch": "vitest"
+    "vitest": "^4.1.4"
   }
-}
+}

package/src/animations/animations.test.tsx

@@ -43,8 +43,7 @@ vi.mock("framer-motion", async () => {
               "data-motion-transition": serializeMotionValue(transition),
               "data-motion-viewport": serializeMotionValue(viewport),
               "data-motion-while-hover": serializeMotionValue(whileHover),
-              "data-motion-while-in-view":
-                serializeMotionValue(whileInView),
+              "data-motion-while-in-view": serializeMotionValue(whileInView),
               "data-motion-while-tap": serializeMotionValue(whileTap),
             },
             children as React.ReactNode,

package/src/animations/shared/create-motion-animation.tsx

@@ -36,7 +36,9 @@ function mergeTargetOverrides(
 function isTargetObject(
   target: NonNullable<MotionAnimationProps["whileInView"]>,
 ): target is MotionAnimationPreset["animate"] {
-  return target !== null && typeof target === "object" && !Array.isArray(target);
+  return (
+    target !== null && typeof target === "object" && !Array.isArray(target)
+  );
 }
 
 export function createMotionAnimation(

package/src/design-system/accordion.ts

@@ -9,6 +9,39 @@ export const zuiAccordionAppearances = {
     "divide-y divide-[var(--zui-accordion-ghost-divider,#0000000d)] dark:divide-[var(--zui-accordion-ghost-divider-dark,#ffffff0d)]",
   card: "space-y-2",
   separated: "space-y-3",
+  blue: "divide-y divide-[var(--zui-accordion-blue-divider,#2563eb)] dark:divide-[var(--zui-accordion-blue-divider-dark,#3b82f6)] rounded-xl border border-[color:var(--zui-accordion-blue-border,#2563eb)] dark:border-[color:var(--zui-accordion-blue-border-dark,#3b82f6)]",
+  cyan: "divide-y divide-[var(--zui-accordion-cyan-divider,#0891b2)] dark:divide-[var(--zui-accordion-cyan-divider-dark,#22d3ee)] rounded-xl border border-[color:var(--zui-accordion-cyan-border,#0891b2)] dark:border-[color:var(--zui-accordion-cyan-border-dark,#22d3ee)]",
+  green:
+    "divide-y divide-[var(--zui-accordion-green-divider,#16a34a)] dark:divide-[var(--zui-accordion-green-divider-dark,#22c55e)] rounded-xl border border-[color:var(--zui-accordion-green-border,#16a34a)] dark:border-[color:var(--zui-accordion-green-border-dark,#22c55e)]",
+  lime: "divide-y divide-[var(--zui-accordion-lime-divider,#65a30d)] dark:divide-[var(--zui-accordion-lime-divider-dark,#a3e635)] rounded-xl border border-[color:var(--zui-accordion-lime-border,#65a30d)] dark:border-[color:var(--zui-accordion-lime-border-dark,#a3e635)]",
+  mint: "divide-y divide-[var(--zui-accordion-mint-divider,#10b981)] dark:divide-[var(--zui-accordion-mint-divider-dark,#6ee7b7)] rounded-xl border border-[color:var(--zui-accordion-mint-border,#10b981)] dark:border-[color:var(--zui-accordion-mint-border-dark,#6ee7b7)]",
+  ocean:
+    "divide-y divide-[var(--zui-accordion-ocean-divider,#0284c7)] dark:divide-[var(--zui-accordion-ocean-divider-dark,#38bdf8)] rounded-xl border border-[color:var(--zui-accordion-ocean-border,#0284c7)] dark:border-[color:var(--zui-accordion-ocean-border-dark,#38bdf8)]",
+  sapphire:
+    "divide-y divide-[var(--zui-accordion-sapphire-divider,#1d4ed8)] dark:divide-[var(--zui-accordion-sapphire-divider-dark,#60a5fa)] rounded-xl border border-[color:var(--zui-accordion-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-accordion-sapphire-border-dark,#60a5fa)]",
+  lavender:
+    "divide-y divide-[var(--zui-accordion-lavender-divider,#8b5cf6)] dark:divide-[var(--zui-accordion-lavender-divider-dark,#a78bfa)] rounded-xl border border-[color:var(--zui-accordion-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-accordion-lavender-border-dark,#a78bfa)]",
+  ruby: "divide-y divide-[var(--zui-accordion-ruby-divider,#be123c)] dark:divide-[var(--zui-accordion-ruby-divider-dark,#fb7185)] rounded-xl border border-[color:var(--zui-accordion-ruby-border,#be123c)] dark:border-[color:var(--zui-accordion-ruby-border-dark,#fb7185)]",
+  red: "divide-y divide-[var(--zui-accordion-red-divider,#dc2626)] dark:divide-[var(--zui-accordion-red-divider-dark,#ef4444)] rounded-xl border border-[color:var(--zui-accordion-red-border,#dc2626)] dark:border-[color:var(--zui-accordion-red-border-dark,#ef4444)]",
+  slate:
+    "divide-y divide-[var(--zui-accordion-slate-divider,#475569)] dark:divide-[var(--zui-accordion-slate-divider-dark,#64748b)] rounded-xl border border-[color:var(--zui-accordion-slate-border,#475569)] dark:border-[color:var(--zui-accordion-slate-border-dark,#64748b)]",
+  zinc: "divide-y divide-[var(--zui-accordion-zinc-divider,#52525b)] dark:divide-[var(--zui-accordion-zinc-divider-dark,#71717a)] rounded-xl border border-[color:var(--zui-accordion-zinc-border,#52525b)] dark:border-[color:var(--zui-accordion-zinc-border-dark,#71717a)]",
+  stone:
+    "divide-y divide-[var(--zui-accordion-stone-divider,#57534e)] dark:divide-[var(--zui-accordion-stone-divider-dark,#78716c)] rounded-xl border border-[color:var(--zui-accordion-stone-border,#57534e)] dark:border-[color:var(--zui-accordion-stone-border-dark,#78716c)]",
+  royal:
+    "divide-y divide-[var(--zui-accordion-royal-divider,#4338ca)] dark:divide-[var(--zui-accordion-royal-divider-dark,#818cf8)] rounded-xl border border-[color:var(--zui-accordion-royal-border,#4338ca)] dark:border-[color:var(--zui-accordion-royal-border-dark,#818cf8)]",
+  electric:
+    "divide-y divide-[var(--zui-accordion-electric-divider,#0ea5e9)] dark:divide-[var(--zui-accordion-electric-divider-dark,#38bdf8)] rounded-xl border border-[color:var(--zui-accordion-electric-border,#0ea5e9)] dark:border-[color:var(--zui-accordion-electric-border-dark,#38bdf8)]",
+  forest:
+    "divide-y divide-[var(--zui-accordion-forest-divider,#166534)] dark:divide-[var(--zui-accordion-forest-divider-dark,#4ade80)] rounded-xl border border-[color:var(--zui-accordion-forest-border,#166534)] dark:border-[color:var(--zui-accordion-forest-border-dark,#4ade80)]",
+  sunset:
+    "divide-y divide-[var(--zui-accordion-sunset-divider,#ea580c)] dark:divide-[var(--zui-accordion-sunset-divider-dark,#fb923c)] rounded-xl border border-[color:var(--zui-accordion-sunset-border,#ea580c)] dark:border-[color:var(--zui-accordion-sunset-border-dark,#fb923c)]",
+  magenta:
+    "divide-y divide-[var(--zui-accordion-magenta-divider,#c026d3)] dark:divide-[var(--zui-accordion-magenta-divider-dark,#e879f9)] rounded-xl border border-[color:var(--zui-accordion-magenta-border,#c026d3)] dark:border-[color:var(--zui-accordion-magenta-border-dark,#e879f9)]",
+  crimson:
+    "divide-y divide-[var(--zui-accordion-crimson-divider,#b91c1c)] dark:divide-[var(--zui-accordion-crimson-divider-dark,#f87171)] rounded-xl border border-[color:var(--zui-accordion-crimson-border,#b91c1c)] dark:border-[color:var(--zui-accordion-crimson-border-dark,#f87171)]",
+  aqua: "divide-y divide-[var(--zui-accordion-aqua-divider,#0f766e)] dark:divide-[var(--zui-accordion-aqua-divider-dark,#2dd4bf)] rounded-xl border border-[color:var(--zui-accordion-aqua-border,#0f766e)] dark:border-[color:var(--zui-accordion-aqua-border-dark,#2dd4bf)]",
+  plum: "divide-y divide-[var(--zui-accordion-plum-divider,#7e22ce)] dark:divide-[var(--zui-accordion-plum-divider-dark,#c084fc)] rounded-xl border border-[color:var(--zui-accordion-plum-border,#7e22ce)] dark:border-[color:var(--zui-accordion-plum-border-dark,#c084fc)]",
   sky: "divide-y divide-[var(--zui-accordion-sky-divider,oklch(44.3%_0.11_240.79))] dark:divide-[var(--zui-accordion-sky-divider-dark,oklch(58.8%_0.158_241.966))] rounded-xl border border-[color:var(--zui-accordion-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-accordion-sky-border-dark,oklch(58.8%_0.158_241.966))]",
   rose: "divide-y divide-[var(--zui-accordion-rose-divider,oklch(45.5%_0.188_13.697))] dark:divide-[var(--zui-accordion-rose-divider-dark,oklch(58.6%_0.253_17.585))] rounded-xl border border-[color:var(--zui-accordion-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-accordion-rose-border-dark,oklch(58.6%_0.253_17.585))]",
   purple:
@@ -59,6 +92,39 @@ export const zuiAccordionItemAppearances = {
   card: "rounded-xl border border-[color:var(--zui-accordion-item-card-border,#0000001a)] dark:border-[color:var(--zui-accordion-item-card-border-dark,#ffffff1a)] bg-[var(--zui-accordion-item-card-bg,#0000000d)] dark:bg-[var(--zui-accordion-item-card-bg-dark,#00000099)] p-2",
   separated:
     "rounded-xl border border-[color:var(--zui-accordion-item-separated-border,#0000001a)] dark:border-[color:var(--zui-accordion-item-separated-border-dark,#ffffff1a)] bg-[var(--zui-accordion-item-separated-bg,oklch(98.4%_0.003_247.858_/_0.4))] dark:bg-[var(--zui-accordion-item-separated-bg-dark,oklch(12.9%_0.042_264.695_/_0.4))] p-2",
+  blue: "rounded-xl border border-[color:var(--zui-accordion-item-blue-border,#2563eb)] dark:border-[color:var(--zui-accordion-item-blue-border-dark,#3b82f6)] bg-[var(--zui-accordion-item-blue-bg,#2563eb1a)] dark:bg-[var(--zui-accordion-item-blue-bg-dark,#3b82f626)] p-2",
+  cyan: "rounded-xl border border-[color:var(--zui-accordion-item-cyan-border,#0891b2)] dark:border-[color:var(--zui-accordion-item-cyan-border-dark,#22d3ee)] bg-[var(--zui-accordion-item-cyan-bg,#0891b21a)] dark:bg-[var(--zui-accordion-item-cyan-bg-dark,#22d3ee26)] p-2",
+  green:
+    "rounded-xl border border-[color:var(--zui-accordion-item-green-border,#16a34a)] dark:border-[color:var(--zui-accordion-item-green-border-dark,#22c55e)] bg-[var(--zui-accordion-item-green-bg,#16a34a1a)] dark:bg-[var(--zui-accordion-item-green-bg-dark,#22c55e26)] p-2",
+  lime: "rounded-xl border border-[color:var(--zui-accordion-item-lime-border,#65a30d)] dark:border-[color:var(--zui-accordion-item-lime-border-dark,#a3e635)] bg-[var(--zui-accordion-item-lime-bg,#65a30d1a)] dark:bg-[var(--zui-accordion-item-lime-bg-dark,#a3e63526)] p-2",
+  mint: "rounded-xl border border-[color:var(--zui-accordion-item-mint-border,#10b981)] dark:border-[color:var(--zui-accordion-item-mint-border-dark,#6ee7b7)] bg-[var(--zui-accordion-item-mint-bg,#10b9811a)] dark:bg-[var(--zui-accordion-item-mint-bg-dark,#6ee7b726)] p-2",
+  ocean:
+    "rounded-xl border border-[color:var(--zui-accordion-item-ocean-border,#0284c7)] dark:border-[color:var(--zui-accordion-item-ocean-border-dark,#38bdf8)] bg-[var(--zui-accordion-item-ocean-bg,#0284c71a)] dark:bg-[var(--zui-accordion-item-ocean-bg-dark,#38bdf826)] p-2",
+  sapphire:
+    "rounded-xl border border-[color:var(--zui-accordion-item-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-accordion-item-sapphire-border-dark,#60a5fa)] bg-[var(--zui-accordion-item-sapphire-bg,#1d4ed81a)] dark:bg-[var(--zui-accordion-item-sapphire-bg-dark,#60a5fa26)] p-2",
+  lavender:
+    "rounded-xl border border-[color:var(--zui-accordion-item-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-accordion-item-lavender-border-dark,#a78bfa)] bg-[var(--zui-accordion-item-lavender-bg,#8b5cf61a)] dark:bg-[var(--zui-accordion-item-lavender-bg-dark,#a78bfa26)] p-2",
+  ruby: "rounded-xl border border-[color:var(--zui-accordion-item-ruby-border,#be123c)] dark:border-[color:var(--zui-accordion-item-ruby-border-dark,#fb7185)] bg-[var(--zui-accordion-item-ruby-bg,#be123c1a)] dark:bg-[var(--zui-accordion-item-ruby-bg-dark,#fb718526)] p-2",
+  red: "rounded-xl border border-[color:var(--zui-accordion-item-red-border,#dc2626)] dark:border-[color:var(--zui-accordion-item-red-border-dark,#ef4444)] bg-[var(--zui-accordion-item-red-bg,#dc26261a)] dark:bg-[var(--zui-accordion-item-red-bg-dark,#ef444426)] p-2",
+  slate:
+    "rounded-xl border border-[color:var(--zui-accordion-item-slate-border,#475569)] dark:border-[color:var(--zui-accordion-item-slate-border-dark,#64748b)] bg-[var(--zui-accordion-item-slate-bg,#4755691a)] dark:bg-[var(--zui-accordion-item-slate-bg-dark,#64748b26)] p-2",
+  zinc: "rounded-xl border border-[color:var(--zui-accordion-item-zinc-border,#52525b)] dark:border-[color:var(--zui-accordion-item-zinc-border-dark,#71717a)] bg-[var(--zui-accordion-item-zinc-bg,#52525b1a)] dark:bg-[var(--zui-accordion-item-zinc-bg-dark,#71717a26)] p-2",
+  stone:
+    "rounded-xl border border-[color:var(--zui-accordion-item-stone-border,#57534e)] dark:border-[color:var(--zui-accordion-item-stone-border-dark,#78716c)] bg-[var(--zui-accordion-item-stone-bg,#57534e1a)] dark:bg-[var(--zui-accordion-item-stone-bg-dark,#78716c26)] p-2",
+  royal:
+    "rounded-xl border border-[color:var(--zui-accordion-item-royal-border,#4338ca)] dark:border-[color:var(--zui-accordion-item-royal-border-dark,#818cf8)] bg-[var(--zui-accordion-item-royal-bg,#4338ca1a)] dark:bg-[var(--zui-accordion-item-royal-bg-dark,#818cf826)] p-2",
+  electric:
+    "rounded-xl border border-[color:var(--zui-accordion-item-electric-border,#0ea5e9)] dark:border-[color:var(--zui-accordion-item-electric-border-dark,#38bdf8)] bg-[var(--zui-accordion-item-electric-bg,#0ea5e91a)] dark:bg-[var(--zui-accordion-item-electric-bg-dark,#38bdf826)] p-2",
+  forest:
+    "rounded-xl border border-[color:var(--zui-accordion-item-forest-border,#166534)] dark:border-[color:var(--zui-accordion-item-forest-border-dark,#4ade80)] bg-[var(--zui-accordion-item-forest-bg,#1665341a)] dark:bg-[var(--zui-accordion-item-forest-bg-dark,#4ade8026)] p-2",
+  sunset:
+    "rounded-xl border border-[color:var(--zui-accordion-item-sunset-border,#ea580c)] dark:border-[color:var(--zui-accordion-item-sunset-border-dark,#fb923c)] bg-[var(--zui-accordion-item-sunset-bg,#ea580c1a)] dark:bg-[var(--zui-accordion-item-sunset-bg-dark,#fb923c26)] p-2",
+  magenta:
+    "rounded-xl border border-[color:var(--zui-accordion-item-magenta-border,#c026d3)] dark:border-[color:var(--zui-accordion-item-magenta-border-dark,#e879f9)] bg-[var(--zui-accordion-item-magenta-bg,#c026d31a)] dark:bg-[var(--zui-accordion-item-magenta-bg-dark,#e879f926)] p-2",
+  crimson:
+    "rounded-xl border border-[color:var(--zui-accordion-item-crimson-border,#b91c1c)] dark:border-[color:var(--zui-accordion-item-crimson-border-dark,#f87171)] bg-[var(--zui-accordion-item-crimson-bg,#b91c1c1a)] dark:bg-[var(--zui-accordion-item-crimson-bg-dark,#f8717126)] p-2",
+  aqua: "rounded-xl border border-[color:var(--zui-accordion-item-aqua-border,#0f766e)] dark:border-[color:var(--zui-accordion-item-aqua-border-dark,#2dd4bf)] bg-[var(--zui-accordion-item-aqua-bg,#0f766e1a)] dark:bg-[var(--zui-accordion-item-aqua-bg-dark,#2dd4bf26)] p-2",
+  plum: "rounded-xl border border-[color:var(--zui-accordion-item-plum-border,#7e22ce)] dark:border-[color:var(--zui-accordion-item-plum-border-dark,#c084fc)] bg-[var(--zui-accordion-item-plum-bg,#7e22ce1a)] dark:bg-[var(--zui-accordion-item-plum-bg-dark,#c084fc26)] p-2",
   sky: "rounded-xl border border-[color:var(--zui-accordion-item-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-accordion-item-sky-border-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-accordion-item-sky-bg,oklch(95.1%_0.026_236.824_/_0.5))] dark:bg-[var(--zui-accordion-item-sky-bg-dark,oklch(58.8%_0.158_241.966_/_0.03))] p-2",
   rose: "rounded-xl border border-[color:var(--zui-accordion-item-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-accordion-item-rose-border-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-accordion-item-rose-bg,oklch(94.1%_0.03_12.58_/_0.5))] dark:bg-[var(--zui-accordion-item-rose-bg-dark,oklch(58.6%_0.253_17.585_/_0.03))] p-2",
   purple:

package/src/design-system/alert.ts

@@ -13,6 +13,39 @@ export const zuiAlertAppearances = {
   info: "border-[color:var(--zui-alert-info-border,oklch(68.5%_0.169_237.323_/_0.4))] dark:border-[color:var(--zui-alert-info-border-dark,oklch(68.5%_0.169_237.323_/_0.4))] bg-[var(--zui-alert-info-bg,oklch(68.5%_0.169_237.323_/_0.1))] dark:bg-[var(--zui-alert-info-bg-dark,oklch(68.5%_0.169_237.323_/_0.1))] text-[color:var(--zui-alert-info-fg,oklch(29.3%_0.066_243.157))] dark:text-[color:var(--zui-alert-info-fg-dark,oklch(97.7%_0.013_236.62))]",
   ghost:
     "border-[color:var(--zui-alert-ghost-border,transparent)] dark:border-[color:var(--zui-alert-ghost-border-dark,transparent)] bg-[var(--zui-alert-ghost-bg,transparent)] dark:bg-[var(--zui-alert-ghost-bg-dark,transparent)] text-[color:var(--zui-alert-ghost-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-alert-ghost-fg-dark,oklch(92.9%_0.013_255.508))]",
+  blue: "border-[color:var(--zui-alert-blue-border,#2563eb)] dark:border-[color:var(--zui-alert-blue-border-dark,#3b82f6)] bg-[var(--zui-alert-blue-bg,#2563eb1a)] dark:bg-[var(--zui-alert-blue-bg-dark,#3b82f626)] backdrop-blur-xl text-[color:var(--zui-alert-blue-fg,#0f172a)] dark:text-[color:var(--zui-alert-blue-fg-dark,#f8fafc)]",
+  cyan: "border-[color:var(--zui-alert-cyan-border,#0891b2)] dark:border-[color:var(--zui-alert-cyan-border-dark,#22d3ee)] bg-[var(--zui-alert-cyan-bg,#0891b21a)] dark:bg-[var(--zui-alert-cyan-bg-dark,#22d3ee26)] backdrop-blur-xl text-[color:var(--zui-alert-cyan-fg,#0f172a)] dark:text-[color:var(--zui-alert-cyan-fg-dark,#f8fafc)]",
+  green:
+    "border-[color:var(--zui-alert-green-border,#16a34a)] dark:border-[color:var(--zui-alert-green-border-dark,#22c55e)] bg-[var(--zui-alert-green-bg,#16a34a1a)] dark:bg-[var(--zui-alert-green-bg-dark,#22c55e26)] backdrop-blur-xl text-[color:var(--zui-alert-green-fg,#0f172a)] dark:text-[color:var(--zui-alert-green-fg-dark,#f8fafc)]",
+  lime: "border-[color:var(--zui-alert-lime-border,#65a30d)] dark:border-[color:var(--zui-alert-lime-border-dark,#a3e635)] bg-[var(--zui-alert-lime-bg,#65a30d1a)] dark:bg-[var(--zui-alert-lime-bg-dark,#a3e63526)] backdrop-blur-xl text-[color:var(--zui-alert-lime-fg,#0f172a)] dark:text-[color:var(--zui-alert-lime-fg-dark,#f8fafc)]",
+  mint: "border-[color:var(--zui-alert-mint-border,#10b981)] dark:border-[color:var(--zui-alert-mint-border-dark,#6ee7b7)] bg-[var(--zui-alert-mint-bg,#10b9811a)] dark:bg-[var(--zui-alert-mint-bg-dark,#6ee7b726)] backdrop-blur-xl text-[color:var(--zui-alert-mint-fg,#0f172a)] dark:text-[color:var(--zui-alert-mint-fg-dark,#f8fafc)]",
+  ocean:
+    "border-[color:var(--zui-alert-ocean-border,#0284c7)] dark:border-[color:var(--zui-alert-ocean-border-dark,#38bdf8)] bg-[var(--zui-alert-ocean-bg,#0284c71a)] dark:bg-[var(--zui-alert-ocean-bg-dark,#38bdf826)] backdrop-blur-xl text-[color:var(--zui-alert-ocean-fg,#0f172a)] dark:text-[color:var(--zui-alert-ocean-fg-dark,#f8fafc)]",
+  sapphire:
+    "border-[color:var(--zui-alert-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-alert-sapphire-border-dark,#60a5fa)] bg-[var(--zui-alert-sapphire-bg,#1d4ed81a)] dark:bg-[var(--zui-alert-sapphire-bg-dark,#60a5fa26)] backdrop-blur-xl text-[color:var(--zui-alert-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-alert-sapphire-fg-dark,#f8fafc)]",
+  lavender:
+    "border-[color:var(--zui-alert-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-alert-lavender-border-dark,#a78bfa)] bg-[var(--zui-alert-lavender-bg,#8b5cf61a)] dark:bg-[var(--zui-alert-lavender-bg-dark,#a78bfa26)] backdrop-blur-xl text-[color:var(--zui-alert-lavender-fg,#0f172a)] dark:text-[color:var(--zui-alert-lavender-fg-dark,#f8fafc)]",
+  ruby: "border-[color:var(--zui-alert-ruby-border,#be123c)] dark:border-[color:var(--zui-alert-ruby-border-dark,#fb7185)] bg-[var(--zui-alert-ruby-bg,#be123c1a)] dark:bg-[var(--zui-alert-ruby-bg-dark,#fb718526)] backdrop-blur-xl text-[color:var(--zui-alert-ruby-fg,#0f172a)] dark:text-[color:var(--zui-alert-ruby-fg-dark,#f8fafc)]",
+  red: "border-[color:var(--zui-alert-red-border,#dc2626)] dark:border-[color:var(--zui-alert-red-border-dark,#ef4444)] bg-[var(--zui-alert-red-bg,#dc26261a)] dark:bg-[var(--zui-alert-red-bg-dark,#ef444426)] backdrop-blur-xl text-[color:var(--zui-alert-red-fg,#0f172a)] dark:text-[color:var(--zui-alert-red-fg-dark,#f8fafc)]",
+  slate:
+    "border-[color:var(--zui-alert-slate-border,#475569)] dark:border-[color:var(--zui-alert-slate-border-dark,#64748b)] bg-[var(--zui-alert-slate-bg,#4755691a)] dark:bg-[var(--zui-alert-slate-bg-dark,#64748b26)] backdrop-blur-xl text-[color:var(--zui-alert-slate-fg,#0f172a)] dark:text-[color:var(--zui-alert-slate-fg-dark,#f8fafc)]",
+  zinc: "border-[color:var(--zui-alert-zinc-border,#52525b)] dark:border-[color:var(--zui-alert-zinc-border-dark,#71717a)] bg-[var(--zui-alert-zinc-bg,#52525b1a)] dark:bg-[var(--zui-alert-zinc-bg-dark,#71717a26)] backdrop-blur-xl text-[color:var(--zui-alert-zinc-fg,#0f172a)] dark:text-[color:var(--zui-alert-zinc-fg-dark,#f8fafc)]",
+  stone:
+    "border-[color:var(--zui-alert-stone-border,#57534e)] dark:border-[color:var(--zui-alert-stone-border-dark,#78716c)] bg-[var(--zui-alert-stone-bg,#57534e1a)] dark:bg-[var(--zui-alert-stone-bg-dark,#78716c26)] backdrop-blur-xl text-[color:var(--zui-alert-stone-fg,#0f172a)] dark:text-[color:var(--zui-alert-stone-fg-dark,#f8fafc)]",
+  royal:
+    "border-[color:var(--zui-alert-royal-border,#4338ca)] dark:border-[color:var(--zui-alert-royal-border-dark,#818cf8)] bg-[var(--zui-alert-royal-bg,#4338ca1a)] dark:bg-[var(--zui-alert-royal-bg-dark,#818cf826)] backdrop-blur-xl text-[color:var(--zui-alert-royal-fg,#0f172a)] dark:text-[color:var(--zui-alert-royal-fg-dark,#f8fafc)]",
+  electric:
+    "border-[color:var(--zui-alert-electric-border,#0ea5e9)] dark:border-[color:var(--zui-alert-electric-border-dark,#38bdf8)] bg-[var(--zui-alert-electric-bg,#0ea5e91a)] dark:bg-[var(--zui-alert-electric-bg-dark,#38bdf826)] backdrop-blur-xl text-[color:var(--zui-alert-electric-fg,#0f172a)] dark:text-[color:var(--zui-alert-electric-fg-dark,#f8fafc)]",
+  forest:
+    "border-[color:var(--zui-alert-forest-border,#166534)] dark:border-[color:var(--zui-alert-forest-border-dark,#4ade80)] bg-[var(--zui-alert-forest-bg,#1665341a)] dark:bg-[var(--zui-alert-forest-bg-dark,#4ade8026)] backdrop-blur-xl text-[color:var(--zui-alert-forest-fg,#0f172a)] dark:text-[color:var(--zui-alert-forest-fg-dark,#f8fafc)]",
+  sunset:
+    "border-[color:var(--zui-alert-sunset-border,#ea580c)] dark:border-[color:var(--zui-alert-sunset-border-dark,#fb923c)] bg-[var(--zui-alert-sunset-bg,#ea580c1a)] dark:bg-[var(--zui-alert-sunset-bg-dark,#fb923c26)] backdrop-blur-xl text-[color:var(--zui-alert-sunset-fg,#0f172a)] dark:text-[color:var(--zui-alert-sunset-fg-dark,#f8fafc)]",
+  magenta:
+    "border-[color:var(--zui-alert-magenta-border,#c026d3)] dark:border-[color:var(--zui-alert-magenta-border-dark,#e879f9)] bg-[var(--zui-alert-magenta-bg,#c026d31a)] dark:bg-[var(--zui-alert-magenta-bg-dark,#e879f926)] backdrop-blur-xl text-[color:var(--zui-alert-magenta-fg,#0f172a)] dark:text-[color:var(--zui-alert-magenta-fg-dark,#f8fafc)]",
+  crimson:
+    "border-[color:var(--zui-alert-crimson-border,#b91c1c)] dark:border-[color:var(--zui-alert-crimson-border-dark,#f87171)] bg-[var(--zui-alert-crimson-bg,#b91c1c1a)] dark:bg-[var(--zui-alert-crimson-bg-dark,#f8717126)] backdrop-blur-xl text-[color:var(--zui-alert-crimson-fg,#0f172a)] dark:text-[color:var(--zui-alert-crimson-fg-dark,#f8fafc)]",
+  aqua: "border-[color:var(--zui-alert-aqua-border,#0f766e)] dark:border-[color:var(--zui-alert-aqua-border-dark,#2dd4bf)] bg-[var(--zui-alert-aqua-bg,#0f766e1a)] dark:bg-[var(--zui-alert-aqua-bg-dark,#2dd4bf26)] backdrop-blur-xl text-[color:var(--zui-alert-aqua-fg,#0f172a)] dark:text-[color:var(--zui-alert-aqua-fg-dark,#f8fafc)]",
+  plum: "border-[color:var(--zui-alert-plum-border,#7e22ce)] dark:border-[color:var(--zui-alert-plum-border-dark,#c084fc)] bg-[var(--zui-alert-plum-bg,#7e22ce1a)] dark:bg-[var(--zui-alert-plum-bg-dark,#c084fc26)] backdrop-blur-xl text-[color:var(--zui-alert-plum-fg,#0f172a)] dark:text-[color:var(--zui-alert-plum-fg-dark,#f8fafc)]",
   purple:
     "border-[color:var(--zui-alert-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-alert-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-alert-purple-bg,oklch(97.7%_0.014_308.299))] dark:bg-[var(--zui-alert-purple-bg-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl text-[color:var(--zui-alert-purple-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-alert-purple-fg-dark,oklch(98.4%_0.003_247.858))]",
   pink: "border-[color:var(--zui-alert-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-alert-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-alert-pink-bg,oklch(97.1%_0.014_343.198))] dark:bg-[var(--zui-alert-pink-bg-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl text-[color:var(--zui-alert-pink-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-alert-pink-fg-dark,oklch(98.4%_0.003_247.858))]",

package/src/design-system/animated-number.ts

@@ -13,6 +13,39 @@ export const zuiAnimatedNumberAppearance = {
   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))]",

package/src/design-system/avatar.ts

@@ -6,6 +6,39 @@ export const zuiAvatarAppearances = {
     "border-[color:var(--zui-avatar-default-border,#0000001a)] dark:border-[color:var(--zui-avatar-default-border-dark,#ffffff1a)] bg-[var(--zui-avatar-default-bg,#0000001a)] dark:bg-[var(--zui-avatar-default-bg-dark,#ffffff1a)] text-[color:var(--zui-avatar-default-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-default-fg-dark,oklch(92.9%_0.013_255.508))]",
   muted:
     "border-[color:var(--zui-avatar-muted-border,#00000066)] bg-[var(--zui-avatar-muted-bg,oklch(98.4%_0.003_247.858))] dark:border-[color:var(--zui-avatar-muted-border-dark,#ffffff1a)] dark:bg-[var(--zui-avatar-muted-bg-dark,oklch(12.9%_0.042_264.695_/_0.4))] text-[color:var(--zui-avatar-muted-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-muted-fg-dark,oklch(92.9%_0.013_255.508))]",
+  blue: "border-[color:var(--zui-avatar-blue-border,#2563eb)] dark:border-[color:var(--zui-avatar-blue-border-dark,#3b82f6)] bg-[var(--zui-avatar-blue-bg,#2563eb1a)] dark:bg-[var(--zui-avatar-blue-bg-dark,#3b82f626)] text-[color:var(--zui-avatar-blue-fg,#0f172a)] dark:text-[color:var(--zui-avatar-blue-fg-dark,#f8fafc)]",
+  cyan: "border-[color:var(--zui-avatar-cyan-border,#0891b2)] dark:border-[color:var(--zui-avatar-cyan-border-dark,#22d3ee)] bg-[var(--zui-avatar-cyan-bg,#0891b21a)] dark:bg-[var(--zui-avatar-cyan-bg-dark,#22d3ee26)] text-[color:var(--zui-avatar-cyan-fg,#0f172a)] dark:text-[color:var(--zui-avatar-cyan-fg-dark,#f8fafc)]",
+  green:
+    "border-[color:var(--zui-avatar-green-border,#16a34a)] dark:border-[color:var(--zui-avatar-green-border-dark,#22c55e)] bg-[var(--zui-avatar-green-bg,#16a34a1a)] dark:bg-[var(--zui-avatar-green-bg-dark,#22c55e26)] text-[color:var(--zui-avatar-green-fg,#0f172a)] dark:text-[color:var(--zui-avatar-green-fg-dark,#f8fafc)]",
+  lime: "border-[color:var(--zui-avatar-lime-border,#65a30d)] dark:border-[color:var(--zui-avatar-lime-border-dark,#a3e635)] bg-[var(--zui-avatar-lime-bg,#65a30d1a)] dark:bg-[var(--zui-avatar-lime-bg-dark,#a3e63526)] text-[color:var(--zui-avatar-lime-fg,#0f172a)] dark:text-[color:var(--zui-avatar-lime-fg-dark,#f8fafc)]",
+  mint: "border-[color:var(--zui-avatar-mint-border,#10b981)] dark:border-[color:var(--zui-avatar-mint-border-dark,#6ee7b7)] bg-[var(--zui-avatar-mint-bg,#10b9811a)] dark:bg-[var(--zui-avatar-mint-bg-dark,#6ee7b726)] text-[color:var(--zui-avatar-mint-fg,#0f172a)] dark:text-[color:var(--zui-avatar-mint-fg-dark,#f8fafc)]",
+  ocean:
+    "border-[color:var(--zui-avatar-ocean-border,#0284c7)] dark:border-[color:var(--zui-avatar-ocean-border-dark,#38bdf8)] bg-[var(--zui-avatar-ocean-bg,#0284c71a)] dark:bg-[var(--zui-avatar-ocean-bg-dark,#38bdf826)] text-[color:var(--zui-avatar-ocean-fg,#0f172a)] dark:text-[color:var(--zui-avatar-ocean-fg-dark,#f8fafc)]",
+  sapphire:
+    "border-[color:var(--zui-avatar-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-avatar-sapphire-border-dark,#60a5fa)] bg-[var(--zui-avatar-sapphire-bg,#1d4ed81a)] dark:bg-[var(--zui-avatar-sapphire-bg-dark,#60a5fa26)] text-[color:var(--zui-avatar-sapphire-fg,#0f172a)] dark:text-[color:var(--zui-avatar-sapphire-fg-dark,#f8fafc)]",
+  lavender:
+    "border-[color:var(--zui-avatar-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-avatar-lavender-border-dark,#a78bfa)] bg-[var(--zui-avatar-lavender-bg,#8b5cf61a)] dark:bg-[var(--zui-avatar-lavender-bg-dark,#a78bfa26)] text-[color:var(--zui-avatar-lavender-fg,#0f172a)] dark:text-[color:var(--zui-avatar-lavender-fg-dark,#f8fafc)]",
+  ruby: "border-[color:var(--zui-avatar-ruby-border,#be123c)] dark:border-[color:var(--zui-avatar-ruby-border-dark,#fb7185)] bg-[var(--zui-avatar-ruby-bg,#be123c1a)] dark:bg-[var(--zui-avatar-ruby-bg-dark,#fb718526)] text-[color:var(--zui-avatar-ruby-fg,#0f172a)] dark:text-[color:var(--zui-avatar-ruby-fg-dark,#f8fafc)]",
+  red: "border-[color:var(--zui-avatar-red-border,#dc2626)] dark:border-[color:var(--zui-avatar-red-border-dark,#ef4444)] bg-[var(--zui-avatar-red-bg,#dc26261a)] dark:bg-[var(--zui-avatar-red-bg-dark,#ef444426)] text-[color:var(--zui-avatar-red-fg,#0f172a)] dark:text-[color:var(--zui-avatar-red-fg-dark,#f8fafc)]",
+  slate:
+    "border-[color:var(--zui-avatar-slate-border,#475569)] dark:border-[color:var(--zui-avatar-slate-border-dark,#64748b)] bg-[var(--zui-avatar-slate-bg,#4755691a)] dark:bg-[var(--zui-avatar-slate-bg-dark,#64748b26)] text-[color:var(--zui-avatar-slate-fg,#0f172a)] dark:text-[color:var(--zui-avatar-slate-fg-dark,#f8fafc)]",
+  zinc: "border-[color:var(--zui-avatar-zinc-border,#52525b)] dark:border-[color:var(--zui-avatar-zinc-border-dark,#71717a)] bg-[var(--zui-avatar-zinc-bg,#52525b1a)] dark:bg-[var(--zui-avatar-zinc-bg-dark,#71717a26)] text-[color:var(--zui-avatar-zinc-fg,#0f172a)] dark:text-[color:var(--zui-avatar-zinc-fg-dark,#f8fafc)]",
+  stone:
+    "border-[color:var(--zui-avatar-stone-border,#57534e)] dark:border-[color:var(--zui-avatar-stone-border-dark,#78716c)] bg-[var(--zui-avatar-stone-bg,#57534e1a)] dark:bg-[var(--zui-avatar-stone-bg-dark,#78716c26)] text-[color:var(--zui-avatar-stone-fg,#0f172a)] dark:text-[color:var(--zui-avatar-stone-fg-dark,#f8fafc)]",
+  royal:
+    "border-[color:var(--zui-avatar-royal-border,#4338ca)] dark:border-[color:var(--zui-avatar-royal-border-dark,#818cf8)] bg-[var(--zui-avatar-royal-bg,#4338ca1a)] dark:bg-[var(--zui-avatar-royal-bg-dark,#818cf826)] text-[color:var(--zui-avatar-royal-fg,#0f172a)] dark:text-[color:var(--zui-avatar-royal-fg-dark,#f8fafc)]",
+  electric:
+    "border-[color:var(--zui-avatar-electric-border,#0ea5e9)] dark:border-[color:var(--zui-avatar-electric-border-dark,#38bdf8)] bg-[var(--zui-avatar-electric-bg,#0ea5e91a)] dark:bg-[var(--zui-avatar-electric-bg-dark,#38bdf826)] text-[color:var(--zui-avatar-electric-fg,#0f172a)] dark:text-[color:var(--zui-avatar-electric-fg-dark,#f8fafc)]",
+  forest:
+    "border-[color:var(--zui-avatar-forest-border,#166534)] dark:border-[color:var(--zui-avatar-forest-border-dark,#4ade80)] bg-[var(--zui-avatar-forest-bg,#1665341a)] dark:bg-[var(--zui-avatar-forest-bg-dark,#4ade8026)] text-[color:var(--zui-avatar-forest-fg,#0f172a)] dark:text-[color:var(--zui-avatar-forest-fg-dark,#f8fafc)]",
+  sunset:
+    "border-[color:var(--zui-avatar-sunset-border,#ea580c)] dark:border-[color:var(--zui-avatar-sunset-border-dark,#fb923c)] bg-[var(--zui-avatar-sunset-bg,#ea580c1a)] dark:bg-[var(--zui-avatar-sunset-bg-dark,#fb923c26)] text-[color:var(--zui-avatar-sunset-fg,#0f172a)] dark:text-[color:var(--zui-avatar-sunset-fg-dark,#f8fafc)]",
+  magenta:
+    "border-[color:var(--zui-avatar-magenta-border,#c026d3)] dark:border-[color:var(--zui-avatar-magenta-border-dark,#e879f9)] bg-[var(--zui-avatar-magenta-bg,#c026d31a)] dark:bg-[var(--zui-avatar-magenta-bg-dark,#e879f926)] text-[color:var(--zui-avatar-magenta-fg,#0f172a)] dark:text-[color:var(--zui-avatar-magenta-fg-dark,#f8fafc)]",
+  crimson:
+    "border-[color:var(--zui-avatar-crimson-border,#b91c1c)] dark:border-[color:var(--zui-avatar-crimson-border-dark,#f87171)] bg-[var(--zui-avatar-crimson-bg,#b91c1c1a)] dark:bg-[var(--zui-avatar-crimson-bg-dark,#f8717126)] text-[color:var(--zui-avatar-crimson-fg,#0f172a)] dark:text-[color:var(--zui-avatar-crimson-fg-dark,#f8fafc)]",
+  aqua: "border-[color:var(--zui-avatar-aqua-border,#0f766e)] dark:border-[color:var(--zui-avatar-aqua-border-dark,#2dd4bf)] bg-[var(--zui-avatar-aqua-bg,#0f766e1a)] dark:bg-[var(--zui-avatar-aqua-bg-dark,#2dd4bf26)] text-[color:var(--zui-avatar-aqua-fg,#0f172a)] dark:text-[color:var(--zui-avatar-aqua-fg-dark,#f8fafc)]",
+  plum: "border-[color:var(--zui-avatar-plum-border,#7e22ce)] dark:border-[color:var(--zui-avatar-plum-border-dark,#c084fc)] bg-[var(--zui-avatar-plum-bg,#7e22ce1a)] dark:bg-[var(--zui-avatar-plum-bg-dark,#c084fc26)] text-[color:var(--zui-avatar-plum-fg,#0f172a)] dark:text-[color:var(--zui-avatar-plum-fg-dark,#f8fafc)]",
   sky: "border-[color:var(--zui-avatar-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-avatar-sky-border-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-avatar-sky-bg,oklch(95.1%_0.026_236.824_/_0.5))] dark:bg-[var(--zui-avatar-sky-bg-dark,oklch(58.8%_0.158_241.966_/_0.03))] text-[color:var(--zui-avatar-sky-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-sky-fg-dark,oklch(92.9%_0.013_255.508))]",
   rose: "border-[color:var(--zui-avatar-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-avatar-rose-border-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-avatar-rose-bg,oklch(94.1%_0.03_12.58_/_0.5))] dark:bg-[var(--zui-avatar-rose-bg-dark,oklch(58.6%_0.253_17.585_/_0.03))] text-[color:var(--zui-avatar-rose-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-avatar-rose-fg-dark,oklch(92.9%_0.013_255.508))]",
   purple:

package/src/design-system/badge.ts

@@ -11,6 +11,39 @@ export const zuiButtonLikeSolidAppearances = {
     "bg-[var(--zui-badge-ghost-bg,transparent)] dark:bg-[var(--zui-badge-ghost-bg-dark,transparent)] text-[color:var(--zui-badge-ghost-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-badge-ghost-fg-dark,oklch(92.9%_0.013_255.508))]",
   glass:
     "border border-[color:var(--zui-badge-glass-border,#00000026)] dark:border-[color:var(--zui-badge-glass-border-dark,#ffffff26)] bg-[var(--zui-badge-glass-bg,#0000001a)] dark:bg-[var(--zui-badge-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-badge-glass-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-badge-glass-fg-dark,#ffffff)] backdrop-blur-md",
+  blue: "bg-[var(--zui-badge-blue-bg,#2563eb)] dark:bg-[var(--zui-badge-blue-bg-dark,#3b82f6)] text-[color:var(--zui-badge-blue-fg,#ffffff)] dark:text-[color:var(--zui-badge-blue-fg-dark,#ffffff)]",
+  cyan: "bg-[var(--zui-badge-cyan-bg,#0891b2)] dark:bg-[var(--zui-badge-cyan-bg-dark,#22d3ee)] text-[color:var(--zui-badge-cyan-fg,#083344)] dark:text-[color:var(--zui-badge-cyan-fg-dark,#083344)]",
+  green:
+    "bg-[var(--zui-badge-green-bg,#16a34a)] dark:bg-[var(--zui-badge-green-bg-dark,#22c55e)] text-[color:var(--zui-badge-green-fg,#ffffff)] dark:text-[color:var(--zui-badge-green-fg-dark,#ffffff)]",
+  lime: "bg-[var(--zui-badge-lime-bg,#65a30d)] dark:bg-[var(--zui-badge-lime-bg-dark,#a3e635)] text-[color:var(--zui-badge-lime-fg,#1a2e05)] dark:text-[color:var(--zui-badge-lime-fg-dark,#1a2e05)]",
+  mint: "bg-[var(--zui-badge-mint-bg,#10b981)] dark:bg-[var(--zui-badge-mint-bg-dark,#6ee7b7)] text-[color:var(--zui-badge-mint-fg,#064e3b)] dark:text-[color:var(--zui-badge-mint-fg-dark,#064e3b)]",
+  ocean:
+    "bg-[var(--zui-badge-ocean-bg,#0284c7)] dark:bg-[var(--zui-badge-ocean-bg-dark,#38bdf8)] text-[color:var(--zui-badge-ocean-fg,#082f49)] dark:text-[color:var(--zui-badge-ocean-fg-dark,#082f49)]",
+  sapphire:
+    "bg-[var(--zui-badge-sapphire-bg,#1d4ed8)] dark:bg-[var(--zui-badge-sapphire-bg-dark,#60a5fa)] text-[color:var(--zui-badge-sapphire-fg,#ffffff)] dark:text-[color:var(--zui-badge-sapphire-fg-dark,#ffffff)]",
+  lavender:
+    "bg-[var(--zui-badge-lavender-bg,#8b5cf6)] dark:bg-[var(--zui-badge-lavender-bg-dark,#a78bfa)] text-[color:var(--zui-badge-lavender-fg,#ffffff)] dark:text-[color:var(--zui-badge-lavender-fg-dark,#ffffff)]",
+  ruby: "bg-[var(--zui-badge-ruby-bg,#be123c)] dark:bg-[var(--zui-badge-ruby-bg-dark,#fb7185)] text-[color:var(--zui-badge-ruby-fg,#ffffff)] dark:text-[color:var(--zui-badge-ruby-fg-dark,#ffffff)]",
+  red: "bg-[var(--zui-badge-red-bg,#dc2626)] dark:bg-[var(--zui-badge-red-bg-dark,#ef4444)] text-[color:var(--zui-badge-red-fg,#ffffff)] dark:text-[color:var(--zui-badge-red-fg-dark,#ffffff)]",
+  slate:
+    "bg-[var(--zui-badge-slate-bg,#475569)] dark:bg-[var(--zui-badge-slate-bg-dark,#64748b)] text-[color:var(--zui-badge-slate-fg,#ffffff)] dark:text-[color:var(--zui-badge-slate-fg-dark,#ffffff)]",
+  zinc: "bg-[var(--zui-badge-zinc-bg,#52525b)] dark:bg-[var(--zui-badge-zinc-bg-dark,#71717a)] text-[color:var(--zui-badge-zinc-fg,#ffffff)] dark:text-[color:var(--zui-badge-zinc-fg-dark,#ffffff)]",
+  stone:
+    "bg-[var(--zui-badge-stone-bg,#57534e)] dark:bg-[var(--zui-badge-stone-bg-dark,#78716c)] text-[color:var(--zui-badge-stone-fg,#ffffff)] dark:text-[color:var(--zui-badge-stone-fg-dark,#ffffff)]",
+  royal:
+    "bg-[var(--zui-badge-royal-bg,#4338ca)] dark:bg-[var(--zui-badge-royal-bg-dark,#818cf8)] text-[color:var(--zui-badge-royal-fg,#ffffff)] dark:text-[color:var(--zui-badge-royal-fg-dark,#ffffff)]",
+  electric:
+    "bg-[var(--zui-badge-electric-bg,#0ea5e9)] dark:bg-[var(--zui-badge-electric-bg-dark,#38bdf8)] text-[color:var(--zui-badge-electric-fg,#ffffff)] dark:text-[color:var(--zui-badge-electric-fg-dark,#ffffff)]",
+  forest:
+    "bg-[var(--zui-badge-forest-bg,#166534)] dark:bg-[var(--zui-badge-forest-bg-dark,#4ade80)] text-[color:var(--zui-badge-forest-fg,#ffffff)] dark:text-[color:var(--zui-badge-forest-fg-dark,#ffffff)]",
+  sunset:
+    "bg-[var(--zui-badge-sunset-bg,#ea580c)] dark:bg-[var(--zui-badge-sunset-bg-dark,#fb923c)] text-[color:var(--zui-badge-sunset-fg,#ffffff)] dark:text-[color:var(--zui-badge-sunset-fg-dark,#ffffff)]",
+  magenta:
+    "bg-[var(--zui-badge-magenta-bg,#c026d3)] dark:bg-[var(--zui-badge-magenta-bg-dark,#e879f9)] text-[color:var(--zui-badge-magenta-fg,#ffffff)] dark:text-[color:var(--zui-badge-magenta-fg-dark,#ffffff)]",
+  crimson:
+    "bg-[var(--zui-badge-crimson-bg,#b91c1c)] dark:bg-[var(--zui-badge-crimson-bg-dark,#f87171)] text-[color:var(--zui-badge-crimson-fg,#ffffff)] dark:text-[color:var(--zui-badge-crimson-fg-dark,#ffffff)]",
+  aqua: "bg-[var(--zui-badge-aqua-bg,#0f766e)] dark:bg-[var(--zui-badge-aqua-bg-dark,#2dd4bf)] text-[color:var(--zui-badge-aqua-fg,#ffffff)] dark:text-[color:var(--zui-badge-aqua-fg-dark,#ffffff)]",
+  plum: "bg-[var(--zui-badge-plum-bg,#7e22ce)] dark:bg-[var(--zui-badge-plum-bg-dark,#c084fc)] text-[color:var(--zui-badge-plum-fg,#ffffff)] dark:text-[color:var(--zui-badge-plum-fg-dark,#ffffff)]",
   emerald:
     "bg-[var(--zui-badge-emerald-bg,oklch(69.6%_0.17_162.48))] dark:bg-[var(--zui-badge-emerald-bg-dark,oklch(43.2%_0.095_166.913))] text-[color:var(--zui-badge-emerald-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-emerald-fg-dark,#ffffff)]",
   indigo:

package/src/design-system/breadcrumb.ts

@@ -5,6 +5,39 @@ export const zuiBreadcrumbAppearances = {
     "text-[color:var(--zui-breadcrumb-default-fg,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-breadcrumb-default-fg-dark,oklch(86.9%_0.022_252.894))]",
   muted:
     "text-[color:var(--zui-breadcrumb-muted-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-breadcrumb-muted-fg-dark,oklch(70.4%_0.04_256.788))]",
+  blue: "text-[color:var(--zui-breadcrumb-blue-fg,#2563eb)] dark:text-[color:var(--zui-breadcrumb-blue-fg-dark,#3b82f6)]",
+  cyan: "text-[color:var(--zui-breadcrumb-cyan-fg,#0891b2)] dark:text-[color:var(--zui-breadcrumb-cyan-fg-dark,#22d3ee)]",
+  green:
+    "text-[color:var(--zui-breadcrumb-green-fg,#16a34a)] dark:text-[color:var(--zui-breadcrumb-green-fg-dark,#22c55e)]",
+  lime: "text-[color:var(--zui-breadcrumb-lime-fg,#65a30d)] dark:text-[color:var(--zui-breadcrumb-lime-fg-dark,#a3e635)]",
+  mint: "text-[color:var(--zui-breadcrumb-mint-fg,#10b981)] dark:text-[color:var(--zui-breadcrumb-mint-fg-dark,#6ee7b7)]",
+  ocean:
+    "text-[color:var(--zui-breadcrumb-ocean-fg,#0284c7)] dark:text-[color:var(--zui-breadcrumb-ocean-fg-dark,#38bdf8)]",
+  sapphire:
+    "text-[color:var(--zui-breadcrumb-sapphire-fg,#1d4ed8)] dark:text-[color:var(--zui-breadcrumb-sapphire-fg-dark,#60a5fa)]",
+  lavender:
+    "text-[color:var(--zui-breadcrumb-lavender-fg,#8b5cf6)] dark:text-[color:var(--zui-breadcrumb-lavender-fg-dark,#a78bfa)]",
+  ruby: "text-[color:var(--zui-breadcrumb-ruby-fg,#be123c)] dark:text-[color:var(--zui-breadcrumb-ruby-fg-dark,#fb7185)]",
+  red: "text-[color:var(--zui-breadcrumb-red-fg,#dc2626)] dark:text-[color:var(--zui-breadcrumb-red-fg-dark,#ef4444)]",
+  slate:
+    "text-[color:var(--zui-breadcrumb-slate-fg,#475569)] dark:text-[color:var(--zui-breadcrumb-slate-fg-dark,#64748b)]",
+  zinc: "text-[color:var(--zui-breadcrumb-zinc-fg,#52525b)] dark:text-[color:var(--zui-breadcrumb-zinc-fg-dark,#71717a)]",
+  stone:
+    "text-[color:var(--zui-breadcrumb-stone-fg,#57534e)] dark:text-[color:var(--zui-breadcrumb-stone-fg-dark,#78716c)]",
+  royal:
+    "text-[color:var(--zui-breadcrumb-royal-fg,#4338ca)] dark:text-[color:var(--zui-breadcrumb-royal-fg-dark,#818cf8)]",
+  electric:
+    "text-[color:var(--zui-breadcrumb-electric-fg,#0ea5e9)] dark:text-[color:var(--zui-breadcrumb-electric-fg-dark,#38bdf8)]",
+  forest:
+    "text-[color:var(--zui-breadcrumb-forest-fg,#166534)] dark:text-[color:var(--zui-breadcrumb-forest-fg-dark,#4ade80)]",
+  sunset:
+    "text-[color:var(--zui-breadcrumb-sunset-fg,#ea580c)] dark:text-[color:var(--zui-breadcrumb-sunset-fg-dark,#fb923c)]",
+  magenta:
+    "text-[color:var(--zui-breadcrumb-magenta-fg,#c026d3)] dark:text-[color:var(--zui-breadcrumb-magenta-fg-dark,#e879f9)]",
+  crimson:
+    "text-[color:var(--zui-breadcrumb-crimson-fg,#b91c1c)] dark:text-[color:var(--zui-breadcrumb-crimson-fg-dark,#f87171)]",
+  aqua: "text-[color:var(--zui-breadcrumb-aqua-fg,#0f766e)] dark:text-[color:var(--zui-breadcrumb-aqua-fg-dark,#2dd4bf)]",
+  plum: "text-[color:var(--zui-breadcrumb-plum-fg,#7e22ce)] dark:text-[color:var(--zui-breadcrumb-plum-fg-dark,#c084fc)]",
   sky: "text-[color:var(--zui-breadcrumb-sky-fg,oklch(44.3%_0.11_240.79))] dark:text-[color:var(--zui-breadcrumb-sky-fg-dark,oklch(58.8%_0.158_241.966))]",
   rose: "text-[color:var(--zui-breadcrumb-rose-fg,oklch(45.5%_0.188_13.697))] dark:text-[color:var(--zui-breadcrumb-rose-fg-dark,oklch(58.6%_0.253_17.585))]",
   purple:

package/src/design-system/button.ts

@@ -24,8 +24,41 @@ export const zuiButtonAppearances = {
   link: "bg-transparent text-[color:var(--zui-button-link-fg,#0e7490)] dark:text-[color:var(--zui-button-link-fg-dark,#67e8f9)] underline-offset-4 hover:underline",
   glass:
     "border border-[color:var(--zui-button-glass-border,#00000026)] dark:border-[color:var(--zui-button-glass-border-dark,#ffffff26)] bg-[var(--zui-button-glass-bg,#0000001a)] dark:bg-[var(--zui-button-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-button-glass-fg,#0f172a)] dark:text-[color:var(--zui-button-glass-fg-dark,#ffffff)] backdrop-blur-md hover:bg-[var(--zui-button-glass-bg-hover,#00000026)] dark:hover:bg-[var(--zui-button-glass-bg-hover-dark,#ffffff26)]",
+  blue: "bg-[var(--zui-button-blue-bg,#2563eb)] dark:bg-[var(--zui-button-blue-bg-dark,#3b82f6)] text-[color:var(--zui-button-blue-fg,#ffffff)] dark:text-[color:var(--zui-button-blue-fg-dark,#ffffff)] hover:bg-[var(--zui-button-blue-bg-hover,#2563eb)] dark:hover:bg-[var(--zui-button-blue-bg-hover-dark,#3b82f6)]",
+  cyan: "bg-[var(--zui-button-cyan-bg,#0891b2)] dark:bg-[var(--zui-button-cyan-bg-dark,#22d3ee)] text-[color:var(--zui-button-cyan-fg,#083344)] dark:text-[color:var(--zui-button-cyan-fg-dark,#083344)] hover:bg-[var(--zui-button-cyan-bg-hover,#0891b2)] dark:hover:bg-[var(--zui-button-cyan-bg-hover-dark,#22d3ee)]",
+  green:
+    "bg-[var(--zui-button-green-bg,#16a34a)] dark:bg-[var(--zui-button-green-bg-dark,#22c55e)] text-[color:var(--zui-button-green-fg,#ffffff)] dark:text-[color:var(--zui-button-green-fg-dark,#052e16)] hover:bg-[var(--zui-button-green-bg-hover,#16a34a)] dark:hover:bg-[var(--zui-button-green-bg-hover-dark,#22c55e)]",
+  lime: "bg-[var(--zui-button-lime-bg,#65a30d)] dark:bg-[var(--zui-button-lime-bg-dark,#a3e635)] text-[color:var(--zui-button-lime-fg,#1a2e05)] dark:text-[color:var(--zui-button-lime-fg-dark,#1a2e05)] hover:bg-[var(--zui-button-lime-bg-hover,#65a30d)] dark:hover:bg-[var(--zui-button-lime-bg-hover-dark,#a3e635)]",
+  mint: "bg-[var(--zui-button-mint-bg,#10b981)] dark:bg-[var(--zui-button-mint-bg-dark,#6ee7b7)] text-[color:var(--zui-button-mint-fg,#064e3b)] dark:text-[color:var(--zui-button-mint-fg-dark,#064e3b)] hover:bg-[var(--zui-button-mint-bg-hover,#10b981)] dark:hover:bg-[var(--zui-button-mint-bg-hover-dark,#6ee7b7)]",
+  ocean:
+    "bg-[var(--zui-button-ocean-bg,#0284c7)] dark:bg-[var(--zui-button-ocean-bg-dark,#38bdf8)] text-[color:var(--zui-button-ocean-fg,#082f49)] dark:text-[color:var(--zui-button-ocean-fg-dark,#082f49)] hover:bg-[var(--zui-button-ocean-bg-hover,#0284c7)] dark:hover:bg-[var(--zui-button-ocean-bg-hover-dark,#38bdf8)]",
+  sapphire:
+    "bg-[var(--zui-button-sapphire-bg,#1d4ed8)] dark:bg-[var(--zui-button-sapphire-bg-dark,#60a5fa)] text-[color:var(--zui-button-sapphire-fg,#ffffff)] dark:text-[color:var(--zui-button-sapphire-fg-dark,#0f172a)] hover:bg-[var(--zui-button-sapphire-bg-hover,#1d4ed8)] dark:hover:bg-[var(--zui-button-sapphire-bg-hover-dark,#60a5fa)]",
+  lavender:
+    "bg-[var(--zui-button-lavender-bg,#8b5cf6)] dark:bg-[var(--zui-button-lavender-bg-dark,#a78bfa)] text-[color:var(--zui-button-lavender-fg,#ffffff)] dark:text-[color:var(--zui-button-lavender-fg-dark,#1e1b4b)] hover:bg-[var(--zui-button-lavender-bg-hover,#8b5cf6)] dark:hover:bg-[var(--zui-button-lavender-bg-hover-dark,#a78bfa)]",
+  ruby: "bg-[var(--zui-button-ruby-bg,#be123c)] dark:bg-[var(--zui-button-ruby-bg-dark,#fb7185)] text-[color:var(--zui-button-ruby-fg,#ffffff)] dark:text-[color:var(--zui-button-ruby-fg-dark,#450a0a)] hover:bg-[var(--zui-button-ruby-bg-hover,#be123c)] dark:hover:bg-[var(--zui-button-ruby-bg-hover-dark,#fb7185)]",
+  red: "bg-[var(--zui-button-red-bg,#dc2626)] dark:bg-[var(--zui-button-red-bg-dark,#ef4444)] text-[color:var(--zui-button-red-fg,#ffffff)] dark:text-[color:var(--zui-button-red-fg-dark,#ffffff)] hover:bg-[var(--zui-button-red-bg-hover,#dc2626)] dark:hover:bg-[var(--zui-button-red-bg-hover-dark,#ef4444)]",
+  slate:
+    "bg-[var(--zui-button-slate-bg,#475569)] dark:bg-[var(--zui-button-slate-bg-dark,#64748b)] text-[color:var(--zui-button-slate-fg,#ffffff)] dark:text-[color:var(--zui-button-slate-fg-dark,#ffffff)] hover:bg-[var(--zui-button-slate-bg-hover,#475569)] dark:hover:bg-[var(--zui-button-slate-bg-hover-dark,#64748b)]",
+  zinc: "bg-[var(--zui-button-zinc-bg,#52525b)] dark:bg-[var(--zui-button-zinc-bg-dark,#71717a)] text-[color:var(--zui-button-zinc-fg,#ffffff)] dark:text-[color:var(--zui-button-zinc-fg-dark,#ffffff)] hover:bg-[var(--zui-button-zinc-bg-hover,#52525b)] dark:hover:bg-[var(--zui-button-zinc-bg-hover-dark,#71717a)]",
+  stone:
+    "bg-[var(--zui-button-stone-bg,#57534e)] dark:bg-[var(--zui-button-stone-bg-dark,#78716c)] text-[color:var(--zui-button-stone-fg,#ffffff)] dark:text-[color:var(--zui-button-stone-fg-dark,#ffffff)] hover:bg-[var(--zui-button-stone-bg-hover,#57534e)] dark:hover:bg-[var(--zui-button-stone-bg-hover-dark,#78716c)]",
+  royal:
+    "bg-[var(--zui-button-royal-bg,#4338ca)] dark:bg-[var(--zui-button-royal-bg-dark,#818cf8)] text-[color:var(--zui-button-royal-fg,#ffffff)] dark:text-[color:var(--zui-button-royal-fg-dark,#1e1b4b)] hover:bg-[var(--zui-button-royal-bg-hover,#4338ca)] dark:hover:bg-[var(--zui-button-royal-bg-hover-dark,#818cf8)]",
+  electric:
+    "bg-[var(--zui-button-electric-bg,#0ea5e9)] dark:bg-[var(--zui-button-electric-bg-dark,#38bdf8)] text-[color:var(--zui-button-electric-fg,#ffffff)] dark:text-[color:var(--zui-button-electric-fg-dark,#082f49)] hover:bg-[var(--zui-button-electric-bg-hover,#0ea5e9)] dark:hover:bg-[var(--zui-button-electric-bg-hover-dark,#38bdf8)]",
+  forest:
+    "bg-[var(--zui-button-forest-bg,#166534)] dark:bg-[var(--zui-button-forest-bg-dark,#4ade80)] text-[color:var(--zui-button-forest-fg,#ffffff)] dark:text-[color:var(--zui-button-forest-fg-dark,#052e16)] hover:bg-[var(--zui-button-forest-bg-hover,#166534)] dark:hover:bg-[var(--zui-button-forest-bg-hover-dark,#4ade80)]",
+  sunset:
+    "bg-[var(--zui-button-sunset-bg,#ea580c)] dark:bg-[var(--zui-button-sunset-bg-dark,#fb923c)] text-[color:var(--zui-button-sunset-fg,#ffffff)] dark:text-[color:var(--zui-button-sunset-fg-dark,#431407)] hover:bg-[var(--zui-button-sunset-bg-hover,#ea580c)] dark:hover:bg-[var(--zui-button-sunset-bg-hover-dark,#fb923c)]",
+  magenta:
+    "bg-[var(--zui-button-magenta-bg,#c026d3)] dark:bg-[var(--zui-button-magenta-bg-dark,#e879f9)] text-[color:var(--zui-button-magenta-fg,#ffffff)] dark:text-[color:var(--zui-button-magenta-fg-dark,#4a044e)] hover:bg-[var(--zui-button-magenta-bg-hover,#c026d3)] dark:hover:bg-[var(--zui-button-magenta-bg-hover-dark,#e879f9)]",
+  crimson:
+    "bg-[var(--zui-button-crimson-bg,#b91c1c)] dark:bg-[var(--zui-button-crimson-bg-dark,#f87171)] text-[color:var(--zui-button-crimson-fg,#ffffff)] dark:text-[color:var(--zui-button-crimson-fg-dark,#450a0a)] hover:bg-[var(--zui-button-crimson-bg-hover,#b91c1c)] dark:hover:bg-[var(--zui-button-crimson-bg-hover-dark,#f87171)]",
+  aqua: "bg-[var(--zui-button-aqua-bg,#0f766e)] dark:bg-[var(--zui-button-aqua-bg-dark,#2dd4bf)] text-[color:var(--zui-button-aqua-fg,#ffffff)] dark:text-[color:var(--zui-button-aqua-fg-dark,#042f2e)] hover:bg-[var(--zui-button-aqua-bg-hover,#0f766e)] dark:hover:bg-[var(--zui-button-aqua-bg-hover-dark,#2dd4bf)]",
+  plum: "bg-[var(--zui-button-plum-bg,#7e22ce)] dark:bg-[var(--zui-button-plum-bg-dark,#c084fc)] text-[color:var(--zui-button-plum-fg,#ffffff)] dark:text-[color:var(--zui-button-plum-fg-dark,#3b0764)] hover:bg-[var(--zui-button-plum-bg-hover,#7e22ce)] dark:hover:bg-[var(--zui-button-plum-bg-hover-dark,#c084fc)]",
   emerald:
-    "bg-[var(--zui-button-emerald-bg,#10b981)] dark:bg-[var(--zui-button-emerald-bg-dark,#065f46)] text-[color:var(--zui-button-emerald-fg,#ffffff)] dark:text-[color:var(--zui-button-emerald-fg-dark,#ffffff)] hover:bg-[var(--zui-button-emerald-bg-hover,#10b981)] dark:hover:bg-[var(--zui-button-emerald-bg-hover-dark,#064e3b)]",
+    "bg-[var(--zui-button-emerald-bg,#10b981)] dark:bg-[var(--zui-button-emerald-bg-dark,#065f46)] text-[color:var(--zui-button-emerald-fg,#064e3b)] dark:text-[color:var(--zui-button-emerald-fg-dark,#064e3b)] hover:bg-[var(--zui-button-emerald-bg-hover,#10b981)] dark:hover:bg-[var(--zui-button-emerald-bg-hover-dark,#064e3b)]",
   indigo:
     "bg-[var(--zui-button-indigo-bg,#3730a3)] dark:bg-[var(--zui-button-indigo-bg-dark,#4f46e5)] text-[color:var(--zui-button-indigo-fg,#ffffff)] dark:text-[color:var(--zui-button-indigo-fg-dark,#ffffff)] hover:bg-[var(--zui-button-indigo-bg-hover,#3730a3)] dark:hover:bg-[var(--zui-button-indigo-bg-hover-dark,#4f46e5)]",
   purple:

package/src/design-system/card.ts

@@ -15,6 +15,39 @@ export const zuiCardAppearances = {
     "border border-[color:var(--zui-card-ghost-border,transparent)] dark:border-[color:var(--zui-card-ghost-border-dark,transparent)] bg-[var(--zui-card-ghost-bg,transparent)] dark:bg-[var(--zui-card-ghost-bg-dark,transparent)]",
   elevated:
     "border border-[color:var(--zui-card-elevated-border,#0000001a)] dark:border-[color:var(--zui-card-elevated-border-dark,#ffffff1a)] bg-[var(--zui-card-elevated-bg,oklch(96.8%_0.007_247.896_/_0.8))] dark:bg-[var(--zui-card-elevated-bg-dark,oklch(20.8%_0.042_265.755_/_0.8))] shadow-[var(--zui-card-elevated-shadow,0_12px_32px_rgba(15,23,42,0.12))] dark:shadow-[var(--zui-card-elevated-shadow-dark,0_24px_64px_rgba(15,23,42,0.45))]",
+  blue: "border border-[color:var(--zui-card-blue-border,#2563eb)] dark:border-[color:var(--zui-card-blue-border-dark,#3b82f6)] bg-[var(--zui-card-blue-bg,#2563eb1a)] dark:bg-[var(--zui-card-blue-bg-dark,#3b82f626)] backdrop-blur-xl",
+  cyan: "border border-[color:var(--zui-card-cyan-border,#0891b2)] dark:border-[color:var(--zui-card-cyan-border-dark,#22d3ee)] bg-[var(--zui-card-cyan-bg,#0891b21a)] dark:bg-[var(--zui-card-cyan-bg-dark,#22d3ee26)] backdrop-blur-xl",
+  green:
+    "border border-[color:var(--zui-card-green-border,#16a34a)] dark:border-[color:var(--zui-card-green-border-dark,#22c55e)] bg-[var(--zui-card-green-bg,#16a34a1a)] dark:bg-[var(--zui-card-green-bg-dark,#22c55e26)] backdrop-blur-xl",
+  lime: "border border-[color:var(--zui-card-lime-border,#65a30d)] dark:border-[color:var(--zui-card-lime-border-dark,#a3e635)] bg-[var(--zui-card-lime-bg,#65a30d1a)] dark:bg-[var(--zui-card-lime-bg-dark,#a3e63526)] backdrop-blur-xl",
+  mint: "border border-[color:var(--zui-card-mint-border,#10b981)] dark:border-[color:var(--zui-card-mint-border-dark,#6ee7b7)] bg-[var(--zui-card-mint-bg,#10b9811a)] dark:bg-[var(--zui-card-mint-bg-dark,#6ee7b726)] backdrop-blur-xl",
+  ocean:
+    "border border-[color:var(--zui-card-ocean-border,#0284c7)] dark:border-[color:var(--zui-card-ocean-border-dark,#38bdf8)] bg-[var(--zui-card-ocean-bg,#0284c71a)] dark:bg-[var(--zui-card-ocean-bg-dark,#38bdf826)] backdrop-blur-xl",
+  sapphire:
+    "border border-[color:var(--zui-card-sapphire-border,#1d4ed8)] dark:border-[color:var(--zui-card-sapphire-border-dark,#60a5fa)] bg-[var(--zui-card-sapphire-bg,#1d4ed81a)] dark:bg-[var(--zui-card-sapphire-bg-dark,#60a5fa26)] backdrop-blur-xl",
+  lavender:
+    "border border-[color:var(--zui-card-lavender-border,#8b5cf6)] dark:border-[color:var(--zui-card-lavender-border-dark,#a78bfa)] bg-[var(--zui-card-lavender-bg,#8b5cf61a)] dark:bg-[var(--zui-card-lavender-bg-dark,#a78bfa26)] backdrop-blur-xl",
+  ruby: "border border-[color:var(--zui-card-ruby-border,#be123c)] dark:border-[color:var(--zui-card-ruby-border-dark,#fb7185)] bg-[var(--zui-card-ruby-bg,#be123c1a)] dark:bg-[var(--zui-card-ruby-bg-dark,#fb718526)] backdrop-blur-xl",
+  red: "border border-[color:var(--zui-card-red-border,#dc2626)] dark:border-[color:var(--zui-card-red-border-dark,#ef4444)] bg-[var(--zui-card-red-bg,#dc26261a)] dark:bg-[var(--zui-card-red-bg-dark,#ef444426)] backdrop-blur-xl",
+  slate:
+    "border border-[color:var(--zui-card-slate-border,#475569)] dark:border-[color:var(--zui-card-slate-border-dark,#64748b)] bg-[var(--zui-card-slate-bg,#4755691a)] dark:bg-[var(--zui-card-slate-bg-dark,#64748b26)] backdrop-blur-xl",
+  zinc: "border border-[color:var(--zui-card-zinc-border,#52525b)] dark:border-[color:var(--zui-card-zinc-border-dark,#71717a)] bg-[var(--zui-card-zinc-bg,#52525b1a)] dark:bg-[var(--zui-card-zinc-bg-dark,#71717a26)] backdrop-blur-xl",
+  stone:
+    "border border-[color:var(--zui-card-stone-border,#57534e)] dark:border-[color:var(--zui-card-stone-border-dark,#78716c)] bg-[var(--zui-card-stone-bg,#57534e1a)] dark:bg-[var(--zui-card-stone-bg-dark,#78716c26)] backdrop-blur-xl",
+  royal:
+    "border border-[color:var(--zui-card-royal-border,#4338ca)] dark:border-[color:var(--zui-card-royal-border-dark,#818cf8)] bg-[var(--zui-card-royal-bg,#4338ca1a)] dark:bg-[var(--zui-card-royal-bg-dark,#818cf826)] backdrop-blur-xl",
+  electric:
+    "border border-[color:var(--zui-card-electric-border,#0ea5e9)] dark:border-[color:var(--zui-card-electric-border-dark,#38bdf8)] bg-[var(--zui-card-electric-bg,#0ea5e91a)] dark:bg-[var(--zui-card-electric-bg-dark,#38bdf826)] backdrop-blur-xl",
+  forest:
+    "border border-[color:var(--zui-card-forest-border,#166534)] dark:border-[color:var(--zui-card-forest-border-dark,#4ade80)] bg-[var(--zui-card-forest-bg,#1665341a)] dark:bg-[var(--zui-card-forest-bg-dark,#4ade8026)] backdrop-blur-xl",
+  sunset:
+    "border border-[color:var(--zui-card-sunset-border,#ea580c)] dark:border-[color:var(--zui-card-sunset-border-dark,#fb923c)] bg-[var(--zui-card-sunset-bg,#ea580c1a)] dark:bg-[var(--zui-card-sunset-bg-dark,#fb923c26)] backdrop-blur-xl",
+  magenta:
+    "border border-[color:var(--zui-card-magenta-border,#c026d3)] dark:border-[color:var(--zui-card-magenta-border-dark,#e879f9)] bg-[var(--zui-card-magenta-bg,#c026d31a)] dark:bg-[var(--zui-card-magenta-bg-dark,#e879f926)] backdrop-blur-xl",
+  crimson:
+    "border border-[color:var(--zui-card-crimson-border,#b91c1c)] dark:border-[color:var(--zui-card-crimson-border-dark,#f87171)] bg-[var(--zui-card-crimson-bg,#b91c1c1a)] dark:bg-[var(--zui-card-crimson-bg-dark,#f8717126)] backdrop-blur-xl",
+  aqua: "border border-[color:var(--zui-card-aqua-border,#0f766e)] dark:border-[color:var(--zui-card-aqua-border-dark,#2dd4bf)] bg-[var(--zui-card-aqua-bg,#0f766e1a)] dark:bg-[var(--zui-card-aqua-bg-dark,#2dd4bf26)] backdrop-blur-xl",
+  plum: "border border-[color:var(--zui-card-plum-border,#7e22ce)] dark:border-[color:var(--zui-card-plum-border-dark,#c084fc)] bg-[var(--zui-card-plum-bg,#7e22ce1a)] dark:bg-[var(--zui-card-plum-bg-dark,#c084fc26)] backdrop-blur-xl",
   sky: "border border-[color:var(--zui-card-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-card-sky-border-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-card-sky-bg,oklch(97.7%_0.013_236.62))] dark:bg-[var(--zui-card-sky-bg-dark,oklch(29.3%_0.066_243.157_/_0.7))] backdrop-blur-xl",
   rose: "border border-[color:var(--zui-card-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-card-rose-border-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-card-rose-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-card-rose-bg-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl",
   purple:

package/src/design-system/checkbox.ts

@@ -5,7 +5,7 @@ export const zuiCheckboxControlBase =
   "grid shrink-0 place-items-center rounded-md border-2 border-[color:var(--zui-checkbox-border,#0000004d)] bg-[var(--zui-checkbox-bg,transparent)] dark:bg-[var(--zui-checkbox-bg-dark,transparent)] text-[color:var(--zui-checkbox-fg,oklch(44.6%_0.043_257.281))] transition-[background-color,border-color,color,box-shadow] peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--zui-checkbox-ring-focus,oklch(44.6%_0.043_257.281_/_0.7))] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[var(--zui-checkbox-ring-offset-focus,oklch(98.4%_0.003_247.858))] dark:border-[color:var(--zui-checkbox-border-dark,#ffffff4d)] dark:text-[color:var(--zui-checkbox-fg-dark,oklch(92.9%_0.013_255.508))] dark:peer-focus-visible:ring-[var(--zui-checkbox-ring-focus-dark,oklch(86.9%_0.022_252.894_/_0.7))] dark:peer-focus-visible:ring-offset-[var(--zui-checkbox-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))] group-data-[disabled=true]:cursor-not-allowed";
 
 export const zuiCheckboxIndicatorBase =
-  "pointer-events-none opacity-0 transition-opacity duration-150 stroke-white group-data-[state=checked]:opacity-100 group-data-[state=indeterminate]:opacity-100";
+  "pointer-events-none opacity-0 transition-opacity duration-150 stroke-current group-data-[state=checked]:opacity-100 group-data-[state=indeterminate]:opacity-100";
 
 export const zuiCheckboxSizes = {
   sm: {
@@ -35,6 +35,39 @@ export const zuiCheckboxAppearances = {
   error:
     "group-data-[state=checked]:border-[color:var(--zui-checkbox-error-border-checked,oklch(58.6%_0.253_17.585))] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-error-border-checked-dark,oklch(58.6%_0.253_17.585))] group-data-[state=checked]:bg-[var(--zui-checkbox-error-bg-checked,oklch(58.6%_0.253_17.585))] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-error-bg-checked-dark,oklch(58.6%_0.253_17.585))] group-data-[state=checked]:text-[color:var(--zui-checkbox-error-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-error-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-error-border-checked,oklch(58.6%_0.253_17.585))] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-error-border-checked-dark,oklch(58.6%_0.253_17.585))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-error-bg-checked,oklch(58.6%_0.253_17.585))] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-error-bg-checked-dark,oklch(58.6%_0.253_17.585))]",
   info: "group-data-[state=checked]:border-[color:var(--zui-checkbox-info-border-checked,oklch(54.6%_0.245_262.881))] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-info-border-checked-dark,oklch(54.6%_0.245_262.881))] group-data-[state=checked]:bg-[var(--zui-checkbox-info-bg-checked,oklch(54.6%_0.245_262.881))] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-info-bg-checked-dark,oklch(54.6%_0.245_262.881))] group-data-[state=checked]:text-[color:var(--zui-checkbox-info-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-info-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-info-border-checked,oklch(54.6%_0.245_262.881))] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-info-border-checked-dark,oklch(54.6%_0.245_262.881))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-info-bg-checked,oklch(54.6%_0.245_262.881))] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-info-bg-checked-dark,oklch(54.6%_0.245_262.881))]",
+  blue: "group-data-[state=checked]:border-[color:var(--zui-checkbox-blue-border-checked,#2563eb)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-blue-border-checked-dark,#3b82f6)] group-data-[state=checked]:bg-[var(--zui-checkbox-blue-bg-checked,#2563eb)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-blue-bg-checked-dark,#3b82f6)] group-data-[state=checked]:text-[color:var(--zui-checkbox-blue-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-blue-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-blue-border-checked,#2563eb)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-blue-border-checked-dark,#3b82f6)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-blue-bg-checked,#2563eb)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-blue-bg-checked-dark,#3b82f6)]",
+  cyan: "group-data-[state=checked]:border-[color:var(--zui-checkbox-cyan-border-checked,#0891b2)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-cyan-border-checked-dark,#22d3ee)] group-data-[state=checked]:bg-[var(--zui-checkbox-cyan-bg-checked,#0891b2)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-cyan-bg-checked-dark,#22d3ee)] group-data-[state=checked]:text-[color:var(--zui-checkbox-cyan-fg-checked,#083344)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-cyan-fg-checked-dark,#083344)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-cyan-border-checked,#0891b2)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-cyan-border-checked-dark,#22d3ee)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-cyan-bg-checked,#0891b2)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-cyan-bg-checked-dark,#22d3ee)]",
+  green:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-green-border-checked,#16a34a)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-green-border-checked-dark,#22c55e)] group-data-[state=checked]:bg-[var(--zui-checkbox-green-bg-checked,#16a34a)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-green-bg-checked-dark,#22c55e)] group-data-[state=checked]:text-[color:var(--zui-checkbox-green-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-green-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-green-border-checked,#16a34a)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-green-border-checked-dark,#22c55e)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-green-bg-checked,#16a34a)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-green-bg-checked-dark,#22c55e)]",
+  lime: "group-data-[state=checked]:border-[color:var(--zui-checkbox-lime-border-checked,#65a30d)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-lime-border-checked-dark,#a3e635)] group-data-[state=checked]:bg-[var(--zui-checkbox-lime-bg-checked,#65a30d)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-lime-bg-checked-dark,#a3e635)] group-data-[state=checked]:text-[color:var(--zui-checkbox-lime-fg-checked,#1a2e05)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-lime-fg-checked-dark,#1a2e05)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-lime-border-checked,#65a30d)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-lime-border-checked-dark,#a3e635)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-lime-bg-checked,#65a30d)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-lime-bg-checked-dark,#a3e635)]",
+  mint: "group-data-[state=checked]:border-[color:var(--zui-checkbox-mint-border-checked,#10b981)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-mint-border-checked-dark,#6ee7b7)] group-data-[state=checked]:bg-[var(--zui-checkbox-mint-bg-checked,#10b981)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-mint-bg-checked-dark,#6ee7b7)] group-data-[state=checked]:text-[color:var(--zui-checkbox-mint-fg-checked,#064e3b)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-mint-fg-checked-dark,#064e3b)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-mint-border-checked,#10b981)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-mint-border-checked-dark,#6ee7b7)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-mint-bg-checked,#10b981)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-mint-bg-checked-dark,#6ee7b7)]",
+  ocean:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-ocean-border-checked,#0284c7)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-ocean-border-checked-dark,#38bdf8)] group-data-[state=checked]:bg-[var(--zui-checkbox-ocean-bg-checked,#0284c7)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-ocean-bg-checked-dark,#38bdf8)] group-data-[state=checked]:text-[color:var(--zui-checkbox-ocean-fg-checked,#082f49)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-ocean-fg-checked-dark,#082f49)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-ocean-border-checked,#0284c7)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-ocean-border-checked-dark,#38bdf8)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-ocean-bg-checked,#0284c7)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-ocean-bg-checked-dark,#38bdf8)]",
+  sapphire:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-sapphire-border-checked,#1d4ed8)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-sapphire-border-checked-dark,#60a5fa)] group-data-[state=checked]:bg-[var(--zui-checkbox-sapphire-bg-checked,#1d4ed8)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-sapphire-bg-checked-dark,#60a5fa)] group-data-[state=checked]:text-[color:var(--zui-checkbox-sapphire-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-sapphire-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-sapphire-border-checked,#1d4ed8)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-sapphire-border-checked-dark,#60a5fa)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-sapphire-bg-checked,#1d4ed8)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-sapphire-bg-checked-dark,#60a5fa)]",
+  lavender:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-lavender-border-checked,#8b5cf6)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-lavender-border-checked-dark,#a78bfa)] group-data-[state=checked]:bg-[var(--zui-checkbox-lavender-bg-checked,#8b5cf6)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-lavender-bg-checked-dark,#a78bfa)] group-data-[state=checked]:text-[color:var(--zui-checkbox-lavender-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-lavender-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-lavender-border-checked,#8b5cf6)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-lavender-border-checked-dark,#a78bfa)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-lavender-bg-checked,#8b5cf6)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-lavender-bg-checked-dark,#a78bfa)]",
+  ruby: "group-data-[state=checked]:border-[color:var(--zui-checkbox-ruby-border-checked,#be123c)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-ruby-border-checked-dark,#fb7185)] group-data-[state=checked]:bg-[var(--zui-checkbox-ruby-bg-checked,#be123c)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-ruby-bg-checked-dark,#fb7185)] group-data-[state=checked]:text-[color:var(--zui-checkbox-ruby-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-ruby-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-ruby-border-checked,#be123c)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-ruby-border-checked-dark,#fb7185)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-ruby-bg-checked,#be123c)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-ruby-bg-checked-dark,#fb7185)]",
+  red: "group-data-[state=checked]:border-[color:var(--zui-checkbox-red-border-checked,#dc2626)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-red-border-checked-dark,#ef4444)] group-data-[state=checked]:bg-[var(--zui-checkbox-red-bg-checked,#dc2626)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-red-bg-checked-dark,#ef4444)] group-data-[state=checked]:text-[color:var(--zui-checkbox-red-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-red-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-red-border-checked,#dc2626)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-red-border-checked-dark,#ef4444)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-red-bg-checked,#dc2626)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-red-bg-checked-dark,#ef4444)]",
+  slate:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-slate-border-checked,#475569)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-slate-border-checked-dark,#64748b)] group-data-[state=checked]:bg-[var(--zui-checkbox-slate-bg-checked,#475569)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-slate-bg-checked-dark,#64748b)] group-data-[state=checked]:text-[color:var(--zui-checkbox-slate-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-slate-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-slate-border-checked,#475569)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-slate-border-checked-dark,#64748b)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-slate-bg-checked,#475569)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-slate-bg-checked-dark,#64748b)]",
+  zinc: "group-data-[state=checked]:border-[color:var(--zui-checkbox-zinc-border-checked,#52525b)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-zinc-border-checked-dark,#71717a)] group-data-[state=checked]:bg-[var(--zui-checkbox-zinc-bg-checked,#52525b)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-zinc-bg-checked-dark,#71717a)] group-data-[state=checked]:text-[color:var(--zui-checkbox-zinc-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-zinc-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-zinc-border-checked,#52525b)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-zinc-border-checked-dark,#71717a)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-zinc-bg-checked,#52525b)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-zinc-bg-checked-dark,#71717a)]",
+  stone:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-stone-border-checked,#57534e)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-stone-border-checked-dark,#78716c)] group-data-[state=checked]:bg-[var(--zui-checkbox-stone-bg-checked,#57534e)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-stone-bg-checked-dark,#78716c)] group-data-[state=checked]:text-[color:var(--zui-checkbox-stone-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-stone-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-stone-border-checked,#57534e)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-stone-border-checked-dark,#78716c)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-stone-bg-checked,#57534e)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-stone-bg-checked-dark,#78716c)]",
+  royal:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-royal-border-checked,#4338ca)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-royal-border-checked-dark,#818cf8)] group-data-[state=checked]:bg-[var(--zui-checkbox-royal-bg-checked,#4338ca)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-royal-bg-checked-dark,#818cf8)] group-data-[state=checked]:text-[color:var(--zui-checkbox-royal-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-royal-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-royal-border-checked,#4338ca)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-royal-border-checked-dark,#818cf8)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-royal-bg-checked,#4338ca)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-royal-bg-checked-dark,#818cf8)]",
+  electric:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-electric-border-checked,#0ea5e9)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-electric-border-checked-dark,#38bdf8)] group-data-[state=checked]:bg-[var(--zui-checkbox-electric-bg-checked,#0ea5e9)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-electric-bg-checked-dark,#38bdf8)] group-data-[state=checked]:text-[color:var(--zui-checkbox-electric-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-electric-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-electric-border-checked,#0ea5e9)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-electric-border-checked-dark,#38bdf8)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-electric-bg-checked,#0ea5e9)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-electric-bg-checked-dark,#38bdf8)]",
+  forest:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-forest-border-checked,#166534)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-forest-border-checked-dark,#4ade80)] group-data-[state=checked]:bg-[var(--zui-checkbox-forest-bg-checked,#166534)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-forest-bg-checked-dark,#4ade80)] group-data-[state=checked]:text-[color:var(--zui-checkbox-forest-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-forest-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-forest-border-checked,#166534)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-forest-border-checked-dark,#4ade80)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-forest-bg-checked,#166534)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-forest-bg-checked-dark,#4ade80)]",
+  sunset:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-sunset-border-checked,#ea580c)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-sunset-border-checked-dark,#fb923c)] group-data-[state=checked]:bg-[var(--zui-checkbox-sunset-bg-checked,#ea580c)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-sunset-bg-checked-dark,#fb923c)] group-data-[state=checked]:text-[color:var(--zui-checkbox-sunset-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-sunset-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-sunset-border-checked,#ea580c)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-sunset-border-checked-dark,#fb923c)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-sunset-bg-checked,#ea580c)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-sunset-bg-checked-dark,#fb923c)]",
+  magenta:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-magenta-border-checked,#c026d3)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-magenta-border-checked-dark,#e879f9)] group-data-[state=checked]:bg-[var(--zui-checkbox-magenta-bg-checked,#c026d3)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-magenta-bg-checked-dark,#e879f9)] group-data-[state=checked]:text-[color:var(--zui-checkbox-magenta-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-magenta-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-magenta-border-checked,#c026d3)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-magenta-border-checked-dark,#e879f9)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-magenta-bg-checked,#c026d3)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-magenta-bg-checked-dark,#e879f9)]",
+  crimson:
+    "group-data-[state=checked]:border-[color:var(--zui-checkbox-crimson-border-checked,#b91c1c)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-crimson-border-checked-dark,#f87171)] group-data-[state=checked]:bg-[var(--zui-checkbox-crimson-bg-checked,#b91c1c)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-crimson-bg-checked-dark,#f87171)] group-data-[state=checked]:text-[color:var(--zui-checkbox-crimson-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-crimson-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-crimson-border-checked,#b91c1c)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-crimson-border-checked-dark,#f87171)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-crimson-bg-checked,#b91c1c)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-crimson-bg-checked-dark,#f87171)]",
+  aqua: "group-data-[state=checked]:border-[color:var(--zui-checkbox-aqua-border-checked,#0f766e)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-aqua-border-checked-dark,#2dd4bf)] group-data-[state=checked]:bg-[var(--zui-checkbox-aqua-bg-checked,#0f766e)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-aqua-bg-checked-dark,#2dd4bf)] group-data-[state=checked]:text-[color:var(--zui-checkbox-aqua-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-aqua-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-aqua-border-checked,#0f766e)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-aqua-border-checked-dark,#2dd4bf)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-aqua-bg-checked,#0f766e)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-aqua-bg-checked-dark,#2dd4bf)]",
+  plum: "group-data-[state=checked]:border-[color:var(--zui-checkbox-plum-border-checked,#7e22ce)] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-plum-border-checked-dark,#c084fc)] group-data-[state=checked]:bg-[var(--zui-checkbox-plum-bg-checked,#7e22ce)] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-plum-bg-checked-dark,#c084fc)] group-data-[state=checked]:text-[color:var(--zui-checkbox-plum-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-plum-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-plum-border-checked,#7e22ce)] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-plum-border-checked-dark,#c084fc)] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-plum-bg-checked,#7e22ce)] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-plum-bg-checked-dark,#c084fc)]",
   violet:
     "group-data-[state=checked]:border-[color:var(--zui-checkbox-violet-border-checked,oklch(54.1%_0.281_293.009))] dark:group-data-[state=checked]:border-[color:var(--zui-checkbox-violet-border-checked-dark,oklch(54.1%_0.281_293.009))] group-data-[state=checked]:bg-[var(--zui-checkbox-violet-bg-checked,oklch(54.1%_0.281_293.009))] dark:group-data-[state=checked]:bg-[var(--zui-checkbox-violet-bg-checked-dark,oklch(54.1%_0.281_293.009))] group-data-[state=checked]:text-[color:var(--zui-checkbox-violet-fg-checked,#ffffff)] dark:group-data-[state=checked]:text-[color:var(--zui-checkbox-violet-fg-checked-dark,#ffffff)] group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-violet-border-checked,oklch(54.1%_0.281_293.009))] dark:group-data-[state=indeterminate]:border-[color:var(--zui-checkbox-violet-border-checked-dark,oklch(54.1%_0.281_293.009))] group-data-[state=indeterminate]:bg-[var(--zui-checkbox-violet-bg-checked,oklch(54.1%_0.281_293.009))] dark:group-data-[state=indeterminate]:bg-[var(--zui-checkbox-violet-bg-checked-dark,oklch(54.1%_0.281_293.009))]",
   amber: