@webority-technologies/mobile 0.0.14 → 0.0.20

package/lib/commonjs/components/Slider/Slider.js

@@ -52,10 +52,27 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     formatLabel = defaultFormatLabel,
     accessibilityLabel,
     style,
+    containerStyle,
+    trackStyle,
+    fillStyle,
+    thumbStyle,
+    labelStyle,
+    thumbPressScale,
+    labelShowDuration,
+    labelOpacity: labelOpacityProp,
     testID
   } = props;
   const theme = (0, _index.useTheme)();
-  const sizeCfg = SIZE_MAP[size];
+  const sliderTheme = theme.components.slider;
+  const sliderSizeTheme = sliderTheme?.[size];
+  const sizeCfg = {
+    trackHeight: sliderSizeTheme?.trackHeight ?? SIZE_MAP[size].trackHeight,
+    thumbDiameter: sliderSizeTheme?.thumbDiameter ?? SIZE_MAP[size].thumbDiameter
+  };
+  const thumbPressAnimationEnabled = sliderTheme?.thumbPressAnimation ?? false;
+  const resolvedPressScale = thumbPressScale ?? sliderTheme?.thumbPressScale ?? 1.1;
+  const resolvedLabelDuration = labelShowDuration ?? sliderTheme?.labelShowDuration ?? theme.motion.duration.fast;
+  const resolvedLabelOpacity = labelOpacityProp ?? sliderTheme?.labelOpacity ?? 1;
   const styles = (0, _react.useMemo)(() => buildStyles(theme, sizeCfg), [theme, sizeCfg]);
 
   // Track layout (width + x offset within container)
@@ -146,22 +163,24 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     }
   }, [isRange, props]);
   const animateThumbPress = (0, _react.useCallback)((target, opacity, pressed) => {
-    _reactNative.Animated.spring(target, {
-      toValue: pressed ? 1.1 : 1,
-      damping: theme.motion.spring.snappy.damping,
-      stiffness: theme.motion.spring.snappy.stiffness,
-      mass: theme.motion.spring.snappy.mass,
-      useNativeDriver: true
-    }).start();
+    if (thumbPressAnimationEnabled) {
+      _reactNative.Animated.spring(target, {
+        toValue: pressed ? resolvedPressScale : 1,
+        damping: theme.motion.spring.snappy.damping,
+        stiffness: theme.motion.spring.snappy.stiffness,
+        mass: theme.motion.spring.snappy.mass,
+        useNativeDriver: true
+      }).start();
+    }
     if (showLabel) {
       _reactNative.Animated.timing(opacity, {
-        toValue: pressed ? 1 : 0,
-        duration: theme.motion.duration.fast,
+        toValue: pressed ? resolvedLabelOpacity : 0,
+        duration: resolvedLabelDuration,
         easing: _reactNative.Easing.out(_reactNative.Easing.cubic),
         useNativeDriver: true
       }).start();
     }
-  }, [showLabel, theme.motion]);
+  }, [showLabel, theme.motion, thumbPressAnimationEnabled, resolvedPressScale, resolvedLabelDuration, resolvedLabelOpacity]);
 
   // Build PanResponder for a thumb.
   const buildResponder = (0, _react.useCallback)(which => {
@@ -171,7 +190,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       onPanResponderGrant: () => {
         dragOffsetRef.current = which === 'low' ? valueToPx(lowRef.current, trackWidth) : valueToPx(highRef.current, trackWidth);
         animateThumbPress(which === 'low' ? lowScale : highScale, which === 'low' ? lowLabelOpacity : highLabelOpacity, true);
-        (0, _index2.triggerHaptic)('selection');
+        if (sliderTheme?.dragHaptic ?? false) (0, _index2.triggerHaptic)('selection');
       },
       onPanResponderMove: (_evt, gesture) => {
         if (trackWidth <= 0) return;
@@ -180,7 +199,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         if (which === 'low') {
           if (isRange && nextValue > highRef.current) nextValue = highRef.current;
           if (nextValue !== lastReportedLow.current) {
-            (0, _index2.triggerHaptic)('selection');
+            if (sliderTheme?.stepHaptic ?? false) (0, _index2.triggerHaptic)('selection');
             lastReportedLow.current = nextValue;
           }
           lowRef.current = nextValue;
@@ -189,7 +208,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         } else {
           if (isRange && nextValue < lowRef.current) nextValue = lowRef.current;
           if (nextValue !== lastReportedHigh.current) {
-            (0, _index2.triggerHaptic)('selection');
+            if (sliderTheme?.stepHaptic ?? false) (0, _index2.triggerHaptic)('selection');
             lastReportedHigh.current = nextValue;
           }
           highRef.current = nextValue;
@@ -216,7 +235,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     const px = clamp(e.nativeEvent.locationX, 0, trackWidth);
     const next = pxToValue(px, trackWidth);
     if (next !== lowRef.current) {
-      (0, _index2.triggerHaptic)('selection');
+      if (sliderTheme?.tapHaptic ?? false) (0, _index2.triggerHaptic)('selection');
       lowRef.current = next;
       lastReportedLow.current = next;
       _reactNative.Animated.timing(lowX, {
@@ -239,7 +258,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         lowRef.current = nextLow;
         lastReportedLow.current = nextLow;
         (0, _index.setNativeValue)(lowX, valueToPx(nextLow, trackWidth));
-        (0, _index2.triggerHaptic)('selection');
+        if (sliderTheme?.a11yHaptic ?? false) (0, _index2.triggerHaptic)('selection');
         fireChange(nextLow, highRef.current);
       }
     } else {
@@ -248,11 +267,11 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         lowRef.current = next;
         lastReportedLow.current = next;
         (0, _index.setNativeValue)(lowX, valueToPx(next, trackWidth));
-        (0, _index2.triggerHaptic)('selection');
+        if (sliderTheme?.a11yHaptic ?? false) (0, _index2.triggerHaptic)('selection');
         fireChange(next, next);
       }
     }
-  }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, fireChange]);
+  }, [disabled, step, isRange, min, max, valueToPx, trackWidth, lowX, fireChange, sliderTheme]);
 
   // Computed values for fill bar.
   const fillLeft = isRange ? lowX : new _reactNative.Animated.Value(0);
@@ -264,7 +283,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const highDisplayValue = highRef.current;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     ref: ref,
-    style: [styles.container, style],
+    style: [styles.container, containerStyle, style],
     testID: testID,
     accessibilityRole: "adjustable",
     accessibilityLabel: accessibilityLabel,
@@ -294,14 +313,14 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
           style: [styles.track, {
             backgroundColor: disabled ? theme.colors.surface.disabled : theme.colors.border.primary
-          }]
+          }, trackStyle]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
           style: [styles.fill, {
             left: fillLeft,
             width: fillWidth,
             backgroundColor: disabled ? theme.colors.surface.disabled : fillColor,
             opacity: disabled ? 0.6 : 1
-          }]
+          }, fillStyle]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
           ...lowResponder.panHandlers,
           style: [styles.thumb, {
@@ -316,7 +335,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
               scale: lowScale
             }],
             opacity: disabled ? 0.6 : 1
-          }],
+          }, thumbStyle],
           accessibilityElementsHidden: true,
           importantForAccessibility: "no-hide-descendants",
           children: showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
@@ -326,7 +345,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             }],
             pointerEvents: "none",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.bubbleText,
+              style: [styles.bubbleText, labelStyle],
               children: formatLabel(lowDisplayValue)
             })
           }) : null
@@ -344,7 +363,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
               scale: highScale
             }],
             opacity: disabled ? 0.6 : 1
-          }],
+          }, thumbStyle],
           accessibilityElementsHidden: true,
           importantForAccessibility: "no-hide-descendants",
           children: showLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
@@ -354,7 +373,7 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
             }],
             pointerEvents: "none",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.bubbleText,
+              style: [styles.bubbleText, labelStyle],
               children: formatLabel(highDisplayValue)
             })
           }) : null

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

@@ -13,6 +13,7 @@ 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); }
 const CIRCLE_SIZE = 24;
 const PULSE_SIZE = 32;
+const PULSE_DURATION = 1100;
 const toneColorFor = (theme, tone) => {
   switch (tone) {
     case 'success':
@@ -33,13 +34,19 @@ const StepCircle = ({
   upcomingTextColor,
   interactive,
   totalSteps,
-  onPress
+  onPress,
+  circleSize,
+  pulseSize,
+  pulseEnabled,
+  pulseDuration,
+  pressHapticEnabled,
+  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) {
+    if (!isActive || !pulseEnabled) {
       pulseScale.setValue(1);
       pulseOpacity.setValue(0);
       return;
@@ -51,7 +58,7 @@ const StepCircle = ({
     // positioned view is negligible.
     const loop = _reactNative.Animated.loop(_reactNative.Animated.parallel([_reactNative.Animated.sequence([_reactNative.Animated.timing(pulseScale, {
       toValue: 1.4,
-      duration: 1100,
+      duration: pulseDuration,
       easing: _reactNative.Easing.out(_reactNative.Easing.ease),
       useNativeDriver: false
     }), _reactNative.Animated.timing(pulseScale, {
@@ -60,7 +67,7 @@ const StepCircle = ({
       useNativeDriver: false
     })]), _reactNative.Animated.sequence([_reactNative.Animated.timing(pulseOpacity, {
       toValue: 0,
-      duration: 1100,
+      duration: pulseDuration,
       easing: _reactNative.Easing.out(_reactNative.Easing.ease),
       useNativeDriver: false
     }), _reactNative.Animated.timing(pulseOpacity, {
@@ -70,7 +77,7 @@ const StepCircle = ({
     })])]));
     loop.start();
     return () => loop.stop();
-  }, [isActive, pulseScale, pulseOpacity]);
+  }, [isActive, pulseScale, pulseOpacity, pulseEnabled, pulseDuration]);
   const bgColor = status === 'upcoming' ? upcomingFillColor : toneColor;
   const borderColor = status === 'upcoming' ? upcomingColor : toneColor;
   const textColor = status === 'upcoming' ? upcomingTextColor : textOnColor;
@@ -79,17 +86,17 @@ const StepCircle = ({
   const canPress = interactive && status === 'complete';
   const handlePress = () => {
     if (!canPress) return;
-    (0, _hapticUtils.triggerHaptic)('selection');
+    if (pressHapticEnabled) (0, _hapticUtils.triggerHaptic)('selection');
     onPress?.(index);
   };
   const inner = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: circleStyles.relative,
-    children: [isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    children: [isActive && pulseEnabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       pointerEvents: "none",
       style: [circleStyles.pulse, {
-        width: PULSE_SIZE,
-        height: PULSE_SIZE,
-        borderRadius: PULSE_SIZE / 2,
+        width: pulseSize,
+        height: pulseSize,
+        borderRadius: pulseSize / 2,
         backgroundColor: toneColor,
         opacity: pulseOpacity,
         transform: [{
@@ -98,12 +105,12 @@ const StepCircle = ({
       }]
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [circleStyles.circle, {
-        width: CIRCLE_SIZE,
-        height: CIRCLE_SIZE,
-        borderRadius: CIRCLE_SIZE / 2,
+        width: circleSize,
+        height: circleSize,
+        borderRadius: circleSize / 2,
         backgroundColor: bgColor,
         borderColor
-      }],
+      }, circleSlotStyle],
       children: step.icon ? step.icon : isComplete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [circleStyles.glyph, {
           color: textColor
@@ -164,21 +171,32 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
     steps,
     activeStep,
     onStepPress,
+    allowStepPress = false,
     variant = 'horizontal',
     tone = 'primary',
     loading = false,
     accessibilityLabel,
     style,
+    containerStyle,
+    circleStyle,
+    labelStyle,
+    connectorStyle,
     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 pressHapticEnabled = stepperTheme?.pressHaptic ?? false;
   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 interactive = typeof onStepPress === 'function';
+  const interactive = allowStepPress && typeof onStepPress === 'function';
   const total = steps.length;
 
   // Connector progress: animates as activeStep changes.
@@ -205,15 +223,22 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
     outputRange: ['0%', '100%']
   });
   const a11yLabel = accessibilityLabel ?? `Progress: step ${activeStep + 1} of ${total}`;
-  const halfStepPct = total > 0 ? `${50 / total}%` : `0%`;
+
+  // 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: halfStepPct,
-        right: halfStepPct
-      }],
+        left: connectorInset,
+        right: connectorInset
+      }, connectorStyle],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: [styles.hConnectorTrack, {
           backgroundColor: upcomingColor
@@ -240,12 +265,18 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
           upcomingTextColor: upcomingTextColor,
           interactive: interactive,
           totalSteps: total,
-          onPress: onStepPress
+          onPress: onStepPress,
+          circleSize: circleSize,
+          pulseSize: pulseSize,
+          pulseEnabled: pulseEnabled,
+          pulseDuration: pulseDuration,
+          pressHapticEnabled: pressHapticEnabled,
+          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 ?? ' '
         })]
@@ -273,9 +304,15 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
             upcomingTextColor: upcomingTextColor,
             interactive: interactive,
             totalSteps: total,
-            onPress: onStepPress
+            onPress: onStepPress,
+            circleSize: circleSize,
+            pulseSize: pulseSize,
+            pulseEnabled: pulseEnabled,
+            pulseDuration: pulseDuration,
+            pressHapticEnabled: pressHapticEnabled,
+            circleSlotStyle: circleStyle
           }), !isLast ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: styles.vConnectorContainer,
+            style: [styles.vConnectorContainer, connectorStyle],
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
               style: [styles.vConnectorTrack, {
                 backgroundColor: upcomingColor
@@ -294,7 +331,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
               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, {
@@ -311,7 +348,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
   });
   const rendered = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     ref: ref,
-    style: [styles.container, style],
+    style: [styles.container, containerStyle, style],
     testID: testID,
     accessibilityRole: "progressbar",
     accessibilityLabel: a11yLabel,
@@ -323,15 +360,148 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
     children: variant === 'horizontal' ? renderHorizontal() : renderVertical()
   });
   if (loading) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    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 === '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: 28,
+                style: {
+                  marginTop: 4,
+                  marginBottom: 4
+                }
+              }) : 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%'