@zentauri-ui/zentauri-components 1.6.2 → 1.7.0

package/dist/ui/spinner/animated.mjs

@@ -4,46 +4,52 @@ import { motion } from 'framer-motion';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var spinnerAppearances = {
-  default: "text-slate-900 dark:text-slate-50",
-  secondary: "text-slate-600 dark:text-slate-300",
-  destructive: "text-rose-600 dark:text-rose-400",
-  ghost: "text-slate-600 dark:text-slate-300",
-  emerald: "text-emerald-600 dark:text-emerald-400",
-  indigo: "text-indigo-600 dark:text-indigo-400",
-  purple: "text-purple-600 dark:text-purple-400",
-  pink: "text-pink-600 dark:text-pink-400",
-  rose: "text-rose-600 dark:text-rose-400",
-  sky: "text-sky-600 dark:text-sky-400",
-  teal: "text-teal-600 dark:text-teal-400",
-  yellow: "text-yellow-600 dark:text-yellow-400",
-  orange: "text-orange-600 dark:text-orange-400",
-  "gradient-blue": "text-blue-600 dark:text-blue-400",
-  "gradient-green": "text-green-600 dark:text-green-400",
-  "gradient-red": "text-red-600 dark:text-red-400",
-  "gradient-yellow": "text-yellow-600 dark:text-yellow-400",
-  "gradient-purple": "text-purple-600 dark:text-purple-400",
-  "gradient-teal": "text-teal-600 dark:text-teal-400",
-  "gradient-indigo": "text-indigo-600 dark:text-indigo-400",
-  "gradient-pink": "text-pink-600 dark:text-pink-400",
-  "gradient-orange": "text-orange-600 dark:text-orange-400"
+// src/design-system/spinner.ts
+var zuiSpinnerBase = "inline-flex items-center justify-center";
+var zuiSpinnerAppearances = {
+  default: "text-[color:var(--zui-spinner-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-spinner-default-fg-dark,oklch(98.4%_0.003_247.858))]",
+  secondary: "text-[color:var(--zui-spinner-secondary-fg,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-spinner-secondary-fg-dark,oklch(86.9%_0.022_252.894))]",
+  destructive: "text-[color:var(--zui-spinner-destructive-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-spinner-destructive-fg-dark,oklch(71.2%_0.194_13.428))]",
+  ghost: "text-[color:var(--zui-spinner-ghost-fg,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-spinner-ghost-fg-dark,oklch(86.9%_0.022_252.894))]",
+  emerald: "text-[color:var(--zui-spinner-emerald-fg,oklch(59.6%_0.145_163.225))] dark:text-[color:var(--zui-spinner-emerald-fg-dark,oklch(76.5%_0.177_163.223))]",
+  indigo: "text-[color:var(--zui-spinner-indigo-fg,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-spinner-indigo-fg-dark,oklch(67.3%_0.182_276.935))]",
+  purple: "text-[color:var(--zui-spinner-purple-fg,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-spinner-purple-fg-dark,oklch(71.4%_0.203_305.504))]",
+  pink: "text-[color:var(--zui-spinner-pink-fg,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-spinner-pink-fg-dark,oklch(71.8%_0.202_349.761))]",
+  rose: "text-[color:var(--zui-spinner-rose-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-spinner-rose-fg-dark,oklch(71.2%_0.194_13.428))]",
+  sky: "text-[color:var(--zui-spinner-sky-fg,oklch(58.8%_0.158_241.966))] dark:text-[color:var(--zui-spinner-sky-fg-dark,oklch(74.6%_0.16_232.661))]",
+  teal: "text-[color:var(--zui-spinner-teal-fg,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-spinner-teal-fg-dark,oklch(77.7%_0.152_181.912))]",
+  yellow: "text-[color:var(--zui-spinner-yellow-fg,oklch(68.1%_0.162_75.834))] dark:text-[color:var(--zui-spinner-yellow-fg-dark,oklch(85.2%_0.199_91.936))]",
+  orange: "text-[color:var(--zui-spinner-orange-fg,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-spinner-orange-fg-dark,oklch(75%_0.183_55.934))]",
+  "gradient-blue": "text-[color:var(--zui-spinner-gradient-blue-fg,oklch(54.6%_0.245_262.881))] dark:text-[color:var(--zui-spinner-gradient-blue-fg-dark,oklch(70.7%_0.165_254.624))]",
+  "gradient-green": "text-[color:var(--zui-spinner-gradient-green-fg,oklch(62.7%_0.194_149.214))] dark:text-[color:var(--zui-spinner-gradient-green-fg-dark,oklch(79.2%_0.209_151.711))]",
+  "gradient-red": "text-[color:var(--zui-spinner-gradient-red-fg,oklch(57.7%_0.245_27.325))] dark:text-[color:var(--zui-spinner-gradient-red-fg-dark,oklch(70.4%_0.191_22.216))]",
+  "gradient-yellow": "text-[color:var(--zui-spinner-gradient-yellow-fg,oklch(68.1%_0.162_75.834))] dark:text-[color:var(--zui-spinner-gradient-yellow-fg-dark,oklch(85.2%_0.199_91.936))]",
+  "gradient-purple": "text-[color:var(--zui-spinner-gradient-purple-fg,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-spinner-gradient-purple-fg-dark,oklch(71.4%_0.203_305.504))]",
+  "gradient-teal": "text-[color:var(--zui-spinner-gradient-teal-fg,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-spinner-gradient-teal-fg-dark,oklch(77.7%_0.152_181.912))]",
+  "gradient-indigo": "text-[color:var(--zui-spinner-gradient-indigo-fg,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-spinner-gradient-indigo-fg-dark,oklch(67.3%_0.182_276.935))]",
+  "gradient-pink": "text-[color:var(--zui-spinner-gradient-pink-fg,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-spinner-gradient-pink-fg-dark,oklch(71.8%_0.202_349.761))]",
+  "gradient-orange": "text-[color:var(--zui-spinner-gradient-orange-fg,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-spinner-gradient-orange-fg-dark,oklch(75%_0.183_55.934))]"
 };
-var spinnerVariants = cva("inline-flex items-center justify-center", {
+var zuiSpinnerSizes = {
+  xs: "size-3",
+  sm: "size-4",
+  md: "size-6",
+  lg: "size-8",
+  xl: "size-10"
+};
+var zuiSpinnerVariants = {
+  ring: "",
+  dots: "",
+  pulse: "",
+  bars: ""
+};
+
+// src/ui/spinner/animated/variants.ts
+var spinnerVariants = cva(zuiSpinnerBase, {
   variants: {
-    appearance: spinnerAppearances,
-    size: {
-      xs: "size-3",
-      sm: "size-4",
-      md: "size-6",
-      lg: "size-8",
-      xl: "size-10"
-    },
-    variant: {
-      ring: "",
-      dots: "",
-      pulse: "",
-      bars: ""
-    }
+    appearance: zuiSpinnerAppearances,
+    size: zuiSpinnerSizes,
+    variant: zuiSpinnerVariants
   },
   defaultVariants: {
     appearance: "default",

package/dist/ui/spinner/animated.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/spinner/animated/variants.ts","../../../src/ui/spinner/animated/spinner.tsx"],"names":[],"mappings":"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","file":"animated.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nconst spinnerAppearances = {\n  default: \"text-slate-900 dark:text-slate-50\",\n  secondary: \"text-slate-600 dark:text-slate-300\",\n  destructive: \"text-rose-600 dark:text-rose-400\",\n  ghost: \"text-slate-600 dark:text-slate-300\",\n  emerald: \"text-emerald-600 dark:text-emerald-400\",\n  indigo: \"text-indigo-600 dark:text-indigo-400\",\n  purple: \"text-purple-600 dark:text-purple-400\",\n  pink: \"text-pink-600 dark:text-pink-400\",\n  rose: \"text-rose-600 dark:text-rose-400\",\n  sky: \"text-sky-600 dark:text-sky-400\",\n  teal: \"text-teal-600 dark:text-teal-400\",\n  yellow: \"text-yellow-600 dark:text-yellow-400\",\n  orange: \"text-orange-600 dark:text-orange-400\",\n  \"gradient-blue\": \"text-blue-600 dark:text-blue-400\",\n  \"gradient-green\": \"text-green-600 dark:text-green-400\",\n  \"gradient-red\": \"text-red-600 dark:text-red-400\",\n  \"gradient-yellow\": \"text-yellow-600 dark:text-yellow-400\",\n  \"gradient-purple\": \"text-purple-600 dark:text-purple-400\",\n  \"gradient-teal\": \"text-teal-600 dark:text-teal-400\",\n  \"gradient-indigo\": \"text-indigo-600 dark:text-indigo-400\",\n  \"gradient-pink\": \"text-pink-600 dark:text-pink-400\",\n  \"gradient-orange\": \"text-orange-600 dark:text-orange-400\",\n} as const;\n\nexport const spinnerVariants = cva(\"inline-flex items-center justify-center\", {\n  variants: {\n    appearance: spinnerAppearances,\n    size: {\n      xs: \"size-3\",\n      sm: \"size-4\",\n      md: \"size-6\",\n      lg: \"size-8\",\n      xl: \"size-10\",\n    },\n    variant: {\n      ring: \"\",\n      dots: \"\",\n      pulse: \"\",\n      bars: \"\",\n    },\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n    variant: \"ring\",\n  },\n});\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../../lib/utils\";\n\nimport type { SpinnerProps } from \"./types\";\nimport { spinnerVariants } from \"./variants\";\n\nexport function Spinner(props: SpinnerProps) {\n  const {\n    className,\n    appearance,\n    size,\n    variant = \"ring\",\n    ref,\n    \"aria-label\": ariaLabel = \"Loading\",\n    ...rest\n  } = props;\n  const rootClass = cn(\n    spinnerVariants({ appearance, size, variant }),\n    className,\n  );\n\n  if (variant === \"ring\") {\n    return (\n      <motion.span\n        ref={ref}\n        role=\"status\"\n        data-slot=\"spinner\"\n        aria-label={ariaLabel}\n        className={cn(rootClass, \"relative\")}\n        initial={false}\n        {...rest}\n      >\n        <span className=\"sr-only\">{ariaLabel}</span>\n        <motion.span\n          className=\"block size-full rounded-full border-2 border-current border-t-transparent\"\n          animate={{ rotate: 360 }}\n          transition={{ repeat: Infinity, ease: \"linear\", duration: 0.85 }}\n          aria-hidden\n        />\n      </motion.span>\n    );\n  }\n\n  if (variant === \"dots\") {\n    const dotSizes = {\n      xs: \"size-1\",\n      sm: \"size-1.5\",\n      md: \"size-2\",\n      lg: \"size-2.5\",\n      xl: \"size-3\",\n    };\n    const dotSize = dotSizes[size as keyof typeof dotSizes];\n    return (\n      <motion.span\n        ref={ref}\n        role=\"status\"\n        data-slot=\"spinner\"\n        aria-label={ariaLabel}\n        className={cn(rootClass, \"gap-1\")}\n        initial={false}\n        {...rest}\n      >\n        <span className=\"sr-only\">{ariaLabel}</span>\n        {[0, 1, 2].map((index) => (\n          <motion.span\n            key={index}\n            className={cn(\"rounded-full bg-current\", dotSize)}\n            animate={{ y: [0, -5, 0], opacity: [0.45, 1, 0.45] }}\n            transition={{\n              repeat: Infinity,\n              duration: 0.55,\n              ease: \"easeInOut\",\n              delay: index * 0.12,\n            }}\n            aria-hidden\n          />\n        ))}\n      </motion.span>\n    );\n  }\n\n  if (variant === \"pulse\") {\n    return (\n      <motion.span\n        ref={ref}\n        role=\"status\"\n        data-slot=\"spinner\"\n        aria-label={ariaLabel}\n        className={cn(rootClass)}\n        initial={false}\n        {...rest}\n      >\n        <span className=\"sr-only\">{ariaLabel}</span>\n        <motion.span\n          className=\"block size-full rounded-full bg-current\"\n          animate={{ scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] }}\n          transition={{ repeat: Infinity, duration: 0.9, ease: \"easeInOut\" }}\n          aria-hidden\n        />\n      </motion.span>\n    );\n  }\n\n  const barWidths = {\n    xs: \"w-0.5\",\n    sm: \"w-0.5\",\n    md: \"w-1\",\n    lg: \"w-1.5\",\n    xl: \"w-2\",\n  };\n\n  const barWidth = barWidths[size as keyof typeof barWidths];\n\n  return (\n    <motion.span\n      ref={ref}\n      role=\"status\"\n      data-slot=\"spinner\"\n      aria-label={ariaLabel}\n      className={cn(rootClass, \"gap-1\")}\n      initial={false}\n      {...rest}\n    >\n      <span className=\"sr-only\">{ariaLabel}</span>\n      {[0, 1, 2, 3].map((index) => (\n        <motion.span\n          key={index}\n          className={cn(\"h-full max-h-[70%] rounded-full bg-current\", barWidth)}\n          animate={{ scaleY: [0.35, 1, 0.35] }}\n          transition={{\n            repeat: Infinity,\n            duration: 0.65,\n            ease: \"easeInOut\",\n            delay: index * 0.1,\n          }}\n          aria-hidden\n        />\n      ))}\n    </motion.span>\n  );\n}\n\nSpinner.displayName = \"Spinner\";\n"]}
+{"version":3,"sources":["../../../src/design-system/spinner.ts","../../../src/ui/spinner/animated/variants.ts","../../../src/ui/spinner/animated/spinner.tsx"],"names":[],"mappings":";;;;;;AAAO,IAAM,cAAA,GAAiB,yCAAA;AAEvB,IAAM,qBAAA,GAAwB;AAAA,EACnC,OAAA,EACE,uJAAA;AAAA,EACF,SAAA,EACE,2JAAA;AAAA,EACF,WAAA,EACE,6JAAA;AAAA,EACF,KAAA,EACE,mJAAA;AAAA,EACF,OAAA,EACE,uJAAA;AAAA,EACF,MAAA,EACE,qJAAA;AAAA,EACF,MAAA,EACE,qJAAA;AAAA,EACF,IAAA,EAAM,+IAAA;AAAA,EACN,IAAA,EAAM,+IAAA;AAAA,EACN,GAAA,EAAK,8IAAA;AAAA,EACL,IAAA,EAAM,+IAAA;AAAA,EACN,MAAA,EACE,mJAAA;AAAA,EACF,MAAA,EACE,iJAAA;AAAA,EACF,eAAA,EACE,mKAAA;AAAA,EACF,gBAAA,EACE,qKAAA;AAAA,EACF,cAAA,EACE,+JAAA;AAAA,EACF,iBAAA,EACE,qKAAA;AAAA,EACF,iBAAA,EACE,uKAAA;AAAA,EACF,eAAA,EACE,iKAAA;AAAA,EACF,iBAAA,EACE,uKAAA;AAAA,EACF,eAAA,EACE,iKAAA;AAAA,EACF,iBAAA,EACE;AACJ,CAAA;AAEO,IAAM,eAAA,GAAkB;AAAA,EAC7B,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,IAAM,kBAAA,GAAqB;AAAA,EAChC,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,EAAA;AAAA,EACN,KAAA,EAAO,EAAA;AAAA,EACP,IAAA,EAAM;AACR,CAAA;;;ACjDO,IAAM,eAAA,GAAkB,IAAI,cAAA,EAAgB;AAAA,EACjD,QAAA,EAAU;AAAA,IACR,UAAA,EAAY,qBAAA;AAAA,IACZ,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM,IAAA;AAAA,IACN,OAAA,EAAS;AAAA;AAEb,CAAC;ACXM,SAAS,QAAQ,KAAA,EAAqB;AAC3C,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA,GAAU,MAAA;AAAA,IACV,GAAA;AAAA,IACA,cAAc,SAAA,GAAY,SAAA;AAAA,IAC1B,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,SAAA,GAAY,EAAA;AAAA,IAChB,eAAA,CAAgB,EAAE,UAAA,EAAY,IAAA,EAAM,SAAS,CAAA;AAAA,IAC7C;AAAA,GACF;AAEA,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA,CAAO,IAAA;AAAA,MAAP;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,WAAA,EAAU,SAAA;AAAA,QACV,YAAA,EAAY,SAAA;AAAA,QACZ,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,UAAU,CAAA;AAAA,QACnC,OAAA,EAAS,KAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,0BACrC,GAAA;AAAA,YAAC,MAAA,CAAO,IAAA;AAAA,YAAP;AAAA,cACC,SAAA,EAAU,2EAAA;AAAA,cACV,OAAA,EAAS,EAAE,MAAA,EAAQ,GAAA,EAAI;AAAA,cACvB,YAAY,EAAE,MAAA,EAAQ,UAAU,IAAA,EAAM,QAAA,EAAU,UAAU,IAAA,EAAK;AAAA,cAC/D,aAAA,EAAW;AAAA;AAAA;AACb;AAAA;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,IAAI,YAAY,MAAA,EAAQ;AACtB,IAAA,MAAM,QAAA,GAAW;AAAA,MACf,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,UAAA;AAAA,MACJ,EAAA,EAAI,QAAA;AAAA,MACJ,EAAA,EAAI,UAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AACA,IAAA,MAAM,OAAA,GAAU,SAAS,IAA6B,CAAA;AACtD,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA,CAAO,IAAA;AAAA,MAAP;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,WAAA,EAAU,SAAA;AAAA,QACV,YAAA,EAAY,SAAA;AAAA,QACZ,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,OAAO,CAAA;AAAA,QAChC,OAAA,EAAS,KAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,UACpC,CAAC,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,qBACd,GAAA;AAAA,YAAC,MAAA,CAAO,IAAA;AAAA,YAAP;AAAA,cAEC,SAAA,EAAW,EAAA,CAAG,yBAAA,EAA2B,OAAO,CAAA;AAAA,cAChD,OAAA,EAAS,EAAE,CAAA,EAAG,CAAC,CAAA,EAAG,EAAA,EAAI,CAAC,CAAA,EAAG,OAAA,EAAS,CAAC,IAAA,EAAM,CAAA,EAAG,IAAI,CAAA,EAAE;AAAA,cACnD,UAAA,EAAY;AAAA,gBACV,MAAA,EAAQ,QAAA;AAAA,gBACR,QAAA,EAAU,IAAA;AAAA,gBACV,IAAA,EAAM,WAAA;AAAA,gBACN,OAAO,KAAA,GAAQ;AAAA,eACjB;AAAA,cACA,aAAA,EAAW;AAAA,aAAA;AAAA,YATN;AAAA,WAWR;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AAEA,EAAA,IAAI,YAAY,OAAA,EAAS;AACvB,IAAA,uBACE,IAAA;AAAA,MAAC,MAAA,CAAO,IAAA;AAAA,MAAP;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,WAAA,EAAU,SAAA;AAAA,QACV,YAAA,EAAY,SAAA;AAAA,QACZ,SAAA,EAAW,GAAG,SAAS,CAAA;AAAA,QACvB,OAAA,EAAS,KAAA;AAAA,QACR,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,0BACrC,GAAA;AAAA,YAAC,MAAA,CAAO,IAAA;AAAA,YAAP;AAAA,cACC,SAAA,EAAU,yCAAA;AAAA,cACV,OAAA,EAAS,EAAE,KAAA,EAAO,CAAC,IAAA,EAAM,CAAA,EAAG,IAAI,CAAA,EAAG,OAAA,EAAS,CAAC,IAAA,EAAM,CAAA,EAAG,IAAI,CAAA,EAAE;AAAA,cAC5D,YAAY,EAAE,MAAA,EAAQ,UAAU,QAAA,EAAU,GAAA,EAAK,MAAM,WAAA,EAAY;AAAA,cACjE,aAAA,EAAW;AAAA;AAAA;AACb;AAAA;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,MAAM,SAAA,GAAY;AAAA,IAChB,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI,KAAA;AAAA,IACJ,EAAA,EAAI,OAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACN;AAEA,EAAA,MAAM,QAAA,GAAW,UAAU,IAA8B,CAAA;AAEzD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,IAAA;AAAA,IAAP;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,QAAA;AAAA,MACL,WAAA,EAAU,SAAA;AAAA,MACV,YAAA,EAAY,SAAA;AAAA,MACZ,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,OAAO,CAAA;AAAA,MAChC,OAAA,EAAS,KAAA;AAAA,MACR,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAW,QAAA,EAAA,SAAA,EAAU,CAAA;AAAA,QACpC,CAAC,GAAG,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,KAAA,qBACjB,GAAA;AAAA,UAAC,MAAA,CAAO,IAAA;AAAA,UAAP;AAAA,YAEC,SAAA,EAAW,EAAA,CAAG,4CAAA,EAA8C,QAAQ,CAAA;AAAA,YACpE,SAAS,EAAE,MAAA,EAAQ,CAAC,IAAA,EAAM,CAAA,EAAG,IAAI,CAAA,EAAE;AAAA,YACnC,UAAA,EAAY;AAAA,cACV,MAAA,EAAQ,QAAA;AAAA,cACR,QAAA,EAAU,IAAA;AAAA,cACV,IAAA,EAAM,WAAA;AAAA,cACN,OAAO,KAAA,GAAQ;AAAA,aACjB;AAAA,YACA,aAAA,EAAW;AAAA,WAAA;AAAA,UATN;AAAA,SAWR;AAAA;AAAA;AAAA,GACH;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"animated.mjs","sourcesContent":["export const zuiSpinnerBase = \"inline-flex items-center justify-center\";\n\nexport const zuiSpinnerAppearances = {\n  default:\n    \"text-[color:var(--zui-spinner-default-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-spinner-default-fg-dark,oklch(98.4%_0.003_247.858))]\",\n  secondary:\n    \"text-[color:var(--zui-spinner-secondary-fg,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-spinner-secondary-fg-dark,oklch(86.9%_0.022_252.894))]\",\n  destructive:\n    \"text-[color:var(--zui-spinner-destructive-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-spinner-destructive-fg-dark,oklch(71.2%_0.194_13.428))]\",\n  ghost:\n    \"text-[color:var(--zui-spinner-ghost-fg,oklch(44.6%_0.043_257.281))] dark:text-[color:var(--zui-spinner-ghost-fg-dark,oklch(86.9%_0.022_252.894))]\",\n  emerald:\n    \"text-[color:var(--zui-spinner-emerald-fg,oklch(59.6%_0.145_163.225))] dark:text-[color:var(--zui-spinner-emerald-fg-dark,oklch(76.5%_0.177_163.223))]\",\n  indigo:\n    \"text-[color:var(--zui-spinner-indigo-fg,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-spinner-indigo-fg-dark,oklch(67.3%_0.182_276.935))]\",\n  purple:\n    \"text-[color:var(--zui-spinner-purple-fg,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-spinner-purple-fg-dark,oklch(71.4%_0.203_305.504))]\",\n  pink: \"text-[color:var(--zui-spinner-pink-fg,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-spinner-pink-fg-dark,oklch(71.8%_0.202_349.761))]\",\n  rose: \"text-[color:var(--zui-spinner-rose-fg,oklch(58.6%_0.253_17.585))] dark:text-[color:var(--zui-spinner-rose-fg-dark,oklch(71.2%_0.194_13.428))]\",\n  sky: \"text-[color:var(--zui-spinner-sky-fg,oklch(58.8%_0.158_241.966))] dark:text-[color:var(--zui-spinner-sky-fg-dark,oklch(74.6%_0.16_232.661))]\",\n  teal: \"text-[color:var(--zui-spinner-teal-fg,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-spinner-teal-fg-dark,oklch(77.7%_0.152_181.912))]\",\n  yellow:\n    \"text-[color:var(--zui-spinner-yellow-fg,oklch(68.1%_0.162_75.834))] dark:text-[color:var(--zui-spinner-yellow-fg-dark,oklch(85.2%_0.199_91.936))]\",\n  orange:\n    \"text-[color:var(--zui-spinner-orange-fg,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-spinner-orange-fg-dark,oklch(75%_0.183_55.934))]\",\n  \"gradient-blue\":\n    \"text-[color:var(--zui-spinner-gradient-blue-fg,oklch(54.6%_0.245_262.881))] dark:text-[color:var(--zui-spinner-gradient-blue-fg-dark,oklch(70.7%_0.165_254.624))]\",\n  \"gradient-green\":\n    \"text-[color:var(--zui-spinner-gradient-green-fg,oklch(62.7%_0.194_149.214))] dark:text-[color:var(--zui-spinner-gradient-green-fg-dark,oklch(79.2%_0.209_151.711))]\",\n  \"gradient-red\":\n    \"text-[color:var(--zui-spinner-gradient-red-fg,oklch(57.7%_0.245_27.325))] dark:text-[color:var(--zui-spinner-gradient-red-fg-dark,oklch(70.4%_0.191_22.216))]\",\n  \"gradient-yellow\":\n    \"text-[color:var(--zui-spinner-gradient-yellow-fg,oklch(68.1%_0.162_75.834))] dark:text-[color:var(--zui-spinner-gradient-yellow-fg-dark,oklch(85.2%_0.199_91.936))]\",\n  \"gradient-purple\":\n    \"text-[color:var(--zui-spinner-gradient-purple-fg,oklch(55.8%_0.288_302.321))] dark:text-[color:var(--zui-spinner-gradient-purple-fg-dark,oklch(71.4%_0.203_305.504))]\",\n  \"gradient-teal\":\n    \"text-[color:var(--zui-spinner-gradient-teal-fg,oklch(60%_0.118_184.704))] dark:text-[color:var(--zui-spinner-gradient-teal-fg-dark,oklch(77.7%_0.152_181.912))]\",\n  \"gradient-indigo\":\n    \"text-[color:var(--zui-spinner-gradient-indigo-fg,oklch(51.1%_0.262_276.966))] dark:text-[color:var(--zui-spinner-gradient-indigo-fg-dark,oklch(67.3%_0.182_276.935))]\",\n  \"gradient-pink\":\n    \"text-[color:var(--zui-spinner-gradient-pink-fg,oklch(59.2%_0.249_0.584))] dark:text-[color:var(--zui-spinner-gradient-pink-fg-dark,oklch(71.8%_0.202_349.761))]\",\n  \"gradient-orange\":\n    \"text-[color:var(--zui-spinner-gradient-orange-fg,oklch(64.6%_0.222_41.116))] dark:text-[color:var(--zui-spinner-gradient-orange-fg-dark,oklch(75%_0.183_55.934))]\",\n} as const;\n\nexport const zuiSpinnerSizes = {\n  xs: \"size-3\",\n  sm: \"size-4\",\n  md: \"size-6\",\n  lg: \"size-8\",\n  xl: \"size-10\",\n} as const;\n\nexport const zuiSpinnerVariants = {\n  ring: \"\",\n  dots: \"\",\n  pulse: \"\",\n  bars: \"\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiSpinnerAppearances,\n  zuiSpinnerBase,\n  zuiSpinnerSizes,\n  zuiSpinnerVariants,\n} from \"../../../design-system/spinner\";\n\nexport const spinnerVariants = cva(zuiSpinnerBase, {\n  variants: {\n    appearance: zuiSpinnerAppearances,\n    size: zuiSpinnerSizes,\n    variant: zuiSpinnerVariants,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n    variant: \"ring\",\n  },\n});\n","\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nimport { cn } from \"../../../lib/utils\";\n\nimport type { SpinnerProps } from \"./types\";\nimport { spinnerVariants } from \"./variants\";\n\nexport function Spinner(props: SpinnerProps) {\n  const {\n    className,\n    appearance,\n    size,\n    variant = \"ring\",\n    ref,\n    \"aria-label\": ariaLabel = \"Loading\",\n    ...rest\n  } = props;\n  const rootClass = cn(\n    spinnerVariants({ appearance, size, variant }),\n    className,\n  );\n\n  if (variant === \"ring\") {\n    return (\n      <motion.span\n        ref={ref}\n        role=\"status\"\n        data-slot=\"spinner\"\n        aria-label={ariaLabel}\n        className={cn(rootClass, \"relative\")}\n        initial={false}\n        {...rest}\n      >\n        <span className=\"sr-only\">{ariaLabel}</span>\n        <motion.span\n          className=\"block size-full rounded-full border-2 border-current border-t-transparent\"\n          animate={{ rotate: 360 }}\n          transition={{ repeat: Infinity, ease: \"linear\", duration: 0.85 }}\n          aria-hidden\n        />\n      </motion.span>\n    );\n  }\n\n  if (variant === \"dots\") {\n    const dotSizes = {\n      xs: \"size-1\",\n      sm: \"size-1.5\",\n      md: \"size-2\",\n      lg: \"size-2.5\",\n      xl: \"size-3\",\n    };\n    const dotSize = dotSizes[size as keyof typeof dotSizes];\n    return (\n      <motion.span\n        ref={ref}\n        role=\"status\"\n        data-slot=\"spinner\"\n        aria-label={ariaLabel}\n        className={cn(rootClass, \"gap-1\")}\n        initial={false}\n        {...rest}\n      >\n        <span className=\"sr-only\">{ariaLabel}</span>\n        {[0, 1, 2].map((index) => (\n          <motion.span\n            key={index}\n            className={cn(\"rounded-full bg-current\", dotSize)}\n            animate={{ y: [0, -5, 0], opacity: [0.45, 1, 0.45] }}\n            transition={{\n              repeat: Infinity,\n              duration: 0.55,\n              ease: \"easeInOut\",\n              delay: index * 0.12,\n            }}\n            aria-hidden\n          />\n        ))}\n      </motion.span>\n    );\n  }\n\n  if (variant === \"pulse\") {\n    return (\n      <motion.span\n        ref={ref}\n        role=\"status\"\n        data-slot=\"spinner\"\n        aria-label={ariaLabel}\n        className={cn(rootClass)}\n        initial={false}\n        {...rest}\n      >\n        <span className=\"sr-only\">{ariaLabel}</span>\n        <motion.span\n          className=\"block size-full rounded-full bg-current\"\n          animate={{ scale: [0.75, 1, 0.75], opacity: [0.45, 1, 0.45] }}\n          transition={{ repeat: Infinity, duration: 0.9, ease: \"easeInOut\" }}\n          aria-hidden\n        />\n      </motion.span>\n    );\n  }\n\n  const barWidths = {\n    xs: \"w-0.5\",\n    sm: \"w-0.5\",\n    md: \"w-1\",\n    lg: \"w-1.5\",\n    xl: \"w-2\",\n  };\n\n  const barWidth = barWidths[size as keyof typeof barWidths];\n\n  return (\n    <motion.span\n      ref={ref}\n      role=\"status\"\n      data-slot=\"spinner\"\n      aria-label={ariaLabel}\n      className={cn(rootClass, \"gap-1\")}\n      initial={false}\n      {...rest}\n    >\n      <span className=\"sr-only\">{ariaLabel}</span>\n      {[0, 1, 2, 3].map((index) => (\n        <motion.span\n          key={index}\n          className={cn(\"h-full max-h-[70%] rounded-full bg-current\", barWidth)}\n          animate={{ scaleY: [0.35, 1, 0.35] }}\n          transition={{\n            repeat: Infinity,\n            duration: 0.65,\n            ease: \"easeInOut\",\n            delay: index * 0.1,\n          }}\n          aria-hidden\n        />\n      ))}\n    </motion.span>\n  );\n}\n\nSpinner.displayName = \"Spinner\";\n"]}

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

@@ -6,6 +6,6 @@ export declare const stepperItemVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const stepperIndicatorVariants: (props?: ({
     appearance?: "sky" | "emerald" | "violet" | "rose" | "gray" | "indigo" | "orange" | "pink" | "purple" | "teal" | "yellow" | "current" | "gradient-blue" | "gradient-green" | "gradient-red" | "gradient-yellow" | "gradient-purple" | "gradient-teal" | "gradient-indigo" | "gradient-pink" | "gradient-orange" | "complete" | "upcoming" | null | undefined;
-    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/stepper/variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/stepper/variants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;8EAU1B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAU9B,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;8EA0DpC,CAAC"}
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/ui/stepper/variants.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,eAAe;;8EAO1B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAO9B,CAAC;AAEH,eAAO,MAAM,wBAAwB;;;8EASnC,CAAC"}

package/dist/ui/stepper.js

@@ -6,69 +6,76 @@ var react = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
-var stepperVariants = classVarianceAuthority.cva("flex w-full", {
+// src/design-system/stepper.ts
+var zuiStepperBase = "flex w-full";
+var zuiStepperOrientations = {
+  horizontal: "flex-row flex-wrap items-start gap-4",
+  vertical: "flex-col gap-6"
+};
+var zuiStepperItemBase = "relative flex gap-3";
+var zuiStepperItemOrientations = {
+  horizontal: "min-w-0 flex-col items-center text-center",
+  vertical: "flex-row items-center text-left"
+};
+var zuiStepperIndicatorBase = "grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors";
+var zuiStepperIndicatorAppearances = {
+  complete: "border-[color:var(--zui-stepper-indicator-complete-border,oklch(69.6%_0.17_162.48_/_0.6))] bg-[var(--zui-stepper-indicator-complete-bg,oklch(69.6%_0.17_162.48_/_0.2))] text-[color:var(--zui-stepper-indicator-complete-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-stepper-indicator-complete-fg-dark,oklch(95%_0.052_163.051))] ring-2 ring-[var(--zui-stepper-indicator-complete-ring,oklch(76.5%_0.177_163.223_/_0.3))]",
+  current: "border-[color:var(--zui-stepper-indicator-current-border,oklch(54.1%_0.281_293.009))] dark:border-[color:var(--zui-stepper-indicator-current-border-dark,oklch(70.2%_0.183_293.541))] bg-[var(--zui-stepper-indicator-current-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-stepper-indicator-current-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-stepper-indicator-current-fg-dark,#ffffff)] ring-2 ring-[var(--zui-stepper-indicator-current-ring,oklch(70.2%_0.183_293.541_/_0.5))]",
+  upcoming: "border-[color:var(--zui-stepper-indicator-upcoming-border,#00000026)] dark:border-[color:var(--zui-stepper-indicator-upcoming-border-dark,#ffffff26)] bg-[var(--zui-stepper-indicator-upcoming-bg,#0000000d)] dark:bg-[var(--zui-stepper-indicator-upcoming-bg-dark,#ffffff0d)] text-[color:var(--zui-stepper-indicator-upcoming-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-stepper-indicator-upcoming-fg-dark,oklch(70.4%_0.04_256.788))]",
+  sky: "border-[color:var(--zui-stepper-indicator-sky-border,oklch(68.5%_0.169_237.323_/_0.6))] bg-[var(--zui-stepper-indicator-sky-bg,oklch(68.5%_0.169_237.323_/_0.2))] text-[color:var(--zui-stepper-indicator-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-stepper-indicator-sky-fg-dark,oklch(95.1%_0.026_236.824))] ring-2 ring-[var(--zui-stepper-indicator-sky-ring,oklch(74.6%_0.16_232.661_/_0.3))]",
+  rose: "border-[color:var(--zui-stepper-indicator-rose-border,oklch(64.5%_0.246_16.439_/_0.6))] bg-[var(--zui-stepper-indicator-rose-bg,oklch(64.5%_0.246_16.439_/_0.2))] text-[color:var(--zui-stepper-indicator-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-stepper-indicator-rose-fg-dark,oklch(94.1%_0.03_12.58))] ring-2 ring-[var(--zui-stepper-indicator-rose-ring,oklch(71.2%_0.194_13.428_/_0.3))]",
+  purple: "border-[color:var(--zui-stepper-indicator-purple-border,oklch(62.7%_0.265_303.9_/_0.6))] bg-[var(--zui-stepper-indicator-purple-bg,oklch(62.7%_0.265_303.9_/_0.2))] text-[color:var(--zui-stepper-indicator-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-stepper-indicator-purple-fg-dark,oklch(94.6%_0.033_307.174))] ring-2 ring-[var(--zui-stepper-indicator-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
+  pink: "border-[color:var(--zui-stepper-indicator-pink-border,oklch(65.6%_0.241_354.308_/_0.6))] bg-[var(--zui-stepper-indicator-pink-bg,oklch(65.6%_0.241_354.308_/_0.2))] text-[color:var(--zui-stepper-indicator-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-stepper-indicator-pink-fg-dark,oklch(94.8%_0.028_342.258))] ring-2 ring-[var(--zui-stepper-indicator-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
+  orange: "border-[color:var(--zui-stepper-indicator-orange-border,oklch(70.5%_0.213_47.604_/_0.6))] bg-[var(--zui-stepper-indicator-orange-bg,oklch(70.5%_0.213_47.604_/_0.2))] text-[color:var(--zui-stepper-indicator-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-stepper-indicator-orange-fg-dark,oklch(95.4%_0.038_75.164))] ring-2 ring-[var(--zui-stepper-indicator-orange-ring,oklch(75%_0.183_55.934_/_0.3))]",
+  yellow: "border-[color:var(--zui-stepper-indicator-yellow-border,oklch(79.5%_0.184_86.047_/_0.6))] bg-[var(--zui-stepper-indicator-yellow-bg,oklch(79.5%_0.184_86.047_/_0.2))] text-[color:var(--zui-stepper-indicator-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-stepper-indicator-yellow-fg-dark,oklch(97.3%_0.071_103.193))] ring-2 ring-[var(--zui-stepper-indicator-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
+  teal: "border-[color:var(--zui-stepper-indicator-teal-border,oklch(70.4%_0.14_182.503_/_0.6))] bg-[var(--zui-stepper-indicator-teal-bg,oklch(70.4%_0.14_182.503_/_0.2))] text-[color:var(--zui-stepper-indicator-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-stepper-indicator-teal-fg-dark,oklch(95.3%_0.051_180.801))] ring-2 ring-[var(--zui-stepper-indicator-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
+  indigo: "border-[color:var(--zui-stepper-indicator-indigo-border,oklch(58.5%_0.233_277.117_/_0.6))] bg-[var(--zui-stepper-indicator-indigo-bg,oklch(58.5%_0.233_277.117_/_0.2))] text-[color:var(--zui-stepper-indicator-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-stepper-indicator-indigo-fg-dark,oklch(93%_0.034_272.788))] ring-2 ring-[var(--zui-stepper-indicator-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
+  emerald: "border-[color:var(--zui-stepper-indicator-emerald-border,oklch(69.6%_0.17_162.48_/_0.6))] bg-[var(--zui-stepper-indicator-emerald-bg,oklch(69.6%_0.17_162.48_/_0.2))] text-[color:var(--zui-stepper-indicator-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-stepper-indicator-emerald-fg-dark,oklch(95%_0.052_163.051))] ring-2 ring-[var(--zui-stepper-indicator-emerald-ring,oklch(76.5%_0.177_163.223_/_0.3))]",
+  gray: "border-[color:var(--zui-stepper-indicator-gray-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-stepper-indicator-gray-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-stepper-indicator-gray-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-stepper-indicator-gray-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-stepper-indicator-gray-ring,oklch(70.7%_0.022_261.325_/_0.3))]",
+  violet: "border-[color:var(--zui-stepper-indicator-violet-border,oklch(60.6%_0.25_292.717_/_0.6))] bg-[var(--zui-stepper-indicator-violet-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-stepper-indicator-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-stepper-indicator-violet-fg-dark,oklch(94.3%_0.029_294.588))] ring-2 ring-[var(--zui-stepper-indicator-violet-ring,oklch(70.2%_0.183_293.541_/_0.3))]",
+  "gradient-blue": "border-[color:var(--zui-stepper-indicator-gradient-blue-border,oklch(62.3%_0.214_259.815_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-blue-bg,oklch(62.3%_0.214_259.815_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-blue-fg,oklch(37.9%_0.146_265.522))] dark:text-[color:var(--zui-stepper-indicator-gradient-blue-fg-dark,oklch(93.2%_0.032_255.585))] ring-2 ring-[var(--zui-stepper-indicator-gradient-blue-ring,oklch(70.7%_0.165_254.624_/_0.3))]",
+  "gradient-green": "border-[color:var(--zui-stepper-indicator-gradient-green-border,oklch(72.3%_0.219_149.579_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-green-bg,oklch(72.3%_0.219_149.579_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-green-fg,oklch(39.3%_0.095_152.535))] dark:text-[color:var(--zui-stepper-indicator-gradient-green-fg-dark,oklch(96.2%_0.044_156.743))] ring-2 ring-[var(--zui-stepper-indicator-gradient-green-ring,oklch(79.2%_0.209_151.711_/_0.3))]",
+  "gradient-red": "border-[color:var(--zui-stepper-indicator-gradient-red-border,oklch(63.7%_0.237_25.331_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-red-bg,oklch(63.7%_0.237_25.331_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-red-fg,oklch(39.6%_0.141_25.723))] dark:text-[color:var(--zui-stepper-indicator-gradient-red-fg-dark,oklch(93.6%_0.032_17.717))] ring-2 ring-[var(--zui-stepper-indicator-gradient-red-ring,oklch(70.4%_0.191_22.216_/_0.3))]",
+  "gradient-yellow": "border-[color:var(--zui-stepper-indicator-gradient-yellow-border,oklch(79.5%_0.184_86.047_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-yellow-bg,oklch(79.5%_0.184_86.047_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-stepper-indicator-gradient-yellow-fg-dark,oklch(97.3%_0.071_103.193))] ring-2 ring-[var(--zui-stepper-indicator-gradient-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
+  "gradient-purple": "border-[color:var(--zui-stepper-indicator-gradient-purple-border,oklch(62.7%_0.265_303.9_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-purple-bg,oklch(62.7%_0.265_303.9_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-stepper-indicator-gradient-purple-fg-dark,oklch(94.6%_0.033_307.174))] ring-2 ring-[var(--zui-stepper-indicator-gradient-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
+  "gradient-teal": "border-[color:var(--zui-stepper-indicator-gradient-teal-border,oklch(70.4%_0.14_182.503_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-teal-bg,oklch(70.4%_0.14_182.503_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-stepper-indicator-gradient-teal-fg-dark,oklch(95.3%_0.051_180.801))] ring-2 ring-[var(--zui-stepper-indicator-gradient-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
+  "gradient-indigo": "border-[color:var(--zui-stepper-indicator-gradient-indigo-border,oklch(58.5%_0.233_277.117_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-indigo-bg,oklch(58.5%_0.233_277.117_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-stepper-indicator-gradient-indigo-fg-dark,oklch(93%_0.034_272.788))] ring-2 ring-[var(--zui-stepper-indicator-gradient-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
+  "gradient-pink": "border-[color:var(--zui-stepper-indicator-gradient-pink-border,oklch(65.6%_0.241_354.308_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-pink-bg,oklch(65.6%_0.241_354.308_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-stepper-indicator-gradient-pink-fg-dark,oklch(94.8%_0.028_342.258))] ring-2 ring-[var(--zui-stepper-indicator-gradient-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
+  "gradient-orange": "border-[color:var(--zui-stepper-indicator-gradient-orange-border,oklch(70.5%_0.213_47.604_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-orange-bg,oklch(70.5%_0.213_47.604_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-stepper-indicator-gradient-orange-fg-dark,oklch(95.4%_0.038_75.164))] ring-2 ring-[var(--zui-stepper-indicator-gradient-orange-ring,oklch(75%_0.183_55.934_/_0.3))]"
+};
+var zuiStepperIndicatorSizes = {
+  sm: "size-8 text-xs",
+  md: "size-9 text-sm",
+  lg: "size-10 text-base"
+};
+
+// src/ui/stepper/variants.ts
+var stepperVariants = classVarianceAuthority.cva(zuiStepperBase, {
   variants: {
-    orientation: {
-      horizontal: "flex-row flex-wrap items-start gap-4",
-      vertical: "flex-col gap-6"
-    }
+    orientation: zuiStepperOrientations
   },
   defaultVariants: {
     orientation: "horizontal"
   }
 });
-var stepperItemVariants = classVarianceAuthority.cva("relative flex gap-3", {
+var stepperItemVariants = classVarianceAuthority.cva(zuiStepperItemBase, {
   variants: {
-    orientation: {
-      horizontal: "min-w-0 flex-col items-center text-center",
-      vertical: "flex-row items-center text-left"
-    }
+    orientation: zuiStepperItemOrientations
   },
   defaultVariants: {
     orientation: "horizontal"
   }
 });
-var stepperIndicatorVariants = classVarianceAuthority.cva(
-  "grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors",
-  {
-    variants: {
-      appearance: {
-        complete: "border-emerald-500/60 bg-emerald-500/20 text-emerald-900 dark:text-emerald-100 ring-2 ring-emerald-400/30",
-        current: "border-violet-600 dark:border-violet-400 bg-violet-500/20 text-slate-900 dark:text-white ring-2 ring-violet-400/50",
-        upcoming: "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-500 dark:text-slate-400",
-        sky: "border-sky-500/60 bg-sky-500/20 text-sky-900 dark:text-sky-100 ring-2 ring-sky-400/30",
-        rose: "border-rose-500/60 bg-rose-500/20 text-rose-900 dark:text-rose-100 ring-2 ring-rose-400/30",
-        purple: "border-purple-500/60 bg-purple-500/20 text-purple-900 dark:text-purple-100 ring-2 ring-purple-400/30",
-        pink: "border-pink-500/60 bg-pink-500/20 text-pink-900 dark:text-pink-100 ring-2 ring-pink-400/30",
-        orange: "border-orange-500/60 bg-orange-500/20 text-orange-900 dark:text-orange-100 ring-2 ring-orange-400/30",
-        yellow: "border-yellow-500/60 bg-yellow-500/20 text-yellow-900 dark:text-yellow-100 ring-2 ring-yellow-400/30",
-        teal: "border-teal-500/60 bg-teal-500/20 text-teal-900 dark:text-teal-100 ring-2 ring-teal-400/30",
-        indigo: "border-indigo-500/60 bg-indigo-500/20 text-indigo-900 dark:text-indigo-100 ring-2 ring-indigo-400/30",
-        emerald: "border-emerald-500/60 bg-emerald-500/20 text-emerald-900 dark:text-emerald-100 ring-2 ring-emerald-400/30",
-        gray: "border-gray-500/60 bg-gray-500/20 text-gray-900 dark:text-gray-100 ring-2 ring-gray-400/30",
-        violet: "border-violet-500/60 bg-violet-500/20 text-violet-900 dark:text-violet-100 ring-2 ring-violet-400/30",
-        "gradient-blue": "border-blue-500/60 bg-blue-500/20 text-blue-900 dark:text-blue-100 ring-2 ring-blue-400/30",
-        "gradient-green": "border-green-500/60 bg-green-500/20 text-green-900 dark:text-green-100 ring-2 ring-green-400/30",
-        "gradient-red": "border-red-500/60 bg-red-500/20 text-red-900 dark:text-red-100 ring-2 ring-red-400/30",
-        "gradient-yellow": "border-yellow-500/60 bg-yellow-500/20 text-yellow-900 dark:text-yellow-100 ring-2 ring-yellow-400/30",
-        "gradient-purple": "border-purple-500/60 bg-purple-500/20 text-purple-900 dark:text-purple-100 ring-2 ring-purple-400/30",
-        "gradient-teal": "border-teal-500/60 bg-teal-500/20 text-teal-900 dark:text-teal-100 ring-2 ring-teal-400/30",
-        "gradient-indigo": "border-indigo-500/60 bg-indigo-500/20 text-indigo-900 dark:text-indigo-100 ring-2 ring-indigo-400/30",
-        "gradient-pink": "border-pink-500/60 bg-pink-500/20 text-pink-900 dark:text-pink-100 ring-2 ring-pink-400/30",
-        "gradient-orange": "border-orange-500/60 bg-orange-500/20 text-orange-900 dark:text-orange-100 ring-2 ring-orange-400/30"
-      },
-      size: {
-        sm: "size-8 text-xs",
-        md: "size-9 text-sm",
-        lg: "size-10 text-base"
-      }
-    },
-    defaultVariants: {
-      appearance: "upcoming",
-      size: "md"
-    }
+var stepperIndicatorVariants = classVarianceAuthority.cva(zuiStepperIndicatorBase, {
+  variants: {
+    appearance: zuiStepperIndicatorAppearances,
+    size: zuiStepperIndicatorSizes
+  },
+  defaultVariants: {
+    appearance: "upcoming",
+    size: "md"
   }
-);
+});
 var StepperContext = react.createContext(null);
 function useStepper(component) {
   const ctx = react.useContext(StepperContext);

package/dist/ui/stepper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/stepper/variants.ts","../../src/ui/stepper/stepper.tsx"],"names":["cva","createContext","useContext","useMemo","Children","isValidElement","jsx","cn"],"mappings":";;;;;;;AAEO,IAAM,eAAA,GAAkBA,2BAAI,aAAA,EAAe;AAAA,EAChD,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,sCAAA;AAAA,MACZ,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa;AAAA;AAEjB,CAAC;AAEM,IAAM,mBAAA,GAAsBA,2BAAI,qBAAA,EAAuB;AAAA,EAC5D,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY,2CAAA;AAAA,MACZ,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa;AAAA;AAEjB,CAAC;AAEM,IAAM,wBAAA,GAA2BA,0BAAA;AAAA,EACtC,qGAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,UAAA,EAAY;AAAA,QACV,QAAA,EACE,2GAAA;AAAA,QACF,OAAA,EACE,oHAAA;AAAA,QACF,QAAA,EACE,oGAAA;AAAA,QACF,GAAA,EAAK,uFAAA;AAAA,QACL,IAAA,EAAM,4FAAA;AAAA,QACN,MAAA,EACE,sGAAA;AAAA,QACF,IAAA,EAAM,4FAAA;AAAA,QACN,MAAA,EACE,sGAAA;AAAA,QACF,MAAA,EACE,sGAAA;AAAA,QACF,IAAA,EAAM,4FAAA;AAAA,QACN,MAAA,EACE,sGAAA;AAAA,QACF,OAAA,EACE,2GAAA;AAAA,QACF,IAAA,EAAM,4FAAA;AAAA,QACN,MAAA,EACE,sGAAA;AAAA,QACF,eAAA,EACE,4FAAA;AAAA,QACF,gBAAA,EACE,iGAAA;AAAA,QACF,cAAA,EACE,uFAAA;AAAA,QACF,iBAAA,EACE,sGAAA;AAAA,QACF,iBAAA,EACE,sGAAA;AAAA,QACF,eAAA,EACE,4FAAA;AAAA,QACF,iBAAA,EACE,sGAAA;AAAA,QACF,eAAA,EACE,4FAAA;AAAA,QACF,iBAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,UAAA,EAAY,UAAA;AAAA,MACZ,IAAA,EAAM;AAAA;AACR;AAEJ;AC1DA,IAAM,cAAA,GAAiBC,oBAAiC,IAAI,CAAA;AAE5D,SAAS,WAAW,SAAA,EAA+B;AACjD,EAAA,MAAM,GAAA,GAAMC,iBAAW,cAAc,CAAA;AACrC,EAAA,IAAI,CAAC,GAAA,EAAK;AACR,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,EAAG,SAAS,CAAA,8BAAA,CAAgC,CAAA;AAAA,EAC9D;AACA,EAAA,OAAO,GAAA;AACT;AAEA,IAAM,mBAAA,GAAsBD,oBAA6B,IAAI,CAAA;AAE7D,SAAS,gBAAgB,SAAA,EAA2B;AAClD,EAAA,MAAM,KAAA,GAAQC,iBAAW,mBAAmB,CAAA;AAC5C,EAAA,IAAI,UAAU,IAAA,EAAM;AAClB,IAAA,MAAM,IAAI,KAAA,CAAM,CAAA,EAAG,SAAS,CAAA,kCAAA,CAAoC,CAAA;AAAA,EAClE;AACA,EAAA,OAAO,KAAA;AACT;AAEO,SAAS,OAAA,CAAQ;AAAA,EACtB,SAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiB;AACf,EAAA,MAAM,KAAA,GAAQC,aAAA;AAAA,IACZ,MAAMC,cAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA,CAAE,OAAOC,oBAAc,CAAA;AAAA,IACtD,CAAC,QAAQ;AAAA,GACX;AACA,EAAA,MAAM,GAAA,GAAMF,aAAA;AAAA,IACV,OAAO;AAAA,MACL,aAAa,WAAA,IAAe,YAAA;AAAA,MAC5B,MAAM,IAAA,IAAQ,IAAA;AAAA,MACd,OAAO,KAAA,CAAM;AAAA,KACf,CAAA;AAAA,IACA,CAAC,KAAA,CAAM,MAAA,EAAQ,WAAA,EAAa,IAAI;AAAA,GAClC;AAEA,EAAA,uBACEG,cAAA,CAAC,cAAA,CAAe,QAAA,EAAf,EAAwB,OAAO,GAAA,EAC9B,QAAA,kBAAAA,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,SAAA;AAAA,MACV,SAAA,EAAWC,mBAAA;AAAA,QACT,eAAA,CAAgB,EAAE,WAAA,EAAa,CAAA;AAAA,QAC/B,mBAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,qBACjBD,cAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAAyC,KAAA,EAAO,KAAA,EAC9C,QAAA,EAAA,KAAA,EAAA,EADgC,KAEnC,CACD;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;AAEf,SAAS,WAAA,CAAY;AAAA,EAC1B,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,EAAE,WAAA,EAAY,GAAI,UAAA,CAAW,aAAa,CAAA;AAChD,EAAA,uBACEA,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,cAAA;AAAA,MACV,WAAWC,mBAAA,CAAG,mBAAA,CAAoB,EAAE,WAAA,EAAa,GAAG,SAAS,CAAA;AAAA,MAC5D,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;AAEnB,SAAS,gBAAA,CAAiB;AAAA,EAC/B,SAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgE;AAC9D,EAAA,MAAM,EAAE,IAAA,EAAK,GAAI,UAAA,CAAW,kBAAkB,CAAA;AAC9C,EAAA,MAAM,KAAA,GAAQ,gBAAgB,kBAAkB,CAAA;AAChD,EAAA,uBACED,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAWC,oBAAG,wBAAA,CAAyB,EAAE,YAAY,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACtE,GAAG,IAAA;AAAA,MAEH,sBAAY,KAAA,GAAQ;AAAA;AAAA,GACvB;AAEJ;AAEA,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAExB,SAAS,YAAA,CAAa;AAAA,EAC3B,SAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA4D;AAC1D,EAAA,uBACED,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,eAAA;AAAA,MACV,SAAA,EAAWC,mBAAA;AAAA,QACT,sDAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA;AAEpB,SAAS,kBAAA,CAAmB;AAAA,EACjC,SAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAwE;AACtE,EAAA,uBACED,cAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,qBAAA;AAAA,MACV,SAAA,EAAWC,mBAAA,CAAG,4CAAA,EAA8C,SAAS,CAAA;AAAA,MACpE,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,kBAAA,CAAmB,WAAA,GAAc,oBAAA","file":"stepper.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const stepperVariants = cva(\"flex w-full\", {\n  variants: {\n    orientation: {\n      horizontal: \"flex-row flex-wrap items-start gap-4\",\n      vertical: \"flex-col gap-6\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\nexport const stepperItemVariants = cva(\"relative flex gap-3\", {\n  variants: {\n    orientation: {\n      horizontal: \"min-w-0 flex-col items-center text-center\",\n      vertical: \"flex-row items-center text-left\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\nexport const stepperIndicatorVariants = cva(\n  \"grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors\",\n  {\n    variants: {\n      appearance: {\n        complete:\n          \"border-emerald-500/60 bg-emerald-500/20 text-emerald-900 dark:text-emerald-100 ring-2 ring-emerald-400/30\",\n        current:\n          \"border-violet-600 dark:border-violet-400 bg-violet-500/20 text-slate-900 dark:text-white ring-2 ring-violet-400/50\",\n        upcoming:\n          \"border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-500 dark:text-slate-400\",\n        sky: \"border-sky-500/60 bg-sky-500/20 text-sky-900 dark:text-sky-100 ring-2 ring-sky-400/30\",\n        rose: \"border-rose-500/60 bg-rose-500/20 text-rose-900 dark:text-rose-100 ring-2 ring-rose-400/30\",\n        purple:\n          \"border-purple-500/60 bg-purple-500/20 text-purple-900 dark:text-purple-100 ring-2 ring-purple-400/30\",\n        pink: \"border-pink-500/60 bg-pink-500/20 text-pink-900 dark:text-pink-100 ring-2 ring-pink-400/30\",\n        orange:\n          \"border-orange-500/60 bg-orange-500/20 text-orange-900 dark:text-orange-100 ring-2 ring-orange-400/30\",\n        yellow:\n          \"border-yellow-500/60 bg-yellow-500/20 text-yellow-900 dark:text-yellow-100 ring-2 ring-yellow-400/30\",\n        teal: \"border-teal-500/60 bg-teal-500/20 text-teal-900 dark:text-teal-100 ring-2 ring-teal-400/30\",\n        indigo:\n          \"border-indigo-500/60 bg-indigo-500/20 text-indigo-900 dark:text-indigo-100 ring-2 ring-indigo-400/30\",\n        emerald:\n          \"border-emerald-500/60 bg-emerald-500/20 text-emerald-900 dark:text-emerald-100 ring-2 ring-emerald-400/30\",\n        gray: \"border-gray-500/60 bg-gray-500/20 text-gray-900 dark:text-gray-100 ring-2 ring-gray-400/30\",\n        violet:\n          \"border-violet-500/60 bg-violet-500/20 text-violet-900 dark:text-violet-100 ring-2 ring-violet-400/30\",\n        \"gradient-blue\":\n          \"border-blue-500/60 bg-blue-500/20 text-blue-900 dark:text-blue-100 ring-2 ring-blue-400/30\",\n        \"gradient-green\":\n          \"border-green-500/60 bg-green-500/20 text-green-900 dark:text-green-100 ring-2 ring-green-400/30\",\n        \"gradient-red\":\n          \"border-red-500/60 bg-red-500/20 text-red-900 dark:text-red-100 ring-2 ring-red-400/30\",\n        \"gradient-yellow\":\n          \"border-yellow-500/60 bg-yellow-500/20 text-yellow-900 dark:text-yellow-100 ring-2 ring-yellow-400/30\",\n        \"gradient-purple\":\n          \"border-purple-500/60 bg-purple-500/20 text-purple-900 dark:text-purple-100 ring-2 ring-purple-400/30\",\n        \"gradient-teal\":\n          \"border-teal-500/60 bg-teal-500/20 text-teal-900 dark:text-teal-100 ring-2 ring-teal-400/30\",\n        \"gradient-indigo\":\n          \"border-indigo-500/60 bg-indigo-500/20 text-indigo-900 dark:text-indigo-100 ring-2 ring-indigo-400/30\",\n        \"gradient-pink\":\n          \"border-pink-500/60 bg-pink-500/20 text-pink-900 dark:text-pink-100 ring-2 ring-pink-400/30\",\n        \"gradient-orange\":\n          \"border-orange-500/60 bg-orange-500/20 text-orange-900 dark:text-orange-100 ring-2 ring-orange-400/30\",\n      },\n      size: {\n        sm: \"size-8 text-xs\",\n        md: \"size-9 text-sm\",\n        lg: \"size-10 text-base\",\n      },\n    },\n    defaultVariants: {\n      appearance: \"upcoming\",\n      size: \"md\",\n    },\n  },\n);\n","\"use client\";\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  StepperCtx,\n  StepperDescriptionProps,\n  StepperIndicatorProps,\n  StepperItemProps,\n  StepperProps,\n  StepperTitleProps,\n} from \"./types\";\nimport {\n  stepperIndicatorVariants,\n  stepperItemVariants,\n  stepperVariants,\n} from \"./variants\";\n\nconst StepperContext = createContext<StepperCtx | null>(null);\n\nfunction useStepper(component: string): StepperCtx {\n  const ctx = useContext(StepperContext);\n  if (!ctx) {\n    throw new Error(`${component} must be used within <Stepper>`);\n  }\n  return ctx;\n}\n\nconst StepperIndexContext = createContext<number | null>(null);\n\nfunction useStepperIndex(component: string): number {\n  const index = useContext(StepperIndexContext);\n  if (index === null) {\n    throw new Error(`${component} must be used within <StepperItem>`);\n  }\n  return index;\n}\n\nexport function Stepper({\n  className,\n  orientation = \"horizontal\",\n  size = \"md\",\n  children,\n  ref,\n  ...rest\n}: StepperProps) {\n  const items = useMemo(\n    () => Children.toArray(children).filter(isValidElement),\n    [children],\n  );\n  const ctx = useMemo(\n    () => ({\n      orientation: orientation ?? \"horizontal\",\n      size: size ?? \"md\",\n      total: items.length,\n    }),\n    [items.length, orientation, size],\n  );\n\n  return (\n    <StepperContext.Provider value={ctx}>\n      <ol\n        ref={ref}\n        data-slot=\"stepper\"\n        className={cn(\n          stepperVariants({ orientation }),\n          \"m-0 list-none p-0\",\n          className,\n        )}\n        {...rest}\n      >\n        {items.map((child, index) => (\n          <StepperIndexContext.Provider key={index} value={index}>\n            {child}\n          </StepperIndexContext.Provider>\n        ))}\n      </ol>\n    </StepperContext.Provider>\n  );\n}\n\nStepper.displayName = \"Stepper\";\n\nexport function StepperItem({\n  className,\n  ref,\n  children,\n  ...rest\n}: StepperItemProps) {\n  const { orientation } = useStepper(\"StepperItem\");\n  return (\n    <li\n      ref={ref}\n      data-slot=\"stepper-item\"\n      className={cn(stepperItemVariants({ orientation }), className)}\n      {...rest}\n    >\n      {children}\n    </li>\n  );\n}\n\nStepperItem.displayName = \"StepperItem\";\n\nexport function StepperIndicator({\n  className,\n  ref,\n  children,\n  appearance,\n  ...rest\n}: StepperIndicatorProps & { ref?: React.Ref<HTMLDivElement> }) {\n  const { size } = useStepper(\"StepperIndicator\");\n  const index = useStepperIndex(\"StepperIndicator\");\n  return (\n    <div\n      ref={ref}\n      data-slot=\"stepper-indicator\"\n      className={cn(stepperIndicatorVariants({ appearance, size }), className)}\n      {...rest}\n    >\n      {children ?? index + 1}\n    </div>\n  );\n}\n\nStepperIndicator.displayName = \"StepperIndicator\";\n\nexport function StepperTitle({\n  className,\n  ref,\n  ...rest\n}: StepperTitleProps & { ref?: React.Ref<HTMLDivElement> }) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"stepper-title\"\n      className={cn(\n        \"text-sm font-semibold text-slate-900 dark:text-white\",\n        className,\n      )}\n      {...rest}\n    />\n  );\n}\n\nStepperTitle.displayName = \"StepperTitle\";\n\nexport function StepperDescription({\n  className,\n  ref,\n  ...rest\n}: StepperDescriptionProps & { ref?: React.Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      ref={ref}\n      data-slot=\"stepper-description\"\n      className={cn(\"text-xs text-slate-900 dark:text-slate-400\", className)}\n      {...rest}\n    />\n  );\n}\n\nStepperDescription.displayName = \"StepperDescription\";\n"]}
+{"version":3,"sources":["../../src/design-system/stepper.ts","../../src/ui/stepper/variants.ts","../../src/ui/stepper/stepper.tsx"],"names":["cva","createContext","useContext","useMemo","Children","isValidElement","jsx","cn"],"mappings":"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","file":"stepper.js","sourcesContent":["export const zuiStepperBase = \"flex w-full\";\n\nexport const zuiStepperOrientations = {\n  horizontal: \"flex-row flex-wrap items-start gap-4\",\n  vertical: \"flex-col gap-6\",\n} as const;\n\nexport const zuiStepperItemBase = \"relative flex gap-3\";\n\nexport const zuiStepperItemOrientations = {\n  horizontal: \"min-w-0 flex-col items-center text-center\",\n  vertical: \"flex-row items-center text-left\",\n} as const;\n\nexport const zuiStepperIndicatorBase =\n  \"grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors\";\n\nexport const zuiStepperIndicatorAppearances = {\n  complete:\n    \"border-[color:var(--zui-stepper-indicator-complete-border,oklch(69.6%_0.17_162.48_/_0.6))] bg-[var(--zui-stepper-indicator-complete-bg,oklch(69.6%_0.17_162.48_/_0.2))] text-[color:var(--zui-stepper-indicator-complete-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-stepper-indicator-complete-fg-dark,oklch(95%_0.052_163.051))] ring-2 ring-[var(--zui-stepper-indicator-complete-ring,oklch(76.5%_0.177_163.223_/_0.3))]\",\n  current:\n    \"border-[color:var(--zui-stepper-indicator-current-border,oklch(54.1%_0.281_293.009))] dark:border-[color:var(--zui-stepper-indicator-current-border-dark,oklch(70.2%_0.183_293.541))] bg-[var(--zui-stepper-indicator-current-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-stepper-indicator-current-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-stepper-indicator-current-fg-dark,#ffffff)] ring-2 ring-[var(--zui-stepper-indicator-current-ring,oklch(70.2%_0.183_293.541_/_0.5))]\",\n  upcoming:\n    \"border-[color:var(--zui-stepper-indicator-upcoming-border,#00000026)] dark:border-[color:var(--zui-stepper-indicator-upcoming-border-dark,#ffffff26)] bg-[var(--zui-stepper-indicator-upcoming-bg,#0000000d)] dark:bg-[var(--zui-stepper-indicator-upcoming-bg-dark,#ffffff0d)] text-[color:var(--zui-stepper-indicator-upcoming-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-stepper-indicator-upcoming-fg-dark,oklch(70.4%_0.04_256.788))]\",\n  sky: \"border-[color:var(--zui-stepper-indicator-sky-border,oklch(68.5%_0.169_237.323_/_0.6))] bg-[var(--zui-stepper-indicator-sky-bg,oklch(68.5%_0.169_237.323_/_0.2))] text-[color:var(--zui-stepper-indicator-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-stepper-indicator-sky-fg-dark,oklch(95.1%_0.026_236.824))] ring-2 ring-[var(--zui-stepper-indicator-sky-ring,oklch(74.6%_0.16_232.661_/_0.3))]\",\n  rose: \"border-[color:var(--zui-stepper-indicator-rose-border,oklch(64.5%_0.246_16.439_/_0.6))] bg-[var(--zui-stepper-indicator-rose-bg,oklch(64.5%_0.246_16.439_/_0.2))] text-[color:var(--zui-stepper-indicator-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-stepper-indicator-rose-fg-dark,oklch(94.1%_0.03_12.58))] ring-2 ring-[var(--zui-stepper-indicator-rose-ring,oklch(71.2%_0.194_13.428_/_0.3))]\",\n  purple:\n    \"border-[color:var(--zui-stepper-indicator-purple-border,oklch(62.7%_0.265_303.9_/_0.6))] bg-[var(--zui-stepper-indicator-purple-bg,oklch(62.7%_0.265_303.9_/_0.2))] text-[color:var(--zui-stepper-indicator-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-stepper-indicator-purple-fg-dark,oklch(94.6%_0.033_307.174))] ring-2 ring-[var(--zui-stepper-indicator-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]\",\n  pink: \"border-[color:var(--zui-stepper-indicator-pink-border,oklch(65.6%_0.241_354.308_/_0.6))] bg-[var(--zui-stepper-indicator-pink-bg,oklch(65.6%_0.241_354.308_/_0.2))] text-[color:var(--zui-stepper-indicator-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-stepper-indicator-pink-fg-dark,oklch(94.8%_0.028_342.258))] ring-2 ring-[var(--zui-stepper-indicator-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]\",\n  orange:\n    \"border-[color:var(--zui-stepper-indicator-orange-border,oklch(70.5%_0.213_47.604_/_0.6))] bg-[var(--zui-stepper-indicator-orange-bg,oklch(70.5%_0.213_47.604_/_0.2))] text-[color:var(--zui-stepper-indicator-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-stepper-indicator-orange-fg-dark,oklch(95.4%_0.038_75.164))] ring-2 ring-[var(--zui-stepper-indicator-orange-ring,oklch(75%_0.183_55.934_/_0.3))]\",\n  yellow:\n    \"border-[color:var(--zui-stepper-indicator-yellow-border,oklch(79.5%_0.184_86.047_/_0.6))] bg-[var(--zui-stepper-indicator-yellow-bg,oklch(79.5%_0.184_86.047_/_0.2))] text-[color:var(--zui-stepper-indicator-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-stepper-indicator-yellow-fg-dark,oklch(97.3%_0.071_103.193))] ring-2 ring-[var(--zui-stepper-indicator-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]\",\n  teal: \"border-[color:var(--zui-stepper-indicator-teal-border,oklch(70.4%_0.14_182.503_/_0.6))] bg-[var(--zui-stepper-indicator-teal-bg,oklch(70.4%_0.14_182.503_/_0.2))] text-[color:var(--zui-stepper-indicator-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-stepper-indicator-teal-fg-dark,oklch(95.3%_0.051_180.801))] ring-2 ring-[var(--zui-stepper-indicator-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]\",\n  indigo:\n    \"border-[color:var(--zui-stepper-indicator-indigo-border,oklch(58.5%_0.233_277.117_/_0.6))] bg-[var(--zui-stepper-indicator-indigo-bg,oklch(58.5%_0.233_277.117_/_0.2))] text-[color:var(--zui-stepper-indicator-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-stepper-indicator-indigo-fg-dark,oklch(93%_0.034_272.788))] ring-2 ring-[var(--zui-stepper-indicator-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]\",\n  emerald:\n    \"border-[color:var(--zui-stepper-indicator-emerald-border,oklch(69.6%_0.17_162.48_/_0.6))] bg-[var(--zui-stepper-indicator-emerald-bg,oklch(69.6%_0.17_162.48_/_0.2))] text-[color:var(--zui-stepper-indicator-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-stepper-indicator-emerald-fg-dark,oklch(95%_0.052_163.051))] ring-2 ring-[var(--zui-stepper-indicator-emerald-ring,oklch(76.5%_0.177_163.223_/_0.3))]\",\n  gray: \"border-[color:var(--zui-stepper-indicator-gray-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-stepper-indicator-gray-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-stepper-indicator-gray-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-stepper-indicator-gray-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-stepper-indicator-gray-ring,oklch(70.7%_0.022_261.325_/_0.3))]\",\n  violet:\n    \"border-[color:var(--zui-stepper-indicator-violet-border,oklch(60.6%_0.25_292.717_/_0.6))] bg-[var(--zui-stepper-indicator-violet-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-stepper-indicator-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-stepper-indicator-violet-fg-dark,oklch(94.3%_0.029_294.588))] ring-2 ring-[var(--zui-stepper-indicator-violet-ring,oklch(70.2%_0.183_293.541_/_0.3))]\",\n  \"gradient-blue\":\n    \"border-[color:var(--zui-stepper-indicator-gradient-blue-border,oklch(62.3%_0.214_259.815_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-blue-bg,oklch(62.3%_0.214_259.815_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-blue-fg,oklch(37.9%_0.146_265.522))] dark:text-[color:var(--zui-stepper-indicator-gradient-blue-fg-dark,oklch(93.2%_0.032_255.585))] ring-2 ring-[var(--zui-stepper-indicator-gradient-blue-ring,oklch(70.7%_0.165_254.624_/_0.3))]\",\n  \"gradient-green\":\n    \"border-[color:var(--zui-stepper-indicator-gradient-green-border,oklch(72.3%_0.219_149.579_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-green-bg,oklch(72.3%_0.219_149.579_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-green-fg,oklch(39.3%_0.095_152.535))] dark:text-[color:var(--zui-stepper-indicator-gradient-green-fg-dark,oklch(96.2%_0.044_156.743))] ring-2 ring-[var(--zui-stepper-indicator-gradient-green-ring,oklch(79.2%_0.209_151.711_/_0.3))]\",\n  \"gradient-red\":\n    \"border-[color:var(--zui-stepper-indicator-gradient-red-border,oklch(63.7%_0.237_25.331_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-red-bg,oklch(63.7%_0.237_25.331_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-red-fg,oklch(39.6%_0.141_25.723))] dark:text-[color:var(--zui-stepper-indicator-gradient-red-fg-dark,oklch(93.6%_0.032_17.717))] ring-2 ring-[var(--zui-stepper-indicator-gradient-red-ring,oklch(70.4%_0.191_22.216_/_0.3))]\",\n  \"gradient-yellow\":\n    \"border-[color:var(--zui-stepper-indicator-gradient-yellow-border,oklch(79.5%_0.184_86.047_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-yellow-bg,oklch(79.5%_0.184_86.047_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-stepper-indicator-gradient-yellow-fg-dark,oklch(97.3%_0.071_103.193))] ring-2 ring-[var(--zui-stepper-indicator-gradient-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]\",\n  \"gradient-purple\":\n    \"border-[color:var(--zui-stepper-indicator-gradient-purple-border,oklch(62.7%_0.265_303.9_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-purple-bg,oklch(62.7%_0.265_303.9_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-stepper-indicator-gradient-purple-fg-dark,oklch(94.6%_0.033_307.174))] ring-2 ring-[var(--zui-stepper-indicator-gradient-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]\",\n  \"gradient-teal\":\n    \"border-[color:var(--zui-stepper-indicator-gradient-teal-border,oklch(70.4%_0.14_182.503_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-teal-bg,oklch(70.4%_0.14_182.503_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-stepper-indicator-gradient-teal-fg-dark,oklch(95.3%_0.051_180.801))] ring-2 ring-[var(--zui-stepper-indicator-gradient-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]\",\n  \"gradient-indigo\":\n    \"border-[color:var(--zui-stepper-indicator-gradient-indigo-border,oklch(58.5%_0.233_277.117_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-indigo-bg,oklch(58.5%_0.233_277.117_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-stepper-indicator-gradient-indigo-fg-dark,oklch(93%_0.034_272.788))] ring-2 ring-[var(--zui-stepper-indicator-gradient-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]\",\n  \"gradient-pink\":\n    \"border-[color:var(--zui-stepper-indicator-gradient-pink-border,oklch(65.6%_0.241_354.308_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-pink-bg,oklch(65.6%_0.241_354.308_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-stepper-indicator-gradient-pink-fg-dark,oklch(94.8%_0.028_342.258))] ring-2 ring-[var(--zui-stepper-indicator-gradient-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]\",\n  \"gradient-orange\":\n    \"border-[color:var(--zui-stepper-indicator-gradient-orange-border,oklch(70.5%_0.213_47.604_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-orange-bg,oklch(70.5%_0.213_47.604_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-stepper-indicator-gradient-orange-fg-dark,oklch(95.4%_0.038_75.164))] ring-2 ring-[var(--zui-stepper-indicator-gradient-orange-ring,oklch(75%_0.183_55.934_/_0.3))]\",\n} as const;\n\nexport const zuiStepperIndicatorSizes = {\n  sm: \"size-8 text-xs\",\n  md: \"size-9 text-sm\",\n  lg: \"size-10 text-base\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiStepperBase,\n  zuiStepperIndicatorAppearances,\n  zuiStepperIndicatorBase,\n  zuiStepperIndicatorSizes,\n  zuiStepperItemBase,\n  zuiStepperItemOrientations,\n  zuiStepperOrientations,\n} from \"../../design-system/stepper\";\n\nexport const stepperVariants = cva(zuiStepperBase, {\n  variants: {\n    orientation: zuiStepperOrientations,\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\nexport const stepperItemVariants = cva(zuiStepperItemBase, {\n  variants: {\n    orientation: zuiStepperItemOrientations,\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\nexport const stepperIndicatorVariants = cva(zuiStepperIndicatorBase, {\n  variants: {\n    appearance: zuiStepperIndicatorAppearances,\n    size: zuiStepperIndicatorSizes,\n  },\n  defaultVariants: {\n    appearance: \"upcoming\",\n    size: \"md\",\n  },\n});\n","\"use client\";\n\nimport {\n  Children,\n  createContext,\n  isValidElement,\n  useContext,\n  useMemo,\n} from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n  StepperCtx,\n  StepperDescriptionProps,\n  StepperIndicatorProps,\n  StepperItemProps,\n  StepperProps,\n  StepperTitleProps,\n} from \"./types\";\nimport {\n  stepperIndicatorVariants,\n  stepperItemVariants,\n  stepperVariants,\n} from \"./variants\";\n\nconst StepperContext = createContext<StepperCtx | null>(null);\n\nfunction useStepper(component: string): StepperCtx {\n  const ctx = useContext(StepperContext);\n  if (!ctx) {\n    throw new Error(`${component} must be used within <Stepper>`);\n  }\n  return ctx;\n}\n\nconst StepperIndexContext = createContext<number | null>(null);\n\nfunction useStepperIndex(component: string): number {\n  const index = useContext(StepperIndexContext);\n  if (index === null) {\n    throw new Error(`${component} must be used within <StepperItem>`);\n  }\n  return index;\n}\n\nexport function Stepper({\n  className,\n  orientation = \"horizontal\",\n  size = \"md\",\n  children,\n  ref,\n  ...rest\n}: StepperProps) {\n  const items = useMemo(\n    () => Children.toArray(children).filter(isValidElement),\n    [children],\n  );\n  const ctx = useMemo(\n    () => ({\n      orientation: orientation ?? \"horizontal\",\n      size: size ?? \"md\",\n      total: items.length,\n    }),\n    [items.length, orientation, size],\n  );\n\n  return (\n    <StepperContext.Provider value={ctx}>\n      <ol\n        ref={ref}\n        data-slot=\"stepper\"\n        className={cn(\n          stepperVariants({ orientation }),\n          \"m-0 list-none p-0\",\n          className,\n        )}\n        {...rest}\n      >\n        {items.map((child, index) => (\n          <StepperIndexContext.Provider key={index} value={index}>\n            {child}\n          </StepperIndexContext.Provider>\n        ))}\n      </ol>\n    </StepperContext.Provider>\n  );\n}\n\nStepper.displayName = \"Stepper\";\n\nexport function StepperItem({\n  className,\n  ref,\n  children,\n  ...rest\n}: StepperItemProps) {\n  const { orientation } = useStepper(\"StepperItem\");\n  return (\n    <li\n      ref={ref}\n      data-slot=\"stepper-item\"\n      className={cn(stepperItemVariants({ orientation }), className)}\n      {...rest}\n    >\n      {children}\n    </li>\n  );\n}\n\nStepperItem.displayName = \"StepperItem\";\n\nexport function StepperIndicator({\n  className,\n  ref,\n  children,\n  appearance,\n  ...rest\n}: StepperIndicatorProps & { ref?: React.Ref<HTMLDivElement> }) {\n  const { size } = useStepper(\"StepperIndicator\");\n  const index = useStepperIndex(\"StepperIndicator\");\n  return (\n    <div\n      ref={ref}\n      data-slot=\"stepper-indicator\"\n      className={cn(stepperIndicatorVariants({ appearance, size }), className)}\n      {...rest}\n    >\n      {children ?? index + 1}\n    </div>\n  );\n}\n\nStepperIndicator.displayName = \"StepperIndicator\";\n\nexport function StepperTitle({\n  className,\n  ref,\n  ...rest\n}: StepperTitleProps & { ref?: React.Ref<HTMLDivElement> }) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"stepper-title\"\n      className={cn(\n        \"text-sm font-semibold text-slate-900 dark:text-white\",\n        className,\n      )}\n      {...rest}\n    />\n  );\n}\n\nStepperTitle.displayName = \"StepperTitle\";\n\nexport function StepperDescription({\n  className,\n  ref,\n  ...rest\n}: StepperDescriptionProps & { ref?: React.Ref<HTMLParagraphElement> }) {\n  return (\n    <p\n      ref={ref}\n      data-slot=\"stepper-description\"\n      className={cn(\"text-xs text-slate-900 dark:text-slate-400\", className)}\n      {...rest}\n    />\n  );\n}\n\nStepperDescription.displayName = \"StepperDescription\";\n"]}

package/dist/ui/stepper.mjs

@@ -4,69 +4,76 @@ import { createContext, useMemo, Children, isValidElement, useContext } from 're
 import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 
-var stepperVariants = cva("flex w-full", {
+// src/design-system/stepper.ts
+var zuiStepperBase = "flex w-full";
+var zuiStepperOrientations = {
+  horizontal: "flex-row flex-wrap items-start gap-4",
+  vertical: "flex-col gap-6"
+};
+var zuiStepperItemBase = "relative flex gap-3";
+var zuiStepperItemOrientations = {
+  horizontal: "min-w-0 flex-col items-center text-center",
+  vertical: "flex-row items-center text-left"
+};
+var zuiStepperIndicatorBase = "grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors";
+var zuiStepperIndicatorAppearances = {
+  complete: "border-[color:var(--zui-stepper-indicator-complete-border,oklch(69.6%_0.17_162.48_/_0.6))] bg-[var(--zui-stepper-indicator-complete-bg,oklch(69.6%_0.17_162.48_/_0.2))] text-[color:var(--zui-stepper-indicator-complete-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-stepper-indicator-complete-fg-dark,oklch(95%_0.052_163.051))] ring-2 ring-[var(--zui-stepper-indicator-complete-ring,oklch(76.5%_0.177_163.223_/_0.3))]",
+  current: "border-[color:var(--zui-stepper-indicator-current-border,oklch(54.1%_0.281_293.009))] dark:border-[color:var(--zui-stepper-indicator-current-border-dark,oklch(70.2%_0.183_293.541))] bg-[var(--zui-stepper-indicator-current-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-stepper-indicator-current-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-stepper-indicator-current-fg-dark,#ffffff)] ring-2 ring-[var(--zui-stepper-indicator-current-ring,oklch(70.2%_0.183_293.541_/_0.5))]",
+  upcoming: "border-[color:var(--zui-stepper-indicator-upcoming-border,#00000026)] dark:border-[color:var(--zui-stepper-indicator-upcoming-border-dark,#ffffff26)] bg-[var(--zui-stepper-indicator-upcoming-bg,#0000000d)] dark:bg-[var(--zui-stepper-indicator-upcoming-bg-dark,#ffffff0d)] text-[color:var(--zui-stepper-indicator-upcoming-fg,oklch(55.4%_0.046_257.417))] dark:text-[color:var(--zui-stepper-indicator-upcoming-fg-dark,oklch(70.4%_0.04_256.788))]",
+  sky: "border-[color:var(--zui-stepper-indicator-sky-border,oklch(68.5%_0.169_237.323_/_0.6))] bg-[var(--zui-stepper-indicator-sky-bg,oklch(68.5%_0.169_237.323_/_0.2))] text-[color:var(--zui-stepper-indicator-sky-fg,oklch(39.1%_0.09_240.876))] dark:text-[color:var(--zui-stepper-indicator-sky-fg-dark,oklch(95.1%_0.026_236.824))] ring-2 ring-[var(--zui-stepper-indicator-sky-ring,oklch(74.6%_0.16_232.661_/_0.3))]",
+  rose: "border-[color:var(--zui-stepper-indicator-rose-border,oklch(64.5%_0.246_16.439_/_0.6))] bg-[var(--zui-stepper-indicator-rose-bg,oklch(64.5%_0.246_16.439_/_0.2))] text-[color:var(--zui-stepper-indicator-rose-fg,oklch(41%_0.159_10.272))] dark:text-[color:var(--zui-stepper-indicator-rose-fg-dark,oklch(94.1%_0.03_12.58))] ring-2 ring-[var(--zui-stepper-indicator-rose-ring,oklch(71.2%_0.194_13.428_/_0.3))]",
+  purple: "border-[color:var(--zui-stepper-indicator-purple-border,oklch(62.7%_0.265_303.9_/_0.6))] bg-[var(--zui-stepper-indicator-purple-bg,oklch(62.7%_0.265_303.9_/_0.2))] text-[color:var(--zui-stepper-indicator-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-stepper-indicator-purple-fg-dark,oklch(94.6%_0.033_307.174))] ring-2 ring-[var(--zui-stepper-indicator-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
+  pink: "border-[color:var(--zui-stepper-indicator-pink-border,oklch(65.6%_0.241_354.308_/_0.6))] bg-[var(--zui-stepper-indicator-pink-bg,oklch(65.6%_0.241_354.308_/_0.2))] text-[color:var(--zui-stepper-indicator-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-stepper-indicator-pink-fg-dark,oklch(94.8%_0.028_342.258))] ring-2 ring-[var(--zui-stepper-indicator-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
+  orange: "border-[color:var(--zui-stepper-indicator-orange-border,oklch(70.5%_0.213_47.604_/_0.6))] bg-[var(--zui-stepper-indicator-orange-bg,oklch(70.5%_0.213_47.604_/_0.2))] text-[color:var(--zui-stepper-indicator-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-stepper-indicator-orange-fg-dark,oklch(95.4%_0.038_75.164))] ring-2 ring-[var(--zui-stepper-indicator-orange-ring,oklch(75%_0.183_55.934_/_0.3))]",
+  yellow: "border-[color:var(--zui-stepper-indicator-yellow-border,oklch(79.5%_0.184_86.047_/_0.6))] bg-[var(--zui-stepper-indicator-yellow-bg,oklch(79.5%_0.184_86.047_/_0.2))] text-[color:var(--zui-stepper-indicator-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-stepper-indicator-yellow-fg-dark,oklch(97.3%_0.071_103.193))] ring-2 ring-[var(--zui-stepper-indicator-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
+  teal: "border-[color:var(--zui-stepper-indicator-teal-border,oklch(70.4%_0.14_182.503_/_0.6))] bg-[var(--zui-stepper-indicator-teal-bg,oklch(70.4%_0.14_182.503_/_0.2))] text-[color:var(--zui-stepper-indicator-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-stepper-indicator-teal-fg-dark,oklch(95.3%_0.051_180.801))] ring-2 ring-[var(--zui-stepper-indicator-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
+  indigo: "border-[color:var(--zui-stepper-indicator-indigo-border,oklch(58.5%_0.233_277.117_/_0.6))] bg-[var(--zui-stepper-indicator-indigo-bg,oklch(58.5%_0.233_277.117_/_0.2))] text-[color:var(--zui-stepper-indicator-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-stepper-indicator-indigo-fg-dark,oklch(93%_0.034_272.788))] ring-2 ring-[var(--zui-stepper-indicator-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
+  emerald: "border-[color:var(--zui-stepper-indicator-emerald-border,oklch(69.6%_0.17_162.48_/_0.6))] bg-[var(--zui-stepper-indicator-emerald-bg,oklch(69.6%_0.17_162.48_/_0.2))] text-[color:var(--zui-stepper-indicator-emerald-fg,oklch(37.8%_0.077_168.94))] dark:text-[color:var(--zui-stepper-indicator-emerald-fg-dark,oklch(95%_0.052_163.051))] ring-2 ring-[var(--zui-stepper-indicator-emerald-ring,oklch(76.5%_0.177_163.223_/_0.3))]",
+  gray: "border-[color:var(--zui-stepper-indicator-gray-border,oklch(55.1%_0.027_264.364_/_0.6))] bg-[var(--zui-stepper-indicator-gray-bg,oklch(55.1%_0.027_264.364_/_0.2))] text-[color:var(--zui-stepper-indicator-gray-fg,oklch(21%_0.034_264.665))] dark:text-[color:var(--zui-stepper-indicator-gray-fg-dark,oklch(96.7%_0.003_264.542))] ring-2 ring-[var(--zui-stepper-indicator-gray-ring,oklch(70.7%_0.022_261.325_/_0.3))]",
+  violet: "border-[color:var(--zui-stepper-indicator-violet-border,oklch(60.6%_0.25_292.717_/_0.6))] bg-[var(--zui-stepper-indicator-violet-bg,oklch(60.6%_0.25_292.717_/_0.2))] text-[color:var(--zui-stepper-indicator-violet-fg,oklch(38%_0.189_293.745))] dark:text-[color:var(--zui-stepper-indicator-violet-fg-dark,oklch(94.3%_0.029_294.588))] ring-2 ring-[var(--zui-stepper-indicator-violet-ring,oklch(70.2%_0.183_293.541_/_0.3))]",
+  "gradient-blue": "border-[color:var(--zui-stepper-indicator-gradient-blue-border,oklch(62.3%_0.214_259.815_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-blue-bg,oklch(62.3%_0.214_259.815_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-blue-fg,oklch(37.9%_0.146_265.522))] dark:text-[color:var(--zui-stepper-indicator-gradient-blue-fg-dark,oklch(93.2%_0.032_255.585))] ring-2 ring-[var(--zui-stepper-indicator-gradient-blue-ring,oklch(70.7%_0.165_254.624_/_0.3))]",
+  "gradient-green": "border-[color:var(--zui-stepper-indicator-gradient-green-border,oklch(72.3%_0.219_149.579_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-green-bg,oklch(72.3%_0.219_149.579_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-green-fg,oklch(39.3%_0.095_152.535))] dark:text-[color:var(--zui-stepper-indicator-gradient-green-fg-dark,oklch(96.2%_0.044_156.743))] ring-2 ring-[var(--zui-stepper-indicator-gradient-green-ring,oklch(79.2%_0.209_151.711_/_0.3))]",
+  "gradient-red": "border-[color:var(--zui-stepper-indicator-gradient-red-border,oklch(63.7%_0.237_25.331_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-red-bg,oklch(63.7%_0.237_25.331_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-red-fg,oklch(39.6%_0.141_25.723))] dark:text-[color:var(--zui-stepper-indicator-gradient-red-fg-dark,oklch(93.6%_0.032_17.717))] ring-2 ring-[var(--zui-stepper-indicator-gradient-red-ring,oklch(70.4%_0.191_22.216_/_0.3))]",
+  "gradient-yellow": "border-[color:var(--zui-stepper-indicator-gradient-yellow-border,oklch(79.5%_0.184_86.047_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-yellow-bg,oklch(79.5%_0.184_86.047_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-yellow-fg,oklch(42.1%_0.095_57.708))] dark:text-[color:var(--zui-stepper-indicator-gradient-yellow-fg-dark,oklch(97.3%_0.071_103.193))] ring-2 ring-[var(--zui-stepper-indicator-gradient-yellow-ring,oklch(85.2%_0.199_91.936_/_0.3))]",
+  "gradient-purple": "border-[color:var(--zui-stepper-indicator-gradient-purple-border,oklch(62.7%_0.265_303.9_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-purple-bg,oklch(62.7%_0.265_303.9_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-purple-fg,oklch(38.1%_0.176_304.987))] dark:text-[color:var(--zui-stepper-indicator-gradient-purple-fg-dark,oklch(94.6%_0.033_307.174))] ring-2 ring-[var(--zui-stepper-indicator-gradient-purple-ring,oklch(71.4%_0.203_305.504_/_0.3))]",
+  "gradient-teal": "border-[color:var(--zui-stepper-indicator-gradient-teal-border,oklch(70.4%_0.14_182.503_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-teal-bg,oklch(70.4%_0.14_182.503_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-teal-fg,oklch(38.6%_0.063_188.416))] dark:text-[color:var(--zui-stepper-indicator-gradient-teal-fg-dark,oklch(95.3%_0.051_180.801))] ring-2 ring-[var(--zui-stepper-indicator-gradient-teal-ring,oklch(77.7%_0.152_181.912_/_0.3))]",
+  "gradient-indigo": "border-[color:var(--zui-stepper-indicator-gradient-indigo-border,oklch(58.5%_0.233_277.117_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-indigo-bg,oklch(58.5%_0.233_277.117_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-indigo-fg,oklch(35.9%_0.144_278.697))] dark:text-[color:var(--zui-stepper-indicator-gradient-indigo-fg-dark,oklch(93%_0.034_272.788))] ring-2 ring-[var(--zui-stepper-indicator-gradient-indigo-ring,oklch(67.3%_0.182_276.935_/_0.3))]",
+  "gradient-pink": "border-[color:var(--zui-stepper-indicator-gradient-pink-border,oklch(65.6%_0.241_354.308_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-pink-bg,oklch(65.6%_0.241_354.308_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-pink-fg,oklch(40.8%_0.153_2.432))] dark:text-[color:var(--zui-stepper-indicator-gradient-pink-fg-dark,oklch(94.8%_0.028_342.258))] ring-2 ring-[var(--zui-stepper-indicator-gradient-pink-ring,oklch(71.8%_0.202_349.761_/_0.3))]",
+  "gradient-orange": "border-[color:var(--zui-stepper-indicator-gradient-orange-border,oklch(70.5%_0.213_47.604_/_0.6))] bg-[var(--zui-stepper-indicator-gradient-orange-bg,oklch(70.5%_0.213_47.604_/_0.2))] text-[color:var(--zui-stepper-indicator-gradient-orange-fg,oklch(40.8%_0.123_38.172))] dark:text-[color:var(--zui-stepper-indicator-gradient-orange-fg-dark,oklch(95.4%_0.038_75.164))] ring-2 ring-[var(--zui-stepper-indicator-gradient-orange-ring,oklch(75%_0.183_55.934_/_0.3))]"
+};
+var zuiStepperIndicatorSizes = {
+  sm: "size-8 text-xs",
+  md: "size-9 text-sm",
+  lg: "size-10 text-base"
+};
+
+// src/ui/stepper/variants.ts
+var stepperVariants = cva(zuiStepperBase, {
   variants: {
-    orientation: {
-      horizontal: "flex-row flex-wrap items-start gap-4",
-      vertical: "flex-col gap-6"
-    }
+    orientation: zuiStepperOrientations
   },
   defaultVariants: {
     orientation: "horizontal"
   }
 });
-var stepperItemVariants = cva("relative flex gap-3", {
+var stepperItemVariants = cva(zuiStepperItemBase, {
   variants: {
-    orientation: {
-      horizontal: "min-w-0 flex-col items-center text-center",
-      vertical: "flex-row items-center text-left"
-    }
+    orientation: zuiStepperItemOrientations
   },
   defaultVariants: {
     orientation: "horizontal"
   }
 });
-var stepperIndicatorVariants = cva(
-  "grid size-9 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors",
-  {
-    variants: {
-      appearance: {
-        complete: "border-emerald-500/60 bg-emerald-500/20 text-emerald-900 dark:text-emerald-100 ring-2 ring-emerald-400/30",
-        current: "border-violet-600 dark:border-violet-400 bg-violet-500/20 text-slate-900 dark:text-white ring-2 ring-violet-400/50",
-        upcoming: "border-black/15 dark:border-white/15 bg-black/5 dark:bg-white/5 text-slate-500 dark:text-slate-400",
-        sky: "border-sky-500/60 bg-sky-500/20 text-sky-900 dark:text-sky-100 ring-2 ring-sky-400/30",
-        rose: "border-rose-500/60 bg-rose-500/20 text-rose-900 dark:text-rose-100 ring-2 ring-rose-400/30",
-        purple: "border-purple-500/60 bg-purple-500/20 text-purple-900 dark:text-purple-100 ring-2 ring-purple-400/30",
-        pink: "border-pink-500/60 bg-pink-500/20 text-pink-900 dark:text-pink-100 ring-2 ring-pink-400/30",
-        orange: "border-orange-500/60 bg-orange-500/20 text-orange-900 dark:text-orange-100 ring-2 ring-orange-400/30",
-        yellow: "border-yellow-500/60 bg-yellow-500/20 text-yellow-900 dark:text-yellow-100 ring-2 ring-yellow-400/30",
-        teal: "border-teal-500/60 bg-teal-500/20 text-teal-900 dark:text-teal-100 ring-2 ring-teal-400/30",
-        indigo: "border-indigo-500/60 bg-indigo-500/20 text-indigo-900 dark:text-indigo-100 ring-2 ring-indigo-400/30",
-        emerald: "border-emerald-500/60 bg-emerald-500/20 text-emerald-900 dark:text-emerald-100 ring-2 ring-emerald-400/30",
-        gray: "border-gray-500/60 bg-gray-500/20 text-gray-900 dark:text-gray-100 ring-2 ring-gray-400/30",
-        violet: "border-violet-500/60 bg-violet-500/20 text-violet-900 dark:text-violet-100 ring-2 ring-violet-400/30",
-        "gradient-blue": "border-blue-500/60 bg-blue-500/20 text-blue-900 dark:text-blue-100 ring-2 ring-blue-400/30",
-        "gradient-green": "border-green-500/60 bg-green-500/20 text-green-900 dark:text-green-100 ring-2 ring-green-400/30",
-        "gradient-red": "border-red-500/60 bg-red-500/20 text-red-900 dark:text-red-100 ring-2 ring-red-400/30",
-        "gradient-yellow": "border-yellow-500/60 bg-yellow-500/20 text-yellow-900 dark:text-yellow-100 ring-2 ring-yellow-400/30",
-        "gradient-purple": "border-purple-500/60 bg-purple-500/20 text-purple-900 dark:text-purple-100 ring-2 ring-purple-400/30",
-        "gradient-teal": "border-teal-500/60 bg-teal-500/20 text-teal-900 dark:text-teal-100 ring-2 ring-teal-400/30",
-        "gradient-indigo": "border-indigo-500/60 bg-indigo-500/20 text-indigo-900 dark:text-indigo-100 ring-2 ring-indigo-400/30",
-        "gradient-pink": "border-pink-500/60 bg-pink-500/20 text-pink-900 dark:text-pink-100 ring-2 ring-pink-400/30",
-        "gradient-orange": "border-orange-500/60 bg-orange-500/20 text-orange-900 dark:text-orange-100 ring-2 ring-orange-400/30"
-      },
-      size: {
-        sm: "size-8 text-xs",
-        md: "size-9 text-sm",
-        lg: "size-10 text-base"
-      }
-    },
-    defaultVariants: {
-      appearance: "upcoming",
-      size: "md"
-    }
+var stepperIndicatorVariants = cva(zuiStepperIndicatorBase, {
+  variants: {
+    appearance: zuiStepperIndicatorAppearances,
+    size: zuiStepperIndicatorSizes
+  },
+  defaultVariants: {
+    appearance: "upcoming",
+    size: "md"
   }
-);
+});
 var StepperContext = createContext(null);
 function useStepper(component) {
   const ctx = useContext(StepperContext);