@sincpro/mobile-ui 3.0.0 → 3.1.0

package/dist/Form/Form.PinInput.js

@@ -1,23 +1,158 @@
-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 { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useRef } from "react";
 import { TextInput, View } from "react-native";
-function PinInput({ value, onChange, length = 6, secure = false, autoFocus = false, onComplete, className, testID, }) {
-    const inputRef = useRef(null);
-    const chars = value.split("");
-    const handleChange = (text) => {
-        const next = text.replace(/[^0-9]/g, "").slice(0, length);
-        onChange(next);
-        if (next.length === length)
-            onComplete?.(next);
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function PinInput(t0) {
+  const $ = _c(29);
+  const {
+    value,
+    onChange,
+    length: t1,
+    secure: t2,
+    autoFocus: t3,
+    onComplete,
+    className,
+    testID
+  } = t0;
+  const length = t1 === undefined ? 6 : t1;
+  const secure = t2 === undefined ? false : t2;
+  const autoFocus = t3 === undefined ? false : t3;
+  const theme = useTheme();
+  const inputRef = useRef(null);
+  let t4;
+  if ($[0] !== value) {
+    t4 = value.split("");
+    $[0] = value;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const chars = t4;
+  let t5;
+  if ($[2] !== length || $[3] !== onChange || $[4] !== onComplete) {
+    t5 = text => {
+      const next = text.replace(/[^0-9]/g, "").slice(0, length);
+      onChange(next);
+      if (next.length === length) {
+        onComplete?.(next);
+      }
+    };
+    $[2] = length;
+    $[3] = onChange;
+    $[4] = onComplete;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const handleChange = t5;
+  let t6;
+  if ($[6] !== className) {
+    t6 = cn("flex-row gap-2", className);
+    $[6] = className;
+    $[7] = t6;
+  } else {
+    t6 = $[7];
+  }
+  let t7;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = () => inputRef.current?.focus();
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== length) {
+    t8 = Array.from({
+      length
+    });
+    $[9] = length;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== chars || $[12] !== secure || $[13] !== t8 || $[14] !== theme.border || $[15] !== value.length) {
+    t9 = t8.map((_, index) => {
+      const filled = index < value.length;
+      const active = index === value.length;
+      return _jsx(View, {
+        className: "flex-1 aspect-square max-w-[52px] rounded-lg border bg-bg-card items-center justify-center",
+        style: {
+          borderColor: active ? theme.border.focus : theme.border.default
+        },
+        children: _jsx(Typography.Text, {
+          className: "text-text-primary",
+          variant: "h4",
+          children: filled ? secure ? "\u2022" : chars[index] : ""
+        })
+      }, index);
+    });
+    $[11] = chars;
+    $[12] = secure;
+    $[13] = t8;
+    $[14] = theme.border;
+    $[15] = value.length;
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  let t10;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = {
+      position: "absolute",
+      opacity: 0,
+      width: 1,
+      height: 1
     };
-    return (_jsxs(Pressable, { accessibilityLabel: "C\u00F3digo de verificaci\u00F3n", className: cn("flex-row gap-2", className), onPress: () => inputRef.current?.focus(), testID: testID, children: [Array.from({ length }).map((_, index) => {
-                const filled = index < value.length;
-                const active = index === value.length;
-                return (_jsx(View, { className: "flex-1 aspect-square max-w-[52px] rounded-lg border bg-bg-card items-center justify-center", style: { borderColor: active ? theme.border.focus : theme.border.default }, children: _jsx(Typography.Text, { className: "text-text-primary", variant: "h4", children: filled ? (secure ? "•" : chars[index]) : "" }) }, index));
-            }), _jsx(TextInput, { autoFocus: autoFocus, caretHidden: true, keyboardType: "number-pad", maxLength: length, onChangeText: handleChange, ref: inputRef, selectionColor: theme.primary, style: { position: "absolute", opacity: 0, width: 1, height: 1 }, textContentType: "oneTimeCode", underlineColorAndroid: "transparent", value: value })] }));
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  let t11;
+  if ($[18] !== autoFocus || $[19] !== handleChange || $[20] !== length || $[21] !== theme.primary || $[22] !== value) {
+    t11 = _jsx(TextInput, {
+      autoFocus: autoFocus,
+      caretHidden: true,
+      keyboardType: "number-pad",
+      maxLength: length,
+      onChangeText: handleChange,
+      ref: inputRef,
+      selectionColor: theme.primary,
+      style: t10,
+      textContentType: "oneTimeCode",
+      underlineColorAndroid: "transparent",
+      value: value
+    });
+    $[18] = autoFocus;
+    $[19] = handleChange;
+    $[20] = length;
+    $[21] = theme.primary;
+    $[22] = value;
+    $[23] = t11;
+  } else {
+    t11 = $[23];
+  }
+  let t12;
+  if ($[24] !== t11 || $[25] !== t6 || $[26] !== t9 || $[27] !== testID) {
+    t12 = _jsxs(Pressable, {
+      accessibilityLabel: "C\xF3digo de verificaci\xF3n",
+      className: t6,
+      onPress: t7,
+      testID: testID,
+      children: [t9, t11]
+    });
+    $[24] = t11;
+    $[25] = t6;
+    $[26] = t9;
+    $[27] = testID;
+    $[28] = t12;
+  } else {
+    t12 = $[28];
+  }
+  return t12;
 }
 export default PinInput;

package/dist/Form/Form.QuantitySelector.js

@@ -1,36 +1,240 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { Display } from "../Display/index.js";
 import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
 import { tv } from "tailwind-variants";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 const quantitySelector = tv({
-    slots: {
-        container: "flex-row items-center self-start border border-primary rounded-full px-1",
-        button: "w-9 h-9 rounded-full justify-center items-center",
-        valueContainer: "min-w-[40px] items-center px-3",
-    },
-    variants: {
-        disabled: {
-            true: {
-                button: "opacity-50",
-            },
-        },
-    },
+  slots: {
+    container: "flex-row items-center self-start border border-primary rounded-full px-1",
+    button: "w-9 h-9 rounded-full justify-center items-center",
+    valueContainer: "min-w-[40px] items-center px-3"
+  },
+  variants: {
+    disabled: {
+      true: {
+        button: "opacity-50"
+      }
+    }
+  }
 });
-function QuantitySelector({ value, onChange, min = 1, max = 999, style, }) {
-    const handleDecrement = () => {
-        if (value > min) {
-            onChange(value - 1);
-        }
+/** The 36-point step buttons reach a 48-point target without covering the value. */
+const STEP_SLOP = {
+  top: 6,
+  bottom: 6,
+  left: 4,
+  right: 4
+};
+function QuantitySelector(t0) {
+  const $ = _c(51);
+  const {
+    value,
+    onChange,
+    min: t1,
+    max: t2,
+    style
+  } = t0;
+  const min = t1 === undefined ? 1 : t1;
+  const max = t2 === undefined ? 999 : t2;
+  let t3;
+  if ($[0] !== min || $[1] !== onChange || $[2] !== value) {
+    t3 = () => {
+      if (value > min) {
+        onChange(value - 1);
+      }
     };
-    const handleIncrement = () => {
-        if (value < max) {
-            onChange(value + 1);
-        }
+    $[0] = min;
+    $[1] = onChange;
+    $[2] = value;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const handleDecrement = t3;
+  let t4;
+  if ($[4] !== max || $[5] !== onChange || $[6] !== value) {
+    t4 = () => {
+      if (value < max) {
+        onChange(value + 1);
+      }
     };
-    const decrementStyles = quantitySelector({ disabled: value <= min });
-    const incrementStyles = quantitySelector({ disabled: value >= max });
+    $[4] = max;
+    $[5] = onChange;
+    $[6] = value;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const handleIncrement = t4;
+  let T0;
+  let T1;
+  let t10;
+  let t11;
+  let t12;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[8] !== handleDecrement || $[9] !== max || $[10] !== min || $[11] !== style || $[12] !== value) {
+    const decrementStyles = quantitySelector({
+      disabled: value <= min
+    });
+    const incrementStyles = quantitySelector({
+      disabled: value >= max
+    });
     const containerStyles = quantitySelector();
-    return (_jsxs(View, { className: containerStyles.container(), style: style, children: [_jsx(TouchableOpacity, { className: decrementStyles.button(), disabled: value <= min, onPress: handleDecrement, children: _jsx(Display.Icon, { name: "remove", size: 16 }) }), _jsx(View, { className: containerStyles.valueContainer(), children: _jsx(Typography.Text, { semibold: true, variant: "body", children: value }) }), _jsx(TouchableOpacity, { className: incrementStyles.button(), disabled: value >= max, onPress: handleIncrement, children: _jsx(Display.Icon, { name: "add", size: 16 }) })] }));
+    T1 = View;
+    t9 = containerStyles.container();
+    t10 = style;
+    const t13 = value <= min;
+    let t14;
+    if ($[23] !== t13) {
+      t14 = {
+        disabled: t13
+      };
+      $[23] = t13;
+      $[24] = t14;
+    } else {
+      t14 = $[24];
+    }
+    const t15 = decrementStyles.button();
+    const t16 = value <= min;
+    let t17;
+    if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+      t17 = _jsx(Display.Icon, {
+        name: "remove",
+        size: 16
+      });
+      $[25] = t17;
+    } else {
+      t17 = $[25];
+    }
+    if ($[26] !== handleDecrement || $[27] !== t14 || $[28] !== t15 || $[29] !== t16) {
+      t11 = _jsx(TouchableOpacity, {
+        accessibilityLabel: "Disminuir",
+        accessibilityRole: "button",
+        accessibilityState: t14,
+        className: t15,
+        disabled: t16,
+        hitSlop: STEP_SLOP,
+        onPress: handleDecrement,
+        children: t17
+      });
+      $[26] = handleDecrement;
+      $[27] = t14;
+      $[28] = t15;
+      $[29] = t16;
+      $[30] = t11;
+    } else {
+      t11 = $[30];
+    }
+    if ($[31] !== value) {
+      t12 = _jsx(View, {
+        className: containerStyles.valueContainer(),
+        children: _jsx(Typography.Text, {
+          semibold: true,
+          variant: "body",
+          children: value
+        })
+      });
+      $[31] = value;
+      $[32] = t12;
+    } else {
+      t12 = $[32];
+    }
+    T0 = TouchableOpacity;
+    t5 = "Aumentar";
+    t6 = "button";
+    const t18 = value >= max;
+    if ($[33] !== t18) {
+      t7 = {
+        disabled: t18
+      };
+      $[33] = t18;
+      $[34] = t7;
+    } else {
+      t7 = $[34];
+    }
+    t8 = incrementStyles.button();
+    $[8] = handleDecrement;
+    $[9] = max;
+    $[10] = min;
+    $[11] = style;
+    $[12] = value;
+    $[13] = T0;
+    $[14] = T1;
+    $[15] = t10;
+    $[16] = t11;
+    $[17] = t12;
+    $[18] = t5;
+    $[19] = t6;
+    $[20] = t7;
+    $[21] = t8;
+    $[22] = t9;
+  } else {
+    T0 = $[13];
+    T1 = $[14];
+    t10 = $[15];
+    t11 = $[16];
+    t12 = $[17];
+    t5 = $[18];
+    t6 = $[19];
+    t7 = $[20];
+    t8 = $[21];
+    t9 = $[22];
+  }
+  const t13 = value >= max;
+  let t14;
+  if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = _jsx(Display.Icon, {
+      name: "add",
+      size: 16
+    });
+    $[35] = t14;
+  } else {
+    t14 = $[35];
+  }
+  let t15;
+  if ($[36] !== T0 || $[37] !== handleIncrement || $[38] !== t13 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8) {
+    t15 = _jsx(T0, {
+      accessibilityLabel: t5,
+      accessibilityRole: t6,
+      accessibilityState: t7,
+      className: t8,
+      disabled: t13,
+      hitSlop: STEP_SLOP,
+      onPress: handleIncrement,
+      children: t14
+    });
+    $[36] = T0;
+    $[37] = handleIncrement;
+    $[38] = t13;
+    $[39] = t5;
+    $[40] = t6;
+    $[41] = t7;
+    $[42] = t8;
+    $[43] = t15;
+  } else {
+    t15 = $[43];
+  }
+  let t16;
+  if ($[44] !== T1 || $[45] !== t10 || $[46] !== t11 || $[47] !== t12 || $[48] !== t15 || $[49] !== t9) {
+    t16 = _jsxs(T1, {
+      className: t9,
+      style: t10,
+      children: [t11, t12, t15]
+    });
+    $[44] = T1;
+    $[45] = t10;
+    $[46] = t11;
+    $[47] = t12;
+    $[48] = t15;
+    $[49] = t9;
+    $[50] = t16;
+  } else {
+    t16 = $[50];
+  }
+  return t16;
 }
 export default QuantitySelector;

package/dist/Form/Form.RadioButton.js

@@ -1,31 +1,139 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
 import { tv } from "tailwind-variants";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 const radioButton = tv({
-    slots: {
-        container: "flex-row items-center py-2.5 px-3 rounded-lg border-[1.5px] border-border-default bg-bg-card",
-        radioCircle: "w-[18px] h-[18px] rounded-full border-2 border-border-default mr-2 justify-center items-center",
-        radioInner: "w-[9px] h-[9px] rounded-full",
-        label: "flex-1",
-    },
-    variants: {
-        selected: {
-            true: {
-                container: "border-primary bg-primary/10",
-                radioCircle: "border-primary",
-                radioInner: "bg-primary",
-                label: "text-text-primary font-semibold",
-            },
-            false: {
-                label: "text-text-secondary",
-            },
-        },
-    },
-    defaultVariants: { selected: false },
+  slots: {
+    container: "flex-row items-center py-2.5 px-3 rounded-lg border-[1.5px] border-border-default bg-bg-card",
+    radioCircle: "w-[18px] h-[18px] rounded-full border-2 border-border-default mr-2 justify-center items-center",
+    radioInner: "w-[9px] h-[9px] rounded-full",
+    label: "flex-1"
+  },
+  variants: {
+    selected: {
+      true: {
+        container: "border-primary bg-primary/10",
+        radioCircle: "border-primary",
+        radioInner: "bg-primary",
+        label: "text-text-primary font-semibold"
+      },
+      false: {
+        label: "text-text-secondary"
+      }
+    }
+  },
+  defaultVariants: {
+    selected: false
+  }
 });
-function RadioButton({ label, selected, onPress }) {
-    const styles = radioButton({ selected });
-    return (_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: styles.container(), onPress: onPress, children: [_jsx(View, { className: styles.radioCircle(), children: selected && _jsx(View, { className: styles.radioInner() }) }), _jsx(Typography.Text, { className: styles.label(), variant: "bodySmall", children: label })] }));
+function RadioButton(t0) {
+  const $ = _c(29);
+  const {
+    label,
+    selected,
+    onPress
+  } = t0;
+  let T0;
+  let T1;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  if ($[0] !== label || $[1] !== onPress || $[2] !== selected) {
+    const styles = radioButton({
+      selected
+    });
+    T1 = TouchableOpacity;
+    t2 = label;
+    t3 = "radio";
+    if ($[13] !== selected) {
+      t4 = {
+        checked: selected
+      };
+      $[13] = selected;
+      $[14] = t4;
+    } else {
+      t4 = $[14];
+    }
+    t5 = 0.7;
+    t6 = styles.container();
+    t7 = onPress;
+    t8 = _jsx(View, {
+      className: styles.radioCircle(),
+      children: selected && _jsx(View, {
+        className: styles.radioInner()
+      })
+    });
+    T0 = Typography.Text;
+    t1 = styles.label();
+    $[0] = label;
+    $[1] = onPress;
+    $[2] = selected;
+    $[3] = T0;
+    $[4] = T1;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+    $[9] = t5;
+    $[10] = t6;
+    $[11] = t7;
+    $[12] = t8;
+  } else {
+    T0 = $[3];
+    T1 = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+    t4 = $[8];
+    t5 = $[9];
+    t6 = $[10];
+    t7 = $[11];
+    t8 = $[12];
+  }
+  let t9;
+  if ($[15] !== T0 || $[16] !== label || $[17] !== t1) {
+    t9 = _jsx(T0, {
+      className: t1,
+      variant: "bodySmall",
+      children: label
+    });
+    $[15] = T0;
+    $[16] = label;
+    $[17] = t1;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== T1 || $[20] !== t2 || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7 || $[26] !== t8 || $[27] !== t9) {
+    t10 = _jsxs(T1, {
+      accessibilityLabel: t2,
+      accessibilityRole: t3,
+      accessibilityState: t4,
+      activeOpacity: t5,
+      className: t6,
+      onPress: t7,
+      children: [t8, t9]
+    });
+    $[19] = T1;
+    $[20] = t2;
+    $[21] = t3;
+    $[22] = t4;
+    $[23] = t5;
+    $[24] = t6;
+    $[25] = t7;
+    $[26] = t8;
+    $[27] = t9;
+    $[28] = t10;
+  } else {
+    t10 = $[28];
+  }
+  return t10;
 }
 export default RadioButton;