@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/Display/Display.MenuButton.js

@@ -1,116 +1,402 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
+import { Chevron } from "./chevron.js";
+import { CountBadge } from "./count-badge.js";
+import Badge from "./Display.Badge.js";
 import SwipeableRow from "./Display.SwipeableRow.js";
 import Spinner from "../Feedback/Feedback.Spinner.js";
 import { useTheme } from "../theme/index.js";
 import { tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { Switch, TouchableOpacity, View } from "react-native";
-function BadgeChip({ badge }) {
-    const theme = useTheme();
-    if (badge === "active") {
-        return (_jsxs(View, { style: {
-                flexDirection: "row",
-                alignItems: "center",
-                gap: 4,
-                backgroundColor: theme.container.success,
-                paddingHorizontal: 8,
-                paddingVertical: 3,
-                borderRadius: 999,
-            }, children: [_jsx(View, { style: { width: 6, height: 6, borderRadius: 999, backgroundColor: theme.success } }), _jsx(Typography.Text, { semibold: true, style: { color: theme.success, fontSize: 11 }, variant: "caption", children: "Activo" })] }));
-    }
-    if (badge === "inactive") {
-        return (_jsxs(View, { style: {
-                flexDirection: "row",
-                alignItems: "center",
-                gap: 4,
-                backgroundColor: theme.container.warning,
-                paddingHorizontal: 8,
-                paddingVertical: 3,
-                borderRadius: 999,
-            }, children: [_jsx(View, { style: { width: 6, height: 6, borderRadius: 999, backgroundColor: theme.warning } }), _jsx(Typography.Text, { semibold: true, style: { color: theme.warning, fontSize: 11 }, variant: "caption", children: "Inactivo" })] }));
+
+// ─── Swipe actions ────────────────────────────────────────────────────────────
+// Re-export SwipeRowAction shape under a MenuButton-friendly alias so callers
+// don't need to know about SwipeableRow.
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+// ─── Badge ───────────────────────────────────────────────────────────────────
+
+const BADGE_LABELS = {
+  active: "Activo",
+  inactive: "Inactivo",
+  new: "Nuevo"
+};
+function badgeLabel(badge) {
+  return BADGE_LABELS[String(badge)] ?? String(badge);
+}
+
+/**
+ * Inline status/count badge on the right of the row.
+ * Presets: `"active"` (success badge), `"inactive"` (warning badge), `"new"` (accent badge).
+ * Any other string / number renders the DS count badge.
+ */
+
+const BADGE_PRESETS = {
+  active: "success",
+  inactive: "warning",
+  new: "accent"
+};
+function BadgeChip(t0) {
+  const $ = _c(7);
+  const {
+    badge
+  } = t0;
+  const preset = BADGE_PRESETS[String(badge)];
+  if (preset) {
+    let t1;
+    if ($[0] !== badge) {
+      t1 = badgeLabel(badge);
+      $[0] = badge;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
     }
-    if (badge === "new") {
-        return (_jsx(View, { style: {
-                backgroundColor: theme.accent,
-                paddingHorizontal: 8,
-                paddingVertical: 3,
-                borderRadius: 999,
-            }, children: _jsx(Typography.Text, { semibold: true, style: { color: theme.text.onAccent, fontSize: 11 }, variant: "caption", children: "Nuevo" }) }));
+    let t2;
+    if ($[2] !== preset || $[3] !== t1) {
+      t2 = _jsx(Badge, {
+        label: t1,
+        variant: preset
+      });
+      $[2] = preset;
+      $[3] = t1;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
     }
-    return (_jsx(View, { style: {
-            backgroundColor: theme.danger,
-            minWidth: 20,
-            height: 20,
-            borderRadius: 999,
-            alignItems: "center",
-            justifyContent: "center",
-            paddingHorizontal: 6,
-        }, children: _jsx(Typography.Text, { style: { color: "#FFFFFF", fontSize: 11, lineHeight: 14 }, variant: "caption", children: badge }) }));
+    return t2;
+  }
+  let t1;
+  if ($[5] !== badge) {
+    t1 = _jsx(CountBadge, {
+      count: badge
+    });
+    $[5] = badge;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  return t1;
 }
+
 // ─── Tailwind slots ───────────────────────────────────────────────────────────
+
 const menuButton = tv({
-    slots: {
-        container: "flex-row items-center py-3 px-4 bg-bg-card",
-        iconContainer: "mr-3 w-8 h-8 rounded-lg items-center justify-center",
-        content: "flex-1",
-        label: "",
-        rightContainer: "ml-2 flex-row items-center gap-2",
+  slots: {
+    container: "flex-row items-center py-3 px-4 bg-bg-card",
+    iconContainer: "mr-3 w-8 h-8 rounded-lg items-center justify-center",
+    content: "flex-1",
+    label: "",
+    rightContainer: "ml-2 flex-row items-center gap-2"
+  },
+  variants: {
+    variant: {
+      default: {
+        iconContainer: "bg-bg-hover",
+        label: "text-text-primary"
+      },
+      danger: {
+        iconContainer: "bg-container-danger",
+        label: "text-danger"
+      },
+      success: {
+        iconContainer: "bg-container-success",
+        label: "text-success"
+      }
     },
-    variants: {
-        variant: {
-            default: {
-                iconContainer: "bg-bg-hover",
-                label: "text-text-primary",
-            },
-            danger: {
-                iconContainer: "bg-container-danger",
-                label: "text-danger",
-            },
-            success: {
-                iconContainer: "bg-container-success",
-                label: "text-success",
-            },
-        },
-        showDivider: {
-            true: { container: "border-b border-border-default" },
-        },
-        disabled: {
-            true: { container: "opacity-40" },
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-        showDivider: true,
-        disabled: false,
+    showDivider: {
+      true: {
+        container: "border-b border-border-default"
+      }
     },
+    disabled: {
+      true: {
+        container: "opacity-40"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    showDivider: true,
+    disabled: false
+  }
 });
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
 // ─── Component ───────────────────────────────────────────────────────────────
-function MenuButton({ icon: IconComp, label, description, onPress, rightComponent, showDivider = true, variant = "default", disabled = false, className, toggle, value, badge, loading = false, swipeActions, swipeLeftActions, }) {
-    const theme = useTheme();
-    const styles = menuButton({ variant, showDivider, disabled });
+
+function MenuButton(t0) {
+  const $ = _c(61);
+  const {
+    icon: IconComp,
+    label,
+    description,
+    onPress,
+    rightComponent,
+    showDivider: t1,
+    variant: t2,
+    disabled: t3,
+    className,
+    toggle,
+    value,
+    badge,
+    loading: t4,
+    swipeActions,
+    swipeLeftActions
+  } = t0;
+  const showDivider = t1 === undefined ? true : t1;
+  const variant = t2 === undefined ? "default" : t2;
+  const disabled = t3 === undefined ? false : t3;
+  const loading = t4 === undefined ? false : t4;
+  const theme = useTheme();
+  let t5;
+  if ($[0] !== IconComp || $[1] !== badge || $[2] !== className || $[3] !== description || $[4] !== disabled || $[5] !== label || $[6] !== loading || $[7] !== onPress || $[8] !== rightComponent || $[9] !== showDivider || $[10] !== theme.bg || $[11] !== theme.border || $[12] !== theme.danger || $[13] !== theme.primary || $[14] !== theme.text || $[15] !== toggle || $[16] !== value || $[17] !== variant) {
+    const styles = menuButton({
+      variant,
+      showDivider,
+      disabled
+    });
     const isDanger = variant === "danger";
     const isClickable = !!onPress && !disabled;
     const iconColor = isDanger ? theme.danger : theme.text.secondary;
-    // Right-side priority: loading > explicit slot > toggle > badge/value/chevron
-    const rightSlot = (() => {
-        if (loading)
-            return _jsx(Spinner, { size: "small" });
-        if (rightComponent)
-            return rightComponent;
-        if (toggle) {
-            return (_jsx(Switch, { onValueChange: toggle.onToggle, thumbColor: theme.bg.card, trackColor: { false: theme.border.strong, true: theme.primary }, value: toggle.value }));
+    let t6;
+    bb0: {
+      if (loading) {
+        let t7;
+        if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+          t7 = _jsx(Spinner, {
+            size: "small"
+          });
+          $[19] = t7;
+        } else {
+          t7 = $[19];
+        }
+        t6 = t7;
+        break bb0;
+      }
+      if (rightComponent) {
+        t6 = rightComponent;
+        break bb0;
+      }
+      if (toggle) {
+        let t7;
+        if ($[20] !== theme.border.strong || $[21] !== theme.primary) {
+          t7 = {
+            false: theme.border.strong,
+            true: theme.primary
+          };
+          $[20] = theme.border.strong;
+          $[21] = theme.primary;
+          $[22] = t7;
+        } else {
+          t7 = $[22];
         }
-        const hasBadge = badge != null;
-        const hasValue = !!value;
-        const hasChevron = isClickable && !hasBadge;
-        if (!hasBadge && !hasValue && !hasChevron)
-            return null;
-        return (_jsxs(View, { style: { flexDirection: "row", alignItems: "center", gap: 6 }, children: [hasBadge ? _jsx(BadgeChip, { badge: badge }) : null, hasValue ? (_jsx(Typography.Text, { style: { color: theme.text.secondary }, variant: "bodySmall", children: value })) : null, isClickable ? (_jsx(Typography.Text, { style: { color: theme.text.tertiary, fontSize: 20 }, children: "\u203A" })) : null] }));
-    })();
-    const row = (_jsxs(TouchableOpacity, { activeOpacity: 0.5, className: styles.container({ className }), disabled: disabled || (!onPress && !toggle), onPress: onPress, children: [IconComp ? (_jsx(View, { className: styles.iconContainer(), children: _jsx(IconComp, { color: iconColor, size: 20 }) })) : null, _jsxs(View, { className: styles.content(), children: [_jsx(Typography.Text, { className: styles.label(), variant: "body", children: label }), description ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: description })) : null] }), rightSlot ? _jsx(View, { className: styles.rightContainer(), children: rightSlot }) : null] }));
-    if (swipeActions?.length || swipeLeftActions?.length) {
-        return (_jsx(SwipeableRow, { leftActions: swipeLeftActions, rightActions: swipeActions, children: row }));
+        let t8;
+        if ($[23] !== description || $[24] !== label || $[25] !== t7 || $[26] !== theme.bg.card || $[27] !== toggle.onToggle || $[28] !== toggle.value) {
+          t8 = _jsx(Switch, {
+            accessibilityHint: description,
+            accessibilityLabel: label,
+            onValueChange: toggle.onToggle,
+            thumbColor: theme.bg.card,
+            trackColor: t7,
+            value: toggle.value
+          });
+          $[23] = description;
+          $[24] = label;
+          $[25] = t7;
+          $[26] = theme.bg.card;
+          $[27] = toggle.onToggle;
+          $[28] = toggle.value;
+          $[29] = t8;
+        } else {
+          t8 = $[29];
+        }
+        t6 = t8;
+        break bb0;
+      }
+      const hasBadge = badge != null;
+      const hasValue = !!value;
+      const hasChevron = isClickable && !hasBadge;
+      if (!hasBadge && !hasValue && !hasChevron) {
+        t6 = null;
+        break bb0;
+      }
+      let t7;
+      if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
+        t7 = {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 6
+        };
+        $[30] = t7;
+      } else {
+        t7 = $[30];
+      }
+      let t8;
+      if ($[31] !== badge || $[32] !== hasBadge) {
+        t8 = hasBadge ? _jsx(BadgeChip, {
+          badge: badge
+        }) : null;
+        $[31] = badge;
+        $[32] = hasBadge;
+        $[33] = t8;
+      } else {
+        t8 = $[33];
+      }
+      let t9;
+      if ($[34] !== hasValue || $[35] !== theme.text || $[36] !== value) {
+        t9 = hasValue ? _jsx(Typography.Text, {
+          style: {
+            color: theme.text.secondary
+          },
+          variant: "bodySmall",
+          children: value
+        }) : null;
+        $[34] = hasValue;
+        $[35] = theme.text;
+        $[36] = value;
+        $[37] = t9;
+      } else {
+        t9 = $[37];
+      }
+      let t10;
+      if ($[38] !== isClickable) {
+        t10 = isClickable ? _jsx(Chevron, {}) : null;
+        $[38] = isClickable;
+        $[39] = t10;
+      } else {
+        t10 = $[39];
+      }
+      let t11;
+      if ($[40] !== t10 || $[41] !== t8 || $[42] !== t9) {
+        t11 = _jsxs(View, {
+          style: t7,
+          children: [t8, t9, t10]
+        });
+        $[40] = t10;
+        $[41] = t8;
+        $[42] = t9;
+        $[43] = t11;
+      } else {
+        t11 = $[43];
+      }
+      t6 = t11;
+    }
+    const rightSlot = t6;
+    const announcesAsButton = !!onPress && !toggle;
+    let t7;
+    if ($[44] !== badge) {
+      t7 = badge != null ? badgeLabel(badge) : null;
+      $[44] = badge;
+      $[45] = t7;
+    } else {
+      t7 = $[45];
+    }
+    let t8;
+    if ($[46] !== description || $[47] !== label || $[48] !== t7 || $[49] !== value) {
+      t8 = [label, description, value, t7].filter(Boolean);
+      $[46] = description;
+      $[47] = label;
+      $[48] = t7;
+      $[49] = value;
+      $[50] = t8;
+    } else {
+      t8 = $[50];
+    }
+    const announced = t8.join(", ");
+    let t9;
+    if ($[51] !== announcesAsButton || $[52] !== disabled || $[53] !== loading) {
+      t9 = announcesAsButton ? {
+        disabled,
+        busy: loading
+      } : undefined;
+      $[51] = announcesAsButton;
+      $[52] = disabled;
+      $[53] = loading;
+      $[54] = t9;
+    } else {
+      t9 = $[54];
+    }
+    let t10;
+    if ($[55] !== description) {
+      t10 = description ? _jsx(Typography.Text, {
+        className: "text-text-secondary",
+        variant: "bodySmall",
+        children: description
+      }) : null;
+      $[55] = description;
+      $[56] = t10;
+    } else {
+      t10 = $[56];
+    }
+    t5 = _jsxs(TouchableOpacity, {
+      accessibilityLabel: announcesAsButton ? announced : undefined,
+      accessibilityRole: announcesAsButton ? "button" : undefined,
+      accessibilityState: t9,
+      accessible: announcesAsButton,
+      activeOpacity: 0.5,
+      className: styles.container({
+        className
+      }),
+      disabled: disabled || !onPress && !toggle,
+      onPress: onPress,
+      children: [IconComp ? _jsx(View, {
+        className: styles.iconContainer(),
+        children: _jsx(IconComp, {
+          color: iconColor,
+          size: 20
+        })
+      }) : null, _jsxs(View, {
+        className: styles.content(),
+        children: [_jsx(Typography.Text, {
+          className: styles.label(),
+          variant: "body",
+          children: label
+        }), t10]
+      }), rightSlot ? _jsx(View, {
+        className: styles.rightContainer(),
+        children: rightSlot
+      }) : null]
+    });
+    $[0] = IconComp;
+    $[1] = badge;
+    $[2] = className;
+    $[3] = description;
+    $[4] = disabled;
+    $[5] = label;
+    $[6] = loading;
+    $[7] = onPress;
+    $[8] = rightComponent;
+    $[9] = showDivider;
+    $[10] = theme.bg;
+    $[11] = theme.border;
+    $[12] = theme.danger;
+    $[13] = theme.primary;
+    $[14] = theme.text;
+    $[15] = toggle;
+    $[16] = value;
+    $[17] = variant;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  const row = t5;
+  if (swipeActions?.length || swipeLeftActions?.length) {
+    let t6;
+    if ($[57] !== row || $[58] !== swipeActions || $[59] !== swipeLeftActions) {
+      t6 = _jsx(SwipeableRow, {
+        leftActions: swipeLeftActions,
+        rightActions: swipeActions,
+        children: row
+      });
+      $[57] = row;
+      $[58] = swipeActions;
+      $[59] = swipeLeftActions;
+      $[60] = t6;
+    } else {
+      t6 = $[60];
     }
-    return row;
+    return t6;
+  }
+  return row;
 }
 export default MenuButton;

package/dist/Display/Display.MenuCard.js

@@ -1,24 +1,128 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import CircleButton from "./Display.CircleButton.js";
 import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
-export function MenuCard({ title, onPress, icon, size = "md" }) {
-    const theme = useTheme();
-    const isSmall = size === "sm";
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, onPress: onPress, style: {
-            backgroundColor: theme.bg.card,
-            borderRadius: 16,
-            padding: isSmall ? 12 : 16,
-            margin: isSmall ? 4 : 8,
-            width: isSmall ? "30%" : "45%",
-            borderWidth: 1,
-            borderColor: theme.border.default,
-            ...theme.shadow.sm,
-        }, children: _jsxs(View, { style: { alignItems: "center", justifyContent: "center" }, children: [_jsx(CircleButton, { icon: icon, size: isSmall ? "sm" : "md" }), _jsx(Typography.Text, { numberOfLines: 2, style: {
-                        color: theme.text.primary,
-                        marginTop: isSmall ? 8 : 12,
-                        textAlign: "center",
-                    }, variant: isSmall ? "caption" : "label", children: title })] }) }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+export function MenuCard(t0) {
+  const $ = _c(26);
+  const {
+    title,
+    onPress,
+    icon,
+    size: t1
+  } = t0;
+  const size = t1 === undefined ? "md" : t1;
+  const theme = useTheme();
+  const isSmall = size === "sm";
+  const t2 = isSmall ? 12 : 16;
+  const t3 = isSmall ? 4 : 8;
+  const t4 = isSmall ? "30%" : "45%";
+  let t5;
+  if ($[0] !== t2 || $[1] !== t3 || $[2] !== t4 || $[3] !== theme.bg.card || $[4] !== theme.border.default || $[5] !== theme.shadow.sm) {
+    t5 = {
+      backgroundColor: theme.bg.card,
+      borderRadius: 16,
+      padding: t2,
+      margin: t3,
+      width: t4,
+      borderWidth: 1,
+      borderColor: theme.border.default,
+      ...theme.shadow.sm
+    };
+    $[0] = t2;
+    $[1] = t3;
+    $[2] = t4;
+    $[3] = theme.bg.card;
+    $[4] = theme.border.default;
+    $[5] = theme.shadow.sm;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  const t7 = isSmall ? "sm" : "md";
+  let t8;
+  if ($[8] !== icon || $[9] !== t7) {
+    t8 = _jsx(CircleButton, {
+      icon: icon,
+      size: t7
+    });
+    $[8] = icon;
+    $[9] = t7;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  const t9 = isSmall ? 8 : 12;
+  let t10;
+  if ($[11] !== t9 || $[12] !== theme.text.primary) {
+    t10 = {
+      color: theme.text.primary,
+      marginTop: t9,
+      textAlign: "center"
+    };
+    $[11] = t9;
+    $[12] = theme.text.primary;
+    $[13] = t10;
+  } else {
+    t10 = $[13];
+  }
+  const t11 = isSmall ? "caption" : "label";
+  let t12;
+  if ($[14] !== t10 || $[15] !== t11 || $[16] !== title) {
+    t12 = _jsx(Typography.Text, {
+      numberOfLines: 2,
+      style: t10,
+      variant: t11,
+      children: title
+    });
+    $[14] = t10;
+    $[15] = t11;
+    $[16] = title;
+    $[17] = t12;
+  } else {
+    t12 = $[17];
+  }
+  let t13;
+  if ($[18] !== t12 || $[19] !== t8) {
+    t13 = _jsxs(View, {
+      style: t6,
+      children: [t8, t12]
+    });
+    $[18] = t12;
+    $[19] = t8;
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  let t14;
+  if ($[21] !== onPress || $[22] !== t13 || $[23] !== t5 || $[24] !== title) {
+    t14 = _jsx(TouchableOpacity, {
+      accessibilityLabel: title,
+      accessibilityRole: "button",
+      activeOpacity: 0.7,
+      onPress: onPress,
+      style: t5,
+      children: t13
+    });
+    $[21] = onPress;
+    $[22] = t13;
+    $[23] = t5;
+    $[24] = title;
+    $[25] = t14;
+  } else {
+    t14 = $[25];
+  }
+  return t14;
 }
 export default MenuCard;