@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/module/hooks/useFlickGuard.js

@@ -1,55 +1 @@
-"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
+import{useCallback as e,useRef as t}from"react";export const FLICK_TOLERANCE=10;export const useFlickGuard=()=>{const n=t(null);return{onPressIn:e(e=>{const{pageX:t,pageY:r}=e.nativeEvent;n.current="number"==typeof t&&"number"==typeof r?{x:t,y:r}:null},[]),isFlick:e(e=>{const t=n.current;if(n.current=null,!t)return!1;const{pageX:r,pageY:o}=e.nativeEvent;return"number"==typeof r&&"number"==typeof o&&Math.hypot(r-t.x,o-t.y)>10},[])}};

package/lib/module/hooks/usePressAnimation.js

@@ -1,126 +1 @@
-"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
+import{useCallback as e,useMemo as s,useRef as a}from"react";import{Easing as t,Animated as n}from"react-native";import{useTheme as r}from"../theme/index.js";import{createAnimatedValue as i}from"../theme/animatedValue.js";export const PRESS_ANIMATION_PRESETS=["scale","bounce","fade","sink","pulse"];const o={scale:.97,bounce:.92,fade:1,sink:1,pulse:1};export const usePressAnimation=({preset:c="scale",scaleTo:m,pressDuration:p,enabled:u=!0}={})=>{const d=r(),l=a(i(1)).current,f=a(i(1)).current,g=a(i(0)).current,b=m??o[c],k=e((e,s,a)=>n.timing(e,{toValue:s,duration:p??d.motion.duration.fast,easing:t.bezier(...a),useNativeDriver:!0}),[p,d]),v=e((e,s,a)=>n.spring(e,{toValue:s,damping:d.motion.spring[a].damping,stiffness:d.motion.spring[a].stiffness,mass:d.motion.spring[a].mass,useNativeDriver:!0}),[d]),y=e(()=>{if(u)switch(c){case"scale":case"bounce":k(l,b,d.motion.easing.standard).start();break;case"fade":k(f,.6,d.motion.easing.standard).start();break;case"sink":k(g,2,d.motion.easing.standard).start()}},[u,c,b,l,f,g,d,k]),N=e(()=>{if(u)switch(c){case"scale":v(l,1,"snappy").start();break;case"bounce":v(l,1,"bouncy").start();break;case"fade":k(f,1,d.motion.easing.decelerate).start();break;case"sink":v(g,0,"snappy").start()}},[u,c,l,f,g,d,k,v]),h=e(()=>{u&&"pulse"===c&&n.sequence([n.timing(l,{toValue:1.05,duration:d.motion.duration.instant,easing:t.bezier(...d.motion.easing.accelerate),useNativeDriver:!0}),v(l,1,"snappy")]).start()},[u,c,l,d,v]),A=s(()=>({transform:[{scale:l},{translateY:g}],opacity:f}),[l,g,f]);return{scale:l,opacity:f,translateY:g,style:A,pressIn:y,pressOut:N,press:h}};

package/lib/module/hooks/useReducedMotion.js

@@ -1,29 +1 @@
-"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
+import{useEffect as e,useState as t}from"react";import{AccessibilityInfo as o}from"react-native";export const useReducedMotion=()=>{const[n,r]=t(!1);return e(()=>{let e=!0;o.isReduceMotionEnabled().then(t=>{e&&r(t)});const t=o.addEventListener("reduceMotionChanged",e=>r(e));return()=>{e=!1,t.remove()}},[]),n};

package/lib/module/hooks/useToggle.js

@@ -1,17 +1 @@
-"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
+import{useCallback as e,useState as t}from"react";export const useToggle=(o=!1)=>{const[r,s]=t(o);return{value:r,toggle:e(()=>s(e=>!e),[]),setOn:e(()=>s(!0),[]),setOff:e(()=>s(!1),[]),setValue:s}};

package/lib/module/index.js

@@ -1,18 +1 @@
-"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
+export*from"./components/index.js";export{APP_ICON_SIZES,AppIcon,CURATED_ICON_NAMES,defaultIcons,ICON_NAMES,ICONSAX_SUFFIX,renderSlotIcon}from"./components/AppIcon/index.js";export{deletePath,Form,getPath,HookFormField,isFieldFilled,rules,setPath,useField,useFieldArray,useForm,useFormCompletion,useFormContext,useHookFormField,useOptionalFormContext}from"./form/index.js";export{FLICK_TOLERANCE,PRESS_ANIMATION_PRESETS,useControllableState,useDebounce,useFlickGuard,usePressAnimation,useReducedMotion,useToggle}from"./hooks/index.js";export{initUI}from"./initUI.js";export{NetworkStatusBanner}from"./network/index.js";export{darkTheme,getColorMode,getTheme,lightTheme,mergeTheme,resetTheme,setColorMode,setTheme,subscribeTheme,ThemeProvider,useTheme,useThemeMode}from"./theme/index.js";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";

package/lib/module/initUI.js

@@ -1,19 +1 @@
-"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
+import{setColorMode as t,setTheme as d}from"./theme/index.js";export const initUI=(e={})=>{e.defaultMode&&t(e.defaultMode),e.light&&d(e.light,"light"),e.dark&&d(e.dark,"dark")};

package/lib/module/network/NetworkStatusBanner.js

@@ -1,83 +1 @@
-"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
+import{useNetworkStatus as t}from"@webority/mobile-core";import o,{useEffect as e,useMemo as r,useRef as n,useState as a}from"react";import{Animated as i,StyleSheet as l,Text as s}from"react-native";import{useSafeAreaInsets as m}from"react-native-safe-area-context";import{fontFor as p,useTheme as c}from"../theme/index.js";import{jsx as u}from"react/jsx-runtime";export const NetworkStatusBanner=({message:o="You are offline. Some features may be unavailable.",position:l="top",style:d,disabled:f=!1,safeArea:b=!0})=>{const g=c(),v=m(),y=b?"top"===l?v.top:v.bottom:0,[h,x]=a(0),w=h>0?h:56+y,{isConnected:V,isInternetReachable:R}=t(),S=!(f||V&&!1!==R),z=n(new i.Value(0)).current,N=n(new i.Value(0)).current;e(()=>{i.parallel([i.timing(z,{toValue:S?1:0,duration:g.motion.duration.normal,useNativeDriver:!0}),i.timing(N,{toValue:S?1:0,duration:g.motion.duration.normal,useNativeDriver:!0})]).start()},[S,z,N,g.motion.duration.normal]);const j=r(()=>buildStyles(),[]),k=z.interpolate({inputRange:[0,1],outputRange:["top"===l?-w:w,0]});return u(i.View,{pointerEvents:S?"auto":"none",accessibilityRole:"alert",accessibilityLiveRegion:S?"polite":"none",onLayout:t=>x(t.nativeEvent.layout.height),style:[j.container,"top"===l?j.top:j.bottom,"top"===l?{paddingTop:10+y}:{paddingBottom:10+y},{backgroundColor:g.colors.error,opacity:N,transform:[{translateY:k}]},d],children:u(s,{style:{color:g.colors.onError,fontSize:g.typography.fontSize.sm,...p(g,"semibold"),textAlign:"center"},numberOfLines:2,children:o})})};const buildStyles=()=>l.create({container:{position:"absolute",left:0,right:0,paddingVertical:10,paddingHorizontal:16,zIndex:1e3,elevation:8},top:{top:0},bottom:{bottom:0}});export default NetworkStatusBanner;

package/lib/module/network/index.js

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

package/lib/module/specs/NativePdfRasterizer.js

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

package/lib/module/theme/Gradient.js

@@ -1,52 +1 @@
-"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
+import{View as t}from"react-native";import{jsx as o}from"react/jsx-runtime";const e={x:.5,y:0},r={x:.5,y:1},round=t=>Math.round(1e3*t)/1e3;export const gradientAngle=(t=e,o=r)=>{const n=180*Math.atan2(o.x-t.x,t.y-o.y)/Math.PI;return round((n%360+360)%360)};export const toBackgroundImage=t=>({type:"linear-gradient",direction:`${gradientAngle(t.start,t.end)}deg`,colorStops:t.colors.map((o,e)=>{const r=t.locations?.[e];return void 0===r?{color:o}:{color:o,positions:[`${round(100*r)}%`]}})});export const Gradient=({gradient:e,style:r,children:n})=>o(t,{style:[{experimental_backgroundImage:[toBackgroundImage(e)]},r],children:n});

package/lib/module/theme/ThemeContext.js

@@ -1,93 +1 @@
-"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
+import{Storage as e}from"@webority/mobile-core";import r,{createContext as t,useCallback as o,useContext as s,useEffect as n,useMemo as m,useRef as i,useState as c}from"react";import{Appearance as d}from"react-native";import{useReducedMotion as l}from"../hooks/useReducedMotion.js";import{mergeTheme as a}from"./merge.js";import{darkTheme as g,lightTheme as f}from"./tokens.js";import{jsx as h}from"react/jsx-runtime";const p={damping:100,stiffness:1e3,mass:1},u=t({theme:f,mode:"light",preference:"system",setPreference:()=>{},toggleColorMode:()=>{}});export const ThemeProvider=({children:r,initialPreference:t="system",persistKey:s,lightOverrides:k,darkOverrides:y})=>{const[v,P]=c(t),C=i(!1);n(()=>{if(!s)return;let r=!0;return e.getItem(s).then(e=>{r&&!C.current&&(e=>"light"===e||"dark"===e||"system"===e)(e)&&P(e)}),()=>{r=!1}},[s]);const M=o(e=>{C.current=!0,P(e)},[]);n(()=>{s&&C.current&&e.setItem(s,v)},[s,v]);const[j,x]=c(()=>d.getColorScheme()??"light");n(()=>{const e=d.addChangeListener(({colorScheme:e})=>{x(e??"light")});return()=>e.remove()},[]);const b="system"===v?j:v,w=l(),T=m(()=>{const e="dark"===b?g:f,r="dark"===b?y:k,t=r?a(e,r):e;return w?{...t,motion:(o=t.motion,{...o,duration:{instant:0,fast:0,normal:0,slow:0,slower:0},spring:{gentle:p,bouncy:p,snappy:p}})}:t;var o},[b,k,y,w]),I=m(()=>({theme:T,mode:b,preference:v,setPreference:M,toggleColorMode:()=>M(e=>"system"===e?"dark"===j?"light":"dark":"dark"===e?"light":"dark")}),[T,b,v,j,M]);return h(u.Provider,{value:I,children:r})};export const useTheme=()=>s(u).theme;export const useThemeMode=()=>{const e=s(u);return{mode:e.mode,preference:e.preference,setPreference:e.setPreference,toggleColorMode:e.toggleColorMode}};

package/lib/module/theme/animatedValue.js

@@ -1,64 +1 @@
-"use strict";
-
-import { Animated, Platform } from 'react-native';
-
-/**
- * Create an `Animated.Value` that survives RN 0.85's dev-mode prop deepFreeze.
- *
- * RN's Fabric renderer deep-freezes prop trees on host components. If an
- * `Animated.Value` is reachable from a `style` prop via interpolation chains
- * (the `_parent` ref on `AnimatedInterpolation` nodes), the recursive freeze
- * converts the value's `_animation` slot into a throwing setter — the next
- * `Animated.timing(v).start()` then crashes with
- *   "_animation: object that is meant to be immutable".
- *
- * Sealing the value at construction makes `Object.isSealed(v) === true`,
- * which causes `deepFreezeAndThrowOnMutationInDev` to skip-and-return at
- * its top guard. Existing-property mutation (`_animation`, `_value`,
- * `_listeners`, `_tracking`) keeps working — seal only blocks adding NEW
- * properties, which `Animated.Value` does only once: `_tracking` is declared
- * as a type but never assigned in the constructor, so `stopTracking()` (run by
- * every `timing().start()`) adds it. On a sealed value that add throws
- * "Cannot add new property '_tracking'" when RN's module runs strict. It does
- * in an app on Expo's Metro config: its `experimentalImportSupport` leaves the
- * modules as ESM, and Metro then prepends "use strict". The RN babel preset
- * turns that directive off (`strictMode: false`), so the showcase and jest run
- * RN sloppy, where the write is dropped silently and nothing fails. So the
- * slot is declared here, before the seal.
- *
- * Use everywhere the library would otherwise call `new Animated.Value(...)`.
- *
- * NOT on web. The reasoning above ("Animated.Value doesn't add any properties
- * post-construction") holds for React Native but not for react-native-web,
- * whose `stopTracking()` assigns `_tracking` on an instance that never declared
- * it — on a sealed object that throws, and the throw happens during unmount, so
- * it takes the whole tree down. There is no Fabric deep-freeze on web either,
- * so the seal has nothing to protect against there.
- */
-export const createAnimatedValue = (initial, config) => {
-  const value = new Animated.Value(initial, config);
-  if (Platform.OS === 'web') {
-    return value;
-  }
-  value._tracking = null;
-  return Object.seal(value);
-};
-
-/**
- * Set an `Animated.Value` to a target without going through JS.
- *
- * Once a value has been driven by `useNativeDriver: true`, the underlying
- * native node owns it — calling `value.setValue(x)` from JS throws
- *   "Attempting to run JS driven animation on animated node that has been moved to native".
- * Use this helper for any value that is *also* used in a native-driven
- * `Animated.timing/spring`. A zero-duration native timing routes the update
- * through the same driver and stays valid across re-mounts and re-runs.
- */
-export const setNativeValue = (value, to) => {
-  Animated.timing(value, {
-    toValue: to,
-    duration: 0,
-    useNativeDriver: true
-  }).start();
-};
-//# sourceMappingURL=animatedValue.js.map
+import{Animated as e,Platform as t}from"react-native";export const createAnimatedValue=(a,r)=>{const n=new e.Value(a,r);return"web"===t.OS?n:(n._tracking=null,Object.seal(n))};export const setNativeValue=(t,a)=>{e.timing(t,{toValue:a,duration:0,useNativeDriver:!0}).start()};

package/lib/module/theme/index.js

@@ -1,67 +1 @@
-"use strict";
-
-import { mergeTheme } from "./merge.js";
-import { darkTheme, lightTheme } from "./tokens.js";
-let currentMode = 'light';
-let currentTheme = lightTheme;
-let lightOverridesGlobal;
-let darkOverridesGlobal;
-const subscribers = new Set();
-const recompute = () => {
-  const base = currentMode === 'dark' ? darkTheme : lightTheme;
-  const overrides = currentMode === 'dark' ? darkOverridesGlobal : lightOverridesGlobal;
-  currentTheme = overrides ? mergeTheme(base, overrides) : base;
-  subscribers.forEach(cb => cb());
-};
-
-/**
- * Set the override object for a mode (defaults to the active one).
- *
- * REPLACES that mode's overrides; it does not accumulate them. Calling
- * `setTheme({ colors })` and then `setTheme({ spacing })` leaves ONLY the
- * spacing override live — the colours silently revert to the base theme. Pass
- * one complete override object per mode, or merge them yourself before calling:
- *
- *   setTheme({ ...myColors, ...mySpacing });
- *
- * This is deliberate (one override object per mode, last call wins) and is
- * pinned by a test. Do not "fix" it to merge without treating that as the
- * behaviour change it is: an app relying on replace to CLEAR a previous
- * override would silently keep it.
- */
-export const setTheme = (overrides, mode) => {
-  if (mode) {
-    currentMode = mode;
-  }
-  if (currentMode === 'dark') {
-    darkOverridesGlobal = overrides;
-  } else {
-    lightOverridesGlobal = overrides;
-  }
-  recompute();
-};
-export const setColorMode = mode => {
-  currentMode = mode;
-  recompute();
-};
-export const getColorMode = () => currentMode;
-export const getTheme = () => currentTheme;
-export const resetTheme = () => {
-  currentMode = 'light';
-  lightOverridesGlobal = undefined;
-  darkOverridesGlobal = undefined;
-  recompute();
-};
-export const subscribeTheme = callback => {
-  subscribers.add(callback);
-  return () => {
-    subscribers.delete(callback);
-  };
-};
-export { createAnimatedValue, setNativeValue } from "./animatedValue.js";
-export { Gradient, gradientAngle, toBackgroundImage } from "./Gradient.js";
-export { mergeTheme } from "./merge.js";
-export { ThemeProvider, useTheme, useThemeMode } from "./ThemeContext.js";
-export { fontFor } from "./textStyle.js";
-export { darkTheme, lightTheme } from "./tokens.js";
-//# sourceMappingURL=index.js.map
+import{mergeTheme as e}from"./merge.js";import{darkTheme as t,lightTheme as o}from"./tokens.js";let r,m,s="light",n=o;const a=new Set,recompute=()=>{const d="dark"===s?t:o,h="dark"===s?m:r;n=h?e(d,h):d,a.forEach(e=>e())};export const setTheme=(e,t)=>{t&&(s=t),"dark"===s?m=e:r=e,recompute()};export const setColorMode=e=>{s=e,recompute()};export const getColorMode=()=>s;export const getTheme=()=>n;export const resetTheme=()=>{s="light",r=void 0,m=void 0,recompute()};export const subscribeTheme=e=>(a.add(e),()=>{a.delete(e)});export{createAnimatedValue,setNativeValue}from"./animatedValue.js";export{Gradient,gradientAngle,toBackgroundImage}from"./Gradient.js";export{mergeTheme}from"./merge.js";export{ThemeProvider,useTheme,useThemeMode}from"./ThemeContext.js";export{fontFor}from"./textStyle.js";export{darkTheme,lightTheme}from"./tokens.js";