@sincpro/mobile-ui 3.1.0 → 3.2.0

package/dist/Form/choice-row.js

@@ -0,0 +1,236 @@
+import { c as _c } from "react/compiler-runtime";
+import Pressable from "../primitives/Pressable.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+const choice = tv({
+  slots: {
+    row: "flex-row items-center gap-3",
+    mark: "w-[18px] h-[18px] rounded-full border-2 items-center justify-center",
+    dot: "w-[9px] h-[9px] rounded-full bg-primary"
+  },
+  variants: {
+    look: {
+      // Few options, each a bordered card (RadioButton, Select).
+      card: {
+        row: "rounded-lg border px-3 bg-bg-card"
+      },
+      // Long or virtualized lists (PickerField, EditValue).
+      list: {
+        row: "border-b border-border-light py-3"
+      }
+    },
+    selected: {
+      true: {
+        mark: "border-primary"
+      },
+      false: {
+        mark: "border-border-default"
+      }
+    }
+  },
+  compoundVariants: [{
+    look: "card",
+    selected: true,
+    className: {
+      row: "border-primary bg-primary/10"
+    }
+  }, {
+    look: "card",
+    selected: false,
+    className: {
+      row: "border-border-default"
+    }
+  }],
+  defaultVariants: {
+    look: "card",
+    selected: false
+  }
+});
+/**
+ * The single-choice row of the DS: the same radio mark, 48-point target, wrapping label and
+ * `radio` semantics on Android and iOS, whether it lists two options or two thousand.
+ */
+export function ChoiceRow(t0) {
+  const $ = _c(49);
+  const {
+    label,
+    description,
+    selected,
+    onPress,
+    disabled: t1,
+    look: t2,
+    testID
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  const look = t2 === undefined ? "card" : t2;
+  let T0;
+  let T1;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== disabled || $[1] !== label || $[2] !== look || $[3] !== onPress || $[4] !== selected || $[5] !== testID) {
+    const styles = choice({
+      look,
+      selected
+    });
+    T1 = Pressable;
+    t5 = label;
+    t6 = "radio";
+    if ($[19] !== disabled || $[20] !== selected) {
+      t7 = {
+        checked: selected,
+        selected,
+        disabled
+      };
+      $[19] = disabled;
+      $[20] = selected;
+      $[21] = t7;
+    } else {
+      t7 = $[21];
+    }
+    t8 = styles.row();
+    t9 = disabled;
+    t10 = 0;
+    t11 = onPress;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+      t12 = {
+        minHeight: 48
+      };
+      $[22] = t12;
+    } else {
+      t12 = $[22];
+    }
+    t13 = testID;
+    T0 = View;
+    t3 = styles.mark();
+    t4 = selected ? _jsx(View, {
+      className: styles.dot()
+    }) : null;
+    $[0] = disabled;
+    $[1] = label;
+    $[2] = look;
+    $[3] = onPress;
+    $[4] = selected;
+    $[5] = testID;
+    $[6] = T0;
+    $[7] = T1;
+    $[8] = t10;
+    $[9] = t11;
+    $[10] = t12;
+    $[11] = t13;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+    $[15] = t6;
+    $[16] = t7;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    T0 = $[6];
+    T1 = $[7];
+    t10 = $[8];
+    t11 = $[9];
+    t12 = $[10];
+    t13 = $[11];
+    t3 = $[12];
+    t4 = $[13];
+    t5 = $[14];
+    t6 = $[15];
+    t7 = $[16];
+    t8 = $[17];
+    t9 = $[18];
+  }
+  let t14;
+  if ($[23] !== T0 || $[24] !== t3 || $[25] !== t4) {
+    t14 = _jsx(T0, {
+      className: t3,
+      children: t4
+    });
+    $[23] = T0;
+    $[24] = t3;
+    $[25] = t4;
+    $[26] = t14;
+  } else {
+    t14 = $[26];
+  }
+  const t15 = disabled ? "text-text-disabled" : "text-text-primary";
+  let t16;
+  if ($[27] !== label || $[28] !== selected || $[29] !== t15) {
+    t16 = _jsx(Typography.Text, {
+      className: t15,
+      semibold: selected,
+      children: label
+    });
+    $[27] = label;
+    $[28] = selected;
+    $[29] = t15;
+    $[30] = t16;
+  } else {
+    t16 = $[30];
+  }
+  let t17;
+  if ($[31] !== description) {
+    t17 = description ? _jsx(Typography.Text, {
+      className: "text-text-tertiary",
+      variant: "bodySmall",
+      children: description
+    }) : null;
+    $[31] = description;
+    $[32] = t17;
+  } else {
+    t17 = $[32];
+  }
+  let t18;
+  if ($[33] !== t16 || $[34] !== t17) {
+    t18 = _jsxs(View, {
+      className: "flex-1 py-2",
+      children: [t16, t17]
+    });
+    $[33] = t16;
+    $[34] = t17;
+    $[35] = t18;
+  } else {
+    t18 = $[35];
+  }
+  let t19;
+  if ($[36] !== T1 || $[37] !== t10 || $[38] !== t11 || $[39] !== t12 || $[40] !== t13 || $[41] !== t14 || $[42] !== t18 || $[43] !== t5 || $[44] !== t6 || $[45] !== t7 || $[46] !== t8 || $[47] !== t9) {
+    t19 = _jsxs(T1, {
+      accessibilityLabel: t5,
+      accessibilityRole: t6,
+      accessibilityState: t7,
+      className: t8,
+      disabled: t9,
+      hitSlop: t10,
+      onPress: t11,
+      style: t12,
+      testID: t13,
+      children: [t14, t18]
+    });
+    $[36] = T1;
+    $[37] = t10;
+    $[38] = t11;
+    $[39] = t12;
+    $[40] = t13;
+    $[41] = t14;
+    $[42] = t18;
+    $[43] = t5;
+    $[44] = t6;
+    $[45] = t7;
+    $[46] = t8;
+    $[47] = t9;
+    $[48] = t19;
+  } else {
+    t19 = $[48];
+  }
+  return t19;
+}

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

@@ -3,6 +3,11 @@ import { validateTheme } from "./validate.js";
 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;
 
@@ -19,12 +24,20 @@ export function setActiveTheme(tokens) {
     }
   }
   Object.assign(activeTheme, tokens);
+  snapshot = {
+    ...activeTheme
+  };
   version += 1;
   listeners.forEach(listener => listener());
 }
 export function getActiveTheme() {
   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 () => {

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,16 +1,11 @@
-import { c as _c } from "react/compiler-runtime";
-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() {
-  const $ = _c(1);
-  useSyncExternalStore(subscribeTheme, getThemeVersion, getThemeVersion);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = getActiveTheme();
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
+  return useSyncExternalStore(subscribeTheme, getThemeSnapshot, getThemeSnapshot);
 }
 export const theme = getActiveTheme();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",