@sincpro/mobile-ui 3.0.1 → 3.1.0

package/dist/Display/Display.Carousel.js

@@ -1,119 +1,473 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import IconButton from "../Actions/Actions.IconButton.js";
 import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { uniqueKeys } from "../utils/keys.js";
 import { useReducedMotion } from "../utils/useReducedMotion.js";
 import { useEffect, useRef, useState } from "react";
-import { ScrollView, View, } from "react-native";
-function Carousel({ data, renderItem, keyExtractor, itemWidth, gap = 12, showDots = true, className, testID, index: controlledIndex, onIndexChange, previousAccessibilityLabel = "Elemento anterior", nextAccessibilityLabel = "Elemento siguiente", formatPageLabel = (index, count) => `Elemento ${index + 1} de ${count}`, renderControls, controlsClassName, paginationTextProps, contentContainerStyle, itemStyle, dotStyle, activeDotStyle, ...viewProps }) {
-    if (!Number.isFinite(itemWidth) ||
-        itemWidth <= 0 ||
-        !Number.isFinite(gap) ||
-        gap < 0 ||
-        !Number.isFinite(itemWidth + gap))
-        throw new RangeError("Carousel requires a positive finite itemWidth and a non-negative finite gap.");
-    if (controlledIndex !== undefined &&
-        (!Number.isInteger(controlledIndex) || controlledIndex < 0))
-        throw new RangeError("Carousel index must be a non-negative integer.");
-    if (controlledIndex !== undefined && !onIndexChange)
-        throw new Error("Carousel requires onIndexChange when index is controlled.");
-    const keys = uniqueKeys(data, keyExtractor, "Carousel");
-    const theme = useTheme();
-    const reducedMotion = useReducedMotion();
-    const [active, setActive] = useState(0);
-    const [viewportWidth, setViewportWidth] = useState(0);
-    const [scrollRevision, setScrollRevision] = useState(0);
-    const scrollRef = useRef(null);
-    const mounted = useRef(false);
-    const snap = itemWidth + gap;
-    const current = Math.min(controlledIndex ?? active, Math.max(0, data.length - 1));
-    const nativePosition = useRef({ index: 0, snap, count: data.length, width: 0 });
-    if (controlledIndex === undefined && active !== current)
-        setActive(current);
-    useEffect(() => {
-        const previous = nativePosition.current;
-        if (previous.index !== current ||
-            previous.snap !== snap ||
-            previous.width !== viewportWidth) {
-            scrollRef.current?.scrollTo({
-                x: current * snap,
-                y: 0,
-                animated: mounted.current &&
-                    !reducedMotion &&
-                    previous.snap === snap &&
-                    previous.count === data.length &&
-                    previous.width === viewportWidth,
-            });
-        }
-        nativePosition.current = {
-            index: current,
-            snap,
-            count: data.length,
-            width: viewportWidth,
-        };
-        mounted.current = true;
-        if (controlledIndex === undefined &&
-            previous.count > data.length &&
-            previous.index !== current) {
-            onIndexChange?.(current);
-        }
-    }, [
-        active,
-        current,
-        controlledIndex,
-        data.length,
-        onIndexChange,
-        reducedMotion,
+import { ScrollView, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function defaultPageLabel(index, count) {
+  return `Elemento ${index + 1} de ${count}`;
+}
+function Carousel(t0) {
+  const $ = _c(130);
+  let activeDotStyle;
+  let className;
+  let contentContainerStyle;
+  let controlledIndex;
+  let controlsClassName;
+  let data;
+  let dotStyle;
+  let itemStyle;
+  let itemWidth;
+  let keyExtractor;
+  let onIndexChange;
+  let paginationTextProps;
+  let renderControls;
+  let renderItem;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let testID;
+  let viewProps;
+  if ($[0] !== t0) {
+    ({
+      data,
+      renderItem,
+      keyExtractor,
+      itemWidth,
+      gap: t1,
+      showDots: t2,
+      className,
+      testID,
+      index: controlledIndex,
+      onIndexChange,
+      previousAccessibilityLabel: t3,
+      nextAccessibilityLabel: t4,
+      formatPageLabel: t5,
+      renderControls,
+      controlsClassName,
+      paginationTextProps,
+      contentContainerStyle,
+      itemStyle,
+      dotStyle,
+      activeDotStyle,
+      ...viewProps
+    } = t0);
+    $[0] = t0;
+    $[1] = activeDotStyle;
+    $[2] = className;
+    $[3] = contentContainerStyle;
+    $[4] = controlledIndex;
+    $[5] = controlsClassName;
+    $[6] = data;
+    $[7] = dotStyle;
+    $[8] = itemStyle;
+    $[9] = itemWidth;
+    $[10] = keyExtractor;
+    $[11] = onIndexChange;
+    $[12] = paginationTextProps;
+    $[13] = renderControls;
+    $[14] = renderItem;
+    $[15] = t1;
+    $[16] = t2;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
+    $[20] = testID;
+    $[21] = viewProps;
+  } else {
+    activeDotStyle = $[1];
+    className = $[2];
+    contentContainerStyle = $[3];
+    controlledIndex = $[4];
+    controlsClassName = $[5];
+    data = $[6];
+    dotStyle = $[7];
+    itemStyle = $[8];
+    itemWidth = $[9];
+    keyExtractor = $[10];
+    onIndexChange = $[11];
+    paginationTextProps = $[12];
+    renderControls = $[13];
+    renderItem = $[14];
+    t1 = $[15];
+    t2 = $[16];
+    t3 = $[17];
+    t4 = $[18];
+    t5 = $[19];
+    testID = $[20];
+    viewProps = $[21];
+  }
+  const gap = t1 === undefined ? 12 : t1;
+  const showDots = t2 === undefined ? true : t2;
+  const previousAccessibilityLabel = t3 === undefined ? "Elemento anterior" : t3;
+  const nextAccessibilityLabel = t4 === undefined ? "Elemento siguiente" : t4;
+  const formatPageLabel = t5 === undefined ? defaultPageLabel : t5;
+  if (!Number.isFinite(itemWidth) || itemWidth <= 0 || !Number.isFinite(gap) || gap < 0 || !Number.isFinite(itemWidth + gap)) {
+    throw new RangeError("Carousel requires a positive finite itemWidth and a non-negative finite gap.");
+  }
+  if (controlledIndex !== undefined && (!Number.isInteger(controlledIndex) || controlledIndex < 0)) {
+    throw new RangeError("Carousel index must be a non-negative integer.");
+  }
+  if (controlledIndex !== undefined && !onIndexChange) {
+    throw new Error("Carousel requires onIndexChange when index is controlled.");
+  }
+  let t6;
+  if ($[22] !== data || $[23] !== keyExtractor) {
+    t6 = uniqueKeys(data, keyExtractor, "Carousel");
+    $[22] = data;
+    $[23] = keyExtractor;
+    $[24] = t6;
+  } else {
+    t6 = $[24];
+  }
+  const keys = t6;
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const [active, setActive] = useState(0);
+  const [viewportWidth, setViewportWidth] = useState(0);
+  const [scrollRevision, setScrollRevision] = useState(0);
+  const scrollRef = useRef(null);
+  const mounted = useRef(false);
+  const snap = itemWidth + gap;
+  const current = Math.min(controlledIndex ?? active, Math.max(0, data.length - 1));
+  let t7;
+  if ($[25] !== data.length || $[26] !== snap) {
+    t7 = {
+      index: 0,
+      snap,
+      count: data.length,
+      width: 0
+    };
+    $[25] = data.length;
+    $[26] = snap;
+    $[27] = t7;
+  } else {
+    t7 = $[27];
+  }
+  const nativePosition = useRef(t7);
+  if (controlledIndex === undefined && active !== current) {
+    setActive(current);
+  }
+  let t8;
+  if ($[28] !== controlledIndex || $[29] !== current || $[30] !== data.length || $[31] !== onIndexChange || $[32] !== reducedMotion || $[33] !== snap || $[34] !== viewportWidth) {
+    t8 = () => {
+      const previous = nativePosition.current;
+      if (previous.index !== current || previous.snap !== snap || previous.width !== viewportWidth) {
+        scrollRef.current?.scrollTo({
+          x: current * snap,
+          y: 0,
+          animated: mounted.current && !reducedMotion && previous.snap === snap && previous.count === data.length && previous.width === viewportWidth
+        });
+      }
+      nativePosition.current = {
+        index: current,
         snap,
-        viewportWidth,
-        scrollRevision,
-    ]);
-    const changeIndex = (next) => {
-        setActive(next);
-        if (next !== current)
-            onIndexChange?.(next);
+        count: data.length,
+        width: viewportWidth
+      };
+      mounted.current = true;
+      if (controlledIndex === undefined && previous.count > data.length && previous.index !== current) {
+        onIndexChange?.(current);
+      }
     };
-    const goTo = (next) => {
-        if (!Number.isInteger(next) || next < 0 || next >= data.length)
-            throw new RangeError("Carousel goTo requires an index within the current data.");
-        changeIndex(next);
+    $[28] = controlledIndex;
+    $[29] = current;
+    $[30] = data.length;
+    $[31] = onIndexChange;
+    $[32] = reducedMotion;
+    $[33] = snap;
+    $[34] = viewportWidth;
+    $[35] = t8;
+  } else {
+    t8 = $[35];
+  }
+  let t9;
+  if ($[36] !== active || $[37] !== controlledIndex || $[38] !== current || $[39] !== data.length || $[40] !== onIndexChange || $[41] !== reducedMotion || $[42] !== scrollRevision || $[43] !== snap || $[44] !== viewportWidth) {
+    t9 = [active, current, controlledIndex, data.length, onIndexChange, reducedMotion, snap, viewportWidth, scrollRevision];
+    $[36] = active;
+    $[37] = controlledIndex;
+    $[38] = current;
+    $[39] = data.length;
+    $[40] = onIndexChange;
+    $[41] = reducedMotion;
+    $[42] = scrollRevision;
+    $[43] = snap;
+    $[44] = viewportWidth;
+    $[45] = t9;
+  } else {
+    t9 = $[45];
+  }
+  useEffect(t8, t9);
+  let t10;
+  if ($[46] !== current || $[47] !== onIndexChange) {
+    t10 = next => {
+      setActive(next);
+      if (next !== current) {
+        onIndexChange?.(next);
+      }
     };
-    const onScroll = (event) => {
-        const offset = event.nativeEvent.contentOffset.x;
-        if (!Number.isFinite(offset))
-            throw new RangeError("Carousel received a non-finite scroll offset.");
-        const next = Math.max(0, Math.min(Math.round(offset / snap), data.length - 1));
-        nativePosition.current = { index: next, snap, count: data.length, width: viewportWidth };
-        changeIndex(next);
-        if (controlledIndex !== undefined)
-            setScrollRevision((revision) => revision + 1);
+    $[46] = current;
+    $[47] = onIndexChange;
+    $[48] = t10;
+  } else {
+    t10 = $[48];
+  }
+  const changeIndex = t10;
+  let t11;
+  if ($[49] !== changeIndex || $[50] !== data.length) {
+    t11 = next_0 => {
+      if (!Number.isInteger(next_0) || next_0 < 0 || next_0 >= data.length) {
+        throw new RangeError("Carousel goTo requires an index within the current data.");
+      }
+      changeIndex(next_0);
     };
-    const controls = {
-        index: current,
+    $[49] = changeIndex;
+    $[50] = data.length;
+    $[51] = t11;
+  } else {
+    t11 = $[51];
+  }
+  const goTo = t11;
+  let t12;
+  if ($[52] !== changeIndex || $[53] !== controlledIndex || $[54] !== data.length || $[55] !== snap || $[56] !== viewportWidth) {
+    t12 = event => {
+      const offset = event.nativeEvent.contentOffset.x;
+      if (!Number.isFinite(offset)) {
+        throw new RangeError("Carousel received a non-finite scroll offset.");
+      }
+      const next_1 = Math.max(0, Math.min(Math.round(offset / snap), data.length - 1));
+      nativePosition.current = {
+        index: next_1,
+        snap,
         count: data.length,
-        canPrevious: current > 0,
-        canNext: current < data.length - 1,
-        previous: () => {
-            if (current > 0)
-                goTo(current - 1);
-        },
-        next: () => {
-            if (current < data.length - 1)
-                goTo(current + 1);
-        },
-        goTo,
+        width: viewportWidth
+      };
+      changeIndex(next_1);
+      if (controlledIndex !== undefined) {
+        setScrollRevision(_temp);
+      }
+    };
+    $[52] = changeIndex;
+    $[53] = controlledIndex;
+    $[54] = data.length;
+    $[55] = snap;
+    $[56] = viewportWidth;
+    $[57] = t12;
+  } else {
+    t12 = $[57];
+  }
+  const onScroll = t12;
+  const t13 = current > 0;
+  const t14 = current < data.length - 1;
+  let t15;
+  if ($[58] !== current || $[59] !== goTo) {
+    t15 = () => {
+      if (current > 0) {
+        goTo(current - 1);
+      }
+    };
+    $[58] = current;
+    $[59] = goTo;
+    $[60] = t15;
+  } else {
+    t15 = $[60];
+  }
+  let t16;
+  if ($[61] !== current || $[62] !== data.length || $[63] !== goTo) {
+    t16 = () => {
+      if (current < data.length - 1) {
+        goTo(current + 1);
+      }
     };
-    return (_jsxs(View, { ...viewProps, className: className, testID: testID, children: [_jsxs(ScrollView, { contentContainerStyle: contentContainerStyle, decelerationRate: "fast", horizontal: true, onLayout: (event) => setViewportWidth(event.nativeEvent.layout.width), onMomentumScrollEnd: onScroll, ref: scrollRef, showsHorizontalScrollIndicator: false, snapToInterval: snap, testID: testID ? `${testID}-scroll` : undefined, children: [data.map((item, index) => (_jsx(View, { style: [
-                            itemStyle,
-                            { width: itemWidth, marginRight: index < data.length - 1 ? gap : 0 },
-                        ], children: renderItem(item, index) }, keys[index]))), data.length > 0 ? (_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: { width: Math.max(0, viewportWidth - itemWidth) }, testID: testID ? `${testID}-end-spacing` : undefined })) : null] }), showDots && data.length > 1 ? (_jsx(View, { accessibilityElementsHidden: true, className: "flex-row justify-center gap-1.5 mt-3", importantForAccessibility: "no-hide-descendants", children: data.map((_item, index) => (_jsx(View, { className: "h-1.5 rounded-full", style: [
-                        {
-                            width: index === current ? 16 : 6,
-                            backgroundColor: index === current ? theme.primary : theme.border.strong,
-                        },
-                        dotStyle,
-                        index === current ? activeDotStyle : undefined,
-                    ] }, keys[index]))) })) : null, data.length > 1 ? (renderControls ? (renderControls(controls)) : (_jsxs(View, { className: controlsClassName ?? "flex-row items-center justify-center gap-3 mt-2", children: [_jsx(IconButton, { accessibilityLabel: previousAccessibilityLabel, disabled: !controls.canPrevious, icon: "back", onPress: controls.previous }), _jsx(Typography.Text, { ...paginationTextProps, accessibilityLiveRegion: "polite", children: formatPageLabel(current, data.length) }), _jsx(IconButton, { accessibilityLabel: nextAccessibilityLabel, disabled: !controls.canNext, icon: "next", onPress: controls.next })] }))) : null] }));
+    $[61] = current;
+    $[62] = data.length;
+    $[63] = goTo;
+    $[64] = t16;
+  } else {
+    t16 = $[64];
+  }
+  let t17;
+  if ($[65] !== activeDotStyle || $[66] !== className || $[67] !== contentContainerStyle || $[68] !== controlsClassName || $[69] !== current || $[70] !== data || $[71] !== dotStyle || $[72] !== formatPageLabel || $[73] !== gap || $[74] !== goTo || $[75] !== itemStyle || $[76] !== itemWidth || $[77] !== keys || $[78] !== nextAccessibilityLabel || $[79] !== onScroll || $[80] !== paginationTextProps || $[81] !== previousAccessibilityLabel || $[82] !== renderControls || $[83] !== renderItem || $[84] !== showDots || $[85] !== snap || $[86] !== t13 || $[87] !== t14 || $[88] !== t15 || $[89] !== t16 || $[90] !== testID || $[91] !== theme || $[92] !== viewProps || $[93] !== viewportWidth) {
+    const controls = {
+      index: current,
+      count: data.length,
+      canPrevious: t13,
+      canNext: t14,
+      previous: t15,
+      next: t16,
+      goTo
+    };
+    let t18;
+    if ($[95] === Symbol.for("react.memo_cache_sentinel")) {
+      t18 = event_0 => setViewportWidth(event_0.nativeEvent.layout.width);
+      $[95] = t18;
+    } else {
+      t18 = $[95];
+    }
+    const t19 = testID ? `${testID}-scroll` : undefined;
+    let t20;
+    if ($[96] !== data || $[97] !== gap || $[98] !== itemStyle || $[99] !== itemWidth || $[100] !== keys || $[101] !== renderItem) {
+      let t21;
+      if ($[103] !== data.length || $[104] !== gap || $[105] !== itemStyle || $[106] !== itemWidth || $[107] !== keys || $[108] !== renderItem) {
+        t21 = (item, index) => _jsx(View, {
+          style: [itemStyle, {
+            width: itemWidth,
+            marginRight: index < data.length - 1 ? gap : 0
+          }],
+          children: renderItem(item, index)
+        }, keys[index]);
+        $[103] = data.length;
+        $[104] = gap;
+        $[105] = itemStyle;
+        $[106] = itemWidth;
+        $[107] = keys;
+        $[108] = renderItem;
+        $[109] = t21;
+      } else {
+        t21 = $[109];
+      }
+      t20 = data.map(t21);
+      $[96] = data;
+      $[97] = gap;
+      $[98] = itemStyle;
+      $[99] = itemWidth;
+      $[100] = keys;
+      $[101] = renderItem;
+      $[102] = t20;
+    } else {
+      t20 = $[102];
+    }
+    let t21;
+    if ($[110] !== data.length || $[111] !== itemWidth || $[112] !== testID || $[113] !== viewportWidth) {
+      t21 = data.length > 0 ? _jsx(View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        style: {
+          width: Math.max(0, viewportWidth - itemWidth)
+        },
+        testID: testID ? `${testID}-end-spacing` : undefined
+      }) : null;
+      $[110] = data.length;
+      $[111] = itemWidth;
+      $[112] = testID;
+      $[113] = viewportWidth;
+      $[114] = t21;
+    } else {
+      t21 = $[114];
+    }
+    let t22;
+    if ($[115] !== contentContainerStyle || $[116] !== onScroll || $[117] !== snap || $[118] !== t19 || $[119] !== t20 || $[120] !== t21) {
+      t22 = _jsxs(ScrollView, {
+        contentContainerStyle: contentContainerStyle,
+        decelerationRate: "fast",
+        horizontal: true,
+        onLayout: t18,
+        onMomentumScrollEnd: onScroll,
+        ref: scrollRef,
+        showsHorizontalScrollIndicator: false,
+        snapToInterval: snap,
+        testID: t19,
+        children: [t20, t21]
+      });
+      $[115] = contentContainerStyle;
+      $[116] = onScroll;
+      $[117] = snap;
+      $[118] = t19;
+      $[119] = t20;
+      $[120] = t21;
+      $[121] = t22;
+    } else {
+      t22 = $[121];
+    }
+    let t23;
+    if ($[122] !== activeDotStyle || $[123] !== current || $[124] !== data || $[125] !== dotStyle || $[126] !== keys || $[127] !== showDots || $[128] !== theme) {
+      t23 = showDots && data.length > 1 ? _jsx(View, {
+        accessibilityElementsHidden: true,
+        className: "flex-row justify-center gap-1.5 mt-3",
+        importantForAccessibility: "no-hide-descendants",
+        children: data.map((_item, index_0) => _jsx(View, {
+          className: "h-1.5 rounded-full",
+          style: [{
+            width: index_0 === current ? 16 : 6,
+            backgroundColor: index_0 === current ? theme.primary : theme.border.strong
+          }, dotStyle, index_0 === current ? activeDotStyle : undefined]
+        }, keys[index_0]))
+      }) : null;
+      $[122] = activeDotStyle;
+      $[123] = current;
+      $[124] = data;
+      $[125] = dotStyle;
+      $[126] = keys;
+      $[127] = showDots;
+      $[128] = theme;
+      $[129] = t23;
+    } else {
+      t23 = $[129];
+    }
+    t17 = _jsxs(View, {
+      ...viewProps,
+      className: className,
+      testID: testID,
+      children: [t22, t23, data.length > 1 ? renderControls ? renderControls(controls) : _jsxs(View, {
+        className: controlsClassName ?? "flex-row items-center justify-center gap-3 mt-2",
+        children: [_jsx(IconButton, {
+          accessibilityLabel: previousAccessibilityLabel,
+          disabled: !controls.canPrevious,
+          icon: "back",
+          onPress: controls.previous
+        }), _jsx(Typography.Text, {
+          ...paginationTextProps,
+          accessibilityLiveRegion: "polite",
+          children: formatPageLabel(current, data.length)
+        }), _jsx(IconButton, {
+          accessibilityLabel: nextAccessibilityLabel,
+          disabled: !controls.canNext,
+          icon: "next",
+          onPress: controls.next
+        })]
+      }) : null]
+    });
+    $[65] = activeDotStyle;
+    $[66] = className;
+    $[67] = contentContainerStyle;
+    $[68] = controlsClassName;
+    $[69] = current;
+    $[70] = data;
+    $[71] = dotStyle;
+    $[72] = formatPageLabel;
+    $[73] = gap;
+    $[74] = goTo;
+    $[75] = itemStyle;
+    $[76] = itemWidth;
+    $[77] = keys;
+    $[78] = nextAccessibilityLabel;
+    $[79] = onScroll;
+    $[80] = paginationTextProps;
+    $[81] = previousAccessibilityLabel;
+    $[82] = renderControls;
+    $[83] = renderItem;
+    $[84] = showDots;
+    $[85] = snap;
+    $[86] = t13;
+    $[87] = t14;
+    $[88] = t15;
+    $[89] = t16;
+    $[90] = testID;
+    $[91] = theme;
+    $[92] = viewProps;
+    $[93] = viewportWidth;
+    $[94] = t17;
+  } else {
+    t17 = $[94];
+  }
+  return t17;
+}
+function _temp(revision) {
+  return revision + 1;
 }
 export default Carousel;

package/dist/Display/Display.Chip.d.ts

@@ -1,4 +1,5 @@
 import { type VariantProps } from "../theme/tw.js";
+import type { typographyVariants } from "../theme/typography.js";
 declare const chip: import("tailwind-variants").TVReturnType<{
     tone: {
         neutral: {
@@ -99,7 +100,9 @@ export interface ChipProps extends VariantProps<typeof chip> {
     onRemove?: () => void;
     className?: string;
     testID?: string;
+    /** Typography variant of the label. Defaults to the shared pill metrics (12/16). */
+    textVariant?: keyof typeof typographyVariants;
 }
-declare function Chip({ label, tone, selected, onPress, onRemove, className, testID, }: ChipProps): import("react").JSX.Element;
+declare function Chip({ label, tone, selected, onPress, onRemove, className, testID, textVariant, }: ChipProps): import("react").JSX.Element;
 export default Chip;
 export { Chip };