@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/commonjs/theme/ThemeContext.js

@@ -0,0 +1,101 @@
+"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

package/lib/commonjs/theme/animatedValue.js

@@ -0,0 +1,69 @@
+"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

package/lib/commonjs/theme/index.js

@@ -0,0 +1,149 @@
+"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

package/lib/commonjs/theme/merge.js

@@ -0,0 +1,30 @@
+"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

package/lib/commonjs/theme/textStyle.js

@@ -0,0 +1,39 @@
+"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