@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/widgets/PromoBanner.js

@@ -1,47 +1,271 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import GradientSurface from "../Display/Display.GradientSurface.js";
 import { useTheme } from "../theme/index.js";
+import { ON_DARK_SURFACE } from "../theme/on-dark-surface.js";
 import { Typography } from "../Typography/index.js";
 import { ScrollView, TouchableOpacity, View } from "react-native";
-function BannerCard({ item }) {
-    const theme = useTheme();
-    const accent = item.accentColor ?? theme.accent;
-    const hasGradient = !!item.gradient;
-    const Icon = item.icon;
-    const textColor = hasGradient ? "#FFFFFF" : theme.text.primary;
-    const subtextColor = hasGradient ? "rgba(255,255,255,0.75)" : theme.text.secondary;
-    return (_jsxs(TouchableOpacity, { activeOpacity: 0.85, onPress: item.onPress, style: {
-            width: 280,
-            borderRadius: 16,
-            overflow: "hidden",
-            marginRight: 12,
-            backgroundColor: hasGradient ? "transparent" : theme.bg.card,
-            borderWidth: hasGradient ? 0 : 1,
-            borderColor: theme.border.default,
-            ...theme.shadow.md,
-        }, children: [hasGradient ? (_jsx(GradientSurface, { colors: item.gradient, padding: "none", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } })) : null, _jsxs(View, { style: { padding: 16 }, children: [item.badge ? (_jsx(View, { style: {
-                            alignSelf: "flex-start",
-                            backgroundColor: accent,
-                            borderRadius: 999,
-                            paddingHorizontal: 10,
-                            paddingVertical: 3,
-                            marginBottom: 10,
-                        }, children: _jsx(Typography.Text, { semibold: true, style: { color: "#FFFFFF", fontSize: 11 }, variant: "caption", children: item.badge }) })) : null, _jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [Icon ? (_jsx(View, { style: {
-                                    width: 48,
-                                    height: 48,
-                                    borderRadius: 12,
-                                    backgroundColor: hasGradient ? "rgba(255,255,255,0.15)" : theme.bg.muted,
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                }, children: _jsx(Icon, { color: hasGradient ? "#FFFFFF" : theme.icon.primary, size: 24 }) })) : null, _jsxs(View, { style: { flex: 1 }, children: [_jsx(Typography.Text, { semibold: true, style: { color: textColor }, variant: "subtitle", children: item.title }), item.subtitle ? (_jsx(Typography.Text, { style: { color: subtextColor, marginTop: 2 }, variant: "bodySmall", children: item.subtitle })) : null] })] }), item.ctaLabel ? (_jsx(View, { style: {
-                            marginTop: 14,
-                            alignSelf: "flex-start",
-                            backgroundColor: hasGradient ? "rgba(255,255,255,0.2)" : accent,
-                            borderRadius: 999,
-                            paddingHorizontal: 16,
-                            paddingVertical: 7,
-                        }, children: _jsx(Typography.Text, { semibold: true, style: { color: hasGradient ? "#FFFFFF" : theme.text.onAccent, fontSize: 13 }, variant: "bodySmall", children: item.ctaLabel }) })) : null] })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function BannerCard(t0) {
+  const $ = _c(48);
+  const {
+    item
+  } = t0;
+  const theme = useTheme();
+  const accent = item.accentColor ?? theme.accent;
+  const hasGradient = !!item.gradient;
+  const Icon = item.icon;
+  const textColor = hasGradient ? ON_DARK_SURFACE.ink : theme.text.primary;
+  const subtextColor = hasGradient ? ON_DARK_SURFACE.muted : theme.text.secondary;
+  const t1 = hasGradient ? "transparent" : theme.bg.card;
+  const t2 = hasGradient ? 0 : 1;
+  let t3;
+  if ($[0] !== t1 || $[1] !== t2 || $[2] !== theme.border.default || $[3] !== theme.shadow.md) {
+    t3 = {
+      width: 280,
+      borderRadius: 16,
+      overflow: "hidden",
+      marginRight: 12,
+      backgroundColor: t1,
+      borderWidth: t2,
+      borderColor: theme.border.default,
+      ...theme.shadow.md
+    };
+    $[0] = t1;
+    $[1] = t2;
+    $[2] = theme.border.default;
+    $[3] = theme.shadow.md;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== hasGradient || $[6] !== item.gradient) {
+    t4 = hasGradient ? _jsx(GradientSurface, {
+      colors: item.gradient,
+      padding: "none",
+      radius: "none",
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0
+      }
+    }) : null;
+    $[5] = hasGradient;
+    $[6] = item.gradient;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      padding: 16
+    };
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== accent || $[10] !== item.badge) {
+    t6 = item.badge ? _jsx(View, {
+      style: {
+        alignSelf: "flex-start",
+        backgroundColor: accent,
+        borderRadius: 999,
+        paddingHorizontal: 10,
+        paddingVertical: 3,
+        marginBottom: 10
+      },
+      children: _jsx(Typography.Text, {
+        semibold: true,
+        style: {
+          color: ON_DARK_SURFACE.ink,
+          fontSize: 11
+        },
+        variant: "caption",
+        children: item.badge
+      })
+    }) : null;
+    $[9] = accent;
+    $[10] = item.badge;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 12
+    };
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== Icon || $[14] !== hasGradient || $[15] !== theme.bg || $[16] !== theme.icon) {
+    t8 = Icon ? _jsx(View, {
+      style: {
+        width: 48,
+        height: 48,
+        borderRadius: 12,
+        backgroundColor: hasGradient ? ON_DARK_SURFACE.glass : theme.bg.muted,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: _jsx(Icon, {
+        color: hasGradient ? ON_DARK_SURFACE.ink : theme.icon.primary,
+        size: 24
+      })
+    }) : null;
+    $[13] = Icon;
+    $[14] = hasGradient;
+    $[15] = theme.bg;
+    $[16] = theme.icon;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = {
+      flex: 1
+    };
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== textColor) {
+    t10 = {
+      color: textColor
+    };
+    $[19] = textColor;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  let t11;
+  if ($[21] !== item.title || $[22] !== t10) {
+    t11 = _jsx(Typography.Text, {
+      semibold: true,
+      style: t10,
+      variant: "subtitle",
+      children: item.title
+    });
+    $[21] = item.title;
+    $[22] = t10;
+    $[23] = t11;
+  } else {
+    t11 = $[23];
+  }
+  let t12;
+  if ($[24] !== item.subtitle || $[25] !== subtextColor) {
+    t12 = item.subtitle ? _jsx(Typography.Text, {
+      style: {
+        color: subtextColor,
+        marginTop: 2
+      },
+      variant: "bodySmall",
+      children: item.subtitle
+    }) : null;
+    $[24] = item.subtitle;
+    $[25] = subtextColor;
+    $[26] = t12;
+  } else {
+    t12 = $[26];
+  }
+  let t13;
+  if ($[27] !== t11 || $[28] !== t12) {
+    t13 = _jsxs(View, {
+      style: t9,
+      children: [t11, t12]
+    });
+    $[27] = t11;
+    $[28] = t12;
+    $[29] = t13;
+  } else {
+    t13 = $[29];
+  }
+  let t14;
+  if ($[30] !== t13 || $[31] !== t8) {
+    t14 = _jsxs(View, {
+      style: t7,
+      children: [t8, t13]
+    });
+    $[30] = t13;
+    $[31] = t8;
+    $[32] = t14;
+  } else {
+    t14 = $[32];
+  }
+  let t15;
+  if ($[33] !== accent || $[34] !== hasGradient || $[35] !== item.ctaLabel || $[36] !== theme.text) {
+    t15 = item.ctaLabel ? _jsx(View, {
+      style: {
+        marginTop: 14,
+        alignSelf: "flex-start",
+        backgroundColor: hasGradient ? ON_DARK_SURFACE.glass : accent,
+        borderRadius: 999,
+        paddingHorizontal: 16,
+        paddingVertical: 7
+      },
+      children: _jsx(Typography.Text, {
+        semibold: true,
+        style: {
+          color: hasGradient ? ON_DARK_SURFACE.ink : theme.text.onAccent,
+          fontSize: 13
+        },
+        variant: "bodySmall",
+        children: item.ctaLabel
+      })
+    }) : null;
+    $[33] = accent;
+    $[34] = hasGradient;
+    $[35] = item.ctaLabel;
+    $[36] = theme.text;
+    $[37] = t15;
+  } else {
+    t15 = $[37];
+  }
+  let t16;
+  if ($[38] !== t14 || $[39] !== t15 || $[40] !== t6) {
+    t16 = _jsxs(View, {
+      style: t5,
+      children: [t6, t14, t15]
+    });
+    $[38] = t14;
+    $[39] = t15;
+    $[40] = t6;
+    $[41] = t16;
+  } else {
+    t16 = $[41];
+  }
+  let t17;
+  if ($[42] !== item.onPress || $[43] !== item.title || $[44] !== t16 || $[45] !== t3 || $[46] !== t4) {
+    t17 = _jsxs(TouchableOpacity, {
+      accessibilityLabel: item.title,
+      accessibilityRole: "button",
+      activeOpacity: 0.7,
+      onPress: item.onPress,
+      style: t3,
+      children: [t4, t16]
+    });
+    $[42] = item.onPress;
+    $[43] = item.title;
+    $[44] = t16;
+    $[45] = t3;
+    $[46] = t4;
+    $[47] = t17;
+  } else {
+    t17 = $[47];
+  }
+  return t17;
 }
+
 /**
  * Horizontal scrollable row of promotional/announcement cards.
  * Each card supports gradient surfaces, icon, badge, title, subtitle, and a CTA button.
@@ -55,7 +279,77 @@ function BannerCard({ item }) {
  *     ]}
  *   />
  */
-export function PromoBanner({ items, title }) {
-    const theme = useTheme();
-    return (_jsxs(View, { children: [title ? (_jsx(Typography.Text, { semibold: true, style: { color: theme.text.secondary, marginBottom: 10, paddingHorizontal: 16 }, variant: "caption", children: title.toUpperCase() })) : null, _jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, paddingVertical: 2 }, horizontal: true, showsHorizontalScrollIndicator: false, children: items.map((item) => (_jsx(BannerCard, { item: item }, item.id))) })] }));
+export function PromoBanner(t0) {
+  const $ = _c(11);
+  const {
+    items,
+    title
+  } = t0;
+  const theme = useTheme();
+  let t1;
+  if ($[0] !== theme || $[1] !== title) {
+    t1 = title ? _jsx(Typography.Text, {
+      semibold: true,
+      style: {
+        color: theme.text.secondary,
+        marginBottom: 10,
+        paddingHorizontal: 16
+      },
+      variant: "caption",
+      children: title.toUpperCase()
+    }) : null;
+    $[0] = theme;
+    $[1] = title;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {
+      paddingHorizontal: 16,
+      paddingVertical: 2
+    };
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== items) {
+    t3 = items.map(_temp);
+    $[4] = items;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t3) {
+    t4 = _jsx(ScrollView, {
+      contentContainerStyle: t2,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      children: t3
+    });
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== t1 || $[9] !== t4) {
+    t5 = _jsxs(View, {
+      children: [t1, t4]
+    });
+    $[8] = t1;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  return t5;
+}
+function _temp(item) {
+  return _jsx(BannerCard, {
+    item: item
+  }, item.id);
 }

package/dist/widgets/PromoModal.d.ts

@@ -22,8 +22,8 @@ export interface PromoModalProps {
     accentColor?: string;
 }
 /**
- * Bottom-anchored modal for news, promotions, or announcements.
- * Tapping outside (backdrop) also dismisses it.
+ * Full-screen modal with a centered card for news, promotions, or announcements.
+ * Tapping outside (backdrop) also dismisses it. The card scrolls when it does not fit.
  *
  * Usage:
  *   <PromoModal