@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Display/Display.ProductCard.js

@@ -1,13 +1,163 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import DisplayImage from "./Display.Image.js";
 import PriceTag from "./Display.PriceTag.js";
 import Rating from "./Display.Rating.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function ProductCard({ title, image, price, originalPrice, currency, subtitle, rating, badge, onPress, className, testID, }) {
-    return (_jsxs(Pressable, { accessibilityLabel: title, className: cn("bg-bg-card rounded-xl overflow-hidden border border-border-light", className), onPress: onPress, style: theme.shadow.sm, testID: testID, children: [_jsxs(View, { children: [_jsx(DisplayImage, { aspectRatio: 1, radius: 0, source: image }), badge ? _jsx(View, { className: "absolute top-2 left-2", children: badge }) : null] }), _jsxs(View, { className: "p-3 gap-1", children: [_jsx(Typography.Text, { className: "text-text-primary", numberOfLines: 1, semibold: true, variant: "body", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, variant: "bodySmall", children: subtitle })) : null, typeof rating === "number" ? _jsx(Rating, { readOnly: true, size: 14, value: rating }) : null, _jsx(View, { className: "mt-1", children: _jsx(PriceTag, { amount: price, currency: currency, originalAmount: originalPrice, size: "sm" }) })] })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function ProductCard(t0) {
+  const $ = _c(32);
+  const {
+    title,
+    image,
+    price,
+    originalPrice,
+    currency,
+    subtitle,
+    rating,
+    badge,
+    onPress,
+    className,
+    testID
+  } = t0;
+  const theme = useTheme();
+  let t1;
+  if ($[0] !== className) {
+    t1 = cn("bg-bg-card rounded-xl overflow-hidden border border-border-light", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== image) {
+    t2 = _jsx(DisplayImage, {
+      aspectRatio: 1,
+      radius: 0,
+      source: image
+    });
+    $[2] = image;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== badge) {
+    t3 = badge ? _jsx(View, {
+      className: "absolute top-2 left-2",
+      children: badge
+    }) : null;
+    $[4] = badge;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== t2 || $[7] !== t3) {
+    t4 = _jsxs(View, {
+      children: [t2, t3]
+    });
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== title) {
+    t5 = _jsx(Typography.Text, {
+      className: "text-text-primary",
+      numberOfLines: 1,
+      semibold: true,
+      variant: "body",
+      children: title
+    });
+    $[9] = title;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== subtitle) {
+    t6 = subtitle ? _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      numberOfLines: 1,
+      variant: "bodySmall",
+      children: subtitle
+    }) : null;
+    $[11] = subtitle;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== rating) {
+    t7 = typeof rating === "number" ? _jsx(Rating, {
+      readOnly: true,
+      size: 14,
+      value: rating
+    }) : null;
+    $[13] = rating;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== currency || $[16] !== originalPrice || $[17] !== price) {
+    t8 = _jsx(View, {
+      className: "mt-1",
+      children: _jsx(PriceTag, {
+        amount: price,
+        currency: currency,
+        originalAmount: originalPrice,
+        size: "sm"
+      })
+    });
+    $[15] = currency;
+    $[16] = originalPrice;
+    $[17] = price;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== t5 || $[20] !== t6 || $[21] !== t7 || $[22] !== t8) {
+    t9 = _jsxs(View, {
+      className: "p-3 gap-1",
+      children: [t5, t6, t7, t8]
+    });
+    $[19] = t5;
+    $[20] = t6;
+    $[21] = t7;
+    $[22] = t8;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  let t10;
+  if ($[24] !== onPress || $[25] !== t1 || $[26] !== t4 || $[27] !== t9 || $[28] !== testID || $[29] !== theme.shadow.sm || $[30] !== title) {
+    t10 = _jsxs(Pressable, {
+      accessibilityLabel: title,
+      className: t1,
+      onPress: onPress,
+      style: theme.shadow.sm,
+      testID: testID,
+      children: [t4, t9]
+    });
+    $[24] = onPress;
+    $[25] = t1;
+    $[26] = t4;
+    $[27] = t9;
+    $[28] = testID;
+    $[29] = theme.shadow.sm;
+    $[30] = title;
+    $[31] = t10;
+  } else {
+    t10 = $[31];
+  }
+  return t10;
 }
 export default ProductCard;

package/dist/Display/Display.Rating.js

@@ -1,16 +1,97 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Icon from "./Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { View } from "react-native";
-function Rating({ value, max = 5, size = 24, onChange, readOnly = false, className, testID, }) {
-    const interactive = !readOnly && !!onChange;
-    return (_jsx(View, { accessibilityLabel: `Calificación ${value} de ${max}`, accessibilityRole: interactive ? "adjustable" : "image", className: className, style: { flexDirection: "row", gap: 4 }, testID: testID, children: Array.from({ length: max }).map((_, index) => {
-            const filled = index < Math.round(value);
-            const star = (_jsx(Icon, { color: filled ? theme.warning : theme.icon.disabled, name: filled ? "rating" : "rating-empty", size: size }));
-            if (!interactive)
-                return _jsx(View, { children: star }, index);
-            return (_jsx(Pressable, { accessibilityLabel: `${index + 1} estrellas`, hitSlop: 6, onPress: () => onChange?.(index + 1), children: star }, index));
-        }) }));
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+function Rating(t0) {
+  const $ = _c(16);
+  const {
+    value,
+    max: t1,
+    size: t2,
+    onChange,
+    readOnly: t3,
+    className,
+    testID
+  } = t0;
+  const max = t1 === undefined ? 5 : t1;
+  const size = t2 === undefined ? 24 : t2;
+  const readOnly = t3 === undefined ? false : t3;
+  const theme = useTheme();
+  const interactive = !readOnly && !!onChange;
+  const t4 = `Calificación ${value} de ${max}`;
+  const t5 = interactive ? "adjustable" : "image";
+  let t6;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      flexDirection: "row",
+      gap: 4
+    };
+    $[0] = t6;
+  } else {
+    t6 = $[0];
+  }
+  let t7;
+  if ($[1] !== max) {
+    t7 = Array.from({
+      length: max
+    });
+    $[1] = max;
+    $[2] = t7;
+  } else {
+    t7 = $[2];
+  }
+  let t8;
+  if ($[3] !== interactive || $[4] !== onChange || $[5] !== size || $[6] !== t7 || $[7] !== theme || $[8] !== value) {
+    t8 = t7.map((_, index) => {
+      const filled = index < Math.round(value);
+      const star = _jsx(Icon, {
+        color: filled ? theme.warning : theme.icon.disabled,
+        name: filled ? "rating" : "rating-empty",
+        size: size
+      });
+      if (!interactive) {
+        return _jsx(View, {
+          children: star
+        }, index);
+      }
+      return _jsx(Pressable, {
+        accessibilityLabel: `${index + 1} estrellas`,
+        hitSlop: 6,
+        onPress: () => onChange?.(index + 1),
+        children: star
+      }, index);
+    });
+    $[3] = interactive;
+    $[4] = onChange;
+    $[5] = size;
+    $[6] = t7;
+    $[7] = theme;
+    $[8] = value;
+    $[9] = t8;
+  } else {
+    t8 = $[9];
+  }
+  let t9;
+  if ($[10] !== className || $[11] !== t4 || $[12] !== t5 || $[13] !== t8 || $[14] !== testID) {
+    t9 = _jsx(View, {
+      accessibilityLabel: t4,
+      accessibilityRole: t5,
+      className: className,
+      style: t6,
+      testID: testID,
+      children: t8
+    });
+    $[10] = className;
+    $[11] = t4;
+    $[12] = t5;
+    $[13] = t8;
+    $[14] = testID;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  return t9;
 }
 export default Rating;

package/dist/Display/Display.SearchHistory.js

@@ -1,13 +1,139 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import Icon from "./Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function SearchHistory({ items, onSelect, onRemove, onClearAll, title = "Búsquedas recientes", icon = "time", className, testID, }) {
-    if (items.length === 0)
-        return null;
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [_jsxs(View, { className: "flex-row items-center justify-between px-4 py-1", children: [_jsx(Typography.Text, { className: "text-text-secondary", semibold: true, variant: "bodySmall", children: title }), onClearAll ? (_jsx(Pressable, { accessibilityLabel: "Borrar todo", hitSlop: 8, onPress: onClearAll, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Borrar todo" }) })) : null] }), items.map((value) => (_jsxs(Pressable, { accessibilityLabel: value, className: "flex-row items-center gap-3 px-4 py-2.5", onPress: () => onSelect(value), children: [_jsx(Icon, { color: theme.icon.tertiary, name: icon, size: 18 }), _jsx(Typography.Text, { className: "flex-1 text-text-primary", numberOfLines: 1, children: value }), _jsx(Pressable, { accessibilityLabel: `Quitar ${value}`, hitSlop: 10, onPress: () => onRemove(value), children: _jsx(Icon, { color: theme.icon.tertiary, name: "close", size: 16 }) })] }, value)))] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function SearchHistory(t0) {
+  const $ = _c(25);
+  const {
+    items,
+    onSelect,
+    onRemove,
+    onClearAll,
+    title: t1,
+    icon: t2,
+    className,
+    testID
+  } = t0;
+  const title = t1 === undefined ? "B\xFAsquedas recientes" : t1;
+  const icon = t2 === undefined ? "time" : t2;
+  const theme = useTheme();
+  if (items.length === 0) {
+    return null;
+  }
+  let t3;
+  if ($[0] !== className) {
+    t3 = cn("gap-1", className);
+    $[0] = className;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  let t4;
+  if ($[2] !== title) {
+    t4 = _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      semibold: true,
+      variant: "bodySmall",
+      children: title
+    });
+    $[2] = title;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  let t5;
+  if ($[4] !== onClearAll) {
+    t5 = onClearAll ? _jsx(Pressable, {
+      accessibilityLabel: "Borrar todo",
+      hitSlop: 8,
+      onPress: onClearAll,
+      children: _jsx(Typography.Text, {
+        className: "text-text-accent",
+        variant: "bodySmall",
+        children: "Borrar todo"
+      })
+    }) : null;
+    $[4] = onClearAll;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== t4 || $[7] !== t5) {
+    t6 = _jsxs(View, {
+      className: "flex-row items-center justify-between px-4 py-1",
+      children: [t4, t5]
+    });
+    $[6] = t4;
+    $[7] = t5;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== icon || $[10] !== items || $[11] !== onRemove || $[12] !== onSelect || $[13] !== theme) {
+    let t8;
+    if ($[15] !== icon || $[16] !== onRemove || $[17] !== onSelect || $[18] !== theme) {
+      t8 = value => _jsxs(Pressable, {
+        accessibilityLabel: value,
+        className: "flex-row items-center gap-3 px-4 py-2.5",
+        onPress: () => onSelect(value),
+        children: [_jsx(Icon, {
+          color: theme.icon.tertiary,
+          name: icon,
+          size: 18
+        }), _jsx(Typography.Text, {
+          className: "flex-1 text-text-primary",
+          numberOfLines: 1,
+          children: value
+        }), _jsx(Pressable, {
+          accessibilityLabel: `Quitar ${value}`,
+          hitSlop: 10,
+          onPress: () => onRemove(value),
+          children: _jsx(Icon, {
+            color: theme.icon.tertiary,
+            name: "close",
+            size: 16
+          })
+        })]
+      }, value);
+      $[15] = icon;
+      $[16] = onRemove;
+      $[17] = onSelect;
+      $[18] = theme;
+      $[19] = t8;
+    } else {
+      t8 = $[19];
+    }
+    t7 = items.map(t8);
+    $[9] = icon;
+    $[10] = items;
+    $[11] = onRemove;
+    $[12] = onSelect;
+    $[13] = theme;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[20] !== t3 || $[21] !== t6 || $[22] !== t7 || $[23] !== testID) {
+    t8 = _jsxs(View, {
+      className: t3,
+      testID: testID,
+      children: [t6, t7]
+    });
+    $[20] = t3;
+    $[21] = t6;
+    $[22] = t7;
+    $[23] = testID;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  return t8;
 }
 export default SearchHistory;

package/dist/Display/Display.SectionHeader.d.ts

@@ -11,7 +11,11 @@ export interface SectionHeaderProps {
     action?: SectionHeaderAction;
     className?: string;
     testID?: string;
-    variant?: "default" | "mobile";
+    /**
+     * `default`/`mobile`: section heading (subtitle, semibold). `group`: the uppercase caption
+     * that titles a group of rows, the same as `MenuSection`.
+     */
+    variant?: "default" | "mobile" | "group";
     titleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children" | "accessibilityRole">;
     subtitleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children">;
     style?: StyleProp<ViewStyle>;

package/dist/Display/Display.SectionHeader.js

@@ -1,18 +1,131 @@
-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 { View } from "react-native";
-function SectionHeader({ title, subtitle, action, className, testID, variant = "default", titleTextProps, subtitleTextProps, style, contentStyle, actionStyle, actionTextProps, }) {
-    return (_jsxs(View, { className: cn("flex-row items-center justify-between px-4 py-2", className), style: style, testID: testID, children: [_jsxs(View, { className: "flex-1", style: contentStyle, children: [_jsx(Typography.Text, { accessibilityRole: "header", className: "text-text-primary", semibold: true, variant: variant === "mobile" ? "bodyReadable" : "subtitle", ...titleTextProps, children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: variant === "mobile" ? "bodyLarge" : "bodySmall", ...subtitleTextProps, children: subtitle })) : null] }), action ? (_jsx(Pressable, { accessibilityLabel: action.label, accessibilityRole: "button", hitSlop: 8, onPress: action.onPress, style: [
-                    {
-                        minHeight: 48,
-                        minWidth: 48,
-                        justifyContent: "center",
-                        marginLeft: 12,
-                        flexShrink: 1,
-                    },
-                    actionStyle,
-                ], children: _jsx(Typography.Text, { className: "text-text-accent text-sm font-semibold", ...actionTextProps, children: action.label }) })) : null] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function SectionHeader(t0) {
+  const $ = _c(25);
+  const {
+    title,
+    subtitle,
+    action,
+    className,
+    testID,
+    variant: t1,
+    titleTextProps,
+    subtitleTextProps,
+    style,
+    contentStyle,
+    actionStyle,
+    actionTextProps
+  } = t0;
+  const variant = t1 === undefined ? "default" : t1;
+  const group = variant === "group";
+  let t2;
+  if ($[0] !== className) {
+    t2 = cn("flex-row items-center justify-between px-4 py-2", className);
+    $[0] = className;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const t3 = group ? "text-text-secondary" : "text-text-primary";
+  const t4 = group ? "uppercase" : "none";
+  const t5 = group ? "caption" : "subtitle";
+  let t6;
+  if ($[2] !== t3 || $[3] !== t4 || $[4] !== t5 || $[5] !== title || $[6] !== titleTextProps) {
+    t6 = _jsx(Typography.Text, {
+      accessibilityRole: "header",
+      className: t3,
+      semibold: true,
+      transform: t4,
+      variant: t5,
+      ...titleTextProps,
+      children: title
+    });
+    $[2] = t3;
+    $[3] = t4;
+    $[4] = t5;
+    $[5] = title;
+    $[6] = titleTextProps;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] !== subtitle || $[9] !== subtitleTextProps) {
+    t7 = subtitle ? _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      variant: "bodySmall",
+      ...subtitleTextProps,
+      children: subtitle
+    }) : null;
+    $[8] = subtitle;
+    $[9] = subtitleTextProps;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== contentStyle || $[12] !== t6 || $[13] !== t7) {
+    t8 = _jsxs(View, {
+      className: "flex-1",
+      style: contentStyle,
+      children: [t6, t7]
+    });
+    $[11] = contentStyle;
+    $[12] = t6;
+    $[13] = t7;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== action || $[16] !== actionStyle || $[17] !== actionTextProps) {
+    t9 = action ? _jsx(Pressable, {
+      accessibilityLabel: action.label,
+      accessibilityRole: "button",
+      hitSlop: 8,
+      onPress: action.onPress,
+      style: [{
+        minHeight: 48,
+        minWidth: 48,
+        justifyContent: "center",
+        marginLeft: 12,
+        flexShrink: 1
+      }, actionStyle],
+      children: _jsx(Typography.Text, {
+        className: "text-text-accent",
+        variant: "button",
+        ...actionTextProps,
+        children: action.label
+      })
+    }) : null;
+    $[15] = action;
+    $[16] = actionStyle;
+    $[17] = actionTextProps;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== style || $[20] !== t2 || $[21] !== t8 || $[22] !== t9 || $[23] !== testID) {
+    t10 = _jsxs(View, {
+      className: t2,
+      style: style,
+      testID: testID,
+      children: [t8, t9]
+    });
+    $[19] = style;
+    $[20] = t2;
+    $[21] = t8;
+    $[22] = t9;
+    $[23] = testID;
+    $[24] = t10;
+  } else {
+    t10 = $[24];
+  }
+  return t10;
 }
 export default SectionHeader;

package/dist/Display/Display.Stat.js

@@ -1,9 +1,68 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function Stat({ value, label, align = "center", className, testID }) {
-    return (_jsxs(View, { className: cn(align === "center" ? "items-center" : "items-start", className), testID: testID, children: [_jsx(Typography.Text, { className: "text-text-primary", variant: "dataLarge", children: value }), _jsx(Typography.Text, { className: "text-text-secondary", variant: "caption", children: label })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function Stat(t0) {
+  const $ = _c(12);
+  const {
+    value,
+    label,
+    align: t1,
+    className,
+    testID
+  } = t0;
+  const align = t1 === undefined ? "center" : t1;
+  const t2 = align === "center" ? "items-center" : "items-start";
+  let t3;
+  if ($[0] !== className || $[1] !== t2) {
+    t3 = cn(t2, className);
+    $[0] = className;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  let t4;
+  if ($[3] !== value) {
+    t4 = _jsx(Typography.Text, {
+      className: "text-text-primary",
+      variant: "dataLarge",
+      children: value
+    });
+    $[3] = value;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== label) {
+    t5 = _jsx(Typography.Text, {
+      className: "text-text-secondary",
+      variant: "caption",
+      children: label
+    });
+    $[5] = label;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[7] !== t3 || $[8] !== t4 || $[9] !== t5 || $[10] !== testID) {
+    t6 = _jsxs(View, {
+      className: t3,
+      testID: testID,
+      children: [t4, t5]
+    });
+    $[7] = t3;
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = testID;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  return t6;
 }
 export default Stat;
 export { Stat };