@sincpro/mobile-ui 3.0.1 → 3.2.0

package/dist/Form/Form.Select.js

@@ -1,74 +1,402 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Host, Picker } from "@expo/ui";
-import { Actions } from "../Actions/index.js";
+import { c as _c } from "react/compiler-runtime";
 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";
-function SelectOptions({ options, value, blocked, onSelect, }) {
-    const theme = useTheme();
-    if (!options.length) {
-        return _jsx(Typography.Text, { children: "No hay opciones disponibles." });
+import { ActivityIndicator, View } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function SelectOptions(t0) {
+  const $ = _c(12);
+  const {
+    options,
+    value,
+    blocked,
+    onSelect
+  } = t0;
+  if (!options.length) {
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = _jsx(Typography.Text, {
+        children: "No hay opciones disponibles."
+      });
+      $[0] = t1;
+    } else {
+      t1 = $[0];
     }
-    return (_jsx(View, { className: "gap-2", children: options.map((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)}`));
-        }) }));
+    return t1;
+  }
+  let t1;
+  if ($[1] !== blocked || $[2] !== onSelect || $[3] !== options || $[4] !== value) {
+    let 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 = $[9];
+    }
+    t1 = options.map(t2);
+    $[1] = blocked;
+    $[2] = onSelect;
+    $[3] = options;
+    $[4] = value;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[10] !== t1) {
+    t2 = _jsx(View, {
+      className: "gap-2",
+      children: t1
+    });
+    $[10] = t1;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  return t2;
 }
-function Select({ options, value, onChange, onBlur, label, placeholder = "Seleccionar…", title, confirmLabel = "Aplicar", disabled = false, readOnly = false, loading = false, error, className, testID, }) {
-    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();
-    const selected = options.find((option) => option.value === value);
-    const draftIndex = options.findIndex((option) => option.value === draftValue);
-    const blocked = disabled || readOnly || loading || pending;
-    const android = Platform.OS === "android";
-    const close = () => {
-        if (saving.current)
-            return;
+function Select(t0) {
+  const $ = _c(71);
+  const {
+    options,
+    value,
+    onChange,
+    onBlur,
+    label,
+    placeholder: t1,
+    title,
+    disabled: t2,
+    readOnly: t3,
+    loading: t4,
+    error,
+    className,
+    testID
+  } = t0;
+  const placeholder = t1 === undefined ? "Seleccionar\u2026" : t1;
+  const disabled = t2 === undefined ? false : t2;
+  const readOnly = t3 === undefined ? false : t3;
+  const loading = t4 === undefined ? false : t4;
+  const theme = useTheme();
+  const saving = useRef(false);
+  const [open, setOpen] = useState(false);
+  const [draftValue, setDraftValue] = useState(null);
+  const [pending, setPending] = useState(false);
+  const [failure, setFailure] = useState();
+  let t5;
+  if ($[0] !== options || $[1] !== value) {
+    let t6;
+    if ($[3] !== value) {
+      t6 = option => option.value === value;
+      $[3] = value;
+      $[4] = t6;
+    } else {
+      t6 = $[4];
+    }
+    t5 = options.find(t6);
+    $[0] = options;
+    $[1] = value;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  const selected = t5;
+  let t6;
+  if ($[5] !== draftValue) {
+    t6 = option_0 => option_0.value === draftValue;
+    $[5] = draftValue;
+    $[6] = t6;
+  } else {
+    t6 = $[6];
+  }
+  const draftIndex = options.findIndex(t6);
+  const blocked = disabled || readOnly || loading || pending;
+  let t7;
+  if ($[7] !== onBlur) {
+    t7 = () => {
+      if (saving.current) {
+        return;
+      }
+      setOpen(false);
+      onBlur?.();
+    };
+    $[7] = onBlur;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  const close = t7;
+  let t8;
+  if ($[9] !== blocked || $[10] !== onBlur || $[11] !== onChange) {
+    t8 = async next => {
+      if (next === null || blocked || saving.current) {
+        return;
+      }
+      saving.current = true;
+      setPending(true);
+      setFailure(undefined);
+      const result = await attempt(async () => {
+        await onChange(next);
         setOpen(false);
         onBlur?.();
+      });
+      saving.current = false;
+      setPending(false);
+      if (!result.ok) {
+        setFailure(errorMessage(result.error, "No se pudo aplicar la selecci\xF3n. Vuelve a intentarlo."));
+      }
+    };
+    $[9] = blocked;
+    $[10] = onBlur;
+    $[11] = onChange;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  const commit = t8;
+  let t9;
+  if ($[13] !== className) {
+    t9 = cn("gap-1", className);
+    $[13] = className;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  let t10;
+  if ($[15] !== label) {
+    t10 = label ? _jsx(Typography.Text, {
+      className: "text-text-primary",
+      semibold: true,
+      variant: "bodySmall",
+      children: label
+    }) : null;
+    $[15] = label;
+    $[16] = t10;
+  } else {
+    t10 = $[16];
+  }
+  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: t12
+    };
+    $[17] = blocked;
+    $[18] = open;
+    $[19] = t12;
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  let t14;
+  if ($[21] !== selected?.value) {
+    t14 = () => {
+      setDraftValue(selected?.value ?? null);
+      setFailure(undefined);
+      setOpen(true);
+    };
+    $[21] = selected?.value;
+    $[22] = t14;
+  } else {
+    t14 = $[22];
+  }
+  let t15;
+  if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = {
+      minHeight: 48,
+      minWidth: 48
     };
-    const commit = async (next) => {
-        if (next === null || blocked || saving.current)
-            return;
-        saving.current = true;
-        setPending(true);
-        setFailure(undefined);
-        try {
-            await onChange(next);
-            setOpen(false);
-            onBlur?.();
-        }
-        catch (cause) {
-            setFailure(cause instanceof Error && cause.message.trim()
-                ? cause.message
-                : "No se pudo aplicar la selección. Vuelve a intentarlo.");
-        }
-        finally {
-            saving.current = false;
-            setPending(false);
-        }
+    $[23] = t15;
+  } else {
+    t15 = $[23];
+  }
+  const t16 = selected ? "text-text-primary" : "text-text-tertiary";
+  let t17;
+  if ($[24] !== t16) {
+    t17 = cn("flex-1", t16);
+    $[24] = t16;
+    $[25] = t17;
+  } else {
+    t17 = $[25];
+  }
+  let t18;
+  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+    t18 = {
+      paddingVertical: 12
     };
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre el selector de opciones", accessibilityLabel: label
-                    ? `${label}: ${selected?.label ?? placeholder}`
-                    : (selected?.label ?? placeholder), accessibilityRole: "button", accessibilityState: { disabled: blocked, expanded: open, busy: loading || pending }, className: "flex-row items-center gap-3 rounded-lg border border-input bg-bg-card px-3", disabled: blocked, onPress: () => {
-                    setDraftValue(selected?.value ?? null);
-                    setFailure(undefined);
-                    setOpen(true);
-                }, style: { minHeight: 48, minWidth: 48 }, children: [_jsx(Typography.Text, { className: cn("flex-1", selected ? "text-text-primary" : "text-text-tertiary"), style: { paddingVertical: 12 }, children: selected?.label ?? placeholder }), loading || pending ? (_jsx(ActivityIndicator, { color: theme.primary })) : (_jsx(Icon, { color: theme.icon.secondary, name: "expand", size: 18 }))] }), error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-danger", children: error })) : null, _jsxs(Sheet, { dismissible: !pending, footer: android ? undefined : (_jsx(Actions.Button, { disabled: blocked || draftIndex < 0, loading: pending, onPress: () => void commit(draftValue), title: confirmLabel })), onClose: close, title: title ?? label ?? "Seleccionar", visible: open, children: [open && android ? (_jsx(SelectOptions, { blocked: blocked, onSelect: (next) => void commit(next), options: options, value: value })) : null, 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((option, index) => (_jsx(Picker.Item, { label: option.label, value: String(index) }, String(index))))] }) })) : null, open && !android && !options.length ? (_jsx(Typography.Text, { children: "No hay opciones disponibles." })) : null, draftValue !== null && draftIndex < 0 ? (_jsx(Typography.Text, { accessibilityRole: "alert", className: "text-danger", children: "La opci\u00F3n ya no est\u00E1 disponible. Selecciona otra." })) : null, failure ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: "pt-3 text-danger", selectable: true, children: failure })) : null] })] }));
+    $[26] = t18;
+  } else {
+    t18 = $[26];
+  }
+  const t19 = selected?.label ?? placeholder;
+  let t20;
+  if ($[27] !== t17 || $[28] !== t19) {
+    t20 = _jsx(Typography.Text, {
+      className: t17,
+      style: t18,
+      children: t19
+    });
+    $[27] = t17;
+    $[28] = t19;
+    $[29] = t20;
+  } else {
+    t20 = $[29];
+  }
+  let t21;
+  if ($[30] !== loading || $[31] !== pending || $[32] !== theme.icon || $[33] !== theme.primary) {
+    t21 = loading || pending ? _jsx(ActivityIndicator, {
+      color: theme.primary
+    }) : _jsx(Icon, {
+      color: theme.icon.secondary,
+      name: "expand",
+      size: 18
+    });
+    $[30] = loading;
+    $[31] = pending;
+    $[32] = theme.icon;
+    $[33] = theme.primary;
+    $[34] = t21;
+  } else {
+    t21 = $[34];
+  }
+  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: t11,
+      accessibilityRole: "button",
+      accessibilityState: t13,
+      className: "flex-row items-center gap-3 rounded-lg border border-input bg-bg-card px-3",
+      disabled: blocked,
+      onPress: t14,
+      style: t15,
+      children: [t20, t21]
+    });
+    $[35] = blocked;
+    $[36] = t11;
+    $[37] = t13;
+    $[38] = t14;
+    $[39] = t20;
+    $[40] = t21;
+    $[41] = t22;
+  } else {
+    t22 = $[41];
+  }
+  let t23;
+  if ($[42] !== error) {
+    t23 = error ? _jsx(Typography.Text, {
+      accessibilityLiveRegion: "polite",
+      className: "text-danger",
+      children: error
+    }) : null;
+    $[42] = error;
+    $[43] = t23;
+  } else {
+    t23 = $[43];
+  }
+  const t24 = !pending;
+  const t25 = title ?? label ?? "Seleccionar";
+  let t26;
+  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] = draftValue;
+    $[47] = open;
+    $[48] = options;
+    $[49] = value;
+    $[50] = t26;
+  } else {
+    t26 = $[50];
+  }
+  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;
+    $[51] = draftIndex;
+    $[52] = draftValue;
+    $[53] = t27;
+  } else {
+    t27 = $[53];
+  }
+  let t28;
+  if ($[54] !== failure) {
+    t28 = failure ? _jsx(Typography.Text, {
+      accessibilityLiveRegion: "polite",
+      accessibilityRole: "alert",
+      className: "pt-3 text-danger",
+      selectable: true,
+      children: failure
+    }) : null;
+    $[54] = failure;
+    $[55] = t28;
+  } else {
+    t28 = $[55];
+  }
+  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: t25,
+      visible: open,
+      children: [t26, t27, t28]
+    });
+    $[56] = close;
+    $[57] = open;
+    $[58] = t24;
+    $[59] = t25;
+    $[60] = t26;
+    $[61] = t27;
+    $[62] = t28;
+    $[63] = t29;
+  } else {
+    t29 = $[63];
+  }
+  let t30;
+  if ($[64] !== t10 || $[65] !== t22 || $[66] !== t23 || $[67] !== t29 || $[68] !== t9 || $[69] !== testID) {
+    t30 = _jsxs(View, {
+      className: t9,
+      testID: testID,
+      children: [t10, t22, t23, t29]
+    });
+    $[64] = t10;
+    $[65] = t22;
+    $[66] = t23;
+    $[67] = t29;
+    $[68] = t9;
+    $[69] = testID;
+    $[70] = t30;
+  } else {
+    t30 = $[70];
+  }
+  return t30;
 }
 export default Select;

package/dist/Form/Form.Slider.js

@@ -1,17 +1,140 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import NativeSlider from "@expo/ui/community/slider";
 import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-function Slider({ value, onChange, min = 0, max = 100, step = 1, label, formatValue, disabled = false, readOnly = false, accessibilityLabel, accessibilityHint, className, testID, }) {
-    const theme = useTheme();
-    const blocked = disabled || readOnly;
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label || formatValue ? (_jsxs(View, { className: "flex-row items-center justify-between", children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, formatValue ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: formatValue(value) })) : null] })) : null, _jsx(NativeSlider, { accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel ?? label ?? "Valor", disabled: blocked, maximumTrackTintColor: theme.container.primary, maximumValue: max, minimumTrackTintColor: theme.primary, minimumValue: min, onValueChange: (next) => {
-                    if (blocked)
-                        return;
-                    const snapped = step > 0 ? min + Math.round((next - min) / step) * step : next;
-                    onChange(Math.min(max, Math.max(min, snapped)));
-                }, step: step, style: { minHeight: 48 }, testID: testID ? `${testID}-slider` : undefined, thumbTintColor: theme.primary, value: value })] }));
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+function Slider(t0) {
+  const $ = _c(30);
+  const {
+    value,
+    onChange,
+    min: t1,
+    max: t2,
+    step: t3,
+    label,
+    formatValue,
+    disabled: t4,
+    readOnly: t5,
+    accessibilityLabel,
+    accessibilityHint,
+    className,
+    testID
+  } = t0;
+  const min = t1 === undefined ? 0 : t1;
+  const max = t2 === undefined ? 100 : t2;
+  const step = t3 === undefined ? 1 : t3;
+  const disabled = t4 === undefined ? false : t4;
+  const readOnly = t5 === undefined ? false : t5;
+  const theme = useTheme();
+  const blocked = disabled || readOnly;
+  let t6;
+  if ($[0] !== className) {
+    t6 = cn("gap-1", className);
+    $[0] = className;
+    $[1] = t6;
+  } else {
+    t6 = $[1];
+  }
+  let t7;
+  if ($[2] !== formatValue || $[3] !== label || $[4] !== value) {
+    t7 = label || formatValue ? _jsxs(View, {
+      className: "flex-row items-center justify-between",
+      children: [label ? _jsx(Typography.Text, {
+        className: "text-text-primary",
+        semibold: true,
+        variant: "bodySmall",
+        children: label
+      }) : null, formatValue ? _jsx(Typography.Text, {
+        className: "text-text-secondary",
+        variant: "bodySmall",
+        children: formatValue(value)
+      }) : null]
+    }) : null;
+    $[2] = formatValue;
+    $[3] = label;
+    $[4] = value;
+    $[5] = t7;
+  } else {
+    t7 = $[5];
+  }
+  const t8 = accessibilityLabel ?? label ?? "Valor";
+  let t9;
+  if ($[6] !== blocked || $[7] !== max || $[8] !== min || $[9] !== onChange || $[10] !== step) {
+    t9 = next => {
+      if (blocked) {
+        return;
+      }
+      const snapped = step > 0 ? min + Math.round((next - min) / step) * step : next;
+      onChange(Math.min(max, Math.max(min, snapped)));
+    };
+    $[6] = blocked;
+    $[7] = max;
+    $[8] = min;
+    $[9] = onChange;
+    $[10] = step;
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  let t10;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = {
+      minHeight: 48
+    };
+    $[12] = t10;
+  } else {
+    t10 = $[12];
+  }
+  const t11 = testID ? `${testID}-slider` : undefined;
+  let t12;
+  if ($[13] !== accessibilityHint || $[14] !== blocked || $[15] !== max || $[16] !== min || $[17] !== step || $[18] !== t11 || $[19] !== t8 || $[20] !== t9 || $[21] !== theme.container.primary || $[22] !== theme.primary || $[23] !== value) {
+    t12 = _jsx(NativeSlider, {
+      accessibilityHint: accessibilityHint,
+      accessibilityLabel: t8,
+      disabled: blocked,
+      maximumTrackTintColor: theme.container.primary,
+      maximumValue: max,
+      minimumTrackTintColor: theme.primary,
+      minimumValue: min,
+      onValueChange: t9,
+      step: step,
+      style: t10,
+      testID: t11,
+      thumbTintColor: theme.primary,
+      value: value
+    });
+    $[13] = accessibilityHint;
+    $[14] = blocked;
+    $[15] = max;
+    $[16] = min;
+    $[17] = step;
+    $[18] = t11;
+    $[19] = t8;
+    $[20] = t9;
+    $[21] = theme.container.primary;
+    $[22] = theme.primary;
+    $[23] = value;
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  let t13;
+  if ($[25] !== t12 || $[26] !== t6 || $[27] !== t7 || $[28] !== testID) {
+    t13 = _jsxs(View, {
+      className: t6,
+      testID: testID,
+      children: [t7, t12]
+    });
+    $[25] = t12;
+    $[26] = t6;
+    $[27] = t7;
+    $[28] = testID;
+    $[29] = t13;
+  } else {
+    t13 = $[29];
+  }
+  return t13;
 }
 export default Slider;