@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/components/Stepper/Stepper.js

@@ -1,775 +1 @@
-"use strict";
-
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
-import { createAnimatedValue, useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
-import { Skeleton } from "../Skeleton/index.js";
-
-/**
- * `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.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 = useRef(createAnimatedValue(1)).current;
-  const pulseOpacity = useRef(createAnimatedValue(0.5)).current;
-  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 = Animated.loop(Animated.parallel([Animated.sequence([Animated.timing(pulseScale, {
-      toValue: 1.4,
-      duration: pulseDuration,
-      easing: Easing.out(Easing.ease),
-      useNativeDriver: true
-    }), Animated.timing(pulseScale, {
-      toValue: 1,
-      duration: 0,
-      useNativeDriver: true
-    })]), Animated.sequence([Animated.timing(pulseOpacity, {
-      toValue: 0,
-      duration: pulseDuration,
-      easing: Easing.out(Easing.ease),
-      useNativeDriver: true
-    }), 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__*/_jsxs(View, {
-    style: circleStyles.relative,
-    children: [isActive && pulseEnabled ? /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [circleStyles.pulse, {
-        width: pulseSize,
-        height: pulseSize,
-        borderRadius: pulseSize / 2,
-        ...smoothCorners,
-        backgroundColor: toneColor,
-        opacity: pulseOpacity,
-        transform: [{
-          scale: pulseScale
-        }]
-      }]
-    }) : null, /*#__PURE__*/_jsx(View, {
-      style: [circleStyles.circle, {
-        width: circleSize,
-        height: circleSize,
-        borderRadius: circleSize / 2,
-        ...smoothCorners,
-        backgroundColor: bgColor,
-        borderColor
-      }, circleSlotStyle],
-      children: step.icon ? step.icon : isComplete ? /*#__PURE__*/_jsx(Text, {
-        style: [circleStyles.glyph, {
-          color: textColor
-        }],
-        children: '✓'
-      }) : /*#__PURE__*/_jsx(Text, {
-        style: [circleStyles.glyph, {
-          color: textColor
-        }],
-        children: index + 1
-      })
-    })]
-  });
-  if (interactive) {
-    return /*#__PURE__*/_jsx(Pressable, {
-      onPress: () => onPress(index),
-      disabled: !canPress,
-      accessibilityRole: "button",
-      accessibilityLabel: labelText,
-      accessibilityState: {
-        selected: isActive,
-        disabled: !canPress
-      },
-      hitSlop: 8,
-      children: inner
-    });
-  }
-  return /*#__PURE__*/_jsx(View, {
-    accessibilityRole: "text",
-    accessibilityLabel: labelText,
-    accessibilityState: {
-      selected: isActive
-    },
-    children: inner
-  });
-};
-const circleStyles = 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 = /*#__PURE__*/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 = 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 = resolveHaptic(haptic, 'selection');
-  const styles = 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] = 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) {
-      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 = useRef(createAnimatedValue(reachedCount)).current;
-  const lastReachedRef = useRef(reachedCount);
-  useEffect(() => {
-    const from = lastReachedRef.current;
-    if (from === reachedCount) {
-      return;
-    }
-    lastReachedRef.current = reachedCount;
-    const animation = Animated.timing(reached, {
-      toValue: reachedCount,
-      duration: theme.motion.duration.normal * Math.abs(reachedCount - from),
-      easing: 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] = useState(0);
-  const connectorInset = total > 0 && hRowWidth > 0 ? hRowWidth / (2 * total) : 0;
-  const renderHorizontal = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.hRow,
-    onLayout: e => setHRowWidth(e.nativeEvent.layout.width),
-    children: [/*#__PURE__*/_jsxs(View, {
-      pointerEvents: "none",
-      style: [styles.hConnectorContainer, {
-        left: connectorInset,
-        right: connectorInset
-      }, connectorStyle],
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.hConnectorTrack, {
-          backgroundColor: upcomingColor
-        }]
-      }), /*#__PURE__*/_jsx(Animated.View, {
-        style: [styles.hConnectorFill, {
-          backgroundColor: toneColor,
-          width: widthInterp
-        }]
-      })]
-    }), steps.map((step, i) => {
-      const status = statuses[i];
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.hStepItem,
-        children: [/*#__PURE__*/_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__*/_jsx(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__*/_jsx(View, {
-    style: styles.vCol,
-    children: steps.map((step, i) => {
-      const status = statuses[i];
-      const isLast = i === total - 1;
-      return /*#__PURE__*/_jsxs(View, {
-        style: styles.vRow,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.vLeft,
-          children: [/*#__PURE__*/_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__*/_jsxs(View, {
-            style: [styles.vConnectorContainer, connectorStyle],
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.vConnectorTrack, {
-                backgroundColor: upcomingColor
-              }]
-            }), /*#__PURE__*/_jsx(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__*/_jsxs(View, {
-          style: styles.vBody,
-          children: [/*#__PURE__*/_jsx(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__*/_jsx(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__*/_jsxs(View, {
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [styles.sCaption, {
-          color: theme.colors.text.secondary,
-          fontSize: theme.typography.fontSize.sm,
-          marginBottom: theme.spacing.sm
-        }, labelStyle],
-        numberOfLines: 1,
-        children: caption
-      }), /*#__PURE__*/_jsx(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__*/_jsx(View, {
-            testID: testID ? `${testID}-segment-${i}` : undefined,
-            style: [styles.sTrack, {
-              backgroundColor: upcomingColor
-            }, connectorStyle],
-            children: /*#__PURE__*/_jsx(Animated.View, {
-              style: [styles.sFill, {
-                backgroundColor: toneColor,
-                width: sliceOf(i)
-              }]
-            })
-          });
-          if (interactive) {
-            const canPress = canPressStatus(status);
-            return /*#__PURE__*/_jsx(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__*/_jsx(View, {
-            style: styles.sItem,
-            accessibilityRole: "text",
-            accessibilityLabel: labelText,
-            accessibilityState: {
-              selected: status === 'active'
-            },
-            children: bar
-          }, step.key);
-        })
-      })]
-    });
-  };
-  const rendered = /*#__PURE__*/_jsx(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__*/_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 = useTheme();
-  const stepperTheme = theme.components.stepper;
-  const circleSize = stepperTheme?.circleSize ?? CIRCLE_SIZE;
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const total = steps.length || 3;
-  if (variant === 'segmented') {
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.container, containerStyle, style],
-      testID: testID,
-      accessibilityRole: "progressbar",
-      accessibilityState: {
-        busy: true
-      },
-      children: [/*#__PURE__*/_jsx(Skeleton, {
-        shape: "text",
-        width: "45%",
-        height: 14,
-        style: {
-          marginBottom: theme.spacing.sm
-        }
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.sRow,
-        children: Array.from({
-          length: total
-        }).map((_, i) => /*#__PURE__*/_jsx(View, {
-          style: styles.sItem,
-          children: /*#__PURE__*/_jsx(Skeleton, {
-            width: "100%",
-            height: SEGMENT_HEIGHT,
-            radius: SEGMENT_HEIGHT / 2
-          })
-        }, `sk-step-${i}`))
-      })]
-    });
-  }
-  if (variant === 'vertical') {
-    return /*#__PURE__*/_jsx(View, {
-      style: [styles.container, containerStyle, style],
-      testID: testID,
-      accessibilityRole: "progressbar",
-      accessibilityState: {
-        busy: true
-      },
-      children: /*#__PURE__*/_jsx(View, {
-        style: skeletonStyles.vCol,
-        children: Array.from({
-          length: total
-        }).map((_, i) => {
-          const isLast = i === total - 1;
-          return /*#__PURE__*/_jsxs(View, {
-            style: skeletonStyles.vRow,
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: [skeletonStyles.vLeft, {
-                width: circleSize + 8
-              }],
-              children: [/*#__PURE__*/_jsx(Skeleton, {
-                shape: "circle",
-                width: circleSize,
-                height: circleSize
-              }), !isLast ? /*#__PURE__*/_jsx(Skeleton, {
-                width: 2,
-                height: 36
-              }) : null]
-            }), /*#__PURE__*/_jsxs(View, {
-              style: skeletonStyles.vBody,
-              children: [/*#__PURE__*/_jsx(Skeleton, {
-                shape: "text",
-                width: "55%",
-                height: 16,
-                style: {
-                  marginBottom: 4
-                }
-              }), /*#__PURE__*/_jsx(Skeleton, {
-                shape: "text",
-                width: "80%",
-                height: 12
-              })]
-            })]
-          }, `sk-step-${i}`);
-        })
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.container, containerStyle, style],
-    testID: testID,
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.hRow,
-      children: [/*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        style: [styles.hConnectorContainer, {
-          left: `${50 / total}%`,
-          right: `${50 / total}%`
-        }],
-        children: /*#__PURE__*/_jsx(Skeleton, {
-          width: "100%",
-          height: 2,
-          radius: 1
-        })
-      }), Array.from({
-        length: total
-      }).map((_, i) => /*#__PURE__*/_jsxs(View, {
-        style: styles.hStepItem,
-        children: [/*#__PURE__*/_jsx(Skeleton, {
-          shape: "circle",
-          width: circleSize,
-          height: circleSize
-        }), /*#__PURE__*/_jsx(Skeleton, {
-          shape: "text",
-          width: "80%",
-          height: 12,
-          style: {
-            marginTop: theme.spacing.xs
-          }
-        })]
-      }, `sk-step-${i}`))]
-    })
-  });
-};
-StepperSkeleton.displayName = 'StepperSkeleton';
-Stepper.Skeleton = StepperSkeleton;
-const skeletonStyles = StyleSheet.create({
-  vCol: {
-    flexDirection: 'column'
-  },
-  vRow: {
-    flexDirection: 'row',
-    alignItems: 'flex-start'
-  },
-  vLeft: {
-    alignItems: 'center'
-  },
-  vBody: {
-    flex: 1,
-    paddingLeft: 12,
-    paddingBottom: 16
-  }
-});
-const buildStyles = theme => 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,
-    ...smoothCorners
-  },
-  hConnectorFill: {
-    position: 'absolute',
-    left: 0,
-    height: 2,
-    borderRadius: 1,
-    ...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,
-    ...smoothCorners
-  },
-  vConnectorFill: {
-    position: 'absolute',
-    top: 0,
-    width: 2,
-    borderRadius: 1,
-    ...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
-  }
-});
-export { Stepper };
-export default Stepper;
-//# sourceMappingURL=Stepper.js.map
+import e,{forwardRef as t,useEffect as o,useMemo as i,useRef as l,useState as n}from"react";import{Animated as r,Easing as s,Pressable as c,StyleSheet as a,Text as p,View as d}from"react-native";import{createAnimatedValue as u,useTheme as h}from"../../theme/index.js";import{smoothCorners as m}from"../../utils/corners.js";import{resolveHaptic as y,triggerHaptic as g}from"../../utils/hapticUtils.js";import{Skeleton as b}from"../Skeleton/index.js";import{jsx as f,jsxs as v}from"react/jsx-runtime";const StepCircle=({index:e,step:t,status:i,toneColor:n,upcomingColor:a,upcomingFillColor:h,textOnColor:y,upcomingTextColor:g,interactive:b,canPress:C,totalSteps:x,onPress:w,circleSize:R,pulseSize:k,pulseEnabled:D,pulseDuration:I,circleSlotStyle:$})=>{const L="active"===i,z=l(u(1)).current,P=l(u(.5)).current;o(()=>{if(!L||!D)return z.setValue(1),void P.setValue(0);const e=r.loop(r.parallel([r.sequence([r.timing(z,{toValue:1.4,duration:I,easing:s.out(s.ease),useNativeDriver:!0}),r.timing(z,{toValue:1,duration:0,useNativeDriver:!0})]),r.sequence([r.timing(P,{toValue:0,duration:I,easing:s.out(s.ease),useNativeDriver:!0}),r.timing(P,{toValue:.5,duration:0,useNativeDriver:!0})])]));return e.start(),()=>e.stop()},[L,z,P,D,I]);const V="upcoming"===i?h:n,F="upcoming"===i?a:n,T="upcoming"===i?g:y,j="complete"===i,B=`Step ${e+1} of ${x}, ${t.label}, ${i}`,A=v(d,{style:S.relative,children:[L&&D?f(r.View,{pointerEvents:"none",style:[S.pulse,{width:k,height:k,borderRadius:k/2,...m,backgroundColor:n,opacity:P,transform:[{scale:z}]}]}):null,f(d,{style:[S.circle,{width:R,height:R,borderRadius:R/2,...m,backgroundColor:V,borderColor:F},$],children:t.icon?t.icon:f(p,j?{style:[S.glyph,{color:T}],children:"✓"}:{style:[S.glyph,{color:T}],children:e+1})})]});return b?f(c,{onPress:()=>w(e),disabled:!C,accessibilityRole:"button",accessibilityLabel:B,accessibilityState:{selected:L,disabled:!C},hitSlop:8,children:A}):f(d,{accessibilityRole:"text",accessibilityLabel:B,accessibilityState:{selected:L},children:A})},S=a.create({relative:{alignItems:"center",justifyContent:"center"},pulse:{position:"absolute"},circle:{borderWidth:2,alignItems:"center",justifyContent:"center"},glyph:{fontSize:12,fontWeight:"600",includeFontPadding:!1}}),C=t((e,t)=>{const{steps:a,activeStep:m,defaultActiveStep:b=0,pressMode:S="none",onStepPress:C,onActiveStepChange:x,variant:w="horizontal",tone:R="primary",formatCaption:k,showCaption:D=!0,loading:I=!1,accessibilityLabel:$,style:L,containerStyle:z,circleStyle:P,labelStyle:V,connectorStyle:F,haptic:T,testID:j}=e,B=h(),A=B.components.stepper,E=A?.circleSize??24,N=A?.pulseSize??32,O=A?.pulseAnimation??!1,W=A?.pulseDuration??1100,q=y(T,"selection"),M=i(()=>buildStyles(B),[B]),G=((e,t)=>"success"===t?e.colors.success:e.colors.primary)(B,R),H=B.colors.border.primary,U=B.colors.background.primary,J=B.colors.text.secondary,K=((e,t)=>"success"===t?e.colors.onSuccess:e.colors.onPrimary)(B,R),Q=a.length,X="none"!==S,Y=void 0!==m,[Z,_]=n(b),ee=Y?m:Z,te=null==ee||ee<0?null:ee,oe=a.map((e,t)=>(e=>null===te?"upcoming":e<te?"complete":e===te?"active":"upcoming")(t)),ie=oe.filter(e=>"upcoming"!==e).length,le=oe.filter(e=>"complete"===e).length,canPressStatus=e=>"back"===S?"complete"===e:X,handleStepPress=e=>{if(!canPressStatus(oe[e]))return;q&&g(q),C?.(e);const t="select"===S&&e===te?null:e;Y||_(t),x?.(t)},ne=l(u(ie)).current,re=l(ie);o(()=>{const e=re.current;if(e===ie)return;re.current=ie;const t=r.timing(ne,{toValue:ie,duration:B.motion.duration.normal*Math.abs(ie-e),easing:s.linear,useNativeDriver:!1});return t.start(),()=>t.stop()},[ie,ne,B.motion]);const sliceOf=e=>ne.interpolate({inputRange:[e,e+1],outputRange:["0%","100%"],extrapolate:"clamp"}),se=Q<=1?"0%":ne.interpolate({inputRange:[1,Q],outputRange:["0%","100%"],extrapolate:"clamp"}),ce=null!==te&&te<Q?te:null,ae=$??(null!==ce?`Progress: step ${ce+1} of ${Q}`:`Progress: ${le} of ${Q} steps done`),[pe,de]=n(0),ue=Q>0&&pe>0?pe/(2*Q):0,he=f(d,{ref:t,style:[M.container,z,L],testID:j,accessibilityRole:"progressbar",accessibilityLabel:ae,accessibilityValue:{min:0,max:Q,now:ie},children:"segmented"===w?(()=>{const e=null!==ce?a[ce]:void 0,t=D?k?k(ce,Q,e):null!==ce?`Step ${ce+1} of ${Q}${e?.label?` · ${e.label}`:""}`:`${le} of ${Q} done`:"";return v(d,{children:[D?f(p,{style:[M.sCaption,{color:B.colors.text.secondary,fontSize:B.typography.fontSize.sm,marginBottom:B.spacing.sm},V],numberOfLines:1,children:t}):null,f(d,{style:M.sRow,children:a.map((e,t)=>{const o=oe[t],i=`Step ${t+1} of ${Q}, ${e.label}, ${o}`,l=f(d,{testID:j?`${j}-segment-${t}`:void 0,style:[M.sTrack,{backgroundColor:H},F],children:f(r.View,{style:[M.sFill,{backgroundColor:G,width:sliceOf(t)}]})});if(X){const n=canPressStatus(o);return f(c,{style:M.sItem,onPress:()=>handleStepPress(t),disabled:!n,accessibilityRole:"button",accessibilityLabel:i,accessibilityState:{selected:"active"===o,disabled:!n},hitSlop:{top:12,bottom:12},children:l},e.key)}return f(d,{style:M.sItem,accessibilityRole:"text",accessibilityLabel:i,accessibilityState:{selected:"active"===o},children:l},e.key)})})]})})():"vertical"===w?f(d,{style:M.vCol,children:a.map((e,t)=>{const o=oe[t],i=t===Q-1;return v(d,{style:M.vRow,children:[v(d,{style:M.vLeft,children:[f(StepCircle,{index:t,step:e,status:o,toneColor:G,upcomingColor:H,upcomingFillColor:U,onPressColor:G,textOnColor:K,upcomingTextColor:J,interactive:X,canPress:canPressStatus(o),totalSteps:Q,onPress:handleStepPress,circleSize:E,pulseSize:N,pulseEnabled:O,pulseDuration:W,circleSlotStyle:P}),i?null:v(d,{style:[M.vConnectorContainer,F],children:[f(d,{style:[M.vConnectorTrack,{backgroundColor:H}]}),f(r.View,{style:[M.vConnectorFill,{backgroundColor:G,height:sliceOf(t+1)}]})]})]}),v(d,{style:M.vBody,children:[f(p,{style:[M.vLabel,{color:"upcoming"===o?B.colors.text.tertiary:B.colors.text.primary,fontSize:B.typography.fontSize.base,fontWeight:B.typography.fontWeight.semibold},V],numberOfLines:1,children:e?.label??" "}),e.description?f(p,{style:[M.vDescription,{color:B.colors.text.secondary,fontSize:B.typography.fontSize.sm}],numberOfLines:3,children:e.description}):null]})]},e.key)})}):v(d,{style:M.hRow,onLayout:e=>de(e.nativeEvent.layout.width),children:[v(d,{pointerEvents:"none",style:[M.hConnectorContainer,{left:ue,right:ue},F],children:[f(d,{style:[M.hConnectorTrack,{backgroundColor:H}]}),f(r.View,{style:[M.hConnectorFill,{backgroundColor:G,width:se}]})]}),a.map((e,t)=>{const o=oe[t];return v(d,{style:M.hStepItem,children:[f(StepCircle,{index:t,step:e,status:o,toneColor:G,upcomingColor:H,upcomingFillColor:U,onPressColor:G,textOnColor:K,upcomingTextColor:J,interactive:X,canPress:canPressStatus(o),totalSteps:Q,onPress:handleStepPress,circleSize:E,pulseSize:N,pulseEnabled:O,pulseDuration:W,circleSlotStyle:P}),f(p,{style:[M.hLabel,{color:"upcoming"===o?B.colors.text.tertiary:B.colors.text.primary,fontSize:B.typography.fontSize.xs},V],numberOfLines:1,children:e?.label??" "})]},e.key)})]})});return I?f(StepperSkeleton,{...e}):he});C.displayName="Stepper";const StepperSkeleton=({steps:e,variant:t="horizontal",showCaption:o=!0,containerStyle:l,style:n,testID:r})=>{const s=h(),c=s.components.stepper,a=c?.circleSize??24,p=i(()=>buildStyles(s),[s]),u=e.length||3;return"segmented"===t?v(d,{style:[p.container,l,n],testID:r,accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:[o?f(b,{shape:"text",width:"45%",height:14,style:{marginBottom:s.spacing.sm}}):null,f(d,{style:p.sRow,children:Array.from({length:u}).map((e,t)=>f(d,{style:p.sItem,children:f(b,{width:"100%",height:4,radius:2})},`sk-step-${t}`))})]}):f(d,"vertical"===t?{style:[p.container,l,n],testID:r,accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:f(d,{style:x.vCol,children:Array.from({length:u}).map((e,t)=>{const o=t===u-1;return v(d,{style:x.vRow,children:[v(d,{style:[x.vLeft,{width:a+8}],children:[f(b,{shape:"circle",width:a,height:a}),o?null:f(b,{width:2,height:36})]}),v(d,{style:x.vBody,children:[f(b,{shape:"text",width:"55%",height:16,style:{marginBottom:4}}),f(b,{shape:"text",width:"80%",height:12})]})]},`sk-step-${t}`)})})}:{style:[p.container,l,n],testID:r,accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:v(d,{style:p.hRow,children:[f(d,{pointerEvents:"none",style:[p.hConnectorContainer,{left:50/u+"%",right:50/u+"%"}],children:f(b,{width:"100%",height:2,radius:1})}),Array.from({length:u}).map((e,t)=>v(d,{style:p.hStepItem,children:[f(b,{shape:"circle",width:a,height:a}),f(b,{shape:"text",width:"80%",height:12,style:{marginTop:s.spacing.xs}})]},`sk-step-${t}`))]})})};StepperSkeleton.displayName="StepperSkeleton",C.Skeleton=StepperSkeleton;const x=a.create({vCol:{flexDirection:"column"},vRow:{flexDirection:"row",alignItems:"flex-start"},vLeft:{alignItems:"center"},vBody:{flex:1,paddingLeft:12,paddingBottom:16}}),buildStyles=e=>a.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,...m},hConnectorFill:{position:"absolute",left:0,height:2,borderRadius:1,...m},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,...m},vConnectorFill:{position:"absolute",top:0,width:2,borderRadius:1,...m},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}});export{C as Stepper};export default C;