@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/module/hooks/useDragToDismiss.js

@@ -0,0 +1,137 @@
+"use strict";
+
+/**
+ * Drag-to-dismiss for the library's bottom sheets (OptionSheet behind Select,
+ * InlineSelect, PhoneNumberInput and FilePicker; the DatePicker, DateRangePicker
+ * and TimePicker sheets).
+ *
+ * Built on react-native-gesture-handler, the same as BottomSheet: RN's own
+ * PanResponder never wins the touch from a native list on Android, so a sheet
+ * that wraps a FlatList could only be dragged from its handle. Two gestures
+ * come back:
+ *   - `handleGesture` for the grab handle / title row: any downward drag
+ *     there moves the sheet, whatever the content is doing;
+ *   - `sheetGesture` for the sheet itself: a downward drag anywhere moves the
+ *     sheet while `contentAtTop()` says the content cannot scroll up any
+ *     further. Pass the list's own `Gesture.Native()` as `scrollGesture` so
+ *     the two run together: the list scrolls as usual, and once it is at its
+ *     top the same finger pulls the sheet down.
+ *
+ * Release past the distance or velocity threshold slides the sheet the rest
+ * of the way and calls `onDismiss`; a short drag springs back. The sheet's
+ * translation is a plain Animated.Value on the native driver, so the finger
+ * tracking stays off the JS thread once the value is set.
+ *
+ * Every mounting point must sit inside a `GestureHandlerRootView`; a native
+ * `<Modal>` needs its own one inside the modal (BottomSheet does the same).
+ */
+
+import { useMemo } from 'react';
+import { Animated, Easing } from 'react-native';
+import { Gesture } from 'react-native-gesture-handler';
+import { setNativeValue, useTheme } from "../theme/index.js";
+
+/** The gesture types as the installed gesture-handler builds them; typed off the value so a second copy of the package cannot split them. */
+
+/** Release beyond this many px of downward drag dismisses. */
+export const DRAG_DISMISS_DISTANCE = 100;
+/** Release above this downward velocity (px/ms) dismisses. */
+export const DRAG_DISMISS_VELOCITY = 0.5;
+
+/** The drag's state machine, free of gesture-handler so it can be unit-tested. */
+
+export const createDragToDismissController = ({
+  drag,
+  travel,
+  onDismiss
+}, motion) => {
+  const {
+    snappy
+  } = motion.spring;
+  const springBack = () => Animated.spring(drag, {
+    toValue: 0,
+    damping: snappy.damping,
+    stiffness: snappy.stiffness,
+    mass: snappy.mass,
+    useNativeDriver: true
+  }).start();
+  return {
+    move: dy => {
+      setNativeValue(drag, Math.max(0, dy));
+    },
+    release: (dy, vy) => {
+      if (dy > DRAG_DISMISS_DISTANCE || vy > DRAG_DISMISS_VELOCITY) {
+        Animated.timing(drag, {
+          toValue: typeof travel === 'function' ? travel() : travel,
+          duration: motion.duration.fast,
+          easing: Easing.bezier(...motion.easing.accelerate),
+          useNativeDriver: true
+        }).start(() => onDismiss());
+      } else {
+        springBack();
+      }
+    },
+    cancel: springBack
+  };
+};
+export const useDragToDismiss = options => {
+  const {
+    drag,
+    travel,
+    onDismiss,
+    contentAtTop,
+    scrollGesture
+  } = options;
+  const {
+    motion
+  } = useTheme();
+  return useMemo(() => {
+    const ctl = createDragToDismissController({
+      drag,
+      travel,
+      onDismiss
+    }, motion);
+
+    // The handle: any clear downward drag.
+    const handleGesture = Gesture.Pan().runOnJS(true).activeOffsetY(6).failOffsetX([-12, 12]).onUpdate(e => ctl.move(e.translationY)).onEnd(e => ctl.release(e.translationY, e.velocityY / 1000)).onFinalize((_e, success) => {
+      if (!success) {
+        ctl.cancel();
+      }
+    });
+
+    // The sheet: the drag only counts from the moment the content is at its
+    // top, so a list scrolls first and the sheet follows once it runs out.
+    let base = 0;
+    let engaged = false;
+    const sheetGesture = Gesture.Pan().runOnJS(true).activeOffsetY(8).failOffsetX([-12, 12]).onBegin(() => {
+      base = 0;
+      engaged = false;
+    }).onUpdate(e => {
+      if (!engaged) {
+        if (contentAtTop ? contentAtTop() : true) {
+          engaged = true;
+          base = e.translationY;
+        } else {
+          return;
+        }
+      }
+      ctl.move(e.translationY - base);
+    }).onEnd(e => {
+      if (engaged) {
+        ctl.release(e.translationY - base, e.velocityY / 1000);
+      }
+    }).onFinalize((_e, success) => {
+      if (!success && engaged) {
+        ctl.cancel();
+      }
+    });
+    if (scrollGesture) {
+      sheetGesture.simultaneousWithExternalGesture(scrollGesture);
+    }
+    return {
+      handleGesture,
+      sheetGesture
+    };
+  }, [drag, travel, onDismiss, contentAtTop, scrollGesture, motion]);
+};
+//# sourceMappingURL=useDragToDismiss.js.map

package/lib/module/hooks/useFlickGuard.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import { useCallback, useRef } from 'react';
+/**
+ * Distance, in points, a finger may travel between press-in and release and
+ * still count as a tap. Beyond it the touch was a scroll flick.
+ */
+export const FLICK_TOLERANCE = 10;
+
+/**
+ * Tells a tap from a scroll flick that happened to start on a pressable.
+ *
+ * React Native's Pressability ignores move events until it has measured the
+ * pressable's region, and on a very fast flick the touch end reaches
+ * JavaScript before the scroll event that would have ended the press. The
+ * press therefore completes although the finger travelled far, so a flick
+ * over a button in scrolling content fired it (seen on iOS). Pressables
+ * record the touch at press-in and drop a press whose release is more than
+ * {@link FLICK_TOLERANCE} points away.
+ */
+export const useFlickGuard = () => {
+  const start = useRef(null);
+  const onPressIn = useCallback(event => {
+    const {
+      pageX,
+      pageY
+    } = event.nativeEvent;
+    start.current = typeof pageX === 'number' && typeof pageY === 'number' ? {
+      x: pageX,
+      y: pageY
+    } : null;
+  }, []);
+
+  /** True when the release is too far from the press-in to be a tap. Resets the guard. */
+  const isFlick = useCallback(event => {
+    const from = start.current;
+    start.current = null;
+    if (!from) {
+      return false;
+    }
+    const {
+      pageX,
+      pageY
+    } = event.nativeEvent;
+    if (typeof pageX !== 'number' || typeof pageY !== 'number') {
+      return false;
+    }
+    return Math.hypot(pageX - from.x, pageY - from.y) > FLICK_TOLERANCE;
+  }, []);
+  return {
+    onPressIn,
+    isFlick
+  };
+};
+//# sourceMappingURL=useFlickGuard.js.map

package/lib/module/hooks/usePressAnimation.js

@@ -0,0 +1,126 @@
+"use strict";
+
+import { useCallback, useMemo, useRef } from 'react';
+import { Easing, Animated as RNAnimated } from 'react-native';
+import { useTheme } from "../theme/index.js";
+import { createAnimatedValue } from "../theme/animatedValue.js";
+
+/**
+ * Named press feedback. Every preset drives transform or opacity only, so it
+ * runs on the native driver, and reads its timing from `theme.motion`, so
+ * Reduce Motion collapses it with the rest of the library.
+ *
+ * - `scale`: shrinks a touch on press-in, springs back on release. The default.
+ * - `bounce`: shrinks further and comes back on the bouncy spring, overshooting once.
+ * - `fade`: dims on press-in, back to full on release. No geometry change.
+ * - `sink`: moves down two points on press-in, like a key, and springs back up.
+ * - `pulse`: nothing on press-in; a confirmed press swells the control past
+ *   its size and settles. Plays from `press()`, not `pressOut()`, so a
+ *   cancelled touch or a scroll flick does not read as a tap.
+ */
+
+export const PRESS_ANIMATION_PRESETS = ['scale', 'bounce', 'fade', 'sink', 'pulse'];
+const FADE_TO = 0.6;
+const SINK_BY = 2;
+const PULSE_TO = 1.05;
+const DEFAULT_SCALE_TO = {
+  scale: 0.97,
+  bounce: 0.92,
+  fade: 1,
+  sink: 1,
+  pulse: 1
+};
+export const usePressAnimation = ({
+  preset = 'scale',
+  scaleTo,
+  pressDuration,
+  enabled = true
+} = {}) => {
+  const theme = useTheme();
+  const scale = useRef(createAnimatedValue(1)).current;
+  const opacity = useRef(createAnimatedValue(1)).current;
+  const translateY = useRef(createAnimatedValue(0)).current;
+  const pressScale = scaleTo ?? DEFAULT_SCALE_TO[preset];
+  const timing = useCallback((value, toValue, easing) => RNAnimated.timing(value, {
+    toValue,
+    duration: pressDuration ?? theme.motion.duration.fast,
+    easing: Easing.bezier(...easing),
+    useNativeDriver: true
+  }), [pressDuration, theme]);
+  const spring = useCallback((value, toValue, token) => RNAnimated.spring(value, {
+    toValue,
+    damping: theme.motion.spring[token].damping,
+    stiffness: theme.motion.spring[token].stiffness,
+    mass: theme.motion.spring[token].mass,
+    useNativeDriver: true
+  }), [theme]);
+  const pressIn = useCallback(() => {
+    if (!enabled) {
+      return;
+    }
+    switch (preset) {
+      case 'scale':
+      case 'bounce':
+        timing(scale, pressScale, theme.motion.easing.standard).start();
+        break;
+      case 'fade':
+        timing(opacity, FADE_TO, theme.motion.easing.standard).start();
+        break;
+      case 'sink':
+        timing(translateY, SINK_BY, theme.motion.easing.standard).start();
+        break;
+      case 'pulse':
+        break;
+    }
+  }, [enabled, preset, pressScale, scale, opacity, translateY, theme, timing]);
+  const pressOut = useCallback(() => {
+    if (!enabled) {
+      return;
+    }
+    switch (preset) {
+      case 'scale':
+        spring(scale, 1, 'snappy').start();
+        break;
+      case 'bounce':
+        spring(scale, 1, 'bouncy').start();
+        break;
+      case 'fade':
+        timing(opacity, 1, theme.motion.easing.decelerate).start();
+        break;
+      case 'sink':
+        spring(translateY, 0, 'snappy').start();
+        break;
+      case 'pulse':
+        break;
+    }
+  }, [enabled, preset, scale, opacity, translateY, theme, timing, spring]);
+  const press = useCallback(() => {
+    if (!enabled || preset !== 'pulse') {
+      return;
+    }
+    RNAnimated.sequence([RNAnimated.timing(scale, {
+      toValue: PULSE_TO,
+      duration: theme.motion.duration.instant,
+      easing: Easing.bezier(...theme.motion.easing.accelerate),
+      useNativeDriver: true
+    }), spring(scale, 1, 'snappy')]).start();
+  }, [enabled, preset, scale, theme, spring]);
+  const style = useMemo(() => ({
+    transform: [{
+      scale
+    }, {
+      translateY
+    }],
+    opacity
+  }), [scale, translateY, opacity]);
+  return {
+    scale,
+    opacity,
+    translateY,
+    style,
+    pressIn,
+    pressOut,
+    press
+  };
+};
+//# sourceMappingURL=usePressAnimation.js.map

package/lib/module/hooks/useReducedMotion.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { useEffect, useState } from 'react';
+import { AccessibilityInfo } from 'react-native';
+
+/**
+ * Tracks the OS "Reduce Motion" accessibility setting. The library's
+ * ThemeProvider uses this to collapse `theme.motion` (durations → 0, springs →
+ * near-instant) so animations don't trigger vestibular discomfort; consumers
+ * can also read it directly to swap an animated path for a static one.
+ */
+export const useReducedMotion = () => {
+  const [reduced, setReduced] = useState(false);
+  useEffect(() => {
+    let mounted = true;
+    AccessibilityInfo.isReduceMotionEnabled().then(value => {
+      if (mounted) {
+        setReduced(value);
+      }
+    });
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', value => setReduced(value));
+    return () => {
+      mounted = false;
+      sub.remove();
+    };
+  }, []);
+  return reduced;
+};
+//# sourceMappingURL=useReducedMotion.js.map

package/lib/module/hooks/useToggle.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import { useCallback, useState } from 'react';
+export const useToggle = (initial = false) => {
+  const [value, setValue] = useState(initial);
+  const toggle = useCallback(() => setValue(v => !v), []);
+  const setOn = useCallback(() => setValue(true), []);
+  const setOff = useCallback(() => setValue(false), []);
+  return {
+    value,
+    toggle,
+    setOn,
+    setOff,
+    setValue
+  };
+};
+//# sourceMappingURL=useToggle.js.map

package/lib/module/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+// Components
+export * from "./components/index.js";
+export { APP_ICON_SIZES, AppIcon, CURATED_ICON_NAMES, defaultIcons, ICON_NAMES, renderSlotIcon } from "./components/AppIcon/index.js";
+// Form engine (dependency-free; replaces Formik + Yup)
+export { deletePath, Form, getPath, isFieldFilled, rules, setPath, useField, useFieldArray, useForm, useFormCompletion, useFormContext, useOptionalFormContext } from "./form/index.js";
+// Hooks
+export { FLICK_TOLERANCE, PRESS_ANIMATION_PRESETS, useControllableState, useDebounce, useFlickGuard, usePressAnimation, useReducedMotion, useToggle } from "./hooks/index.js";
+// Initialization
+export { initUI } from "./initUI.js";
+// Network UI
+export { NetworkStatusBanner } from "./network/index.js";
+// Theme
+export { darkTheme, getColorMode, getTheme, lightTheme, mergeTheme, resetTheme, setColorMode, setTheme, subscribeTheme, ThemeProvider, useTheme, useThemeMode } from "./theme/index.js";
+// Utils
+export { Breakpoints, configureFeedback, feedback, hapticForIntent, isFeedbackEnabled, isScreenSize, isTablet, Margin, Padding, Responsive, ScreenDimensions, Spacing, SQUIRCLE_MIN_RADIUS, SQUIRCLE_SMOOTHING, setHapticImplementation, shadowStyle, smoothCorners, squircleApplies, squircleHostRadius, squirclePath, triggerHaptic, useScreenDimensions, warnUnknownProps } from "./utils/index.js";
+//# sourceMappingURL=index.js.map

package/lib/module/initUI.js

@@ -0,0 +1,19 @@
+"use strict";
+
+import { setColorMode, setTheme } from "./theme/index.js";
+/**
+ * Configure the global functional theme API used outside of React tree
+ * (use ThemeProvider for React-tree consumers; both can coexist).
+ */
+export const initUI = (options = {}) => {
+  if (options.defaultMode) {
+    setColorMode(options.defaultMode);
+  }
+  if (options.light) {
+    setTheme(options.light, 'light');
+  }
+  if (options.dark) {
+    setTheme(options.dark, 'dark');
+  }
+};
+//# sourceMappingURL=initUI.js.map

package/lib/module/network/NetworkStatusBanner.js

@@ -0,0 +1,83 @@
+"use strict";
+
+import { useNetworkStatus } from '@webority/mobile-core';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, Text } from 'react-native';
+import { useTheme } from "../theme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A subtle animated banner that slides in when the device goes offline.
+ * Mount once near the app root (above your navigation tree).
+ */
+export const NetworkStatusBanner = ({
+  message = 'You are offline. Some features may be unavailable.',
+  position = 'top',
+  style,
+  disabled = false
+}) => {
+  const theme = useTheme();
+  const {
+    isConnected,
+    isInternetReachable
+  } = useNetworkStatus();
+  const offline = !disabled && (!isConnected || isInternetReachable === false);
+  const slide = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    Animated.parallel([Animated.timing(slide, {
+      toValue: offline ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      useNativeDriver: true
+    }), Animated.timing(opacity, {
+      toValue: offline ? 1 : 0,
+      duration: theme.motion.duration.normal,
+      useNativeDriver: true
+    })]).start();
+  }, [offline, slide, opacity, theme.motion.duration.normal]);
+  const styles = useMemo(() => buildStyles(), []);
+  const translateY = slide.interpolate({
+    inputRange: [0, 1],
+    outputRange: [position === 'top' ? -56 : 56, 0]
+  });
+  return /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: offline ? 'auto' : 'none',
+    accessibilityRole: "alert",
+    accessibilityLiveRegion: offline ? 'polite' : 'none',
+    style: [styles.container, position === 'top' ? styles.top : styles.bottom, {
+      backgroundColor: theme.colors.error,
+      opacity,
+      transform: [{
+        translateY
+      }]
+    }, style],
+    children: /*#__PURE__*/_jsx(Text, {
+      style: {
+        color: theme.colors.text.inverse,
+        fontSize: theme.typography.fontSize.sm,
+        fontWeight: theme.typography.fontWeight.semibold,
+        textAlign: 'center'
+      },
+      numberOfLines: 2,
+      children: message
+    })
+  });
+};
+const buildStyles = () => StyleSheet.create({
+  container: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    zIndex: 1000,
+    elevation: 8
+  },
+  top: {
+    top: 0
+  },
+  bottom: {
+    bottom: 0
+  }
+});
+export default NetworkStatusBanner;
+//# sourceMappingURL=NetworkStatusBanner.js.map

package/lib/module/network/index.js

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

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/specs/NativePdfRasterizer.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { TurboModuleRegistry } from 'react-native';
+export default TurboModuleRegistry.get('PdfRasterizer');
+//# sourceMappingURL=NativePdfRasterizer.js.map

package/lib/module/theme/Gradient.js

@@ -0,0 +1,52 @@
+"use strict";
+
+import { View } from 'react-native';
+
+/**
+ * Render a linear gradient with React Native's own `experimental_backgroundImage`
+ * style prop. `GradientDefinition` keeps its vector-based `start`/`end` shape,
+ * which is translated to a CSS angle here.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_START = {
+  x: 0.5,
+  y: 0
+};
+const DEFAULT_END = {
+  x: 0.5,
+  y: 1
+};
+const round = value => Math.round(value * 1000) / 1000;
+
+/**
+ * CSS gradient angles are measured clockwise from "to top", while the vectors
+ * live in a y-down 0..1 space, so the y delta is negated before the atan2.
+ */
+export const gradientAngle = (start = DEFAULT_START, end = DEFAULT_END) => {
+  const degrees = Math.atan2(end.x - start.x, start.y - end.y) * 180 / Math.PI;
+  return round((degrees % 360 + 360) % 360);
+};
+export const toBackgroundImage = gradient => ({
+  type: 'linear-gradient',
+  direction: `${gradientAngle(gradient.start, gradient.end)}deg`,
+  colorStops: gradient.colors.map((color, index) => {
+    const location = gradient.locations?.[index];
+    return location === undefined ? {
+      color
+    } : {
+      color,
+      positions: [`${round(location * 100)}%`]
+    };
+  })
+});
+export const Gradient = ({
+  gradient,
+  style,
+  children
+}) => /*#__PURE__*/_jsx(View, {
+  style: [{
+    experimental_backgroundImage: [toBackgroundImage(gradient)]
+  }, style],
+  children: children
+});
+//# sourceMappingURL=Gradient.js.map

package/lib/module/theme/ThemeContext.js

@@ -0,0 +1,93 @@
+"use strict";
+
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { Appearance } from 'react-native';
+import { useReducedMotion } from "../hooks/useReducedMotion.js";
+import { mergeTheme } from "./merge.js";
+import { darkTheme, lightTheme } from "./tokens.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const REDUCED_SPRING = {
+  damping: 100,
+  stiffness: 1000,
+  mass: 1
+};
+// Reduce Motion: collapse timed animations to instant and make springs settle in
+// ~1 frame, so vestibular-sensitive users aren't subjected to slides/scales/bounces.
+const collapseMotion = motion => ({
+  ...motion,
+  duration: {
+    instant: 0,
+    fast: 0,
+    normal: 0,
+    slow: 0,
+    slower: 0
+  },
+  spring: {
+    gentle: REDUCED_SPRING,
+    bouncy: REDUCED_SPRING,
+    snappy: REDUCED_SPRING
+  }
+});
+const defaultValue = {
+  theme: lightTheme,
+  mode: 'light',
+  preference: 'system',
+  setPreference: () => undefined,
+  toggleColorMode: () => undefined
+};
+const ThemeContext = /*#__PURE__*/createContext(defaultValue);
+export const ThemeProvider = ({
+  children,
+  initialPreference = 'system',
+  lightOverrides,
+  darkOverrides
+}) => {
+  const [preference, setPreference] = useState(initialPreference);
+  const [systemMode, setSystemMode] = useState(() => Appearance.getColorScheme() ?? 'light');
+  useEffect(() => {
+    const sub = Appearance.addChangeListener(({
+      colorScheme
+    }) => {
+      setSystemMode(colorScheme ?? 'light');
+    });
+    return () => sub.remove();
+  }, []);
+  const mode = preference === 'system' ? systemMode : preference;
+  const reduceMotion = useReducedMotion();
+  const theme = useMemo(() => {
+    const base = mode === 'dark' ? darkTheme : lightTheme;
+    const overrides = mode === 'dark' ? darkOverrides : lightOverrides;
+    const merged = overrides ? mergeTheme(base, overrides) : base;
+    return reduceMotion ? {
+      ...merged,
+      motion: collapseMotion(merged.motion)
+    } : merged;
+  }, [mode, lightOverrides, darkOverrides, reduceMotion]);
+  const value = useMemo(() => ({
+    theme,
+    mode,
+    preference,
+    setPreference,
+    toggleColorMode: () => setPreference(current => {
+      if (current === 'system') {
+        return systemMode === 'dark' ? 'light' : 'dark';
+      }
+      return current === 'dark' ? 'light' : 'dark';
+    })
+  }), [theme, mode, preference, systemMode]);
+  return /*#__PURE__*/_jsx(ThemeContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+export const useTheme = () => useContext(ThemeContext).theme;
+export const useThemeMode = () => {
+  const ctx = useContext(ThemeContext);
+  return {
+    mode: ctx.mode,
+    preference: ctx.preference,
+    setPreference: ctx.setPreference,
+    toggleColorMode: ctx.toggleColorMode
+  };
+};
+//# sourceMappingURL=ThemeContext.js.map