nectiasw 0.0.76 → 0.0.77

package/dist/components/Stepper/styles.d.ts

@@ -6,5 +6,10 @@ export declare const classes: {
     label: string;
     button: {
         index: string;
+        root: string;
+        selected: string;
+        disabled: string;
+        normal: string;
+        position: string;
     };
 };

package/dist/index.es.js

@@ -61058,11 +61058,16 @@ const Dragarea = React__default.memo(
 const classes = {
   container: "flex items-center w-[562px] text-xs text-gray-900 font-medium sm:text-base",
   lastItem: "flex w-full relative text-gray-900",
-  stepItem: " flex w-full relative text-gray-900 after:content-[''] after:w-full after:h-[6px] after:bg-primary after:inline-block after:absolute lg:after:top-6 after:top-3 after:left-4",
-  stepItemDisabled: "flex w-full relative   after:w-full after:h-[6px] after:bg-primary/30 after:inline-block after:absolute lg:after:top-6 after:top-3 after:left-4",
+  stepItem: "flex w-full relative text-gray-900 after:content-[''] after:w-full after:h-[6px] after:bg-primary after:inline-block after:absolute lg:after:top-6 after:top-3 after:left-4",
+  stepItemDisabled: "flex w-full relative after:w-full after:h-[6px] after:bg-primary/30 after:inline-block after:absolute lg:after:top-6 after:top-3 after:left-4",
   label: "absolute right-8 w-[107px] h-[38px] text-center",
   button: {
-    index: "block z-10"
+    index: "block z-10",
+    root: "size-14 text-primary rounded-full flex justify-center items-center mx-auto mb-3 text-sm",
+    selected: "bg-white border-4 border-primary",
+    disabled: "bg-opaque border-4 border-primary/20 text-white/70 hover:bg-white hover:border-primary hover:text-primary pointer-events-none",
+    normal: "bg-primary border-4 border-transparent text-white hover:bg-white hover:border-primary hover:text-primary",
+    position: "font-bold text-2xl"
   }
 };
 const Stepper = React__default.memo(({
@@ -61071,18 +61076,27 @@ const Stepper = React__default.memo(({
   currentStep,
   onStepChange
 }) => {
+  const getButtonClass = (stepId, isStepEnabled) => {
+    if (currentStep === stepId)
+      return `${classes.button.root} ${classes.button.selected}`;
+    return isStepEnabled ? `${classes.button.root} ${classes.button.normal}` : `${classes.button.root} ${classes.button.disabled}`;
+  };
+  const getListItemClass = (index2, isStepEnabled) => {
+    if (index2 === steps2.length - 1) return classes.lastItem;
+    return isStepEnabled ? classes.stepItem : classes.stepItemDisabled;
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsx("ol", { className: classes.container, children: steps2.map((step, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     "li",
     {
-      className: index2 === steps2.length - 1 ? classes.lastItem : canProceed[index2] ? classes.stepItem : classes.stepItemDisabled,
+      className: getListItemClass(index2, canProceed[index2]),
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes.button.index, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
           {
             disabled: !canProceed[index2],
             onClick: () => onStepChange(step.id),
-            className: `step-button-root ${currentStep === step.id ? "step-button-selected" : canProceed[index2] ? "step-button-normal" : "step-button-disabled"} `,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "step-button-position", children: step.id })
+            className: getButtonClass(step.id, canProceed[index2]),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: classes.button.position, children: step.id })
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(