@sincpro/mobile-ui 2.0.1 → 3.0.0

package/dist/Form/Form.DatePicker.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import DateTimePicker from "@react-native-community/datetimepicker";
+import DateTimePicker from "@expo/ui/community/datetime-picker";
+import { Actions } from "../Actions/index.js";
+import Sheet from "../Dialog/Dialog.Sheet.js";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-import { useTheme } from "../theme/index.js";
+import { relativeLuminance, useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import { Platform, View } from "react-native";
 function defaultFormat(value, mode) {
     if (mode === "time")
@@ -14,26 +16,119 @@ function defaultFormat(value, mode) {
         return value.toLocaleString("es-BO");
     return value.toLocaleDateString("es-BO");
 }
-const iconByMode = {
-    date: "calendar-outline",
-    time: "time-outline",
-    datetime: "calendar-outline",
-};
-/**
- * **Hybrid** date/time field: tokenized trigger (NativeWind) + **native picker**
- * (`@react-native-community/datetimepicker`) — a case where native wins (expected UX).
- * Subpath `Form/DatePicker`; **optional** peer dep.
- */
-function DatePicker({ value, onChange, mode = "date", label, placeholder = "Seleccionar…", format, minimumDate, maximumDate, disabled = false, className, testID, }) {
-    const [open, setOpen] = useState(false);
+function comparableDate(value, mode) {
+    return mode === "date"
+        ? new Date(value.getFullYear(), value.getMonth(), value.getDate()).getTime()
+        : value.getTime();
+}
+function withCalendarDay(base, day) {
+    const next = new Date(base);
+    next.setFullYear(day.getFullYear(), day.getMonth(), day.getDate());
+    return next;
+}
+function withClockTime(base, time) {
+    const next = new Date(base);
+    next.setHours(time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds());
+    return next;
+}
+function DatePicker({ value, onChange, mode = "date", label, placeholder = "Seleccionar…", format, minimumDate, maximumDate, disabled = false, readOnly = false, className, testID, }) {
     const theme = useTheme();
-    const fmt = format ?? ((d) => defaultFormat(d, mode));
-    const handleValueChange = (_event, date) => {
-        if (Platform.OS === "android")
+    const appearance = relativeLuminance(theme.bg.card) < 0.179 ? "dark" : "light";
+    const saving = useRef(false);
+    const dialogSession = useRef(0);
+    const visibleOwner = useRef(0);
+    const [open, setOpen] = useState(false);
+    const [phase, setPhase] = useState("date");
+    const [draft, setDraft] = useState(() => value ?? new Date());
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState();
+    const blocked = disabled || readOnly || pending;
+    const android = Platform.OS === "android";
+    useLayoutEffect(() => {
+        if (!android || !open)
+            return;
+        visibleOwner.current = dialogSession.current;
+    }, [android, open, phase]);
+    const fmt = format ?? ((date) => defaultFormat(date, mode));
+    const close = () => {
+        if (!saving.current)
+            setOpen(false);
+    };
+    const outOfRange = (next) => (minimumDate !== undefined &&
+        comparableDate(next, mode) < comparableDate(minimumDate, mode)) ||
+        (maximumDate !== undefined &&
+            comparableDate(next, mode) > comparableDate(maximumDate, mode));
+    const apply = async (next) => {
+        if (android)
+            setOpen(false);
+        if (blocked || saving.current)
+            return;
+        if (outOfRange(next)) {
+            setError("Selecciona una fecha y hora dentro del rango permitido.");
+            setDraft(next);
+            return;
+        }
+        saving.current = true;
+        setPending(true);
+        setError(undefined);
+        try {
+            await onChange(next);
             setOpen(false);
-        if (date)
-            onChange(date);
+        }
+        catch (cause) {
+            setDraft(next);
+            setError(cause instanceof Error && cause.message.trim()
+                ? cause.message
+                : "No se pudo aplicar la fecha. Vuelve a intentarlo.");
+        }
+        finally {
+            saving.current = false;
+            setPending(false);
+        }
+    };
+    const update = (date) => {
+        if (!date || blocked || saving.current)
+            return;
+        setDraft(date);
+        setError(undefined);
+    };
+    const confirmAndroid = (date) => {
+        if (!date || blocked || saving.current)
+            return;
+        if (mode === "datetime" && phase === "date") {
+            dialogSession.current += 1;
+            setDraft((current) => withCalendarDay(current, date));
+            setPhase("time");
+            setError(undefined);
+            return;
+        }
+        const next = mode === "datetime" ? withClockTime(draft, date) : date;
+        void apply(next);
+    };
+    const dismissAndroid = () => {
+        if (dialogSession.current !== visibleOwner.current)
+            return;
+        setOpen(false);
+    };
+    const openPicker = () => {
+        const initial = error ? draft : (value ?? new Date());
+        const clamped = minimumDate && comparableDate(initial, mode) < comparableDate(minimumDate, mode)
+            ? minimumDate
+            : maximumDate && comparableDate(initial, mode) > comparableDate(maximumDate, mode)
+                ? maximumDate
+                : initial;
+        dialogSession.current += 1;
+        visibleOwner.current = dialogSession.current;
+        setDraft(clamped);
+        setPhase("date");
+        setError(undefined);
+        setOpen(true);
     };
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre el selector de fecha", accessibilityLabel: label ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled }, accessibilityValue: { text: value ? fmt(value) : placeholder }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[48px]", disabled: disabled, onPress: () => setOpen(true), style: { minHeight: 48, minWidth: 48 }, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", value ? "text-text-primary" : "text-text-tertiary"), style: { paddingVertical: 12 }, children: value ? fmt(value) : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: iconByMode[mode], size: 18 })] }), open ? (_jsx(DateTimePicker, { maximumDate: maximumDate, minimumDate: minimumDate, mode: mode === "datetime" ? "date" : mode, onDismiss: () => setOpen(false), onValueChange: handleValueChange, value: value ?? new Date() })) : null] }));
+    const androidMode = mode === "datetime" ? phase : mode;
+    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 fecha y hora", accessibilityLabel: label ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled: blocked, expanded: open }, accessibilityValue: { text: value ? fmt(value) : placeholder }, className: "flex-row items-center gap-3 rounded-lg border border-input bg-bg-card px-3", disabled: blocked, onPress: openPicker, style: { minHeight: 48, minWidth: 48 }, children: [_jsx(Typography.Text, { className: cn("flex-1", value ? "text-text-primary" : "text-text-tertiary"), style: { paddingVertical: 12 }, children: value ? fmt(value) : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: mode === "time" ? "time" : "calendar", size: 18 })] }), android && error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: "text-danger", selectable: true, children: error })) : null, android && open ? (_jsx(DateTimePicker, { accentColor: theme.primary, display: "default", maximumDate: maximumDate, minimumDate: minimumDate, mode: androidMode, negativeButton: { label: "Cancelar" }, onDismiss: dismissAndroid, onValueChange: (_event, date) => confirmAndroid(date), positiveButton: {
+                    label: mode === "datetime" && phase === "date" ? "Continuar" : "Aplicar",
+                }, presentation: "dialog", testID: testID
+                    ? `${testID}-${androidMode === "time" ? "time" : "date"}-picker`
+                    : undefined, themeVariant: appearance, value: draft }, androidMode)) : null, android ? null : (_jsxs(Sheet, { dismissible: !pending, footer: _jsx(Actions.Button, { disabled: blocked, loading: pending, onPress: () => void apply(draft), title: "Aplicar" }), onClose: close, title: label ?? (mode === "time" ? "Seleccionar hora" : "Seleccionar fecha"), visible: open, children: [open ? (_jsx(View, { accessibilityElementsHidden: blocked, importantForAccessibility: blocked ? "no-hide-descendants" : "auto", pointerEvents: blocked ? "none" : "auto", children: _jsx(DateTimePicker, { accentColor: theme.primary, disabled: blocked, display: mode === "time" || mode === "datetime" ? "spinner" : "inline", maximumDate: maximumDate, minimumDate: minimumDate, mode: mode, onValueChange: (_event, date) => update(date), presentation: "inline", testID: testID ? `${testID}-date-picker` : undefined, themeVariant: appearance, value: draft }) })) : null, error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: "pt-3 text-danger", selectable: true, children: error })) : null] }))] }));
 }
 export default DatePicker;

package/dist/Form/Form.Dropdown.d.ts

@@ -1,26 +1,21 @@
-import { Typography } from "../Typography/index.js";
-import { type ComponentProps, type ReactNode } from "react";
-import { type TouchableOpacityProps, type ViewProps } from "react-native";
-export interface DropdownOption {
+import { type PressableProps } from "../primitives/Pressable.js";
+import { type ReactNode } from "react";
+export type DropdownOption = {
     id: string;
     title: string;
-    onPress: () => void;
+    onPress: () => void | Promise<void>;
     disabled?: boolean;
-}
-export interface DropdownButtonProps {
+};
+export type DropdownButtonProps = {
     title: string;
     options: readonly DropdownOption[];
     variant?: "primary" | "secondary" | "outline";
     size?: "xs" | "small" | "medium" | "large";
     disabled?: boolean;
-    closeAccessibilityLabel?: string;
-    buttonProps?: Omit<TouchableOpacityProps, "children" | "onPress" | "disabled">;
-    contentProps?: Omit<ViewProps, "children">;
-    optionProps?: Omit<TouchableOpacityProps, "children" | "onPress" | "disabled">;
-    titleTextProps?: ComponentProps<typeof Typography.Text>;
-    optionTextProps?: ComponentProps<typeof Typography.Text>;
+    readOnly?: boolean;
+    buttonProps?: Omit<PressableProps, "children" | "onPress" | "disabled">;
     renderOption?: (option: DropdownOption) => ReactNode;
     testID?: string;
-}
-declare function DropdownButton({ title, options, variant, size, disabled, closeAccessibilityLabel, buttonProps, contentProps, optionProps, titleTextProps, optionTextProps, renderOption, testID, }: DropdownButtonProps): import("react").JSX.Element;
-export default DropdownButton;
+};
+declare function Dropdown({ title, options, variant, size, disabled, readOnly, buttonProps, renderOption, testID, }: DropdownButtonProps): import("react").JSX.Element;
+export default Dropdown;

package/dist/Form/Form.Dropdown.js

@@ -1,100 +1,64 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import IconButton from "../Actions/Actions.IconButton.js";
+import Sheet from "../Dialog/Dialog.Sheet.js";
 import Icon from "../Display/Display.Icon.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 { useReducedMotion } from "../utils/useReducedMotion.js";
-import { useState } from "react";
-import { Modal, ScrollView, TouchableOpacity, TouchableWithoutFeedback, View, } from "react-native";
-import { tv } from "tailwind-variants";
-const dropdown = tv({
-    slots: {
-        button: "flex-row justify-between items-center rounded-lg px-3",
-        overlay: "flex-1 bg-black/40 justify-center items-center",
-        dropdownContainer: "rounded-xl mx-5 max-w-[320px] w-[90%] max-h-[70%]",
-        header: "flex-row justify-between items-center px-4 py-3 border-b border-border-default",
-        optionsList: "p-1",
-        option: "py-3 px-3 rounded-lg my-0.5",
-        separator: "h-[1px] bg-border-light mx-3",
-    },
-    variants: {
-        variant: {
-            primary: {
-                button: "bg-primary",
-            },
-            secondary: {
-                button: "bg-bg-card border border-primary",
-            },
-            outline: {
-                button: "bg-transparent border border-primary",
-            },
-        },
-        size: {
-            xs: {
-                button: "py-1.5 min-h-[32px]",
-            },
-            small: {
-                button: "py-2 min-h-[36px]",
-            },
-            medium: {
-                button: "py-2.5 min-h-[40px]",
-            },
-            large: {
-                button: "py-3 min-h-[44px]",
-            },
-        },
-        disabled: {
-            true: {
-                option: "opacity-50",
-            },
-        },
-    },
-    defaultVariants: {
-        variant: "secondary",
-        size: "small",
-    },
-});
-function DropdownButton({ title, options, variant = "secondary", size = "small", disabled = false, closeAccessibilityLabel = "Cerrar opciones", buttonProps, contentProps, optionProps, titleTextProps, optionTextProps, renderOption, testID, }) {
+import { useRef, useState } from "react";
+import { ActivityIndicator, View } from "react-native";
+function Dropdown({ title, options, variant = "secondary", size = "small", disabled = false, readOnly = false, buttonProps, renderOption, testID, }) {
     const theme = useTheme();
-    const reducedMotion = useReducedMotion();
-    const [isOpen, setIsOpen] = useState(false);
-    const handleOptionPress = (option) => {
-        if (!option.disabled) {
-            option.onPress();
-            setIsOpen(false);
+    const saving = useRef(false);
+    const [open, setOpen] = useState(false);
+    const [pending, setPending] = useState();
+    const [error, setError] = useState();
+    const blocked = disabled || readOnly || pending !== undefined;
+    const close = () => {
+        if (!saving.current)
+            setOpen(false);
+    };
+    const choose = async (option) => {
+        if (blocked || option.disabled || saving.current)
+            return;
+        saving.current = true;
+        setPending(option.id);
+        setError(undefined);
+        try {
+            await option.onPress();
+            setOpen(false);
+        }
+        catch (cause) {
+            setError(cause instanceof Error && cause.message.trim()
+                ? cause.message
+                : "No se pudo completar la acción. Vuelve a intentarlo.");
+        }
+        finally {
+            saving.current = false;
+            setPending(undefined);
         }
     };
-    const styles = dropdown({ variant, size });
-    const textColorClass = {
-        primary: "text-text-on-primary",
-        outline: "text-text-accent",
-        secondary: "text-text-accent",
-    }[variant];
-    const iconColor = {
-        primary: theme.text.onPrimary,
-        outline: theme.text.accent,
-        secondary: theme.text.accent,
-    }[variant];
-    const textVariant = {
-        large: "body",
-        medium: "body",
-        xs: "bodySmall",
-        small: "bodySmall",
-    }[size];
-    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { ...buttonProps, accessibilityLabel: buttonProps?.accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
+    return (_jsxs(_Fragment, { children: [_jsxs(Pressable, { ...buttonProps, accessibilityLabel: buttonProps?.accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
                     ...buttonProps?.accessibilityState,
-                    disabled,
-                    expanded: isOpen,
-                }, activeOpacity: 0.7, className: cn(styles.button(), buttonProps?.className), disabled: disabled, onPress: () => setIsOpen(true), style: [{ minHeight: 48, minWidth: 48 }, buttonProps?.style], testID: testID, children: [_jsx(Typography.Text, { className: textColorClass, variant: textVariant, children: title }), _jsx(Icon, { color: iconColor, name: "chevron-down", size: 16, type: "feather" })] }), _jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: () => setIsOpen(false), presentationStyle: "overFullScreen", transparent: true, visible: isOpen, children: _jsxs(View, { className: styles.overlay(), children: [_jsx(TouchableWithoutFeedback, { accessible: false, onPress: () => setIsOpen(false), children: _jsx(View, { className: "absolute inset-0" }) }), _jsxs(View, { ...contentProps, accessibilityViewIsModal: true, className: cn(styles.dropdownContainer(), contentProps?.className), onAccessibilityEscape: () => setIsOpen(false), style: [
-                                {
-                                    backgroundColor: theme.bg.popover,
-                                    ...theme.shadow.lg,
-                                },
-                                contentProps?.style,
-                            ], children: [_jsxs(View, { className: styles.header(), children: [_jsx(Typography.Text, { ...titleTextProps, accessibilityRole: "header", className: cn("text-text-primary", titleTextProps?.className), semibold: titleTextProps?.semibold ?? true, variant: titleTextProps?.variant ?? "bodyLarge", children: title }), _jsx(IconButton, { accessibilityLabel: closeAccessibilityLabel, icon: "close", onPress: () => setIsOpen(false) })] }), _jsx(ScrollView, { contentContainerClassName: styles.optionsList(), keyboardShouldPersistTaps: "handled", style: { flexShrink: 1 }, children: options.map((option, index) => (_jsxs(View, { children: [_jsx(TouchableOpacity, { ...optionProps, accessibilityLabel: option.title, accessibilityRole: "button", accessibilityState: {
-                                                    ...optionProps?.accessibilityState,
-                                                    disabled: option.disabled,
-                                                }, activeOpacity: 0.7, className: cn(dropdown({ disabled: option.disabled }).option(), optionProps?.className), disabled: option.disabled, onPress: () => handleOptionPress(option), style: [{ minHeight: 48, minWidth: 48 }, optionProps?.style], children: renderOption ? (renderOption(option)) : (_jsx(Typography.Text, { ...optionTextProps, className: cn(option.disabled ? "text-text-disabled" : "text-text-primary", optionTextProps?.className), variant: optionTextProps?.variant ?? "body", children: option.title })) }), index < options.length - 1 && _jsx(View, { className: styles.separator() })] }, option.id))) })] })] }) })] }));
+                    disabled: blocked,
+                    expanded: open,
+                }, className: cn("flex-row items-center justify-between gap-3 rounded-lg px-3", variant === "primary"
+                    ? "bg-primary"
+                    : variant === "secondary"
+                        ? "bg-bg-card border border-primary"
+                        : "bg-transparent border border-primary", buttonProps?.className), disabled: blocked, onPress: () => {
+                    setError(undefined);
+                    setOpen(true);
+                }, style: [
+                    {
+                        minHeight: 48,
+                        minWidth: 48,
+                        paddingVertical: { xs: 6, small: 8, medium: 10, large: 12 }[size],
+                    },
+                    buttonProps?.style,
+                ], testID: testID, children: [_jsx(Typography.Text, { className: variant === "primary" ? "text-text-on-primary" : "text-text-accent", variant: size === "large" || size === "medium" ? "body" : "bodySmall", children: title }), _jsx(Icon, { color: variant === "primary" ? theme.text.onPrimary : theme.text.accent, name: "expand", size: 16 })] }), _jsxs(Sheet, { dismissible: pending === undefined, onClose: close, title: title, visible: open, children: [options.map((option) => (_jsxs(Pressable, { accessibilityLabel: option.title, accessibilityRole: "button", accessibilityState: {
+                            disabled: blocked || !!option.disabled,
+                            busy: pending === option.id,
+                        }, className: "flex-row items-center gap-3 border-b border-border-light py-3", disabled: blocked || option.disabled, onPress: () => void choose(option), style: { minHeight: 48, minWidth: 48 }, children: [_jsx(View, { className: "flex-1", children: renderOption ? (renderOption(option)) : (_jsx(Typography.Text, { className: option.disabled ? "text-text-disabled" : "text-text-primary", children: option.title })) }), pending === option.id ? _jsx(ActivityIndicator, { color: theme.primary }) : null] }, option.id))), !options.length ? (_jsx(Typography.Text, { children: "No hay opciones disponibles." })) : null, error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: "pt-3 text-danger", selectable: true, children: error })) : null] })] }));
 }
-export default DropdownButton;
+export default Dropdown;

package/dist/Form/Form.FractionalQuantityInput.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { Actions } from "../Actions/index.js";
 import { Dialog } from "../Dialog/index.js";
 import { Display } from "../Display/index.js";
 import { Typography } from "../Typography/index.js";
@@ -91,8 +92,8 @@ function FractionalQuantityInput({ value, onChange, precision = 2, minIncrement,
         setDraft(String(value));
         setModalVisible(true);
     }
-    function confirmDraft() {
-        let parsed = parseLocalizedNumber(draft);
+    function confirmDraft(nextDraft) {
+        let parsed = parseLocalizedNumber(nextDraft);
         parsed = roundTo(parsed, precision);
         if (parsed < 0)
             parsed = 0;
@@ -102,17 +103,9 @@ function FractionalQuantityInput({ value, onChange, precision = 2, minIncrement,
         setModalVisible(false);
     }
     const formatted = useMemo(() => value.toFixed(precision), [value, precision]);
-    const modalChips = chips.map((item) => ({
-        label: `+${item}`,
-        onPress: () => {
-            const base = parseLocalizedNumber(draft) || 0;
-            const next = roundTo(base + item, precision);
-            setDraft(String(next));
-        },
-    }));
     const decrementStyles = fractionalQuantityInput({ disabled: disabled || value <= 0 });
     const incrementStyles = fractionalQuantityInput({ disabled });
     const containerStyles = fractionalQuantityInput();
-    return (_jsxs(View, { accessibilityLabel: `Cantidad ${formatted}`, className: containerStyles.container(), style: style, children: [_jsx(TouchableOpacity, { className: decrementStyles.button(), disabled: disabled || value <= 0, onPress: handleDecrement, children: _jsx(Display.Icon, { name: "minus", size: 16, type: "feather" }) }), _jsx(TouchableOpacity, { className: containerStyles.valueContainer(), disabled: disabled, onPress: openModal, children: _jsx(Typography.Text, { semibold: true, variant: "body", children: formatted }) }), _jsx(TouchableOpacity, { className: incrementStyles.button(), disabled: disabled, onPress: handleIncrement, children: _jsx(Display.Icon, { name: "plus", size: 16, type: "feather" }) }), _jsx(Dialog.EditValue, { chips: modalChips, keyboardType: "decimal-pad", onCancel: () => setModalVisible(false), onChangeValue: setDraft, onConfirm: confirmDraft, placeholder: `0${precision > 0 ? ",".padEnd(precision + 1, "0") : ""}`, rightAdornment: _jsxs(Typography.Text, { className: "ml-1", variant: "body", children: ["(m\u00EDn ", effectiveIncrement, ")"] }), title: "Editar cantidad", value: draft, visible: modalVisible })] }));
+    return (_jsxs(View, { accessibilityLabel: `Cantidad ${formatted}`, className: containerStyles.container(), style: style, children: [_jsx(TouchableOpacity, { className: decrementStyles.button(), disabled: disabled || value <= 0, onPress: handleDecrement, children: _jsx(Display.Icon, { name: "remove", size: 16 }) }), _jsx(TouchableOpacity, { className: containerStyles.valueContainer(), disabled: disabled, onPress: openModal, children: _jsx(Typography.Text, { semibold: true, variant: "body", children: formatted }) }), _jsx(TouchableOpacity, { className: incrementStyles.button(), disabled: disabled, onPress: handleIncrement, children: _jsx(Display.Icon, { name: "add", size: 16 }) }), _jsx(Dialog.EditValue, { footerAdornment: _jsx(View, { className: "flex-row flex-wrap gap-2", children: chips.map((item, index) => (_jsx(Actions.Button, { onPress: () => setDraft((current) => String(roundTo(parseLocalizedNumber(current) + item, precision))), size: "small", title: `+${item}`, variant: "secondary" }, `${item}-${index}`))) }), keyboardType: "decimal-pad", onChange: setDraft, onClose: () => setModalVisible(false), onConfirm: confirmDraft, placeholder: `0${precision > 0 ? ",".padEnd(precision + 1, "0") : ""}`, rightAdornment: _jsxs(Typography.Text, { className: "ml-1", variant: "body", children: ["(m\u00EDn ", effectiveIncrement, ")"] }), title: "Editar cantidad", value: draft, visible: modalVisible })] }));
 }
 export default FractionalQuantityInput;

package/dist/Form/Form.Input.d.ts

@@ -1,7 +1,7 @@
-import type { ComponentRef, Ref } from "react";
-import { TextInput, type TextInputProps } from "react-native";
+import type { Ref } from "react";
+import { type TextInputInstance, type TextInputProps } from "react-native";
 interface FormInputProps extends TextInputProps {
-    ref?: Ref<ComponentRef<typeof TextInput>>;
+    ref?: Ref<TextInputInstance>;
     label: string;
     error?: string;
     tooltip?: string;

package/dist/Form/Form.KeyboardForm.d.ts

@@ -5,7 +5,7 @@ export interface KeyboardFormProps extends KeyboardAwareScrollViewProps {
     children: ReactNode;
     ref?: Ref<KeyboardAwareScrollViewRef>;
     toolbar?: boolean;
+    stickyFooterHeight?: number;
     toolbarProps?: Omit<KeyboardToolbarProps, "onHeightChange">;
-    toolbarLabels?: Pick<KeyboardToolbarProps, "previousLabel" | "nextLabel" | "doneLabel" | "showDoneLabel">;
 }
-export default function KeyboardForm({ children, toolbar, toolbarLabels, toolbarProps, bottomOffset, style, ...props }: KeyboardFormProps): import("react").JSX.Element;
+export default function KeyboardForm({ children, toolbar, stickyFooterHeight, toolbarProps, bottomOffset, style, ...props }: KeyboardFormProps): import("react").JSX.Element;

package/dist/Form/Form.KeyboardForm.js

@@ -3,7 +3,7 @@ import KeyboardToolbar from "./Form.KeyboardToolbar.js";
 import { useState } from "react";
 import { View } from "react-native";
 import { KeyboardAwareScrollView, KeyboardToolbar as NativeToolbar, } from "react-native-keyboard-controller";
-export default function KeyboardForm({ children, toolbar = true, toolbarLabels, toolbarProps, bottomOffset, style, ...props }) {
+export default function KeyboardForm({ children, toolbar = true, stickyFooterHeight = 0, toolbarProps, bottomOffset, style, ...props }) {
     const [toolbarHeight, setToolbarHeight] = useState(48);
-    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(NativeToolbar.Group, { style: { flex: 1 }, children: _jsx(KeyboardAwareScrollView, { bottomOffset: bottomOffset ?? (toolbar ? toolbarHeight + 24 : 20), keyboardShouldPersistTaps: "handled", style: [{ flex: 1 }, style], ...props, children: children }) }), toolbar ? (_jsx(KeyboardToolbar, { ...toolbarLabels, ...toolbarProps, onHeightChange: setToolbarHeight })) : null] }));
+    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(NativeToolbar.Group, { style: { flex: 1 }, children: _jsx(KeyboardAwareScrollView, { bottomOffset: bottomOffset ?? stickyFooterHeight + (toolbar ? toolbarHeight + 24 : 24), keyboardShouldPersistTaps: "handled", style: [{ flex: 1 }, style], ...props, children: children }) }), toolbar ? (_jsx(KeyboardToolbar, { ...toolbarProps, bottomGapOffset: -stickyFooterHeight, onHeightChange: setToolbarHeight })) : null] }));
 }

package/dist/Form/Form.KeyboardToolbar.d.ts

@@ -12,10 +12,11 @@ export interface KeyboardToolbarProps {
     actionStyle?: StyleProp<ViewStyle>;
     labelStyle?: StyleProp<TextStyle>;
     iconSize?: number;
+    bottomGapOffset?: number;
     testID?: string;
     renderActionContent?: (action: KeyboardToolbarAction, state: {
         label: string;
         disabled: boolean;
     }) => ReactNode;
 }
-export default function KeyboardToolbar({ previousLabel, nextLabel, doneLabel, showDoneLabel, onHeightChange, className, style, actionStyle, labelStyle, iconSize, testID, renderActionContent, }: KeyboardToolbarProps): import("react").JSX.Element;
+export default function KeyboardToolbar({ previousLabel, nextLabel, doneLabel, showDoneLabel, onHeightChange, className, style, actionStyle, labelStyle, iconSize, bottomGapOffset, testID, renderActionContent, }: KeyboardToolbarProps): import("react").JSX.Element;

package/dist/Form/Form.KeyboardToolbar.js

@@ -6,7 +6,7 @@ import { Typography } from "../Typography/index.js";
 import { useEffect, useRef, useState } from "react";
 import { StyleSheet, useWindowDimensions, View, } from "react-native";
 import { FocusedInputEvents, KeyboardController, KeyboardStickyView, useKeyboardState, } from "react-native-keyboard-controller";
-export default function KeyboardToolbar({ previousLabel = "Campo anterior", nextLabel = "Campo siguiente", doneLabel = "Ocultar teclado", showDoneLabel = false, onHeightChange, className, style, actionStyle, labelStyle, iconSize = 20, testID = "keyboard-toolbar", renderActionContent, }) {
+export default function KeyboardToolbar({ previousLabel = "Campo anterior", nextLabel = "Campo siguiente", doneLabel = "Ocultar teclado", showDoneLabel = false, onHeightChange, className, style, actionStyle, labelStyle, iconSize = 20, bottomGapOffset = 0, testID = "keyboard-toolbar", renderActionContent, }) {
     const theme = useTheme();
     const frame = useRef(null);
     const { height: windowHeight } = useWindowDimensions();
@@ -25,15 +25,11 @@ export default function KeyboardToolbar({ previousLabel = "Campo anterior", next
             return renderActionContent(action, { label, disabled });
         if (action === "done" && showDoneLabel)
             return (_jsx(Typography.Text, { className: "text-text-accent", style: labelStyle, variant: "bodySmall", children: label }));
-        return (_jsx(Icon, { color: disabled ? theme.text.tertiary : theme.text.accent, name: action === "previous"
-                ? "chevron-up"
-                : action === "next"
-                    ? "chevron-down"
-                    : "checkmark", size: iconSize }));
+        return (_jsx(Icon, { color: disabled ? theme.text.tertiary : theme.text.accent, name: action === "previous" ? "collapse" : action === "next" ? "expand" : "check", size: iconSize }));
     };
     return (_jsx(View, { accessibilityElementsHidden: !isVisible, importantForAccessibility: isVisible ? "auto" : "no-hide-descendants", onLayout: () => {
             frame.current?.measureInWindow((_x, y, _width, frameHeight) => setBottomGap(Math.max(0, windowHeight - y - frameHeight)));
-        }, pointerEvents: "box-none", ref: frame, style: StyleSheet.absoluteFill, children: _jsx(KeyboardStickyView, { offset: { closed: height, opened: bottomGap - 8 }, style: { position: "absolute", bottom: 0, left: 0, right: 0 }, children: _jsxs(View, { className: className, onLayout: (event) => {
+        }, pointerEvents: "box-none", ref: frame, style: StyleSheet.absoluteFill, children: _jsx(KeyboardStickyView, { offset: { closed: height, opened: bottomGap + bottomGapOffset - 8 }, style: { position: "absolute", bottom: 0, left: 0, right: 0 }, children: _jsxs(View, { className: className, onLayout: (event) => {
                     const nextHeight = event.nativeEvent.layout.height;
                     setHeight(nextHeight);
                     onHeightChange?.(nextHeight);

package/dist/Form/Form.PasswordInput.js

@@ -12,6 +12,6 @@ const PasswordField = ({ label, error, inputProps }) => {
                     secureTextEntry: !showPassword,
                     autoComplete: "off",
                     importantForAutofill: "no",
-                }, label: label }), _jsx(TouchableOpacity, { className: "absolute right-3 bottom-[25px]", hitSlop: 8, onPress: () => setShowPassword(!showPassword), children: _jsx(Display.Icon, { color: theme.text.primary, name: showPassword ? "eye-off-outline" : "eye-outline", size: 22, type: "ionicons" }) })] }));
+                }, label: label }), _jsx(TouchableOpacity, { className: "absolute right-3 bottom-[25px]", hitSlop: 8, onPress: () => setShowPassword(!showPassword), children: _jsx(Display.Icon, { color: theme.text.primary, name: showPassword ? "hidden" : "visibility", size: 22 }) })] }));
 };
 export default PasswordField;

package/dist/Form/Form.QuantitySelector.js

@@ -31,6 +31,6 @@ function QuantitySelector({ value, onChange, min = 1, max = 999, style, }) {
     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: "minus", size: 16, type: "feather" }) }), _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: "plus", size: 16, type: "feather" }) })] }));
+    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 }) })] }));
 }
 export default QuantitySelector;

package/dist/Form/Form.Select.d.ts

@@ -1,18 +1,22 @@
-export interface SelectOption<T extends string | number> {
+export type SelectOption<T extends string | number> = {
     label: string;
     value: T;
-}
-export interface SelectProps<T extends string | number> {
-    options: SelectOption<T>[];
+};
+export type SelectProps<T extends string | number> = {
+    options: readonly SelectOption<T>[];
     value: T | null;
-    onChange: (value: T) => void;
+    onChange: (value: T) => void | Promise<void>;
+    onBlur?: () => void;
     label?: string;
     placeholder?: string;
     title?: string;
+    confirmLabel?: string;
     disabled?: boolean;
+    readOnly?: boolean;
+    loading?: boolean;
+    error?: string;
     className?: string;
     testID?: string;
-    showCloseButton?: boolean;
-}
-declare function Select<T extends string | number>({ options, value, onChange, label, placeholder, title, disabled, className, testID, showCloseButton, }: SelectProps<T>): import("react").JSX.Element;
+};
+declare function Select<T extends string | number>({ options, value, onChange, onBlur, label, placeholder, title, confirmLabel, disabled, readOnly, loading, error, className, testID, }: SelectProps<T>): import("react").JSX.Element;
 export default Select;