@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Form/Form.PickerField.js

@@ -0,0 +1,539 @@
+import { c as _c } from "react/compiler-runtime";
+import { FlashList } from "@shopify/flash-list";
+import Sheet from "../Dialog/Dialog.Sheet.js";
+import Icon from "../Display/Display.Icon.js";
+import { ChoiceRow } from "./choice-row.js";
+import { inputTextStyle } from "./input-text.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { matchesSearch } from "../utils/search.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ActivityIndicator, TextInput, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+const SEARCH_DELAY_MS = 250;
+
+/**
+ * A field that opens a searchable list: the "selector" pattern every business
+ * app repeats (customer, product, payment method). Local or remote options,
+ * one virtualized list, the shared overlay sheet.
+ */
+function PickerField(t0) {
+  const $ = _c(99);
+  const {
+    label,
+    value,
+    onChange,
+    options,
+    search,
+    selectedLabel,
+    placeholder: t1,
+    title,
+    searchPlaceholder: t2,
+    emptyLabel: t3,
+    error,
+    disabled: t4,
+    className,
+    testID
+  } = t0;
+  const placeholder = t1 === undefined ? "Seleccionar" : t1;
+  const searchPlaceholder = t2 === undefined ? "Buscar\u2026" : t2;
+  const emptyLabel = t3 === undefined ? "Sin resultados" : t3;
+  const disabled = t4 === undefined ? false : t4;
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  let t5;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = [];
+    $[0] = t5;
+  } else {
+    t5 = $[0];
+  }
+  const [remote, setRemote] = useState(t5);
+  const [loading, setLoading] = useState(false);
+  const [failure, setFailure] = useState();
+  const request = useRef(0);
+  let t6;
+  let t7;
+  if ($[1] !== open || $[2] !== query || $[3] !== search) {
+    t6 = () => {
+      if (!open || !search) {
+        return;
+      }
+      const id = request.current = request.current + 1;
+      const timer = setTimeout(() => {
+        search(query).then(found => {
+          if (id !== request.current) {
+            return;
+          }
+          setRemote(found);
+          setLoading(false);
+        }, cause => {
+          if (id !== request.current) {
+            return;
+          }
+          setFailure(cause instanceof Error && cause.message.trim() ? cause.message : "No se pudo buscar. Vuelve a intentarlo.");
+          setLoading(false);
+        });
+      }, SEARCH_DELAY_MS);
+      return () => clearTimeout(timer);
+    };
+    t7 = [open, query, search];
+    $[1] = open;
+    $[2] = query;
+    $[3] = search;
+    $[4] = t6;
+    $[5] = t7;
+  } else {
+    t6 = $[4];
+    t7 = $[5];
+  }
+  useEffect(t6, t7);
+  let t8;
+  bb0: {
+    if (search) {
+      t8 = remote;
+      break bb0;
+    }
+    let t9;
+    if ($[6] !== options) {
+      t9 = options ?? [];
+      $[6] = options;
+      $[7] = t9;
+    } else {
+      t9 = $[7];
+    }
+    let t10;
+    if ($[8] !== query || $[9] !== t9) {
+      let t11;
+      if ($[11] !== query) {
+        t11 = option => matchesSearch(query, option.label, option.description);
+        $[11] = query;
+        $[12] = t11;
+      } else {
+        t11 = $[12];
+      }
+      t10 = t9.filter(t11);
+      $[8] = query;
+      $[9] = t9;
+      $[10] = t10;
+    } else {
+      t10 = $[10];
+    }
+    t8 = t10;
+  }
+  const results = t8;
+  let t9;
+  if ($[13] !== options || $[14] !== remote || $[15] !== selectedLabel || $[16] !== value) {
+    t9 = (options ?? remote).find(option_0 => option_0.value === value)?.label ?? selectedLabel;
+    $[13] = options;
+    $[14] = remote;
+    $[15] = selectedLabel;
+    $[16] = value;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  const current = t9;
+  let t10;
+  if ($[18] !== search) {
+    t10 = () => {
+      if (!search) {
+        return;
+      }
+      setLoading(true);
+      setFailure(undefined);
+    };
+    $[18] = search;
+    $[19] = t10;
+  } else {
+    t10 = $[19];
+  }
+  const startSearch = t10;
+  let t11;
+  if ($[20] !== startSearch) {
+    t11 = text => {
+      setQuery(text);
+      startSearch();
+    };
+    $[20] = startSearch;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  const updateQuery = t11;
+  let t12;
+  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = () => {
+      setOpen(false);
+      setQuery("");
+    };
+    $[22] = t12;
+  } else {
+    t12 = $[22];
+  }
+  const close = t12;
+  let t13;
+  if ($[23] !== onChange) {
+    t13 = option_1 => {
+      onChange(option_1.value, option_1);
+      setOpen(false);
+      setQuery("");
+    };
+    $[23] = onChange;
+    $[24] = t13;
+  } else {
+    t13 = $[24];
+  }
+  const choose = t13;
+  let t14;
+  if ($[25] !== choose || $[26] !== value) {
+    t14 = t15 => {
+      const {
+        item
+      } = t15;
+      return _jsx(ChoiceRow, {
+        description: item.description,
+        label: item.label,
+        look: "list",
+        onPress: () => choose(item),
+        selected: item.value === value
+      });
+    };
+    $[25] = choose;
+    $[26] = value;
+    $[27] = t14;
+  } else {
+    t14 = $[27];
+  }
+  const renderOption = t14;
+  let t15;
+  if ($[28] !== className) {
+    t15 = cn("gap-1", className);
+    $[28] = className;
+    $[29] = t15;
+  } else {
+    t15 = $[29];
+  }
+  let t16;
+  if ($[30] !== label) {
+    t16 = _jsx(Typography.Text, {
+      className: "text-text-primary",
+      semibold: true,
+      variant: "bodySmall",
+      children: label
+    });
+    $[30] = label;
+    $[31] = t16;
+  } else {
+    t16 = $[31];
+  }
+  const t17 = `${label}: ${current ?? placeholder}`;
+  let t18;
+  if ($[32] !== disabled || $[33] !== open) {
+    t18 = {
+      disabled,
+      expanded: open
+    };
+    $[32] = disabled;
+    $[33] = open;
+    $[34] = t18;
+  } else {
+    t18 = $[34];
+  }
+  let t19;
+  if ($[35] !== startSearch) {
+    t19 = () => {
+      setOpen(true);
+      startSearch();
+    };
+    $[35] = startSearch;
+    $[36] = t19;
+  } else {
+    t19 = $[36];
+  }
+  let t20;
+  if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = {
+      minHeight: 48,
+      minWidth: 48
+    };
+    $[37] = t20;
+  } else {
+    t20 = $[37];
+  }
+  const t21 = current ? "text-text-primary" : "text-text-tertiary";
+  let t22;
+  if ($[38] !== t21) {
+    t22 = cn("flex-1", t21);
+    $[38] = t21;
+    $[39] = t22;
+  } else {
+    t22 = $[39];
+  }
+  let t23;
+  if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = {
+      paddingVertical: 12
+    };
+    $[40] = t23;
+  } else {
+    t23 = $[40];
+  }
+  const t24 = current ?? placeholder;
+  let t25;
+  if ($[41] !== t22 || $[42] !== t24) {
+    t25 = _jsx(Typography.Text, {
+      className: t22,
+      style: t23,
+      children: t24
+    });
+    $[41] = t22;
+    $[42] = t24;
+    $[43] = t25;
+  } else {
+    t25 = $[43];
+  }
+  let t26;
+  if ($[44] !== theme.icon.secondary) {
+    t26 = _jsx(Icon, {
+      color: theme.icon.secondary,
+      name: "search",
+      size: 18
+    });
+    $[44] = theme.icon.secondary;
+    $[45] = t26;
+  } else {
+    t26 = $[45];
+  }
+  let t27;
+  if ($[46] !== disabled || $[47] !== t17 || $[48] !== t18 || $[49] !== t19 || $[50] !== t25 || $[51] !== t26) {
+    t27 = _jsxs(Pressable, {
+      accessibilityHint: "Abre la b\xFAsqueda de opciones",
+      accessibilityLabel: t17,
+      accessibilityRole: "button",
+      accessibilityState: t18,
+      className: "flex-row items-center gap-3 rounded-lg border border-input bg-bg-card px-3",
+      disabled: disabled,
+      onPress: t19,
+      style: t20,
+      children: [t25, t26]
+    });
+    $[46] = disabled;
+    $[47] = t17;
+    $[48] = t18;
+    $[49] = t19;
+    $[50] = t25;
+    $[51] = t26;
+    $[52] = t27;
+  } else {
+    t27 = $[52];
+  }
+  let t28;
+  if ($[53] !== error) {
+    t28 = error ? _jsx(Typography.Text, {
+      accessibilityLiveRegion: "polite",
+      className: "text-danger",
+      children: error
+    }) : null;
+    $[53] = error;
+    $[54] = t28;
+  } else {
+    t28 = $[54];
+  }
+  let t29;
+  if ($[55] === Symbol.for("react.memo_cache_sentinel")) {
+    t29 = ["90%"];
+    $[55] = t29;
+  } else {
+    t29 = $[55];
+  }
+  const t30 = testID ? `${testID}-sheet` : undefined;
+  const t31 = title ?? label;
+  let t32;
+  if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
+    t32 = {
+      flex: 1,
+      gap: 8
+    };
+    $[56] = t32;
+  } else {
+    t32 = $[56];
+  }
+  const t33 = theme.text.tertiary;
+  const t34 = theme.primary;
+  let t35;
+  if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+    t35 = inputTextStyle();
+    $[57] = t35;
+  } else {
+    t35 = $[57];
+  }
+  let t36;
+  if ($[58] !== theme.text.primary) {
+    t36 = [t35, {
+      color: theme.text.primary
+    }];
+    $[58] = theme.text.primary;
+    $[59] = t36;
+  } else {
+    t36 = $[59];
+  }
+  const t37 = testID ? `${testID}-search` : undefined;
+  let t38;
+  if ($[60] !== query || $[61] !== searchPlaceholder || $[62] !== t36 || $[63] !== t37 || $[64] !== theme.primary || $[65] !== theme.text.tertiary || $[66] !== updateQuery) {
+    t38 = _jsx(TextInput, {
+      accessibilityLabel: searchPlaceholder,
+      autoCorrect: false,
+      className: "rounded-xl bg-bg-muted px-4 py-3",
+      onChangeText: updateQuery,
+      placeholder: searchPlaceholder,
+      placeholderTextColor: t33,
+      returnKeyType: "search",
+      selectionColor: t34,
+      style: t36,
+      testID: t37,
+      underlineColorAndroid: "transparent",
+      value: query
+    });
+    $[60] = query;
+    $[61] = searchPlaceholder;
+    $[62] = t36;
+    $[63] = t37;
+    $[64] = theme.primary;
+    $[65] = theme.text.tertiary;
+    $[66] = updateQuery;
+    $[67] = t38;
+  } else {
+    t38 = $[67];
+  }
+  let t39;
+  if ($[68] !== loading || $[69] !== theme.primary) {
+    t39 = loading ? _jsx(ActivityIndicator, {
+      color: theme.primary
+    }) : null;
+    $[68] = loading;
+    $[69] = theme.primary;
+    $[70] = t39;
+  } else {
+    t39 = $[70];
+  }
+  let t40;
+  if ($[71] !== failure) {
+    t40 = failure ? _jsx(Typography.Text, {
+      accessibilityRole: "alert",
+      className: "text-danger",
+      children: failure
+    }) : null;
+    $[71] = failure;
+    $[72] = t40;
+  } else {
+    t40 = $[72];
+  }
+  let t41;
+  if ($[73] !== emptyLabel || $[74] !== loading) {
+    t41 = loading ? null : _jsx(Typography.Text, {
+      className: "py-6 text-center text-text-tertiary",
+      children: emptyLabel
+    });
+    $[73] = emptyLabel;
+    $[74] = loading;
+    $[75] = t41;
+  } else {
+    t41 = $[75];
+  }
+  let t42;
+  if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+    t42 = {
+      disabled: true
+    };
+    $[76] = t42;
+  } else {
+    t42 = $[76];
+  }
+  let t43;
+  if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+    t43 = {
+      flex: 1
+    };
+    $[77] = t43;
+  } else {
+    t43 = $[77];
+  }
+  let t44;
+  if ($[78] !== renderOption || $[79] !== results || $[80] !== t41) {
+    t44 = _jsx(FlashList, {
+      data: results,
+      keyboardDismissMode: "on-drag",
+      keyboardShouldPersistTaps: "handled",
+      keyExtractor: _temp,
+      ListEmptyComponent: t41,
+      maintainVisibleContentPosition: t42,
+      renderItem: renderOption,
+      style: t43
+    });
+    $[78] = renderOption;
+    $[79] = results;
+    $[80] = t41;
+    $[81] = t44;
+  } else {
+    t44 = $[81];
+  }
+  let t45;
+  if ($[82] !== t38 || $[83] !== t39 || $[84] !== t40 || $[85] !== t44) {
+    t45 = _jsxs(View, {
+      style: t32,
+      children: [t38, t39, t40, t44]
+    });
+    $[82] = t38;
+    $[83] = t39;
+    $[84] = t40;
+    $[85] = t44;
+    $[86] = t45;
+  } else {
+    t45 = $[86];
+  }
+  let t46;
+  if ($[87] !== open || $[88] !== t30 || $[89] !== t31 || $[90] !== t45) {
+    t46 = _jsx(Sheet, {
+      onClose: close,
+      scrollable: false,
+      snapPoints: t29,
+      testID: t30,
+      title: t31,
+      visible: open,
+      children: t45
+    });
+    $[87] = open;
+    $[88] = t30;
+    $[89] = t31;
+    $[90] = t45;
+    $[91] = t46;
+  } else {
+    t46 = $[91];
+  }
+  let t47;
+  if ($[92] !== t15 || $[93] !== t16 || $[94] !== t27 || $[95] !== t28 || $[96] !== t46 || $[97] !== testID) {
+    t47 = _jsxs(View, {
+      className: t15,
+      testID: testID,
+      children: [t16, t27, t28, t46]
+    });
+    $[92] = t15;
+    $[93] = t16;
+    $[94] = t27;
+    $[95] = t28;
+    $[96] = t46;
+    $[97] = testID;
+    $[98] = t47;
+  } else {
+    t47 = $[98];
+  }
+  return t47;
+}
+function _temp(option_2) {
+  return String(option_2.value);
+}
+export default PickerField;

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;