@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,375 @@
+"use strict";
+
+/**
+ * Swipeable — Reanimated 3 + Gesture Handler 2 implementation.
+ *
+ * Wraps any content and reveals contextual actions when the user
+ * swipes left or right. Past `fullSwipeThreshold`, the first action
+ * fires automatically and the content slides off-screen.
+ *
+ * USAGE:
+ *
+ * <Swipeable
+ *   leftActions={[{ key: 'archive', label: 'Archive', tone: 'success', onPress: handleArchive }]}
+ *   rightActions={[{ key: 'delete', label: 'Delete', tone: 'error', onPress: handleDelete }]}
+ * >
+ *   <ListItem title="Inbox item" />
+ * </Swipeable>
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Dimensions, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { cancelAnimation, runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SPRING_CONFIG = {
+  damping: 22,
+  stiffness: 260,
+  mass: 1
+};
+const DRAG_ACTIVATION_OFFSET = 10;
+const RUBBER_BAND_FACTOR = 0.35;
+const FAIL_OFFSET_Y = 15;
+const toneToBg = (theme, tone) => {
+  switch (tone) {
+    case 'primary':
+      return theme.colors.primary;
+    case 'success':
+      return theme.colors.success;
+    case 'warning':
+      return theme.colors.warning;
+    case 'error':
+      return theme.colors.error;
+    case 'neutral':
+    default:
+      return theme.colors.secondary;
+  }
+};
+const Swipeable = props => {
+  const {
+    children,
+    leftActions,
+    rightActions,
+    threshold: thresholdProp,
+    fullSwipeThreshold: fullSwipeThresholdProp,
+    onSwipeOpen,
+    onSwipeClose,
+    disabled = false,
+    haptic,
+    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 = useMemo(() => ({
+    damping: swipeTheme?.springDamping ?? SPRING_CONFIG.damping,
+    stiffness: swipeTheme?.springStiffness ?? SPRING_CONFIG.stiffness,
+    mass: swipeTheme?.springMass ?? SPRING_CONFIG.mass
+  }), [swipeTheme]);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const hasLeft = !!leftActions && leftActions.length > 0;
+  const hasRight = !!rightActions && rightActions.length > 0;
+  const screenWidth = Dimensions.get('window').width;
+
+  // Per-side total reveal width; each individual action is totalRevealWidth / actions.length.
+  const leftRevealWidth = hasLeft ? threshold * (leftActions?.length ?? 0) : 0;
+  const rightRevealWidth = hasRight ? threshold * (rightActions?.length ?? 0) : 0;
+
+  // translateX: 0 = closed, +leftRevealWidth = left actions revealed, -rightRevealWidth = right actions revealed.
+  const translateX = useSharedValue(0);
+  const dragStartX = useSharedValue(0);
+
+  // Mirror "is currently open + which side" on JS so we can debounce onSwipeOpen/onSwipeClose callbacks.
+  const openSideRef = useRef(null);
+
+  // ───────── Animation cleanup on unmount ─────────
+  useEffect(() => {
+    return () => {
+      cancelAnimation(translateX);
+      cancelAnimation(dragStartX);
+    };
+  }, [translateX, dragStartX]);
+
+  // ───────── JS-thread callbacks invoked from worklets ─────────
+  const notifyOpen = useCallback(side => {
+    if (openSideRef.current === side) {
+      return;
+    }
+    openSideRef.current = side;
+    onSwipeOpen?.(side);
+  }, [onSwipeOpen]);
+  const notifyClose = useCallback(() => {
+    if (openSideRef.current === null) {
+      return;
+    }
+    openSideRef.current = null;
+    onSwipeClose?.();
+  }, [onSwipeClose]);
+  const fireFirstAction = useCallback(side => {
+    const list = side === 'left' ? leftActions : rightActions;
+    const first = list?.[0];
+    if (!first) {
+      return;
+    }
+    if (haptic !== false) {
+      triggerHaptic('notificationSuccess');
+    }
+    first.onPress();
+    // After the off-screen slide, snap back to 0 silently.
+    translateX.value = withSpring(0, springConfig);
+    openSideRef.current = null;
+    onSwipeClose?.();
+  }, [leftActions, rightActions, translateX, onSwipeClose, springConfig, haptic]);
+  const close = useCallback(() => {
+    translateX.value = withSpring(0, springConfig);
+    notifyClose();
+  }, [translateX, notifyClose, springConfig]);
+  const handleActionPress = useCallback(action => {
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    action.onPress();
+    close();
+  }, [close, haptic]);
+
+  // ───────── Pan gesture (UI thread) ─────────
+  const panGesture = useMemo(() => {
+    const leftCap = leftRevealWidth;
+    const rightCap = rightRevealWidth;
+    const fullSwipeLeft = fullSwipeThreshold; // positive when swiping right→reveal left
+    const fullSwipeRight = -fullSwipeThreshold; // negative when swiping left→reveal right
+    const offScreenLeft = screenWidth;
+    const offScreenRight = -screenWidth;
+    const openThreshold = threshold;
+    const allowLeft = hasLeft;
+    const allowRight = hasRight;
+    return Gesture.Pan().enabled(!disabled).activeOffsetX([-dragActivationOffset, dragActivationOffset]).failOffsetY([-failOffsetY, failOffsetY]).onStart(() => {
+      'worklet';
+
+      dragStartX.value = translateX.value;
+    }).onUpdate(event => {
+      'worklet';
+
+      const next = dragStartX.value + event.translationX;
+      // Disallow swipe in directions with no actions configured.
+      if (next > 0 && !allowLeft) {
+        translateX.value = 0;
+        return;
+      }
+      if (next < 0 && !allowRight) {
+        translateX.value = 0;
+        return;
+      }
+      // Rubber-band past the open position so it still feels physical past the cap.
+      if (next > leftCap && allowLeft) {
+        translateX.value = leftCap + (next - leftCap) * rubberBandFactor;
+      } else if (next < -rightCap && allowRight) {
+        translateX.value = -rightCap + (next + rightCap) * rubberBandFactor;
+      } else {
+        translateX.value = next;
+      }
+    }).onEnd(() => {
+      'worklet';
+
+      const releaseX = translateX.value;
+
+      // Past full-swipe threshold on either side → fire first action and slide off-screen.
+      if (allowLeft && releaseX >= fullSwipeLeft) {
+        translateX.value = withSpring(offScreenLeft, SPRING_CONFIG);
+        runOnJS(fireFirstAction)('left');
+        return;
+      }
+      if (allowRight && releaseX <= fullSwipeRight) {
+        translateX.value = withSpring(offScreenRight, SPRING_CONFIG);
+        runOnJS(fireFirstAction)('right');
+        return;
+      }
+
+      // Past open threshold → spring to open position.
+      if (allowLeft && releaseX >= openThreshold) {
+        translateX.value = withSpring(leftCap, SPRING_CONFIG);
+        runOnJS(notifyOpen)('left');
+        return;
+      }
+      if (allowRight && releaseX <= -openThreshold) {
+        translateX.value = withSpring(-rightCap, SPRING_CONFIG);
+        runOnJS(notifyOpen)('right');
+        return;
+      }
+
+      // Otherwise → spring back closed.
+      translateX.value = withSpring(0, springConfig);
+      runOnJS(notifyClose)();
+    });
+  }, [disabled, dragStartX, fireFirstAction, fullSwipeThreshold, hasLeft, hasRight, leftRevealWidth, notifyClose, notifyOpen, rightRevealWidth, screenWidth, threshold, translateX, dragActivationOffset, failOffsetY, rubberBandFactor, springConfig]);
+
+  // ───────── Animated styles ─────────
+  const contentStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: translateX.value
+    }]
+  }));
+
+  // Each side fades in proportionally to how much it's been revealed.
+  const leftBgStyle = useAnimatedStyle(() => ({
+    opacity: leftRevealWidth > 0 ? Math.min(1, Math.max(0, translateX.value / leftRevealWidth)) : 0
+  }));
+  const rightBgStyle = useAnimatedStyle(() => ({
+    opacity: rightRevealWidth > 0 ? Math.min(1, Math.max(0, -translateX.value / rightRevealWidth)) : 0
+  }));
+
+  // ───────── A11y actions (so AT users don't need to swipe) ─────────
+  const a11yActions = useMemo(() => {
+    const out = [];
+    leftActions?.forEach(a => out.push({
+      name: a.key,
+      label: a.label
+    }));
+    rightActions?.forEach(a => out.push({
+      name: a.key,
+      label: a.label
+    }));
+    return out;
+  }, [leftActions, rightActions]);
+  const handleA11yAction = useCallback(event => {
+    const name = event.nativeEvent.actionName;
+    const all = [...(leftActions ?? []), ...(rightActions ?? [])];
+    const match = all.find(a => a.key === name);
+    if (match) {
+      if (haptic !== false) {
+        triggerHaptic('selection');
+      }
+      match.onPress();
+    }
+  }, [leftActions, rightActions, haptic]);
+
+  // ───────── Render ─────────
+  // No actions configured → render children directly; zero gesture overhead.
+  if (!hasLeft && !hasRight) {
+    // testID must survive this shortcut too — a consumer targeting a Swipeable
+    // with no actions configured would otherwise find nothing.
+    return /*#__PURE__*/_jsx(View, {
+      style: containerStyle,
+      testID: testID,
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.root, containerStyle],
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityActions: a11yActions,
+    onAccessibilityAction: handleA11yAction,
+    children: [hasLeft ? /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.actionsRow, styles.actionsLeft, {
+        width: leftRevealWidth
+      }, actionStyle, leftBgStyle],
+      pointerEvents: "box-none",
+      children: leftActions?.map(action => /*#__PURE__*/_jsx(ActionButton, {
+        action: action,
+        theme: theme,
+        width: threshold,
+        onPress: handleActionPress
+      }, action.key))
+    }) : null, hasRight ? /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.actionsRow, styles.actionsRight, {
+        width: rightRevealWidth
+      }, actionStyle, rightBgStyle],
+      pointerEvents: "box-none",
+      children: rightActions?.map(action => /*#__PURE__*/_jsx(ActionButton, {
+        action: action,
+        theme: theme,
+        width: threshold,
+        onPress: handleActionPress
+      }, action.key))
+    }) : null, /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: panGesture,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.content, contentSlotStyle, contentStyle],
+        children: children
+      })
+    })]
+  });
+};
+Swipeable.displayName = 'Swipeable';
+const ActionButton = ({
+  action,
+  theme,
+  width,
+  onPress
+}) => {
+  const tone = action.tone ?? 'neutral';
+  const bg = toneToBg(theme, tone);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: () => onPress(action),
+    accessibilityRole: "button",
+    accessibilityLabel: action.label,
+    style: [actionStyles.button, {
+      width,
+      backgroundColor: bg,
+      paddingHorizontal: theme.spacing.sm
+    }],
+    children: [action.icon ? /*#__PURE__*/_jsx(View, {
+      style: actionStyles.icon,
+      children: action.icon
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      style: [actionStyles.label, {
+        color: theme.colors.text.inverse,
+        fontSize: theme.typography.fontSize.sm,
+        fontWeight: theme.typography.fontWeight.semibold
+      }],
+      numberOfLines: 1,
+      children: action.label
+    })]
+  });
+};
+const actionStyles = StyleSheet.create({
+  button: {
+    flexGrow: 0,
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {
+    marginBottom: 2
+  },
+  label: {
+    textAlign: 'center'
+  }
+});
+const buildStyles = _theme => StyleSheet.create({
+  root: {
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  content: {
+    backgroundColor: 'transparent'
+  },
+  actionsRow: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    flexDirection: 'row'
+  },
+  actionsLeft: {
+    left: 0
+  },
+  actionsRight: {
+    right: 0,
+    justifyContent: 'flex-end'
+  }
+});
+export { Swipeable };
+export default Swipeable;
+//# sourceMappingURL=Swipeable.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, Swipeable } from "./Swipeable.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,227 @@
+"use strict";
+
+import { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useControllableState } from "../../hooks/index.js";
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeMap = {
+  sm: {
+    trackWidth: 42,
+    trackHeight: 26,
+    thumbSize: 22,
+    padding: 2
+  },
+  md: {
+    trackWidth: 51,
+    trackHeight: 31,
+    thumbSize: 27,
+    padding: 2
+  },
+  lg: {
+    trackWidth: 60,
+    trackHeight: 36,
+    thumbSize: 32,
+    padding: 2
+  }
+};
+const toneColor = (theme, tone) => {
+  switch (tone) {
+    case 'success':
+      return theme.colors.success;
+    case 'warning':
+      return theme.colors.warning;
+    case 'error':
+      return theme.colors.error;
+    case 'primary':
+    default:
+      return theme.colors.primary;
+  }
+};
+const Switch = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    disabled = false,
+    size = 'md',
+    tone = 'primary',
+    label,
+    accessibilityLabel,
+    haptic = 'selection',
+    bounce = false,
+    style,
+    containerStyle,
+    trackStyle,
+    thumbStyle,
+    testID,
+    ...rest
+  } = props;
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? false,
+    onChange
+  });
+  const theme = useTheme();
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.switch?.[size] ?? {})
+  };
+  const switchThumbColor = theme.components.switch?.thumbColor ?? '#FFFFFF';
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const offTrackColor = theme.mode === 'dark' ? theme.colors.secondary : theme.colors.surface.disabled;
+  const onTrackColor = toneColor(theme, tone);
+  const progress = useRef(createAnimatedValue(current ? 1 : 0)).current;
+  useEffect(() => {
+    const anim = Animated.spring(progress, {
+      toValue: current ? 1 : 0,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [current, progress, theme.motion.spring.snappy]);
+  const trackBgAnim = useRef(createAnimatedValue(current ? 1 : 0)).current;
+  useEffect(() => {
+    const anim = Animated.timing(trackBgAnim, {
+      toValue: current ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: false
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [current, trackBgAnim, theme.motion.duration.fast]);
+  const offX = sizeStyles.padding;
+  const onX = sizeStyles.trackWidth - sizeStyles.thumbSize - sizeStyles.padding;
+  const translateX = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [offX, onX]
+  });
+  const trackBg = trackBgAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [offTrackColor, onTrackColor]
+  });
+  const bounceScale = useRef(createAnimatedValue(1)).current;
+  const isFirstRender = useRef(true);
+  // biome-ignore lint/correctness/useExhaustiveDependencies: `current` is the TRIGGER, not a read: the bounce must fire when the value toggles. Biome sees it unused in the body; removing it would silently kill the animation
+  useEffect(() => {
+    if (!bounce) {
+      return;
+    }
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    const anim = Animated.sequence([Animated.spring(bounceScale, {
+      toValue: 1.15,
+      damping: 10,
+      stiffness: 220,
+      mass: 1,
+      useNativeDriver: true
+    }), Animated.spring(bounceScale, {
+      toValue: 1,
+      damping: 14,
+      stiffness: 240,
+      mass: 1,
+      useNativeDriver: true
+    })]);
+    anim.start();
+    return () => anim.stop();
+  }, [current, bounce, bounceScale]);
+  const handlePress = event => {
+    if (disabled) {
+      return;
+    }
+    if (haptic !== false) {
+      triggerHaptic(haptic);
+    }
+    setCurrent(!current);
+    rest.onPressOut?.(event);
+  };
+  const accessibleLabel = accessibilityLabel ?? label;
+  const switchEl = /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    onPress: handlePress,
+    disabled: disabled,
+    accessibilityRole: "switch",
+    accessibilityLabel: accessibleLabel,
+    accessibilityState: {
+      checked: current,
+      disabled
+    },
+    testID: testID,
+    hitSlop: 8,
+    ...rest,
+    style: ({
+      pressed
+    }) => [{
+      opacity: disabled ? 0.55 : pressed ? 0.9 : 1
+    }, label ? null : style],
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.track, {
+        width: sizeStyles.trackWidth,
+        height: sizeStyles.trackHeight,
+        borderRadius: sizeStyles.trackHeight / 2,
+        backgroundColor: trackBg
+      }, trackStyle],
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [styles.thumb, theme.shadows.sm, {
+          backgroundColor: switchThumbColor,
+          width: sizeStyles.thumbSize,
+          height: sizeStyles.thumbSize,
+          borderRadius: sizeStyles.thumbSize / 2,
+          transform: [{
+            translateX
+          }, {
+            scale: bounceScale
+          }]
+        }, thumbStyle]
+      })
+    })
+  });
+  if (!label) {
+    if (!containerStyle) {
+      return switchEl;
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: containerStyle,
+      children: switchEl
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.row, containerStyle, style],
+    children: [switchEl, /*#__PURE__*/_jsx(Text, {
+      style: [styles.label, {
+        color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
+        fontSize: theme.typography.fontSize.base
+      }],
+      numberOfLines: 1,
+      children: label
+    })]
+  });
+});
+Switch.displayName = 'Switch';
+const buildStyles = _theme => StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  track: {
+    justifyContent: 'center'
+  },
+  thumb: {
+    position: 'absolute',
+    top: 2
+  },
+  label: {
+    marginLeft: 10,
+    flexShrink: 1
+  }
+});
+export { Switch };
+export default Switch;
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default, Switch } from "./Switch.js";
+//# sourceMappingURL=index.js.map