@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/widgets/PromoModal.js

@@ -1,14 +1,15 @@
-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, SCRIM } from "../theme/on-dark-surface.js";
 import { Typography } from "../Typography/index.js";
 import { useReducedMotion } from "../utils/useReducedMotion.js";
-import { Modal, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+import { Modal, ScrollView, StyleSheet, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 /**
- * 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
@@ -23,61 +24,387 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
  *     onPressCta={handleExplore}
  *   />
  */
-export function PromoModal({ visible, onDismiss, title, body, icon: Icon, headerGradient, ctaLabel, onPressCta, dismissLabel = "Ahora no", badge, accentColor, }) {
-    const theme = useTheme();
-    const reducedMotion = useReducedMotion();
-    const insets = useSafeAreaInsets();
-    const accent = accentColor ?? theme.accent;
-    return (_jsxs(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: onDismiss, presentationStyle: "overFullScreen", statusBarTranslucent: true, transparent: true, visible: visible, children: [_jsx(TouchableWithoutFeedback, { onPress: onDismiss, children: _jsx(View, { style: {
-                        flex: 1,
-                        backgroundColor: "rgba(0,0,0,0.55)",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        paddingHorizontal: 24,
-                        paddingVertical: insets.top + 16,
-                    } }) }), _jsx(KeyboardAwareScrollView, { bottomOffset: 24, contentContainerStyle: {
-                    flexGrow: 1,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    paddingLeft: insets.left + 24,
-                    paddingRight: insets.right + 24,
-                    paddingTop: insets.top + 16,
-                    paddingBottom: insets.bottom + 16,
-                }, keyboardShouldPersistTaps: "handled", pointerEvents: "box-none", style: {
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                }, children: _jsxs(View, { style: {
-                        backgroundColor: theme.bg.card,
-                        borderRadius: 28,
-                        borderWidth: 1,
-                        borderColor: theme.border.default,
-                        width: "100%",
-                        maxWidth: 400,
-                        overflow: "hidden",
-                    }, children: [headerGradient || Icon ? (_jsxs(View, { style: { height: 120, justifyContent: "center", alignItems: "center" }, children: [headerGradient ? (_jsx(GradientSurface, { colors: headerGradient, padding: "none", radius: "none", style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } })) : null, Icon ? (_jsx(View, { style: {
-                                        width: 64,
-                                        height: 64,
-                                        borderRadius: 20,
-                                        backgroundColor: "rgba(255,255,255,0.18)",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                    }, children: _jsx(Icon, { color: "#FFFFFF", size: 32 }) })) : null] })) : null, _jsxs(View, { style: { paddingHorizontal: 24, paddingTop: 12, paddingBottom: 8 }, children: [badge ? (_jsx(View, { style: {
-                                        alignSelf: "flex-start",
-                                        backgroundColor: accent,
-                                        borderRadius: 999,
-                                        paddingHorizontal: 12,
-                                        paddingVertical: 4,
-                                        marginBottom: 12,
-                                    }, children: _jsx(Typography.Text, { semibold: true, style: { color: theme.text.onAccent, fontSize: 11 }, variant: "caption", children: badge }) })) : null, _jsx(Typography.Text, { semibold: true, style: { color: theme.text.primary }, variant: "h3", children: title }), body ? (_jsx(Typography.Text, { style: { color: theme.text.secondary, marginTop: 8, lineHeight: 22 }, variant: "body", children: body })) : null] }), _jsxs(View, { style: { paddingHorizontal: 24, paddingTop: 16, gap: 10 }, children: [ctaLabel ? (_jsx(TouchableOpacity, { activeOpacity: 0.8, onPress: () => {
-                                        onPressCta?.();
-                                        onDismiss();
-                                    }, style: {
-                                        backgroundColor: accent,
-                                        borderRadius: 14,
-                                        paddingVertical: 15,
-                                        alignItems: "center",
-                                    }, children: _jsx(Typography.Text, { semibold: true, style: { color: theme.text.onAccent }, variant: "body", children: ctaLabel }) })) : null, _jsx(TouchableOpacity, { activeOpacity: 0.7, onPress: onDismiss, style: { alignItems: "center", paddingVertical: 12 }, children: _jsx(Typography.Text, { style: { color: theme.text.secondary }, variant: "body", children: dismissLabel }) })] })] }) })] }));
+export function PromoModal(t0) {
+  const $ = _c(67);
+  const {
+    visible,
+    onDismiss,
+    title,
+    body,
+    icon: Icon,
+    headerGradient,
+    ctaLabel,
+    onPressCta,
+    dismissLabel: t1,
+    badge,
+    accentColor
+  } = t0;
+  const dismissLabel = t1 === undefined ? "Ahora no" : t1;
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const insets = useSafeAreaInsets();
+  const accent = accentColor ?? theme.accent;
+  const t2 = reducedMotion ? "none" : "fade";
+  const t3 = insets.top + 16;
+  let t4;
+  if ($[0] !== t3) {
+    t4 = _jsx(View, {
+      style: {
+        flex: 1,
+        backgroundColor: SCRIM,
+        alignItems: "center",
+        justifyContent: "center",
+        paddingHorizontal: 24,
+        paddingVertical: t3
+      }
+    });
+    $[0] = t3;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  let t5;
+  if ($[2] !== dismissLabel || $[3] !== onDismiss || $[4] !== t4) {
+    t5 = _jsx(TouchableWithoutFeedback, {
+      accessibilityLabel: dismissLabel,
+      accessibilityRole: "button",
+      onPress: onDismiss,
+      children: t4
+    });
+    $[2] = dismissLabel;
+    $[3] = onDismiss;
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const t6 = insets.left + 24;
+  const t7 = insets.right + 24;
+  const t8 = insets.top + 16;
+  const t9 = insets.bottom + 16;
+  let t10;
+  if ($[6] !== t6 || $[7] !== t7 || $[8] !== t8 || $[9] !== t9) {
+    t10 = {
+      flexGrow: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      paddingLeft: t6,
+      paddingRight: t7,
+      paddingTop: t8,
+      paddingBottom: t9
+    };
+    $[6] = t6;
+    $[7] = t7;
+    $[8] = t8;
+    $[9] = t9;
+    $[10] = t10;
+  } else {
+    t10 = $[10];
+  }
+  let t11;
+  if ($[11] !== theme.bg.card || $[12] !== theme.border.default) {
+    t11 = {
+      backgroundColor: theme.bg.card,
+      borderRadius: 24,
+      borderWidth: 1,
+      borderColor: theme.border.default,
+      width: "100%",
+      maxWidth: 400,
+      overflow: "hidden"
+    };
+    $[11] = theme.bg.card;
+    $[12] = theme.border.default;
+    $[13] = t11;
+  } else {
+    t11 = $[13];
+  }
+  let t12;
+  if ($[14] !== Icon || $[15] !== headerGradient) {
+    t12 = headerGradient || Icon ? _jsxs(View, {
+      style: {
+        height: 120,
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: [headerGradient ? _jsx(GradientSurface, {
+        colors: headerGradient,
+        padding: "none",
+        radius: "none",
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        }
+      }) : null, Icon ? _jsx(View, {
+        style: {
+          width: 64,
+          height: 64,
+          borderRadius: 16,
+          backgroundColor: ON_DARK_SURFACE.glass,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: _jsx(Icon, {
+          color: ON_DARK_SURFACE.ink,
+          size: 32
+        })
+      }) : null]
+    }) : null;
+    $[14] = Icon;
+    $[15] = headerGradient;
+    $[16] = t12;
+  } else {
+    t12 = $[16];
+  }
+  let t13;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = {
+      paddingHorizontal: 24,
+      paddingTop: 12,
+      paddingBottom: 8
+    };
+    $[17] = t13;
+  } else {
+    t13 = $[17];
+  }
+  let t14;
+  if ($[18] !== accent || $[19] !== badge || $[20] !== theme.text.onAccent) {
+    t14 = badge ? _jsx(View, {
+      style: {
+        alignSelf: "flex-start",
+        backgroundColor: accent,
+        borderRadius: 999,
+        paddingHorizontal: 12,
+        paddingVertical: 4,
+        marginBottom: 12
+      },
+      children: _jsx(Typography.Text, {
+        semibold: true,
+        style: {
+          color: theme.text.onAccent,
+          fontSize: 11
+        },
+        variant: "caption",
+        children: badge
+      })
+    }) : null;
+    $[18] = accent;
+    $[19] = badge;
+    $[20] = theme.text.onAccent;
+    $[21] = t14;
+  } else {
+    t14 = $[21];
+  }
+  let t15;
+  if ($[22] !== theme.text.primary) {
+    t15 = {
+      color: theme.text.primary
+    };
+    $[22] = theme.text.primary;
+    $[23] = t15;
+  } else {
+    t15 = $[23];
+  }
+  let t16;
+  if ($[24] !== t15 || $[25] !== title) {
+    t16 = _jsx(Typography.Text, {
+      semibold: true,
+      style: t15,
+      variant: "h3",
+      children: title
+    });
+    $[24] = t15;
+    $[25] = title;
+    $[26] = t16;
+  } else {
+    t16 = $[26];
+  }
+  let t17;
+  if ($[27] !== body || $[28] !== theme.text.secondary) {
+    t17 = body ? _jsx(Typography.Text, {
+      style: {
+        color: theme.text.secondary,
+        marginTop: 8,
+        lineHeight: 22
+      },
+      variant: "body",
+      children: body
+    }) : null;
+    $[27] = body;
+    $[28] = theme.text.secondary;
+    $[29] = t17;
+  } else {
+    t17 = $[29];
+  }
+  let t18;
+  if ($[30] !== t14 || $[31] !== t16 || $[32] !== t17) {
+    t18 = _jsxs(View, {
+      style: t13,
+      children: [t14, t16, t17]
+    });
+    $[30] = t14;
+    $[31] = t16;
+    $[32] = t17;
+    $[33] = t18;
+  } else {
+    t18 = $[33];
+  }
+  let t19;
+  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
+    t19 = {
+      paddingHorizontal: 24,
+      paddingTop: 16,
+      gap: 10
+    };
+    $[34] = t19;
+  } else {
+    t19 = $[34];
+  }
+  let t20;
+  if ($[35] !== accent || $[36] !== ctaLabel || $[37] !== onDismiss || $[38] !== onPressCta || $[39] !== theme.text.onAccent) {
+    t20 = ctaLabel ? _jsx(TouchableOpacity, {
+      accessibilityRole: "button",
+      activeOpacity: 0.7,
+      onPress: () => {
+        onPressCta?.();
+        onDismiss();
+      },
+      style: {
+        backgroundColor: accent,
+        borderRadius: 8,
+        minHeight: 48,
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: _jsx(Typography.Text, {
+        semibold: true,
+        style: {
+          color: theme.text.onAccent
+        },
+        variant: "body",
+        children: ctaLabel
+      })
+    }) : null;
+    $[35] = accent;
+    $[36] = ctaLabel;
+    $[37] = onDismiss;
+    $[38] = onPressCta;
+    $[39] = theme.text.onAccent;
+    $[40] = t20;
+  } else {
+    t20 = $[40];
+  }
+  let t21;
+  if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+    t21 = {
+      alignItems: "center",
+      justifyContent: "center",
+      minHeight: 48
+    };
+    $[41] = t21;
+  } else {
+    t21 = $[41];
+  }
+  let t22;
+  if ($[42] !== theme.text.secondary) {
+    t22 = {
+      color: theme.text.secondary
+    };
+    $[42] = theme.text.secondary;
+    $[43] = t22;
+  } else {
+    t22 = $[43];
+  }
+  let t23;
+  if ($[44] !== dismissLabel || $[45] !== t22) {
+    t23 = _jsx(Typography.Text, {
+      style: t22,
+      variant: "body",
+      children: dismissLabel
+    });
+    $[44] = dismissLabel;
+    $[45] = t22;
+    $[46] = t23;
+  } else {
+    t23 = $[46];
+  }
+  let t24;
+  if ($[47] !== onDismiss || $[48] !== t23) {
+    t24 = _jsx(TouchableOpacity, {
+      accessibilityRole: "button",
+      activeOpacity: 0.7,
+      onPress: onDismiss,
+      style: t21,
+      children: t23
+    });
+    $[47] = onDismiss;
+    $[48] = t23;
+    $[49] = t24;
+  } else {
+    t24 = $[49];
+  }
+  let t25;
+  if ($[50] !== t20 || $[51] !== t24) {
+    t25 = _jsxs(View, {
+      style: t19,
+      children: [t20, t24]
+    });
+    $[50] = t20;
+    $[51] = t24;
+    $[52] = t25;
+  } else {
+    t25 = $[52];
+  }
+  let t26;
+  if ($[53] !== t11 || $[54] !== t12 || $[55] !== t18 || $[56] !== t25) {
+    t26 = _jsxs(View, {
+      style: t11,
+      children: [t12, t18, t25]
+    });
+    $[53] = t11;
+    $[54] = t12;
+    $[55] = t18;
+    $[56] = t25;
+    $[57] = t26;
+  } else {
+    t26 = $[57];
+  }
+  let t27;
+  if ($[58] !== t10 || $[59] !== t26) {
+    t27 = _jsx(ScrollView, {
+      contentContainerStyle: t10,
+      keyboardShouldPersistTaps: "handled",
+      pointerEvents: "box-none",
+      style: StyleSheet.absoluteFill,
+      children: t26
+    });
+    $[58] = t10;
+    $[59] = t26;
+    $[60] = t27;
+  } else {
+    t27 = $[60];
+  }
+  let t28;
+  if ($[61] !== onDismiss || $[62] !== t2 || $[63] !== t27 || $[64] !== t5 || $[65] !== visible) {
+    t28 = _jsxs(Modal, {
+      animationType: t2,
+      onRequestClose: onDismiss,
+      presentationStyle: "overFullScreen",
+      statusBarTranslucent: true,
+      transparent: true,
+      visible: visible,
+      children: [t5, t27]
+    });
+    $[61] = onDismiss;
+    $[62] = t2;
+    $[63] = t27;
+    $[64] = t5;
+    $[65] = visible;
+    $[66] = t28;
+  } else {
+    t28 = $[66];
+  }
+  return t28;
 }

package/dist/widgets/QueryChoice.js

@@ -1,13 +1,155 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Pressable from "../primitives/Pressable.js";
 import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { View } from "react-native";
-export default function QueryChoice({ label, value, options, onChange, }) {
-    const [open, setOpen] = useState(false);
-    const selected = options.find((option) => option.value === value);
-    return (_jsxs(View, { className: "gap-1", children: [_jsxs(Pressable, { accessibilityLabel: `${label}: ${selected?.label ?? "Seleccionar"}`, accessibilityState: { expanded: open }, className: "rounded-lg border border-input px-3 py-2", onPress: () => setOpen(!open), style: { minHeight: 48, justifyContent: "center" }, children: [_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: label }), _jsxs(Typography.Text, { variant: "bodyReadable", children: [selected?.label ?? "Seleccionar", " ", open ? "−" : "+"] })] }), open ? (_jsx(View, { accessibilityRole: "radiogroup", className: "border-l border-border-default pl-3", children: options.map((option) => (_jsx(Pressable, { accessibilityLabel: option.label, accessibilityRole: "radio", accessibilityState: { checked: option.value === value }, onPress: () => {
-                        onChange(option.value);
-                        setOpen(false);
-                    }, style: { minHeight: 48, justifyContent: "center" }, children: _jsxs(Typography.Text, { className: option.value === value ? "text-text-accent" : "text-text-primary", variant: "bodyReadable", children: [option.value === value ? "✓ " : "", option.label] }) }, String(option.value)))) })) : null] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+export default function QueryChoice(t0) {
+  const $ = _c(29);
+  const {
+    label,
+    value,
+    options,
+    onChange
+  } = t0;
+  const [open, setOpen] = useState(false);
+  let t1;
+  if ($[0] !== options || $[1] !== value) {
+    let t2;
+    if ($[3] !== value) {
+      t2 = option => option.value === value;
+      $[3] = value;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = options.find(t2);
+    $[0] = options;
+    $[1] = value;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const selected = t1;
+  const t2 = `${label}: ${selected?.label ?? "Seleccionar"}`;
+  let t3;
+  if ($[5] !== open) {
+    t3 = {
+      expanded: open
+    };
+    $[5] = open;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== open) {
+    t4 = () => setOpen(!open);
+    $[7] = open;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      minHeight: 48,
+      justifyContent: "center"
+    };
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== label) {
+    t6 = _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      variant: "bodySmall",
+      children: label
+    });
+    $[10] = label;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  const t7 = selected?.label ?? "Seleccionar";
+  const t8 = open ? "\u2212" : "+";
+  let t9;
+  if ($[12] !== t7 || $[13] !== t8) {
+    t9 = _jsxs(Typography.Text, {
+      variant: "body",
+      children: [t7, " ", t8]
+    });
+    $[12] = t7;
+    $[13] = t8;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  let t10;
+  if ($[15] !== t2 || $[16] !== t3 || $[17] !== t4 || $[18] !== t6 || $[19] !== t9) {
+    t10 = _jsxs(Pressable, {
+      accessibilityLabel: t2,
+      accessibilityState: t3,
+      className: "rounded-lg border border-input px-3 py-2",
+      onPress: t4,
+      style: t5,
+      children: [t6, t9]
+    });
+    $[15] = t2;
+    $[16] = t3;
+    $[17] = t4;
+    $[18] = t6;
+    $[19] = t9;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  let t11;
+  if ($[21] !== onChange || $[22] !== open || $[23] !== options || $[24] !== value) {
+    t11 = open ? _jsx(View, {
+      accessibilityRole: "radiogroup",
+      className: "border-l border-border-default pl-3",
+      children: options.map(option_0 => _jsx(Pressable, {
+        accessibilityLabel: option_0.label,
+        accessibilityRole: "radio",
+        accessibilityState: {
+          checked: option_0.value === value
+        },
+        onPress: () => {
+          onChange(option_0.value);
+          setOpen(false);
+        },
+        style: {
+          minHeight: 48,
+          justifyContent: "center"
+        },
+        children: _jsxs(Typography.Text, {
+          className: option_0.value === value ? "text-text-accent" : "text-text-primary",
+          variant: "body",
+          children: [option_0.value === value ? "\u2713 " : "", option_0.label]
+        })
+      }, String(option_0.value)))
+    }) : null;
+    $[21] = onChange;
+    $[22] = open;
+    $[23] = options;
+    $[24] = value;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  let t12;
+  if ($[26] !== t10 || $[27] !== t11) {
+    t12 = _jsxs(View, {
+      className: "gap-1",
+      children: [t10, t11]
+    });
+    $[26] = t10;
+    $[27] = t11;
+    $[28] = t12;
+  } else {
+    t12 = $[28];
+  }
+  return t12;
 }