@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/Navigation/Navigation.Menu.js

@@ -1,107 +1,321 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { MenuView } from "@expo/ui/community/menu";
 import Icon from "../Display/Display.Icon.js";
 import { ICON_MAP } from "../Display/icon-map.js";
 import { relativeLuminance, useTheme } from "../theme/index.js";
 import { unstable_getMaterialSymbolSourceAsync } from "expo-symbols";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { ActivityIndicator, Alert, Platform, View, } from "react-native";
-function Menu({ items, trigger, title, disabled = false, accessibilityLabel = "Más opciones", style, testID, }) {
-    const theme = useTheme();
-    const running = useRef(false);
-    const [pending, setPending] = useState(false);
-    const blocked = disabled || pending || !items.some((entry) => !("separator" in entry));
-    const [sources, setSources] = useState(() => new Map());
-    const requests = useMemo(() => items.flatMap((entry) => "separator" in entry || !entry.icon
-        ? []
-        : [
-            {
-                icon: entry.icon,
-                color: entry.destructive ? theme.danger : theme.icon.secondary,
-            },
-        ]), [items, theme.danger, theme.icon.secondary]);
-    useEffect(() => {
-        if (Platform.OS !== "android" || !requests.length)
-            return;
-        let active = true;
-        void Promise.all(requests.map(async ({ icon, color }) => ({
-            key: `${icon}:${color}`,
-            source: await unstable_getMaterialSymbolSourceAsync(ICON_MAP[icon].md, 24, color),
-        }))).then((results) => {
-            if (!active)
-                return;
-            const next = new Map();
-            for (const { key, source } of results) {
-                if (source)
-                    next.set(key, source);
-            }
-            setSources(next);
-        }, (cause) => {
-            console.error("[Navigation.Menu] Could not render native icons", cause);
-        });
-        return () => {
-            active = false;
-        };
-    }, [requests]);
+import { ActivityIndicator, Alert, Platform, View } from "react-native";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+const iconSources = new Map();
+
+/** One native rasterization per icon and color for the whole app. */
+function menuIconSource(icon, color) {
+  const key = `${icon}:${color}`;
+  let source = iconSources.get(key);
+  if (!source) {
+    source = unstable_getMaterialSymbolSourceAsync(ICON_MAP[icon].md, 24, color).catch(cause => {
+      iconSources.delete(key);
+      throw cause;
+    });
+    iconSources.set(key, source);
+  }
+  return source;
+}
+function Menu(t0) {
+  const $ = _c(52);
+  const {
+    items,
+    trigger,
+    title,
+    disabled: t1,
+    accessibilityLabel: t2,
+    style,
+    testID
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  const accessibilityLabel = t2 === undefined ? "M\xE1s opciones" : t2;
+  const theme = useTheme();
+  const running = useRef(false);
+  const [pending, setPending] = useState(false);
+  let t3;
+  if ($[0] !== disabled || $[1] !== items || $[2] !== pending) {
+    t3 = disabled || pending || !items.some(_temp);
+    $[0] = disabled;
+    $[1] = items;
+    $[2] = pending;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const blocked = t3;
+  const [sources, setSources] = useState(_temp2);
+  let t4;
+  if ($[4] !== items || $[5] !== theme.danger || $[6] !== theme.icon.secondary) {
+    let t5;
+    if ($[8] !== theme.danger || $[9] !== theme.icon.secondary) {
+      t5 = entry_0 => "separator" in entry_0 || !entry_0.icon ? [] : [{
+        icon: entry_0.icon,
+        color: entry_0.destructive ? theme.danger : theme.icon.secondary
+      }];
+      $[8] = theme.danger;
+      $[9] = theme.icon.secondary;
+      $[10] = t5;
+    } else {
+      t5 = $[10];
+    }
+    t4 = items.flatMap(t5);
+    $[4] = items;
+    $[5] = theme.danger;
+    $[6] = theme.icon.secondary;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const requests = t4;
+  let t5;
+  let t6;
+  if ($[11] !== requests) {
+    t5 = () => {
+      if (Platform.OS !== "android" || !requests.length) {
+        return;
+      }
+      let active = true;
+      Promise.all(requests.map(_temp3)).then(results => {
+        if (!active) {
+          return;
+        }
+        const next = new Map();
+        for (const {
+          key,
+          source
+        } of results) {
+          if (source) {
+            next.set(key, source);
+          }
+        }
+        setSources(next);
+      }, _temp4);
+      return () => {
+        active = false;
+      };
+    };
+    t6 = [requests];
+    $[11] = requests;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t5 = $[12];
+    t6 = $[13];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[14] !== blocked || $[15] !== items || $[16] !== sources || $[17] !== theme.danger || $[18] !== theme.icon.secondary || $[19] !== theme.text) {
     const groups = [[]];
-    items.forEach((entry, index) => {
-        if ("separator" in entry) {
-            if (groups[groups.length - 1].length)
-                groups.push([]);
-            return;
+    items.forEach((entry_1, index) => {
+      if ("separator" in entry_1) {
+        if (groups[groups.length - 1].length) {
+          groups.push([]);
+        }
+        return;
+      }
+      const color_0 = entry_1.disabled ? theme.text.disabled : entry_1.destructive ? theme.danger : theme.text.primary;
+      const imageColor = entry_1.destructive ? theme.danger : theme.icon.secondary;
+      groups[groups.length - 1].push({
+        id: String(index),
+        title: entry_1.label,
+        titleColor: color_0,
+        image: entry_1.icon ? Platform.OS === "ios" ? ICON_MAP[entry_1.icon].sf : sources.get(`${entry_1.icon}:${imageColor}`) : undefined,
+        imageColor,
+        attributes: {
+          disabled: blocked || entry_1.disabled,
+          destructive: entry_1.destructive
         }
-        const color = entry.disabled
-            ? theme.text.disabled
-            : entry.destructive
-                ? theme.danger
-                : theme.text.primary;
-        const imageColor = entry.destructive ? theme.danger : theme.icon.secondary;
-        groups[groups.length - 1].push({
-            id: String(index),
-            title: entry.label,
-            titleColor: color,
-            image: entry.icon
-                ? Platform.OS === "ios"
-                    ? ICON_MAP[entry.icon].sf
-                    : sources.get(`${entry.icon}:${imageColor}`)
-                : undefined,
-            imageColor,
-            attributes: { disabled: blocked || entry.disabled, destructive: entry.destructive },
-        });
+      });
+    });
+    const sections = groups.filter(_temp5);
+    t7 = sections.length > 1 ? sections.map(_temp6) : sections[0] ?? [];
+    $[14] = blocked;
+    $[15] = items;
+    $[16] = sources;
+    $[17] = theme.danger;
+    $[18] = theme.icon.secondary;
+    $[19] = theme.text;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  const actions = t7;
+  const t8 = blocked ? "none" : "auto";
+  const t9 = relativeLuminance(theme.bg.card) < 0.179 ? "dark" : "light";
+  let t10;
+  if ($[21] !== blocked || $[22] !== items) {
+    t10 = t11 => {
+      const {
+        nativeEvent
+      } = t11;
+      const entry_2 = items.find((_, index_1) => String(index_1) === nativeEvent.event);
+      if (!entry_2 || "separator" in entry_2 || blocked || entry_2.disabled || running.current) {
+        return;
+      }
+      running.current = true;
+      setPending(true);
+      Promise.resolve().then(() => entry_2.onPress()).catch(_temp7).finally(() => {
+        running.current = false;
+        setPending(false);
+      });
+    };
+    $[21] = blocked;
+    $[22] = items;
+    $[23] = t10;
+  } else {
+    t10 = $[23];
+  }
+  let t11;
+  if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = {
+      minWidth: 48,
+      minHeight: 48
+    };
+    $[24] = t11;
+  } else {
+    t11 = $[24];
+  }
+  const t12 = testID ? `${testID}-native-menu` : undefined;
+  let t13;
+  if ($[25] !== blocked || $[26] !== pending) {
+    t13 = {
+      disabled: blocked,
+      busy: pending
+    };
+    $[25] = blocked;
+    $[26] = pending;
+    $[27] = t13;
+  } else {
+    t13 = $[27];
+  }
+  const t14 = blocked ? 0.5 : 1;
+  let t15;
+  if ($[28] !== t14) {
+    t15 = {
+      minWidth: 48,
+      minHeight: 48,
+      alignItems: "center",
+      justifyContent: "center",
+      opacity: t14
+    };
+    $[28] = t14;
+    $[29] = t15;
+  } else {
+    t15 = $[29];
+  }
+  let t16;
+  if ($[30] !== pending || $[31] !== theme.icon.secondary || $[32] !== theme.primary || $[33] !== trigger) {
+    t16 = pending ? _jsx(ActivityIndicator, {
+      color: theme.primary
+    }) : trigger ?? _jsx(Icon, {
+      color: theme.icon.secondary,
+      name: "more-vertical",
+      size: 22
+    });
+    $[30] = pending;
+    $[31] = theme.icon.secondary;
+    $[32] = theme.primary;
+    $[33] = trigger;
+    $[34] = t16;
+  } else {
+    t16 = $[34];
+  }
+  let t17;
+  if ($[35] !== accessibilityLabel || $[36] !== t13 || $[37] !== t15 || $[38] !== t16) {
+    t17 = _jsx(View, {
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: "button",
+      accessibilityState: t13,
+      accessible: true,
+      pointerEvents: "none",
+      style: t15,
+      children: t16
     });
-    const sections = groups.filter((group) => group.length > 0);
-    const actions = sections.length > 1
-        ? sections.map((subactions, index) => ({
-            id: `section-${index}`,
-            title: "",
-            displayInline: true,
-            subactions,
-        }))
-        : (sections[0] ?? []);
-    return (_jsx(View, { pointerEvents: blocked ? "none" : "auto", style: style, testID: testID, children: _jsx(MenuView, { actions: actions, colorScheme: relativeLuminance(theme.bg.card) < 0.179 ? "dark" : "light", onPressAction: ({ nativeEvent }) => {
-                const entry = items.find((_, index) => String(index) === nativeEvent.event);
-                if (!entry || "separator" in entry || blocked || entry.disabled || running.current)
-                    return;
-                running.current = true;
-                setPending(true);
-                void Promise.resolve()
-                    .then(() => entry.onPress())
-                    .catch((cause) => {
-                    Alert.alert("No se pudo completar la acción", cause instanceof Error && cause.message.trim()
-                        ? cause.message
-                        : "Vuelve a intentarlo.");
-                })
-                    .finally(() => {
-                    running.current = false;
-                    setPending(false);
-                });
-            }, style: { minWidth: 48, minHeight: 48 }, testID: testID ? `${testID}-native-menu` : undefined, title: title, children: _jsx(View, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", accessibilityState: { disabled: blocked, busy: pending }, accessible: true, pointerEvents: "none", style: {
-                    minWidth: 48,
-                    minHeight: 48,
-                    alignItems: "center",
-                    justifyContent: "center",
-                    opacity: blocked ? 0.5 : 1,
-                }, children: pending ? (_jsx(ActivityIndicator, { color: theme.primary })) : ((trigger ?? _jsx(Icon, { color: theme.icon.secondary, name: "more-vertical", size: 22 }))) }) }) }));
+    $[35] = accessibilityLabel;
+    $[36] = t13;
+    $[37] = t15;
+    $[38] = t16;
+    $[39] = t17;
+  } else {
+    t17 = $[39];
+  }
+  let t18;
+  if ($[40] !== actions || $[41] !== t10 || $[42] !== t12 || $[43] !== t17 || $[44] !== t9 || $[45] !== title) {
+    t18 = _jsx(MenuView, {
+      actions: actions,
+      colorScheme: t9,
+      onPressAction: t10,
+      style: t11,
+      testID: t12,
+      title: title,
+      children: t17
+    });
+    $[40] = actions;
+    $[41] = t10;
+    $[42] = t12;
+    $[43] = t17;
+    $[44] = t9;
+    $[45] = title;
+    $[46] = t18;
+  } else {
+    t18 = $[46];
+  }
+  let t19;
+  if ($[47] !== style || $[48] !== t18 || $[49] !== t8 || $[50] !== testID) {
+    t19 = _jsx(View, {
+      pointerEvents: t8,
+      style: style,
+      testID: testID,
+      children: t18
+    });
+    $[47] = style;
+    $[48] = t18;
+    $[49] = t8;
+    $[50] = testID;
+    $[51] = t19;
+  } else {
+    t19 = $[51];
+  }
+  return t19;
+}
+function _temp7(cause_0) {
+  Alert.alert("No se pudo completar la acci\xF3n", cause_0 instanceof Error && cause_0.message.trim() ? cause_0.message : "Vuelve a intentarlo.");
+}
+function _temp6(subactions, index_0) {
+  return {
+    id: `section-${index_0}`,
+    title: "",
+    displayInline: true,
+    subactions
+  };
+}
+function _temp5(group) {
+  return group.length > 0;
+}
+function _temp4(cause) {
+  console.error("[Navigation.Menu] Could not render native icons", cause);
+}
+async function _temp3(t0) {
+  const {
+    icon,
+    color
+  } = t0;
+  return {
+    key: `${icon}:${color}`,
+    source: await menuIconSource(icon, color)
+  };
+}
+function _temp2() {
+  return new Map();
+}
+function _temp(entry) {
+  return !("separator" in entry);
 }
 export default Menu;
 export { Menu };

package/dist/Navigation/Navigation.MenuSection.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import Card from "../Display/Display.Card.js";
+import { GroupTitle } from "../Display/group-title.js";
 import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 /**
  * Titled card that groups `Display.MenuButton` rows into a visual section.
  * Mirrors iOS grouped-table-view style: title above, card surface, optional footer note.
@@ -12,14 +15,80 @@ import { View } from "react-native";
  *     <Display.MenuButton label="Ajustes" icon={SettingsIcon} onPress={...} showDivider={false} />
  *   </MenuSection>
  */
-export function MenuSection({ title, footer, children }) {
-    const theme = useTheme();
-    return (_jsxs(View, { style: { marginHorizontal: 16, marginBottom: 20 }, children: [title ? (_jsx(Typography.Text, { semibold: true, style: { color: theme.text.secondary, marginBottom: 6, paddingHorizontal: 4 }, variant: "caption", children: title.toUpperCase() })) : null, _jsx(View, { style: {
-                    backgroundColor: theme.bg.card,
-                    borderRadius: 14,
-                    borderWidth: 1,
-                    borderColor: theme.border.default,
-                    overflow: "hidden",
-                    ...theme.shadow.sm,
-                }, children: children }), footer ? (_jsx(Typography.Text, { style: { color: theme.text.tertiary, marginTop: 6, paddingHorizontal: 4 }, variant: "caption", children: footer })) : null] }));
+export function MenuSection(t0) {
+  const $ = _c(12);
+  const {
+    title,
+    footer,
+    children
+  } = t0;
+  const theme = useTheme();
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      marginHorizontal: 16,
+      marginBottom: 20
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== title) {
+    t2 = title ? _jsx(GroupTitle, {
+      style: {
+        marginBottom: 6,
+        paddingHorizontal: 4
+      },
+      children: title
+    }) : null;
+    $[1] = title;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== children) {
+    t3 = _jsx(Card, {
+      className: "overflow-hidden",
+      elevation: "sm",
+      padding: "none",
+      children: children
+    });
+    $[3] = children;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== footer || $[6] !== theme) {
+    t4 = footer ? _jsx(Typography.Text, {
+      style: {
+        color: theme.text.tertiary,
+        marginTop: 6,
+        paddingHorizontal: 4
+      },
+      variant: "caption",
+      children: footer
+    }) : null;
+    $[5] = footer;
+    $[6] = theme;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== t2 || $[9] !== t3 || $[10] !== t4) {
+    t5 = _jsxs(View, {
+      style: t1,
+      children: [t2, t3, t4]
+    });
+    $[8] = t2;
+    $[9] = t3;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  return t5;
 }

package/dist/Navigation/Navigation.RowItem.d.ts

@@ -1,5 +1,7 @@
 import { IRowItemProps } from "../views/types/IListView.js";
-declare function RowItem({ item, className, onPress, readonly, }: IRowItemProps<any> & {
+/** The default row of `ListViewV2.Content`: the same row as `ListViewV2.Content.Row`. */
+declare function RowItem({ item, className, onPress: onPressProp, readonly: readonlyProp, }: IRowItemProps<any> & {
     className?: string;
 }): import("react").JSX.Element;
-export default RowItem;
+declare const _default: import("react").MemoExoticComponent<typeof RowItem>;
+export default _default;

package/dist/Navigation/Navigation.RowItem.js

@@ -1,11 +1,96 @@
-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 { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { TouchableOpacity, View } from "react-native";
-function RowItem({ item, className, onPress = item.onPress, readonly = item.readonly, }) {
-    function rowContent() {
-        return (_jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { className: "flex-1", variant: "title", children: item.rowTitle }), _jsx(Typography.Text, { className: "mt-0.5 text-text-secondary", variant: "bodySmall", children: item.rowSubtitle })] }));
-    }
-    return readonly ? (_jsx(View, { className: cn("flex-row items-center py-2.5", className), children: rowContent() })) : (_jsx(TouchableOpacity, { className: cn("flex-row items-center py-2.5", className), onPress: onPress, children: rowContent() }));
+import { memo } from "react";
+import { View } from "react-native";
+
+/** The default row of `ListViewV2.Content`: the same row as `ListViewV2.Content.Row`. */
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function RowItem(t0) {
+  const $ = _c(15);
+  const {
+    item,
+    className,
+    onPress: onPressProp,
+    readonly: readonlyProp
+  } = t0;
+  const onPress = onPressProp === undefined ? item.onPress : onPressProp;
+  const readonly = readonlyProp === undefined ? item.readonly : readonlyProp;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cn("flex-row items-center py-3 px-4 bg-bg-card border-b border-border-default", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== item.rowTitle) {
+    t2 = _jsx(Typography.Text, {
+      numberOfLines: 1,
+      semibold: true,
+      variant: "body",
+      children: item.rowTitle
+    });
+    $[2] = item.rowTitle;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== item.rowSubtitle) {
+    t3 = item.rowSubtitle ? _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      variant: "bodySmall",
+      children: item.rowSubtitle
+    }) : null;
+    $[4] = item.rowSubtitle;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t2 || $[7] !== t3) {
+    t4 = _jsxs(View, {
+      className: "flex-1 gap-0.5",
+      children: [t2, t3]
+    });
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== t1 || $[10] !== t4) {
+    t5 = _jsx(View, {
+      className: t1,
+      children: t4
+    });
+    $[9] = t1;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const content = t5;
+  if (readonly) {
+    return content;
+  }
+  let t6;
+  if ($[12] !== content || $[13] !== onPress) {
+    t6 = _jsx(Pressable, {
+      hitSlop: 0,
+      onPress: onPress,
+      children: content
+    });
+    $[12] = content;
+    $[13] = onPress;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  return t6;
 }
-export default RowItem;
+export default memo(RowItem);