@webority/mobile-ui 0.0.39 → 0.2.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
+"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";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";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:o,upcomingColor:s,upcomingFillColor:l,textOnColor:n,upcomingTextColor:r,interactive:a,canPress:c,totalSteps:p,onPress:u,circleSize:d,pulseSize:h,pulseEnabled:m,pulseDuration:y,circleSlotStyle:g})=>{const S="active"===i,x=useRef(createAnimatedValue(1)).current,b=useRef(createAnimatedValue(.5)).current;useEffect(()=>{if(!S||!m)return x.setValue(1),void b.setValue(0);const e=Animated.loop(Animated.parallel([Animated.sequence([Animated.timing(x,{toValue:1.4,duration:y,easing:Easing.out(Easing.ease),useNativeDriver:!0}),Animated.timing(x,{toValue:1,duration:0,useNativeDriver:!0})]),Animated.sequence([Animated.timing(b,{toValue:0,duration:y,easing:Easing.out(Easing.ease),useNativeDriver:!0}),Animated.timing(b,{toValue:.5,duration:0,useNativeDriver:!0})])]));return e.start(),()=>e.stop()},[S,x,b,m,y]);const f="upcoming"===i?l:o,w="upcoming"===i?s:o,C="upcoming"===i?r:n,v="complete"===i,j=`Step ${e+1} of ${p}, ${t.label}, ${i}`,_=_jsxs(View,{style:circleStyles.relative,children:[S&&m?_jsx(Animated.View,{pointerEvents:"none",style:[circleStyles.pulse,{width:h,height:h,borderRadius:h/2,...smoothCorners,backgroundColor:o,opacity:b,transform:[{scale:x}]}]}):null,_jsx(View,{style:[circleStyles.circle,{width:d,height:d,borderRadius:d/2,...smoothCorners,backgroundColor:f,borderColor:w},g],children:t.icon?t.icon:_jsx(Text,v?{style:[circleStyles.glyph,{color:C}],children:"✓"}:{style:[circleStyles.glyph,{color:C}],children:e+1})})]});return a?_jsx(Pressable,{onPress:()=>u(e),disabled:!c,accessibilityRole:"button",accessibilityLabel:j,accessibilityState:{selected:S,disabled:!c},hitSlop:8,children:_}):_jsx(View,{accessibilityRole:"text",accessibilityLabel:j,accessibilityState:{selected:S},children:_})},circleStyles=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=forwardRef((e,t)=>{const{steps:i,activeStep:o,defaultActiveStep:s=0,pressMode:l="none",onStepPress:n,onActiveStepChange:r,variant:a="horizontal",tone:c="primary",formatCaption:p,showCaption:u=!0,loading:d=!1,accessibilityLabel:h,style:m,containerStyle:y,circleStyle:g,labelStyle:S,connectorStyle:x,haptic:b,testID:f}=e,w=useTheme(),C=w.components.stepper,v=C?.circleSize??24,j=C?.pulseSize??32,_=C?.pulseAnimation??!1,V=C?.pulseDuration??1100,k=resolveHaptic(b,"selection"),R=useMemo(()=>buildStyles(w),[w]),I=toneColorFor(w,c),A=w.colors.border.primary,D=w.colors.background.primary,E=w.colors.text.secondary,L=toneOnColorFor(w,c),T=i.length,$="none"!==l,P=void 0!==o,[z,F]=useState(s),B=P?o:z,N=null==B||B<0?null:B,O=i.map((e,t)=>(e=>null===N?"upcoming":e<N?"complete":e===N?"active":"upcoming")(t)),H=O.filter(e=>"upcoming"!==e).length,M=O.filter(e=>"complete"===e).length,canPressStatus=e=>"back"===l?"complete"===e:$,handleStepPress=e=>{if(!canPressStatus(O[e]))return;k&&triggerHaptic(k),n?.(e);const t="select"===l&&e===N?null:e;P||F(t),r?.(t)},G=useRef(createAnimatedValue(H)).current,U=useRef(H);useEffect(()=>{const e=U.current;if(e===H)return;U.current=H;const t=Animated.timing(G,{toValue:H,duration:w.motion.duration.normal*Math.abs(H-e),easing:Easing.linear,useNativeDriver:!1});return t.start(),()=>t.stop()},[H,G,w.motion]);const sliceOf=e=>G.interpolate({inputRange:[e,e+1],outputRange:["0%","100%"],extrapolate:"clamp"}),W=T<=1?"0%":G.interpolate({inputRange:[1,T],outputRange:["0%","100%"],extrapolate:"clamp"}),q=null!==N&&N<T?N:null,Z=h??(null!==q?`Progress: step ${q+1} of ${T}`:`Progress: ${M} of ${T} steps done`),[J,K]=useState(0),Q=T>0&&J>0?J/(2*T):0,X=_jsx(View,{ref:t,style:[R.container,y,m],testID:f,accessibilityRole:"progressbar",accessibilityLabel:Z,accessibilityValue:{min:0,max:T,now:H},children:"segmented"===a?(()=>{const e=null!==q?i[q]:void 0,t=u?p?p(q,T,e):null!==q?`Step ${q+1} of ${T}${e?.label?` · ${e.label}`:""}`:`${M} of ${T} done`:"";return _jsxs(View,{children:[u?_jsx(Text,{style:[R.sCaption,{color:w.colors.text.secondary,fontSize:w.typography.fontSize.sm,marginBottom:w.spacing.sm},S],numberOfLines:1,children:t}):null,_jsx(View,{style:R.sRow,children:i.map((e,t)=>{const i=O[t],o=`Step ${t+1} of ${T}, ${e.label}, ${i}`,s=_jsx(View,{testID:f?`${f}-segment-${t}`:void 0,style:[R.sTrack,{backgroundColor:A},x],children:_jsx(Animated.View,{style:[R.sFill,{backgroundColor:I,width:sliceOf(t)}]})});if($){const l=canPressStatus(i);return _jsx(Pressable,{style:R.sItem,onPress:()=>handleStepPress(t),disabled:!l,accessibilityRole:"button",accessibilityLabel:o,accessibilityState:{selected:"active"===i,disabled:!l},hitSlop:{top:12,bottom:12},children:s},e.key)}return _jsx(View,{style:R.sItem,accessibilityRole:"text",accessibilityLabel:o,accessibilityState:{selected:"active"===i},children:s},e.key)})})]})})():"vertical"===a?_jsx(View,{style:R.vCol,children:i.map((e,t)=>{const i=O[t],o=t===T-1;return _jsxs(View,{style:R.vRow,children:[_jsxs(View,{style:R.vLeft,children:[_jsx(StepCircle,{index:t,step:e,status:i,toneColor:I,upcomingColor:A,upcomingFillColor:D,onPressColor:I,textOnColor:L,upcomingTextColor:E,interactive:$,canPress:canPressStatus(i),totalSteps:T,onPress:handleStepPress,circleSize:v,pulseSize:j,pulseEnabled:_,pulseDuration:V,circleSlotStyle:g}),o?null:_jsxs(View,{style:[R.vConnectorContainer,x],children:[_jsx(View,{style:[R.vConnectorTrack,{backgroundColor:A}]}),_jsx(Animated.View,{style:[R.vConnectorFill,{backgroundColor:I,height:sliceOf(t+1)}]})]})]}),_jsxs(View,{style:R.vBody,children:[_jsx(Text,{style:[R.vLabel,{color:"upcoming"===i?w.colors.text.tertiary:w.colors.text.primary,fontSize:w.typography.fontSize.base,fontWeight:w.typography.fontWeight.semibold},S],numberOfLines:1,children:e?.label??" "}),e.description?_jsx(Text,{style:[R.vDescription,{color:w.colors.text.secondary,fontSize:w.typography.fontSize.sm}],numberOfLines:3,children:e.description}):null]})]},e.key)})}):_jsxs(View,{style:R.hRow,onLayout:e=>K(e.nativeEvent.layout.width),children:[_jsxs(View,{pointerEvents:"none",style:[R.hConnectorContainer,{left:Q,right:Q},x],children:[_jsx(View,{style:[R.hConnectorTrack,{backgroundColor:A}]}),_jsx(Animated.View,{style:[R.hConnectorFill,{backgroundColor:I,width:W}]})]}),i.map((e,t)=>{const i=O[t];return _jsxs(View,{style:R.hStepItem,children:[_jsx(StepCircle,{index:t,step:e,status:i,toneColor:I,upcomingColor:A,upcomingFillColor:D,onPressColor:I,textOnColor:L,upcomingTextColor:E,interactive:$,canPress:canPressStatus(i),totalSteps:T,onPress:handleStepPress,circleSize:v,pulseSize:j,pulseEnabled:_,pulseDuration:V,circleSlotStyle:g}),_jsx(Text,{style:[R.hLabel,{color:"upcoming"===i?w.colors.text.tertiary:w.colors.text.primary,fontSize:w.typography.fontSize.xs},S],numberOfLines:1,children:e?.label??" "})]},e.key)})]})});return d?_jsx(StepperSkeleton,{...e}):X});Stepper.displayName="Stepper";const StepperSkeleton=({steps:e,variant:t="horizontal",showCaption:i=!0,containerStyle:o,style:s,testID:l})=>{const n=useTheme(),r=n.components.stepper,a=r?.circleSize??24,c=useMemo(()=>buildStyles(n),[n]),p=e.length||3;return"segmented"===t?_jsxs(View,{style:[c.container,o,s],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:[i?_jsx(Skeleton,{shape:"text",width:"45%",height:14,style:{marginBottom:n.spacing.sm}}):null,_jsx(View,{style:c.sRow,children:Array.from({length:p}).map((e,t)=>_jsx(View,{style:c.sItem,children:_jsx(Skeleton,{width:"100%",height:4,radius:2})},`sk-step-${t}`))})]}):_jsx(View,"vertical"===t?{style:[c.container,o,s],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:_jsx(View,{style:skeletonStyles.vCol,children:Array.from({length:p}).map((e,t)=>{const i=t===p-1;return _jsxs(View,{style:skeletonStyles.vRow,children:[_jsxs(View,{style:[skeletonStyles.vLeft,{width:a+8}],children:[_jsx(Skeleton,{shape:"circle",width:a,height:a}),i?null:_jsx(Skeleton,{width:2,height:36})]}),_jsxs(View,{style:skeletonStyles.vBody,children:[_jsx(Skeleton,{shape:"text",width:"55%",height:16,style:{marginBottom:4}}),_jsx(Skeleton,{shape:"text",width:"80%",height:12})]})]},`sk-step-${t}`)})})}:{style:[c.container,o,s],testID:l,accessibilityRole:"progressbar",accessibilityState:{busy:!0},children:_jsxs(View,{style:c.hRow,children:[_jsx(View,{pointerEvents:"none",style:[c.hConnectorContainer,{left:50/p+"%",right:50/p+"%"}],children:_jsx(Skeleton,{width:"100%",height:2,radius:1})}),Array.from({length:p}).map((e,t)=>_jsxs(View,{style:c.hStepItem,children:[_jsx(Skeleton,{shape:"circle",width:a,height:a}),_jsx(Skeleton,{shape:"text",width:"80%",height:12,style:{marginTop:n.spacing.xs}})]},`sk-step-${t}`))]})})};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}}),buildStyles=e=>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,...smoothCorners},hConnectorFill:{position:"absolute",left:0,height:2,borderRadius:1,...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,...smoothCorners},vConnectorFill:{position:"absolute",top:0,width:2,borderRadius:1,...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}});export{Stepper};export default Stepper;