@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Display/Display.GradientSurface.js

@@ -1,73 +1,223 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme/index.js";
+import { c as _c } from "react/compiler-runtime";
+import { getActiveTheme, useTheme } from "../theme/index.js";
 import { cn, tv } from "../theme/tw.js";
 import { LinearGradient } from "expo-linear-gradient";
 import { View } from "react-native";
+
+/** Gradient anchor, 0 to 1 on each axis: `{ x, y }` or `[x, y]`. */
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 /**
  * Decorative gradient presets. `brand` is themeable (reads `theme.gradient.primary`) —
  * use it when you want the surface to follow whatever the app's active theme defines.
  * Other presets are static constants for one-off uses. Each is [from, …, to].
  */
 const GRADIENT_PRESETS = {
-    warm: {
-        colors: ["#1A1714", "#C89B3C", "#B88A2E"],
-        start: { x: 0, y: 0 },
-        end: { x: 1, y: 1 },
+  warm: {
+    colors: ["#1A1714", "#C89B3C", "#B88A2E"],
+    start: {
+      x: 0,
+      y: 0
     },
-    "neon-teal": {
-        colors: ["#0F5C6E", "#5CC4D8"],
-        start: { x: 0, y: 0 },
-        end: { x: 1, y: 1 },
+    end: {
+      x: 1,
+      y: 1
+    }
+  },
+  "neon-teal": {
+    colors: ["#0F5C6E", "#5CC4D8"],
+    start: {
+      x: 0,
+      y: 0
     },
-    "night-green": {
-        colors: ["#0B101E", "#18223A"],
-        start: { x: 0, y: 0 },
-        end: { x: 1, y: 1 },
+    end: {
+      x: 1,
+      y: 1
+    }
+  },
+  "night-green": {
+    colors: ["#0B101E", "#18223A"],
+    start: {
+      x: 0,
+      y: 0
     },
-    mesh: {
-        colors: ["#1C3765", "#2A4A85", "#8FA9E8"],
-        start: { x: 0, y: 0 },
-        end: { x: 1, y: 1 },
+    end: {
+      x: 1,
+      y: 1
+    }
+  },
+  mesh: {
+    colors: ["#1C3765", "#2A4A85", "#8FA9E8"],
+    start: {
+      x: 0,
+      y: 0
     },
-    emerald: {
-        colors: ["#2F6B3C", "#6FCF8B"],
-        start: { x: 0, y: 0 },
-        end: { x: 1, y: 1 },
+    end: {
+      x: 1,
+      y: 1
+    }
+  },
+  emerald: {
+    colors: ["#2F6B3C", "#6FCF8B"],
+    start: {
+      x: 0,
+      y: 0
     },
+    end: {
+      x: 1,
+      y: 1
+    }
+  }
 };
 const surface = tv({
-    variants: {
-        radius: {
-            none: "rounded-none",
-            md: "rounded-xl",
-            lg: "rounded-2xl",
-            full: "rounded-full",
-        },
-        padding: {
-            none: "p-0",
-            sm: "p-3",
-            md: "p-4",
-            lg: "p-6",
-        },
+  variants: {
+    radius: {
+      none: "rounded-none",
+      md: "rounded-xl",
+      lg: "rounded-2xl",
+      full: "rounded-full"
     },
-    defaultVariants: { radius: "lg", padding: "none" },
+    padding: {
+      none: "p-0",
+      sm: "p-3",
+      md: "p-4",
+      lg: "p-6"
+    }
+  },
+  defaultVariants: {
+    radius: "lg",
+    padding: "none"
+  }
 });
-export function resolveGradientPreset(preset = "warm") {
-    const surface = preset === "brand" ? GRADIENT_PRESETS.warm : GRADIENT_PRESETS[preset];
-    return {
-        ...surface,
-        colors: preset === "brand" ? theme.gradient.primary : surface.colors,
-    };
+export function resolveGradientPreset(preset = "warm", theme = getActiveTheme()) {
+  const surface = preset === "brand" ? GRADIENT_PRESETS.warm : GRADIENT_PRESETS[preset];
+  return {
+    ...surface,
+    colors: preset === "brand" ? theme.gradient.primary : surface.colors
+  };
 }
+
 /**
  * Modern gradient surface. Wraps `expo-linear-gradient` with named presets +
  * tokenized radius/padding. iOS + Android (no native dep beyond the already-peer
  * `expo-linear-gradient`). Replaces the legacy `GradientContainer`.
  */
-function GradientSurface({ preset = "warm", colors, start, end, radius, padding, children, className, style, testID, }) {
-    const p = resolveGradientPreset(preset);
-    const resolvedColors = colors ?? p.colors;
-    return (_jsxs(View, { className: cn("overflow-hidden", surface({ radius })), style: style, testID: testID, children: [_jsx(LinearGradient, { colors: [...resolvedColors], end: end ?? p.end, start: start ?? p.start, style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } }), _jsx(View, { className: cn(surface({ padding }), className), children: children })] }));
+function GradientSurface(t0) {
+  const $ = _c(24);
+  const {
+    preset: t1,
+    colors,
+    start,
+    end,
+    radius,
+    padding,
+    children,
+    className,
+    style,
+    testID
+  } = t0;
+  const preset = t1 === undefined ? "warm" : t1;
+  const theme = useTheme();
+  let t2;
+  if ($[0] !== preset || $[1] !== theme) {
+    t2 = resolveGradientPreset(preset, theme);
+    $[0] = preset;
+    $[1] = theme;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const p = t2;
+  const resolvedColors = colors ?? p.colors;
+  let t3;
+  if ($[3] !== radius) {
+    t3 = cn("overflow-hidden", surface({
+      radius
+    }));
+    $[3] = radius;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== resolvedColors) {
+    t4 = [...resolvedColors];
+    $[5] = resolvedColors;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const t5 = t4;
+  const t6 = end ?? p.end;
+  const t7 = start ?? p.start;
+  let t8;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    };
+    $[7] = t8;
+  } else {
+    t8 = $[7];
+  }
+  let t9;
+  if ($[8] !== t5 || $[9] !== t6 || $[10] !== t7) {
+    t9 = _jsx(LinearGradient, {
+      colors: t5,
+      end: t6,
+      start: t7,
+      style: t8
+    });
+    $[8] = t5;
+    $[9] = t6;
+    $[10] = t7;
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  let t10;
+  if ($[12] !== className || $[13] !== padding) {
+    t10 = cn(surface({
+      padding
+    }), className);
+    $[12] = className;
+    $[13] = padding;
+    $[14] = t10;
+  } else {
+    t10 = $[14];
+  }
+  let t11;
+  if ($[15] !== children || $[16] !== t10) {
+    t11 = _jsx(View, {
+      className: t10,
+      children: children
+    });
+    $[15] = children;
+    $[16] = t10;
+    $[17] = t11;
+  } else {
+    t11 = $[17];
+  }
+  let t12;
+  if ($[18] !== style || $[19] !== t11 || $[20] !== t3 || $[21] !== t9 || $[22] !== testID) {
+    t12 = _jsxs(View, {
+      className: t3,
+      style: style,
+      testID: testID,
+      children: [t9, t11]
+    });
+    $[18] = style;
+    $[19] = t11;
+    $[20] = t3;
+    $[21] = t9;
+    $[22] = testID;
+    $[23] = t12;
+  } else {
+    t12 = $[23];
+  }
+  return t12;
 }
 export default GradientSurface;
 export { GRADIENT_PRESETS, GradientSurface };

package/dist/Display/Display.Icon.js

@@ -1,21 +1,135 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { ICON_FONT_FAMILY } from "./icon-font.js";
+import { MATERIAL_CODEPOINTS } from "./icon-glyphs.js";
 import { ICON_MAP } from "./icon-map.js";
+import { customIconRenderer } from "./icon-registry.js";
 import { useTheme } from "../theme/index.js";
-import { cn } from "../theme/tw.js";
 import { SymbolView } from "expo-symbols";
-import { View } from "react-native";
-const Icon = ({ name, size = 24, color, className, style, accessible, accessibilityLabel, accessibilityRole, ...viewProps }) => {
-    const theme = useTheme();
-    if (typeof name !== "string" || !Object.hasOwn(ICON_MAP, name)) {
-        throw new Error(`Unknown icon name: ${String(name)}`);
-    }
-    if (!Number.isFinite(size) || size <= 0) {
-        throw new RangeError(`Invalid icon size: ${String(size)}`);
-    }
-    if (["type", "customIcon", "fallback", "children"].some((key) => Object.hasOwn(viewProps, key))) {
-        throw new Error("Display.Icon accepts semantic names, not icon families or custom renderers");
+import { Platform, StyleSheet, Text, View } from "react-native";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+const FALLBACK = "info";
+const DEFAULT_SIZE = 24;
+const LEGACY_PROPS = ["type", "customIcon", "fallback", "children"];
+const reported = new Set();
+function reportOnce(message) {
+  if (!__DEV__ || reported.has(message)) return;
+  reported.add(message);
+  console.error(`[Display.Icon] ${message}`);
+}
+function isBuiltIn(name) {
+  return typeof name === "string" && Object.hasOwn(ICON_MAP, name);
+}
+
+/**
+ * Rendered inline (not a component): one fiber per icon instead of two.
+ * iOS: SF Symbols, native and stateless.
+ * Android and web: one Material Symbols glyph in a Text — no effect, no
+ * per-instance font load, a single render. Icons keep their size when the
+ * system font scale grows, like @expo/vector-icons did.
+ */
+function glyph(name, size, color) {
+  if (Platform.OS === "ios") {
+    return _jsx(SymbolView, {
+      accessibilityElementsHidden: true,
+      accessible: false,
+      importantForAccessibility: "no-hide-descendants",
+      name: ICON_MAP[name].sf,
+      size: size,
+      tintColor: color
+    });
+  }
+  return _jsx(Text, {
+    accessibilityElementsHidden: true,
+    accessible: false,
+    allowFontScaling: false,
+    importantForAccessibility: "no-hide-descendants",
+    style: [styles.glyph, {
+      color,
+      fontSize: size,
+      lineHeight: size,
+      width: size,
+      height: size
+    }],
+    children: String.fromCharCode(MATERIAL_CODEPOINTS[name])
+  });
+}
+const Icon = t0 => {
+  const $ = _c(4);
+  const {
+    name,
+    size: t1,
+    color,
+    className,
+    style,
+    accessible,
+    accessibilityLabel,
+    accessibilityRole,
+    ...rest
+  } = t0;
+  const size = t1 === undefined ? DEFAULT_SIZE : t1;
+  const theme = useTheme();
+  const tint = color ?? theme.text.primary;
+  const validSize = Number.isFinite(size) && size > 0;
+  if (!validSize) {
+    reportOnce(`Invalid size ${String(size)}. Using ${DEFAULT_SIZE}.`);
+  }
+  const glyphSize = validSize ? size : DEFAULT_SIZE;
+  const viewProps = {
+    ...rest
+  };
+  for (const key of LEGACY_PROPS) {
+    if (!Object.hasOwn(viewProps, key)) {
+      continue;
     }
-    const icon = ICON_MAP[name];
-    return (_jsx(View, { ...viewProps, accessibilityLabel: accessibilityLabel, accessibilityRole: accessibilityRole ?? (accessibilityLabel ? "image" : undefined), accessible: accessible ?? Boolean(accessibilityLabel), className: cn("justify-center items-center", className), style: style, children: _jsx(SymbolView, { accessibilityElementsHidden: true, accessible: false, importantForAccessibility: "no-hide-descendants", name: { ios: icon.sf, android: icon.md, web: icon.md }, size: size, tintColor: color ?? theme.text.primary }) }));
+    reportOnce(`"${key}" is not supported. Register custom icons with registerIcons().`);
+    delete viewProps[key];
+  }
+  const custom = typeof name === "string" ? customIconRenderer(name) : undefined;
+  const builtIn = isBuiltIn(name) ? name : undefined;
+  if (!custom && !builtIn) {
+    reportOnce(`Unknown icon "${String(name)}". Showing "${FALLBACK}".`);
+  }
+  let t2;
+  if ($[0] !== className) {
+    t2 = className ? {
+      className
+    } : null;
+    $[0] = className;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== style) {
+    t3 = [styles.box, style];
+    $[2] = style;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  return _jsx(View, {
+    ...viewProps,
+    ...t2,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole ?? (accessibilityLabel ? "image" : undefined),
+    accessible: accessible ?? Boolean(accessibilityLabel),
+    style: t3,
+    children: custom ? custom({
+      size: glyphSize,
+      color: tint
+    }) : glyph(builtIn ?? FALLBACK, glyphSize, tint)
+  });
 };
+const styles = StyleSheet.create({
+  box: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  glyph: {
+    fontFamily: ICON_FONT_FAMILY,
+    includeFontPadding: false,
+    textAlign: "center",
+    textAlignVertical: "center"
+  }
+});
 export default Icon;

package/dist/Display/Display.IconBadge.js

@@ -1,30 +1,100 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { CountBadge } from "./count-badge.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
-import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function IconBadge({ children, count, max = 99, dot = false, color, onPress, accessibilityLabel, testID, }) {
-    const showCount = typeof count === "number" && count > 0;
-    const showBadge = dot || showCount;
-    const label = showCount ? (count > max ? `${max}+` : String(count)) : "";
-    const badgeColor = color ?? theme.danger;
-    const content = (_jsxs(View, { style: { position: "relative" }, children: [children, showBadge ? (_jsx(View, { style: {
-                    position: "absolute",
-                    top: -4,
-                    right: -6,
-                    minWidth: dot ? 10 : 18,
-                    height: dot ? 10 : 18,
-                    borderRadius: 999,
-                    paddingHorizontal: dot ? 0 : 4,
-                    backgroundColor: badgeColor,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    borderWidth: 2,
-                    borderColor: theme.bg.card,
-                }, children: !dot && label ? (_jsx(Typography.Text, { style: { color: theme.text.inverse, fontSize: 10, lineHeight: 12 }, children: label })) : null })) : null] }));
-    if (onPress) {
-        return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel, hitSlop: 10, onPress: onPress, testID: testID, children: content }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function IconBadge(t0) {
+  const $ = _c(19);
+  const {
+    children,
+    count,
+    max: t1,
+    dot: t2,
+    color,
+    onPress,
+    accessibilityLabel,
+    testID
+  } = t0;
+  const max = t1 === undefined ? 99 : t1;
+  const dot = t2 === undefined ? false : t2;
+  const showCount = typeof count === "number" && count > 0;
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      position: "relative"
+    };
+    $[0] = t3;
+  } else {
+    t3 = $[0];
+  }
+  let t4;
+  if ($[1] !== color || $[2] !== count || $[3] !== dot || $[4] !== max || $[5] !== showCount) {
+    t4 = dot || showCount ? _jsx(CountBadge, {
+      anchor: {
+        top: -4,
+        right: -6
+      },
+      color: color,
+      count: count,
+      dot: dot,
+      max: max
+    }) : null;
+    $[1] = color;
+    $[2] = count;
+    $[3] = dot;
+    $[4] = max;
+    $[5] = showCount;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== children || $[8] !== t4) {
+    t5 = _jsxs(View, {
+      style: t3,
+      children: [children, t4]
+    });
+    $[7] = children;
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  const content = t5;
+  if (onPress) {
+    let t6;
+    if ($[10] !== accessibilityLabel || $[11] !== content || $[12] !== onPress || $[13] !== testID) {
+      t6 = _jsx(Pressable, {
+        accessibilityLabel: accessibilityLabel,
+        hitSlop: 10,
+        onPress: onPress,
+        testID: testID,
+        children: content
+      });
+      $[10] = accessibilityLabel;
+      $[11] = content;
+      $[12] = onPress;
+      $[13] = testID;
+      $[14] = t6;
+    } else {
+      t6 = $[14];
     }
-    return (_jsx(View, { accessibilityLabel: accessibilityLabel, testID: testID, children: content }));
+    return t6;
+  }
+  let t6;
+  if ($[15] !== accessibilityLabel || $[16] !== content || $[17] !== testID) {
+    t6 = _jsx(View, {
+      accessibilityLabel: accessibilityLabel,
+      testID: testID,
+      children: content
+    });
+    $[15] = accessibilityLabel;
+    $[16] = content;
+    $[17] = testID;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  return t6;
 }
 export default IconBadge;

package/dist/Display/Display.Image.d.ts

@@ -16,5 +16,11 @@ export interface DisplayImageProps extends Omit<ExpoImageProps, "source" | "styl
     renderError?: (retry: () => void) => ReactNode;
     testID?: string;
 }
-declare function DisplayImage(props: DisplayImageProps): import("react").JSX.Element;
+/**
+ * One native image view for the life of the component. A new `source` resets the load
+ * state in place instead of remounting, so a recycled FlashList cell keeps its view and
+ * `recyclingKey` clears the previous picture natively. Each load has a token; events
+ * from an older source or attempt cannot settle the current one.
+ */
+declare function DisplayImage({ source, width, height, aspectRatio, radius, contentFit, placeholder, fallbackIcon, className, style, containerStyle, renderError, testID, onError, onLoadStart, onLoadEnd, onLoad, accessibilityLabel, accessible, ...imageProps }: DisplayImageProps): import("react").JSX.Element;
 export default DisplayImage;