@zentauri-ui/zentauri-components 1.6.2 → 1.7.0

package/src/ui/dropdown/variants.ts

@@ -1,149 +1,43 @@
 import { cva } from "class-variance-authority";
 
-export const triggerVariants = cva(
-  "inline-flex items-center justify-between rounded-md font-medium transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-500/60 cursor-pointer",
-  {
-    variants: {
-      variant: {
-        default: "bg-gray-200 dark:bg-gray-900 text-slate-900 dark:text-white",
-        outline:
-          "border border-gray-700 dark:border-gray-300 text-gray-900 dark:text-gray-100",
-        ghost: "bg-transparent text-gray-900 dark:text-gray-100",
-        white: "bg-white text-gray-900",
-        black: "bg-black text-white",
-        sky: "border border-sky-800 dark:border-sky-600 text-sky-800 dark:text-sky-600",
-        rose: "border border-rose-800 dark:border-rose-600 text-rose-800 dark:text-rose-600",
-        purple:
-          "border border-purple-800 dark:border-purple-600 text-purple-800 dark:text-purple-600",
-        pink: "border border-pink-800 dark:border-pink-600 text-pink-800 dark:text-pink-600",
-        orange:
-          "border border-orange-800 dark:border-orange-600 text-orange-800 dark:text-orange-600",
-        yellow:
-          "border border-yellow-800 dark:border-yellow-600 text-yellow-800 dark:text-yellow-600",
-        teal: "border border-teal-800 dark:border-teal-600 text-teal-800 dark:text-teal-600",
-        indigo:
-          "border border-indigo-800 dark:border-indigo-600 text-indigo-800 dark:text-indigo-600",
-        emerald:
-          "border border-emerald-800 dark:border-emerald-600 text-emerald-800 dark:text-emerald-600",
-        gray: "border border-gray-800 dark:border-gray-600 text-gray-800 dark:text-gray-600",
-        amber:
-          "border border-amber-800 dark:border-amber-600 text-amber-800 dark:text-amber-600",
-        violet:
-          "border border-violet-800 dark:border-violet-600 text-violet-800 dark:text-violet-600",
-        "gradient-blue":
-          "bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600 text-blue-200",
-        "gradient-green":
-          "bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600 text-green-200",
-        "gradient-red":
-          "bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600 text-red-200",
-        "gradient-yellow":
-          "bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600 text-yellow-200",
-        "gradient-purple":
-          "bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600 text-purple-200",
-        "gradient-teal":
-          "bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600 text-teal-200",
-        "gradient-indigo":
-          "bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600 text-indigo-200",
-        "gradient-pink":
-          "bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600 text-pink-200",
-        "gradient-orange":
-          "bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600 text-orange-200",
-      },
-      size: {
-        sm: "px-2 py-1 text-sm",
-        md: "px-3 py-2 text-base",
-        lg: "px-4 py-3 text-lg",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "md",
-    },
+import {
+  zuiDropdownContentBase,
+  zuiDropdownItemBase,
+  zuiDropdownItemVariants,
+  zuiDropdownPlacements,
+  zuiDropdownSpacing,
+  zuiDropdownTriggerBase,
+  zuiDropdownTriggerSizes,
+  zuiDropdownTriggerVariants,
+} from "../../design-system/dropdown";
+
+export const triggerVariants = cva(zuiDropdownTriggerBase, {
+  variants: {
+    variant: zuiDropdownTriggerVariants,
+    size: zuiDropdownTriggerSizes,
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
   },
-);
+});
 
-export const contentVariants = cva(
-  "absolute min-w-[200px] rounded-md p-2 shadow-md z-50 border border-slate-900/10 dark:border-white/10 bg-slate-100 dark:bg-slate-900 text-slate-900 dark:text-slate-100 shadow-lg rounded-lg",
-  {
-    variants: {
-      placement: {
-        top: "bottom-full mb-2",
-        bottom: "top-full mt-2",
-        left: "right-full mr-2",
-        right: "left-full ml-2",
-      },
-      spacing: {
-        none: "space-y-0",
-        default: "space-y-1",
-        sm: "space-y-2",
-        md: "space-y-3",
-        lg: "space-y-4",
-        xl: "space-y-5",
-      },
-    },
-    defaultVariants: {
-      placement: "bottom",
-      spacing: "default",
-    },
+export const contentVariants = cva(zuiDropdownContentBase, {
+  variants: {
+    placement: zuiDropdownPlacements,
+    spacing: zuiDropdownSpacing,
   },
-);
+  defaultVariants: {
+    placement: "bottom",
+    spacing: "default",
+  },
+});
 
-export const itemVariants = cva(
-  "flex items-center justify-between px-3 py-2 text-sm cursor-pointer rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-500/60 font-semibold",
-  {
-    variants: {
-      variant: {
-        default:
-          "hover:bg-gray-100 hover:text-gray-500 dark:hover:text-gray-900 text-gray-900 dark:text-gray-100",
-        outline:
-          "hover:bg-gray-100 hover:text-gray-500 dark:hover:text-gray-900 border border-black dark:border-white text-gray-900 dark:text-gray-100",
-        ghost:
-          "hover:bg-gray-100 hover:text-gray-500 dark:hover:text-gray-900 bg-transparent text-gray-900 dark:text-gray-100",
-        white:
-          "hover:bg-gray-100 hover:text-gray-500 dark:hover:text-gray-900 bg-white dark:bg-black text-gray-900 dark:text-white",
-        black:
-          "hover:bg-gray-100 hover:text-gray-500 dark:hover:text-gray-900 bg-black dark:bg-white text-white dark:text-gray-900",
-        sky: "hover:bg-sky-100 hover:text-sky-800 dark:hover:text-sky-600 bg-sky-200 text-sky-900 dark:text-sky-800",
-        rose: "hover:bg-rose-100 hover:text-rose-800 dark:hover:text-rose-600 bg-rose-200 text-rose-900 dark:text-rose-800",
-        purple:
-          "hover:bg-purple-100 hover:text-purple-800 dark:hover:text-purple-600 bg-purple-200 text-purple-900 dark:text-purple-800",
-        pink: "hover:bg-pink-100 hover:text-pink-800 dark:hover:text-pink-600 bg-pink-200 text-pink-900 dark:text-pink-800",
-        orange:
-          "hover:bg-orange-100 hover:text-orange-800 dark:hover:text-orange-600 bg-orange-200 text-orange-900 dark:text-orange-800",
-        yellow:
-          "hover:bg-yellow-100 hover:text-yellow-800 dark:hover:text-yellow-600 bg-yellow-200 text-yellow-900 dark:text-yellow-800",
-        teal: "hover:bg-teal-100 hover:text-teal-800 dark:hover:text-teal-600 bg-teal-200 text-teal-900 dark:text-teal-800",
-        indigo:
-          "hover:bg-indigo-100 hover:text-indigo-800 dark:hover:text-indigo-600 bg-indigo-200 text-indigo-900 dark:text-indigo-800",
-        emerald:
-          "hover:bg-emerald-100 hover:text-emerald-800 dark:hover:text-emerald-600 bg-emerald-200 text-emerald-900 dark:text-emerald-800",
-        gray: "hover:bg-gray-100 hover:text-gray-500 dark:hover:text-gray-900 bg-gray-200 text-gray-500 dark:text-gray-800",
-        amber:
-          "hover:bg-amber-100 hover:text-amber-800 dark:hover:text-amber-600 bg-amber-200 text-amber-900 dark:text-amber-800",
-        violet:
-          "hover:bg-violet-100 hover:text-violet-800 dark:hover:text-violet-600 bg-violet-200 text-violet-900 dark:text-violet-800",
-        "gradient-blue":
-          "hover:bg-linear-to-r from-blue-800 dark:from-blue-600 to-purple-800 dark:to-purple-600 hover:text-blue-500 dark:hover:text-blue-900 bg-linear-to-r from-blue-200 to-purple-200 text-blue-900 dark:text-blue-200",
-        "gradient-green":
-          "hover:bg-linear-to-r from-green-800 dark:from-green-600 to-lime-800 dark:to-lime-600 hover:text-green-500 dark:hover:text-green-900 bg-linear-to-r from-green-200 to-lime-200 text-green-900 dark:text-green-200",
-        "gradient-red":
-          "hover:bg-linear-to-r from-red-800 dark:from-red-600 to-pink-800 dark:to-pink-600 hover:text-red-500 dark:hover:text-red-900 bg-linear-to-r from-red-200 to-pink-200 text-red-900 dark:text-red-200",
-        "gradient-yellow":
-          "hover:bg-linear-to-r from-yellow-800 dark:from-yellow-600 to-orange-800 dark:to-orange-600 hover:text-yellow-500 dark:hover:text-yellow-900 bg-linear-to-r from-yellow-200 to-orange-200 text-yellow-900 dark:text-yellow-200",
-        "gradient-purple":
-          "hover:bg-linear-to-r from-purple-800 dark:from-purple-600 to-pink-800 dark:to-pink-600 hover:text-purple-500 dark:hover:text-purple-900 bg-linear-to-r from-purple-200 to-pink-200 text-purple-900 dark:text-purple-200",
-        "gradient-teal":
-          "hover:bg-linear-to-r from-teal-800 dark:from-teal-600 to-cyan-800 dark:to-cyan-600 hover:text-teal-500 dark:hover:text-teal-900 bg-linear-to-r from-teal-200 to-cyan-200 text-teal-900 dark:text-teal-200",
-        "gradient-indigo":
-          "hover:bg-linear-to-r from-indigo-800 dark:from-indigo-600 to-purple-800 dark:to-purple-600 hover:text-indigo-500 dark:hover:text-indigo-900 bg-linear-to-r from-indigo-200 to-purple-200 text-indigo-900 dark:text-indigo-200",
-        "gradient-pink":
-          "hover:bg-linear-to-r from-pink-800 dark:from-pink-600 to-rose-800 dark:to-rose-600 hover:text-pink-500 dark:hover:text-pink-900 bg-linear-to-r from-pink-200 to-rose-200 text-pink-900 dark:text-pink-200",
-        "gradient-orange":
-          "hover:bg-linear-to-r from-orange-800 dark:from-orange-600 to-red-800 dark:to-red-600 hover:text-orange-500 dark:hover:text-orange-900 bg-linear-to-r from-orange-200 to-red-200 text-orange-900 dark:text-orange-200",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
+export const itemVariants = cva(zuiDropdownItemBase, {
+  variants: {
+    variant: zuiDropdownItemVariants,
+  },
+  defaultVariants: {
+    variant: "default",
   },
-);
+});

package/src/ui/dynamic-stepper/variants.ts

@@ -1,229 +1,49 @@
-import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 
-import type { buttonVariants } from "../buttons/variants";
-
-type GradientButtonAppearance =
-  | "gradient-blue"
-  | "gradient-green"
-  | "gradient-red"
-  | "gradient-yellow"
-  | "gradient-purple"
-  | "gradient-teal"
-  | "gradient-indigo"
-  | "gradient-pink"
-  | "gradient-orange";
-
-/** Button `appearance` keys usable for indicator tones (gradients excluded). */
-export type DynamicStepperIndicatorToneAppearance = Exclude<
-  NonNullable<VariantProps<typeof buttonVariants>["appearance"]>,
-  GradientButtonAppearance
->;
+import {
+  zuiDynamicStepperIndicatorBase,
+  zuiDynamicStepperIndicatorSizes,
+  zuiDynamicStepperIndicatorToneClass,
+  zuiDynamicStepperItemBase,
+  zuiDynamicStepperItemOrientations,
+  zuiDynamicStepperMapperBase,
+  zuiDynamicStepperMapperOrientations,
+  zuiDynamicStepperRootBase,
+  zuiDynamicStepperRootOrientations,
+  type ZuiDynamicStepperIndicatorSemanticState,
+  type ZuiDynamicStepperIndicatorToneAppearance,
+} from "../../design-system/dynamic-stepper";
+
+export type DynamicStepperIndicatorToneAppearance =
+  ZuiDynamicStepperIndicatorToneAppearance;
 
 export type DynamicStepperIndicatorSemanticState =
-  | "complete"
-  | "current"
-  | "upcoming";
+  ZuiDynamicStepperIndicatorSemanticState;
 
-const INDICATOR_TONE_CLASSES: Record<
-  DynamicStepperIndicatorToneAppearance,
-  Record<DynamicStepperIndicatorSemanticState, string>
-> = {
-  default: {
-    complete:
-      "border-slate-500/55 dark:border-slate-700/55 bg-slate-500/25 dark:bg-slate-500/25 text-slate-900 dark:text-slate-50 ring-2 ring-slate-500/25 dark:ring-slate-400/25",
-    current:
-      "border-slate-600 dark:border-slate-300 bg-slate-500/35 dark:bg-slate-500/35 text-slate-900 dark:text-white ring-2 ring-slate-600/45 dark:ring-slate-300/45",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-500 dark:text-slate-400",
-  },
-  secondary: {
-    complete:
-      "border-slate-400 dark:border-slate-600 bg-slate-200/70 dark:bg-slate-800/70 text-slate-700 dark:text-slate-200 ring-2 ring-slate-400/35 dark:ring-slate-600/35",
-    current:
-      "border-slate-500 dark:border-slate-500 bg-slate-300/55 dark:bg-slate-700/55 text-slate-900 dark:text-white ring-2 ring-slate-500/45 dark:ring-slate-500/45",
-    upcoming:
-      "border-black/10 dark:border-white/10 bg-slate-100/50 dark:bg-slate-900/50 text-slate-500 dark:text-slate-500",
-  },
-  destructive: {
-    complete:
-      "border-rose-500/60 bg-rose-500/20 text-rose-900 dark:text-rose-100 ring-2 ring-rose-400/30",
-    current:
-      "border-rose-600 dark:border-rose-400 bg-rose-100/50 dark:bg-rose-600/35 text-slate-900 dark:text-white ring-2 ring-rose-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-rose-50 dark:bg-rose-950/25 text-slate-500 dark:text-slate-400",
-  },
-  outline: {
-    complete:
-      "border-emerald-500/55 bg-transparent text-emerald-200 ring-2 ring-emerald-500/25",
-    current:
-      "border-black/30 dark:border-white/30 bg-black/10 dark:bg-white/10 text-slate-900 dark:text-white ring-2 ring-black/25 dark:ring-white/25",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-500 dark:text-slate-400",
-  },
-  ghost: {
-    complete:
-      "border-transparent bg-emerald-500/15 text-emerald-200 ring-2 ring-emerald-400/20",
-    current:
-      "border-transparent bg-black/10 dark:bg-white/10 text-slate-900 dark:text-white ring-2 ring-black/15 dark:ring-white/15",
-    upcoming:
-      "border-transparent bg-transparent text-slate-500 dark:text-slate-500",
-  },
-  link: {
-    complete:
-      "border-cyan-500/45 bg-cyan-50 dark:bg-cyan-950/35 text-cyan-200 ring-2 ring-cyan-400/25",
-    current:
-      "border-cyan-600 dark:border-cyan-400 bg-cyan-900/45 text-cyan-950 dark:text-cyan-50 ring-2 ring-cyan-400/45",
-    upcoming:
-      "border-black/10 dark:border-white/10 bg-transparent text-slate-500 dark:text-slate-500",
-  },
-  glass: {
-    complete:
-      "border-black/25 dark:border-white/25 bg-black/10 dark:bg-white/10 text-emerald-900 dark:text-emerald-100 shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur-md ring-2 ring-emerald-400/25",
-    current:
-      "border-black/35 dark:border-white/35 bg-black/15 dark:bg-white/15 text-slate-900 dark:text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] backdrop-blur-md ring-2 ring-black/30 dark:ring-white/30",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-500 dark:text-slate-400 backdrop-blur-sm",
-  },
-  emerald: {
-    complete:
-      "border-emerald-500/60 bg-emerald-500/20 text-emerald-900 dark:text-emerald-100 ring-2 ring-emerald-400/30",
-    current:
-      "border-emerald-600 dark:border-emerald-400 bg-emerald-500/30 text-slate-900 dark:text-white ring-2 ring-emerald-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-emerald-50 dark:bg-emerald-950/30 text-emerald-700/55",
-  },
-  indigo: {
-    complete:
-      "border-indigo-500/60 bg-indigo-500/20 text-indigo-900 dark:text-indigo-100 ring-2 ring-indigo-400/30",
-    current:
-      "border-indigo-600 dark:border-indigo-400 bg-indigo-500/30 text-slate-900 dark:text-white ring-2 ring-indigo-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-indigo-50 dark:bg-indigo-950/30 text-indigo-700/55",
-  },
-  purple: {
-    complete:
-      "border-purple-500/60 bg-purple-500/20 text-purple-900 dark:text-purple-100 ring-2 ring-purple-400/30",
-    current:
-      "border-purple-600 dark:border-purple-400 bg-purple-500/30 text-slate-900 dark:text-white ring-2 ring-purple-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-purple-50 dark:bg-purple-950/30 text-purple-700/55",
-  },
-  pink: {
-    complete:
-      "border-pink-500/60 bg-pink-500/20 text-pink-900 dark:text-pink-100 ring-2 ring-pink-400/30",
-    current:
-      "border-pink-600 dark:border-pink-400 bg-pink-500/30 text-slate-900 dark:text-white ring-2 ring-pink-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-pink-50 dark:bg-pink-950/30 text-pink-700/55",
-  },
-  rose: {
-    complete:
-      "border-rose-500/60 bg-rose-500/20 text-rose-900 dark:text-rose-100 ring-2 ring-rose-400/30",
-    current:
-      "border-rose-600 dark:border-rose-400 bg-rose-500/30 text-slate-900 dark:text-white ring-2 ring-rose-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-rose-50 dark:bg-rose-950/30 text-rose-700/55",
-  },
-  sky: {
-    complete:
-      "border-sky-500/60 bg-sky-500/20 text-sky-900 dark:text-sky-100 ring-2 ring-sky-400/30",
-    current:
-      "border-sky-600 dark:border-sky-400 bg-sky-500/30 text-slate-900 dark:text-white ring-2 ring-sky-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-sky-50 dark:bg-sky-950/30 text-sky-700/55",
-  },
-  teal: {
-    complete:
-      "border-teal-500/60 bg-teal-500/20 text-teal-900 dark:text-teal-100 ring-2 ring-teal-400/30",
-    current:
-      "border-teal-600 dark:border-teal-400 bg-teal-500/30 text-slate-900 dark:text-white ring-2 ring-teal-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-teal-50 dark:bg-teal-950/30 text-teal-700/55",
-  },
-  yellow: {
-    complete:
-      "border-yellow-500/60 bg-yellow-500/20 text-yellow-900 dark:text-yellow-100 ring-2 ring-yellow-400/30",
-    current:
-      "border-yellow-600 dark:border-yellow-400 bg-yellow-100/50 dark:bg-yellow-600/35 text-slate-900 dark:text-white ring-2 ring-yellow-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-yellow-50 dark:bg-yellow-950/35 text-yellow-700/55",
-  },
-  orange: {
-    complete:
-      "border-orange-500/60 bg-orange-500/20 text-orange-900 dark:text-orange-100 ring-2 ring-orange-400/30",
-    current:
-      "border-orange-600 dark:border-orange-400 bg-orange-100/50 dark:bg-orange-600/35 text-slate-900 dark:text-white ring-2 ring-orange-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-orange-50 dark:bg-orange-950/30 text-orange-700/55",
-  },
-  gray: {
-    complete:
-      "border-gray-500/60 bg-gray-500/20 text-gray-900 dark:text-gray-100 ring-2 ring-gray-400/30",
-    current:
-      "border-gray-600 dark:border-gray-400 bg-gray-100/50 dark:bg-gray-600/35 text-slate-900 dark:text-white ring-2 ring-gray-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-gray-50 dark:bg-gray-950/30 text-gray-300/70",
-  },
-  amber: {
-    complete:
-      "border-amber-500/60 bg-amber-500/20 text-amber-900 dark:text-amber-100 ring-2 ring-amber-400/30",
-    current:
-      "border-amber-600 dark:border-amber-400 bg-amber-100/50 dark:bg-amber-600/35 text-slate-900 dark:text-white ring-2 ring-amber-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-amber-50 dark:bg-amber-950/35 text-amber-700/55",
-  },
-  violet: {
-    complete:
-      "border-violet-500/60 bg-violet-500/20 text-violet-900 dark:text-violet-100 ring-2 ring-violet-400/30",
-    current:
-      "border-violet-600 dark:border-violet-400 bg-violet-500/30 text-slate-900 dark:text-white ring-2 ring-violet-400/50",
-    upcoming:
-      "border-black/15 dark:border-white/15 bg-violet-50 dark:bg-violet-950/30 text-violet-700/55",
-  },
-};
+export const dynamicStepperIndicatorToneClass =
+  zuiDynamicStepperIndicatorToneClass;
 
-export function dynamicStepperIndicatorToneClass(
-  state: DynamicStepperIndicatorSemanticState,
-  tone: DynamicStepperIndicatorToneAppearance,
-): string {
-  return INDICATOR_TONE_CLASSES[tone][state];
-}
-
-export const dynamicStepperRootVariants = cva("flex w-full", {
+export const dynamicStepperRootVariants = cva(zuiDynamicStepperRootBase, {
   variants: {
-    orientation: {
-      horizontal:
-        "flex-row flex-wrap items-start justify-between gap-4 md:flex-nowrap md:items-center",
-      vertical: "flex-col gap-6",
-    },
+    orientation: zuiDynamicStepperRootOrientations,
   },
   defaultVariants: {
     orientation: "horizontal",
   },
 });
 
-export const dynamicStepperMapperVariants = cva(
-  "m-0 min-w-0 flex-1 list-none p-0",
-  {
-    variants: {
-      orientation: {
-        horizontal: "flex flex-row flex-wrap items-start justify-center gap-4",
-        vertical: "flex flex-col gap-6",
-      },
-    },
-    defaultVariants: {
-      orientation: "horizontal",
-    },
+export const dynamicStepperMapperVariants = cva(zuiDynamicStepperMapperBase, {
+  variants: {
+    orientation: zuiDynamicStepperMapperOrientations,
   },
-);
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
 
-export const dynamicStepperItemVariants = cva("relative flex gap-3", {
+export const dynamicStepperItemVariants = cva(zuiDynamicStepperItemBase, {
   variants: {
-    orientation: {
-      horizontal: "min-w-0 flex-col items-center text-center",
-      vertical: "flex-row items-start text-left",
-    },
+    orientation: zuiDynamicStepperItemOrientations,
   },
   defaultVariants: {
     orientation: "horizontal",
@@ -231,14 +51,10 @@ export const dynamicStepperItemVariants = cva("relative flex gap-3", {
 });
 
 export const dynamicStepperIndicatorVariants = cva(
-  "grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors",
+  zuiDynamicStepperIndicatorBase,
   {
     variants: {
-      size: {
-        sm: "size-8 text-xs",
-        md: "size-9 text-sm",
-        lg: "size-10 text-base",
-      },
+      size: zuiDynamicStepperIndicatorSizes,
     },
     defaultVariants: {
       size: "md",

package/src/ui/empty-state/variants.ts

@@ -1,54 +1,39 @@
 import { cva } from "class-variance-authority";
 
-export const emptyStateVariants = cva(
-  "flex w-full flex-col items-center text-center",
-  {
-    variants: {
-      size: {
-        sm: "gap-2 p-4 text-sm",
-        md: "gap-3 p-6 text-sm",
-        lg: "gap-4 p-8 text-base",
-      },
-      appearance: {
-        default: "text-slate-900 dark:text-slate-50",
-        ghost: "text-slate-700 dark:text-slate-200",
-        card: "rounded-2xl border border-black/10 dark:border-white/10 bg-white/90 dark:bg-white/5 p-8 text-slate-900 dark:text-slate-50 shadow-[0_8px_24px_rgba(15,23,42,0.12)] dark:shadow-[0_18px_48px_rgba(15,23,42,0.35)]",
-      },
-      align: {
-        start: "items-start text-left",
-        center: "items-center text-center",
-        end: "items-end text-right",
-      },
-    },
-    defaultVariants: {
-      size: "md",
-      appearance: "default",
-      align: "center",
-    },
+import {
+  zuiEmptyStateAlignments,
+  zuiEmptyStateAppearances,
+  zuiEmptyStateBase,
+  zuiEmptyStateDescriptionBase,
+  zuiEmptyStateDescriptionSizes,
+  zuiEmptyStateSizes,
+  zuiEmptyStateTitleBase,
+  zuiEmptyStateTitleSizes,
+} from "../../design-system/empty-state";
+
+export const emptyStateVariants = cva(zuiEmptyStateBase, {
+  variants: {
+    size: zuiEmptyStateSizes,
+    appearance: zuiEmptyStateAppearances,
+    align: zuiEmptyStateAlignments,
   },
-);
+  defaultVariants: {
+    size: "md",
+    appearance: "default",
+    align: "center",
+  },
+});
 
-export const emptyStateTitleVariants = cva("font-semibold tracking-tight", {
+export const emptyStateTitleVariants = cva(zuiEmptyStateTitleBase, {
   variants: {
-    size: {
-      sm: "text-base",
-      md: "text-lg",
-      lg: "text-xl",
-    },
+    size: zuiEmptyStateTitleSizes,
   },
   defaultVariants: { size: "md" },
 });
 
-export const emptyStateDescriptionVariants = cva(
-  "max-w-md text-slate-500 dark:text-slate-400",
-  {
-    variants: {
-      size: {
-        sm: "text-xs",
-        md: "text-sm",
-        lg: "text-base",
-      },
-    },
-    defaultVariants: { size: "md" },
+export const emptyStateDescriptionVariants = cva(zuiEmptyStateDescriptionBase, {
+  variants: {
+    size: zuiEmptyStateDescriptionSizes,
   },
-);
+  defaultVariants: { size: "md" },
+});

package/src/ui/file-upload/variants.ts

@@ -1,39 +1,15 @@
 import { cva } from "class-variance-authority";
 
-export const fileUploadVariants = cva(
-  "relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed px-6 py-10 text-center text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-violet-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 dark:focus-visible:ring-offset-slate-950",
-  {
-    variants: {
-      appearance: {
-        idle: "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-600 dark:text-slate-300 hover:border-black/25 dark:hover:border-white/25 hover:bg-black/[0.07] dark:bg-white/[0.07]",
-        active:
-          "border-violet-400/70 bg-violet-500/10 text-slate-900 dark:text-white",
-        disabled: "cursor-not-allowed opacity-50",
-        error:
-          "border-red-400/70 bg-red-500/10 text-red-600 dark:text-red-400 hover:border-red-400/80 hover:bg-red-500/15",
-        success:
-          "border-green-400/70 bg-green-500/10 text-green-600 dark:text-green-400 hover:border-green-400/80 hover:bg-green-500/15",
-        warning:
-          "border-yellow-400/70 bg-yellow-500/10 text-yellow-600 dark:text-yellow-400 hover:border-yellow-400/80 hover:bg-yellow-500/15",
-        info: "border-blue-400/70 bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:border-blue-400/80 hover:bg-blue-500/15",
-        neutral:
-          "border-gray-400/70 bg-gray-500/10 text-gray-600 dark:text-gray-400 hover:border-gray-400/80 hover:bg-gray-500/15",
-        purple:
-          "border-purple-400/70 bg-purple-500/10 text-purple-600 dark:text-purple-400 hover:border-purple-400/80 hover:bg-purple-500/15",
-        indigo:
-          "border-indigo-400/70 bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 hover:border-indigo-400/80 hover:bg-indigo-500/15",
-        emerald:
-          "border-emerald-400/70 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 hover:border-emerald-400/80 hover:bg-emerald-500/15",
-        amber:
-          "border-amber-400/70 bg-amber-500/10 text-amber-600 dark:text-amber-400 hover:border-amber-400/80 hover:bg-amber-500/15",
-        pink: "border-pink-400/70 bg-pink-500/10 text-pink-600 dark:text-pink-400 hover:border-pink-400/80 hover:bg-pink-500/15",
-        orange:
-          "border-orange-400/70 bg-orange-500/10 text-orange-600 dark:text-orange-400 hover:border-orange-400/80 hover:bg-orange-500/15",
-        teal: "border-teal-400/70 bg-teal-500/10 text-teal-600 dark:text-teal-400 hover:border-teal-400/80 hover:bg-teal-500/15",
-      },
-    },
-    defaultVariants: {
-      appearance: "idle",
-    },
+import {
+  zuiFileUploadAppearances,
+  zuiFileUploadBase,
+} from "../../design-system/file-upload";
+
+export const fileUploadVariants = cva(zuiFileUploadBase, {
+  variants: {
+    appearance: zuiFileUploadAppearances,
+  },
+  defaultVariants: {
+    appearance: "idle",
   },
-);
+});