@webority/mobile-ui 0.0.39 → 0.2.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
+"use strict";import{useCallback,useRef}from"react";export const FLICK_TOLERANCE=10;export const useFlickGuard=()=>{const e=useRef(null);return{onPressIn:useCallback(t=>{const{pageX:n,pageY:r}=t.nativeEvent;e.current="number"==typeof n&&"number"==typeof r?{x:n,y:r}:null},[]),isFlick:useCallback(t=>{const n=e.current;if(e.current=null,!n)return!1;const{pageX:r,pageY:u}=t.nativeEvent;return"number"==typeof r&&"number"==typeof u&&Math.hypot(r-n.x,u-n.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
+"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";export const PRESS_ANIMATION_PRESETS=["scale","bounce","fade","sink","pulse"];const FADE_TO=.6,SINK_BY=2,PULSE_TO=1.05,DEFAULT_SCALE_TO={scale:.97,bounce:.92,fade:1,sink:1,pulse:1};export const usePressAnimation=({preset:e="scale",scaleTo:a,pressDuration:s,enabled:t=!0}={})=>{const n=useTheme(),i=useRef(createAnimatedValue(1)).current,r=useRef(createAnimatedValue(1)).current,o=useRef(createAnimatedValue(0)).current,c=a??DEFAULT_SCALE_TO[e],u=useCallback((e,a,t)=>RNAnimated.timing(e,{toValue:a,duration:s??n.motion.duration.fast,easing:Easing.bezier(...t),useNativeDriver:!0}),[s,n]),m=useCallback((e,a,s)=>RNAnimated.spring(e,{toValue:a,damping:n.motion.spring[s].damping,stiffness:n.motion.spring[s].stiffness,mass:n.motion.spring[s].mass,useNativeDriver:!0}),[n]),l=useCallback(()=>{if(t)switch(e){case"scale":case"bounce":u(i,c,n.motion.easing.standard).start();break;case"fade":u(r,.6,n.motion.easing.standard).start();break;case"sink":u(o,2,n.motion.easing.standard).start()}},[t,e,c,i,r,o,n,u]),d=useCallback(()=>{if(t)switch(e){case"scale":m(i,1,"snappy").start();break;case"bounce":m(i,1,"bouncy").start();break;case"fade":u(r,1,n.motion.easing.decelerate).start();break;case"sink":m(o,0,"snappy").start()}},[t,e,i,r,o,n,u,m]),p=useCallback(()=>{t&&"pulse"===e&&RNAnimated.sequence([RNAnimated.timing(i,{toValue:1.05,duration:n.motion.duration.instant,easing:Easing.bezier(...n.motion.easing.accelerate),useNativeDriver:!0}),m(i,1,"snappy")]).start()},[t,e,i,n,m]),f=useMemo(()=>({transform:[{scale:i},{translateY:o}],opacity:r}),[i,o,r]);return{scale:i,opacity:r,translateY:o,style:f,pressIn:l,pressOut:d,press:p}};

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

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
+"use strict";import{useCallback,useState}from"react";export const useToggle=(e=!1)=>{const[t,s]=useState(e);return{value:t,toggle:useCallback(()=>s(e=>!e),[]),setOn:useCallback(()=>s(!0),[]),setOff:useCallback(()=>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
+"use strict";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
+"use strict";import{setColorMode,setTheme}from"./theme/index.js";export const initUI=(e={})=>{e.defaultMode&&setColorMode(e.defaultMode),e.light&&setTheme(e.light,"light"),e.dark&&setTheme(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
+"use strict";import{useNetworkStatus}from"@webority/mobile-core";import React,{useEffect,useMemo,useRef,useState}from"react";import{Animated,StyleSheet,Text}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{fontFor,useTheme}from"../theme/index.js";import{jsx as _jsx}from"react/jsx-runtime";export const NetworkStatusBanner=({message:e="You are offline. Some features may be unavailable.",position:t="top",style:o,disabled:a=!1,safeArea:n=!0})=>{const r=useTheme(),i=useSafeAreaInsets(),s=n?"top"===t?i.top:i.bottom:0,[u,l]=useState(0),m=u>0?u:56+s,{isConnected:c,isInternetReachable:p}=useNetworkStatus(),d=!(a||c&&!1!==p),f=useRef(new Animated.Value(0)).current,b=useRef(new Animated.Value(0)).current;useEffect(()=>{Animated.parallel([Animated.timing(f,{toValue:d?1:0,duration:r.motion.duration.normal,useNativeDriver:!0}),Animated.timing(b,{toValue:d?1:0,duration:r.motion.duration.normal,useNativeDriver:!0})]).start()},[d,f,b,r.motion.duration.normal]);const S=useMemo(()=>buildStyles(),[]),y=f.interpolate({inputRange:[0,1],outputRange:["top"===t?-m:m,0]});return _jsx(Animated.View,{pointerEvents:d?"auto":"none",accessibilityRole:"alert",accessibilityLiveRegion:d?"polite":"none",onLayout:e=>l(e.nativeEvent.layout.height),style:[S.container,"top"===t?S.top:S.bottom,"top"===t?{paddingTop:10+s}:{paddingBottom:10+s},{backgroundColor:r.colors.error,opacity:b,transform:[{translateY:y}]},o],children:_jsx(Text,{style:{color:r.colors.onError,fontSize:r.typography.fontSize.sm,...fontFor(r,"semibold"),textAlign:"center"},numberOfLines:2,children:e})})};const buildStyles=()=>StyleSheet.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
+"use strict";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
+"use strict";import{TurboModuleRegistry}from"react-native";export default TurboModuleRegistry.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
+"use strict";import{View}from"react-native";import{jsx as _jsx}from"react/jsx-runtime";const DEFAULT_START={x:.5,y:0},DEFAULT_END={x:.5,y:1},round=t=>Math.round(1e3*t)/1e3;export const gradientAngle=(t=DEFAULT_START,o=DEFAULT_END)=>{const r=180*Math.atan2(o.x-t.x,t.y-o.y)/Math.PI;return round((r%360+360)%360)};export const toBackgroundImage=t=>({type:"linear-gradient",direction:`${gradientAngle(t.start,t.end)}deg`,colorStops:t.colors.map((o,r)=>{const e=t.locations?.[r];return void 0===e?{color:o}:{color:o,positions:[`${round(100*e)}%`]}})});export const Gradient=({gradient:t,style:o,children:r})=>_jsx(View,{style:[{experimental_backgroundImage:[toBackgroundImage(t)]},o],children:r});

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
+"use strict";import{Storage}from"@webority/mobile-core";import React,{createContext,useCallback,useContext,useEffect,useMemo,useRef,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:1e3,mass:1},collapseMotion=e=>({...e,duration:{instant:0,fast:0,normal:0,slow:0,slower:0},spring:{gentle:REDUCED_SPRING,bouncy:REDUCED_SPRING,snappy:REDUCED_SPRING}}),isPreference=e=>"light"===e||"dark"===e||"system"===e,defaultValue={theme:lightTheme,mode:"light",preference:"system",setPreference:()=>{},toggleColorMode:()=>{}},ThemeContext=createContext(defaultValue);export const ThemeProvider=({children:e,initialPreference:t="system",persistKey:r,lightOverrides:o,darkOverrides:s})=>{const[n,m]=useState(t),c=useRef(!1);useEffect(()=>{if(!r)return;let e=!0;return Storage.getItem(r).then(t=>{e&&!c.current&&isPreference(t)&&m(t)}),()=>{e=!1}},[r]);const a=useCallback(e=>{c.current=!0,m(e)},[]);useEffect(()=>{r&&c.current&&Storage.setItem(r,n)},[r,n]);const[i,u]=useState(()=>Appearance.getColorScheme()??"light");useEffect(()=>{const e=Appearance.addChangeListener(({colorScheme:e})=>{u(e??"light")});return()=>e.remove()},[]);const l="system"===n?i:n,d=useReducedMotion(),f=useMemo(()=>{const e="dark"===l?darkTheme:lightTheme,t="dark"===l?s:o,r=t?mergeTheme(e,t):e;return d?{...r,motion:collapseMotion(r.motion)}:r},[l,o,s,d]),h=useMemo(()=>({theme:f,mode:l,preference:n,setPreference:a,toggleColorMode:()=>a(e=>"system"===e?"dark"===i?"light":"dark":"dark"===e?"light":"dark")}),[f,l,n,i,a]);return _jsx(ThemeContext.Provider,{value:h,children:e})};export const useTheme=()=>useContext(ThemeContext).theme;export const useThemeMode=()=>{const e=useContext(ThemeContext);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
+"use strict";import{Animated,Platform}from"react-native";export const createAnimatedValue=(t,e)=>{const a=new Animated.Value(t,e);return"web"===Platform.OS?a:(a._tracking=null,Object.seal(a))};export const setNativeValue=(t,e)=>{Animated.timing(t,{toValue:e,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
+"use strict";import{mergeTheme}from"./merge.js";import{darkTheme,lightTheme}from"./tokens.js";let lightOverridesGlobal,darkOverridesGlobal,currentMode="light",currentTheme=lightTheme;const subscribers=new Set,recompute=()=>{const e="dark"===currentMode?darkTheme:lightTheme,r="dark"===currentMode?darkOverridesGlobal:lightOverridesGlobal;currentTheme=r?mergeTheme(e,r):e,subscribers.forEach(e=>e())};export const setTheme=(e,r)=>{r&&(currentMode=r),"dark"===currentMode?darkOverridesGlobal=e:lightOverridesGlobal=e,recompute()};export const setColorMode=e=>{currentMode=e,recompute()};export const getColorMode=()=>currentMode;export const getTheme=()=>currentTheme;export const resetTheme=()=>{currentMode="light",lightOverridesGlobal=void 0,darkOverridesGlobal=void 0,recompute()};export const subscribeTheme=e=>(subscribers.add(e),()=>{subscribers.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";