@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,375 @@
+"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 { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_CLOSE_VELOCITY_THRESHOLD = 1000;
+const DEFAULT_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,
+    haptic,
+    containerStyle,
+    children,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const isControlled = typeof controlledVisible === 'boolean';
+  const drawerTokens = theme.components.drawer;
+  const closeVelocityThreshold = drawerTokens?.closeVelocityThreshold ?? DEFAULT_CLOSE_VELOCITY_THRESHOLD;
+  const dragActivationOffset = drawerTokens?.dragActivationOffset ?? DEFAULT_DRAG_ACTIVATION_OFFSET;
+  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.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: controlled-prop driver: must react to `controlledVisible` alone, or the internal open/close state it sets would re-trigger it
+  useEffect(() => {
+    if (!isControlled) {
+      return;
+    }
+    if (controlledVisible === isOpen) {
+      return;
+    }
+    if (controlledVisible) {
+      open();
+    } else {
+      close();
+    }
+  }, [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([-dragActivationOffset, dragActivationOffset]).failOffsetY([-15, 15]);
+    } else {
+      g = g.activeOffsetY([-dragActivationOffset, dragActivationOffset]).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 < -closeVelocityThreshold;
+      } else {
+        isFastClose = velocity > closeVelocityThreshold;
+      }
+      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, closeVelocityThreshold, dragActivationOffset]);
+
+  // ───────── 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;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    close();
+  }, [enableBackdropPress, close, haptic]);
+
+  // 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: "alert",
+        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.absoluteFill
+  },
+  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

package/lib/module/components/EmptyState/EmptyState.js

@@ -0,0 +1,203 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { usePressAnimation } from "../../hooks/usePressAnimation.js";
+import { fontFor, useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/hapticUtils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SIZE_FALLBACK = {
+  sm: {
+    iconSize: 48,
+    titleFontSize: 'lg',
+    descriptionFontSize: 'sm',
+    paddingVertical: 'lg'
+  },
+  md: {
+    iconSize: 64,
+    titleFontSize: 'xl',
+    descriptionFontSize: 'base',
+    paddingVertical: 'xl'
+  },
+  lg: {
+    iconSize: 80,
+    titleFontSize: '2xl',
+    descriptionFontSize: 'base',
+    paddingVertical: '2xl'
+  }
+};
+const sizeFor = (theme, size) => {
+  const tokens = {
+    ...SIZE_FALLBACK[size],
+    ...(theme.components.emptyState?.[size] ?? {})
+  };
+  return {
+    iconSize: tokens.iconSize,
+    titleSize: theme.typography.fontSize[tokens.titleFontSize],
+    descriptionSize: theme.typography.fontSize[tokens.descriptionFontSize],
+    paddingVertical: theme.spacing[tokens.paddingVertical]
+  };
+};
+const ActionButton = ({
+  action,
+  variant
+}) => {
+  const theme = useTheme();
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = usePressAnimation({
+    enabled: true
+  });
+  const styles = useMemo(() => buildActionStyles(theme), [theme]);
+  const isPrimary = variant === 'primary';
+  const onPress = () => {
+    triggerHaptic('selection');
+    action.onPress();
+  };
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      transform: [{
+        scale
+      }]
+    },
+    children: /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      onPressIn: pressIn,
+      onPressOut: pressOut,
+      accessibilityRole: "button",
+      accessibilityLabel: action.accessibilityLabel ?? action.label,
+      accessibilityHint: action.accessibilityHint,
+      testID: action.testID,
+      android_ripple: {
+        color: isPrimary ? theme.colors.primaryHover : theme.colors.surface.pressed,
+        borderless: false
+      },
+      style: ({
+        pressed
+      }) => [styles.button, isPrimary ? styles.buttonPrimary : styles.buttonSecondary, pressed && !isPrimary ? styles.buttonSecondaryPressed : null],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [styles.buttonText, isPrimary ? styles.buttonTextPrimary : styles.buttonTextSecondary],
+        numberOfLines: 1,
+        children: action.label
+      })
+    })
+  });
+};
+const EmptyState = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    icon,
+    title,
+    description,
+    action,
+    secondaryAction,
+    size = 'md',
+    style,
+    testID
+  } = props;
+  const theme = useTheme();
+  const sz = useMemo(() => sizeFor(theme, size), [theme, size]);
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    accessibilityRole: "summary",
+    testID: testID,
+    style: [styles.root, {
+      paddingVertical: sz.paddingVertical
+    }, style],
+    children: [icon ? /*#__PURE__*/_jsx(View, {
+      style: [styles.iconCircle, {
+        width: sz.iconSize,
+        height: sz.iconSize,
+        borderRadius: sz.iconSize / 2
+      }],
+      children: icon
+    }) : null, /*#__PURE__*/_jsx(Text, {
+      style: [styles.title, {
+        fontSize: sz.titleSize,
+        ...fontFor(theme, 'semibold')
+      }],
+      children: title
+    }), description ? /*#__PURE__*/_jsx(Text, {
+      style: [styles.description, {
+        fontSize: sz.descriptionSize
+      }],
+      children: description
+    }) : null, action || secondaryAction ? /*#__PURE__*/_jsxs(View, {
+      style: styles.actions,
+      children: [action ? /*#__PURE__*/_jsx(ActionButton, {
+        action: action,
+        variant: "primary"
+      }) : null, secondaryAction ? /*#__PURE__*/_jsx(ActionButton, {
+        action: secondaryAction,
+        variant: "secondary"
+      }) : null]
+    }) : null]
+  });
+});
+EmptyState.displayName = 'EmptyState';
+const buildStyles = theme => StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: theme.spacing.lg,
+    gap: theme.spacing.md
+  },
+  iconCircle: {
+    backgroundColor: theme.colors.surface.disabled,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  title: {
+    color: theme.colors.text.primary,
+    textAlign: 'center'
+  },
+  description: {
+    color: theme.colors.text.secondary,
+    textAlign: 'center',
+    maxWidth: 320,
+    lineHeight: theme.typography.fontSize.base * theme.typography.lineHeight.normal
+  },
+  actions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing.sm,
+    marginTop: theme.spacing.xs
+  }
+});
+const buildActionStyles = theme => StyleSheet.create({
+  button: {
+    paddingHorizontal: theme.spacing.lg,
+    paddingVertical: theme.spacing.sm,
+    minHeight: 42,
+    borderRadius: theme.radius.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row'
+  },
+  buttonPrimary: {
+    backgroundColor: theme.colors.primary
+  },
+  buttonSecondary: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+    borderColor: theme.colors.border.primary
+  },
+  buttonSecondaryPressed: {
+    backgroundColor: theme.colors.surface.pressed
+  },
+  buttonText: {
+    fontSize: theme.typography.fontSize.base,
+    ...fontFor(theme, 'semibold')
+  },
+  buttonTextPrimary: {
+    color: theme.colors.text.inverse
+  },
+  buttonTextSecondary: {
+    color: theme.colors.text.primary
+  }
+});
+export { EmptyState };
+export default EmptyState;
+//# sourceMappingURL=EmptyState.js.map

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

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

package/lib/module/components/FieldBase/Chevron.js

@@ -0,0 +1,75 @@
+"use strict";
+
+/**
+ * Chevron — the shared dropdown indicator for the field family.
+ *
+ * Single triangle implementation (drawn with borders — no icon dependency)
+ * used by Select, InlineSelect and PickerTrigger so the glyph never drifts
+ * between trigger components. Pass `open` to get the 180° rotate-on-open
+ * animation; omit it for a static chevron.
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { Animated, View } from 'react-native';
+import { createAnimatedValue, useTheme } from "../../theme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Chevron = ({
+  color,
+  size,
+  open,
+  style
+}) => {
+  const theme = useTheme();
+  const rotate = useRef(createAnimatedValue(open ? 1 : 0)).current;
+  useEffect(() => {
+    if (open === undefined) {
+      return;
+    }
+    const anim = Animated.timing(rotate, {
+      toValue: open ? 1 : 0,
+      duration: theme.motion.duration.fast,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [open, rotate, theme.motion.duration.fast]);
+  const half = size / 2;
+  const triangle = /*#__PURE__*/_jsx(View, {
+    style: {
+      width: 0,
+      height: 0,
+      borderLeftWidth: half * 0.7,
+      borderRightWidth: half * 0.7,
+      borderTopWidth: half * 0.7,
+      borderLeftColor: 'transparent',
+      borderRightColor: 'transparent',
+      borderTopColor: color
+    }
+  });
+  const boxStyle = {
+    width: size,
+    height: size,
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+  if (open === undefined) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [boxStyle, style],
+      children: triangle
+    });
+  }
+  const rotation = rotate.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg']
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [boxStyle, {
+      transform: [{
+        rotate: rotation
+      }]
+    }, style],
+    children: triangle
+  });
+};
+export default Chevron;
+//# sourceMappingURL=Chevron.js.map