@webority-technologies/mobile-ui 0.0.1

package/lib/module/theme/Gradient.js

@@ -0,0 +1,49 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Render a linear gradient using `react-native-linear-gradient` when available.
+ *
+ * The dep is OPTIONAL — apps that never use gradients don't need it installed.
+ * If `<Gradient>` (or any component that accepts a `gradient` prop) is reached
+ * without the package present, we fall back to a flat View using the first
+ * colour and emit a one-time dev warning so the omission is loud but
+ * non-fatal.
+ */
+let LinearGradientImpl = null;
+let warned = false;
+try {
+  LinearGradientImpl = require('react-native-linear-gradient').default;
+} catch {
+  // Optional peer; resolved lazily by consumers that need gradients.
+}
+export const Gradient = ({
+  gradient,
+  style,
+  children
+}) => {
+  if (LinearGradientImpl) {
+    return /*#__PURE__*/_jsx(LinearGradientImpl, {
+      colors: gradient.colors,
+      locations: gradient.locations,
+      start: gradient.start,
+      end: gradient.end,
+      style: style,
+      children: children
+    });
+  }
+  if (__DEV__ && !warned) {
+    warned = true;
+    console.warn('[@webority-technologies/mobile-ui] gradient prop set but react-native-linear-gradient is not installed. ' + 'Run `npm install react-native-linear-gradient` to enable.');
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      backgroundColor: gradient.colors[0]
+    }, style],
+    children: children
+  });
+};
+export const isGradientAvailable = () => LinearGradientImpl != null;
+//# sourceMappingURL=Gradient.js.map

package/lib/module/theme/ThemeContext.js

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

package/lib/module/theme/animatedValue.js

@@ -0,0 +1,49 @@
+"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, and `Animated.Value` doesn't add any post-construction.
+ *
+ * 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) => Platform.OS === 'web' ? new Animated.Value(initial, config) : Object.seal(new Animated.Value(initial, config));
+
+/**
+ * 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

package/lib/module/theme/index.js

@@ -0,0 +1,51 @@
+"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());
+};
+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, isGradientAvailable } 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

package/lib/module/theme/merge.js

@@ -0,0 +1,25 @@
+"use strict";
+
+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;
+};
+export const mergeTheme = (base, overrides) => {
+  return deepMerge(base, overrides);
+};
+//# sourceMappingURL=merge.js.map

package/lib/module/theme/textStyle.js

@@ -0,0 +1,34 @@
+"use strict";
+
+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.
+ */
+export const fontFor = (theme, weight) => {
+  const family = theme.typography.fontFamily?.[FAMILY_KEY[weight]];
+  if (family) {
+    return {
+      fontFamily: family
+    };
+  }
+  return {
+    fontWeight: theme.typography.fontWeight[weight]
+  };
+};
+//# sourceMappingURL=textStyle.js.map