shad-m 1.0.2 → 1.0.3

package/dist/components/stepper.mjs

@@ -0,0 +1,702 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { CheckCircleIcon16 } from '@/icons';
+import { cn } from '@/lib/utils';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+
+const StepperContext = React.createContext(null);
+const NavigationContext = React.createContext({ isDynamicHeight: false, shouldUseLargeCircle: false, stepSpacing: "md" });
+const StepContext = React.createContext(null);
+function useStepContext() {
+  const context = React.useContext(StepContext);
+  if (!context) {
+    throw new Error("useStepContext must be used within a StepperStep");
+  }
+  return context;
+}
+function useStepper() {
+  const context = React.useContext(StepperContext);
+  if (!context) {
+    throw new Error("useStepper must be used within a StepperProvider");
+  }
+  return context;
+}
+function defineStepper(...steps) {
+  const StepperProvider = React.forwardRef(
+    ({
+      children,
+      variant = "horizontal",
+      labelOrientation = "horizontal",
+      tracking = false,
+      initialStep,
+      initialMetadata = {},
+      className,
+      ...props
+    }, ref) => {
+      const [currentStep, setCurrentStep] = React.useState(initialStep || steps[0]?.id || "");
+      const [completedSteps, setCompletedSteps] = React.useState(/* @__PURE__ */ new Set());
+      const [metadata, setMetadataState] = React.useState(initialMetadata);
+      const beforeNextRef = React.useRef(null);
+      const beforePrevRef = React.useRef(null);
+      const getCurrentStepIndex = () => steps.findIndex((step) => step.id === currentStep);
+      const getCurrentStep = () => steps[getCurrentStepIndex()];
+      const methods = React.useMemo(
+        () => ({
+          goTo: async (stepId) => {
+            const stepExists = steps.find((step) => step.id === stepId);
+            if (stepExists) {
+              setCurrentStep(stepId);
+            }
+          },
+          next: async () => {
+            const currentIndex = getCurrentStepIndex();
+            if (currentIndex < steps.length - 1) {
+              if (beforeNextRef.current) {
+                const canProceed = await beforeNextRef.current();
+                if (!canProceed) return;
+              }
+              const nextStep = steps[currentIndex + 1];
+              if (nextStep) {
+                setCurrentStep(nextStep.id);
+                const currentStepItem = steps[currentIndex];
+                if (currentStepItem) {
+                  setCompletedSteps((prev) => /* @__PURE__ */ new Set([...prev, currentStepItem.id]));
+                }
+              }
+            }
+          },
+          prev: async () => {
+            const currentIndex = getCurrentStepIndex();
+            if (currentIndex > 0) {
+              if (beforePrevRef.current) {
+                const canProceed = await beforePrevRef.current();
+                if (!canProceed) return;
+              }
+              const prevStep = steps[currentIndex - 1];
+              if (prevStep) {
+                setCurrentStep(prevStep.id);
+                setCompletedSteps((prev) => {
+                  const newSet = new Set(prev);
+                  newSet.delete(currentStep);
+                  return newSet;
+                });
+              }
+            }
+          },
+          reset: () => {
+            const firstStep = steps[0];
+            if (firstStep) {
+              setCurrentStep(firstStep.id);
+            }
+            setCompletedSteps(/* @__PURE__ */ new Set());
+            setMetadataState(initialMetadata);
+          },
+          complete: (stepId) => {
+            const targetStep = stepId || currentStep;
+            setCompletedSteps((prev) => /* @__PURE__ */ new Set([...prev, targetStep]));
+          },
+          all: steps,
+          get isFirst() {
+            return getCurrentStepIndex() === 0;
+          },
+          get isLast() {
+            return getCurrentStepIndex() === steps.length - 1;
+          },
+          get nextStep() {
+            const currentIndex = getCurrentStepIndex();
+            return currentIndex < steps.length - 1 ? steps[currentIndex + 1] || null : null;
+          },
+          get prevStep() {
+            const currentIndex = getCurrentStepIndex();
+            return currentIndex > 0 ? steps[currentIndex - 1] || null : null;
+          },
+          get currentStepData() {
+            return getCurrentStep() || null;
+          },
+          hasCompleted: (stepId) => completedSteps.has(stepId),
+          isCurrent: (stepId) => currentStep === stepId,
+          switch: (cases) => {
+            const step = getCurrentStep();
+            if (!step) return null;
+            return cases[currentStep]?.(step) || null;
+          },
+          beforeNext: (callback) => {
+            beforeNextRef.current = callback;
+          },
+          beforePrev: (callback) => {
+            beforePrevRef.current = callback;
+          },
+          getMetadata: (key) => key ? metadata[key] : metadata,
+          setMetadata: (key, value) => {
+            setMetadataState((prev) => ({ ...prev, [key]: value }));
+          },
+          resetMetadata: () => setMetadataState(initialMetadata)
+        }),
+        [currentStep, completedSteps, metadata, initialMetadata]
+      );
+      const contextValue = React.useMemo(
+        () => ({
+          steps,
+          currentStep,
+          completedSteps,
+          variant,
+          labelOrientation,
+          tracking,
+          metadata,
+          methods
+        }),
+        [currentStep, completedSteps, variant, labelOrientation, tracking, metadata, methods]
+      );
+      return /* @__PURE__ */ jsx(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn("stepper", className), ...props, children: typeof children === "function" ? children(contextValue) : children }) });
+    }
+  );
+  StepperProvider.displayName = "StepperProvider";
+  const navigationVariants = cva("flex", {
+    variants: {
+      variant: {
+        horizontal: "flex-row items-start w-full",
+        vertical: "flex-col",
+        circle: "flex-row items-center justify-center"
+      },
+      spacing: {
+        sm: "gap-2",
+        md: "gap-4",
+        lg: "gap-6"
+      },
+      height: {
+        auto: "",
+        full: "h-full",
+        dynamic: "justify-start"
+        // Remove h-full to allow natural height
+      }
+    },
+    defaultVariants: {
+      variant: "horizontal",
+      spacing: "md",
+      height: "auto"
+    },
+    compoundVariants: [
+      // For vertical variants, don't use gap to allow connector lines to stretch
+      {
+        variant: "vertical",
+        className: "gap-0"
+      }
+    ]
+  });
+  const StepperNavigation = React.forwardRef(
+    ({
+      className,
+      variant: navVariant,
+      spacing,
+      containerHeight,
+      dynamicHeight,
+      minHeight = 350,
+      stepSpacing = "md",
+      style,
+      navigationClassName,
+      ...props
+    }, ref) => {
+      const { variant } = useStepper();
+      const [updateTrigger, setUpdateTrigger] = React.useState(0);
+      const updateConnectors = React.useCallback(() => {
+        setUpdateTrigger((prev) => prev + 1);
+      }, []);
+      const heightVariant = dynamicHeight ? "dynamic" : containerHeight ? "full" : "auto";
+      const dynamicStyle = React.useMemo(() => {
+        const baseStyle = style || {};
+        if (containerHeight && typeof containerHeight === "string") {
+          return { ...baseStyle, height: containerHeight };
+        } else if (containerHeight && typeof containerHeight === "number") {
+          return { ...baseStyle, height: `${containerHeight}px` };
+        }
+        return baseStyle;
+      }, [style, containerHeight]);
+      const heightValue = React.useMemo(() => {
+        if (containerHeight && typeof containerHeight === "number") {
+          return containerHeight;
+        } else if (containerHeight && typeof containerHeight === "string") {
+          const match = containerHeight.match(/(\d+)px/);
+          return match && match[1] ? parseInt(match[1], 10) : 0;
+        }
+        return 0;
+      }, [containerHeight]);
+      const shouldUseLargeCircle = dynamicHeight && heightValue >= minHeight;
+      return /* @__PURE__ */ jsx(
+        NavigationContext.Provider,
+        {
+          value: {
+            isDynamicHeight: !!dynamicHeight,
+            shouldUseLargeCircle,
+            stepSpacing,
+            updateConnectors
+          },
+          children: /* @__PURE__ */ jsx(
+            "nav",
+            {
+              ref,
+              className: cn(
+                navigationVariants({
+                  variant: navVariant || variant,
+                  spacing,
+                  height: heightVariant
+                }),
+                className,
+                navigationClassName
+              ),
+              style: dynamicStyle,
+              "data-update-trigger": updateTrigger,
+              ...props
+            }
+          )
+        }
+      );
+    }
+  );
+  StepperNavigation.displayName = "StepperNavigation";
+  const stepVariants = cva("cursor-pointer transition-all duration-200", {
+    variants: {
+      variant: {
+        horizontal: "flex-1 flex items-start",
+        vertical: "w-full",
+        "vertical-dynamic": "w-full",
+        // Remove flex-1 to allow natural height
+        circle: "flex-col text-center"
+      },
+      state: {
+        inactive: "opacity-50",
+        active: "opacity-100",
+        completed: "opacity-100",
+        disabled: "opacity-50 cursor-not-allowed"
+      }
+    },
+    defaultVariants: {
+      variant: "horizontal",
+      state: "inactive"
+    }
+  });
+  const StepperStep = React.forwardRef(
+    ({
+      className,
+      of,
+      icon,
+      active,
+      completed,
+      disabled,
+      children,
+      circleClassName,
+      connectorClassName,
+      contentClassName,
+      containerClassName,
+      circleContent,
+      circleStyles,
+      showDefaultIcon,
+      showStepNumber,
+      forceShowConnector,
+      ...props
+    }, ref) => {
+      const { methods, variant } = useStepper();
+      const {
+        isDynamicHeight,
+        stepSpacing = "md",
+        updateConnectors
+      } = React.useContext(NavigationContext);
+      const containerRef = React.useRef(null);
+      const contentRef = React.useRef(null);
+      const [isDesktop, setIsDesktop] = React.useState(false);
+      const [contentHeight, setContentHeight] = React.useState(0);
+      React.useEffect(() => {
+        const checkIsDesktop = () => {
+          setIsDesktop(window.innerWidth >= 768);
+        };
+        checkIsDesktop();
+        window.addEventListener("resize", checkIsDesktop);
+        return () => window.removeEventListener("resize", checkIsDesktop);
+      }, []);
+      React.useEffect(() => {
+        if (variant === "vertical" && isDynamicHeight && containerRef.current) {
+          const resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+              const newHeight = entry.contentRect.height;
+              if (newHeight !== contentHeight && newHeight > 0) {
+                setContentHeight(newHeight);
+                if (updateConnectors) {
+                  setTimeout(updateConnectors, 100);
+                }
+              }
+            }
+          });
+          resizeObserver.observe(containerRef.current);
+          if (contentRef.current) {
+            resizeObserver.observe(contentRef.current);
+          }
+          return () => {
+            resizeObserver.disconnect();
+          };
+        }
+      }, [variant, isDynamicHeight, contentHeight, updateConnectors]);
+      const [stepWidth, setStepWidth] = React.useState(0);
+      React.useEffect(() => {
+        const measureNavigation = () => {
+          if (containerRef.current && variant === "horizontal") {
+            const navigationContainer = containerRef.current.closest('[role="navigation"], nav') || containerRef.current.parentElement;
+            if (navigationContainer) {
+              const rect = navigationContainer.getBoundingClientRect();
+              const calculatedStepWidth = rect.width / methods.all.length;
+              setStepWidth(calculatedStepWidth);
+            }
+          }
+        };
+        measureNavigation();
+        const resizeObserver = new ResizeObserver(measureNavigation);
+        if (containerRef.current) {
+          const navigationContainer = containerRef.current.closest('[role="navigation"], nav') || containerRef.current.parentElement;
+          if (navigationContainer) {
+            resizeObserver.observe(navigationContainer);
+          }
+        }
+        return () => {
+          resizeObserver.disconnect();
+        };
+      }, [variant, methods.all.length]);
+      const stepId = typeof of === "string" ? of : of.id;
+      const step = methods.all.find((s) => s.id === stepId);
+      if (!step) return null;
+      const isActive = active !== void 0 ? active : step.active !== void 0 ? step.active : methods.isCurrent(stepId);
+      const isCompleted = completed !== void 0 ? completed : step.complete !== void 0 ? step.complete : methods.hasCompleted(stepId);
+      const isDisabled = disabled !== void 0 ? disabled : step.disabled || false;
+      const stepIndex = methods.all.findIndex((s) => s.id === stepId);
+      const handleClick = React.useCallback(
+        (e) => {
+          if (isDisabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+          }
+          props.onClick?.(e);
+          if (!e.defaultPrevented) {
+            methods.goTo(stepId);
+          }
+        },
+        [isDisabled, stepId, methods, props.onClick]
+      );
+      const state = isCompleted ? "completed" : isDisabled ? "disabled" : isActive ? "active" : "inactive";
+      const getCircleContent = () => {
+        if (circleContent !== void 0) return circleContent;
+        if (step.circleContent !== void 0) return step.circleContent;
+        if (showDefaultIcon === false && showStepNumber === false) return null;
+        if (isCompleted && showDefaultIcon !== false) {
+          return /* @__PURE__ */ jsx(CheckCircleIcon16, { className: "ic-white h-4 w-4" });
+        }
+        if (icon && showDefaultIcon !== false) {
+          return icon;
+        }
+        if (showStepNumber !== false) {
+          return stepIndex + 1;
+        }
+        return null;
+      };
+      const getCircleStyles = () => {
+        const componentStyles = circleStyles || {};
+        const stepStyles = step.circleStyles || {};
+        return {
+          completed: componentStyles.completed || stepStyles.completed || "border-green-500 bg-green-500 text-white",
+          active: componentStyles.active || stepStyles.active || "border-[4px] border-blue-100 bg-blue-200 !font-bold text-blue-500",
+          inactive: componentStyles.inactive || stepStyles.inactive || "border-ink-200s bg-ink-200s text-ink-400s !font-bold",
+          disabled: componentStyles.disabled || stepStyles.disabled || "cursor-not-allowed border-ink-200s bg-ink-200s text-ink-400s !font-bold"
+        };
+      };
+      const circleStylesConfig = getCircleStyles();
+      const circleContentToRender = getCircleContent();
+      const getConnectorColor = () => {
+        if (isCompleted) {
+          return {
+            className: "",
+            style: {
+              background: variant === "horizontal" ? "linear-gradient(90deg, #12CA5B 0%, rgba(18, 202, 91, 0) 100%)" : "linear-gradient(180deg, #12CA5B 0%, rgba(18, 202, 91, 0) 100%)"
+            }
+          };
+        } else if (isDisabled) {
+          return {
+            className: "",
+            style: {
+              background: variant === "horizontal" ? "linear-gradient(90deg, #BBC0CC 0%, rgba(187, 192, 204, 0) 100%)" : "linear-gradient(180deg, #BBC0CC 0%, rgba(187, 192, 204, 0) 100%)"
+            }
+          };
+        } else if (isActive) {
+          return {
+            className: "",
+            style: {
+              background: variant === "horizontal" ? "linear-gradient(90deg, #094BF4 0%, rgba(9, 75, 244, 0) 100%)" : "linear-gradient(180deg, #094BF4 0%, rgba(9, 75, 244, 0) 100%)"
+            }
+          };
+        } else {
+          return {
+            className: "",
+            style: {
+              background: variant === "horizontal" ? "linear-gradient(90deg, #BBC0CC 0%, rgba(187, 192, 204, 0) 100%)" : "linear-gradient(180deg, #BBC0CC 0%, rgba(187, 192, 204, 0) 100%)"
+            }
+          };
+        }
+      };
+      const getStepSpacing = () => {
+        if (isDynamicHeight) return "";
+        switch (stepSpacing) {
+          case "none":
+            return "";
+          case "sm":
+            return "pb-2";
+          case "md":
+            return "pb-4";
+          case "lg":
+            return "pb-6";
+          default:
+            return "pb-4";
+        }
+      };
+      const hasDescription = React.Children.toArray(children).some((child) => {
+        if (React.isValidElement(child)) {
+          if (child.type === StepperDescription) return true;
+          if (child.props?.["data-stepper-description"] === "true") return true;
+          if (child.props?.children) {
+            const nestedChildren = React.Children.toArray(child.props.children);
+            return nestedChildren.some((nested) => {
+              if (React.isValidElement(nested)) {
+                return nested.type === StepperDescription || nested.props?.["data-stepper-description"] === "true";
+              }
+              return false;
+            });
+          }
+        }
+        return false;
+      });
+      if (variant === "vertical") {
+        const stepVariant = isDynamicHeight ? "vertical-dynamic" : "vertical";
+        return /* @__PURE__ */ jsx(StepContext.Provider, { value: { isActive, isCompleted, isDisabled, stepIndex }, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            className: cn(
+              stepVariants({ variant: stepVariant, state }),
+              // Use flex to allow connector to stretch
+              isDynamicHeight ? "flex" : "",
+              // Add padding to create spacing between steps
+              getStepSpacing(),
+              className
+            ),
+            onClick: handleClick,
+            ...(({ onClick, ...rest }) => rest)(props),
+            children: /* @__PURE__ */ jsxs("div", { className: cn("flex w-full", isDynamicHeight ? "min-h-0" : ""), children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-shrink-0 flex-col items-center",
+                    isDynamicHeight ? "h-full" : ""
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "z-10 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium shadow-sm transition-colors md:h-10 md:w-10 md:text-sm",
+                          isCompleted && circleStylesConfig.completed,
+                          !isCompleted && isDisabled && circleStylesConfig.disabled,
+                          !isCompleted && !isDisabled && isActive && circleStylesConfig.active,
+                          !isCompleted && !isDisabled && !isActive && circleStylesConfig.inactive,
+                          circleClassName,
+                          step.circleClassName
+                        ),
+                        children: circleContentToRender
+                      }
+                    ),
+                    (stepIndex < methods.all.length - 1 || forceShowConnector) && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "w-1 rounded-full transition-all duration-200 ease-in-out",
+                          // Reduce min-height and margin when no description
+                          isDynamicHeight ? hasDescription ? "mb-2 mt-2 min-h-[2rem] flex-1" : "mb-1.5 mt-1.5 min-h-[1rem] flex-1" : "my-2 h-8",
+                          getConnectorColor().className,
+                          connectorClassName
+                        ),
+                        style: getConnectorColor().style
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: contentRef,
+                  className: cn(
+                    "flex flex-1 flex-col justify-start",
+                    // Reduce padding when no description
+                    hasDescription ? "pt-1" : "pt-2",
+                    // Use margin instead of gap to avoid affecting connector
+                    isDynamicHeight ? "ml-3" : "ml-4",
+                    contentClassName
+                  ),
+                  children
+                }
+              )
+            ] })
+          }
+        ) });
+      }
+      return /* @__PURE__ */ jsx(StepContext.Provider, { value: { isActive, isCompleted, isDisabled, stepIndex }, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: cn(stepVariants({ variant, state }), className),
+          onClick: handleClick,
+          ...(({ onClick, ...rest }) => rest)(props),
+          children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-1 md:gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex w-full justify-center", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "z-10 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-medium shadow-sm transition-colors md:h-10 md:w-10 md:text-sm",
+                    isCompleted && circleStylesConfig.completed,
+                    !isCompleted && isDisabled && circleStylesConfig.disabled,
+                    !isCompleted && !isDisabled && isActive && circleStylesConfig.active,
+                    !isCompleted && !isDisabled && !isActive && circleStylesConfig.inactive,
+                    circleClassName,
+                    step.circleClassName
+                  ),
+                  children: circleContentToRender
+                }
+              ) }),
+              (stepIndex < methods.all.length - 1 || forceShowConnector) && stepWidth > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "absolute h-1 rounded-full transition-colors",
+                    "top-1/2 z-0 -translate-y-1/2",
+                    getConnectorColor().className,
+                    connectorClassName
+                  ),
+                  style: {
+                    // Start from center + half circle + small gap
+                    left: `calc(50% + ${isDesktop ? "28px" : "22px"})`,
+                    // End at next step center - half circle - small gap
+                    width: `calc(${stepWidth - (isDesktop ? 48 : 36)}px)`,
+                    ...getConnectorColor().style
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex w-full justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center text-center", children }) })
+          ] })
+        }
+      ) });
+    }
+  );
+  StepperStep.displayName = "StepperStep";
+  const StepperTitle = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    const { isActive, isDisabled, isCompleted } = useStepContext();
+    const { variant } = useStepper();
+    const { isDynamicHeight } = React.useContext(NavigationContext);
+    const Comp = asChild ? "div" : "h4";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          "font-normal",
+          isDynamicHeight ? "text-sm lg:text-base" : variant !== "vertical" ? "mt-1 text-sm lg:text-base" : "mt-1 text-sm lg:text-base",
+          isCompleted ? "text-black" : isDisabled ? "text-ink-400s cursor-not-allowed" : isActive ? "text-primary" : "text-ink-500s",
+          className
+        ),
+        ...props
+      }
+    );
+  });
+  StepperTitle.displayName = "StepperTitle";
+  const StepperDescription = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    const { isDynamicHeight } = React.useContext(NavigationContext);
+    const Comp = asChild ? "div" : "p";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        "data-stepper-description": "true",
+        className: cn(
+          "text-muted-foreground",
+          isDynamicHeight ? "text-base" : "mt-1 text-base",
+          className
+        ),
+        ...props
+      }
+    );
+  });
+  StepperDescription.displayName = "StepperDescription";
+  const StepperPanel = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? "div" : "div";
+    return /* @__PURE__ */ jsx(Comp, { ref, className: cn("mt-4", className), ...props });
+  });
+  StepperPanel.displayName = "StepperPanel";
+  const StepperControls = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? "div" : "div";
+    return /* @__PURE__ */ jsx(Comp, { ref, className: cn("mt-4 flex justify-between gap-2", className), ...props });
+  });
+  StepperControls.displayName = "StepperControls";
+  const StepperCircle = React.forwardRef(({ className, asChild, size = "md", variant = "default", ...props }, ref) => {
+    const { isActive, isCompleted, isDisabled } = useStepContext();
+    const Comp = asChild ? "div" : "div";
+    const sizeClasses = {
+      sm: "h-8 w-8 text-xs",
+      md: "h-10 w-10 text-sm",
+      lg: "h-12 w-12 text-base",
+      xl: "h-14 w-14 text-lg"
+    };
+    const variantClasses = {
+      default: cn(
+        "flex items-center justify-center rounded-full font-medium shadow-sm transition-colors",
+        isCompleted && "border-green-500 bg-green-500 text-white",
+        !isCompleted && isDisabled && "cursor-not-allowed border-ink-200s bg-ink-200s text-ink-400s !font-bold",
+        !isCompleted && !isDisabled && isActive && "border-[4px] border-blue-100 bg-blue-200 !font-bold text-blue-500",
+        !isCompleted && !isDisabled && !isActive && "border-ink-200s bg-ink-200s text-ink-400s !font-bold"
+      ),
+      outline: cn(
+        "flex items-center justify-center rounded-full border-2 font-medium transition-colors",
+        isCompleted && "border-green-500 bg-green-50 text-green-600",
+        !isCompleted && isDisabled && "cursor-not-allowed border-ink-300s bg-ink-50s text-ink-400s",
+        !isCompleted && !isDisabled && isActive && "border-blue-500 bg-blue-50 text-blue-600",
+        !isCompleted && !isDisabled && !isActive && "border-ink-300s bg-white text-ink-500s"
+      ),
+      ghost: cn(
+        "flex items-center justify-center rounded-full font-medium transition-colors",
+        isCompleted && "bg-green-100 text-green-600",
+        !isCompleted && isDisabled && "cursor-not-allowed bg-ink-100s text-ink-400s",
+        !isCompleted && !isDisabled && isActive && "bg-blue-100 text-blue-600",
+        !isCompleted && !isDisabled && !isActive && "bg-ink-100s text-ink-500s"
+      )
+    };
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn("z-10 flex-shrink-0", sizeClasses[size], variantClasses[variant], className),
+        ...props
+      }
+    );
+  });
+  StepperCircle.displayName = "StepperCircle";
+  return {
+    StepperProvider,
+    StepperNavigation,
+    StepperStep,
+    StepperTitle,
+    StepperDescription,
+    StepperPanel,
+    StepperControls,
+    StepperCircle,
+    useStepper
+  };
+}
+
+export { StepperContext, defineStepper, useStepper };
+//# sourceMappingURL=stepper.mjs.map
+//# sourceMappingURL=stepper.mjs.map