@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/stepper/DefaultStepperStepHorizontal.js

@@ -0,0 +1,146 @@
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "progress", "style", "completedStepAccessibilityLabel", "styles", "activeStepLabelElement", "setActiveStepLabelElement", "progressSpringConfig", "animate", "disableAnimateOnMount", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useMemo } from 'react';
+import { containsStep, isStepVisited } from '@coinbase/cds-common/stepper/utils';
+import { HStack, VStack } from '../layout';
+import { DefaultStepperProgressHorizontal } from './DefaultStepperProgressHorizontal';
+import { DefaultStepperSubstepContainerHorizontal } from './DefaultStepperSubstepContainerHorizontal';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DefaultStepperStepHorizontal = /*#__PURE__*/memo(function DefaultStepperStepHorizontal(_ref) {
+  var _step$StepperIconComp, _step$StepperLabelCom, _step$StepperProgress, _step$StepperSubstepC;
+  let {
+      step,
+      parentStep,
+      activeStepId,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      progress,
+      style,
+      completedStepAccessibilityLabel,
+      styles,
+      activeStepLabelElement,
+      setActiveStepLabelElement,
+      progressSpringConfig,
+      animate,
+      disableAnimateOnMount,
+      StepperStepComponent = DefaultStepperStepHorizontal,
+      StepperSubstepContainerComponent = DefaultStepperSubstepContainerHorizontal,
+      StepperLabelComponent,
+      StepperProgressComponent = DefaultStepperProgressHorizontal,
+      StepperIconComponent
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const RenderedIconComponent = (_step$StepperIconComp = step.StepperIconComponent) != null ? _step$StepperIconComp : StepperIconComponent;
+  const RenderedLabelComponent = (_step$StepperLabelCom = step.StepperLabelComponent) != null ? _step$StepperLabelCom : StepperLabelComponent;
+  const RenderedProgressComponent = (_step$StepperProgress = step.StepperProgressComponent) != null ? _step$StepperProgress : StepperProgressComponent;
+  const RenderedSubstepContainerComponent = (_step$StepperSubstepC = step.StepperSubstepContainerComponent) != null ? _step$StepperSubstepC : StepperSubstepContainerComponent;
+  const containerStyles = useMemo(() => {
+    const {
+      step
+    } = styles != null ? styles : {};
+    return [style, step];
+  }, [styles, style]);
+  return /*#__PURE__*/_jsxs(VStack, _extends({
+    flexBasis: 0,
+    flexGrow: 1,
+    gap: 0.5,
+    style: containerStyles
+  }, props, {
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      children: [RenderedIconComponent && /*#__PURE__*/_jsx(RenderedIconComponent, {
+        active: active,
+        activeStepId: activeStepId,
+        complete: complete,
+        depth: depth,
+        flatStepIds: flatStepIds,
+        isDescendentActive: isDescendentActive,
+        parentStep: parentStep,
+        step: step,
+        style: styles == null ? void 0 : styles.icon,
+        visited: visited
+      }), RenderedProgressComponent && /*#__PURE__*/_jsx(RenderedProgressComponent, {
+        active: active,
+        activeStepId: activeStepId,
+        activeStepLabelElement: activeStepLabelElement,
+        animate: animate,
+        complete: complete,
+        depth: depth,
+        disableAnimateOnMount: disableAnimateOnMount,
+        flatStepIds: flatStepIds,
+        isDescendentActive: isDescendentActive,
+        parentStep: parentStep,
+        progress: progress,
+        progressSpringConfig: progressSpringConfig,
+        step: step,
+        style: styles == null ? void 0 : styles.progress,
+        visited: visited
+      })]
+    }), RenderedLabelComponent && /*#__PURE__*/_jsx(RenderedLabelComponent, {
+      active: active,
+      activeStepId: activeStepId,
+      complete: complete,
+      completedStepAccessibilityLabel: completedStepAccessibilityLabel,
+      depth: depth,
+      flatStepIds: flatStepIds,
+      isDescendentActive: isDescendentActive,
+      parentStep: parentStep,
+      setActiveStepLabelElement: setActiveStepLabelElement,
+      step: step,
+      style: styles == null ? void 0 : styles.label,
+      visited: visited
+    }), step.subSteps && RenderedSubstepContainerComponent && /*#__PURE__*/_jsx(RenderedSubstepContainerComponent, {
+      active: active,
+      activeStepId: activeStepId,
+      complete: complete,
+      depth: depth,
+      flatStepIds: flatStepIds,
+      isDescendentActive: isDescendentActive,
+      parentStep: parentStep,
+      step: step,
+      style: styles == null ? void 0 : styles.substepContainer,
+      visited: visited,
+      children: step.subSteps.map((subStep, index) => {
+        var _subStep$Component;
+        const RenderedStepComponent = (_subStep$Component = subStep.Component) != null ? _subStep$Component : StepperStepComponent;
+        const isDescendentActive = activeStepId ? containsStep({
+          step: subStep,
+          targetStepId: activeStepId
+        }) : false;
+        return RenderedStepComponent && /*#__PURE__*/_jsx(RenderedStepComponent, {
+          StepperIconComponent: StepperIconComponent,
+          StepperLabelComponent: StepperLabelComponent,
+          StepperProgressComponent: StepperProgressComponent,
+          StepperStepComponent: StepperStepComponent,
+          StepperSubstepContainerComponent: StepperSubstepContainerComponent,
+          active: subStep.id === activeStepId,
+          activeStepId: activeStepId,
+          activeStepLabelElement: activeStepLabelElement,
+          animate: animate,
+          complete: complete,
+          completedStepAccessibilityLabel: completedStepAccessibilityLabel,
+          depth: depth + 1,
+          disableAnimateOnMount: disableAnimateOnMount,
+          flatStepIds: flatStepIds,
+          isDescendentActive: isDescendentActive,
+          parentStep: step,
+          progress: progress,
+          progressSpringConfig: progressSpringConfig,
+          setActiveStepLabelElement: setActiveStepLabelElement,
+          step: subStep,
+          styles: styles,
+          visited: activeStepId ? isStepVisited({
+            step: subStep,
+            activeStepId,
+            flatStepIds
+          }) : false
+        }, subStep.id);
+      })
+    })]
+  }));
+});

package/esm/stepper/DefaultStepperStepVertical.js

@@ -0,0 +1,156 @@
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "progress", "style", "completedStepAccessibilityLabel", "styles", "activeStepLabelElement", "setActiveStepLabelElement", "progressSpringConfig", "animate", "disableAnimateOnMount", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useMemo } from 'react';
+import { containsStep, isStepVisited } from '@coinbase/cds-common/stepper/utils';
+import { useTheme } from '../hooks/useTheme';
+import { HStack, VStack } from '../layout';
+import { DefaultStepperIconVertical } from './DefaultStepperIconVertical';
+import { DefaultStepperLabelVertical } from './DefaultStepperLabelVertical';
+import { DefaultStepperProgressVertical } from './DefaultStepperProgressVertical';
+import { DefaultStepperSubstepContainerVertical } from './DefaultStepperSubstepContainerVertical';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DefaultStepperStepVertical = /*#__PURE__*/memo(function DefaultStepperStepVertical(_ref) {
+  var _step$StepperIconComp, _step$StepperLabelCom, _step$StepperProgress, _step$StepperSubstepC;
+  let {
+      step,
+      parentStep,
+      activeStepId,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      progress,
+      style,
+      completedStepAccessibilityLabel,
+      styles,
+      activeStepLabelElement,
+      setActiveStepLabelElement,
+      progressSpringConfig,
+      animate,
+      disableAnimateOnMount,
+      StepperStepComponent = DefaultStepperStepVertical,
+      StepperSubstepContainerComponent = DefaultStepperSubstepContainerVertical,
+      StepperLabelComponent = DefaultStepperLabelVertical,
+      StepperProgressComponent = DefaultStepperProgressVertical,
+      StepperIconComponent = DefaultStepperIconVertical
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const theme = useTheme();
+  const RenderedIconComponent = (_step$StepperIconComp = step.StepperIconComponent) != null ? _step$StepperIconComp : StepperIconComponent;
+  const RenderedLabelComponent = (_step$StepperLabelCom = step.StepperLabelComponent) != null ? _step$StepperLabelCom : StepperLabelComponent;
+  const RenderedProgressComponent = (_step$StepperProgress = step.StepperProgressComponent) != null ? _step$StepperProgress : StepperProgressComponent;
+  const RenderedSubstepContainerComponent = (_step$StepperSubstepC = step.StepperSubstepContainerComponent) != null ? _step$StepperSubstepC : StepperSubstepContainerComponent;
+  const containerStyles = useMemo(() => {
+    const {
+      step
+    } = styles != null ? styles : {};
+    return [style, step];
+  }, [styles, style]);
+  return /*#__PURE__*/_jsx(VStack, _extends({
+    style: containerStyles
+  }, props, {
+    children: /*#__PURE__*/_jsxs(HStack, {
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        alignItems: "center",
+        position: "relative",
+        children: [RenderedIconComponent && /*#__PURE__*/_jsx(RenderedIconComponent, {
+          active: active,
+          activeStepId: activeStepId,
+          complete: complete,
+          depth: depth,
+          flatStepIds: flatStepIds,
+          isDescendentActive: isDescendentActive,
+          parentStep: parentStep,
+          step: step,
+          style: styles == null ? void 0 : styles.icon,
+          visited: visited
+        }), RenderedProgressComponent && /*#__PURE__*/_jsx(RenderedProgressComponent, {
+          active: active,
+          activeStepId: activeStepId,
+          activeStepLabelElement: activeStepLabelElement,
+          animate: animate,
+          complete: complete,
+          depth: depth,
+          disableAnimateOnMount: disableAnimateOnMount,
+          flatStepIds: flatStepIds,
+          isDescendentActive: isDescendentActive,
+          parentStep: parentStep,
+          progress: progress,
+          progressSpringConfig: progressSpringConfig,
+          step: step,
+          style: styles == null ? void 0 : styles.progress,
+          visited: visited
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        flexShrink: 1,
+        style: {
+          paddingStart: (depth + 2) * theme.space[1]
+        },
+        children: [RenderedLabelComponent && /*#__PURE__*/_jsx(RenderedLabelComponent, {
+          active: active,
+          activeStepId: activeStepId,
+          complete: complete,
+          completedStepAccessibilityLabel: completedStepAccessibilityLabel,
+          depth: depth,
+          flatStepIds: flatStepIds,
+          isDescendentActive: isDescendentActive,
+          parentStep: parentStep,
+          setActiveStepLabelElement: setActiveStepLabelElement,
+          step: step,
+          style: styles == null ? void 0 : styles.label,
+          visited: visited
+        }), step.subSteps && RenderedSubstepContainerComponent && /*#__PURE__*/_jsx(RenderedSubstepContainerComponent, {
+          active: active,
+          activeStepId: activeStepId,
+          complete: complete,
+          depth: depth,
+          flatStepIds: flatStepIds,
+          isDescendentActive: isDescendentActive,
+          parentStep: parentStep,
+          step: step,
+          style: styles == null ? void 0 : styles.substepContainer,
+          visited: visited,
+          children: step.subSteps.map((subStep, index) => {
+            var _subStep$Component;
+            const RenderedStepComponent = (_subStep$Component = subStep.Component) != null ? _subStep$Component : StepperStepComponent;
+            const isDescendentActive = activeStepId ? containsStep({
+              step: subStep,
+              targetStepId: activeStepId
+            }) : false;
+            return RenderedStepComponent && /*#__PURE__*/_jsx(RenderedStepComponent, {
+              StepperIconComponent: StepperIconComponent,
+              StepperLabelComponent: StepperLabelComponent,
+              StepperProgressComponent: StepperProgressComponent,
+              StepperStepComponent: StepperStepComponent,
+              StepperSubstepContainerComponent: StepperSubstepContainerComponent,
+              active: subStep.id === activeStepId,
+              activeStepId: activeStepId,
+              activeStepLabelElement: activeStepLabelElement,
+              animate: animate,
+              complete: complete,
+              completedStepAccessibilityLabel: completedStepAccessibilityLabel,
+              depth: depth + 1,
+              disableAnimateOnMount: disableAnimateOnMount,
+              flatStepIds: flatStepIds,
+              isDescendentActive: isDescendentActive,
+              parentStep: step,
+              progress: progress,
+              progressSpringConfig: progressSpringConfig,
+              setActiveStepLabelElement: setActiveStepLabelElement,
+              step: subStep,
+              styles: styles,
+              visited: activeStepId ? isStepVisited({
+                step: subStep,
+                activeStepId,
+                flatStepIds
+              }) : false
+            }, subStep.id);
+          })
+        })]
+      })]
+    })
+  }));
+});

package/esm/stepper/DefaultStepperSubstepContainerHorizontal.js

@@ -0,0 +1,20 @@
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "style", "children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo } from 'react';
+import { HStack } from '../layout';
+import { horizontalStepGap } from './Stepper';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultStepperSubstepContainerHorizontal = /*#__PURE__*/memo(_ref => {
+  let {
+      style,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(HStack, _extends({
+    gap: horizontalStepGap,
+    style: style
+  }, props, {
+    children: children
+  }));
+});

package/esm/stepper/DefaultStepperSubstepContainerVertical.js

@@ -0,0 +1,18 @@
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "style", "children"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo } from 'react';
+import { VStack } from '../layout';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultStepperSubstepContainerVertical = /*#__PURE__*/memo(_ref => {
+  let {
+      style,
+      children
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(VStack, _extends({
+    style: style
+  }, props, {
+    children: children
+  }));
+});

package/esm/stepper/Stepper.js

@@ -0,0 +1,220 @@
+const _excluded = ["direction", "activeStepId", "steps", "complete", "style", "completedStepAccessibilityLabel", "styles", "gap", "accessibilityLabel", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent", "StepperHeaderComponent", "progressSpringConfig", "animate", "disableAnimateOnMount"],
+  _excluded2 = ["root"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useEffect, useMemo, useState } from 'react';
+import { useHasMounted } from '@coinbase/cds-common/hooks/useHasMounted';
+import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import { containsStep, flattenSteps, isStepVisited } from '@coinbase/cds-common/stepper/utils';
+import { useSprings } from '@react-spring/native';
+import { Box } from '../layout/Box';
+import { VStack } from '../layout/VStack';
+import { DefaultStepperHeaderHorizontal } from './DefaultStepperHeaderHorizontal';
+import { DefaultStepperIconVertical } from './DefaultStepperIconVertical';
+import { DefaultStepperLabelVertical } from './DefaultStepperLabelVertical';
+import { DefaultStepperProgressHorizontal } from './DefaultStepperProgressHorizontal';
+import { DefaultStepperProgressVertical } from './DefaultStepperProgressVertical';
+import { DefaultStepperStepHorizontal } from './DefaultStepperStepHorizontal';
+import { DefaultStepperStepVertical } from './DefaultStepperStepVertical';
+import { DefaultStepperSubstepContainerHorizontal } from './DefaultStepperSubstepContainerHorizontal';
+import { DefaultStepperSubstepContainerVertical } from './DefaultStepperSubstepContainerVertical';
+
+/** Data that represents a single step within a Stepper.*/
+
+// ------------ SUBCOMPONENT PROPS ------------
+/** Props shared by most of Stepper's subcomponents. */
+
+// ------------ COMPONENT TYPES ------------
+
+// ------------ STEPPER COMPONENT PROPS ------------
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const horizontalStepGap = 0.5;
+export const defaultProgressSpringConfig = {
+  friction: 0,
+  tension: 100,
+  clamp: true
+};
+const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref, ref) => {
+  var _usePreviousValue, _usePreviousValue2;
+  let {
+      direction,
+      activeStepId,
+      steps,
+      complete,
+      style,
+      completedStepAccessibilityLabel = 'Complete',
+      styles,
+      gap = direction === 'vertical' ? undefined : horizontalStepGap,
+      accessibilityLabel: accessibilityLabelProp,
+      StepperStepComponent = direction === 'vertical' ? DefaultStepperStepVertical : DefaultStepperStepHorizontal,
+      StepperSubstepContainerComponent = direction === 'vertical' ? DefaultStepperSubstepContainerVertical : DefaultStepperSubstepContainerHorizontal,
+      // never show labels below the steps on mobile
+      StepperLabelComponent = direction === 'vertical' ? DefaultStepperLabelVertical : null,
+      StepperProgressComponent = direction === 'vertical' ? DefaultStepperProgressVertical : DefaultStepperProgressHorizontal,
+      StepperIconComponent = direction === 'vertical' ? DefaultStepperIconVertical : null,
+      StepperHeaderComponent = direction === 'vertical' ? null : DefaultStepperHeaderHorizontal,
+      progressSpringConfig = defaultProgressSpringConfig,
+      animate = true,
+      disableAnimateOnMount
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const hasMounted = useHasMounted();
+  const flatStepIds = useMemo(() => flattenSteps(steps).map(step => step.id), [steps]);
+
+  // Derive activeStep from activeStepId
+  const activeStep = useMemo(() => {
+    if (!activeStepId) return null;
+    return flattenSteps(steps).find(step => step.id === activeStepId) || null;
+  }, [activeStepId, steps]);
+  const [activeStepLabelElement, setActiveStepLabelElement] = useState(null);
+  const activeFlatStepIndex = activeStep ? flatStepIds.indexOf(activeStep.id) : -1;
+  const {
+    rootStyle,
+    stepStyles
+  } = useMemo(() => {
+    const _ref2 = styles != null ? styles : {},
+      {
+        root
+      } = _ref2,
+      stepStyles = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    const rootStyle = [style, root];
+    return {
+      rootStyle,
+      stepStyles
+    };
+  }, [styles, style]);
+  const accessibilityLabel = useMemo(() => {
+    var _ref3, _activeStep$accessibi;
+    if (accessibilityLabelProp) return accessibilityLabelProp;
+    if (!activeStep) return 'No active step';
+    const pagination = activeFlatStepIndex + 1 + " of " + flatStepIds.length;
+    const stepLabel = typeof activeStep.label === 'string' ? activeStep.label : null;
+    const baseLabel = (_ref3 = (_activeStep$accessibi = activeStep.accessibilityLabel) != null ? _activeStep$accessibi : stepLabel) != null ? _ref3 : "Step " + (activeFlatStepIndex + 1);
+    return baseLabel + " " + pagination;
+  }, [activeStep, activeFlatStepIndex, flatStepIds.length, accessibilityLabelProp]);
+
+  /*
+    Due to the possibility of null sub components, the root elements ends up being the best experience in certain cases.
+    Specifically, a horizontal stepper or a vertical stepper with no labels.
+  */
+  const isRootAccessible = direction === 'horizontal' || StepperLabelComponent === null;
+  const activeStepIndex = useMemo(() => {
+    return activeStepId ? steps.findIndex(step => step.id === activeStepId || containsStep({
+      step,
+      targetStepId: activeStepId
+    })) : -1;
+  }, [activeStepId, steps]);
+  const previousComplete = (_usePreviousValue = usePreviousValue(complete)) != null ? _usePreviousValue : false;
+  const previousActiveStepIndex = (_usePreviousValue2 = usePreviousValue(activeStepIndex)) != null ? _usePreviousValue2 : -1;
+  const [progressSprings, progressSpringsApi] = useSprings(steps.length, index => ({
+    progress: complete ? 1 : 0,
+    config: progressSpringConfig,
+    immediate: !animate || disableAnimateOnMount && !hasMounted
+  }));
+  useEffect(() => {
+    // update the previous values for next render
+    let stepsToAnimate = [];
+    let isAnimatingForward = false;
+
+    // Case when going from not-complete to complete
+    if (complete !== previousComplete) {
+      if (complete) {
+        // Going to complete: animate from activeStepIndex+1 to end
+        stepsToAnimate = Array.from({
+          length: steps.length - activeStepIndex - 1
+        }, (_, i) => activeStepIndex + 1 + i);
+        isAnimatingForward = true;
+      } else {
+        // Going from complete: animate from end down to activeStepIndex+1
+        stepsToAnimate = Array.from({
+          length: steps.length - activeStepIndex - 1
+        }, (_, i) => steps.length - 1 - i);
+        isAnimatingForward = false;
+      }
+    }
+
+    // Case for normal step navigation (e.g. step 1 => step 2)
+    else if (activeStepIndex !== previousActiveStepIndex) {
+      if (activeStepIndex > previousActiveStepIndex) {
+        // Forward: animate from previousActiveStepIndex+1 to activeStepIndex
+        stepsToAnimate = Array.from({
+          length: activeStepIndex - previousActiveStepIndex
+        }, (_, i) => previousActiveStepIndex + 1 + i);
+        isAnimatingForward = true;
+      } else {
+        // Backward: animate from previousActiveStepIndex down to activeStepIndex+1
+        stepsToAnimate = Array.from({
+          length: previousActiveStepIndex - activeStepIndex
+        }, (_, i) => previousActiveStepIndex - i);
+        isAnimatingForward = false;
+      }
+    }
+    const animateNextStep = () => {
+      if (stepsToAnimate.length === 0) return;
+      const stepIndex = stepsToAnimate.shift();
+      if (stepIndex === undefined) return;
+      progressSpringsApi.start(index => index === stepIndex ? {
+        progress: isAnimatingForward ? 1 : 0,
+        config: progressSpringConfig,
+        onRest: animateNextStep,
+        immediate: !animate || disableAnimateOnMount && !hasMounted
+      } : {});
+    };
+
+    // start the animation loop for relevant springs (stepsToAnimate)
+    animateNextStep();
+  }, [progressSpringsApi, complete, steps.length, steps, activeStepIndex, previousActiveStepIndex, previousComplete, progressSpringConfig, animate, disableAnimateOnMount, hasMounted]);
+  return /*#__PURE__*/_jsxs(VStack, _extends({
+    ref: ref,
+    accessibilityLabel: accessibilityLabel,
+    accessible: isRootAccessible,
+    style: rootStyle
+  }, props, {
+    children: [StepperHeaderComponent && /*#__PURE__*/_jsx(StepperHeaderComponent, {
+      activeStep: activeStep,
+      complete: complete,
+      flatStepIds: flatStepIds,
+      style: styles == null ? void 0 : styles.header
+    }), /*#__PURE__*/_jsx(Box, {
+      flexDirection: direction === 'vertical' ? 'column' : 'row',
+      gap: gap,
+      children: steps.map((step, index) => {
+        var _step$Component;
+        const isDescendentActive = activeStepId ? containsStep({
+          step,
+          targetStepId: activeStepId
+        }) : false;
+        const RenderedStepComponent = (_step$Component = step.Component) != null ? _step$Component : StepperStepComponent;
+        return RenderedStepComponent && /*#__PURE__*/_jsx(RenderedStepComponent, {
+          StepperIconComponent: StepperIconComponent,
+          StepperLabelComponent: StepperLabelComponent,
+          StepperProgressComponent: StepperProgressComponent,
+          StepperStepComponent: StepperStepComponent,
+          StepperSubstepContainerComponent: StepperSubstepContainerComponent,
+          active: !complete && activeStepId ? step.id === activeStepId : false,
+          activeStepId: activeStepId,
+          activeStepLabelElement: activeStepLabelElement,
+          animate: animate,
+          complete: complete,
+          completedStepAccessibilityLabel: completedStepAccessibilityLabel,
+          depth: 0,
+          disableAnimateOnMount: disableAnimateOnMount,
+          flatStepIds: flatStepIds,
+          isDescendentActive: isDescendentActive,
+          parentStep: null,
+          progress: progressSprings[index].progress,
+          progressSpringConfig: progressSpringConfig,
+          setActiveStepLabelElement: setActiveStepLabelElement,
+          step: step,
+          styles: stepStyles,
+          visited: activeStepId ? isStepVisited({
+            step,
+            activeStepId,
+            flatStepIds
+          }) : false
+        }, step.id);
+      })
+    })]
+  }));
+}));
+export const Stepper = StepperBase;