@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/theme/useTheme.d.ts

@@ -1,3 +1,7 @@
 import type { ThemeTokens } from "./types.js";
+/**
+ * The active theme, as a new object after every `setActiveTheme`. Values memoized on it
+ * (by hand or by React Compiler) recompute on a light/dark switch.
+ */
 export declare function useTheme(): ThemeTokens;
 export declare const theme: ThemeTokens;

package/dist/theme/useTheme.js

@@ -1,7 +1,11 @@
-import { getActiveTheme, getThemeVersion, subscribeTheme, } from "./active.js";
+import { getActiveTheme, getThemeSnapshot, subscribeTheme } from "./active.js";
 import { useSyncExternalStore } from "react";
+
+/**
+ * The active theme, as a new object after every `setActiveTheme`. Values memoized on it
+ * (by hand or by React Compiler) recompute on a light/dark switch.
+ */
 export function useTheme() {
-    useSyncExternalStore(subscribeTheme, getThemeVersion, getThemeVersion);
-    return getActiveTheme();
+  return useSyncExternalStore(subscribeTheme, getThemeSnapshot, getThemeSnapshot);
 }
 export const theme = getActiveTheme();

package/dist/theme/useThemeVars.d.ts

@@ -0,0 +1,9 @@
+import { vars } from "nativewind";
+type ThemeVars = ReturnType<typeof vars>;
+/**
+ * NativeWind CSS variables for the active theme, as one stable object per
+ * theme version. A new object on every render would make every `className`
+ * consumer below re-resolve its styles.
+ */
+export declare function useThemeVars(): ThemeVars;
+export {};

package/dist/theme/useThemeVars.js

@@ -0,0 +1,23 @@
+import { getActiveTheme, getThemeVersion, subscribeTheme } from "./active.js";
+import { themeToVars } from "./css-vars.js";
+import { vars } from "nativewind";
+import { useSyncExternalStore } from "react";
+let cachedVersion = -1;
+let cachedVars;
+function currentVars() {
+  const version = getThemeVersion();
+  if (!cachedVars || cachedVersion !== version) {
+    cachedVersion = version;
+    cachedVars = vars(themeToVars(getActiveTheme()));
+  }
+  return cachedVars;
+}
+
+/**
+ * NativeWind CSS variables for the active theme, as one stable object per
+ * theme version. A new object on every render would make every `className`
+ * consumer below re-resolve its styles.
+ */
+export function useThemeVars() {
+  return useSyncExternalStore(subscribeTheme, currentVars, currentVars);
+}

package/dist/theme/validate.js

@@ -9,61 +9,77 @@ import { contrastRatio, resolveOnColor } from "./contrast.js";
  * tests intentionally pass partial themes). Can also be called directly.
  */
 export function validateTheme(theme) {
-    const issues = [];
-    if (typeof theme.name !== "string" || theme.name.trim() === "") {
-        issues.push({ path: "name", message: "Theme must have a non-empty `name`." });
+  const issues = [];
+  if (typeof theme.name !== "string" || theme.name.trim() === "") {
+    issues.push({
+      path: "name",
+      message: "Theme must have a non-empty `name`."
+    });
+  }
+  if (!isHex(theme.primary)) {
+    issues.push({
+      path: "primary",
+      message: `Invalid hex color: ${String(theme.primary)}`
+    });
+  }
+  if (!isHex(theme.accent)) {
+    issues.push({
+      path: "accent",
+      message: `Invalid hex color: ${String(theme.accent)}`
+    });
+  }
+  if (!isHex(theme.bg?.page)) {
+    issues.push({
+      path: "bg.page",
+      message: `Invalid hex color: ${String(theme.bg?.page)}`
+    });
+  }
+  if (!isHex(theme.text?.primary)) {
+    issues.push({
+      path: "text.primary",
+      message: `Invalid hex color: ${String(theme.text?.primary)}`
+    });
+  }
+  if (theme.pattern) {
+    if (!isFiniteSize(theme.pattern.size)) {
+      issues.push({
+        path: "pattern.size",
+        message: `Tile size must be > 0 (got ${String(theme.pattern.size)}).`
+      });
     }
-    if (!isHex(theme.primary)) {
-        issues.push({ path: "primary", message: `Invalid hex color: ${String(theme.primary)}` });
-    }
-    if (!isHex(theme.accent)) {
-        issues.push({ path: "accent", message: `Invalid hex color: ${String(theme.accent)}` });
-    }
-    if (!isHex(theme.bg?.page)) {
-        issues.push({ path: "bg.page", message: `Invalid hex color: ${String(theme.bg?.page)}` });
-    }
-    if (!isHex(theme.text?.primary)) {
-        issues.push({
-            path: "text.primary",
-            message: `Invalid hex color: ${String(theme.text?.primary)}`,
-        });
-    }
-    if (theme.pattern) {
-        if (!isFiniteSize(theme.pattern.size)) {
-            issues.push({
-                path: "pattern.size",
-                message: `Tile size must be > 0 (got ${String(theme.pattern.size)}).`,
-            });
-        }
-    }
-    if (theme.shadow) {
-        issues.push(...validateShadow("shadow.sm", theme.shadow.sm));
-        issues.push(...validateShadow("shadow.md", theme.shadow.md));
-        issues.push(...validateShadow("shadow.lg", theme.shadow.lg));
-    }
-    issues.push(...validateContrast(theme));
-    issues.push(...validateSemanticDistinct(theme));
-    return issues;
+  }
+  if (theme.shadow) {
+    issues.push(...validateShadow("shadow.sm", theme.shadow.sm));
+    issues.push(...validateShadow("shadow.md", theme.shadow.md));
+    issues.push(...validateShadow("shadow.lg", theme.shadow.lg));
+  }
+  issues.push(...validateContrast(theme));
+  issues.push(...validateSemanticDistinct(theme));
+  return issues;
 }
 function isHex(value) {
-    return typeof value === "string" && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value.trim());
+  return typeof value === "string" && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(value.trim());
 }
 function isFiniteSize(n) {
-    return typeof n === "number" && Number.isFinite(n) && n > 0;
+  return typeof n === "number" && Number.isFinite(n) && n > 0;
 }
 function validateShadow(path, s) {
-    const out = [];
-    if (typeof s.shadowColor !== "string" || s.shadowColor.trim() === "") {
-        out.push({ path: `${path}.shadowColor`, message: "shadowColor must be a string." });
-    }
-    if (typeof s.shadowOpacity !== "number" || s.shadowOpacity < 0 || s.shadowOpacity > 1) {
-        out.push({
-            path: `${path}.shadowOpacity`,
-            message: `shadowOpacity must be in [0, 1] (got ${s.shadowOpacity}).`,
-        });
-    }
-    return out;
+  const out = [];
+  if (typeof s.shadowColor !== "string" || s.shadowColor.trim() === "") {
+    out.push({
+      path: `${path}.shadowColor`,
+      message: "shadowColor must be a string."
+    });
+  }
+  if (typeof s.shadowOpacity !== "number" || s.shadowOpacity < 0 || s.shadowOpacity > 1) {
+    out.push({
+      path: `${path}.shadowOpacity`,
+      message: `shadowOpacity must be in [0, 1] (got ${s.shadowOpacity}).`
+    });
+  }
+  return out;
 }
+
 /**
  * WCAG 2.1 contrast validation. Checks the P0 on-color pairs that every consumer
  * relies on (CTA text/bg, focus ring, body text on surfaces). Flags any pair below the
@@ -71,130 +87,123 @@ function validateShadow(path, s) {
  * entries — never throws — so the dev-mode warning stays non-fatal.
  */
 function validateContrast(theme) {
-    const issues = [];
-    const checks = [
-        {
-            fg: theme.text?.onPrimary,
-            bg: theme.primary,
-            min: 4.5,
-            label: "text.onPrimary on primary (CTA)",
-        },
-        {
-            fg: theme.text?.onSecondary,
-            bg: theme.secondary,
-            min: 4.5,
-            label: "text.onSecondary on secondary",
-        },
-        {
-            fg: theme.text?.onAccent,
-            bg: theme.accent,
-            min: 4.5,
-            label: "text.onAccent on accent",
-        },
-        { fg: theme.border?.focus, bg: theme.bg?.page, min: 3, label: "border.focus on bg.page" },
-        { fg: theme.border?.focus, bg: theme.bg?.card, min: 3, label: "border.focus on bg.card" },
-        {
-            fg: theme.text?.onDanger,
-            bg: theme.danger,
-            min: 4.5,
-            label: "text.onDanger on danger",
-        },
-        {
-            fg: theme.text?.onSuccess,
-            bg: theme.success,
-            min: 4.5,
-            label: "text.onSuccess on success",
-        },
-        {
-            fg: theme.text?.accent,
-            bg: theme.bg?.card,
-            min: 4.5,
-            label: "text.accent on bg.card (brand text)",
-        },
-        {
-            fg: theme.text?.accent,
-            bg: theme.bg?.page,
-            min: 4.5,
-            label: "text.accent on bg.page (brand text)",
-        },
-        {
-            fg: theme.container?.onPrimary,
-            bg: theme.container?.primary,
-            min: 4.5,
-            label: "container.onPrimary on container.primary",
-        },
-        {
-            fg: theme.container?.onSuccess,
-            bg: theme.container?.success,
-            min: 4.5,
-            label: "container.onSuccess on container.success",
-        },
-        {
-            fg: theme.container?.onDanger,
-            bg: theme.container?.danger,
-            min: 4.5,
-            label: "container.onDanger on container.danger",
-        },
-    ];
-    for (const c of checks) {
-        if (!isHex(c.fg) || !isHex(c.bg))
-            continue;
-        const ratio = contrastRatio(c.fg, c.bg);
-        if (ratio < c.min) {
-            let message = `Contrast ratio ${ratio.toFixed(2)}:1 is below WCAG AA minimum ${c.min}:1 for body/UI text.`;
-            if (c.label.includes("onPrimary") && isHex(theme.primary)) {
-                const suggested = resolveOnColor(theme.primary);
-                message += ` Use resolveOnColor(primary) → ${suggested}.`;
-            }
-            issues.push({ path: c.label, message });
-        }
+  const issues = [];
+  const checks = [{
+    fg: theme.text?.onPrimary,
+    bg: theme.primary,
+    min: 4.5,
+    label: "text.onPrimary on primary (CTA)"
+  }, {
+    fg: theme.text?.onSecondary,
+    bg: theme.secondary,
+    min: 4.5,
+    label: "text.onSecondary on secondary"
+  }, {
+    fg: theme.text?.onAccent,
+    bg: theme.accent,
+    min: 4.5,
+    label: "text.onAccent on accent"
+  }, {
+    fg: theme.border?.focus,
+    bg: theme.bg?.page,
+    min: 3,
+    label: "border.focus on bg.page"
+  }, {
+    fg: theme.border?.focus,
+    bg: theme.bg?.card,
+    min: 3,
+    label: "border.focus on bg.card"
+  }, {
+    fg: theme.text?.onDanger,
+    bg: theme.danger,
+    min: 4.5,
+    label: "text.onDanger on danger"
+  }, {
+    fg: theme.text?.onSuccess,
+    bg: theme.success,
+    min: 4.5,
+    label: "text.onSuccess on success"
+  }, {
+    fg: theme.text?.accent,
+    bg: theme.bg?.card,
+    min: 4.5,
+    label: "text.accent on bg.card (brand text)"
+  }, {
+    fg: theme.text?.accent,
+    bg: theme.bg?.page,
+    min: 4.5,
+    label: "text.accent on bg.page (brand text)"
+  }, {
+    fg: theme.container?.onPrimary,
+    bg: theme.container?.primary,
+    min: 4.5,
+    label: "container.onPrimary on container.primary"
+  }, {
+    fg: theme.container?.onSuccess,
+    bg: theme.container?.success,
+    min: 4.5,
+    label: "container.onSuccess on container.success"
+  }, {
+    fg: theme.container?.onDanger,
+    bg: theme.container?.danger,
+    min: 4.5,
+    label: "container.onDanger on container.danger"
+  }];
+  for (const c of checks) {
+    if (!isHex(c.fg) || !isHex(c.bg)) continue;
+    const ratio = contrastRatio(c.fg, c.bg);
+    if (ratio < c.min) {
+      let message = `Contrast ratio ${ratio.toFixed(2)}:1 is below WCAG AA minimum ${c.min}:1 for body/UI text.`;
+      if (c.label.includes("onPrimary") && isHex(theme.primary)) {
+        const suggested = resolveOnColor(theme.primary);
+        message += ` Use resolveOnColor(primary) → ${suggested}.`;
+      }
+      issues.push({
+        path: c.label,
+        message
+      });
     }
-    return issues;
+  }
+  return issues;
 }
+
 /** Roles that must stay visually distinct for maintainable state semantics. */
 function validateSemanticDistinct(theme) {
-    const issues = [];
-    const pairs = [
-        ["bg.disabled vs bg.muted", theme.bg?.disabled, theme.bg?.muted],
-        ["text.disabled vs text.muted", theme.text?.disabled, theme.text?.muted],
-        ["icon.disabled vs icon.secondary", theme.icon?.disabled, theme.icon?.secondary],
-    ];
-    for (const [label, a, b] of pairs) {
-        if (!isHex(a) || !isHex(b))
-            continue;
-        if (a.trim().toLowerCase() === b.trim().toLowerCase()) {
-            issues.push({
-                path: label,
-                message: `Tokens share the same hex (${a}). Keep roles distinct so disabled/muted states stay maintainable.`,
-            });
-        }
+  const issues = [];
+  const pairs = [["bg.disabled vs bg.muted", theme.bg?.disabled, theme.bg?.muted], ["text.disabled vs text.muted", theme.text?.disabled, theme.text?.muted], ["icon.disabled vs icon.secondary", theme.icon?.disabled, theme.icon?.secondary]];
+  for (const [label, a, b] of pairs) {
+    if (!isHex(a) || !isHex(b)) continue;
+    if (a.trim().toLowerCase() === b.trim().toLowerCase()) {
+      issues.push({
+        path: label,
+        message: `Tokens share the same hex (${a}). Keep roles distinct so disabled/muted states stay maintainable.`
+      });
+    }
+  }
+  if (theme.state) {
+    for (const key of ["hover", "press", "focus", "drag"]) {
+      const v = theme.state[key];
+      if (typeof v !== "number" || v < 0 || v > 1) {
+        issues.push({
+          path: `state.${key}`,
+          message: `State layer opacity must be in [0, 1] (got ${String(v)}).`
+        });
+      }
     }
-    if (theme.state) {
-        for (const key of ["hover", "press", "focus", "drag"]) {
-            const v = theme.state[key];
-            if (typeof v !== "number" || v < 0 || v > 1) {
-                issues.push({
-                    path: `state.${key}`,
-                    message: `State layer opacity must be in [0, 1] (got ${String(v)}).`,
-                });
-            }
-        }
+  }
+  if (theme.material) {
+    if (typeof theme.material.opacity === "number" && (theme.material.opacity < 0 || theme.material.opacity > 1)) {
+      issues.push({
+        path: "material.opacity",
+        message: `material.opacity must be in [0, 1] (got ${theme.material.opacity}).`
+      });
     }
-    if (theme.material) {
-        if (typeof theme.material.opacity === "number" &&
-            (theme.material.opacity < 0 || theme.material.opacity > 1)) {
-            issues.push({
-                path: "material.opacity",
-                message: `material.opacity must be in [0, 1] (got ${theme.material.opacity}).`,
-            });
-        }
-        if (typeof theme.material.blur === "number" &&
-            (!Number.isFinite(theme.material.blur) || theme.material.blur < 0)) {
-            issues.push({
-                path: "material.blur",
-                message: `material.blur must be ≥ 0 (got ${theme.material.blur}).`,
-            });
-        }
+    if (typeof theme.material.blur === "number" && (!Number.isFinite(theme.material.blur) || theme.material.blur < 0)) {
+      issues.push({
+        path: "material.blur",
+        message: `material.blur must be ≥ 0 (got ${theme.material.blur}).`
+      });
     }
-    return issues;
+  }
+  return issues;
 }

package/dist/tokens/index.js

@@ -1,2 +1,2 @@
 export { motion } from "./motion.js";
-export { duration, easing, spring, } from "./motion.js";
+export { duration, easing, spring } from "./motion.js";

package/dist/tokens/motion.js

@@ -2,24 +2,41 @@
  * Motion tokens — durations and curves for consistent animations (reanimated, LayoutAnimation).
  * Single source of the DS "rhythm": enter/exit, press, theme transitions, sheets, skeletons.
  */
+
 export const duration = {
-    instant: 0,
-    fast: 120,
-    normal: 200,
-    slow: 320,
-    slower: 480,
+  instant: 0,
+  fast: 120,
+  normal: 200,
+  slow: 320,
+  slower: 480
 };
 /** Bezier curves (x1,y1,x2,y2) for Easing.bezier / CSS-like. */
 export const easing = {
-    standard: [0.2, 0, 0, 1],
-    decelerate: [0, 0, 0, 1],
-    accelerate: [0.3, 0, 1, 1],
-    emphasized: [0.2, 0, 0, 1],
+  standard: [0.2, 0, 0, 1],
+  decelerate: [0, 0, 0, 1],
+  accelerate: [0.3, 0, 1, 1],
+  emphasized: [0.2, 0, 0, 1]
 };
 /** Config for reanimated withSpring (spring presets). */
 export const spring = {
-    default: { damping: 20, stiffness: 200, mass: 1 },
-    gentle: { damping: 24, stiffness: 120, mass: 1 },
-    snappy: { damping: 18, stiffness: 300, mass: 1 },
+  default: {
+    damping: 20,
+    stiffness: 200,
+    mass: 1
+  },
+  gentle: {
+    damping: 24,
+    stiffness: 120,
+    mass: 1
+  },
+  snappy: {
+    damping: 18,
+    stiffness: 300,
+    mass: 1
+  }
+};
+export const motion = {
+  duration,
+  easing,
+  spring
 };
-export const motion = { duration, easing, spring };

package/dist/utils/async.d.ts

@@ -0,0 +1,14 @@
+export type Attempt<T> = {
+    ok: true;
+    value: T;
+} | {
+    ok: false;
+    error: unknown;
+};
+/**
+ * Runs `task` and reports how it ended instead of throwing. Component handlers use it
+ * so they need no `try/finally`: React Compiler skips any component whose body has one.
+ */
+export declare function attempt<T>(task: () => T | Promise<T>): Promise<Attempt<T>>;
+/** The error's own message when it has one, else the fallback shown to the user. */
+export declare function errorMessage(cause: unknown, fallback: string): string;

package/dist/utils/async.js

@@ -0,0 +1,22 @@
+/**
+ * Runs `task` and reports how it ended instead of throwing. Component handlers use it
+ * so they need no `try/finally`: React Compiler skips any component whose body has one.
+ */
+export async function attempt(task) {
+  try {
+    return {
+      ok: true,
+      value: await task()
+    };
+  } catch (error) {
+    return {
+      ok: false,
+      error
+    };
+  }
+}
+
+/** The error's own message when it has one, else the fallback shown to the user. */
+export function errorMessage(cause, fallback) {
+  return cause instanceof Error && cause.message.trim() ? cause.message : fallback;
+}