@zentauri-ui/zentauri-components 1.6.2 → 1.7.0

package/dist/ui/accordion.js

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

package/dist/ui/accordion.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { AccordionBase } from '../chunk-HARD4NMB.mjs';
-export { AccordionContent, AccordionItem, AccordionTrigger, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants } from '../chunk-HARD4NMB.mjs';
+import { AccordionBase } from '../chunk-HMNIH3KJ.mjs';
+export { AccordionContent, AccordionItem, AccordionTrigger, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants } from '../chunk-HMNIH3KJ.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 chunkYIO7DFUA_js = require('../../chunk-YIO7DFUA.js');
+var chunkEDARAO7X_js = require('../../chunk-EDARAO7X.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(
-    chunkYIO7DFUA_js.AlertBase,
+    chunkEDARAO7X_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-73RHHGIA.mjs';
+import { AlertBase } from '../../chunk-HCGSEPOD.mjs';
 import '../../chunk-4D54YOL6.mjs';
 import { motion } from 'framer-motion';
 import { jsx } from 'react/jsx-runtime';

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

@@ -1,11 +1,11 @@
 export declare const alertVariants: (props?: ({
-    appearance?: "default" | "violet" | "gray" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "error" | "ghost" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "success" | "warning" | "info" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    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;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const alertTitleVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const alertDescriptionVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=variants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/alert/variants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;8EA2DzB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;8EAS7B,CAAC;AAEH,eAAO,MAAM,wBAAwB;;8EAYpC,CAAC"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/alert/variants.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,aAAa;;;8EASxB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;8EAK7B,CAAC;AAEH,eAAO,MAAM,wBAAwB;;8EAKnC,CAAC"}

package/dist/ui/alert.js

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

package/dist/ui/alert.mjs

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

package/dist/ui/avatar/animated.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkOB6TYS5Q_js = require('../../chunk-OB6TYS5Q.js');
+var chunkTTTYW3TR_js = require('../../chunk-TTTYW3TR.js');
 require('../../chunk-ZS5756ZC.js');
 var framerMotion = require('framer-motion');
 var jsxRuntime = require('react/jsx-runtime');
@@ -22,7 +22,7 @@ function AvatarAnimated({
 }) {
   const motionProps = avatarAnimationPresets[animation];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkOB6TYS5Q_js.AvatarBase,
+    chunkTTTYW3TR_js.AvatarBase,
     {
       as: framerMotion.motion.span,
       initial: animation === "none" ? false : void 0,
@@ -35,15 +35,15 @@ AvatarAnimated.displayName = "AvatarAnimated";
 
 Object.defineProperty(exports, "AvatarFallback", {
   enumerable: true,
-  get: function () { return chunkOB6TYS5Q_js.AvatarFallback; }
+  get: function () { return chunkTTTYW3TR_js.AvatarFallback; }
 });
 Object.defineProperty(exports, "AvatarGroup", {
   enumerable: true,
-  get: function () { return chunkOB6TYS5Q_js.AvatarGroup; }
+  get: function () { return chunkTTTYW3TR_js.AvatarGroup; }
 });
 Object.defineProperty(exports, "AvatarImage", {
   enumerable: true,
-  get: function () { return chunkOB6TYS5Q_js.AvatarImage; }
+  get: function () { return chunkTTTYW3TR_js.AvatarImage; }
 });
 exports.AvatarAnimated = AvatarAnimated;
 exports.avatarAnimationPresets = avatarAnimationPresets;

package/dist/ui/avatar/animated.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { AvatarBase } from '../../chunk-GIC3J6HR.mjs';
-export { AvatarFallback, AvatarGroup, AvatarImage } from '../../chunk-GIC3J6HR.mjs';
+import { AvatarBase } from '../../chunk-CSFLMMAT.mjs';
+export { AvatarFallback, AvatarGroup, AvatarImage } from '../../chunk-CSFLMMAT.mjs';
 import '../../chunk-4D54YOL6.mjs';
 import { motion } from 'framer-motion';
 import { jsx } from 'react/jsx-runtime';

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

@@ -1,6 +1,6 @@
 export declare const avatarVariants: (props?: ({
     appearance?: "default" | "muted" | "sky" | "emerald" | "violet" | "amber" | "rose" | "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" | null | undefined;
-    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "md" | "sm" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const avatarImageVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const avatarFallbackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/ui/avatar/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/avatar/variants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;8EA2D1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oFAA8C,CAAC;AAE/E,eAAO,MAAM,sBAAsB,oFAElC,CAAC;AAEF,eAAO,MAAM,mBAAmB,oFAE/B,CAAC"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/avatar/variants.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,cAAc;;;8EASzB,CAAC;AAEH,eAAO,MAAM,mBAAmB,oFAA0B,CAAC;AAE3D,eAAO,MAAM,sBAAsB,oFAA6B,CAAC;AAEjE,eAAO,MAAM,mBAAmB,oFAA0B,CAAC"}

package/dist/ui/avatar.js

@@ -1,42 +1,42 @@
 "use client";
 'use strict';
 
-var chunkOB6TYS5Q_js = require('../chunk-OB6TYS5Q.js');
+var chunkTTTYW3TR_js = require('../chunk-TTTYW3TR.js');
 require('../chunk-ZS5756ZC.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function Avatar(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkOB6TYS5Q_js.AvatarBase, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkTTTYW3TR_js.AvatarBase, { ...props });
 }
 Avatar.displayName = "Avatar";
 
 Object.defineProperty(exports, "AvatarFallback", {
   enumerable: true,
-  get: function () { return chunkOB6TYS5Q_js.AvatarFallback; }
+  get: function () { return chunkTTTYW3TR_js.AvatarFallback; }
 });
 Object.defineProperty(exports, "AvatarGroup", {
   enumerable: true,
-  get: function () { return chunkOB6TYS5Q_js.AvatarGroup; }
+  get: function () { return chunkTTTYW3TR_js.AvatarGroup; }
 });
 Object.defineProperty(exports, "AvatarImage", {
   enumerable: true,
-  get: function () { return chunkOB6TYS5Q_js.AvatarImage; }
+  get: function () { return chunkTTTYW3TR_js.AvatarImage; }
 });
 Object.defineProperty(exports, "avatarFallbackVariants", {
   enumerable: true,
-  get: function () { return chunkOB6TYS5Q_js.avatarFallbackVariants; }
+  get: function () { return chunkTTTYW3TR_js.avatarFallbackVariants; }
 });
 Object.defineProperty(exports, "avatarGroupVariants", {
   enumerable: true,
-  get: function () { return chunkOB6TYS5Q_js.avatarGroupVariants; }
+  get: function () { return chunkTTTYW3TR_js.avatarGroupVariants; }
 });
 Object.defineProperty(exports, "avatarImageVariants", {
   enumerable: true,
-  get: function () { return chunkOB6TYS5Q_js.avatarImageVariants; }
+  get: function () { return chunkTTTYW3TR_js.avatarImageVariants; }
 });
 Object.defineProperty(exports, "avatarVariants", {
   enumerable: true,
-  get: function () { return chunkOB6TYS5Q_js.avatarVariants; }
+  get: function () { return chunkTTTYW3TR_js.avatarVariants; }
 });
 exports.Avatar = Avatar;
 //# sourceMappingURL=avatar.js.map

package/dist/ui/avatar.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { AvatarBase } from '../chunk-GIC3J6HR.mjs';
-export { AvatarFallback, AvatarGroup, AvatarImage, avatarFallbackVariants, avatarGroupVariants, avatarImageVariants, avatarVariants } from '../chunk-GIC3J6HR.mjs';
+import { AvatarBase } from '../chunk-CSFLMMAT.mjs';
+export { AvatarFallback, AvatarGroup, AvatarImage, avatarFallbackVariants, avatarGroupVariants, avatarImageVariants, avatarVariants } from '../chunk-CSFLMMAT.mjs';
 import '../chunk-4D54YOL6.mjs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/ui/badge/animated.js

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var chunkCFTDAGKD_js = require('../../chunk-CFTDAGKD.js');
+var chunkPR4QXFJT_js = require('../../chunk-PR4QXFJT.js');
 require('../../chunk-ZS5756ZC.js');
 var framerMotion = require('framer-motion');
 var jsxRuntime = require('react/jsx-runtime');
@@ -31,7 +31,7 @@ function BadgeAnimated({
 }) {
   const motionProps = badgeAnimationPresets[animation];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkCFTDAGKD_js.BadgeBase,
+    chunkPR4QXFJT_js.BadgeBase,
     {
       ...{
         as: framerMotion.motion.span,

package/dist/ui/badge/animated.mjs

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

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

@@ -1,40 +1,37 @@
-/**
- * Tailwind class maps mirroring `buttons/variants.ts` appearance tokens.
- * Reused by primitives that should stay visually aligned with Button.
- */
+import { type ZuiButtonLikeSolidAppearance } from "../../design-system/badge";
 export declare const buttonLikeSolidAppearances: {
-    readonly default: "bg-slate-900 dark:bg-slate-50 text-slate-50 dark:text-slate-950 shadow-[0_1px_2px_rgba(15,23,42,0.08)] dark:shadow-[0_1px_2px_rgba(15,23,42,0.12)]";
-    readonly secondary: "bg-slate-200 dark:bg-slate-800 text-slate-900 dark:text-slate-50";
-    readonly destructive: "bg-rose-500 dark:bg-rose-700 text-slate-900 dark:text-white";
-    readonly outline: "border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 text-slate-900 dark:text-slate-50";
-    readonly ghost: "bg-transparent text-slate-700 dark:text-slate-200";
-    readonly glass: "border border-black/15 dark:border-white/15 bg-black/10 dark:bg-white/10 text-slate-900 dark:text-white backdrop-blur-md";
-    readonly emerald: "bg-emerald-500 dark:bg-emerald-800 text-slate-100 dark:text-white";
-    readonly indigo: "bg-indigo-800 dark:bg-indigo-600 text-slate-100 dark:text-white";
-    readonly purple: "bg-purple-800 dark:bg-purple-600 text-slate-100 dark:text-white";
-    readonly pink: "bg-pink-800 dark:bg-pink-600 text-slate-100 dark:text-white";
-    readonly rose: "bg-rose-500 dark:bg-rose-700 text-slate-100 dark:text-white";
-    readonly sky: "bg-sky-500 dark:bg-sky-700 text-slate-100 dark:text-white";
-    readonly teal: "bg-teal-500 dark:bg-teal-700 text-slate-100 dark:text-white";
-    readonly yellow: "bg-yellow-500 dark:bg-yellow-800 text-slate-100 dark:text-white";
-    readonly orange: "bg-orange-500 dark:bg-orange-800 text-slate-100 dark:text-white";
-    readonly "gradient-blue": "bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600 text-slate-100 dark:text-white";
-    readonly "gradient-green": "bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600 text-slate-100 dark:text-white";
-    readonly "gradient-red": "bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600 text-slate-100 dark:text-white";
-    readonly "gradient-yellow": "bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600 text-slate-100 dark:text-white";
-    readonly "gradient-purple": "bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600 text-slate-100 dark:text-white";
-    readonly "gradient-teal": "bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600 text-slate-100 dark:text-white";
-    readonly "gradient-indigo": "bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600 text-slate-100 dark:text-white";
-    readonly "gradient-pink": "bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600 text-slate-100 dark:text-white";
-    readonly "gradient-orange": "bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600 text-slate-100 dark:text-white";
+    readonly default: "bg-[var(--zui-badge-default-bg,oklch(20.8%_0.042_265.755))] dark:bg-[var(--zui-badge-default-bg-dark,oklch(98.4%_0.003_247.858))] text-[color:var(--zui-badge-default-fg,oklch(98.4%_0.003_247.858))] dark:text-[color:var(--zui-badge-default-fg-dark,oklch(12.9%_0.042_264.695))] shadow-[var(--zui-badge-default-shadow,0_1px_2px_rgba(15,23,42,0.08))] dark:shadow-[var(--zui-badge-default-shadow-dark,0_1px_2px_rgba(15,23,42,0.12))]";
+    readonly secondary: "bg-[var(--zui-badge-secondary-bg,oklch(92.9%_0.013_255.508))] dark:bg-[var(--zui-badge-secondary-bg-dark,oklch(27.9%_0.041_260.031))] text-[color:var(--zui-badge-secondary-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-badge-secondary-fg-dark,oklch(98.4%_0.003_247.858))]";
+    readonly destructive: "bg-[var(--zui-badge-destructive-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-badge-destructive-bg-dark,oklch(51.4%_0.222_16.935))] text-[color:var(--zui-badge-default-fg,oklch(98.4%_0.003_247.858))] dark:text-[color:var(--zui-badge-destructive-fg-dark,#ffffff)]";
+    readonly outline: "border border-[color:var(--zui-badge-outline-border,#0000001a)] dark:border-[color:var(--zui-badge-outline-border-dark,#ffffff1a)] bg-[var(--zui-badge-outline-bg,#0000000d)] dark:bg-[var(--zui-badge-outline-bg-dark,#ffffff0d)] text-[color:var(--zui-badge-outline-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-badge-outline-fg-dark,oklch(98.4%_0.003_247.858))]";
+    readonly ghost: "bg-[var(--zui-badge-ghost-bg,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))]";
+    readonly 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";
+    readonly 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)]";
+    readonly indigo: "bg-[var(--zui-badge-indigo-bg,oklch(39.8%_0.195_277.366))] dark:bg-[var(--zui-badge-indigo-bg-dark,oklch(51.1%_0.262_276.966))] text-[color:var(--zui-badge-indigo-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-indigo-fg-dark,#ffffff)]";
+    readonly purple: "bg-[var(--zui-badge-purple-bg,oklch(43.8%_0.218_303.724))] dark:bg-[var(--zui-badge-purple-bg-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-badge-purple-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-purple-fg-dark,#ffffff)]";
+    readonly pink: "bg-[var(--zui-badge-pink-bg,oklch(45.9%_0.187_3.815))] dark:bg-[var(--zui-badge-pink-bg-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-badge-pink-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-pink-fg-dark,#ffffff)]";
+    readonly rose: "bg-[var(--zui-badge-rose-bg,oklch(64.5%_0.246_16.439))] dark:bg-[var(--zui-badge-rose-bg-dark,oklch(51.4%_0.222_16.935))] text-[color:var(--zui-badge-rose-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-rose-fg-dark,#ffffff)]";
+    readonly sky: "bg-[var(--zui-badge-sky-bg,oklch(68.5%_0.169_237.323))] dark:bg-[var(--zui-badge-sky-bg-dark,oklch(50%_0.134_242.749))] text-[color:var(--zui-badge-sky-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-sky-fg-dark,#ffffff)]";
+    readonly teal: "bg-[var(--zui-badge-teal-bg,oklch(70.4%_0.14_182.503))] dark:bg-[var(--zui-badge-teal-bg-dark,oklch(51.1%_0.096_186.391))] text-[color:var(--zui-badge-teal-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-teal-fg-dark,#ffffff)]";
+    readonly yellow: "bg-[var(--zui-badge-yellow-bg,oklch(79.5%_0.184_86.047))] dark:bg-[var(--zui-badge-yellow-bg-dark,oklch(47.6%_0.114_61.907))] text-[color:var(--zui-badge-yellow-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-yellow-fg-dark,#ffffff)]";
+    readonly orange: "bg-[var(--zui-badge-orange-bg,oklch(70.5%_0.213_47.604))] dark:bg-[var(--zui-badge-orange-bg-dark,oklch(47%_0.157_37.304))] text-[color:var(--zui-badge-orange-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-orange-fg-dark,#ffffff)]";
+    readonly "gradient-blue": "bg-linear-to-r from-[var(--zui-badge-gradient-blue-from,oklch(42.4%_0.199_265.638))] dark:from-[var(--zui-badge-gradient-blue-from-dark,oklch(54.6%_0.245_262.881))] to-[var(--zui-badge-gradient-blue-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-badge-gradient-blue-to-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-badge-gradient-blue-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-blue-fg-dark,#ffffff)]";
+    readonly "gradient-green": "bg-linear-to-r from-[var(--zui-badge-gradient-green-from,oklch(44.8%_0.119_151.328))] dark:from-[var(--zui-badge-gradient-green-from-dark,oklch(62.7%_0.194_149.214))] to-[var(--zui-badge-gradient-green-to,oklch(45.3%_0.124_130.933))] dark:to-[var(--zui-badge-gradient-green-to-dark,oklch(64.8%_0.2_131.684))] text-[color:var(--zui-badge-gradient-green-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-green-fg-dark,#ffffff)]";
+    readonly "gradient-red": "bg-linear-to-r from-[var(--zui-badge-gradient-red-from,oklch(44.4%_0.177_26.899))] dark:from-[var(--zui-badge-gradient-red-from-dark,oklch(57.7%_0.245_27.325))] to-[var(--zui-badge-gradient-red-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-badge-gradient-red-to-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-badge-gradient-red-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-red-fg-dark,#ffffff)]";
+    readonly "gradient-yellow": "bg-linear-to-r from-[var(--zui-badge-gradient-yellow-from,oklch(47.6%_0.114_61.907))] dark:from-[var(--zui-badge-gradient-yellow-from-dark,oklch(68.1%_0.162_75.834))] to-[var(--zui-badge-gradient-yellow-to,oklch(47%_0.157_37.304))] dark:to-[var(--zui-badge-gradient-yellow-to-dark,oklch(64.6%_0.222_41.116))] text-[color:var(--zui-badge-gradient-yellow-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-yellow-fg-dark,#ffffff)]";
+    readonly "gradient-purple": "bg-linear-to-r from-[var(--zui-badge-gradient-purple-from,oklch(43.8%_0.218_303.724))] dark:from-[var(--zui-badge-gradient-purple-from-dark,oklch(55.8%_0.288_302.321))] to-[var(--zui-badge-gradient-purple-to,oklch(45.9%_0.187_3.815))] dark:to-[var(--zui-badge-gradient-purple-to-dark,oklch(59.2%_0.249_0.584))] text-[color:var(--zui-badge-gradient-purple-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-purple-fg-dark,#ffffff)]";
+    readonly "gradient-teal": "bg-linear-to-r from-[var(--zui-badge-gradient-teal-from,oklch(43.7%_0.078_188.216))] dark:from-[var(--zui-badge-gradient-teal-from-dark,oklch(60%_0.118_184.704))] to-[var(--zui-badge-gradient-teal-to,oklch(45%_0.085_224.283))] dark:to-[var(--zui-badge-gradient-teal-to-dark,oklch(60.9%_0.126_221.723))] text-[color:var(--zui-badge-gradient-teal-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-teal-fg-dark,#ffffff)]";
+    readonly "gradient-indigo": "bg-linear-to-r from-[var(--zui-badge-gradient-indigo-from,oklch(39.8%_0.195_277.366))] dark:from-[var(--zui-badge-gradient-indigo-from-dark,oklch(51.1%_0.262_276.966))] to-[var(--zui-badge-gradient-indigo-to,oklch(43.8%_0.218_303.724))] dark:to-[var(--zui-badge-gradient-indigo-to-dark,oklch(55.8%_0.288_302.321))] text-[color:var(--zui-badge-gradient-indigo-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-indigo-fg-dark,#ffffff)]";
+    readonly "gradient-pink": "bg-linear-to-r from-[var(--zui-badge-gradient-pink-from,oklch(45.9%_0.187_3.815))] dark:from-[var(--zui-badge-gradient-pink-from-dark,oklch(59.2%_0.249_0.584))] to-[var(--zui-badge-gradient-pink-to,oklch(45.5%_0.188_13.697))] dark:to-[var(--zui-badge-gradient-pink-to-dark,oklch(58.6%_0.253_17.585))] text-[color:var(--zui-badge-gradient-pink-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-pink-fg-dark,#ffffff)]";
+    readonly "gradient-orange": "bg-linear-to-r from-[var(--zui-badge-gradient-orange-from,oklch(47%_0.157_37.304))] dark:from-[var(--zui-badge-gradient-orange-from-dark,oklch(64.6%_0.222_41.116))] to-[var(--zui-badge-gradient-orange-to,oklch(44.4%_0.177_26.899))] dark:to-[var(--zui-badge-gradient-orange-to-dark,oklch(57.7%_0.245_27.325))] text-[color:var(--zui-badge-gradient-orange-fg,oklch(96.8%_0.007_247.896))] dark:text-[color:var(--zui-badge-gradient-orange-fg-dark,#ffffff)]";
 };
-export type ButtonLikeSolidAppearance = keyof typeof buttonLikeSolidAppearances;
+export type ButtonLikeSolidAppearance = ZuiButtonLikeSolidAppearance;
 export declare const badgeVariants: (props?: ({
-    appearance?: "default" | "outline" | "glass" | "sky" | "emerald" | "rose" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "secondary" | "destructive" | "ghost" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    appearance?: "default" | "outline" | "glass" | "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" | "secondary" | "destructive" | "ghost" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
     shape?: "dot" | "square" | "pill" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const badgeCloseButtonVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=variants.d.ts.map

package/dist/ui/badge/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/badge/variants.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;CAqC7B,CAAC;AAEX,MAAM,MAAM,yBAAyB,GAAG,MAAM,OAAO,0BAA0B,CAAC;AAShF,eAAO,MAAM,aAAa;;;;8EA2BzB,CAAC;AAEF,eAAO,MAAM,wBAAwB;;8EAYpC,CAAC"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/badge/variants.ts"],"names":[],"mappings":"AAEA,OAAO,EAQL,KAAK,4BAA4B,EAClC,MAAM,2BAA2B,CAAC;AAEnC,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;CAAgC,CAAC;AACxE,MAAM,MAAM,yBAAyB,GAAG,4BAA4B,CAAC;AAErE,eAAO,MAAM,aAAa;;;;8EAWxB,CAAC;AAEH,eAAO,MAAM,wBAAwB;;8EAKnC,CAAC"}

package/dist/ui/badge.js

@@ -1,22 +1,22 @@
 "use client";
 'use strict';
 
-var chunkCFTDAGKD_js = require('../chunk-CFTDAGKD.js');
+var chunkPR4QXFJT_js = require('../chunk-PR4QXFJT.js');
 require('../chunk-ZS5756ZC.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function Badge(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkCFTDAGKD_js.BadgeBase, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkPR4QXFJT_js.BadgeBase, { ...props });
 }
 Badge.displayName = "Badge";
 
 Object.defineProperty(exports, "badgeCloseButtonVariants", {
   enumerable: true,
-  get: function () { return chunkCFTDAGKD_js.badgeCloseButtonVariants; }
+  get: function () { return chunkPR4QXFJT_js.badgeCloseButtonVariants; }
 });
 Object.defineProperty(exports, "badgeVariants", {
   enumerable: true,
-  get: function () { return chunkCFTDAGKD_js.badgeVariants; }
+  get: function () { return chunkPR4QXFJT_js.badgeVariants; }
 });
 exports.Badge = Badge;
 //# sourceMappingURL=badge.js.map

package/dist/ui/badge.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { BadgeBase } from '../chunk-EU63V22F.mjs';
-export { badgeCloseButtonVariants, badgeVariants } from '../chunk-EU63V22F.mjs';
+import { BadgeBase } from '../chunk-QBPVJH4P.mjs';
+export { badgeCloseButtonVariants, badgeVariants } from '../chunk-QBPVJH4P.mjs';
 import '../chunk-4D54YOL6.mjs';
 import { jsx } from 'react/jsx-runtime';
 

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

@@ -6,6 +6,6 @@ export declare const breadcrumbItemVariants: (props?: import("class-variance-aut
 export declare const breadcrumbLinkVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const breadcrumbPageVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
 export declare const breadcrumbSeparatorVariants: (props?: ({
-    size?: "sm" | "md" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=variants.d.ts.map

package/dist/ui/breadcrumb/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/breadcrumb/variants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB;;8EAsBhC,CAAC;AAEH,eAAO,MAAM,sBAAsB,oFAElC,CAAC;AAEF,eAAO,MAAM,sBAAsB,oFAA0C,CAAC;AAE9E,eAAO,MAAM,sBAAsB,oFAElC,CAAC;AAEF,eAAO,MAAM,sBAAsB,oFAElC,CAAC;AAEF,eAAO,MAAM,2BAA2B;;8EAavC,CAAC"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/breadcrumb/variants.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,qBAAqB;;8EAOhC,CAAC;AAEH,eAAO,MAAM,sBAAsB,oFAA6B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,oFAA6B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,oFAA6B,CAAC;AAEjE,eAAO,MAAM,sBAAsB,oFAA6B,CAAC;AAEjE,eAAO,MAAM,2BAA2B;;8EAOtC,CAAC"}

package/dist/ui/breadcrumb.js

@@ -5,53 +5,55 @@ var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
-var breadcrumbNavVariants = classVarianceAuthority.cva("text-sm", {
+// src/design-system/breadcrumb.ts
+var zuiBreadcrumbNavBase = "text-sm";
+var zuiBreadcrumbAppearances = {
+  default: "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))]",
+  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: "text-[color:var(--zui-breadcrumb-purple-fg,oklch(43.8%_0.218_303.724))] dark:text-[color:var(--zui-breadcrumb-purple-fg-dark,oklch(55.8%_0.288_302.321))]",
+  pink: "text-[color:var(--zui-breadcrumb-pink-fg,oklch(45.9%_0.187_3.815))] dark:text-[color:var(--zui-breadcrumb-pink-fg-dark,oklch(59.2%_0.249_0.584))]",
+  orange: "text-[color:var(--zui-breadcrumb-orange-fg,oklch(47%_0.157_37.304))] dark:text-[color:var(--zui-breadcrumb-orange-fg-dark,oklch(64.6%_0.222_41.116))]",
+  yellow: "text-[color:var(--zui-breadcrumb-yellow-fg,oklch(47.6%_0.114_61.907))] dark:text-[color:var(--zui-breadcrumb-yellow-fg-dark,oklch(68.1%_0.162_75.834))]",
+  teal: "text-[color:var(--zui-breadcrumb-teal-fg,oklch(43.7%_0.078_188.216))] dark:text-[color:var(--zui-breadcrumb-teal-fg-dark,oklch(60%_0.118_184.704))]",
+  indigo: "text-[color:var(--zui-breadcrumb-indigo-fg,oklch(39.8%_0.195_277.366))] dark:text-[color:var(--zui-breadcrumb-indigo-fg-dark,oklch(51.1%_0.262_276.966))]",
+  emerald: "text-[color:var(--zui-breadcrumb-emerald-fg,oklch(43.2%_0.095_166.913))] dark:text-[color:var(--zui-breadcrumb-emerald-fg-dark,oklch(59.6%_0.145_163.225))]",
+  gray: "text-[color:var(--zui-breadcrumb-gray-fg,oklch(27.8%_0.033_256.848))] dark:text-[color:var(--zui-breadcrumb-gray-fg-dark,oklch(44.6%_0.03_256.802))]",
+  amber: "text-[color:var(--zui-breadcrumb-amber-fg,oklch(47.3%_0.137_46.201))] dark:text-[color:var(--zui-breadcrumb-amber-fg-dark,oklch(66.6%_0.179_58.318))]",
+  violet: "text-[color:var(--zui-breadcrumb-violet-fg,oklch(43.2%_0.232_292.759))] dark:text-[color:var(--zui-breadcrumb-violet-fg-dark,oklch(54.1%_0.281_293.009))]"
+};
+var zuiBreadcrumbListBase = "flex flex-wrap items-center gap-1.5";
+var zuiBreadcrumbItemBase = "inline-flex items-center gap-1.5";
+var zuiBreadcrumbLinkBase = "rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-breadcrumb-link-ring-focus,#0000004d)] dark:focus-visible:ring-[var(--zui-breadcrumb-link-ring-focus-dark,#ffffff4d)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--zui-breadcrumb-link-ring-offset-focus,oklch(98.4%_0.003_247.858))] dark:focus-visible:ring-offset-[var(--zui-breadcrumb-link-ring-offset-focus-dark,oklch(12.9%_0.042_264.695))]";
+var zuiBreadcrumbPageBase = "font-medium text-[color:var(--zui-breadcrumb-page-fg,oklch(27.9%_0.041_260.031))] dark:text-[color:var(--zui-breadcrumb-page-fg-dark,oklch(96.8%_0.007_247.896))]";
+var zuiBreadcrumbSeparatorBase = "select-none text-[color:var(--zui-breadcrumb-separator-fg,oklch(70.4%_0.04_256.788))] dark:text-[color:var(--zui-breadcrumb-separator-fg-dark,oklch(44.6%_0.043_257.281))]";
+var zuiBreadcrumbSeparatorSizes = {
+  sm: "text-xs",
+  md: "text-sm"
+};
+
+// src/ui/breadcrumb/variants.ts
+var breadcrumbNavVariants = classVarianceAuthority.cva(zuiBreadcrumbNavBase, {
   variants: {
-    appearance: {
-      default: "text-slate-600 dark:text-slate-300",
-      muted: "text-slate-500 dark:text-slate-400",
-      sky: "text-sky-800 dark:text-sky-600",
-      rose: "text-rose-800 dark:text-rose-600",
-      purple: "text-purple-800 dark:text-purple-600",
-      pink: "text-pink-800 dark:text-pink-600",
-      orange: "text-orange-800 dark:text-orange-600",
-      yellow: "text-yellow-800 dark:text-yellow-600",
-      teal: "text-teal-800 dark:text-teal-600",
-      indigo: "text-indigo-800 dark:text-indigo-600",
-      emerald: "text-emerald-800 dark:text-emerald-600",
-      gray: "text-gray-800 dark:text-gray-600",
-      amber: "text-amber-800 dark:text-amber-600",
-      violet: "text-violet-800 dark:text-violet-600"
-    }
+    appearance: zuiBreadcrumbAppearances
   },
   defaultVariants: {
     appearance: "default"
   }
 });
-var breadcrumbListVariants = classVarianceAuthority.cva(
-  "flex flex-wrap items-center gap-1.5"
-);
-var breadcrumbItemVariants = classVarianceAuthority.cva("inline-flex items-center gap-1.5");
-var breadcrumbLinkVariants = classVarianceAuthority.cva(
-  "rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black/30 dark:focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-slate-950"
-);
-var breadcrumbPageVariants = classVarianceAuthority.cva(
-  "font-medium text-slate-800 dark:text-slate-100"
-);
-var breadcrumbSeparatorVariants = classVarianceAuthority.cva(
-  "select-none text-slate-400 dark:text-slate-600",
-  {
-    variants: {
-      size: {
-        sm: "text-xs",
-        md: "text-sm"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
+var breadcrumbListVariants = classVarianceAuthority.cva(zuiBreadcrumbListBase);
+var breadcrumbItemVariants = classVarianceAuthority.cva(zuiBreadcrumbItemBase);
+var breadcrumbLinkVariants = classVarianceAuthority.cva(zuiBreadcrumbLinkBase);
+var breadcrumbPageVariants = classVarianceAuthority.cva(zuiBreadcrumbPageBase);
+var breadcrumbSeparatorVariants = classVarianceAuthority.cva(zuiBreadcrumbSeparatorBase, {
+  variants: {
+    size: zuiBreadcrumbSeparatorSizes
+  },
+  defaultVariants: {
+    size: "md"
   }
-);
+});
 function Breadcrumb({
   className,
   ref,