@webority-technologies/mobile 0.0.15 → 0.0.20

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

@@ -1,13 +1,14 @@
 "use strict";
 
-import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
-import { SkeletonContent } from "../Skeleton/index.js";
+import { Skeleton } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CIRCLE_SIZE = 24;
 const PULSE_SIZE = 32;
+const PULSE_DURATION = 1100;
 const toneColorFor = (theme, tone) => {
   switch (tone) {
     case 'success':
@@ -28,13 +29,19 @@ const StepCircle = ({
   upcomingTextColor,
   interactive,
   totalSteps,
-  onPress
+  onPress,
+  circleSize,
+  pulseSize,
+  pulseEnabled,
+  pulseDuration,
+  pressHapticEnabled,
+  circleSlotStyle
 }) => {
   const isActive = status === 'active';
   const pulseScale = useRef(createAnimatedValue(1)).current;
   const pulseOpacity = useRef(createAnimatedValue(0.5)).current;
   useEffect(() => {
-    if (!isActive) {
+    if (!isActive || !pulseEnabled) {
       pulseScale.setValue(1);
       pulseOpacity.setValue(0);
       return;
@@ -46,7 +53,7 @@ const StepCircle = ({
     // positioned view is negligible.
     const loop = Animated.loop(Animated.parallel([Animated.sequence([Animated.timing(pulseScale, {
       toValue: 1.4,
-      duration: 1100,
+      duration: pulseDuration,
       easing: Easing.out(Easing.ease),
       useNativeDriver: false
     }), Animated.timing(pulseScale, {
@@ -55,7 +62,7 @@ const StepCircle = ({
       useNativeDriver: false
     })]), Animated.sequence([Animated.timing(pulseOpacity, {
       toValue: 0,
-      duration: 1100,
+      duration: pulseDuration,
       easing: Easing.out(Easing.ease),
       useNativeDriver: false
     }), Animated.timing(pulseOpacity, {
@@ -65,7 +72,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;
@@ -74,17 +81,17 @@ const StepCircle = ({
   const canPress = interactive && status === 'complete';
   const handlePress = () => {
     if (!canPress) return;
-    triggerHaptic('selection');
+    if (pressHapticEnabled) triggerHaptic('selection');
     onPress?.(index);
   };
   const inner = /*#__PURE__*/_jsxs(View, {
     style: circleStyles.relative,
-    children: [isActive ? /*#__PURE__*/_jsx(Animated.View, {
+    children: [isActive && pulseEnabled ? /*#__PURE__*/_jsx(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: [{
@@ -93,12 +100,12 @@ const StepCircle = ({
       }]
     }) : null, /*#__PURE__*/_jsx(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__*/_jsx(Text, {
         style: [circleStyles.glyph, {
           color: textColor
@@ -159,21 +166,32 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
     steps,
     activeStep,
     onStepPress,
+    allowStepPress = false,
     variant = 'horizontal',
     tone = 'primary',
     loading = false,
     accessibilityLabel,
     style,
+    containerStyle,
+    circleStyle,
+    labelStyle,
+    connectorStyle,
     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 pressHapticEnabled = stepperTheme?.pressHaptic ?? false;
   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 interactive = typeof onStepPress === 'function';
+  const interactive = allowStepPress && typeof onStepPress === 'function';
   const total = steps.length;
 
   // Connector progress: animates as activeStep changes.
@@ -200,15 +218,22 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
     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] = 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: halfStepPct,
-        right: halfStepPct
-      }],
+        left: connectorInset,
+        right: connectorInset
+      }, connectorStyle],
       children: [/*#__PURE__*/_jsx(View, {
         style: [styles.hConnectorTrack, {
           backgroundColor: upcomingColor
@@ -235,12 +260,18 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
           upcomingTextColor: upcomingTextColor,
           interactive: interactive,
           totalSteps: total,
-          onPress: onStepPress
+          onPress: onStepPress,
+          circleSize: circleSize,
+          pulseSize: pulseSize,
+          pulseEnabled: pulseEnabled,
+          pulseDuration: pulseDuration,
+          pressHapticEnabled: pressHapticEnabled,
+          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 ?? ' '
         })]
@@ -268,9 +299,15 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
             upcomingTextColor: upcomingTextColor,
             interactive: interactive,
             totalSteps: total,
-            onPress: onStepPress
+            onPress: onStepPress,
+            circleSize: circleSize,
+            pulseSize: pulseSize,
+            pulseEnabled: pulseEnabled,
+            pulseDuration: pulseDuration,
+            pressHapticEnabled: pressHapticEnabled,
+            circleSlotStyle: circleStyle
           }), !isLast ? /*#__PURE__*/_jsxs(View, {
-            style: styles.vConnectorContainer,
+            style: [styles.vConnectorContainer, connectorStyle],
             children: [/*#__PURE__*/_jsx(View, {
               style: [styles.vConnectorTrack, {
                 backgroundColor: upcomingColor
@@ -289,7 +326,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
               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, {
@@ -306,7 +343,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
   });
   const rendered = /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: [styles.container, style],
+    style: [styles.container, containerStyle, style],
     testID: testID,
     accessibilityRole: "progressbar",
     accessibilityLabel: a11yLabel,
@@ -318,15 +355,148 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
     children: variant === 'horizontal' ? renderHorizontal() : renderVertical()
   });
   if (loading) {
-    return /*#__PURE__*/_jsx(SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    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 === '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: 28,
+                style: {
+                  marginTop: 4,
+                  marginBottom: 4
+                }
+              }) : 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%'

package/lib/module/components/Swipeable/Swipeable.js

@@ -31,6 +31,7 @@ const SPRING_CONFIG = {
 };
 const DRAG_ACTIVATION_OFFSET = 10;
 const RUBBER_BAND_FACTOR = 0.35;
+const FAIL_OFFSET_Y = 15;
 const toneToBg = (theme, tone) => {
   switch (tone) {
     case 'primary':
@@ -51,16 +52,32 @@ const Swipeable = props => {
     children,
     leftActions,
     rightActions,
-    threshold = 80,
-    fullSwipeThreshold = 200,
+    threshold: thresholdProp,
+    fullSwipeThreshold: fullSwipeThresholdProp,
     onSwipeOpen,
     onSwipeClose,
     disabled = false,
     containerStyle,
+    contentStyle: contentSlotStyle,
+    actionStyle,
     accessibilityLabel,
     testID
   } = props;
   const theme = useTheme();
+  const swipeTheme = theme.components.swipeable;
+  const threshold = thresholdProp ?? swipeTheme?.threshold ?? 80;
+  const fullSwipeThreshold = fullSwipeThresholdProp ?? swipeTheme?.fullSwipeThreshold ?? 200;
+  const dragActivationOffset = swipeTheme?.dragActivationOffset ?? DRAG_ACTIVATION_OFFSET;
+  const rubberBandFactor = swipeTheme?.rubberBandFactor ?? RUBBER_BAND_FACTOR;
+  const failOffsetY = swipeTheme?.failOffsetY ?? FAIL_OFFSET_Y;
+  const springConfig = {
+    damping: swipeTheme?.springDamping ?? SPRING_CONFIG.damping,
+    stiffness: swipeTheme?.springStiffness ?? SPRING_CONFIG.stiffness,
+    mass: swipeTheme?.springMass ?? SPRING_CONFIG.mass
+  };
+  const fullSwipeHapticEnabled = swipeTheme?.fullSwipeHaptic ?? true;
+  const actionPressHapticEnabled = swipeTheme?.actionPressHaptic ?? true;
+  const a11yActionHapticEnabled = swipeTheme?.a11yActionHaptic ?? true;
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const hasLeft = !!leftActions && leftActions.length > 0;
   const hasRight = !!rightActions && rightActions.length > 0;
@@ -100,22 +117,22 @@ const Swipeable = props => {
     const list = side === 'left' ? leftActions : rightActions;
     const first = list?.[0];
     if (!first) return;
-    triggerHaptic('notificationSuccess');
+    if (fullSwipeHapticEnabled) triggerHaptic('notificationSuccess');
     first.onPress();
     // After the off-screen slide, snap back to 0 silently.
-    translateX.value = withSpring(0, SPRING_CONFIG);
+    translateX.value = withSpring(0, springConfig);
     openSideRef.current = null;
     onSwipeClose?.();
-  }, [leftActions, rightActions, translateX, onSwipeClose]);
+  }, [leftActions, rightActions, translateX, onSwipeClose, springConfig, fullSwipeHapticEnabled]);
   const close = useCallback(() => {
-    translateX.value = withSpring(0, SPRING_CONFIG);
+    translateX.value = withSpring(0, springConfig);
     notifyClose();
-  }, [translateX, notifyClose]);
+  }, [translateX, notifyClose, springConfig]);
   const handleActionPress = useCallback(action => {
-    triggerHaptic('selection');
+    if (actionPressHapticEnabled) triggerHaptic('selection');
     action.onPress();
     close();
-  }, [close]);
+  }, [close, actionPressHapticEnabled]);
 
   // ───────── Pan gesture (UI thread) ─────────
   const panGesture = useMemo(() => {
@@ -128,7 +145,7 @@ const Swipeable = props => {
     const openThreshold = threshold;
     const allowLeft = hasLeft;
     const allowRight = hasRight;
-    return Gesture.Pan().enabled(!disabled).activeOffsetX([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetY([-15, 15]).onStart(() => {
+    return Gesture.Pan().enabled(!disabled).activeOffsetX([-dragActivationOffset, dragActivationOffset]).failOffsetY([-failOffsetY, failOffsetY]).onStart(() => {
       'worklet';
 
       dragStartX.value = translateX.value;
@@ -147,9 +164,9 @@ const Swipeable = props => {
       }
       // Rubber-band past the open position so it still feels physical past the cap.
       if (next > leftCap && allowLeft) {
-        translateX.value = leftCap + (next - leftCap) * RUBBER_BAND_FACTOR;
+        translateX.value = leftCap + (next - leftCap) * rubberBandFactor;
       } else if (next < -rightCap && allowRight) {
-        translateX.value = -rightCap + (next + rightCap) * RUBBER_BAND_FACTOR;
+        translateX.value = -rightCap + (next + rightCap) * rubberBandFactor;
       } else {
         translateX.value = next;
       }
@@ -183,10 +200,10 @@ const Swipeable = props => {
       }
 
       // Otherwise → spring back closed.
-      translateX.value = withSpring(0, SPRING_CONFIG);
+      translateX.value = withSpring(0, springConfig);
       runOnJS(notifyClose)();
     });
-  }, [disabled, dragStartX, fireFirstAction, fullSwipeThreshold, hasLeft, hasRight, leftRevealWidth, notifyClose, notifyOpen, rightRevealWidth, screenWidth, threshold, translateX]);
+  }, [disabled, dragStartX, fireFirstAction, fullSwipeThreshold, hasLeft, hasRight, leftRevealWidth, notifyClose, notifyOpen, rightRevealWidth, screenWidth, threshold, translateX, dragActivationOffset, failOffsetY, rubberBandFactor, springConfig]);
 
   // ───────── Animated styles ─────────
   const contentStyle = useAnimatedStyle(() => ({
@@ -221,10 +238,10 @@ const Swipeable = props => {
     const all = [...(leftActions ?? []), ...(rightActions ?? [])];
     const match = all.find(a => a.key === name);
     if (match) {
-      triggerHaptic('selection');
+      if (a11yActionHapticEnabled) triggerHaptic('selection');
       match.onPress();
     }
-  }, [leftActions, rightActions]);
+  }, [leftActions, rightActions, a11yActionHapticEnabled]);
 
   // ───────── Render ─────────
   // No actions configured → render children directly; zero gesture overhead.
@@ -243,7 +260,7 @@ const Swipeable = props => {
     children: [hasLeft ? /*#__PURE__*/_jsx(Animated.View, {
       style: [styles.actionsRow, styles.actionsLeft, {
         width: leftRevealWidth
-      }, leftBgStyle],
+      }, actionStyle, leftBgStyle],
       pointerEvents: "box-none",
       children: leftActions?.map(action => /*#__PURE__*/_jsx(ActionButton, {
         action: action,
@@ -254,7 +271,7 @@ const Swipeable = props => {
     }) : null, hasRight ? /*#__PURE__*/_jsx(Animated.View, {
       style: [styles.actionsRow, styles.actionsRight, {
         width: rightRevealWidth
-      }, rightBgStyle],
+      }, actionStyle, rightBgStyle],
       pointerEvents: "box-none",
       children: rightActions?.map(action => /*#__PURE__*/_jsx(ActionButton, {
         action: action,
@@ -265,7 +282,7 @@ const Swipeable = props => {
     }) : null, /*#__PURE__*/_jsx(GestureDetector, {
       gesture: panGesture,
       children: /*#__PURE__*/_jsx(Animated.View, {
-        style: [styles.content, contentStyle],
+        style: [styles.content, contentSlotStyle, contentStyle],
         children: children
       })
     })]

package/lib/module/components/Switch/Switch.js

@@ -50,6 +50,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     haptic = 'selection',
     bounce = false,
     style,
+    containerStyle,
     trackStyle,
     thumbStyle,
     testID,
@@ -162,9 +163,15 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       })
     })
   });
-  if (!label) return switchEl;
+  if (!label) {
+    if (!containerStyle) return switchEl;
+    return /*#__PURE__*/_jsx(View, {
+      style: containerStyle,
+      children: switchEl
+    });
+  }
   return /*#__PURE__*/_jsxs(View, {
-    style: [styles.row, style],
+    style: [styles.row, containerStyle, style],
     children: [switchEl, /*#__PURE__*/_jsx(Text, {
       style: [styles.label, {
         color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,