@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/commonjs/components/Stepper/Stepper.js

@@ -1,779 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Stepper = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _corners = require("../../utils/corners.js");
-var _hapticUtils = require("../../utils/hapticUtils.js");
-var _index2 = require("../Skeleton/index.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * `horizontal`: numbered circles in a row, joined by a line. `vertical`: the
- * same circles in a column, with a description beside each. `segmented`: a
- * "Step 1 of 3 · Label" caption over one bar per step, filled up to and
- * including the active step.
- */
-
-/**
- * What a tap on a step does. Steps always run in order: every step before
- * the active one is done, so a tap never leaves a gap. `none`: nothing, the
- * stepper only shows progress. `back`: a done step becomes the active one.
- * `select`: any step becomes the active one, and tapping the active step
- * again leaves none active.
- */
-
-const CIRCLE_SIZE = 24;
-const SEGMENT_HEIGHT = 4;
-const SEGMENT_GAP = 6;
-const PULSE_SIZE = 32;
-const PULSE_DURATION = 1100;
-const toneColorFor = (theme, tone) => {
-  switch (tone) {
-    case 'success':
-      return theme.colors.success;
-    case 'primary':
-    default:
-      return theme.colors.primary;
-  }
-};
-const StepCircle = ({
-  index,
-  step,
-  status,
-  toneColor,
-  upcomingColor,
-  upcomingFillColor,
-  textOnColor,
-  upcomingTextColor,
-  interactive,
-  canPress,
-  totalSteps,
-  onPress,
-  circleSize,
-  pulseSize,
-  pulseEnabled,
-  pulseDuration,
-  circleSlotStyle
-}) => {
-  const isActive = status === 'active';
-  const pulseScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
-  const pulseOpacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0.5)).current;
-  (0, _react.useEffect)(() => {
-    if (!isActive || !pulseEnabled) {
-      pulseScale.setValue(1);
-      pulseOpacity.setValue(0);
-      return;
-    }
-    // Native driver: this is a LOOP on `opacity` + `transform.scale`, and the
-    // view's other props are static, so there is no driver mixing. A looping
-    // animation is the one case where the JS thread cost is not negligible —
-    // it runs for as long as the step is active.
-    const loop = _reactNative.Animated.loop(_reactNative.Animated.parallel([_reactNative.Animated.sequence([_reactNative.Animated.timing(pulseScale, {
-      toValue: 1.4,
-      duration: pulseDuration,
-      easing: _reactNative.Easing.out(_reactNative.Easing.ease),
-      useNativeDriver: true
-    }), _reactNative.Animated.timing(pulseScale, {
-      toValue: 1,
-      duration: 0,
-      useNativeDriver: true
-    })]), _reactNative.Animated.sequence([_reactNative.Animated.timing(pulseOpacity, {
-      toValue: 0,
-      duration: pulseDuration,
-      easing: _reactNative.Easing.out(_reactNative.Easing.ease),
-      useNativeDriver: true
-    }), _reactNative.Animated.timing(pulseOpacity, {
-      toValue: 0.5,
-      duration: 0,
-      useNativeDriver: true
-    })])]));
-    loop.start();
-    return () => loop.stop();
-  }, [isActive, pulseScale, pulseOpacity, pulseEnabled, pulseDuration]);
-  const bgColor = status === 'upcoming' ? upcomingFillColor : toneColor;
-  const borderColor = status === 'upcoming' ? upcomingColor : toneColor;
-  const textColor = status === 'upcoming' ? upcomingTextColor : textOnColor;
-  const isComplete = status === 'complete';
-  const labelText = `Step ${index + 1} of ${totalSteps}, ${step.label}, ${status}`;
-  const inner = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: circleStyles.relative,
-    children: [isActive && pulseEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      pointerEvents: "none",
-      style: [circleStyles.pulse, {
-        width: pulseSize,
-        height: pulseSize,
-        borderRadius: pulseSize / 2,
-        ..._corners.smoothCorners,
-        backgroundColor: toneColor,
-        opacity: pulseOpacity,
-        transform: [{
-          scale: pulseScale
-        }]
-      }]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [circleStyles.circle, {
-        width: circleSize,
-        height: circleSize,
-        borderRadius: circleSize / 2,
-        ..._corners.smoothCorners,
-        backgroundColor: bgColor,
-        borderColor
-      }, circleSlotStyle],
-      children: step.icon ? step.icon : isComplete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [circleStyles.glyph, {
-          color: textColor
-        }],
-        children: '✓'
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [circleStyles.glyph, {
-          color: textColor
-        }],
-        children: index + 1
-      })
-    })]
-  });
-  if (interactive) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-      onPress: () => onPress(index),
-      disabled: !canPress,
-      accessibilityRole: "button",
-      accessibilityLabel: labelText,
-      accessibilityState: {
-        selected: isActive,
-        disabled: !canPress
-      },
-      hitSlop: 8,
-      children: inner
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    accessibilityRole: "text",
-    accessibilityLabel: labelText,
-    accessibilityState: {
-      selected: isActive
-    },
-    children: inner
-  });
-};
-const circleStyles = _reactNative.StyleSheet.create({
-  relative: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  pulse: {
-    position: 'absolute'
-  },
-  circle: {
-    borderWidth: 2,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  glyph: {
-    fontSize: 12,
-    fontWeight: '600',
-    includeFontPadding: false
-  }
-});
-const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    steps,
-    activeStep: activeStepProp,
-    defaultActiveStep = 0,
-    pressMode = 'none',
-    onStepPress,
-    onActiveStepChange,
-    variant = 'horizontal',
-    tone = 'primary',
-    formatCaption,
-    loading = false,
-    accessibilityLabel,
-    style,
-    containerStyle,
-    circleStyle,
-    labelStyle,
-    connectorStyle,
-    haptic,
-    testID
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const stepperTheme = theme.components.stepper;
-  const circleSize = stepperTheme?.circleSize ?? CIRCLE_SIZE;
-  const pulseSize = stepperTheme?.pulseSize ?? PULSE_SIZE;
-  const pulseEnabled = stepperTheme?.pulseAnimation ?? false;
-  const pulseDuration = stepperTheme?.pulseDuration ?? PULSE_DURATION;
-  const pressHaptic = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const toneColor = toneColorFor(theme, tone);
-  const upcomingColor = theme.colors.border.primary;
-  const upcomingFillColor = theme.colors.background.primary;
-  const upcomingTextColor = theme.colors.text.secondary;
-  const textOnColor = theme.colors.text.inverse;
-  const total = steps.length;
-  const interactive = pressMode !== 'none';
-
-  // Controlled when the prop is passed (even as null) and kept here
-  // otherwise, the Accordion / Carousel convention.
-  const activeControlled = activeStepProp !== undefined;
-  const [innerActive, setInnerActive] = (0, _react.useState)(defaultActiveStep);
-  const rawActive = activeControlled ? activeStepProp : innerActive;
-  const active = rawActive === null || rawActive === undefined || rawActive < 0 ? null : rawActive;
-
-  // The one status rule every variant draws from: steps run in order, so
-  // everything before the active step is done and nothing after it is.
-  const statusOf = i => {
-    if (active === null) {
-      return 'upcoming';
-    }
-    return i < active ? 'complete' : i === active ? 'active' : 'upcoming';
-  };
-  const statuses = steps.map((_, i) => statusOf(i));
-  const reachedCount = statuses.filter(st => st !== 'upcoming').length;
-  const doneCount = statuses.filter(st => st === 'complete').length;
-  const canPressStatus = status => pressMode === 'back' ? status === 'complete' : interactive;
-  const handleStepPress = i => {
-    if (!canPressStatus(statuses[i])) {
-      return;
-    }
-    if (pressHaptic) {
-      (0, _hapticUtils.triggerHaptic)(pressHaptic);
-    }
-    onStepPress?.(i);
-    const next = pressMode === 'select' && i === active ? null : i;
-    if (!activeControlled) {
-      setInnerActive(next);
-    }
-    onActiveStepChange?.(next);
-  };
-
-  // One animated value drives every line and bar: how many steps are
-  // reached, from 0 to the step count. Each segment reads only its own
-  // one-step slice of it, so a jump from step 1 to step 4 fills the
-  // segments in between one after another, like a single line drawing,
-  // rather than all at once. The run takes one motion step per step
-  // crossed, so every segment moves at the same pace however far the jump.
-  const reached = (0, _react.useRef)((0, _index.createAnimatedValue)(reachedCount)).current;
-  const lastReachedRef = (0, _react.useRef)(reachedCount);
-  (0, _react.useEffect)(() => {
-    const from = lastReachedRef.current;
-    if (from === reachedCount) {
-      return;
-    }
-    lastReachedRef.current = reachedCount;
-    const animation = _reactNative.Animated.timing(reached, {
-      toValue: reachedCount,
-      duration: theme.motion.duration.normal * Math.abs(reachedCount - from),
-      easing: _reactNative.Easing.linear,
-      useNativeDriver: false
-    });
-    animation.start();
-    return () => animation.stop();
-  }, [reachedCount, reached, theme.motion]);
-
-  // The share of a segment that is filled while `reached` passes [from, to].
-  const sliceOf = from => reached.interpolate({
-    inputRange: [from, from + 1],
-    outputRange: ['0%', '100%'],
-    extrapolate: 'clamp'
-  });
-  // Horizontal: one track from the first circle's centre to the last's. It
-  // is full when the last step is reached, so it spans reached counts 1 to
-  // the step count.
-  const widthInterp = total <= 1 ? '0%' : reached.interpolate({
-    inputRange: [1, total],
-    outputRange: ['0%', '100%'],
-    extrapolate: 'clamp'
-  });
-  const activeInRange = active !== null && active < total ? active : null;
-  const a11yLabel = accessibilityLabel ?? (activeInRange !== null ? `Progress: step ${activeInRange + 1} of ${total}` : `Progress: ${doneCount} of ${total} steps done`);
-
-  // Measure row width and inset the connector in pixels so it lines up
-  // with the flex-computed circle centres. Percentage insets (50/total%)
-  // round independently from flex layout on fractional-density screens
-  // and can leave the line poking past the first/last node by a pixel.
-  const [hRowWidth, setHRowWidth] = (0, _react.useState)(0);
-  const connectorInset = total > 0 && hRowWidth > 0 ? hRowWidth / (2 * total) : 0;
-  const renderHorizontal = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.hRow,
-    onLayout: e => setHRowWidth(e.nativeEvent.layout.width),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      pointerEvents: "none",
-      style: [styles.hConnectorContainer, {
-        left: connectorInset,
-        right: connectorInset
-      }, connectorStyle],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.hConnectorTrack, {
-          backgroundColor: upcomingColor
-        }]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-        style: [styles.hConnectorFill, {
-          backgroundColor: toneColor,
-          width: widthInterp
-        }]
-      })]
-    }), steps.map((step, i) => {
-      const status = statuses[i];
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.hStepItem,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StepCircle, {
-          index: i,
-          step: step,
-          status: status,
-          toneColor: toneColor,
-          upcomingColor: upcomingColor,
-          upcomingFillColor: upcomingFillColor,
-          onPressColor: toneColor,
-          textOnColor: textOnColor,
-          upcomingTextColor: upcomingTextColor,
-          interactive: interactive,
-          canPress: canPressStatus(status),
-          totalSteps: total,
-          onPress: handleStepPress,
-          circleSize: circleSize,
-          pulseSize: pulseSize,
-          pulseEnabled: pulseEnabled,
-          pulseDuration: pulseDuration,
-          circleSlotStyle: circleStyle
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.hLabel, {
-            color: status === 'upcoming' ? theme.colors.text.tertiary : theme.colors.text.primary,
-            fontSize: theme.typography.fontSize.xs
-          }, labelStyle],
-          numberOfLines: 1,
-          children: step?.label ?? ' '
-        })]
-      }, step.key);
-    })]
-  });
-  const renderVertical = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.vCol,
-    children: steps.map((step, i) => {
-      const status = statuses[i];
-      const isLast = i === total - 1;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.vRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.vLeft,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StepCircle, {
-            index: i,
-            step: step,
-            status: status,
-            toneColor: toneColor,
-            upcomingColor: upcomingColor,
-            upcomingFillColor: upcomingFillColor,
-            onPressColor: toneColor,
-            textOnColor: textOnColor,
-            upcomingTextColor: upcomingTextColor,
-            interactive: interactive,
-            canPress: canPressStatus(status),
-            totalSteps: total,
-            onPress: handleStepPress,
-            circleSize: circleSize,
-            pulseSize: pulseSize,
-            pulseEnabled: pulseEnabled,
-            pulseDuration: pulseDuration,
-            circleSlotStyle: circleStyle
-          }), !isLast ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: [styles.vConnectorContainer, connectorStyle],
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [styles.vConnectorTrack, {
-                backgroundColor: upcomingColor
-              }]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-              style: [styles.vConnectorFill, {
-                backgroundColor: toneColor,
-                // Full once the step below is reached, empty otherwise, and
-                // swept in its turn as the reached count passes it.
-                // Step i + 1 is reached once the count passes i + 2.
-                height: sliceOf(i + 1)
-              }]
-            })]
-          }) : null]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.vBody,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.vLabel, {
-              color: status === 'upcoming' ? theme.colors.text.tertiary : theme.colors.text.primary,
-              fontSize: theme.typography.fontSize.base,
-              fontWeight: theme.typography.fontWeight.semibold
-            }, labelStyle],
-            numberOfLines: 1,
-            children: step?.label ?? ' '
-          }), step.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.vDescription, {
-              color: theme.colors.text.secondary,
-              fontSize: theme.typography.fontSize.sm
-            }],
-            numberOfLines: 3,
-            children: step.description
-          }) : null]
-        })]
-      }, step.key);
-    })
-  });
-  const renderSegmented = () => {
-    const shownStep = activeInRange !== null ? steps[activeInRange] : undefined;
-    const caption = formatCaption ? formatCaption(activeInRange, total, shownStep) : activeInRange !== null ? `Step ${activeInRange + 1} of ${total}${shownStep?.label ? ` · ${shownStep.label}` : ''}` : `${doneCount} of ${total} done`;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.sCaption, {
-          color: theme.colors.text.secondary,
-          fontSize: theme.typography.fontSize.sm,
-          marginBottom: theme.spacing.sm
-        }, labelStyle],
-        numberOfLines: 1,
-        children: caption
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.sRow,
-        children: steps.map((step, i) => {
-          const status = statuses[i];
-          const labelText = `Step ${i + 1} of ${total}, ${step.label}, ${status}`;
-          const bar = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            testID: testID ? `${testID}-segment-${i}` : undefined,
-            style: [styles.sTrack, {
-              backgroundColor: upcomingColor
-            }, connectorStyle],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-              style: [styles.sFill, {
-                backgroundColor: toneColor,
-                width: sliceOf(i)
-              }]
-            })
-          });
-          if (interactive) {
-            const canPress = canPressStatus(status);
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-              style: styles.sItem,
-              onPress: () => handleStepPress(i),
-              disabled: !canPress,
-              accessibilityRole: "button",
-              accessibilityLabel: labelText,
-              accessibilityState: {
-                selected: status === 'active',
-                disabled: !canPress
-              }
-              // A 4 pt bar is too thin to hit; the slop makes a 28 pt target.
-              ,
-              hitSlop: {
-                top: 12,
-                bottom: 12
-              },
-              children: bar
-            }, step.key);
-          }
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.sItem,
-            accessibilityRole: "text",
-            accessibilityLabel: labelText,
-            accessibilityState: {
-              selected: status === 'active'
-            },
-            children: bar
-          }, step.key);
-        })
-      })]
-    });
-  };
-  const rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    ref: ref,
-    style: [styles.container, containerStyle, style],
-    testID: testID,
-    accessibilityRole: "progressbar",
-    accessibilityLabel: a11yLabel,
-    accessibilityValue: {
-      min: 0,
-      max: total,
-      now: reachedCount
-    },
-    children: variant === 'segmented' ? renderSegmented() : variant === 'vertical' ? renderVertical() : renderHorizontal()
-  });
-  if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperSkeleton, {
-      ...props
-    });
-  }
-  return rendered;
-});
-Stepper.displayName = 'Stepper';
-
-/**
- * Authored placeholder shape for `<Stepper>`. Mirrors the real horizontal
- * layout — a row of circles spaced evenly with a flat connector bar passing
- * through their centers — so the on-screen footprint doesn't reflow when
- * data loads. Vertical variant gets a stacked column with the same circle +
- * label + description pattern.
- *
- * Attached as the `Skeleton` static so `<SkeletonContent>` and any consumer
- * of the auto-walker substitutes this shape automatically. Also rendered
- * directly when `loading` is true on the live `<Stepper>`.
- */
-const StepperSkeleton = ({
-  steps,
-  variant = 'horizontal',
-  containerStyle,
-  style,
-  testID
-}) => {
-  const theme = (0, _index.useTheme)();
-  const stepperTheme = theme.components.stepper;
-  const circleSize = stepperTheme?.circleSize ?? CIRCLE_SIZE;
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const total = steps.length || 3;
-  if (variant === 'segmented') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.container, containerStyle, style],
-      testID: testID,
-      accessibilityRole: "progressbar",
-      accessibilityState: {
-        busy: true
-      },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-        shape: "text",
-        width: "45%",
-        height: 14,
-        style: {
-          marginBottom: theme.spacing.sm
-        }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.sRow,
-        children: Array.from({
-          length: total
-        }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.sItem,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-            width: "100%",
-            height: SEGMENT_HEIGHT,
-            radius: SEGMENT_HEIGHT / 2
-          })
-        }, `sk-step-${i}`))
-      })]
-    });
-  }
-  if (variant === 'vertical') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.container, containerStyle, style],
-      testID: testID,
-      accessibilityRole: "progressbar",
-      accessibilityState: {
-        busy: true
-      },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: skeletonStyles.vCol,
-        children: Array.from({
-          length: total
-        }).map((_, i) => {
-          const isLast = i === total - 1;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: skeletonStyles.vRow,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: [skeletonStyles.vLeft, {
-                width: circleSize + 8
-              }],
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-                shape: "circle",
-                width: circleSize,
-                height: circleSize
-              }), !isLast ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-                width: 2,
-                height: 36
-              }) : null]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: skeletonStyles.vBody,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-                shape: "text",
-                width: "55%",
-                height: 16,
-                style: {
-                  marginBottom: 4
-                }
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-                shape: "text",
-                width: "80%",
-                height: 12
-              })]
-            })]
-          }, `sk-step-${i}`);
-        })
-      })
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.container, containerStyle, style],
-    testID: testID,
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.hRow,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        pointerEvents: "none",
-        style: [styles.hConnectorContainer, {
-          left: `${50 / total}%`,
-          right: `${50 / total}%`
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-          width: "100%",
-          height: 2,
-          radius: 1
-        })
-      }), Array.from({
-        length: total
-      }).map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.hStepItem,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-          shape: "circle",
-          width: circleSize,
-          height: circleSize
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Skeleton, {
-          shape: "text",
-          width: "80%",
-          height: 12,
-          style: {
-            marginTop: theme.spacing.xs
-          }
-        })]
-      }, `sk-step-${i}`))]
-    })
-  });
-};
-StepperSkeleton.displayName = 'StepperSkeleton';
-Stepper.Skeleton = StepperSkeleton;
-const skeletonStyles = _reactNative.StyleSheet.create({
-  vCol: {
-    flexDirection: 'column'
-  },
-  vRow: {
-    flexDirection: 'row',
-    alignItems: 'flex-start'
-  },
-  vLeft: {
-    alignItems: 'center'
-  },
-  vBody: {
-    flex: 1,
-    paddingLeft: 12,
-    paddingBottom: 16
-  }
-});
-const buildStyles = theme => _reactNative.StyleSheet.create({
-  container: {
-    width: '100%'
-  },
-  // Horizontal
-  hRow: {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    position: 'relative'
-  },
-  hConnectorContainer: {
-    position: 'absolute',
-    top: CIRCLE_SIZE / 2 - 1,
-    height: 2,
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  hConnectorTrack: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    height: 2,
-    borderRadius: 1,
-    ..._corners.smoothCorners
-  },
-  hConnectorFill: {
-    position: 'absolute',
-    left: 0,
-    height: 2,
-    borderRadius: 1,
-    ..._corners.smoothCorners
-  },
-  hStepItem: {
-    alignItems: 'center',
-    flex: 1
-  },
-  hLabel: {
-    marginTop: theme.spacing.xs,
-    textAlign: 'center'
-  },
-  // Vertical
-  vCol: {
-    flexDirection: 'column'
-  },
-  vRow: {
-    flexDirection: 'row',
-    alignItems: 'flex-start'
-  },
-  // Stretches to the row's height so the connector below the circle,
-  // which takes the rest of the column, reaches the next circle however
-  // many lines the description runs to.
-  vLeft: {
-    alignItems: 'center',
-    alignSelf: 'stretch',
-    width: CIRCLE_SIZE + 8
-  },
-  // Runs from one circle's edge to the next with no gap, as the horizontal
-  // line does. The minimum is the old 24 plus the two 4 pt gaps it used to
-  // leave, so the spacing between steps is unchanged.
-  vConnectorContainer: {
-    flex: 1,
-    width: 2,
-    minHeight: 32,
-    position: 'relative',
-    alignSelf: 'center'
-  },
-  vConnectorTrack: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    width: 2,
-    borderRadius: 1,
-    ..._corners.smoothCorners
-  },
-  vConnectorFill: {
-    position: 'absolute',
-    top: 0,
-    width: 2,
-    borderRadius: 1,
-    ..._corners.smoothCorners
-  },
-  vBody: {
-    flex: 1,
-    paddingLeft: theme.spacing.sm,
-    paddingBottom: theme.spacing.md
-  },
-  vLabel: {
-    marginBottom: 2
-  },
-  vDescription: {},
-  // Segmented
-  sCaption: {
-    includeFontPadding: false
-  },
-  sRow: {
-    flexDirection: 'row',
-    columnGap: SEGMENT_GAP
-  },
-  sItem: {
-    flex: 1
-  },
-  // No smooth corners on a 4 pt bar, and the fill rounds itself rather
-  // than relying on the track's clip.
-  sTrack: {
-    height: SEGMENT_HEIGHT,
-    borderRadius: SEGMENT_HEIGHT / 2,
-    overflow: 'hidden'
-  },
-  sFill: {
-    height: SEGMENT_HEIGHT,
-    borderRadius: SEGMENT_HEIGHT / 2
-  }
-});
-var _default = exports.default = Stepper;
-//# sourceMappingURL=Stepper.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Stepper=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_index2=require("../Skeleton/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var s,n,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(s=t?r:i){if(s.has(e))return s.get(e);s.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?s(o,t,n):o[t]=e[t]);return o})(e,t)}const CIRCLE_SIZE=24,SEGMENT_HEIGHT=4,SEGMENT_GAP=6,PULSE_SIZE=32,PULSE_DURATION=1100,toneColorFor=(e,t)=>"success"===t?e.colors.success:e.colors.primary,toneOnColorFor=(e,t)=>"success"===t?e.colors.onSuccess:e.colors.onPrimary,StepCircle=({index:e,step:t,status:i,toneColor:r,upcomingColor:s,upcomingFillColor:n,textOnColor:o,upcomingTextColor:a,interactive:l,canPress:c,totalSteps:u,onPress:p,circleSize:d,pulseSize:m,pulseEnabled:x,pulseDuration:_,circleSlotStyle:h})=>{const y="active"===i,v=(0,_react.useRef)((0,_index.createAnimatedValue)(1)).current,g=(0,_react.useRef)((0,_index.createAnimatedValue)(.5)).current;(0,_react.useEffect)(()=>{if(!y||!x)return v.setValue(1),void g.setValue(0);const e=_reactNative.Animated.loop(_reactNative.Animated.parallel([_reactNative.Animated.sequence([_reactNative.Animated.timing(v,{toValue:1.4,duration:_,easing:_reactNative.Easing.out(_reactNative.Easing.ease),useNativeDriver:!0}),_reactNative.Animated.timing(v,{toValue:1,duration:0,useNativeDriver:!0})]),_reactNative.Animated.sequence([_reactNative.Animated.timing(g,{toValue:0,duration:_,easing:_reactNative.Easing.out(_reactNative.Easing.ease),useNativeDriver:!0}),_reactNative.Animated.timing(g,{toValue:.5,duration:0,useNativeDriver:!0})])]));return e.start(),()=>e.stop()},[y,v,g,x,_]);const j="upcoming"===i?n:r,S="upcoming"===i?s:r,b="upcoming"===i?a:o,f="complete"===i,R=`Step ${e+1} of ${u}, ${t.label}, ${i}`,w=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:circleStyles.relative,children:[y&&x?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[circleStyles.pulse,{width:m,height:m,borderRadius:m/2,..._corners.smoothCorners,backgroundColor:r,opacity:g,transform:[{scale:v}]}]}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:[circleStyles.circle,{width:d,height:d,borderRadius:d/2,..._corners.smoothCorners,backgroundColor:j,borderColor:S},h],children:t.icon?t.icon:f?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[circleStyles.glyph,{color:b}],children:"✓"}):(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[circleStyles.glyph,{color:b}],children:e+1})})]});return l?(0,_jsxRuntime.jsx)(_reactNative.Pressable,{onPress:()=>p(e),disabled:!c,accessibilityRole:"button",accessibilityLabel:R,accessibilityState:{selected:y,disabled:!c},hitSlop:8,children:w}):(0,_jsxRuntime.jsx)(_reactNative.View,{accessibilityRole:"text",accessibilityLabel:R,accessibilityState:{selected:y},children:w})},circleStyles=_reactNative.StyleSheet.create({relative:{alignItems:"center",justifyContent:"center"},pulse:{position:"absolute"},circle:{borderWidth:2,alignItems:"center",justifyContent:"center"},glyph:{fontSize:12,fontWeight:"600",includeFontPadding:!1}}),Stepper=exports.Stepper=(0,_react.forwardRef)((e,t)=>{const{steps:i,activeStep:r,defaultActiveStep:s=0,pressMode:n="none",onStepPress:o,onActiveStepChange:a,variant:l="horizontal",tone:c="primary",formatCaption:u,showCaption:p=!0,loading:d=!1,accessibilityLabel:m,style:x,containerStyle:_,circleStyle:h,labelStyle:y,connectorStyle:v,haptic:g,testID:j}=e,S=(0,_index.useTheme)(),b=S.components.stepper,f=b?.circleSize??24,R=b?.pulseSize??32,w=b?.pulseAnimation??!1,C=b?.pulseDuration??1100,N=(0,_hapticUtils.resolveHaptic)(g,"selection"),k=(0,_react.useMemo)(()=>buildStyles(S),[S]),V=toneColorFor(S,c),I=S.colors.border.primary,D=S.colors.background.primary,A=S.colors.text.secondary,P=toneOnColorFor(S,c),E=i.length,L="none"!==n,T=void 0!==r,[$,z]=(0,_react.useState)(s),F=T?r:$,O=null==F||F<0?null:F,q=i.map((e,t)=>(e=>null===O?"upcoming":e<O?"complete":e===O?"active":"upcoming")(t)),M=q.filter(e=>"upcoming"!==e).length,B=q.filter(e=>"complete"===e).length,canPressStatus=e=>"back"===n?"complete"===e:L,handleStepPress=e=>{if(!canPressStatus(q[e]))return;N&&(0,_hapticUtils.triggerHaptic)(N),o?.(e);const t="select"===n&&e===O?null:e;T||z(t),a?.(t)},W=(0,_react.useRef)((0,_index.createAnimatedValue)(M)).current,U=(0,_react.useRef)(M);(0,_react.useEffect)(()=>{const e=U.current;if(e===M)return;U.current=M;const t=_reactNative.Animated.timing(W,{toValue:M,duration:S.motion.duration.normal*Math.abs(M-e),easing:_reactNative.Easing.linear,useNativeDriver:!1});return t.start(),()=>t.stop()},[M,W,S.motion]);const sliceOf=e=>W.interpolate({inputRange:[e,e+1],outputRange:["0%","100%"],extrapolate:"clamp"}),G=E<=1?"0%":W.interpolate({inputRange:[1,E],outputRange:["0%","100%"],extrapolate:"clamp"}),H=null!==O&&O<E?O:null,Z=m??(null!==H?`Progress: step ${H+1} of ${E}`:`Progress: ${B} of ${E} steps done`),[J,K]=(0,_react.useState)(0),Q=E>0&&J>0?J/(2*E):0,X=(0,_jsxRuntime.jsx)(_reactNative.View,{ref:t,style:[k.container,_,x],testID:j,accessibilityRole:"progressbar",accessibilityLabel:Z,accessibilityValue:{min:0,max:E,now:M},children:"segmented"===l?(()=>{const e=null!==H?i[H]:void 0,t=p?u?u(H,E,e):null!==H?`Step ${H+1} of ${E}${e?.label?` · ${e.label}`:""}`:`${B} of ${E} done`:"";return(0,_jsxRuntime.jsxs)(_reactNative.View,{children:[p?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.sCaption,{color:S.colors.text.secondary,fontSize:S.typography.fontSize.sm,marginBottom:S.spacing.sm},y],numberOfLines:1,children:t}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:k.sRow,children:i.map((e,t)=>{const i=q[t],r=`Step ${t+1} of ${E}, ${e.label}, ${i}`,s=(0,_jsxRuntime.jsx)(_reactNative.View,{testID:j?`${j}-segment-${t}`:void 0,style:[k.sTrack,{backgroundColor:I},v],children:(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[k.sFill,{backgroundColor:V,width:sliceOf(t)}]})});if(L){const n=canPressStatus(i);return(0,_jsxRuntime.jsx)(_reactNative.Pressable,{style:k.sItem,onPress:()=>handleStepPress(t),disabled:!n,accessibilityRole:"button",accessibilityLabel:r,accessibilityState:{selected:"active"===i,disabled:!n},hitSlop:{top:12,bottom:12},children:s},e.key)}return(0,_jsxRuntime.jsx)(_reactNative.View,{style:k.sItem,accessibilityRole:"text",accessibilityLabel:r,accessibilityState:{selected:"active"===i},children:s},e.key)})})]})})():"vertical"===l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:k.vCol,children:i.map((e,t)=>{const i=q[t],r=t===E-1;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:k.vRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:k.vLeft,children:[(0,_jsxRuntime.jsx)(StepCircle,{index:t,step:e,status:i,toneColor:V,upcomingColor:I,upcomingFillColor:D,onPressColor:V,textOnColor:P,upcomingTextColor:A,interactive:L,canPress:canPressStatus(i),totalSteps:E,onPress:handleStepPress,circleSize:f,pulseSize:R,pulseEnabled:w,pulseDuration:C,circleSlotStyle:h}),r?null:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[k.vConnectorContainer,v],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.vConnectorTrack,{backgroundColor:I}]}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[k.vConnectorFill,{backgroundColor:V,height:sliceOf(t+1)}]})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:k.vBody,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.vLabel,{color:"upcoming"===i?S.colors.text.tertiary:S.colors.text.primary,fontSize:S.typography.fontSize.base,fontWeight:S.typography.fontWeight.semibold},y],numberOfLines:1,children:e?.label??" "}),e.description?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.vDescription,{color:S.colors.text.secondary,fontSize:S.typography.fontSize.sm}],numberOfLines:3,children:e.description}):null]})]},e.key)})}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:k.hRow,onLayout:e=>K(e.nativeEvent.layout.width),children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{pointerEvents:"none",style:[k.hConnectorContainer,{left:Q,right:Q},v],children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[k.hConnectorTrack,{backgroundColor:I}]}),(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:[k.hConnectorFill,{backgroundColor:V,width:G}]})]}),i.map((e,t)=>{const i=q[t];return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:k.hStepItem,children:[(0,_jsxRuntime.jsx)(StepCircle,{index:t,step:e,status:i,toneColor:V,upcomingColor:I,upcomingFillColor:D,onPressColor:V,textOnColor:P,upcomingTextColor:A,interactive:L,canPress:canPressStatus(i),totalSteps:E,onPress:handleStepPress,circleSize:f,pulseSize:R,pulseEnabled:w,pulseDuration:C,circleSlotStyle:h}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[k.hLabel,{color:"upcoming"===i?S.colors.text.tertiary:S.colors.text.primary,fontSize:S.typography.fontSize.xs},y],numberOfLines:1,children:e?.label??" "})]},e.key)})]})});return d?(0,_jsxRuntime.jsx)(StepperSkeleton,{...e}):X});Stepper.displayName="Stepper";const StepperSkeleton=({steps:e,variant:t="horizontal",showCaption:i=!0,containerStyle:r,style:s,testID:n})=>{const o=(0,_index.useTheme)(),a=o.components.stepper,l=a?.circleSize??24,c=(0,_react.useMemo)(()=>buildStyles(o),[o]),u=e.length||3;return"segmented"===t?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[c.container,r,s],testID:n,accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:[i?(0,_jsxRuntime.jsx)(_index2.Skeleton,{shape:"text",width:"45%",height:14,style:{marginBottom:o.spacing.sm}}):null,(0,_jsxRuntime.jsx)(_reactNative.View,{style:c.sRow,children:Array.from({length:u}).map((e,t)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:c.sItem,children:(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:"100%",height:4,radius:2})},`sk-step-${t}`))})]}):"vertical"===t?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[c.container,r,s],testID:n,accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:skeletonStyles.vCol,children:Array.from({length:u}).map((e,t)=>{const i=t===u-1;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:skeletonStyles.vRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[skeletonStyles.vLeft,{width:l+8}],children:[(0,_jsxRuntime.jsx)(_index2.Skeleton,{shape:"circle",width:l,height:l}),i?null:(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:2,height:36})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:skeletonStyles.vBody,children:[(0,_jsxRuntime.jsx)(_index2.Skeleton,{shape:"text",width:"55%",height:16,style:{marginBottom:4}}),(0,_jsxRuntime.jsx)(_index2.Skeleton,{shape:"text",width:"80%",height:12})]})]},`sk-step-${t}`)})})}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:[c.container,r,s],testID:n,accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:c.hRow,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[c.hConnectorContainer,{left:50/u+"%",right:50/u+"%"}],children:(0,_jsxRuntime.jsx)(_index2.Skeleton,{width:"100%",height:2,radius:1})}),Array.from({length:u}).map((e,t)=>(0,_jsxRuntime.jsxs)(_reactNative.View,{style:c.hStepItem,children:[(0,_jsxRuntime.jsx)(_index2.Skeleton,{shape:"circle",width:l,height:l}),(0,_jsxRuntime.jsx)(_index2.Skeleton,{shape:"text",width:"80%",height:12,style:{marginTop:o.spacing.xs}})]},`sk-step-${t}`))]})})};StepperSkeleton.displayName="StepperSkeleton",Stepper.Skeleton=StepperSkeleton;const skeletonStyles=_reactNative.StyleSheet.create({vCol:{flexDirection:"column"},vRow:{flexDirection:"row",alignItems:"flex-start"},vLeft:{alignItems:"center"},vBody:{flex:1,paddingLeft:12,paddingBottom:16}}),buildStyles=e=>_reactNative.StyleSheet.create({container:{width:"100%"},hRow:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",position:"relative"},hConnectorContainer:{position:"absolute",top:11,height:2,flexDirection:"row",alignItems:"center"},hConnectorTrack:{position:"absolute",left:0,right:0,height:2,borderRadius:1,..._corners.smoothCorners},hConnectorFill:{position:"absolute",left:0,height:2,borderRadius:1,..._corners.smoothCorners},hStepItem:{alignItems:"center",flex:1},hLabel:{marginTop:e.spacing.xs,textAlign:"center"},vCol:{flexDirection:"column"},vRow:{flexDirection:"row",alignItems:"flex-start"},vLeft:{alignItems:"center",alignSelf:"stretch",width:32},vConnectorContainer:{flex:1,width:2,minHeight:32,position:"relative",alignSelf:"center"},vConnectorTrack:{position:"absolute",top:0,bottom:0,width:2,borderRadius:1,..._corners.smoothCorners},vConnectorFill:{position:"absolute",top:0,width:2,borderRadius:1,..._corners.smoothCorners},vBody:{flex:1,paddingLeft:e.spacing.sm,paddingBottom:e.spacing.md},vLabel:{marginBottom:2},vDescription:{},sCaption:{includeFontPadding:!1},sRow:{flexDirection:"row",columnGap:6},sItem:{flex:1},sTrack:{height:4,borderRadius:2,overflow:"hidden"},sFill:{height:4,borderRadius:2}});var _default=exports.default=Stepper;