@webority-technologies/mobile 0.0.1

package/lib/commonjs/components/Swipeable/Swipeable.js

@@ -0,0 +1,349 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Swipeable = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _index = require("../../theme/index.js");
+var _index2 = require("../../utils/index.js");
+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); }
+/**
+ * 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>
+ */
+
+const SPRING_CONFIG = {
+  damping: 22,
+  stiffness: 260,
+  mass: 1
+};
+const DRAG_ACTIVATION_OFFSET = 10;
+const RUBBER_BAND_FACTOR = 0.35;
+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 = 80,
+    fullSwipeThreshold = 200,
+    onSwipeOpen,
+    onSwipeClose,
+    disabled = false,
+    containerStyle,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const hasLeft = !!leftActions && leftActions.length > 0;
+  const hasRight = !!rightActions && rightActions.length > 0;
+  const screenWidth = _reactNative.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 = (0, _reactNativeReanimated.useSharedValue)(0);
+  const dragStartX = (0, _reactNativeReanimated.useSharedValue)(0);
+
+  // Mirror "is currently open + which side" on JS so we can debounce onSwipeOpen/onSwipeClose callbacks.
+  const openSideRef = (0, _react.useRef)(null);
+
+  // ───────── Animation cleanup on unmount ─────────
+  (0, _react.useEffect)(() => {
+    return () => {
+      (0, _reactNativeReanimated.cancelAnimation)(translateX);
+      (0, _reactNativeReanimated.cancelAnimation)(dragStartX);
+    };
+  }, [translateX, dragStartX]);
+
+  // ───────── JS-thread callbacks invoked from worklets ─────────
+  const notifyOpen = (0, _react.useCallback)(side => {
+    if (openSideRef.current === side) return;
+    openSideRef.current = side;
+    onSwipeOpen?.(side);
+  }, [onSwipeOpen]);
+  const notifyClose = (0, _react.useCallback)(() => {
+    if (openSideRef.current === null) return;
+    openSideRef.current = null;
+    onSwipeClose?.();
+  }, [onSwipeClose]);
+  const fireFirstAction = (0, _react.useCallback)(side => {
+    const list = side === 'left' ? leftActions : rightActions;
+    const first = list?.[0];
+    if (!first) return;
+    (0, _index2.triggerHaptic)('notificationSuccess');
+    first.onPress();
+    // After the off-screen slide, snap back to 0 silently.
+    translateX.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+    openSideRef.current = null;
+    onSwipeClose?.();
+  }, [leftActions, rightActions, translateX, onSwipeClose]);
+  const close = (0, _react.useCallback)(() => {
+    translateX.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+    notifyClose();
+  }, [translateX, notifyClose]);
+  const handleActionPress = (0, _react.useCallback)(action => {
+    (0, _index2.triggerHaptic)('selection');
+    action.onPress();
+    close();
+  }, [close]);
+
+  // ───────── Pan gesture (UI thread) ─────────
+  const panGesture = (0, _react.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 _reactNativeGestureHandler.Gesture.Pan().enabled(!disabled).activeOffsetX([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetY([-15, 15]).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) * RUBBER_BAND_FACTOR;
+      } else if (next < -rightCap && allowRight) {
+        translateX.value = -rightCap + (next + rightCap) * RUBBER_BAND_FACTOR;
+      } 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 = (0, _reactNativeReanimated.withSpring)(offScreenLeft, SPRING_CONFIG);
+        (0, _reactNativeReanimated.runOnJS)(fireFirstAction)('left');
+        return;
+      }
+      if (allowRight && releaseX <= fullSwipeRight) {
+        translateX.value = (0, _reactNativeReanimated.withSpring)(offScreenRight, SPRING_CONFIG);
+        (0, _reactNativeReanimated.runOnJS)(fireFirstAction)('right');
+        return;
+      }
+
+      // Past open threshold → spring to open position.
+      if (allowLeft && releaseX >= openThreshold) {
+        translateX.value = (0, _reactNativeReanimated.withSpring)(leftCap, SPRING_CONFIG);
+        (0, _reactNativeReanimated.runOnJS)(notifyOpen)('left');
+        return;
+      }
+      if (allowRight && releaseX <= -openThreshold) {
+        translateX.value = (0, _reactNativeReanimated.withSpring)(-rightCap, SPRING_CONFIG);
+        (0, _reactNativeReanimated.runOnJS)(notifyOpen)('right');
+        return;
+      }
+
+      // Otherwise → spring back closed.
+      translateX.value = (0, _reactNativeReanimated.withSpring)(0, SPRING_CONFIG);
+      (0, _reactNativeReanimated.runOnJS)(notifyClose)();
+    });
+  }, [disabled, dragStartX, fireFirstAction, fullSwipeThreshold, hasLeft, hasRight, leftRevealWidth, notifyClose, notifyOpen, rightRevealWidth, screenWidth, threshold, translateX]);
+
+  // ───────── Animated styles ─────────
+  const contentStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    transform: [{
+      translateX: translateX.value
+    }]
+  }));
+
+  // Each side fades in proportionally to how much it's been revealed.
+  const leftBgStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => ({
+    opacity: leftRevealWidth > 0 ? Math.min(1, Math.max(0, translateX.value / leftRevealWidth)) : 0
+  }));
+  const rightBgStyle = (0, _reactNativeReanimated.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 = (0, _react.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 = (0, _react.useCallback)(event => {
+    const name = event.nativeEvent.actionName;
+    const all = [...(leftActions ?? []), ...(rightActions ?? [])];
+    const match = all.find(a => a.key === name);
+    if (match) {
+      (0, _index2.triggerHaptic)('selection');
+      match.onPress();
+    }
+  }, [leftActions, rightActions]);
+
+  // ───────── Render ─────────
+  // No actions configured → render children directly; zero gesture overhead.
+  if (!hasLeft && !hasRight) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: containerStyle,
+      children: children
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.root, containerStyle],
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityActions: a11yActions,
+    onAccessibilityAction: handleA11yAction,
+    children: [hasLeft ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [styles.actionsRow, styles.actionsLeft, {
+        width: leftRevealWidth
+      }, leftBgStyle],
+      pointerEvents: "box-none",
+      children: leftActions?.map(action => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
+        action: action,
+        theme: theme,
+        width: threshold,
+        onPress: handleActionPress
+      }, action.key))
+    }) : null, hasRight ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+      style: [styles.actionsRow, styles.actionsRight, {
+        width: rightRevealWidth
+      }, rightBgStyle],
+      pointerEvents: "box-none",
+      children: rightActions?.map(action => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
+        action: action,
+        theme: theme,
+        width: threshold,
+        onPress: handleActionPress
+      }, action.key))
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+      gesture: panGesture,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        style: [styles.content, contentStyle],
+        children: children
+      })
+    })]
+  });
+};
+exports.Swipeable = Swipeable;
+Swipeable.displayName = 'Swipeable';
+const ActionButton = ({
+  action,
+  theme,
+  width,
+  onPress
+}) => {
+  const tone = action.tone ?? 'neutral';
+  const bg = toneToBg(theme, tone);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    onPress: () => onPress(action),
+    accessibilityRole: "button",
+    accessibilityLabel: action.label,
+    style: [actionStyles.button, {
+      width,
+      backgroundColor: bg,
+      paddingHorizontal: theme.spacing.sm
+    }],
+    children: [action.icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: actionStyles.icon,
+      children: action.icon
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 = _reactNative.StyleSheet.create({
+  button: {
+    flexGrow: 0,
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {
+    marginBottom: 2
+  },
+  label: {
+    textAlign: 'center'
+  }
+});
+const buildStyles = _theme => _reactNative.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'
+  }
+});
+var _default = exports.default = Swipeable;
+//# sourceMappingURL=Swipeable.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Swipeable", {
+  enumerable: true,
+  get: function () {
+    return _Swipeable.Swipeable;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Swipeable.default;
+  }
+});
+var _Swipeable = _interopRequireWildcard(require("./Swipeable.js"));
+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); }
+//# sourceMappingURL=index.js.map

package/lib/commonjs/components/Switch/Switch.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Switch = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+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 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 = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    value,
+    onValueChange,
+    disabled = false,
+    size = 'md',
+    tone = 'primary',
+    label,
+    accessibilityLabel,
+    haptic = 'selection',
+    style,
+    trackStyle,
+    thumbStyle,
+    testID,
+    ...rest
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const sizeStyles = sizeMap[size];
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const offTrackColor = theme.mode === 'dark' ? theme.colors.secondary : theme.colors.surface.disabled;
+  const onTrackColor = toneColor(theme, tone);
+  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(value ? 1 : 0)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.spring(progress, {
+      toValue: value ? 1 : 0,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    }).start();
+  }, [value, progress, theme.motion.spring.snappy]);
+  const trackBgAnim = (0, _react.useRef)(new _reactNative.Animated.Value(value ? 1 : 0)).current;
+  (0, _react.useEffect)(() => {
+    _reactNative.Animated.timing(trackBgAnim, {
+      toValue: value ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      easing: _reactNative.Easing.out(_reactNative.Easing.ease),
+      useNativeDriver: false
+    }).start();
+  }, [value, 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 handlePress = event => {
+    if (disabled) return;
+    if (haptic !== false) (0, _hapticUtils.triggerHaptic)(haptic);
+    onValueChange(!value);
+    rest.onPressOut?.(event);
+  };
+  const accessibleLabel = accessibilityLabel ?? label;
+  const switchEl = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    ref: ref,
+    onPress: handlePress,
+    disabled: disabled,
+    accessibilityRole: "switch",
+    accessibilityLabel: accessibleLabel,
+    accessibilityState: {
+      checked: value,
+      disabled
+    },
+    testID: testID,
+    hitSlop: 8,
+    ...rest,
+    style: ({
+      pressed
+    }) => [{
+      opacity: disabled ? 0.55 : pressed ? 0.9 : 1
+    }, label ? null : style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.track, {
+        width: sizeStyles.trackWidth,
+        height: sizeStyles.trackHeight,
+        borderRadius: sizeStyles.trackHeight / 2,
+        backgroundColor: trackBg
+      }, trackStyle],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+        style: [styles.thumb, theme.shadows.sm, {
+          width: sizeStyles.thumbSize,
+          height: sizeStyles.thumbSize,
+          borderRadius: sizeStyles.thumbSize / 2,
+          transform: [{
+            translateX
+          }]
+        }, thumbStyle]
+      })
+    })
+  });
+  if (!label) return switchEl;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.row, style],
+    children: [switchEl, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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 => _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  track: {
+    justifyContent: 'center'
+  },
+  thumb: {
+    backgroundColor: '#FFFFFF',
+    position: 'absolute',
+    top: 2
+  },
+  label: {
+    marginLeft: 10,
+    flexShrink: 1
+  }
+});
+var _default = exports.default = Switch;
+//# sourceMappingURL=Switch.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function () {
+    return _Switch.Switch;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Switch.default;
+  }
+});
+var _Switch = _interopRequireWildcard(require("./Switch.js"));
+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); }
+//# sourceMappingURL=index.js.map