@webority-technologies/mobile 0.0.1

package/lib/module/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,363 @@
+"use strict";
+
+/**
+ * BottomSheet — Reanimated 3 + Gesture Handler 2 implementation.
+ *
+ * A polished, theme-aware bottom sheet with multi-snap-point support,
+ * UI-thread driven pan gestures, and native-driver spring animations.
+ *
+ * USAGE:
+ *
+ * const ref = useRef<BottomSheetRef>(null);
+ * <BottomSheet ref={ref} snapPoints={[200, '50%', '90%']}>
+ *   <YourContent />
+ * </BottomSheet>
+ *
+ * ref.current?.expand();   // open at first snap point (or `index` prop)
+ * ref.current?.expand(2);  // open at specific index
+ * ref.current?.collapse(); // animate to smallest snap point
+ * ref.current?.close();    // dismiss
+ */
+
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Dimensions, Pressable, StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { Extrapolation, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SPRING_CONFIG = {
+  damping: 20,
+  stiffness: 240,
+  mass: 1
+};
+const CLOSE_VELOCITY_THRESHOLD = 1000;
+const DRAG_ACTIVATION_OFFSET = 10;
+const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    snapPoints,
+    index: controlledIndex,
+    onChange,
+    onAnimate,
+    enablePanDownToClose = true,
+    enableBackdropPress = true,
+    backdropOpacity = 0.5,
+    handleIndicatorStyle,
+    containerStyle,
+    children,
+    accessibilityLabel,
+    accessibilityViewIsModal,
+    testID
+  } = props;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const [screenHeight, setScreenHeight] = useState(() => Dimensions.get('window').height);
+
+  // Resolve snap points (px values), sorted ascending so larger height = smaller translateY.
+  const resolvedSnapPoints = useMemo(() => resolveSnapPoints(snapPoints, screenHeight), [snapPoints, screenHeight]);
+
+  // Listen for orientation / window changes so % snap points stay accurate.
+  useEffect(() => {
+    const sub = Dimensions.addEventListener('change', ({
+      window
+    }) => {
+      setScreenHeight(window.height);
+    });
+    return () => sub.remove();
+  }, []);
+  const closedY = screenHeight; // fully off-screen
+  const minSnapPoint = resolvedSnapPoints[0] ?? 0;
+  const maxSnapPoint = resolvedSnapPoints[resolvedSnapPoints.length - 1] ?? 0;
+
+  // translateY: 0 = top of screen, screenHeight = fully closed.
+  const translateY = useSharedValue(closedY);
+  // Captures the translateY at gesture start so onUpdate can be additive.
+  const dragStartY = useSharedValue(closedY);
+  // Tracks current snap index on the JS thread (mirrored to a shared value for worklets).
+  const currentIndexShared = useSharedValue(-1);
+  const [currentIndex, setCurrentIndex] = useState(-1);
+  const isAnimatingRef = useRef(false);
+
+  // Convert a snap-point index → translateY position. -1 = closed.
+  const yForIndex = useCallback(idx => {
+    if (idx < 0 || idx >= resolvedSnapPoints.length) return closedY;
+    const sheetHeight = resolvedSnapPoints[idx];
+    return screenHeight - sheetHeight;
+  }, [resolvedSnapPoints, screenHeight, closedY]);
+  const setIndexJS = useCallback(next => {
+    const previous = currentIndex;
+    if (previous === next) return;
+    setCurrentIndex(next);
+    currentIndexShared.value = next;
+    onChange?.(next);
+  }, [currentIndex, currentIndexShared, onChange]);
+  const animateTo = useCallback((to, fromIndex, toIndex) => {
+    isAnimatingRef.current = true;
+    onAnimate?.(fromIndex, toIndex);
+    translateY.value = withSpring(to, SPRING_CONFIG, finished => {
+      'worklet';
+
+      if (finished) {
+        runOnJS(markAnimationDone)();
+      }
+    });
+  }, [onAnimate, translateY]);
+  const markAnimationDone = useCallback(() => {
+    isAnimatingRef.current = false;
+  }, []);
+  const expand = useCallback(idx => {
+    const target = typeof idx === 'number' ? clamp(idx, 0, resolvedSnapPoints.length - 1) : currentIndex >= 0 ? currentIndex : 0;
+    const fromIndex = currentIndexShared.value;
+    const to = yForIndex(target);
+    setIndexJS(target);
+    animateTo(to, fromIndex, target);
+  }, [animateTo, currentIndex, currentIndexShared, resolvedSnapPoints.length, setIndexJS, yForIndex]);
+  const collapse = useCallback(() => {
+    if (resolvedSnapPoints.length === 0) return;
+    const fromIndex = currentIndexShared.value;
+    const to = yForIndex(0);
+    setIndexJS(0);
+    animateTo(to, fromIndex, 0);
+  }, [animateTo, currentIndexShared, resolvedSnapPoints.length, setIndexJS, yForIndex]);
+  const close = useCallback(() => {
+    const fromIndex = currentIndexShared.value;
+    setIndexJS(-1);
+    isAnimatingRef.current = true;
+    onAnimate?.(fromIndex, -1);
+    translateY.value = withTiming(closedY, {
+      duration: 220
+    }, finished => {
+      'worklet';
+
+      if (finished) {
+        runOnJS(markAnimationDone)();
+      }
+    });
+  }, [closedY, currentIndexShared, markAnimationDone, onAnimate, setIndexJS, translateY]);
+  useImperativeHandle(ref, () => ({
+    expand,
+    collapse,
+    close
+  }), [expand, collapse, close]);
+
+  // Drive the controlled `index` prop.
+  useEffect(() => {
+    if (typeof controlledIndex !== 'number') return;
+    if (controlledIndex === currentIndex) return;
+    if (controlledIndex === -1) {
+      close();
+    } else {
+      expand(controlledIndex);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controlledIndex]);
+
+  // ───────── Gesture (UI thread) ─────────
+  // Worklet helpers must be declared inline so they capture shared values correctly.
+  const minTopY = screenHeight - maxSnapPoint; // smallest translateY (sheet fully expanded)
+  const snapTargets = useMemo(() => resolvedSnapPoints.map(h => screenHeight - h), [resolvedSnapPoints, screenHeight]);
+  const handleSnapEnd = useCallback((toIndex, toY) => {
+    const fromIndex = currentIndexShared.value;
+    if (toIndex === -1) {
+      triggerHaptic('selection');
+      setIndexJS(-1);
+      isAnimatingRef.current = true;
+      onAnimate?.(fromIndex, -1);
+      translateY.value = withTiming(closedY, {
+        duration: 220
+      }, finished => {
+        'worklet';
+
+        if (finished) {
+          runOnJS(markAnimationDone)();
+        }
+      });
+      return;
+    }
+    setIndexJS(toIndex);
+    animateTo(toY, fromIndex, toIndex);
+  }, [animateTo, closedY, currentIndexShared, markAnimationDone, onAnimate, setIndexJS, translateY]);
+  const panGesture = useMemo(() => {
+    const targets = snapTargets;
+    const closed = closedY;
+    const top = minTopY;
+    const canPanDownToClose = enablePanDownToClose;
+    return Gesture.Pan().activeOffsetY([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetX([-15, 15]).onStart(() => {
+      'worklet';
+
+      dragStartY.value = translateY.value;
+    }).onUpdate(event => {
+      'worklet';
+
+      const next = dragStartY.value + event.translationY;
+      // Clamp at the top (most-expanded) snap point with a touch of rubber-banding.
+      if (next < top) {
+        translateY.value = top + (next - top) * 0.25;
+      } else {
+        translateY.value = next;
+      }
+    }).onEnd(event => {
+      'worklet';
+
+      const releaseY = translateY.value;
+      const velocity = event.velocityY;
+
+      // Fast downward swipe → close (if allowed) or snap to smallest.
+      if (velocity > CLOSE_VELOCITY_THRESHOLD) {
+        if (canPanDownToClose) {
+          runOnJS(handleSnapEnd)(-1, closed);
+          return;
+        }
+        runOnJS(handleSnapEnd)(0, targets[0]);
+        return;
+      }
+
+      // Find nearest snap target by distance.
+      let nearestIdx = 0;
+      let nearestDist = Math.abs(releaseY - targets[0]);
+      for (let i = 1; i < targets.length; i++) {
+        const d = Math.abs(releaseY - targets[i]);
+        if (d < nearestDist) {
+          nearestDist = d;
+          nearestIdx = i;
+        }
+      }
+
+      // If user dragged below smallest snap point past threshold and pan-to-close is on, dismiss.
+      const smallest = targets[0];
+      const overshoot = releaseY - smallest;
+      if (canPanDownToClose && overshoot > 80) {
+        runOnJS(handleSnapEnd)(-1, closed);
+        return;
+      }
+      runOnJS(handleSnapEnd)(nearestIdx, targets[nearestIdx]);
+    });
+  }, [closedY, dragStartY, enablePanDownToClose, handleSnapEnd, minTopY, snapTargets, translateY]);
+
+  // ───────── Animated styles ─────────
+  const sheetStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateY: translateY.value
+    }]
+  }));
+  const backdropStyle = useAnimatedStyle(() => {
+    // 0 opacity when sheet is closed, full backdropOpacity at minSnap height (and above).
+    const closedAt = screenHeight;
+    const openAt = screenHeight - minSnapPoint;
+    const opacity = interpolate(translateY.value, [closedAt, openAt], [0, backdropOpacity], Extrapolation.CLAMP);
+    return {
+      opacity,
+      // Disable hit-test entirely when fully closed so it doesn't swallow taps.
+      pointerEvents: translateY.value >= closedAt - 0.5 ? 'none' : 'auto'
+    };
+  }, [backdropOpacity, minSnapPoint, screenHeight]);
+  const isExpanded = currentIndex >= 0;
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const handleBackdropPress = useCallback(() => {
+    if (!enableBackdropPress) return;
+    triggerHaptic('selection');
+    close();
+  }, [enableBackdropPress, close]);
+
+  // Don't render the heavy gesture tree at all when nothing's been opened yet.
+  // We still mount once `currentIndex` ≥ 0 OR an animation has started.
+  // For controlled `index`, we treat any value ≠ -1 as "opened".
+  const everOpenedRef = useRef(false);
+  if (isExpanded || controlledIndex !== undefined) {
+    everOpenedRef.current = true;
+  }
+  if (!everOpenedRef.current) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: StyleSheet.absoluteFill,
+    pointerEvents: "box-none",
+    testID: testID,
+    accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.backdrop, {
+        backgroundColor: theme.colors.background.overlay
+      }, backdropStyle],
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: StyleSheet.absoluteFill,
+        onPress: handleBackdropPress,
+        accessibilityRole: "button",
+        accessibilityLabel: "Close bottom sheet",
+        disabled: !enableBackdropPress || !isExpanded
+      })
+    }), /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: panGesture,
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        // 'dialog' is a valid platform role on web/iOS; RN's typings list it as a string union
+        // that varies by platform — cast keeps strict-mode happy.
+        accessibilityRole: 'dialog',
+        accessibilityLabel: accessibilityLabel,
+        accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
+        style: [styles.sheet, {
+          height: maxSnapPoint,
+          backgroundColor: theme.colors.background.elevated,
+          borderTopLeftRadius: theme.radius['2xl'],
+          borderTopRightRadius: theme.radius['2xl'],
+          paddingBottom: insets.bottom,
+          ...theme.shadows.xl
+        }, containerStyle, sheetStyle],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.handleRow,
+          pointerEvents: "box-none",
+          children: /*#__PURE__*/_jsx(View, {
+            style: [styles.handle, {
+              backgroundColor: theme.colors.border.primary
+            }, handleIndicatorStyle]
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.content,
+          children: children
+        })]
+      })
+    })]
+  });
+});
+BottomSheet.displayName = 'BottomSheet';
+
+// ───────── Helpers ─────────
+
+const resolveSnapPoints = (points, screenH) => {
+  const resolved = points.map(p => {
+    if (typeof p === 'number') return p;
+    const pct = parseFloat(p);
+    if (Number.isNaN(pct)) return 0;
+    return pct / 100 * screenH;
+  });
+  return [...resolved].sort((a, b) => a - b);
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const buildStyles = _theme => StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject
+  },
+  sheet: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    overflow: 'hidden'
+  },
+  handleRow: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 10,
+    paddingBottom: 8
+  },
+  handle: {
+    width: 36,
+    height: 4,
+    borderRadius: 2
+  },
+  content: {
+    flex: 1
+  }
+});
+export { BottomSheet };
+export default BottomSheet;
+//# sourceMappingURL=BottomSheet.js.map

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

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

package/lib/module/components/Button/Button.js

@@ -0,0 +1,277 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { ActivityIndicator, Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { usePressAnimation } from "../../hooks/usePressAnimation.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    title,
+    children,
+    variant = 'solid',
+    tone = 'primary',
+    size = 'md',
+    loading = false,
+    disabled = false,
+    fullWidth = false,
+    leftIcon,
+    rightIcon,
+    haptic = 'selection',
+    rounded = false,
+    style,
+    textStyle,
+    pressAnimation = true,
+    onPress,
+    accessibilityLabel,
+    accessibilityHint,
+    testID,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const isInteractive = !disabled && !loading;
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = usePressAnimation({
+    enabled: pressAnimation && isInteractive
+  });
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const sizeStyles = sizeMap[size];
+  const toneColors = useMemo(() => toneFor(theme, tone), [theme, tone]);
+  const variantStyles = useMemo(() => variantFor(theme, variant, toneColors, disabled), [theme, variant, toneColors, disabled]);
+  const handlePress = event => {
+    if (!isInteractive) return;
+    if (haptic !== false) triggerHaptic(haptic);
+    onPress?.(event);
+  };
+  const accessibleLabel = accessibilityLabel ?? title;
+  const content = /*#__PURE__*/_jsx(View, {
+    style: styles.contentRow,
+    children: loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+      color: variantStyles.textColor,
+      size: size === 'xs' || size === 'sm' ? 'small' : 'small'
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [leftIcon ? /*#__PURE__*/_jsx(View, {
+        style: styles.iconLeft,
+        children: leftIcon
+      }) : null, title ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.label, {
+          color: variantStyles.textColor,
+          fontSize: sizeStyles.fontSize,
+          fontWeight: theme.typography.fontWeight.semibold
+        }, textStyle],
+        numberOfLines: 1,
+        children: title
+      }) : children, rightIcon ? /*#__PURE__*/_jsx(View, {
+        style: styles.iconRight,
+        children: rightIcon
+      }) : null]
+    })
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      transform: [{
+        scale
+      }]
+    }, fullWidth ? styles.fullWidth : null],
+    children: /*#__PURE__*/_jsx(Pressable, {
+      ref: ref,
+      onPress: handlePress,
+      onPressIn: pressIn,
+      onPressOut: pressOut,
+      disabled: !isInteractive,
+      android_ripple: variant === 'solid' ? {
+        color: theme.colors.surface.pressed,
+        borderless: false
+      } : {
+        color: theme.colors.surface.hovered,
+        borderless: false
+      },
+      accessibilityRole: "button",
+      accessibilityLabel: accessibleLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityState: {
+        disabled: !isInteractive,
+        busy: loading
+      },
+      testID: testID,
+      style: ({
+        pressed
+      }) => [styles.base, {
+        paddingHorizontal: sizeStyles.paddingHorizontal,
+        paddingVertical: sizeStyles.paddingVertical,
+        minHeight: sizeStyles.minHeight,
+        borderRadius: rounded ? theme.radius.full : sizeStyles.borderRadius,
+        backgroundColor: variantStyles.backgroundColor,
+        borderWidth: variantStyles.borderWidth,
+        borderColor: variantStyles.borderColor,
+        opacity: !isInteractive ? 0.55 : 1
+      }, pressed && variant !== 'solid' ? {
+        backgroundColor: theme.colors.surface.pressed
+      } : null, fullWidth ? styles.fullWidth : null, style],
+      ...rest,
+      children: content
+    })
+  });
+});
+Button.displayName = 'Button';
+const sizeMap = {
+  xs: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    minHeight: 28,
+    fontSize: 12,
+    borderRadius: 8
+  },
+  sm: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    minHeight: 34,
+    fontSize: 13,
+    borderRadius: 10
+  },
+  md: {
+    paddingHorizontal: 16,
+    paddingVertical: 9,
+    minHeight: 42,
+    fontSize: 15,
+    borderRadius: 12
+  },
+  lg: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    minHeight: 50,
+    fontSize: 16,
+    borderRadius: 14
+  },
+  xl: {
+    paddingHorizontal: 24,
+    paddingVertical: 14,
+    minHeight: 58,
+    fontSize: 17,
+    borderRadius: 16
+  }
+};
+const toneFor = (theme, tone) => {
+  switch (tone) {
+    case 'primary':
+      return {
+        base: theme.colors.primary,
+        hover: theme.colors.primaryHover,
+        pressed: theme.colors.primaryPressed,
+        on: theme.colors.text.inverse,
+        muted: theme.colors.primaryMuted
+      };
+    case 'secondary':
+      return {
+        base: theme.colors.secondary,
+        hover: theme.colors.secondaryHover,
+        pressed: theme.colors.secondaryHover,
+        on: theme.colors.text.primary,
+        muted: theme.colors.secondary
+      };
+    case 'success':
+      return {
+        base: theme.colors.success,
+        hover: theme.colors.success,
+        pressed: theme.colors.success,
+        on: theme.colors.text.inverse,
+        muted: theme.colors.background.secondary
+      };
+    case 'warning':
+      return {
+        base: theme.colors.warning,
+        hover: theme.colors.warning,
+        pressed: theme.colors.warning,
+        on: theme.colors.text.inverse,
+        muted: theme.colors.background.secondary
+      };
+    case 'danger':
+      return {
+        base: theme.colors.error,
+        hover: theme.colors.error,
+        pressed: theme.colors.error,
+        on: theme.colors.text.inverse,
+        muted: theme.colors.background.secondary
+      };
+    case 'neutral':
+    default:
+      return {
+        base: theme.colors.background.tertiary,
+        hover: theme.colors.surface.hovered,
+        pressed: theme.colors.surface.pressed,
+        on: theme.colors.text.primary,
+        muted: theme.colors.background.secondary
+      };
+  }
+};
+const variantFor = (theme, variant, toneSet, disabled) => {
+  switch (variant) {
+    case 'solid':
+      return {
+        backgroundColor: disabled ? theme.colors.surface.disabled : toneSet.base,
+        borderColor: 'transparent',
+        borderWidth: 0,
+        textColor: disabled ? theme.colors.text.disabled : toneSet.on
+      };
+    case 'outline':
+      return {
+        backgroundColor: 'transparent',
+        borderColor: disabled ? theme.colors.border.primary : toneSet.base,
+        borderWidth: 1,
+        textColor: disabled ? theme.colors.text.disabled : toneSet.base
+      };
+    case 'ghost':
+      return {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        borderWidth: 0,
+        textColor: disabled ? theme.colors.text.disabled : toneSet.base
+      };
+    case 'link':
+      return {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        borderWidth: 0,
+        textColor: disabled ? theme.colors.text.disabled : theme.colors.text.link
+      };
+    default:
+      return {
+        backgroundColor: toneSet.base,
+        borderColor: 'transparent',
+        borderWidth: 0,
+        textColor: toneSet.on
+      };
+  }
+};
+const buildStyles = _theme => StyleSheet.create({
+  base: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    overflow: 'hidden'
+  },
+  contentRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  label: {
+    textAlign: 'center'
+  },
+  iconLeft: {
+    marginRight: 8
+  },
+  iconRight: {
+    marginLeft: 8
+  },
+  fullWidth: {
+    alignSelf: 'stretch'
+  }
+});
+export { Button };
+export default Button;
+//# sourceMappingURL=Button.js.map

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

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