@zentauri-ui/zentauri-components 1.6.3 → 1.7.0

package/src/ui/modal/variants.ts

@@ -1,126 +1,35 @@
 import { cva } from "class-variance-authority";
 
-export const modalOverlayVariants = cva(
-  "fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-sm data-[state=open]:animate-in",
-);
+import {
+  zuiModalContentAppearances,
+  zuiModalContentBase,
+  zuiModalContentPositions,
+  zuiModalContentSizes,
+  zuiModalOverlayBase,
+  zuiModalTriggerAppearances,
+  zuiModalTriggerBase,
+} from "../../design-system/modal";
 
-export const modalTriggerVariants = cva(
-  "relative inline-flex shrink-0 cursor-pointer rounded-md border",
-  {
-    variants: {
-      appearance: {
-        default:
-          "bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-50",
-        glass:
-          "border-black/15 dark:border-white/15 bg-slate-50/70 dark:bg-slate-950/70 backdrop-blur-xl text-slate-900 dark:text-slate-50",
-        sky: "border-sky-800 dark:border-sky-600 bg-sky-50 dark:bg-sky-950/70 backdrop-blur-xl text-sky-800 dark:text-sky-50",
-        rose: "border-rose-800 dark:border-rose-600 bg-rose-50 dark:bg-rose-950/70 backdrop-blur-xl text-rose-800 dark:text-rose-50",
-        purple:
-          "border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl text-purple-800 dark:text-purple-50",
-        pink: "border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl text-pink-800 dark:text-pink-50",
-        orange:
-          "border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl text-orange-800 dark:text-orange-50",
-        yellow:
-          "border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl text-yellow-800 dark:text-yellow-50",
-        teal: "border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl text-teal-800 dark:text-teal-50",
-        indigo:
-          "border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl text-indigo-800 dark:text-indigo-50",
-        emerald:
-          "border-emerald-800 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-950/70 backdrop-blur-xl text-emerald-800 dark:text-emerald-50",
-        gray: "border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl text-gray-800 dark:text-gray-50",
-        amber:
-          "border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/70 backdrop-blur-xl text-amber-800 dark:text-amber-50",
-        violet:
-          "border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl text-violet-800 dark:text-violet-50",
-        "gradient-blue":
-          "border-blue-800 dark:border-blue-600 bg-linear-to-r from-blue-50 dark:from-blue-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl text-blue-800 dark:text-blue-50",
-        "gradient-green":
-          "border-green-800 dark:border-green-600 bg-linear-to-r from-green-50 dark:from-green-950/70 to-lime-50 dark:to-lime-950/70 backdrop-blur-xl text-green-800 dark:text-green-50",
-        "gradient-red":
-          "border-red-800 dark:border-red-600 bg-linear-to-r from-red-50 dark:from-red-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl text-red-800 dark:text-red-50",
-        "gradient-yellow":
-          "border-yellow-800 dark:border-yellow-600 bg-linear-to-r from-yellow-50 dark:from-yellow-950/70 to-orange-50 dark:to-orange-950/70 backdrop-blur-xl text-yellow-800 dark:text-yellow-50",
-        "gradient-purple":
-          "border-purple-800 dark:border-purple-600 bg-linear-to-r from-purple-50 dark:from-purple-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl text-purple-800 dark:text-purple-50",
-        "gradient-teal":
-          "border-teal-800 dark:border-teal-600 bg-linear-to-r from-teal-50 dark:from-teal-950/70 to-cyan-50 dark:to-cyan-950/70 backdrop-blur-xl text-teal-800 dark:text-teal-50",
-        "gradient-indigo":
-          "border-indigo-800 dark:border-indigo-600 bg-linear-to-r from-indigo-50 dark:from-indigo-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl text-indigo-800 dark:text-indigo-50",
-        "gradient-pink":
-          "border-pink-800 dark:border-pink-600 bg-linear-to-r from-pink-50 dark:from-pink-950/70 to-rose-50 dark:to-rose-950/70 backdrop-blur-xl text-pink-800 dark:text-pink-50",
-        "gradient-orange":
-          "border-orange-800 dark:border-orange-600 bg-linear-to-r from-orange-50 dark:from-orange-950/70 to-red-50 dark:to-red-950/70 backdrop-blur-xl text-orange-800 dark:text-orange-50",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-    },
+export const modalOverlayVariants = cva(zuiModalOverlayBase);
+
+export const modalTriggerVariants = cva(zuiModalTriggerBase, {
+  variants: {
+    appearance: zuiModalTriggerAppearances,
+  },
+  defaultVariants: {
+    appearance: "default",
   },
-);
+});
 
-export const modalContentVariants = cva(
-  "fixed left-1/2 z-50 w-[calc(100%-2rem)] max-h-[min(90vh,720px)] translate-x-[-50%] overflow-y-auto border border-black/10 dark:border-white/10 bg-slate-50 dark:bg-slate-950 p-6 text-slate-900 dark:text-slate-50 shadow-[0_12px_40px_rgba(15,23,42,0.14)] dark:shadow-[0_24px_80px_rgba(15,23,42,0.55)] focus:outline-none",
-  {
-    variants: {
-      size: {
-        sm: "max-w-md",
-        md: "max-w-lg",
-        lg: "max-w-2xl",
-        xl: "max-w-4xl",
-        full: "max-w-[calc(100%-2rem)]",
-      },
-      position: {
-        center: "top-1/2 translate-y-[-50%]",
-        top: "top-10 translate-y-0",
-        bottom: "bottom-10 translate-y-0",
-      },
-      appearance: {
-        default: "bg-slate-50 dark:bg-slate-950",
-        glass:
-          "border-black/15 dark:border-white/15 bg-slate-50/70 dark:bg-slate-950/70 backdrop-blur-xl",
-        sky: "border-sky-800 dark:border-sky-600 bg-sky-50 dark:bg-sky-950/70 backdrop-blur-xl",
-        rose: "border-rose-800 dark:border-rose-600 bg-rose-50 dark:bg-rose-950/70 backdrop-blur-xl",
-        purple:
-          "border-purple-800 dark:border-purple-600 bg-purple-50 dark:bg-purple-950/70 backdrop-blur-xl",
-        pink: "border-pink-800 dark:border-pink-600 bg-pink-50 dark:bg-pink-950/70 backdrop-blur-xl",
-        orange:
-          "border-orange-800 dark:border-orange-600 bg-orange-50 dark:bg-orange-950/70 backdrop-blur-xl",
-        yellow:
-          "border-yellow-800 dark:border-yellow-600 bg-yellow-50 dark:bg-yellow-950/70 backdrop-blur-xl",
-        teal: "border-teal-800 dark:border-teal-600 bg-teal-50 dark:bg-teal-950/70 backdrop-blur-xl",
-        indigo:
-          "border-indigo-800 dark:border-indigo-600 bg-indigo-50 dark:bg-indigo-950/70 backdrop-blur-xl",
-        emerald:
-          "border-emerald-800 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-950/70 backdrop-blur-xl",
-        gray: "border-gray-800 dark:border-gray-600 bg-gray-50 dark:bg-gray-950/70 backdrop-blur-xl",
-        amber:
-          "border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-amber-950/70 backdrop-blur-xl",
-        violet:
-          "border-violet-800 dark:border-violet-600 bg-violet-50 dark:bg-violet-950/70 backdrop-blur-xl",
-        "gradient-blue":
-          "border-blue-800 dark:border-blue-600 bg-linear-to-r from-blue-50 dark:from-blue-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
-        "gradient-green":
-          "border-green-800 dark:border-green-600 bg-linear-to-r from-green-50 dark:from-green-950/70 to-lime-50 dark:to-lime-950/70 backdrop-blur-xl",
-        "gradient-red":
-          "border-red-800 dark:border-red-600 bg-linear-to-r from-red-50 dark:from-red-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
-        "gradient-yellow":
-          "border-yellow-800 dark:border-yellow-600 bg-linear-to-r from-yellow-50 dark:from-yellow-950/70 to-orange-50 dark:to-orange-950/70 backdrop-blur-xl",
-        "gradient-purple":
-          "border-purple-800 dark:border-purple-600 bg-linear-to-r from-purple-50 dark:from-purple-950/70 to-pink-50 dark:to-pink-950/70 backdrop-blur-xl",
-        "gradient-teal":
-          "border-teal-800 dark:border-teal-600 bg-linear-to-r from-teal-50 dark:from-teal-950/70 to-cyan-50 dark:to-cyan-950/70 backdrop-blur-xl",
-        "gradient-indigo":
-          "border-indigo-800 dark:border-indigo-600 bg-linear-to-r from-indigo-50 dark:from-indigo-950/70 to-purple-50 dark:to-purple-950/70 backdrop-blur-xl",
-        "gradient-pink":
-          "border-pink-800 dark:border-pink-600 bg-linear-to-r from-pink-50 dark:from-pink-950/70 to-rose-50 dark:to-rose-950/70 backdrop-blur-xl",
-        "gradient-orange":
-          "border-orange-800 dark:border-orange-600 bg-linear-to-r from-orange-50 dark:from-orange-950/70 to-red-50 dark:to-red-950/70 backdrop-blur-xl",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-      position: "center",
-      appearance: "default",
-    },
+export const modalContentVariants = cva(zuiModalContentBase, {
+  variants: {
+    size: zuiModalContentSizes,
+    position: zuiModalContentPositions,
+    appearance: zuiModalContentAppearances,
+  },
+  defaultVariants: {
+    size: "md",
+    position: "center",
+    appearance: "default",
   },
-);
+});

package/src/ui/pagination/pagination.test.tsx

@@ -147,7 +147,7 @@ describe("Pagination (component library)", () => {
   it("should apply list variant classes for the selected appearance", () => {
     render(<Pagination pageCount={3} page={1} appearance="emerald" />);
     const list = document.querySelector('[data-slot="pagination-list"]');
-    expect(list?.className).toMatch(/border-emerald-500/);
+    expect(list?.className).toMatch(/--zui-pagination-list-emerald-border/);
   });
 
   it("should render anchors for page controls when getPageHref is provided", () => {

package/src/ui/pagination/variants.ts

@@ -1,100 +1,27 @@
 import { cva } from "class-variance-authority";
 
-/**
- * Layout and chrome for the page list cluster. Appearance and size keys align with
- * `components/ui/buttons/variants.ts` for consistent design-system tokens.
- */
-export const paginationListVariants = cva(
-  "inline-flex flex-wrap items-center rounded-xl border p-1 ring-offset-slate-50 dark:ring-offset-slate-950",
-  {
-    variants: {
-      appearance: {
-        default:
-          "border-black/10 dark:border-white/10 bg-black/[0.03] dark:bg-white/[0.03]",
-        secondary:
-          "border-black/10 dark:border-white/10 bg-slate-100/40 dark:bg-slate-900/40",
-        destructive: "border-rose-500/25 bg-rose-50 dark:bg-rose-950/20",
-        outline: "border-black/15 dark:border-white/15 bg-transparent",
-        ghost: "border-transparent bg-transparent",
-        link: "border-transparent bg-transparent",
-        glass:
-          "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 backdrop-blur-md",
-        emerald: "border-emerald-500/25 bg-emerald-50 dark:bg-emerald-950/20",
-        indigo: "border-indigo-500/25 bg-indigo-50 dark:bg-indigo-950/20",
-        purple: "border-purple-500/25 bg-purple-50 dark:bg-purple-950/20",
-        pink: "border-pink-500/25 bg-pink-50 dark:bg-pink-950/20",
-        rose: "border-rose-500/25 bg-rose-50 dark:bg-rose-950/20",
-        sky: "border-sky-500/25 bg-sky-50 dark:bg-sky-950/20",
-        teal: "border-teal-500/25 bg-teal-50 dark:bg-teal-950/20",
-        yellow: "border-yellow-500/25 bg-yellow-50 dark:bg-yellow-950/20",
-        orange: "border-orange-500/25 bg-orange-50 dark:bg-orange-950/20",
-        gray: "border-gray-500/25 bg-gray-50 dark:bg-gray-950/20",
-        amber: "border-amber-500/25 bg-amber-50 dark:bg-amber-950/20",
-        violet: "border-violet-500/25 bg-violet-50 dark:bg-violet-950/20",
-        "gradient-blue":
-          "border-blue-500/30 bg-linear-to-r from-blue-50 dark:from-blue-950/30 to-purple-50 dark:to-purple-950/30",
-        "gradient-green":
-          "border-lime-500/30 bg-linear-to-r from-green-50 dark:from-green-950/30 to-lime-50 dark:to-lime-950/30",
-        "gradient-red":
-          "border-pink-500/30 bg-linear-to-r from-red-50 dark:from-red-950/30 to-pink-50 dark:to-pink-950/30",
-        "gradient-yellow":
-          "border-orange-500/30 bg-linear-to-r from-yellow-50 dark:from-yellow-950/30 to-orange-50 dark:to-orange-950/30",
-        "gradient-purple":
-          "border-pink-500/30 bg-linear-to-r from-purple-50 dark:from-purple-950/30 to-pink-50 dark:to-pink-950/30",
-        "gradient-teal":
-          "border-cyan-500/30 bg-linear-to-r from-teal-50 dark:from-teal-950/30 to-cyan-50 dark:to-cyan-950/30",
-        "gradient-indigo":
-          "border-purple-500/30 bg-linear-to-r from-indigo-50 dark:from-indigo-950/30 to-purple-50 dark:to-purple-950/30",
-        "gradient-pink":
-          "border-rose-500/30 bg-linear-to-r from-pink-50 dark:from-pink-950/30 to-rose-50 dark:to-rose-950/30",
-        "gradient-orange":
-          "border-orange-500/30 bg-linear-to-r from-orange-50 dark:from-orange-950/30 to-red-50 dark:to-red-950/30",
-      },
-      size: {
-        sm: "gap-0.5",
-        md: "gap-1",
-        lg: "gap-1",
-        xl: "gap-1.5",
-        "2xl": "gap-1.5",
-        "3xl": "gap-2",
-        "4xl": "gap-2",
-        "5xl": "gap-2",
-        "6xl": "gap-2",
-        "7xl": "gap-2.5",
-        "8xl": "gap-2.5",
-        "9xl": "gap-2.5",
-        "10xl": "gap-3",
-        icon: "gap-1",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-    },
+import {
+  zuiPaginationEllipsisBase,
+  zuiPaginationEllipsisSizes,
+  zuiPaginationListAppearances,
+  zuiPaginationListBase,
+  zuiPaginationListSizes,
+} from "../../design-system/pagination";
+
+export const paginationListVariants = cva(zuiPaginationListBase, {
+  variants: {
+    appearance: zuiPaginationListAppearances,
+    size: zuiPaginationListSizes,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
   },
-);
+});
 
-export const paginationEllipsisVariants = cva(
-  "inline-flex min-w-[2ch] select-none items-center justify-center px-1 font-medium text-slate-500 dark:text-slate-400",
-  {
-    variants: {
-      size: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
-        xl: "text-base",
-        "2xl": "text-lg",
-        "3xl": "text-lg",
-        "4xl": "text-xl",
-        "5xl": "text-xl",
-        "6xl": "text-xl",
-        "7xl": "text-2xl",
-        "8xl": "text-2xl",
-        "9xl": "text-2xl",
-        "10xl": "text-2xl",
-        icon: "text-sm",
-      },
-    },
-    defaultVariants: { size: "md" },
+export const paginationEllipsisVariants = cva(zuiPaginationEllipsisBase, {
+  variants: {
+    size: zuiPaginationEllipsisSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});

package/src/ui/progress/variants.ts

@@ -1,119 +1,48 @@
 import { cva } from "class-variance-authority";
 
-export const progressVariants = cva(
-  "w-full text-slate-900 dark:text-slate-50",
-  {
-    variants: {
-      appearance: {
-        default:
-          "[--progress-fill:theme(colors.slate.900)] dark:[--progress-fill:theme(colors.slate.50)]",
-        secondary:
-          "[--progress-fill:theme(colors.slate.600)] dark:[--progress-fill:theme(colors.slate.300)]",
-        destructive:
-          "[--progress-fill:theme(colors.rose.800)] dark:[--progress-fill:theme(colors.rose.400)]",
-        emerald:
-          "[--progress-fill:theme(colors.emerald.800)] dark:[--progress-fill:theme(colors.emerald.400)]",
-        indigo:
-          "[--progress-fill:theme(colors.indigo.800)] dark:[--progress-fill:theme(colors.indigo.400)]",
-        purple:
-          "[--progress-fill:theme(colors.purple.800)] dark:[--progress-fill:theme(colors.purple.400)]",
-        pink: "[--progress-fill:theme(colors.pink.800)] dark:[--progress-fill:theme(colors.pink.400)]",
-        rose: "[--progress-fill:theme(colors.rose.800)] dark:[--progress-fill:theme(colors.rose.400)]",
-        sky: "[--progress-fill:theme(colors.sky.800)] dark:[--progress-fill:theme(colors.sky.400)]",
-        teal: "[--progress-fill:theme(colors.teal.800)] dark:[--progress-fill:theme(colors.teal.400)]",
-        yellow:
-          "[--progress-fill:theme(colors.yellow.800)] dark:[--progress-fill:theme(colors.yellow.400)]",
-        orange:
-          "[--progress-fill:theme(colors.orange.800)] dark:[--progress-fill:theme(colors.orange.400)]",
-        outline:
-          "[--progress-fill:theme(colors.cyan.700)] dark:[--progress-fill:theme(colors.cyan.300)]",
-        ghost:
-          "[--progress-fill:theme(colors.slate.800)] dark:[--progress-fill:theme(colors.slate.200)]",
-        glass:
-          "[--progress-fill:theme(colors.slate.900)] dark:[--progress-fill:theme(colors.white)]",
-        "gradient-blue":
-          "[--progress-fill:linear-gradient(90deg,theme(colors.blue.500),theme(colors.purple.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.blue.500),theme(colors.purple.500))]",
-        "gradient-green":
-          "[--progress-fill:linear-gradient(90deg,theme(colors.green.500),theme(colors.lime.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.green.500),theme(colors.lime.500))]",
-        "gradient-red":
-          "[--progress-fill:linear-gradient(90deg,theme(colors.red.500),theme(colors.pink.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.red.500),theme(colors.pink.500))]",
-        "gradient-yellow":
-          "[--progress-fill:linear-gradient(90deg,theme(colors.yellow.500),theme(colors.orange.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.yellow.500),theme(colors.orange.500))]",
-        "gradient-purple":
-          "[--progress-fill:linear-gradient(90deg,theme(colors.purple.500),theme(colors.pink.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.purple.500),theme(colors.pink.500))]",
-        "gradient-teal":
-          "[--progress-fill:linear-gradient(90deg,theme(colors.teal.500),theme(colors.cyan.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.teal.500),theme(colors.cyan.500))]",
-        "gradient-indigo":
-          "[--progress-fill:linear-gradient(90deg,theme(colors.indigo.500),theme(colors.purple.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.indigo.500),theme(colors.purple.500))]",
-        "gradient-pink":
-          "[--progress-fill:linear-gradient(90deg,theme(colors.pink.500),theme(colors.rose.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.pink.500),theme(colors.rose.500))]",
-        "gradient-orange":
-          "[--progress-fill:linear-gradient(90deg,theme(colors.orange.500),theme(colors.red.500))] dark:[--progress-fill:linear-gradient(90deg,theme(colors.orange.500),theme(colors.red.500))]",
-      },
-      size: {
-        xs: "text-[0.65rem]",
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
-        xl: "text-lg",
-      },
-      shape: {
-        flat: "rounded-none",
-        rounded: "rounded-md",
-        pill: "rounded-full",
-      },
-      striped: {
-        true: "",
-        false: "",
-      },
-      animated: {
-        true: "",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      appearance: "default",
-      size: "md",
-      shape: "rounded",
-      striped: false,
-      animated: false,
-    },
+import {
+  zuiProgressAppearances,
+  zuiProgressBarBase,
+  zuiProgressBarStriped,
+  zuiProgressBase,
+  zuiProgressBoolean,
+  zuiProgressShapes,
+  zuiProgressSizes,
+  zuiProgressTrackBase,
+  zuiProgressTrackSizes,
+} from "../../design-system/progress";
+
+export const progressVariants = cva(zuiProgressBase, {
+  variants: {
+    appearance: zuiProgressAppearances,
+    size: zuiProgressSizes,
+    shape: zuiProgressShapes,
+    striped: zuiProgressBoolean,
+    animated: zuiProgressBoolean,
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md",
+    shape: "rounded",
+    striped: false,
+    animated: false,
   },
-);
+});
 
-export const progressTrackVariants = cva(
-  "relative w-full overflow-hidden bg-black/10 dark:bg-white/10",
-  {
-    variants: {
-      size: {
-        xs: "h-1",
-        sm: "h-1.5",
-        md: "h-2",
-        lg: "h-3",
-        xl: "h-4",
-      },
-      shape: {
-        flat: "rounded-none",
-        rounded: "rounded-md",
-        pill: "rounded-full",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-      shape: "rounded",
-    },
+export const progressTrackVariants = cva(zuiProgressTrackBase, {
+  variants: {
+    size: zuiProgressTrackSizes,
+    shape: zuiProgressShapes,
+  },
+  defaultVariants: {
+    size: "md",
+    shape: "rounded",
   },
-);
+});
 
-export const progressBarVariants = cva(
-  "h-full w-full origin-left rounded-[inherit]",
-  {
-    variants: {
-      striped: {
-        true: "bg-[repeating-linear-gradient(135deg,rgba(15,23,42,0.12)_0,rgba(15,23,42,0.12)_10px,transparent_10px,transparent_20px)] dark:bg-[repeating-linear-gradient(135deg,rgba(255,255,255,0.18)_0,rgba(255,255,255,0.18)_10px,transparent_10px,transparent_20px)]",
-        false: "[background:var(--progress-fill)]",
-      },
-    },
-    defaultVariants: { striped: false },
+export const progressBarVariants = cva(zuiProgressBarBase, {
+  variants: {
+    striped: zuiProgressBarStriped,
   },
-);
+  defaultVariants: { striped: false },
+});