@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/primitives/AspectRatio.js

@@ -1,8 +1,80 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "../theme/tw.js";
 import { View } from "react-native";
-function AspectRatio({ ratio = 1, className, style, children, ...rest }) {
-    return (_jsx(View, { className: cn(className), style: [{ aspectRatio: ratio }, style], ...rest, children: children }));
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function AspectRatio(t0) {
+  const $ = _c(18);
+  let children;
+  let className;
+  let rest;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      ratio: t1,
+      className,
+      style,
+      children,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = rest;
+    $[4] = style;
+    $[5] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    rest = $[3];
+    style = $[4];
+    t1 = $[5];
+  }
+  const ratio = t1 === undefined ? 1 : t1;
+  let t2;
+  if ($[6] !== className) {
+    t2 = cn(className);
+    $[6] = className;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== ratio) {
+    t3 = {
+      aspectRatio: ratio
+    };
+    $[8] = ratio;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== style || $[11] !== t3) {
+    t4 = [t3, style];
+    $[10] = style;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== children || $[14] !== rest || $[15] !== t2 || $[16] !== t4) {
+    t5 = _jsx(View, {
+      className: t2,
+      style: t4,
+      ...rest,
+      children: children
+    });
+    $[13] = children;
+    $[14] = rest;
+    $[15] = t2;
+    $[16] = t4;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  return t5;
 }
 export default AspectRatio;
 export { AspectRatio };

package/dist/primitives/Box.js

@@ -1,8 +1,50 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "../theme/tw.js";
 import { View } from "react-native";
-function Box({ className, style, ...props }) {
-    return _jsx(View, { className: cn(className), style: style, ...props });
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function Box(t0) {
+  const $ = _c(10);
+  let className;
+  let props;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+  }
+  let t1;
+  if ($[4] !== className) {
+    t1 = cn(className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== props || $[7] !== style || $[8] !== t1) {
+    t2 = _jsx(View, {
+      className: t1,
+      style: style,
+      ...props
+    });
+    $[6] = props;
+    $[7] = style;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  return t2;
 }
 export default Box;
 export { Box };

package/dist/primitives/Pressable.js

@@ -1,9 +1,99 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "../theme/tw.js";
-import { TouchableOpacity, } from "react-native";
-function Pressable({ className, disabled = false, hitSlop = 8, activeOpacity = 0.7, accessibilityRole = "button", style, children, ...rest }) {
-    const isDisabled = !!disabled;
-    return (_jsx(TouchableOpacity, { accessibilityRole: accessibilityRole, accessibilityState: { disabled: isDisabled }, activeOpacity: activeOpacity, className: cn(isDisabled && "opacity-50", className), disabled: isDisabled, hitSlop: hitSlop, style: style, ...rest, children: children }));
+import { TouchableOpacity } from "react-native";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function Pressable(t0) {
+  const $ = _c(24);
+  let children;
+  let className;
+  let rest;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  if ($[0] !== t0) {
+    ({
+      className,
+      disabled: t1,
+      hitSlop: t2,
+      activeOpacity: t3,
+      accessibilityRole: t4,
+      style,
+      children,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = rest;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    children = $[1];
+    className = $[2];
+    rest = $[3];
+    style = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+    t4 = $[8];
+  }
+  const disabled = t1 === undefined ? false : t1;
+  const hitSlop = t2 === undefined ? 8 : t2;
+  const activeOpacity = t3 === undefined ? 0.7 : t3;
+  const accessibilityRole = t4 === undefined ? "button" : t4;
+  const isDisabled = !!disabled;
+  let t5;
+  if ($[9] !== isDisabled) {
+    t5 = {
+      disabled: isDisabled
+    };
+    $[9] = isDisabled;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  const t6 = isDisabled && "opacity-50";
+  let t7;
+  if ($[11] !== className || $[12] !== t6) {
+    t7 = cn(t6, className);
+    $[11] = className;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  let t8;
+  if ($[14] !== accessibilityRole || $[15] !== activeOpacity || $[16] !== children || $[17] !== hitSlop || $[18] !== isDisabled || $[19] !== rest || $[20] !== style || $[21] !== t5 || $[22] !== t7) {
+    t8 = _jsx(TouchableOpacity, {
+      accessibilityRole: accessibilityRole,
+      accessibilityState: t5,
+      activeOpacity: activeOpacity,
+      className: t7,
+      disabled: isDisabled,
+      hitSlop: hitSlop,
+      style: style,
+      ...rest,
+      children: children
+    });
+    $[14] = accessibilityRole;
+    $[15] = activeOpacity;
+    $[16] = children;
+    $[17] = hitSlop;
+    $[18] = isDisabled;
+    $[19] = rest;
+    $[20] = style;
+    $[21] = t5;
+    $[22] = t7;
+    $[23] = t8;
+  } else {
+    t8 = $[23];
+  }
+  return t8;
 }
 export default Pressable;
 export { Pressable };

package/dist/primitives/Row.js

@@ -1,22 +1,93 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "../theme/tw.js";
 import { View } from "react-native";
-function Row({ spacing = 2, align = "center", justify = "start", wrap = false, className, style, ...props }) {
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function Row(t0) {
+  const $ = _c(20);
+  let className;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  if ($[0] !== t0) {
+    ({
+      spacing: t1,
+      align: t2,
+      justify: t3,
+      wrap: t4,
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+    t1 = $[4];
+    t2 = $[5];
+    t3 = $[6];
+    t4 = $[7];
+  }
+  const spacing = t1 === undefined ? 2 : t1;
+  const align = t2 === undefined ? "center" : t2;
+  const justify = t3 === undefined ? "start" : t3;
+  const wrap = t4 === undefined ? false : t4;
+  let T0;
+  let t5;
+  if ($[8] !== align || $[9] !== className || $[10] !== justify || $[11] !== spacing || $[12] !== wrap) {
     const alignMap = {
-        start: "items-start",
-        center: "items-center",
-        end: "items-end",
-        stretch: "items-stretch",
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
     };
     const justifyMap = {
-        start: "justify-start",
-        center: "justify-center",
-        end: "justify-end",
-        between: "justify-between",
-        around: "justify-around",
-        evenly: "justify-evenly",
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
     };
-    return (_jsx(View, { className: cn("flex flex-row", `gap-${spacing}`, alignMap[align], justifyMap[justify], wrap && "flex-wrap", className), style: style, ...props }));
+    T0 = View;
+    t5 = cn("flex flex-row", `gap-${spacing}`, alignMap[align], justifyMap[justify], wrap && "flex-wrap", className);
+    $[8] = align;
+    $[9] = className;
+    $[10] = justify;
+    $[11] = spacing;
+    $[12] = wrap;
+    $[13] = T0;
+    $[14] = t5;
+  } else {
+    T0 = $[13];
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== T0 || $[16] !== props || $[17] !== style || $[18] !== t5) {
+    t6 = _jsx(T0, {
+      className: t5,
+      style: style,
+      ...props
+    });
+    $[15] = T0;
+    $[16] = props;
+    $[17] = style;
+    $[18] = t5;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  return t6;
 }
 export default Row;
 export { Row };

package/dist/primitives/Spacer.js

@@ -1,9 +1,46 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { View } from "react-native";
-function Spacer({ size = 8, horizontal = false, flex = false }) {
-    if (flex)
-        return _jsx(View, { style: { flex: 1 } });
-    return _jsx(View, { style: horizontal ? { width: size } : { height: size } });
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function Spacer(t0) {
+  const $ = _c(4);
+  const {
+    size: t1,
+    horizontal: t2,
+    flex: t3
+  } = t0;
+  const size = t1 === undefined ? 8 : t1;
+  const horizontal = t2 === undefined ? false : t2;
+  const flex = t3 === undefined ? false : t3;
+  if (flex) {
+    let t4;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = _jsx(View, {
+        style: {
+          flex: 1
+        }
+      });
+      $[0] = t4;
+    } else {
+      t4 = $[0];
+    }
+    return t4;
+  }
+  let t4;
+  if ($[1] !== horizontal || $[2] !== size) {
+    t4 = _jsx(View, {
+      style: horizontal ? {
+        width: size
+      } : {
+        height: size
+      }
+    });
+    $[1] = horizontal;
+    $[2] = size;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  return t4;
 }
 export default Spacer;
 export { Spacer };

package/dist/primitives/Stack.js

@@ -1,14 +1,73 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "../theme/tw.js";
 import { View } from "react-native";
-function Stack({ spacing = 4, align = "stretch", className, style, ...props }) {
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function Stack(t0) {
+  const $ = _c(16);
+  let className;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      spacing: t1,
+      align: t2,
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+    t1 = $[4];
+    t2 = $[5];
+  }
+  const spacing = t1 === undefined ? 4 : t1;
+  const align = t2 === undefined ? "stretch" : t2;
+  let T0;
+  let t3;
+  if ($[6] !== align || $[7] !== className || $[8] !== spacing) {
     const alignMap = {
-        start: "items-start",
-        center: "items-center",
-        end: "items-end",
-        stretch: "items-stretch",
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
     };
-    return (_jsx(View, { className: cn("flex flex-col", `gap-${spacing}`, alignMap[align], className), style: style, ...props }));
+    T0 = View;
+    t3 = cn("flex flex-col", `gap-${spacing}`, alignMap[align], className);
+    $[6] = align;
+    $[7] = className;
+    $[8] = spacing;
+    $[9] = T0;
+    $[10] = t3;
+  } else {
+    T0 = $[9];
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== T0 || $[12] !== props || $[13] !== style || $[14] !== t3) {
+    t4 = _jsx(T0, {
+      className: t3,
+      style: style,
+      ...props
+    });
+    $[11] = T0;
+    $[12] = props;
+    $[13] = style;
+    $[14] = t3;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  return t4;
 }
 export default Stack;
 export { Stack };

package/dist/primitives/index.js

@@ -1,4 +1,4 @@
-export { AspectRatio, } from "./AspectRatio.js";
+export { AspectRatio } from "./AspectRatio.js";
 export { Box } from "./Box.js";
 export { Pressable } from "./Pressable.js";
 export { Row } from "./Row.js";

package/dist/theme/active.d.ts

@@ -1,5 +1,7 @@
 import type { ThemeTokens } from "./types.js";
 export declare function setActiveTheme(tokens: ThemeTokens): void;
 export declare function getActiveTheme(): ThemeTokens;
+/** The active theme as one object per change, for React readers (`useTheme`). */
+export declare function getThemeSnapshot(): ThemeTokens;
 export declare function subscribeTheme(listener: () => void): () => void;
 export declare function getThemeVersion(): number;

package/dist/theme/active.js

@@ -1,34 +1,49 @@
 import { DEFAULT_THEME } from "./default.js";
 import { validateTheme } from "./validate.js";
-const activeTheme = { ...DEFAULT_THEME };
+const activeTheme = {
+  ...DEFAULT_THEME
+};
+// A new object per change: the static `theme` keeps its identity, but a component compiled
+// with React Compiler memoizes on the object `useTheme()` returns and must see it change.
+let snapshot = {
+  ...activeTheme
+};
 const listeners = new Set();
 let version = 0;
+
 // Detection helper: we don't want validation warnings to spam the console while running
 // runtime tests under Node (they intentionally pass partial themes). The check is cheap
 // and runs once at module load.
-const isReactNative = typeof navigator !== "undefined" &&
-    navigator.product === "ReactNative";
+const isReactNative = typeof navigator !== "undefined" && navigator.product === "ReactNative";
 export function setActiveTheme(tokens) {
-    if (__DEV__ && isReactNative) {
-        const issues = validateTheme(tokens);
-        if (issues.length > 0) {
-            const fmt = issues.map((i) => `  · ${i.path}: ${i.message}`).join("\n");
-            console.warn(`[@sincpro/mobile-ui] setActiveTheme received a theme with issues:\n${fmt}\nRendering will fall back to default styles for missing keys.`);
-        }
+  if (__DEV__ && isReactNative) {
+    const issues = validateTheme(tokens);
+    if (issues.length > 0) {
+      const fmt = issues.map(i => `  · ${i.path}: ${i.message}`).join("\n");
+      console.warn(`[@sincpro/mobile-ui] setActiveTheme received a theme with issues:\n${fmt}\nRendering will fall back to default styles for missing keys.`);
     }
-    Object.assign(activeTheme, tokens);
-    version += 1;
-    listeners.forEach((listener) => listener());
+  }
+  Object.assign(activeTheme, tokens);
+  snapshot = {
+    ...activeTheme
+  };
+  version += 1;
+  listeners.forEach(listener => listener());
 }
 export function getActiveTheme() {
-    return activeTheme;
+  return activeTheme;
+}
+
+/** The active theme as one object per change, for React readers (`useTheme`). */
+export function getThemeSnapshot() {
+  return snapshot;
 }
 export function subscribeTheme(listener) {
-    listeners.add(listener);
-    return () => {
-        listeners.delete(listener);
-    };
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
 }
 export function getThemeVersion() {
-    return version;
+  return version;
 }