@webority-technologies/mobile 0.0.1

package/lib/module/components/Dialog/Dialog.js

@@ -0,0 +1,210 @@
+"use strict";
+
+import React, { useCallback, useMemo } from 'react';
+import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { Modal } from "../Modal/Modal.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Dialog = props => {
+  const {
+    visible,
+    onClose,
+    title,
+    message,
+    icon,
+    variant = 'default',
+    actions,
+    dismissOnAction = true,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = useTheme();
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const variantTint = useMemo(() => tintForVariant(theme, variant), [theme, variant]);
+  const handleAction = useCallback(action => {
+    if (action.loading) return;
+    triggerHaptic('selection');
+    action.onPress();
+    if (dismissOnAction) {
+      onClose();
+    }
+  }, [dismissOnAction, onClose]);
+  return /*#__PURE__*/_jsx(Modal, {
+    visible: visible,
+    onRequestClose: onClose,
+    presentation: "centered",
+    accessibilityLabel: accessibilityLabel ?? title,
+    testID: testID,
+    children: /*#__PURE__*/_jsxs(View, {
+      accessibilityRole: 'alertdialog',
+      accessibilityLabel: accessibilityLabel ?? title,
+      style: styles.container,
+      children: [icon ? /*#__PURE__*/_jsx(View, {
+        style: [styles.iconWrapper, {
+          backgroundColor: variantTint.muted,
+          marginBottom: theme.spacing.md
+        }],
+        children: icon
+      }) : null, title ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.title, {
+          color: theme.colors.text.primary,
+          fontSize: theme.typography.fontSize.xl,
+          fontWeight: theme.typography.fontWeight.semibold,
+          marginBottom: message ? theme.spacing.sm : theme.spacing.md
+        }],
+        accessibilityRole: "header",
+        children: title
+      }) : null, typeof message === 'string' ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.message, {
+          color: theme.colors.text.secondary,
+          fontSize: theme.typography.fontSize.base,
+          lineHeight: theme.typography.fontSize.base * theme.typography.lineHeight.normal,
+          marginBottom: actions && actions.length > 0 ? theme.spacing.lg : 0
+        }],
+        children: message
+      }) : message ? /*#__PURE__*/_jsx(View, {
+        style: {
+          marginBottom: actions && actions.length > 0 ? theme.spacing.lg : 0
+        },
+        children: message
+      }) : null, actions && actions.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: styles.actionsRow,
+        children: actions.map((action, index) => {
+          const tone = action.tone ?? 'primary';
+          const buttonStyle = actionStyleFor(theme, tone, variant);
+          const isLast = index === actions.length - 1;
+          return /*#__PURE__*/_jsx(Pressable, {
+            onPress: () => handleAction(action),
+            disabled: action.loading,
+            accessibilityRole: "button",
+            accessibilityLabel: action.label,
+            accessibilityState: {
+              busy: action.loading,
+              disabled: action.loading
+            },
+            style: ({
+              pressed
+            }) => [styles.actionButton, {
+              backgroundColor: buttonStyle.backgroundColor,
+              borderColor: buttonStyle.borderColor,
+              borderWidth: buttonStyle.borderWidth,
+              borderRadius: theme.radius.md,
+              paddingVertical: theme.spacing.md - 2,
+              paddingHorizontal: theme.spacing.lg,
+              marginRight: isLast ? 0 : theme.spacing.sm,
+              opacity: action.loading ? 0.7 : pressed ? 0.85 : 1
+            }],
+            children: action.loading ? /*#__PURE__*/_jsx(ActivityIndicator, {
+              size: "small",
+              color: buttonStyle.textColor
+            }) : /*#__PURE__*/_jsx(Text, {
+              style: {
+                color: buttonStyle.textColor,
+                fontSize: theme.typography.fontSize.base,
+                fontWeight: theme.typography.fontWeight.semibold,
+                textAlign: 'center'
+              },
+              numberOfLines: 1,
+              children: action.label
+            })
+          }, `${action.label}-${index}`);
+        })
+      }) : null]
+    })
+  });
+};
+Dialog.displayName = 'Dialog';
+const tintForVariant = (theme, variant) => {
+  switch (variant) {
+    case 'success':
+      return {
+        base: theme.colors.success,
+        muted: theme.colors.background.secondary
+      };
+    case 'warning':
+      return {
+        base: theme.colors.warning,
+        muted: theme.colors.background.secondary
+      };
+    case 'danger':
+      return {
+        base: theme.colors.error,
+        muted: theme.colors.background.secondary
+      };
+    case 'info':
+      return {
+        base: theme.colors.info,
+        muted: theme.colors.background.secondary
+      };
+    case 'default':
+    default:
+      return {
+        base: theme.colors.primary,
+        muted: theme.colors.primaryMuted
+      };
+  }
+};
+const actionStyleFor = (theme, tone, variant) => {
+  const variantBase = tintForVariant(theme, variant).base;
+  switch (tone) {
+    case 'primary':
+      {
+        const bg = variant === 'default' ? theme.colors.primary : variantBase;
+        return {
+          backgroundColor: bg,
+          borderColor: 'transparent',
+          borderWidth: 0,
+          textColor: theme.colors.text.inverse
+        };
+      }
+    case 'danger':
+      return {
+        backgroundColor: theme.colors.error,
+        borderColor: 'transparent',
+        borderWidth: 0,
+        textColor: theme.colors.text.inverse
+      };
+    case 'neutral':
+    default:
+      return {
+        backgroundColor: 'transparent',
+        borderColor: theme.colors.border.primary,
+        borderWidth: 1,
+        textColor: theme.colors.text.primary
+      };
+  }
+};
+const buildStyles = _theme => StyleSheet.create({
+  container: {
+    alignItems: 'stretch'
+  },
+  iconWrapper: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center'
+  },
+  title: {
+    textAlign: 'center'
+  },
+  message: {
+    textAlign: 'center'
+  },
+  actionsRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center'
+  },
+  actionButton: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: 44
+  }
+});
+export { Dialog };
+export default Dialog;
+//# sourceMappingURL=Dialog.js.map

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

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

package/lib/module/components/Divider/Divider.js

@@ -0,0 +1,114 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const spacingFor = (theme, spacing) => {
+  switch (spacing) {
+    case 'sm':
+      return theme.spacing.sm;
+    case 'md':
+      return theme.spacing.md;
+    case 'lg':
+      return theme.spacing.lg;
+    case 'none':
+    default:
+      return 0;
+  }
+};
+const Divider = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    orientation = 'horizontal',
+    thickness = 1,
+    color,
+    spacing = 'none',
+    inset = 0,
+    label,
+    labelPosition = 'center',
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const lineColor = color ?? theme.colors.border.primary;
+  const margin = spacingFor(theme, spacing);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  if (orientation === 'vertical') {
+    return /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      accessibilityRole: "none",
+      testID: testID,
+      style: [styles.vertical, {
+        width: thickness,
+        backgroundColor: lineColor,
+        marginHorizontal: margin,
+        marginTop: inset
+      }, style]
+    });
+  }
+  if (label) {
+    const startFlex = labelPosition === 'start' ? 0 : labelPosition === 'end' ? 1 : 1;
+    const endFlex = labelPosition === 'end' ? 0 : labelPosition === 'start' ? 1 : 1;
+    return /*#__PURE__*/_jsxs(View, {
+      ref: ref,
+      accessibilityRole: "none",
+      testID: testID,
+      style: [styles.horizontalRow, {
+        marginVertical: margin,
+        marginLeft: inset
+      }, style],
+      children: [startFlex > 0 ? /*#__PURE__*/_jsx(View, {
+        style: [styles.horizontalLine, {
+          height: thickness,
+          backgroundColor: lineColor,
+          flex: startFlex
+        }]
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: styles.label,
+        numberOfLines: 1,
+        children: label
+      }), endFlex > 0 ? /*#__PURE__*/_jsx(View, {
+        style: [styles.horizontalLine, {
+          height: thickness,
+          backgroundColor: lineColor,
+          flex: endFlex
+        }]
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    accessibilityRole: "none",
+    testID: testID,
+    style: [styles.horizontalLine, {
+      height: thickness,
+      backgroundColor: lineColor,
+      marginVertical: margin,
+      marginLeft: inset
+    }, style]
+  });
+});
+Divider.displayName = 'Divider';
+const buildStyles = theme => StyleSheet.create({
+  horizontalRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%'
+  },
+  horizontalLine: {
+    width: '100%',
+    alignSelf: 'stretch'
+  },
+  vertical: {
+    alignSelf: 'stretch'
+  },
+  label: {
+    marginHorizontal: theme.spacing.sm,
+    color: theme.colors.text.tertiary,
+    fontSize: theme.typography.fontSize.sm,
+    fontWeight: theme.typography.fontWeight.medium
+  }
+});
+export { Divider };
+export default Divider;
+//# sourceMappingURL=Divider.js.map

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

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

package/lib/module/components/Drawer/Drawer.js

@@ -0,0 +1,340 @@
+"use strict";
+
+/**
+ * Drawer — slide-in side drawer (left / right / top / bottom).
+ *
+ * Built on Reanimated 3 + Gesture Handler 2 — gestures and animations run on the
+ * UI thread for buttery 60/120fps motion. Mirrors the BottomSheet ergonomics:
+ * imperative ref API, controlled/uncontrolled visibility, swipe-to-dismiss,
+ * tap-backdrop-to-dismiss, full a11y (modal dialog).
+ *
+ * USAGE:
+ *
+ * const ref = useRef<DrawerRef>(null);
+ * <Drawer ref={ref} side="left" width={300}>
+ *   <YourMenu />
+ * </Drawer>
+ *
+ * ref.current?.open();
+ * ref.current?.close();
+ * ref.current?.toggle();
+ */
+
+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 } 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 CLOSE_VELOCITY_THRESHOLD = 1000;
+const DRAG_ACTIVATION_OFFSET = 10;
+const Drawer = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    visible: controlledVisible,
+    defaultVisible = false,
+    onChange,
+    side = 'left',
+    width,
+    enableSwipe = true,
+    enableBackdropPress = true,
+    backdropOpacity = 0.5,
+    containerStyle,
+    children,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const isControlled = typeof controlledVisible === 'boolean';
+  const [windowDims, setWindowDims] = useState(() => Dimensions.get('window'));
+  useEffect(() => {
+    const sub = Dimensions.addEventListener('change', ({
+      window
+    }) => setWindowDims(window));
+    return () => sub.remove();
+  }, []);
+  const isHorizontal = side === 'left' || side === 'right';
+  const sheetSize = useMemo(() => resolveSize(width, isHorizontal, windowDims), [width, isHorizontal, windowDims]);
+
+  // closedOffset is signed: drawer is translated by `closedOffset` when fully closed,
+  // and by 0 when fully open. We always animate a single shared value `progress`
+  // (signed offset along the slide axis) so the same interpolation works for any side.
+  const closedOffset = useMemo(() => {
+    switch (side) {
+      case 'left':
+        return -sheetSize;
+      case 'right':
+        return sheetSize;
+      case 'top':
+        return -sheetSize;
+      case 'bottom':
+        return sheetSize;
+    }
+  }, [side, sheetSize]);
+  const offset = useSharedValue(closedOffset);
+  const dragStart = useSharedValue(closedOffset);
+  const [isOpen, setIsOpen] = useState(defaultVisible);
+  const isOpenShared = useSharedValue(defaultVisible);
+
+  // Whenever closedOffset changes (orientation / width prop), keep current state coherent.
+  useEffect(() => {
+    if (!isOpen) {
+      offset.value = closedOffset;
+      dragStart.value = closedOffset;
+    }
+  }, [closedOffset, isOpen, offset, dragStart]);
+  const springCfg = theme.motion.spring.snappy;
+  const animateOpen = useCallback(() => {
+    offset.value = withSpring(0, springCfg);
+  }, [offset, springCfg]);
+  const animateClose = useCallback(() => {
+    offset.value = withSpring(closedOffset, springCfg);
+  }, [offset, closedOffset, springCfg]);
+  const setOpenJS = useCallback(next => {
+    setIsOpen(prev => {
+      if (prev === next) return prev;
+      onChange?.(next);
+      return next;
+    });
+    isOpenShared.value = next;
+  }, [onChange, isOpenShared]);
+  const open = useCallback(() => {
+    setOpenJS(true);
+    animateOpen();
+  }, [setOpenJS, animateOpen]);
+  const close = useCallback(() => {
+    setOpenJS(false);
+    animateClose();
+  }, [setOpenJS, animateClose]);
+  const toggle = useCallback(() => {
+    if (isOpen) close();else open();
+  }, [isOpen, open, close]);
+  useImperativeHandle(ref, () => ({
+    open,
+    close,
+    toggle
+  }), [open, close, toggle]);
+
+  // Drive the controlled `visible` prop.
+  useEffect(() => {
+    if (!isControlled) return;
+    if (controlledVisible === isOpen) return;
+    if (controlledVisible) open();else close();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controlledVisible]);
+
+  // ───────── Gesture (UI thread) ─────────
+  const panGesture = useMemo(() => {
+    const closed = closedOffset;
+    const sideValue = side;
+    const swipeAllowed = enableSwipe;
+    let g = Gesture.Pan();
+    if (isHorizontal) {
+      g = g.activeOffsetX([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetY([-15, 15]);
+    } else {
+      g = g.activeOffsetY([-DRAG_ACTIVATION_OFFSET, DRAG_ACTIVATION_OFFSET]).failOffsetX([-15, 15]);
+    }
+    return g.onStart(() => {
+      'worklet';
+
+      if (!swipeAllowed) return;
+      dragStart.value = offset.value;
+    }).onUpdate(event => {
+      'worklet';
+
+      if (!swipeAllowed) return;
+      const delta = isHorizontal ? event.translationX : event.translationY;
+      const next = dragStart.value + delta;
+      // Clamp at the open edge (offset = 0) with a touch of rubber-banding
+      // and at the closed edge (offset = closed).
+      const minBound = Math.min(0, closed);
+      const maxBound = Math.max(0, closed);
+      if (next < minBound) {
+        offset.value = minBound + (next - minBound) * 0.25;
+      } else if (next > maxBound) {
+        offset.value = maxBound + (next - maxBound) * 0.25;
+      } else {
+        offset.value = next;
+      }
+    }).onEnd(event => {
+      'worklet';
+
+      if (!swipeAllowed) return;
+      const velocity = isHorizontal ? event.velocityX : event.velocityY;
+      const releaseOffset = offset.value;
+
+      // Direction the user must swipe to *close* the drawer:
+      //   left   → negative X
+      //   right  → positive X
+      //   top    → negative Y
+      //   bottom → positive Y
+      let isFastClose = false;
+      if (sideValue === 'left' || sideValue === 'top') {
+        isFastClose = velocity < -CLOSE_VELOCITY_THRESHOLD;
+      } else {
+        isFastClose = velocity > CLOSE_VELOCITY_THRESHOLD;
+      }
+      const closedAbs = Math.abs(closed);
+      const traveledClosed = Math.abs(releaseOffset) / closedAbs; // 0 = open, 1 = closed
+      const shouldClose = isFastClose || traveledClosed > 0.5;
+      if (shouldClose) {
+        runOnJS(setOpenJS)(false);
+        offset.value = withSpring(closed, springCfg);
+      } else {
+        runOnJS(setOpenJS)(true);
+        offset.value = withSpring(0, springCfg);
+      }
+    });
+  }, [closedOffset, dragStart, enableSwipe, isHorizontal, offset, setOpenJS, side, springCfg]);
+
+  // ───────── Animated styles ─────────
+  const sheetStyle = useAnimatedStyle(() => {
+    if (isHorizontal) {
+      return {
+        transform: [{
+          translateX: offset.value
+        }]
+      };
+    }
+    return {
+      transform: [{
+        translateY: offset.value
+      }]
+    };
+  });
+  const backdropStyle = useAnimatedStyle(() => {
+    // When offset === closedOffset → 0 opacity; when offset === 0 → backdropOpacity.
+    const opacity = interpolate(offset.value, [closedOffset, 0], [0, backdropOpacity], Extrapolation.CLAMP);
+    const closedDistance = Math.abs(offset.value - closedOffset);
+    return {
+      opacity,
+      pointerEvents: closedDistance < 0.5 ? 'none' : 'auto'
+    };
+  }, [closedOffset, backdropOpacity]);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const handleBackdropPress = useCallback(() => {
+    if (!enableBackdropPress) return;
+    triggerHaptic('selection');
+    close();
+  }, [enableBackdropPress, close]);
+
+  // Per-side container layout — must be a hook on every render path so we
+  // can't gate it on the lazy-mount early-return below.
+  const sideLayout = useMemo(() => {
+    switch (side) {
+      case 'left':
+        return {
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          left: 0,
+          width: sheetSize,
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left
+        };
+      case 'right':
+        return {
+          position: 'absolute',
+          top: 0,
+          bottom: 0,
+          right: 0,
+          width: sheetSize,
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+          paddingRight: insets.right
+        };
+      case 'top':
+        return {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          height: sheetSize,
+          paddingTop: insets.top,
+          paddingLeft: insets.left,
+          paddingRight: insets.right
+        };
+      case 'bottom':
+        return {
+          position: 'absolute',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: sheetSize,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+          paddingRight: insets.right
+        };
+    }
+  }, [side, sheetSize, insets]);
+
+  // Mount lazily — only render the heavy gesture/animation tree once the drawer
+  // has been opened at least once. Same trick as BottomSheet.
+  const everOpenedRef = useRef(defaultVisible);
+  if (isOpen) everOpenedRef.current = true;
+  if (!everOpenedRef.current) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: StyleSheet.absoluteFill,
+    pointerEvents: "box-none",
+    testID: testID,
+    accessibilityViewIsModal: isOpen,
+    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 drawer",
+        disabled: !enableBackdropPress || !isOpen
+      })
+    }), /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: panGesture,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        accessibilityRole: 'dialog',
+        accessibilityLabel: accessibilityLabel ?? 'Drawer',
+        accessibilityViewIsModal: isOpen,
+        style: [sideLayout, {
+          backgroundColor: theme.colors.background.elevated,
+          ...theme.shadows.xl
+        }, containerStyle, sheetStyle],
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.content,
+          children: children
+        })
+      })
+    })]
+  });
+});
+Drawer.displayName = 'Drawer';
+
+// ───────── Helpers ─────────
+
+const resolveSize = (width, isHorizontal, win) => {
+  if (typeof width === 'number') return width;
+  if (typeof width === 'string') {
+    const pct = parseFloat(width);
+    if (Number.isNaN(pct)) return isHorizontal ? 280 : Math.round(win.height * 0.4);
+    const base = isHorizontal ? win.width : win.height;
+    return pct / 100 * base;
+  }
+  // Defaults
+  return isHorizontal ? 280 : Math.round(win.height * 0.4);
+};
+const buildStyles = _theme => StyleSheet.create({
+  backdrop: {
+    ...StyleSheet.absoluteFillObject
+  },
+  content: {
+    flex: 1
+  }
+});
+export { Drawer };
+export default Drawer;
+//# sourceMappingURL=Drawer.js.map

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

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