@zentauri-ui/zentauri-components 1.6.3 → 1.7.1

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 },
+});

package/src/ui/radio-group/animated/animations.ts

@@ -0,0 +1,12 @@
+export const radioGroupAnimationPresets = {
+  pop: {
+    initial: { scale: 0.35, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { type: "spring", stiffness: 520, damping: 28 },
+  },
+  fade: {
+    initial: { scale: 0.85, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { duration: 0.16, ease: "easeOut" },
+  },
+} as const;

package/src/ui/radio-group/animated/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { RadioGroupAnimated, RadioGroupItemAnimated } from "./radio-group-animated";
+export type {
+  RadioGroupAnimatedProps,
+  RadioGroupAnimation,
+  RadioGroupAnimationPresets,
+  RadioGroupItemAnimatedProps,
+} from "./types";
+export { radioGroupAnimationPresets } from "./animations";

package/src/ui/radio-group/animated/radio-group-animated.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useCallback, useId, useState } from "react";
+
+import { cn } from "../../../lib/utils";
+
+import { radioGroupAnimationPresets } from "./animations";
+import type {
+  RadioGroupAnimatedProps,
+  RadioGroupItemAnimatedProps,
+} from "./types";
+import {
+  RadioGroupContext,
+  useRadioGroupContext,
+} from "../radio-group-context";
+import {
+  radioGroupControlVariants,
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+  radioGroupRootVariants,
+} from "../variants";
+
+export function RadioGroupAnimated(props: RadioGroupAnimatedProps) {
+  const {
+    className,
+    value,
+    defaultValue,
+    name,
+    disabled,
+    required,
+    onValueChange,
+    orientation,
+    appearance,
+    size,
+    children,
+    ref,
+    animation: _animation,
+    ...rest
+  } = props;
+  const generatedName = useId();
+  const isControlled = value !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const resolvedValue = isControlled ? value : uncontrolled;
+
+  const setValue = useCallback(
+    (next: string) => {
+      if (!isControlled) {
+        setUncontrolled(next);
+      }
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange],
+  );
+
+  return (
+    <RadioGroupContext.Provider
+      value={{
+        value: resolvedValue,
+        name: name ?? generatedName,
+        disabled,
+        required,
+        appearance: appearance ?? undefined,
+        size: size ?? undefined,
+        onValueChange: setValue,
+      }}
+    >
+      <div
+        ref={ref}
+        role="radiogroup"
+        data-slot="radio-group"
+        data-orientation={orientation ?? "vertical"}
+        className={cn(radioGroupRootVariants({ orientation }), className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    </RadioGroupContext.Provider>
+  );
+}
+
+RadioGroupAnimated.displayName = "RadioGroup";
+
+export function RadioGroupItemAnimated(props: RadioGroupItemAnimatedProps) {
+  const {
+    className,
+    rootClassName,
+    controlClassName,
+    indicatorClassName,
+    value,
+    appearance: appearanceProp,
+    size: sizeProp,
+    disabled: disabledProp,
+    required: requiredProp,
+    children,
+    label,
+    id,
+    ref,
+    "aria-label": ariaLabel,
+    animation = "pop",
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const context = useRadioGroupContext();
+  const controlId = id ?? generatedId;
+  const checked = context?.value === value;
+  const disabled = disabledProp ?? context?.disabled;
+  const required = requiredProp ?? context?.required;
+  const appearance = appearanceProp ?? context?.appearance;
+  const size = sizeProp ?? context?.size;
+  const labelContent = label ?? children;
+  const hasVisibleLabel =
+    labelContent !== undefined && labelContent !== null && labelContent !== false;
+  const motionPreset = radioGroupAnimationPresets[animation];
+
+  return (
+    <label
+      className={cn(radioGroupItemVariants({ size }), rootClassName, className)}
+      data-disabled={disabled ? "true" : undefined}
+      data-state={checked ? "checked" : "unchecked"}
+      htmlFor={controlId}
+    >
+      <input
+        ref={ref}
+        id={controlId}
+        type="radio"
+        data-slot="radio-group-item"
+        className="peer sr-only"
+        name={context?.name}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        required={required}
+        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : value)}
+        onChange={(event) => {
+          if (event.currentTarget.checked) {
+            context?.onValueChange(value);
+          }
+        }}
+        {...rest}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          radioGroupControlVariants({ appearance, size }),
+          controlClassName,
+        )}
+        data-slot="radio-group-control"
+      >
+        {checked && (
+          <motion.span
+            className={cn(
+              radioGroupIndicatorVariants({ size }),
+              "opacity-100",
+              indicatorClassName,
+            )}
+            data-slot="radio-group-indicator"
+            initial={motionPreset.initial}
+            animate={motionPreset.animate}
+            transition={motionPreset.transition}
+          />
+        )}
+      </span>
+      {hasVisibleLabel && (
+        <span className="min-w-0 leading-6" data-slot="radio-group-label">
+          {labelContent}
+        </span>
+      )}
+    </label>
+  );
+}
+
+RadioGroupItemAnimated.displayName = "RadioGroupItem";

package/src/ui/radio-group/animated/types.ts

@@ -0,0 +1,13 @@
+import type { RadioGroupItemProps, RadioGroupProps } from "../types";
+import type { radioGroupAnimationPresets } from "./animations";
+
+export type RadioGroupAnimation = keyof typeof radioGroupAnimationPresets;
+export type RadioGroupAnimationPresets = typeof radioGroupAnimationPresets;
+
+export type RadioGroupAnimatedProps = RadioGroupProps & {
+  animation?: RadioGroupAnimation;
+};
+
+export type RadioGroupItemAnimatedProps = RadioGroupItemProps & {
+  animation?: RadioGroupAnimation;
+};