@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/commonjs/theme/ThemeContext.js

@@ -1,101 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useThemeMode = exports.useTheme = exports.ThemeProvider = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _useReducedMotion = require("../hooks/useReducedMotion.js");
-var _merge = require("./merge.js");
-var _tokens = require("./tokens.js");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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: _tokens.lightTheme,
-  mode: 'light',
-  preference: 'system',
-  setPreference: () => undefined,
-  toggleColorMode: () => undefined
-};
-const ThemeContext = /*#__PURE__*/(0, _react.createContext)(defaultValue);
-const ThemeProvider = ({
-  children,
-  initialPreference = 'system',
-  lightOverrides,
-  darkOverrides
-}) => {
-  const [preference, setPreference] = (0, _react.useState)(initialPreference);
-  const [systemMode, setSystemMode] = (0, _react.useState)(() => _reactNative.Appearance.getColorScheme() ?? 'light');
-  (0, _react.useEffect)(() => {
-    const sub = _reactNative.Appearance.addChangeListener(({
-      colorScheme
-    }) => {
-      setSystemMode(colorScheme ?? 'light');
-    });
-    return () => sub.remove();
-  }, []);
-  const mode = preference === 'system' ? systemMode : preference;
-  const reduceMotion = (0, _useReducedMotion.useReducedMotion)();
-  const theme = (0, _react.useMemo)(() => {
-    const base = mode === 'dark' ? _tokens.darkTheme : _tokens.lightTheme;
-    const overrides = mode === 'dark' ? darkOverrides : lightOverrides;
-    const merged = overrides ? (0, _merge.mergeTheme)(base, overrides) : base;
-    return reduceMotion ? {
-      ...merged,
-      motion: collapseMotion(merged.motion)
-    } : merged;
-  }, [mode, lightOverrides, darkOverrides, reduceMotion]);
-  const value = (0, _react.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__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-exports.ThemeProvider = ThemeProvider;
-const useTheme = () => (0, _react.useContext)(ThemeContext).theme;
-exports.useTheme = useTheme;
-const useThemeMode = () => {
-  const ctx = (0, _react.useContext)(ThemeContext);
-  return {
-    mode: ctx.mode,
-    preference: ctx.preference,
-    setPreference: ctx.setPreference,
-    toggleColorMode: ctx.toggleColorMode
-  };
-};
-exports.useThemeMode = useThemeMode;
-//# sourceMappingURL=ThemeContext.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useThemeMode=exports.useTheme=exports.ThemeProvider=void 0;var _mobileCore=require("@webority/mobile-core"),_react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_useReducedMotion=require("../hooks/useReducedMotion.js"),_merge=require("./merge.js"),_tokens=require("./tokens.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var n,s,i={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return i;if(n=r?o:t){if(n.has(e))return n.get(e);n.set(e,i)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((s=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(s.get||s.set)?n(i,r,s):i[r]=e[r]);return i})(e,r)}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:_tokens.lightTheme,mode:"light",preference:"system",setPreference:()=>{},toggleColorMode:()=>{}},ThemeContext=(0,_react.createContext)(defaultValue),ThemeProvider=({children:e,initialPreference:r="system",persistKey:t,lightOverrides:o,darkOverrides:n})=>{const[s,i]=(0,_react.useState)(r),a=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{if(!t)return;let e=!0;return _mobileCore.Storage.getItem(t).then(r=>{e&&!a.current&&isPreference(r)&&i(r)}),()=>{e=!1}},[t]);const c=(0,_react.useCallback)(e=>{a.current=!0,i(e)},[]);(0,_react.useEffect)(()=>{t&&a.current&&_mobileCore.Storage.setItem(t,s)},[t,s]);const[u,d]=(0,_react.useState)(()=>_reactNative.Appearance.getColorScheme()??"light");(0,_react.useEffect)(()=>{const e=_reactNative.Appearance.addChangeListener(({colorScheme:e})=>{d(e??"light")});return()=>e.remove()},[]);const l="system"===s?u:s,m=(0,_useReducedMotion.useReducedMotion)(),_=(0,_react.useMemo)(()=>{const e="dark"===l?_tokens.darkTheme:_tokens.lightTheme,r="dark"===l?n:o,t=r?(0,_merge.mergeTheme)(e,r):e;return m?{...t,motion:collapseMotion(t.motion)}:t},[l,o,n,m]),f=(0,_react.useMemo)(()=>({theme:_,mode:l,preference:s,setPreference:c,toggleColorMode:()=>c(e=>"system"===e?"dark"===u?"light":"dark":"dark"===e?"light":"dark")}),[_,l,s,u,c]);return(0,_jsxRuntime.jsx)(ThemeContext.Provider,{value:f,children:e})};exports.ThemeProvider=ThemeProvider;const useTheme=()=>(0,_react.useContext)(ThemeContext).theme;exports.useTheme=useTheme;const useThemeMode=()=>{const e=(0,_react.useContext)(ThemeContext);return{mode:e.mode,preference:e.preference,setPreference:e.setPreference,toggleColorMode:e.toggleColorMode}};exports.useThemeMode=useThemeMode;

package/lib/commonjs/theme/animatedValue.js

@@ -1,69 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.setNativeValue = exports.createAnimatedValue = void 0;
-var _reactNative = require("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.
- */
-const createAnimatedValue = (initial, config) => {
-  const value = new _reactNative.Animated.Value(initial, config);
-  if (_reactNative.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.
- */
-exports.createAnimatedValue = createAnimatedValue;
-const setNativeValue = (value, to) => {
-  _reactNative.Animated.timing(value, {
-    toValue: to,
-    duration: 0,
-    useNativeDriver: true
-  }).start();
-};
-exports.setNativeValue = setNativeValue;
-//# sourceMappingURL=animatedValue.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.setNativeValue=exports.createAnimatedValue=void 0;var _reactNative=require("react-native");const createAnimatedValue=(e,t)=>{const a=new _reactNative.Animated.Value(e,t);return"web"===_reactNative.Platform.OS?a:(a._tracking=null,Object.seal(a))};exports.createAnimatedValue=createAnimatedValue;const setNativeValue=(e,t)=>{_reactNative.Animated.timing(e,{toValue:t,duration:0,useNativeDriver:!0}).start()};exports.setNativeValue=setNativeValue;

package/lib/commonjs/theme/index.js

@@ -1,149 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Gradient", {
-  enumerable: true,
-  get: function () {
-    return _Gradient.Gradient;
-  }
-});
-Object.defineProperty(exports, "ThemeProvider", {
-  enumerable: true,
-  get: function () {
-    return _ThemeContext.ThemeProvider;
-  }
-});
-Object.defineProperty(exports, "createAnimatedValue", {
-  enumerable: true,
-  get: function () {
-    return _animatedValue.createAnimatedValue;
-  }
-});
-Object.defineProperty(exports, "darkTheme", {
-  enumerable: true,
-  get: function () {
-    return _tokens.darkTheme;
-  }
-});
-Object.defineProperty(exports, "fontFor", {
-  enumerable: true,
-  get: function () {
-    return _textStyle.fontFor;
-  }
-});
-exports.getTheme = exports.getColorMode = void 0;
-Object.defineProperty(exports, "gradientAngle", {
-  enumerable: true,
-  get: function () {
-    return _Gradient.gradientAngle;
-  }
-});
-Object.defineProperty(exports, "lightTheme", {
-  enumerable: true,
-  get: function () {
-    return _tokens.lightTheme;
-  }
-});
-Object.defineProperty(exports, "mergeTheme", {
-  enumerable: true,
-  get: function () {
-    return _merge.mergeTheme;
-  }
-});
-exports.setColorMode = exports.resetTheme = void 0;
-Object.defineProperty(exports, "setNativeValue", {
-  enumerable: true,
-  get: function () {
-    return _animatedValue.setNativeValue;
-  }
-});
-exports.subscribeTheme = exports.setTheme = void 0;
-Object.defineProperty(exports, "toBackgroundImage", {
-  enumerable: true,
-  get: function () {
-    return _Gradient.toBackgroundImage;
-  }
-});
-Object.defineProperty(exports, "useTheme", {
-  enumerable: true,
-  get: function () {
-    return _ThemeContext.useTheme;
-  }
-});
-Object.defineProperty(exports, "useThemeMode", {
-  enumerable: true,
-  get: function () {
-    return _ThemeContext.useThemeMode;
-  }
-});
-var _merge = require("./merge.js");
-var _tokens = require("./tokens.js");
-var _animatedValue = require("./animatedValue.js");
-var _Gradient = require("./Gradient.js");
-var _ThemeContext = require("./ThemeContext.js");
-var _textStyle = require("./textStyle.js");
-let currentMode = 'light';
-let currentTheme = _tokens.lightTheme;
-let lightOverridesGlobal;
-let darkOverridesGlobal;
-const subscribers = new Set();
-const recompute = () => {
-  const base = currentMode === 'dark' ? _tokens.darkTheme : _tokens.lightTheme;
-  const overrides = currentMode === 'dark' ? darkOverridesGlobal : lightOverridesGlobal;
-  currentTheme = overrides ? (0, _merge.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.
- */
-const setTheme = (overrides, mode) => {
-  if (mode) {
-    currentMode = mode;
-  }
-  if (currentMode === 'dark') {
-    darkOverridesGlobal = overrides;
-  } else {
-    lightOverridesGlobal = overrides;
-  }
-  recompute();
-};
-exports.setTheme = setTheme;
-const setColorMode = mode => {
-  currentMode = mode;
-  recompute();
-};
-exports.setColorMode = setColorMode;
-const getColorMode = () => currentMode;
-exports.getColorMode = getColorMode;
-const getTheme = () => currentTheme;
-exports.getTheme = getTheme;
-const resetTheme = () => {
-  currentMode = 'light';
-  lightOverridesGlobal = undefined;
-  darkOverridesGlobal = undefined;
-  recompute();
-};
-exports.resetTheme = resetTheme;
-const subscribeTheme = callback => {
-  subscribers.add(callback);
-  return () => {
-    subscribers.delete(callback);
-  };
-};
-exports.subscribeTheme = subscribeTheme;
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"Gradient",{enumerable:!0,get:function(){return _Gradient.Gradient}}),Object.defineProperty(exports,"ThemeProvider",{enumerable:!0,get:function(){return _ThemeContext.ThemeProvider}}),Object.defineProperty(exports,"createAnimatedValue",{enumerable:!0,get:function(){return _animatedValue.createAnimatedValue}}),Object.defineProperty(exports,"darkTheme",{enumerable:!0,get:function(){return _tokens.darkTheme}}),Object.defineProperty(exports,"fontFor",{enumerable:!0,get:function(){return _textStyle.fontFor}}),exports.getTheme=exports.getColorMode=void 0,Object.defineProperty(exports,"gradientAngle",{enumerable:!0,get:function(){return _Gradient.gradientAngle}}),Object.defineProperty(exports,"lightTheme",{enumerable:!0,get:function(){return _tokens.lightTheme}}),Object.defineProperty(exports,"mergeTheme",{enumerable:!0,get:function(){return _merge.mergeTheme}}),exports.setColorMode=exports.resetTheme=void 0,Object.defineProperty(exports,"setNativeValue",{enumerable:!0,get:function(){return _animatedValue.setNativeValue}}),exports.subscribeTheme=exports.setTheme=void 0,Object.defineProperty(exports,"toBackgroundImage",{enumerable:!0,get:function(){return _Gradient.toBackgroundImage}}),Object.defineProperty(exports,"useTheme",{enumerable:!0,get:function(){return _ThemeContext.useTheme}}),Object.defineProperty(exports,"useThemeMode",{enumerable:!0,get:function(){return _ThemeContext.useThemeMode}});var _merge=require("./merge.js"),_tokens=require("./tokens.js"),_animatedValue=require("./animatedValue.js"),_Gradient=require("./Gradient.js"),_ThemeContext=require("./ThemeContext.js"),_textStyle=require("./textStyle.js");let lightOverridesGlobal,darkOverridesGlobal,currentMode="light",currentTheme=_tokens.lightTheme;const subscribers=new Set,recompute=()=>{const e="dark"===currentMode?_tokens.darkTheme:_tokens.lightTheme,r="dark"===currentMode?darkOverridesGlobal:lightOverridesGlobal;currentTheme=r?(0,_merge.mergeTheme)(e,r):e,subscribers.forEach(e=>e())},setTheme=(e,r)=>{r&&(currentMode=r),"dark"===currentMode?darkOverridesGlobal=e:lightOverridesGlobal=e,recompute()};exports.setTheme=setTheme;const setColorMode=e=>{currentMode=e,recompute()};exports.setColorMode=setColorMode;const getColorMode=()=>currentMode;exports.getColorMode=getColorMode;const getTheme=()=>currentTheme;exports.getTheme=getTheme;const resetTheme=()=>{currentMode="light",lightOverridesGlobal=void 0,darkOverridesGlobal=void 0,recompute()};exports.resetTheme=resetTheme;const subscribeTheme=e=>(subscribers.add(e),()=>{subscribers.delete(e)});exports.subscribeTheme=subscribeTheme;

package/lib/commonjs/theme/merge.js

@@ -1,30 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.mergeTheme = void 0;
-const isPlainObject = value => typeof value === 'object' && value !== null && !Array.isArray(value);
-const deepMerge = (target, source) => {
-  if (!isPlainObject(target) || !isPlainObject(source)) {
-    return source !== undefined ? source : target;
-  }
-  const result = {
-    ...target
-  };
-  for (const key of Object.keys(source)) {
-    const sourceValue = source[key];
-    const targetValue = target[key];
-    if (isPlainObject(sourceValue) && isPlainObject(targetValue)) {
-      result[key] = deepMerge(targetValue, sourceValue);
-    } else if (sourceValue !== undefined) {
-      result[key] = sourceValue;
-    }
-  }
-  return result;
-};
-const mergeTheme = (base, overrides) => {
-  return deepMerge(base, overrides);
-};
-exports.mergeTheme = mergeTheme;
-//# sourceMappingURL=merge.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.mergeTheme=void 0;const isPlainObject=e=>"object"==typeof e&&null!==e&&!Array.isArray(e),deepMerge=(e,r)=>{if(!isPlainObject(e)||!isPlainObject(r))return void 0!==r?r:e;const t={...e};for(const i of Object.keys(r)){const s=r[i],o=e[i];isPlainObject(s)&&isPlainObject(o)?t[i]=deepMerge(o,s):void 0!==s&&(t[i]=s)}return t},mergeTheme=(e,r)=>deepMerge(e,r);exports.mergeTheme=mergeTheme;

package/lib/commonjs/theme/textStyle.js

@@ -1,39 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fontFor = void 0;
-const FAMILY_KEY = {
-  normal: 'regular',
-  medium: 'medium',
-  semibold: 'semibold',
-  bold: 'bold'
-};
-
-/**
- * Resolve text-weight style for the active theme.
- *
- * When the consumer registers a brand `theme.typography.fontFamily.<weight>`,
- * we set `fontFamily` and leave `fontWeight` undefined — RN can't combine the
- * two reliably across iOS/Android once a custom face is in play, so the brand
- * file controls the weight glyph itself. Falls back to `fontWeight` when no
- * brand font is registered for that weight.
- *
- * Note: the fontWeight scale uses `normal` while FontFamilyScale uses
- * `regular` (the conventional font-name suffix). The helper maps between
- * them transparently.
- */
-const fontFor = (theme, weight) => {
-  const family = theme.typography.fontFamily?.[FAMILY_KEY[weight]];
-  if (family) {
-    return {
-      fontFamily: family
-    };
-  }
-  return {
-    fontWeight: theme.typography.fontWeight[weight]
-  };
-};
-exports.fontFor = fontFor;
-//# sourceMappingURL=textStyle.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.fontFor=void 0;const FAMILY_KEY={normal:"regular",medium:"medium",semibold:"semibold",bold:"bold"},fontFor=(o,t)=>{const e=o.typography.fontFamily?.[FAMILY_KEY[t]];return e?{fontFamily:e}:{fontWeight:o.typography.fontWeight[t]}};exports.fontFor=fontFor;