@mdigital_ui/ui 0.4.2 → 0.4.4

package/dist/{chunk-FZSCLZF6.js → chunk-3D77IPKB.js}

@@ -1,4 +1,5 @@
-import { cn } from './chunk-NGYLRX6F.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { cn } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
 import React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -71,7 +72,7 @@ var connectorVariants = cva("bg-border", {
     size: "md"
   }
 });
-var getStepCircleClasses = (color, variant, state) => {
+var getStepCircleClasses = (variant, state) => {
   const isError = state === "error";
   const isWait = state === "wait";
   if (isError) {
@@ -83,107 +84,27 @@ var getStepCircleClasses = (color, variant, state) => {
   }
   if (isWait) {
     if (variant === "solid") {
-      const solidWaitClasses = {
-        default: "bg-border/50 text-text-secondary",
-        primary: "bg-primary/30 text-primary-foreground/50",
-        secondary: "bg-secondary/30 text-secondary-foreground/50",
-        accent: "bg-accent/30 text-accent-foreground/50",
-        success: "bg-success/30 text-success-foreground/50",
-        error: "bg-error/30 text-error-foreground/50",
-        warning: "bg-warning/30 text-warning-foreground/50",
-        info: "bg-info/30 text-info-foreground/50"
-      };
-      return solidWaitClasses[color];
+      return "bg-slot-20 text-slot-fg opacity-50 border-2 border-slot-20";
     }
     if (variant === "soft") {
-      const softWaitClasses = {
-        default: "bg-surface/30 border-2 border-border/30 text-text-secondary",
-        primary: "bg-primary/5 border-2 border-primary/20 text-text-secondary",
-        secondary: "bg-secondary/5 border-2 border-secondary/20 text-text-secondary",
-        accent: "bg-accent/5 border-2 border-accent/20 text-text-secondary",
-        success: "bg-success/5 border-2 border-success/20 text-text-secondary",
-        error: "bg-error/5 border-2 border-error/20 text-text-secondary",
-        warning: "bg-warning/5 border-2 border-warning/20 text-text-secondary",
-        info: "bg-info/5 border-2 border-info/20 text-text-secondary"
-      };
-      return softWaitClasses[color];
+      return "bg-slot-10 border-2 border-slot-20 text-text-secondary";
     }
-    const defaultWaitClasses = {
-      default: "bg-surface border-2 border-border/50 text-text-secondary",
-      primary: "bg-primary/5 border-2 border-primary/30 text-text-secondary",
-      secondary: "bg-secondary/5 border-2 border-secondary/30 text-text-secondary",
-      accent: "bg-accent/5 border-2 border-accent/30 text-text-secondary",
-      success: "bg-success/5 border-2 border-success/30 text-text-secondary",
-      error: "bg-error/5 border-2 border-error/30 text-text-secondary",
-      warning: "bg-warning/5 border-2 border-warning/30 text-text-secondary",
-      info: "bg-info/5 border-2 border-info/30 text-text-secondary"
-    };
-    return defaultWaitClasses[color];
+    return "bg-slot-10 border-2 border-slot-20 text-text-secondary";
   }
   if (variant === "solid") {
-    const solidActiveClasses = {
-      default: "bg-border text-text-primary border-2 border-border",
-      primary: "bg-primary text-primary-foreground border-2 border-primary",
-      secondary: "bg-secondary text-secondary-foreground border-2 border-secondary",
-      accent: "bg-accent text-accent-foreground border-2 border-accent",
-      success: "bg-success text-success-foreground border-2 border-success",
-      error: "bg-error text-error-foreground border-2 border-error",
-      warning: "bg-warning text-warning-foreground border-2 border-warning",
-      info: "bg-info text-info-foreground border-2 border-info"
-    };
-    return solidActiveClasses[color];
+    return "bg-slot text-slot-fg border-2 border-slot";
   }
   if (variant === "soft") {
-    const softActiveClasses = {
-      default: "bg-surface/50 border-2 border-border text-text-primary",
-      primary: "bg-primary/10 border-2 border-primary/50 text-primary",
-      secondary: "bg-secondary/10 border-2 border-secondary/50 text-secondary",
-      accent: "bg-accent/10 border-2 border-accent/50 text-accent",
-      success: "bg-success/10 border-2 border-success/50 text-success",
-      error: "bg-error/10 border-2 border-error/50 text-error",
-      warning: "bg-warning/10 border-2 border-warning/50 text-warning",
-      info: "bg-info/10 border-2 border-info/50 text-info"
-    };
-    return softActiveClasses[color];
+    return "bg-slot-10 border-2 border-slot-50 text-slot";
   }
-  const defaultActiveClasses = {
-    default: "bg-surface border-2 border-border text-text-primary",
-    primary: "bg-primary/20 border-2 border-primary text-primary",
-    secondary: "bg-secondary/20 border-2 border-secondary text-secondary",
-    accent: "bg-accent/20 border-2 border-accent text-accent",
-    success: "bg-success/20 border-2 border-success text-success",
-    error: "bg-error/20 border-2 border-error text-error",
-    warning: "bg-warning/20 border-2 border-warning text-warning",
-    info: "bg-info/20 border-2 border-info text-info"
-  };
-  return defaultActiveClasses[color];
+  return "bg-slot-20 border-2 border-slot text-slot";
 };
-var getConnectorClasses = (color, variant, isFinished) => {
+var getConnectorClasses = (variant, isFinished) => {
   if (!isFinished) return "bg-border/50";
   if (variant === "soft") {
-    const softConnectorClasses = {
-      default: "bg-border/50",
-      primary: "bg-primary/50",
-      secondary: "bg-secondary/50",
-      accent: "bg-accent/50",
-      success: "bg-success/50",
-      error: "bg-error/50",
-      warning: "bg-warning/50",
-      info: "bg-info/50"
-    };
-    return softConnectorClasses[color];
+    return "bg-slot-50";
   }
-  const connectorClasses = {
-    default: "bg-border",
-    primary: "bg-primary",
-    secondary: "bg-secondary",
-    accent: "bg-accent",
-    success: "bg-success",
-    error: "bg-error",
-    warning: "bg-warning",
-    info: "bg-info"
-  };
-  return connectorClasses[color];
+  return "bg-slot";
 };
 var Stepper = React.memo(
   ({
@@ -214,9 +135,12 @@ var Stepper = React.memo(
       return /* @__PURE__ */ jsx(
         "div",
         {
+          "data-slot": "root",
+          role: "list",
           className: cn(
             "stepper_root",
             "flex flex-col",
+            colorVars[color],
             classNames?.root,
             className
           ),
@@ -226,6 +150,8 @@ var Stepper = React.memo(
             return /* @__PURE__ */ jsxs(
               "div",
               {
+                role: "listitem",
+                "aria-label": `Step ${index + 1} of ${steps.length}`,
                 className: cn(
                   "stepper_step",
                   "flex",
@@ -233,15 +159,26 @@ var Stepper = React.memo(
                   state === "finish" && classNames?.stepCompleted,
                   classNames?.step
                 ),
+                ...index === currentStep && { "aria-current": "step" },
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center mr-4", children: [
                     /* @__PURE__ */ jsx(
                       "div",
                       {
+                        ...isClickable && {
+                          role: "button",
+                          tabIndex: 0,
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              handleStepClick(index, step.disabled);
+                            }
+                          }
+                        },
                         className: cn(
                           "stepper_icon",
                           stepCircleVariants({ size }),
-                          getStepCircleClasses(color, variant, state),
+                          getStepCircleClasses(variant, state),
                           isClickable && "cursor-pointer hover:scale-105 transition-transform duration-150",
                           step.disabled && "opacity-50 cursor-not-allowed",
                           classNames?.icon
@@ -256,7 +193,7 @@ var Stepper = React.memo(
                         className: cn(
                           "stepper_connector",
                           "w-0.5 flex-1 my-2",
-                          getConnectorClasses(color, variant, state === "finish"),
+                          getConnectorClasses(variant, state === "finish"),
                           classNames?.connector
                         )
                       }
@@ -307,9 +244,11 @@ var Stepper = React.memo(
       return /* @__PURE__ */ jsx(
         "div",
         {
+          role: "list",
           className: cn(
             "stepper_root",
             "flex items-start",
+            colorVars[color],
             classNames?.root,
             className
           ),
@@ -321,6 +260,8 @@ var Stepper = React.memo(
             return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(
               "div",
               {
+                role: "listitem",
+                "aria-label": `Step ${index + 1} of ${steps.length}`,
                 className: cn(
                   "stepper_step",
                   "flex flex-col items-center flex-1",
@@ -330,6 +271,7 @@ var Stepper = React.memo(
                   state === "finish" && classNames?.stepCompleted,
                   classNames?.step
                 ),
+                ...index === currentStep && { "aria-current": "step" },
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
                     index > 0 && /* @__PURE__ */ jsx(
@@ -339,11 +281,7 @@ var Stepper = React.memo(
                           "stepper_connector",
                           "flex-1",
                           connectorVariants({ size }),
-                          getConnectorClasses(
-                            color,
-                            variant,
-                            prevState === "finish"
-                          ),
+                          getConnectorClasses(variant, prevState === "finish"),
                           classNames?.connector
                         )
                       }
@@ -351,10 +289,20 @@ var Stepper = React.memo(
                     /* @__PURE__ */ jsx(
                       "div",
                       {
+                        ...isClickable && {
+                          role: "button",
+                          tabIndex: 0,
+                          onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              handleStepClick(index, step.disabled);
+                            }
+                          }
+                        },
                         className: cn(
                           "stepper_icon",
                           stepDotVariants({ size }),
-                          getStepCircleClasses(color, variant, state),
+                          getStepCircleClasses(variant, state),
                           isClickable && "cursor-pointer hover:scale-105 transition-transform duration-150",
                           step.disabled && "opacity-50 cursor-not-allowed",
                           "flex-shrink-0",
@@ -370,11 +318,7 @@ var Stepper = React.memo(
                           "stepper_connector",
                           "flex-1",
                           connectorVariants({ size }),
-                          getConnectorClasses(
-                            color,
-                            variant,
-                            state === "finish"
-                          ),
+                          getConnectorClasses(variant, state === "finish"),
                           classNames?.connector
                         )
                       }
@@ -428,9 +372,11 @@ var Stepper = React.memo(
     return /* @__PURE__ */ jsx(
       "div",
       {
+        role: "list",
         className: cn(
           "stepper_root",
           "flex items-start",
+          colorVars[color],
           classNames?.root,
           className
         ),
@@ -442,6 +388,8 @@ var Stepper = React.memo(
           return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(
             "div",
             {
+              role: "listitem",
+              "aria-label": `Step ${index + 1} of ${steps.length}`,
               className: cn(
                 "stepper_step",
                 "flex flex-col items-center flex-1",
@@ -451,6 +399,7 @@ var Stepper = React.memo(
                 state === "finish" && classNames?.stepCompleted,
                 classNames?.step
               ),
+              ...index === currentStep && { "aria-current": "step" },
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
                   index > 0 && /* @__PURE__ */ jsx(
@@ -460,11 +409,7 @@ var Stepper = React.memo(
                         "stepper_connector",
                         "flex-1",
                         connectorVariants({ size }),
-                        getConnectorClasses(
-                          color,
-                          variant,
-                          prevState === "finish"
-                        ),
+                        getConnectorClasses(variant, prevState === "finish"),
                         classNames?.connector
                       )
                     }
@@ -472,10 +417,20 @@ var Stepper = React.memo(
                   /* @__PURE__ */ jsx(
                     "div",
                     {
+                      ...isClickable && {
+                        role: "button",
+                        tabIndex: 0,
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            handleStepClick(index, step.disabled);
+                          }
+                        }
+                      },
                       className: cn(
                         "stepper_icon",
                         stepCircleVariants({ size }),
-                        getStepCircleClasses(color, variant, state),
+                        getStepCircleClasses(variant, state),
                         isClickable && "cursor-pointer hover:scale-105 transition-transform duration-150",
                         step.disabled && "opacity-50 cursor-not-allowed",
                         "flex-shrink-0",
@@ -492,7 +447,7 @@ var Stepper = React.memo(
                         "stepper_connector",
                         "flex-1",
                         connectorVariants({ size }),
-                        getConnectorClasses(color, variant, state === "finish"),
+                        getConnectorClasses(variant, state === "finish"),
                         classNames?.connector
                       )
                     }
@@ -548,5 +503,5 @@ Stepper.displayName = "Stepper";
 var stepper_default = Stepper;
 
 export { stepper_default };
-//# sourceMappingURL=chunk-FZSCLZF6.js.map
-//# sourceMappingURL=chunk-FZSCLZF6.js.map
+//# sourceMappingURL=chunk-3D77IPKB.js.map
+//# sourceMappingURL=chunk-3D77IPKB.js.map

package/dist/chunk-3D77IPKB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/stepper/index.tsx"],"names":[],"mappings":"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","file":"chunk-3D77IPKB.js","sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport React from \"react\";\n\nimport { cn } from \"../utils\";\nimport { colorVars } from \"../variants\";\nimport type { StepItem, StepperProps, StepperVariant } from \"./types\";\n\nconst stepCircleVariants = cva(\n  \"rounded-full flex items-center justify-center font-medium transition-[colors,transform]\",\n  {\n    variants: {\n      size: {\n        xs: \"w-6 h-6 text-xs\",\n        sm: \"w-8 h-8 text-sm\",\n        md: \"w-10 h-10 text-base\",\n        lg: \"w-12 h-12 text-lg\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  },\n);\n\nconst stepDotVariants = cva(\"rounded-full transition-[colors,transform]\", {\n  variants: {\n    size: {\n      xs: \"w-2 h-2\",\n      sm: \"w-3 h-3\",\n      md: \"w-4 h-4\",\n      lg: \"w-5 h-5\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst stepLabelVariants = cva(\"font-medium\", {\n  variants: {\n    size: {\n      xs: \"text-xs\",\n      sm: \"text-sm\",\n      md: \"text-base\",\n      lg: \"text-lg\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst stepDescriptionVariants = cva(\"text-text-secondary\", {\n  variants: {\n    size: {\n      xs: \"text-xs\",\n      sm: \"text-xs\",\n      md: \"text-sm\",\n      lg: \"text-sm\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst connectorVariants = cva(\"bg-border\", {\n  variants: {\n    size: {\n      xs: \"h-0.5\",\n      sm: \"h-0.5\",\n      md: \"h-1\",\n      lg: \"h-1\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst getStepCircleClasses = (\n  variant: StepperVariant,\n  state: \"wait\" | \"process\" | \"finish\" | \"error\",\n) => {\n  const isError = state === \"error\";\n  const isWait = state === \"wait\";\n\n  if (isError) {\n    if (variant === \"solid\")\n      return \"bg-error text-error-foreground border-2 border-error\";\n    if (variant === \"soft\")\n      return \"bg-error/10 border-2 border-error/50 text-error\";\n    return \"bg-error/20 border-2 border-error text-error\";\n  }\n\n  if (isWait) {\n    if (variant === \"solid\") {\n      return \"bg-slot-20 text-slot-fg opacity-50 border-2 border-slot-20\";\n    }\n    if (variant === \"soft\") {\n      return \"bg-slot-10 border-2 border-slot-20 text-text-secondary\";\n    }\n    return \"bg-slot-10 border-2 border-slot-20 text-text-secondary\";\n  }\n\n  // process or finish states\n  if (variant === \"solid\") {\n    return \"bg-slot text-slot-fg border-2 border-slot\";\n  }\n  if (variant === \"soft\") {\n    return \"bg-slot-10 border-2 border-slot-50 text-slot\";\n  }\n  return \"bg-slot-20 border-2 border-slot text-slot\";\n};\n\nconst getConnectorClasses = (variant: StepperVariant, isFinished: boolean) => {\n  if (!isFinished) return \"bg-border/50\";\n\n  if (variant === \"soft\") {\n    return \"bg-slot-50\";\n  }\n  return \"bg-slot\";\n};\n\nconst Stepper = React.memo<StepperProps>(\n  ({\n    steps,\n    currentStep,\n    color = \"primary\",\n    size = \"md\",\n    variant = \"default\",\n    orientation = \"horizontal\",\n    type = \"numbered\",\n    status,\n    onStepClick,\n    className,\n    classNames,\n  }) => {\n    const getStepState = (\n      index: number,\n      step: StepItem,\n    ): \"wait\" | \"process\" | \"finish\" | \"error\" => {\n      if (step.status) return step.status;\n      if (index === currentStep && status === \"error\") return \"error\";\n      if (index < currentStep) return \"finish\";\n      if (index === currentStep) return status || \"process\";\n      return \"wait\";\n    };\n\n    const handleStepClick = (index: number, disabled?: boolean) => {\n      if (disabled) return;\n      onStepClick?.(index);\n    };\n\n    if (orientation === \"vertical\") {\n      return (\n        <div\n          data-slot=\"root\"\n          role=\"list\"\n          className={cn(\n            \"stepper_root\",\n            \"flex flex-col\",\n            colorVars[color],\n            classNames?.root,\n            className,\n          )}\n        >\n          {steps.map((step, index) => {\n            const state = getStepState(index, step);\n            const isClickable = !step.disabled && onStepClick;\n\n            return (\n              <div\n                key={index}\n                role=\"listitem\"\n                aria-label={`Step ${index + 1} of ${steps.length}`}\n                className={cn(\n                  \"stepper_step\",\n                  \"flex\",\n                  state === \"process\" && classNames?.stepActive,\n                  state === \"finish\" && classNames?.stepCompleted,\n                  classNames?.step,\n                )}\n                {...(index === currentStep && { \"aria-current\": \"step\" })}\n              >\n                <div className=\"flex flex-col items-center mr-4\">\n                  <div\n                    {...(isClickable && {\n                      role: \"button\",\n                      tabIndex: 0,\n                      onKeyDown: (e) => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                          e.preventDefault();\n                          handleStepClick(index, step.disabled);\n                        }\n                      },\n                    })}\n                    className={cn(\n                      \"stepper_icon\",\n                      stepCircleVariants({ size }),\n                      getStepCircleClasses(variant, state),\n                      isClickable &&\n                        \"cursor-pointer hover:scale-105 transition-transform duration-150\",\n                      step.disabled && \"opacity-50 cursor-not-allowed\",\n                      classNames?.icon,\n                    )}\n                    onClick={() => handleStepClick(index, step.disabled)}\n                  >\n                    {step.icon || index + 1}\n                  </div>\n                  {index < steps.length - 1 && (\n                    <div\n                      className={cn(\n                        \"stepper_connector\",\n                        \"w-0.5 flex-1 my-2\",\n                        getConnectorClasses(variant, state === \"finish\"),\n                        classNames?.connector,\n                      )}\n                    />\n                  )}\n                </div>\n                <div\n                  className={cn(\"pb-8\", index === steps.length - 1 && \"pb-0\")}\n                >\n                  <div\n                    className={cn(\n                      \"stepper_label\",\n                      stepLabelVariants({ size }),\n                      state === \"wait\"\n                        ? \"text-text-secondary\"\n                        : \"text-text-primary\",\n                      state === \"error\" && \"text-error\",\n                      classNames?.label,\n                    )}\n                  >\n                    {step.label}\n                  </div>\n                  {step.description && (\n                    <div\n                      className={cn(\n                        \"stepper_description\",\n                        stepDescriptionVariants({ size }),\n                        \"mt-1\",\n                        classNames?.description,\n                      )}\n                    >\n                      {step.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      );\n    }\n\n    if (type === \"dots\") {\n      return (\n        <div\n          role=\"list\"\n          className={cn(\n            \"stepper_root\",\n            \"flex items-start\",\n            colorVars[color],\n            classNames?.root,\n            className,\n          )}\n        >\n          {steps.map((step, index) => {\n            const state = getStepState(index, step);\n            const isClickable = !step.disabled && onStepClick;\n            const prevStep = steps[index - 1];\n            const prevState =\n              index > 0 && prevStep\n                ? getStepState(index - 1, prevStep)\n                : \"wait\";\n\n            return (\n              <React.Fragment key={index}>\n                <div\n                  role=\"listitem\"\n                  aria-label={`Step ${index + 1} of ${steps.length}`}\n                  className={cn(\n                    \"stepper_step\",\n                    \"flex flex-col items-center flex-1\",\n                    index === 0 && \"items-start\",\n                    index === steps.length - 1 && \"items-end\",\n                    state === \"process\" && classNames?.stepActive,\n                    state === \"finish\" && classNames?.stepCompleted,\n                    classNames?.step,\n                  )}\n                  {...(index === currentStep && { \"aria-current\": \"step\" })}\n                >\n                  <div className=\"flex items-center w-full\">\n                    {index > 0 && (\n                      <div\n                        className={cn(\n                          \"stepper_connector\",\n                          \"flex-1\",\n                          connectorVariants({ size }),\n                          getConnectorClasses(variant, prevState === \"finish\"),\n                          classNames?.connector,\n                        )}\n                      />\n                    )}\n                    <div\n                      {...(isClickable && {\n                        role: \"button\",\n                        tabIndex: 0,\n                        onKeyDown: (e) => {\n                          if (e.key === \"Enter\" || e.key === \" \") {\n                            e.preventDefault();\n                            handleStepClick(index, step.disabled);\n                          }\n                        },\n                      })}\n                      className={cn(\n                        \"stepper_icon\",\n                        stepDotVariants({ size }),\n                        getStepCircleClasses(variant, state),\n                        isClickable &&\n                          \"cursor-pointer hover:scale-105 transition-transform duration-150\",\n                        step.disabled && \"opacity-50 cursor-not-allowed\",\n                        \"flex-shrink-0\",\n                        classNames?.icon,\n                      )}\n                      onClick={() => handleStepClick(index, step.disabled)}\n                    />\n                    {index < steps.length - 1 && (\n                      <div\n                        className={cn(\n                          \"stepper_connector\",\n                          \"flex-1\",\n                          connectorVariants({ size }),\n                          getConnectorClasses(variant, state === \"finish\"),\n                          classNames?.connector,\n                        )}\n                      />\n                    )}\n                  </div>\n                  <div\n                    className={cn(\n                      \"mt-2 px-2\",\n                      index === 0 && \"text-left\",\n                      index === steps.length - 1 && \"text-right\",\n                      index > 0 && index < steps.length - 1 && \"text-center\",\n                    )}\n                  >\n                    <div\n                      className={cn(\n                        \"stepper_label\",\n                        stepLabelVariants({ size }),\n                        state === \"wait\"\n                          ? \"text-text-secondary\"\n                          : \"text-text-primary\",\n                        state === \"error\" && \"text-error\",\n                        classNames?.label,\n                      )}\n                    >\n                      {step.label}\n                    </div>\n                    {step.description && (\n                      <div\n                        className={cn(\n                          \"stepper_description\",\n                          stepDescriptionVariants({ size }),\n                          \"mt-1\",\n                          classNames?.description,\n                        )}\n                      >\n                        {step.description}\n                      </div>\n                    )}\n                  </div>\n                </div>\n              </React.Fragment>\n            );\n          })}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        role=\"list\"\n        className={cn(\n          \"stepper_root\",\n          \"flex items-start\",\n          colorVars[color],\n          classNames?.root,\n          className,\n        )}\n      >\n        {steps.map((step, index) => {\n          const state = getStepState(index, step);\n          const isClickable = !step.disabled && onStepClick;\n          const prevStep = steps[index - 1];\n          const prevState =\n            index > 0 && prevStep ? getStepState(index - 1, prevStep) : \"wait\";\n\n          return (\n            <React.Fragment key={index}>\n              <div\n                role=\"listitem\"\n                aria-label={`Step ${index + 1} of ${steps.length}`}\n                className={cn(\n                  \"stepper_step\",\n                  \"flex flex-col items-center flex-1\",\n                  index === 0 && \"items-start\",\n                  index === steps.length - 1 && \"items-end\",\n                  state === \"process\" && classNames?.stepActive,\n                  state === \"finish\" && classNames?.stepCompleted,\n                  classNames?.step,\n                )}\n                {...(index === currentStep && { \"aria-current\": \"step\" })}\n              >\n                <div className=\"flex items-center w-full\">\n                  {index > 0 && (\n                    <div\n                      className={cn(\n                        \"stepper_connector\",\n                        \"flex-1\",\n                        connectorVariants({ size }),\n                        getConnectorClasses(variant, prevState === \"finish\"),\n                        classNames?.connector,\n                      )}\n                    />\n                  )}\n                  <div\n                    {...(isClickable && {\n                      role: \"button\",\n                      tabIndex: 0,\n                      onKeyDown: (e) => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                          e.preventDefault();\n                          handleStepClick(index, step.disabled);\n                        }\n                      },\n                    })}\n                    className={cn(\n                      \"stepper_icon\",\n                      stepCircleVariants({ size }),\n                      getStepCircleClasses(variant, state),\n                      isClickable &&\n                        \"cursor-pointer hover:scale-105 transition-transform duration-150\",\n                      step.disabled && \"opacity-50 cursor-not-allowed\",\n                      \"flex-shrink-0\",\n                      classNames?.icon,\n                    )}\n                    onClick={() => handleStepClick(index, step.disabled)}\n                  >\n                    {step.icon || index + 1}\n                  </div>\n                  {index < steps.length - 1 && (\n                    <div\n                      className={cn(\n                        \"stepper_connector\",\n                        \"flex-1\",\n                        connectorVariants({ size }),\n                        getConnectorClasses(variant, state === \"finish\"),\n                        classNames?.connector,\n                      )}\n                    />\n                  )}\n                </div>\n                <div\n                  className={cn(\n                    \"mt-2 px-2\",\n                    index === 0 && \"text-left\",\n                    index === steps.length - 1 && \"text-right\",\n                    index > 0 && index < steps.length - 1 && \"text-center\",\n                  )}\n                >\n                  <div\n                    className={cn(\n                      \"stepper_label\",\n                      stepLabelVariants({ size }),\n                      state === \"wait\"\n                        ? \"text-text-secondary\"\n                        : \"text-text-primary\",\n                      state === \"error\" && \"text-error\",\n                      classNames?.label,\n                    )}\n                  >\n                    {step.label}\n                  </div>\n                  {step.description && (\n                    <div\n                      className={cn(\n                        \"stepper_description\",\n                        stepDescriptionVariants({ size }),\n                        \"mt-1\",\n                        classNames?.description,\n                      )}\n                    >\n                      {step.description}\n                    </div>\n                  )}\n                </div>\n              </div>\n            </React.Fragment>\n          );\n        })}\n      </div>\n    );\n  },\n);\n\nStepper.displayName = \"Stepper\";\n\nexport type * from \"./types\";\nexport default Stepper;\n"]}