@e-infra/design-system 0.0.3 → 0.0.4

package/dist/index.cjs.js

@@ -4006,6 +4006,177 @@ const Toaster = ({ ...props }) => {
     }
   );
 };
+const StepperContext = React__namespace.createContext(
+  void 0
+);
+function useStepper() {
+  const context = React__namespace.useContext(StepperContext);
+  if (!context) {
+    throw new Error("useStepper must be used within a Stepper");
+  }
+  return context;
+}
+function Stepper({
+  children,
+  initialStep = 0,
+  totalSteps: totalStepsProp,
+  onStepChange
+}) {
+  const [currentStep, setCurrentStep] = React__namespace.useState(initialStep);
+  const steps = React__namespace.Children.toArray(children);
+  const totalSteps = totalStepsProp ?? steps.length;
+  const nextStep = React__namespace.useCallback(() => {
+    setCurrentStep((prev) => {
+      const next = Math.min(prev + 1, totalSteps - 1);
+      onStepChange?.(next);
+      return next;
+    });
+  }, [totalSteps, onStepChange]);
+  const previousStep = React__namespace.useCallback(() => {
+    setCurrentStep((prev) => {
+      const next = Math.max(prev - 1, 0);
+      onStepChange?.(next);
+      return next;
+    });
+  }, [onStepChange]);
+  const goToStep = React__namespace.useCallback(
+    (step) => {
+      const validStep = Math.max(0, Math.min(step, totalSteps - 1));
+      setCurrentStep(validStep);
+      onStepChange?.(validStep);
+    },
+    [totalSteps, onStepChange]
+  );
+  React__namespace.useEffect(() => {
+    if (initialStep !== currentStep) {
+      setCurrentStep(initialStep);
+    }
+  }, [initialStep]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    StepperContext.Provider,
+    {
+      value: {
+        currentStep,
+        totalSteps,
+        nextStep,
+        previousStep,
+        goToStep
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children })
+    }
+  );
+}
+function StepperHeader({ steps, className }) {
+  const { currentStep, previousStep, nextStep, totalSteps } = useStepper();
+  const progressPercentage = (currentStep + 1) / totalSteps * 100;
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Progress", className: cn("mb-8", className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-10 w-full justify-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          variant: "secondary",
+          size: "sm",
+          onClick: previousStep,
+          disabled: currentStep === 0,
+          className: "gap-1.5",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "h-3.5 w-3.5" }),
+            "Previous"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Progress, { value: progressPercentage, className: "w-105" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Button,
+        {
+          variant: "secondary",
+          size: "sm",
+          onClick: nextStep,
+          disabled: currentStep === totalSteps - 1,
+          className: "gap-1.5",
+          children: [
+            "Next",
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-3.5 w-3.5" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center gap-5", children: [
+      steps.map((_, index) => {
+        if (index === 0) return null;
+        const isComplete = index <= currentStep;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "absolute h-px w-[133px]",
+              "top-2",
+              isComplete ? "bg-slate-700" : "bg-border"
+            ),
+            style: {
+              left: `calc(${(index - 1) * 25}% + ${56 + (index - 1) * 20}px)`
+            }
+          },
+          `connector-${index}`
+        );
+      }),
+      steps.map((step, index) => {
+        const isComplete = index < currentStep;
+        const isCurrent = index === currentStep;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "flex flex-col items-center gap-1 w-28 relative z-10",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => {
+                  },
+                  className: cn(
+                    "flex items-center justify-center w-4 h-4 rounded-full text-white text-[11px] font-semibold transition-colors",
+                    isComplete && "bg-[#36a769]",
+                    isCurrent && "bg-[#c9a224]",
+                    !isComplete && !isCurrent && "bg-[#999]"
+                  ),
+                  children: index + 1
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-foreground text-center leading-tight", children: step.label })
+            ]
+          },
+          step.label
+        );
+      })
+    ] })
+  ] }) });
+}
+function StepperContent({ children, className }) {
+  const { currentStep } = useStepper();
+  const steps = React__namespace.Children.toArray(children);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("py-4", className), children: steps[currentStep] || null });
+}
+function StepperFooter({
+  children,
+  className,
+  showDefaultButtons = true,
+  nextLabel = "Next",
+  previousLabel = "Previous",
+  finishLabel = "Finish",
+  onFinish
+}) {
+  const { currentStep, totalSteps, nextStep, previousStep } = useStepper();
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep === totalSteps - 1;
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex justify-between", className), children });
+  }
+  if (!showDefaultButtons) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-8 flex justify-between", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", onClick: previousStep, disabled: isFirstStep, children: previousLabel }),
+    isLastStep ? /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: onFinish, children: finishLabel }) : /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: nextStep, children: nextLabel })
+  ] });
+}
 function Switch({
   className,
   ...props
@@ -4515,6 +4686,10 @@ exports.SidebarSeparator = SidebarSeparator;
 exports.SidebarTrigger = SidebarTrigger;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
+exports.Stepper = Stepper;
+exports.StepperContent = StepperContent;
+exports.StepperFooter = StepperFooter;
+exports.StepperHeader = StepperHeader;
 exports.Switch = Switch;
 exports.Table = Table;
 exports.TableBody = TableBody;
@@ -4545,4 +4720,5 @@ exports.toggleVariants = toggleVariants;
 exports.useFormField = useFormField;
 exports.useIsMobile = useIsMobile;
 exports.useSidebar = useSidebar;
+exports.useStepper = useStepper;
 //# sourceMappingURL=index.cjs.js.map