@sincpro/mobile-ui 3.1.0 → 3.2.0

package/dist/Form/Form.Select.js

@@ -1,25 +1,23 @@
 import { c as _c } from "react/compiler-runtime";
-import { Host, Picker } from "@expo/ui";
-import { Actions } from "../Actions/index.js";
 import Sheet from "../Dialog/Dialog.Sheet.js";
 import Icon from "../Display/Display.Icon.js";
+import { ChoiceRow } from "./choice-row.js";
 import Pressable from "../primitives/Pressable.js";
-import { relativeLuminance, useTheme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { attempt, errorMessage } from "../utils/async.js";
 import { useRef, useState } from "react";
-import { ActivityIndicator, Platform, View } from "react-native";
+import { ActivityIndicator, View } from "react-native";
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 function SelectOptions(t0) {
-  const $ = _c(14);
+  const $ = _c(12);
   const {
     options,
     value,
     blocked,
     onSelect
   } = t0;
-  const theme = useTheme();
   if (!options.length) {
     let t1;
     if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -33,67 +31,46 @@ function SelectOptions(t0) {
     return t1;
   }
   let t1;
-  if ($[1] !== blocked || $[2] !== onSelect || $[3] !== options || $[4] !== theme || $[5] !== value) {
+  if ($[1] !== blocked || $[2] !== onSelect || $[3] !== options || $[4] !== value) {
     let t2;
-    if ($[7] !== blocked || $[8] !== onSelect || $[9] !== theme || $[10] !== value) {
-      t2 = (option, index) => {
-        const selected = option.value === value;
-        return _jsxs(Pressable, {
-          accessibilityLabel: option.label,
-          accessibilityRole: "radio",
-          accessibilityState: {
-            disabled: blocked,
-            selected
-          },
-          className: cn("flex-row items-center gap-3 rounded-lg border px-3", selected ? "border-primary bg-primary/10" : "border-border-default"),
-          disabled: blocked,
-          onPress: () => onSelect(option.value),
-          style: {
-            minHeight: 48
-          },
-          children: [_jsx(Typography.Text, {
-            className: "flex-1 text-text-primary",
-            children: option.label
-          }), selected ? _jsx(Icon, {
-            color: theme.primary,
-            name: "check",
-            size: 18
-          }) : null]
-        }, `${index}:${String(option.value)}`);
-      };
-      $[7] = blocked;
-      $[8] = onSelect;
-      $[9] = theme;
-      $[10] = value;
-      $[11] = t2;
+    if ($[6] !== blocked || $[7] !== onSelect || $[8] !== value) {
+      t2 = (option, index) => _jsx(ChoiceRow, {
+        disabled: blocked,
+        label: option.label,
+        onPress: () => onSelect(option.value),
+        selected: option.value === value
+      }, `${index}:${String(option.value)}`);
+      $[6] = blocked;
+      $[7] = onSelect;
+      $[8] = value;
+      $[9] = t2;
     } else {
-      t2 = $[11];
+      t2 = $[9];
     }
     t1 = options.map(t2);
     $[1] = blocked;
     $[2] = onSelect;
     $[3] = options;
-    $[4] = theme;
-    $[5] = value;
-    $[6] = t1;
+    $[4] = value;
+    $[5] = t1;
   } else {
-    t1 = $[6];
+    t1 = $[5];
   }
   let t2;
-  if ($[12] !== t1) {
+  if ($[10] !== t1) {
     t2 = _jsx(View, {
       className: "gap-2",
       children: t1
     });
-    $[12] = t1;
-    $[13] = t2;
+    $[10] = t1;
+    $[11] = t2;
   } else {
-    t2 = $[13];
+    t2 = $[11];
   }
   return t2;
 }
 function Select(t0) {
-  const $ = _c(92);
+  const $ = _c(71);
   const {
     options,
     value,
@@ -102,58 +79,54 @@ function Select(t0) {
     label,
     placeholder: t1,
     title,
-    confirmLabel: t2,
-    disabled: t3,
-    readOnly: t4,
-    loading: t5,
+    disabled: t2,
+    readOnly: t3,
+    loading: t4,
     error,
     className,
     testID
   } = t0;
   const placeholder = t1 === undefined ? "Seleccionar\u2026" : t1;
-  const confirmLabel = t2 === undefined ? "Aplicar" : t2;
-  const disabled = t3 === undefined ? false : t3;
-  const readOnly = t4 === undefined ? false : t4;
-  const loading = t5 === undefined ? false : t5;
+  const disabled = t2 === undefined ? false : t2;
+  const readOnly = t3 === undefined ? false : t3;
+  const loading = t4 === undefined ? false : t4;
   const theme = useTheme();
-  const appearance = relativeLuminance(theme.bg.card) < 0.179 ? "dark" : "light";
   const saving = useRef(false);
   const [open, setOpen] = useState(false);
   const [draftValue, setDraftValue] = useState(null);
   const [pending, setPending] = useState(false);
   const [failure, setFailure] = useState();
-  let t6;
+  let t5;
   if ($[0] !== options || $[1] !== value) {
-    let t7;
+    let t6;
     if ($[3] !== value) {
-      t7 = option => option.value === value;
+      t6 = option => option.value === value;
       $[3] = value;
-      $[4] = t7;
+      $[4] = t6;
     } else {
-      t7 = $[4];
+      t6 = $[4];
     }
-    t6 = options.find(t7);
+    t5 = options.find(t6);
     $[0] = options;
     $[1] = value;
-    $[2] = t6;
+    $[2] = t5;
   } else {
-    t6 = $[2];
+    t5 = $[2];
   }
-  const selected = t6;
-  let t7;
+  const selected = t5;
+  let t6;
   if ($[5] !== draftValue) {
-    t7 = option_0 => option_0.value === draftValue;
+    t6 = option_0 => option_0.value === draftValue;
     $[5] = draftValue;
-    $[6] = t7;
+    $[6] = t6;
   } else {
-    t7 = $[6];
+    t6 = $[6];
   }
-  const draftIndex = options.findIndex(t7);
+  const draftIndex = options.findIndex(t6);
   const blocked = disabled || readOnly || loading || pending;
-  const android = Platform.OS === "android";
-  let t8;
+  let t7;
   if ($[7] !== onBlur) {
-    t8 = () => {
+    t7 = () => {
       if (saving.current) {
         return;
       }
@@ -161,14 +134,14 @@ function Select(t0) {
       onBlur?.();
     };
     $[7] = onBlur;
-    $[8] = t8;
+    $[8] = t7;
   } else {
-    t8 = $[8];
+    t7 = $[8];
   }
-  const close = t8;
-  let t9;
+  const close = t7;
+  let t8;
   if ($[9] !== blocked || $[10] !== onBlur || $[11] !== onChange) {
-    t9 = async next => {
+    t8 = async next => {
       if (next === null || blocked || saving.current) {
         return;
       }
@@ -189,105 +162,105 @@ function Select(t0) {
     $[9] = blocked;
     $[10] = onBlur;
     $[11] = onChange;
-    $[12] = t9;
+    $[12] = t8;
   } else {
-    t9 = $[12];
+    t8 = $[12];
   }
-  const commit = t9;
-  let t10;
+  const commit = t8;
+  let t9;
   if ($[13] !== className) {
-    t10 = cn("gap-1", className);
+    t9 = cn("gap-1", className);
     $[13] = className;
-    $[14] = t10;
+    $[14] = t9;
   } else {
-    t10 = $[14];
+    t9 = $[14];
   }
-  let t11;
+  let t10;
   if ($[15] !== label) {
-    t11 = label ? _jsx(Typography.Text, {
+    t10 = label ? _jsx(Typography.Text, {
       className: "text-text-primary",
       semibold: true,
       variant: "bodySmall",
       children: label
     }) : null;
     $[15] = label;
-    $[16] = t11;
+    $[16] = t10;
   } else {
-    t11 = $[16];
+    t10 = $[16];
   }
-  const t12 = label ? `${label}: ${selected?.label ?? placeholder}` : selected?.label ?? placeholder;
-  const t13 = loading || pending;
-  let t14;
-  if ($[17] !== blocked || $[18] !== open || $[19] !== t13) {
-    t14 = {
+  const t11 = label ? `${label}: ${selected?.label ?? placeholder}` : selected?.label ?? placeholder;
+  const t12 = loading || pending;
+  let t13;
+  if ($[17] !== blocked || $[18] !== open || $[19] !== t12) {
+    t13 = {
       disabled: blocked,
       expanded: open,
-      busy: t13
+      busy: t12
     };
     $[17] = blocked;
     $[18] = open;
-    $[19] = t13;
-    $[20] = t14;
+    $[19] = t12;
+    $[20] = t13;
   } else {
-    t14 = $[20];
+    t13 = $[20];
   }
-  let t15;
+  let t14;
   if ($[21] !== selected?.value) {
-    t15 = () => {
+    t14 = () => {
       setDraftValue(selected?.value ?? null);
       setFailure(undefined);
       setOpen(true);
     };
     $[21] = selected?.value;
-    $[22] = t15;
+    $[22] = t14;
   } else {
-    t15 = $[22];
+    t14 = $[22];
   }
-  let t16;
+  let t15;
   if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-    t16 = {
+    t15 = {
       minHeight: 48,
       minWidth: 48
     };
-    $[23] = t16;
+    $[23] = t15;
   } else {
-    t16 = $[23];
+    t15 = $[23];
   }
-  const t17 = selected ? "text-text-primary" : "text-text-tertiary";
-  let t18;
-  if ($[24] !== t17) {
-    t18 = cn("flex-1", t17);
-    $[24] = t17;
-    $[25] = t18;
+  const t16 = selected ? "text-text-primary" : "text-text-tertiary";
+  let t17;
+  if ($[24] !== t16) {
+    t17 = cn("flex-1", t16);
+    $[24] = t16;
+    $[25] = t17;
   } else {
-    t18 = $[25];
+    t17 = $[25];
   }
-  let t19;
+  let t18;
   if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
-    t19 = {
+    t18 = {
       paddingVertical: 12
     };
-    $[26] = t19;
+    $[26] = t18;
   } else {
-    t19 = $[26];
+    t18 = $[26];
   }
-  const t20 = selected?.label ?? placeholder;
-  let t21;
-  if ($[27] !== t18 || $[28] !== t20) {
-    t21 = _jsx(Typography.Text, {
-      className: t18,
-      style: t19,
-      children: t20
+  const t19 = selected?.label ?? placeholder;
+  let t20;
+  if ($[27] !== t17 || $[28] !== t19) {
+    t20 = _jsx(Typography.Text, {
+      className: t17,
+      style: t18,
+      children: t19
     });
-    $[27] = t18;
-    $[28] = t20;
-    $[29] = t21;
+    $[27] = t17;
+    $[28] = t19;
+    $[29] = t20;
   } else {
-    t21 = $[29];
+    t20 = $[29];
   }
-  let t22;
+  let t21;
   if ($[30] !== loading || $[31] !== pending || $[32] !== theme.icon || $[33] !== theme.primary) {
-    t22 = loading || pending ? _jsx(ActivityIndicator, {
+    t21 = loading || pending ? _jsx(ActivityIndicator, {
       color: theme.primary
     }) : _jsx(Icon, {
       color: theme.icon.secondary,
@@ -298,208 +271,132 @@ function Select(t0) {
     $[31] = pending;
     $[32] = theme.icon;
     $[33] = theme.primary;
-    $[34] = t22;
+    $[34] = t21;
   } else {
-    t22 = $[34];
+    t21 = $[34];
   }
-  let t23;
-  if ($[35] !== blocked || $[36] !== t12 || $[37] !== t14 || $[38] !== t15 || $[39] !== t21 || $[40] !== t22) {
-    t23 = _jsxs(Pressable, {
+  let t22;
+  if ($[35] !== blocked || $[36] !== t11 || $[37] !== t13 || $[38] !== t14 || $[39] !== t20 || $[40] !== t21) {
+    t22 = _jsxs(Pressable, {
       accessibilityHint: "Abre el selector de opciones",
-      accessibilityLabel: t12,
+      accessibilityLabel: t11,
       accessibilityRole: "button",
-      accessibilityState: t14,
+      accessibilityState: t13,
       className: "flex-row items-center gap-3 rounded-lg border border-input bg-bg-card px-3",
       disabled: blocked,
-      onPress: t15,
-      style: t16,
-      children: [t21, t22]
+      onPress: t14,
+      style: t15,
+      children: [t20, t21]
     });
     $[35] = blocked;
-    $[36] = t12;
-    $[37] = t14;
-    $[38] = t15;
-    $[39] = t21;
-    $[40] = t22;
-    $[41] = t23;
+    $[36] = t11;
+    $[37] = t13;
+    $[38] = t14;
+    $[39] = t20;
+    $[40] = t21;
+    $[41] = t22;
   } else {
-    t23 = $[41];
+    t22 = $[41];
   }
-  let t24;
+  let t23;
   if ($[42] !== error) {
-    t24 = error ? _jsx(Typography.Text, {
+    t23 = error ? _jsx(Typography.Text, {
       accessibilityLiveRegion: "polite",
       className: "text-danger",
       children: error
     }) : null;
     $[42] = error;
-    $[43] = t24;
+    $[43] = t23;
   } else {
-    t24 = $[43];
+    t23 = $[43];
   }
-  const t25 = !pending;
+  const t24 = !pending;
+  const t25 = title ?? label ?? "Seleccionar";
   let t26;
-  if ($[44] !== blocked || $[45] !== commit || $[46] !== confirmLabel || $[47] !== draftIndex || $[48] !== draftValue || $[49] !== pending) {
-    t26 = android ? undefined : _jsx(Actions.Button, {
-      disabled: blocked || draftIndex < 0,
-      loading: pending,
-      onPress: () => void commit(draftValue),
-      title: confirmLabel
-    });
+  if ($[44] !== blocked || $[45] !== commit || $[46] !== draftValue || $[47] !== open || $[48] !== options || $[49] !== value) {
+    t26 = open ? _jsx(SelectOptions, {
+      blocked: blocked,
+      onSelect: next_0 => {
+        setDraftValue(next_0);
+        commit(next_0);
+      },
+      options: options,
+      value: draftValue ?? value
+    }) : null;
     $[44] = blocked;
     $[45] = commit;
-    $[46] = confirmLabel;
-    $[47] = draftIndex;
-    $[48] = draftValue;
-    $[49] = pending;
+    $[46] = draftValue;
+    $[47] = open;
+    $[48] = options;
+    $[49] = value;
     $[50] = t26;
   } else {
     t26 = $[50];
   }
-  const t27 = title ?? label ?? "Seleccionar";
-  let t28;
-  if ($[51] !== blocked || $[52] !== commit || $[53] !== open || $[54] !== options || $[55] !== value) {
-    t28 = open && android ? _jsx(SelectOptions, {
-      blocked: blocked,
-      onSelect: next_0 => void commit(next_0),
-      options: options,
-      value: value
-    }) : null;
-    $[51] = blocked;
-    $[52] = commit;
-    $[53] = open;
-    $[54] = options;
-    $[55] = value;
-    $[56] = t28;
-  } else {
-    t28 = $[56];
-  }
-  let t29;
-  if ($[57] !== appearance || $[58] !== blocked || $[59] !== draftIndex || $[60] !== open || $[61] !== options || $[62] !== placeholder || $[63] !== testID || $[64] !== theme.primary) {
-    t29 = open && !android ? _jsx(Host, {
-      colorScheme: appearance,
-      matchContents: {
-        vertical: true
-      },
-      seedColor: theme.primary,
-      style: {
-        minHeight: 48
-      },
-      children: _jsxs(Picker, {
-        appearance: "wheel",
-        enabled: !blocked && options.length > 0,
-        onValueChange: index => {
-          if (blocked || saving.current) {
-            return;
-          }
-          setDraftValue(options.find((_, itemIndex) => String(itemIndex) === index)?.value ?? null);
-          setFailure(undefined);
-        },
-        selectedValue: draftIndex < 0 ? "" : String(draftIndex),
-        testID: testID ? `${testID}-picker` : undefined,
-        children: [_jsx(Picker.Item, {
-          label: placeholder,
-          value: ""
-        }), options.map(_temp)]
-      })
-    }) : null;
-    $[57] = appearance;
-    $[58] = blocked;
-    $[59] = draftIndex;
-    $[60] = open;
-    $[61] = options;
-    $[62] = placeholder;
-    $[63] = testID;
-    $[64] = theme.primary;
-    $[65] = t29;
-  } else {
-    t29 = $[65];
-  }
-  let t30;
-  if ($[66] !== open || $[67] !== options.length) {
-    t30 = open && !android && !options.length ? _jsx(Typography.Text, {
-      children: "No hay opciones disponibles."
-    }) : null;
-    $[66] = open;
-    $[67] = options.length;
-    $[68] = t30;
-  } else {
-    t30 = $[68];
-  }
-  let t31;
-  if ($[69] !== draftIndex || $[70] !== draftValue) {
-    t31 = draftValue !== null && draftIndex < 0 ? _jsx(Typography.Text, {
+  let t27;
+  if ($[51] !== draftIndex || $[52] !== draftValue) {
+    t27 = draftValue !== null && draftIndex < 0 ? _jsx(Typography.Text, {
       accessibilityRole: "alert",
       className: "text-danger",
       children: "La opci\xF3n ya no est\xE1 disponible. Selecciona otra."
     }) : null;
-    $[69] = draftIndex;
-    $[70] = draftValue;
-    $[71] = t31;
+    $[51] = draftIndex;
+    $[52] = draftValue;
+    $[53] = t27;
   } else {
-    t31 = $[71];
+    t27 = $[53];
   }
-  let t32;
-  if ($[72] !== failure) {
-    t32 = failure ? _jsx(Typography.Text, {
+  let t28;
+  if ($[54] !== failure) {
+    t28 = failure ? _jsx(Typography.Text, {
       accessibilityLiveRegion: "polite",
       accessibilityRole: "alert",
       className: "pt-3 text-danger",
       selectable: true,
       children: failure
     }) : null;
-    $[72] = failure;
-    $[73] = t32;
+    $[54] = failure;
+    $[55] = t28;
   } else {
-    t32 = $[73];
+    t28 = $[55];
   }
-  let t33;
-  if ($[74] !== close || $[75] !== open || $[76] !== t25 || $[77] !== t26 || $[78] !== t27 || $[79] !== t28 || $[80] !== t29 || $[81] !== t30 || $[82] !== t31 || $[83] !== t32) {
-    t33 = _jsxs(Sheet, {
-      dismissible: t25,
-      footer: t26,
+  let t29;
+  if ($[56] !== close || $[57] !== open || $[58] !== t24 || $[59] !== t25 || $[60] !== t26 || $[61] !== t27 || $[62] !== t28) {
+    t29 = _jsxs(Sheet, {
+      dismissible: t24,
       onClose: close,
-      title: t27,
+      title: t25,
       visible: open,
-      children: [t28, t29, t30, t31, t32]
+      children: [t26, t27, t28]
     });
-    $[74] = close;
-    $[75] = open;
-    $[76] = t25;
-    $[77] = t26;
-    $[78] = t27;
-    $[79] = t28;
-    $[80] = t29;
-    $[81] = t30;
-    $[82] = t31;
-    $[83] = t32;
-    $[84] = t33;
+    $[56] = close;
+    $[57] = open;
+    $[58] = t24;
+    $[59] = t25;
+    $[60] = t26;
+    $[61] = t27;
+    $[62] = t28;
+    $[63] = t29;
   } else {
-    t33 = $[84];
+    t29 = $[63];
   }
-  let t34;
-  if ($[85] !== t10 || $[86] !== t11 || $[87] !== t23 || $[88] !== t24 || $[89] !== t33 || $[90] !== testID) {
-    t34 = _jsxs(View, {
-      className: t10,
+  let t30;
+  if ($[64] !== t10 || $[65] !== t22 || $[66] !== t23 || $[67] !== t29 || $[68] !== t9 || $[69] !== testID) {
+    t30 = _jsxs(View, {
+      className: t9,
       testID: testID,
-      children: [t11, t23, t24, t33]
+      children: [t10, t22, t23, t29]
     });
-    $[85] = t10;
-    $[86] = t11;
-    $[87] = t23;
-    $[88] = t24;
-    $[89] = t33;
-    $[90] = testID;
-    $[91] = t34;
+    $[64] = t10;
+    $[65] = t22;
+    $[66] = t23;
+    $[67] = t29;
+    $[68] = t9;
+    $[69] = testID;
+    $[70] = t30;
   } else {
-    t34 = $[91];
+    t30 = $[70];
   }
-  return t34;
-}
-function _temp(option_1, index_0) {
-  return _jsx(Picker.Item, {
-    label: option_1.label,
-    value: String(index_0)
-  }, String(index_0));
+  return t30;
 }
 export default Select;

package/dist/Form/choice-row.d.ts

@@ -0,0 +1,15 @@
+export interface ChoiceRowProps {
+    label: string;
+    /** Secondary line, e.g. a client's document number. */
+    description?: string;
+    selected: boolean;
+    onPress: () => void;
+    disabled?: boolean;
+    look?: "card" | "list";
+    testID?: string;
+}
+/**
+ * The single-choice row of the DS: the same radio mark, 48-point target, wrapping label and
+ * `radio` semantics on Android and iOS, whether it lists two options or two thousand.
+ */
+export declare function ChoiceRow({ label, description, selected, onPress, disabled, look, testID, }: ChoiceRowProps): import("react").JSX.Element;