shad-m 1.0.0 → 1.0.2

package/dist/components/stepper.mjs

@@ -1,702 +0,0 @@
-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