@sincpro/mobile-ui 1.1.0 → 2.0.0

package/dist/Feedback/Toast.context.js

@@ -1,13 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Icon from "../Display/Display.Icon.js";
+import Spinner from "./Feedback.Spinner.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
-import { tv } from "../theme/tw.js";
+import { useTheme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
-import { ActivityIndicator, View } from "react-native";
+import { useReducedMotion } from "../utils/useReducedMotion.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { View } from "react-native";
+import { GestureDetector, usePanGesture } from "react-native-gesture-handler";
 import Animated, { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+function ToastRoot({ children, accessibilityHint = "Usa Cerrar o desliza hacia arriba o abajo para cerrar", className, position = "top", style, testID, ...viewProps }) {
+    const reducedMotion = useReducedMotion();
+    const styles = toast();
+    const entering = position === "top" ? FadeInDown : FadeInUp;
+    const exiting = position === "top" ? FadeOutUp : FadeOutDown;
+    return (_jsx(Animated.View, { ...viewProps, accessibilityHint: accessibilityHint, accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: styles.root({ className }), entering: reducedMotion ? undefined : entering.duration(220), exiting: reducedMotion ? undefined : exiting.duration(180), style: style, testID: testID, children: children }));
+}
+function ToastIcon({ variant = "info", icon, color, size = 22 }) {
+    const theme = useTheme();
+    if (icon)
+        return _jsx(_Fragment, { children: icon });
+    if (variant === "loading") {
+        return (_jsx(Spinner, { accessibilityLabel: "Cargando", color: color ?? theme.text.accent, size: "small" }));
+    }
+    const colors = {
+        info: theme.info,
+        success: theme.success,
+        warning: theme.warning,
+        danger: theme.danger,
+    };
+    return _jsx(Icon, { color: color ?? colors[variant], name: iconByVariant[variant], size: size });
+}
+function ToastContent({ children, className, style }) {
+    return (_jsx(View, { className: cn("flex-1", className), style: style, children: children }));
+}
+function ToastTitle({ children, className }) {
+    return (_jsx(Typography.Text, { className: cn("text-sm font-semibold text-text-primary", className), children: children }));
+}
+function ToastDescription({ children, className }) {
+    return (_jsx(Typography.Text, { className: cn("text-sm text-text-secondary", className), children: children }));
+}
+function ToastActionButton({ label, onPress, className, style, ...props }) {
+    return (_jsx(Pressable, { ...props, accessibilityLabel: label, accessibilityRole: "button", className: cn("min-h-12 justify-center px-2", className), onPress: onPress, style: [{ minHeight: 48, minWidth: 48 }, style], children: _jsx(Typography.Text, { className: "text-sm font-semibold text-text-accent", children: label }) }));
+}
+function ToastClose({ onPress, accessibilityLabel = "Cerrar", className, style, ...props }) {
+    const theme = useTheme();
+    return (_jsx(Pressable, { ...props, accessibilityLabel: accessibilityLabel, accessibilityRole: "button", className: cn("min-h-12 min-w-12 items-center justify-center", className), hitSlop: 8, onPress: onPress, style: [{ minHeight: 48, minWidth: 48 }, style], children: _jsx(Icon, { color: theme.text.tertiary, name: "close", size: 18 }) }));
+}
+export const Toast = {
+    Root: ToastRoot,
+    Icon: ToastIcon,
+    Content: ToastContent,
+    Title: ToastTitle,
+    Description: ToastDescription,
+    Action: ToastActionButton,
+    Close: ToastClose,
+};
 const ToastContext = createContext(null);
 const DEFAULT_DURATION = 3500;
 // iOS-style card: rounded, hairline border + soft shadow, neutral surface. The variant is
@@ -20,39 +70,54 @@ const toast = tv({
     },
 });
 const iconByVariant = {
-    info: { name: "information-circle", color: theme.info },
-    success: { name: "checkmark-circle", color: theme.success },
-    warning: { name: "warning", color: theme.warning },
-    danger: { name: "close-circle", color: theme.danger },
+    info: "information-circle",
+    success: "checkmark-circle",
+    warning: "warning",
+    danger: "close-circle",
 };
-function ToastItem({ entry, onHide, position, }) {
+function ToastItem({ entry, onHide, onUpdate, position, }) {
     const variant = entry.variant ?? "info";
-    const styles = toast();
-    const entering = position === "top" ? FadeInDown : FadeInUp;
-    const exiting = position === "top" ? FadeOutUp : FadeOutDown;
-    const resolvedDuration = entry.duration ?? (variant === "loading" ? 0 : DEFAULT_DURATION);
-    const showClose = entry.dismissible ?? resolvedDuration === 0;
-    return (_jsxs(Animated.View, { accessibilityLiveRegion: "polite", accessible: true, className: styles.root(), entering: entering.duration(220), exiting: exiting.duration(180), children: [variant === "loading" ? (_jsx(ActivityIndicator, { color: theme.text.accent, size: "small" })) : (_jsx(Icon, { color: iconByVariant[variant].color, name: iconByVariant[variant].name, size: 22 })), _jsxs(View, { className: "flex-1", children: [entry.title ? (_jsx(Typography.Text, { className: styles.title(), children: entry.title })) : null, _jsx(Typography.Text, { className: styles.message(), children: entry.message })] }), entry.action ? (_jsx(Pressable, { accessibilityLabel: entry.action.label, onPress: () => {
-                    entry.action?.onPress();
-                    onHide(entry.id);
-                }, children: _jsx(Typography.Text, { className: "text-text-accent text-sm font-semibold", children: entry.action.label }) })) : null, showClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: () => onHide(entry.id), children: _jsx(Icon, { color: theme.text.tertiary, name: "close", size: 18 }) })) : null] }));
+    const showClose = entry.dismissible ?? true;
+    const dismiss = () => onHide(entry.id);
+    const pan = usePanGesture({
+        activeOffsetY: [-12, 12],
+        failOffsetX: [-24, 24],
+        onDeactivate: ({ canceled, translationY, velocityY }) => {
+            if (!canceled && (Math.abs(translationY) >= 48 || Math.abs(velocityY) >= 800)) {
+                dismiss();
+            }
+        },
+    });
+    return (_jsx(GestureDetector, { gesture: pan, children: _jsx(Toast.Root, { className: entry.className, onAccessibilityEscape: dismiss, position: position, children: entry.render ? (entry.render({
+                dismiss,
+                id: entry.id,
+                update: (options) => onUpdate(entry.id, options),
+            })) : (_jsxs(_Fragment, { children: [_jsx(Toast.Icon, { variant: variant }), _jsxs(Toast.Content, { children: [entry.title ? _jsx(Toast.Title, { children: entry.title }) : null, entry.message ? _jsx(Toast.Description, { children: entry.message }) : null] }), entry.action ? (_jsx(Toast.Action, { label: entry.action.label, onPress: () => {
+                            entry.action?.onPress();
+                            dismiss();
+                        } })) : null, showClose ? _jsx(Toast.Close, { onPress: dismiss }) : null] })) }) }));
 }
 export function ToastProvider({ children, position = "bottom", }) {
     const insets = useSafeAreaInsets();
     const [toasts, setToasts] = useState([]);
+    const toastsRef = useRef([]);
     const counter = useRef(0);
     const timers = useRef({});
+    const commitToasts = useCallback((next) => {
+        toastsRef.current = next;
+        setToasts(next);
+    }, []);
     const clearTimer = useCallback((id) => {
         const timer = timers.current[id];
-        if (timer) {
+        if (timer !== undefined) {
             clearTimeout(timer);
             delete timers.current[id];
         }
     }, []);
     const hide = useCallback((id) => {
-        setToasts((prev) => prev.filter((t) => t.id !== id));
+        commitToasts(toastsRef.current.filter((t) => t.id !== id));
         clearTimer(id);
-    }, [clearTimer]);
+    }, [clearTimer, commitToasts]);
     const scheduleDismiss = useCallback((id, variant, duration) => {
         clearTimer(id);
         const resolved = duration ?? (variant === "loading" ? 0 : DEFAULT_DURATION);
@@ -67,16 +132,32 @@ export function ToastProvider({ children, position = "bottom", }) {
             id = `toast-${counter.current}`;
         }
         const toastId = id;
-        setToasts((prev) => prev.some((t) => t.id === toastId)
-            ? prev.map((t) => (t.id === toastId ? { ...t, ...options, id: toastId } : t))
-            : [...prev, { ...options, id: toastId }]);
-        scheduleDismiss(toastId, options.variant, options.duration);
+        const current = toastsRef.current;
+        const currentEntry = current.find((entry) => entry.id === toastId);
+        const nextEntry = {
+            ...currentEntry,
+            ...options,
+            id: toastId,
+            message: options.message ?? currentEntry?.message ?? "",
+        };
+        commitToasts(currentEntry
+            ? current.map((entry) => (entry.id === toastId ? nextEntry : entry))
+            : [...current, nextEntry]);
+        scheduleDismiss(toastId, nextEntry.variant, nextEntry.duration);
         return toastId;
-    }, [scheduleDismiss]);
+    }, [commitToasts, scheduleDismiss]);
     const update = useCallback((id, options) => {
-        setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, ...options } : t)));
-        scheduleDismiss(id, options.variant, options.duration);
-    }, [scheduleDismiss]);
+        const current = toastsRef.current.find((entry) => entry.id === id);
+        if (!current)
+            return;
+        const updated = { ...current, ...options, id };
+        commitToasts(toastsRef.current.map((entry) => (entry.id === id ? updated : entry)));
+        scheduleDismiss(id, updated.variant, updated.duration);
+    }, [commitToasts, scheduleDismiss]);
+    useEffect(() => () => {
+        Object.values(timers.current).forEach(clearTimeout);
+        timers.current = {};
+    }, []);
     const value = useMemo(() => {
         const promise = (p, messages) => {
             const id = show({ message: messages.loading, variant: "loading", duration: 0 });
@@ -110,7 +191,7 @@ export function ToastProvider({ children, position = "bottom", }) {
             promise,
         };
     }, [show, update, hide]);
-    return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx(View, { className: "absolute left-0 right-0 px-4 gap-2 z-toast", pointerEvents: "box-none", style: position === "top" ? { top: insets.top + 12 } : { bottom: insets.bottom + 12 }, children: toasts.map((entry) => (_jsx(ToastItem, { entry: entry, onHide: hide, position: position }, entry.id))) })] }));
+    return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx(View, { className: "absolute left-0 right-0 px-4 gap-2 z-toast", pointerEvents: "box-none", style: position === "top" ? { top: insets.top + 12 } : { bottom: insets.bottom + 12 }, children: toasts.map((entry) => (_jsx(ToastItem, { entry: entry, onHide: hide, onUpdate: update, position: position }, entry.id))) })] }));
 }
 export function useToast() {
     const ctx = useContext(ToastContext);

package/dist/Feedback/index.d.ts

@@ -9,7 +9,12 @@ import ProgressCircle from "./Feedback.ProgressCircle.js";
 import Skeleton from "./Feedback.Skeleton.js";
 import SplashScreen from "./Feedback.Splash.js";
 export { ErrorBoundary } from "./ErrorBoundary.js";
-export { type ToastAction, type ToastContextValue, type ToastOptions, type ToastPromiseMessages, ToastProvider, type ToastVariant, useToast, } from "./Toast.context.js";
+export type { ProgressProps } from "./Feedback.Progress.js";
+export type { ProgressCircleProps } from "./Feedback.ProgressCircle.js";
+export type { SkeletonProps } from "./Feedback.Skeleton.js";
+export type { SpinnerProps, SpinnerVariant, } from "./Feedback.Spinner.js";
+export { Toast, type ToastAction, type ToastActionProps, type ToastCloseProps, type ToastContentProps, type ToastContextValue, type ToastCustomOptions, type ToastIconProps, type ToastOptions, type ToastPromiseMessages, ToastProvider, type ToastRenderProps, type ToastRootProps, type ToastTextProps, type ToastVariant, useToast, } from "./Toast.context.js";
+export { useReducedMotion } from "../utils/useReducedMotion.js";
 export declare const Feedback: {
     Loading: typeof Loading;
     Spinner: import("react").FC<import("./Feedback.Spinner.js").SpinnerProps>;
@@ -22,5 +27,14 @@ export declare const Feedback: {
     EmptyState: typeof EmptyState;
     Error: typeof Error;
     SplashScreen: typeof SplashScreen;
+    Toast: {
+        Root: ({ children, accessibilityHint, className, position, style, testID, ...viewProps }: import("./Toast.context.js").ToastRootProps) => import("react").JSX.Element;
+        Icon: ({ variant, icon, color, size }: import("./Toast.context.js").ToastIconProps) => import("react").JSX.Element;
+        Content: ({ children, className, style }: import("./Toast.context.js").ToastContentProps) => import("react").JSX.Element;
+        Title: ({ children, className }: import("./Toast.context.js").ToastTextProps) => import("react").JSX.Element;
+        Description: ({ children, className }: import("./Toast.context.js").ToastTextProps) => import("react").JSX.Element;
+        Action: ({ label, onPress, className, style, ...props }: import("./Toast.context.js").ToastActionProps) => import("react").JSX.Element;
+        Close: ({ onPress, accessibilityLabel, className, style, ...props }: import("./Toast.context.js").ToastCloseProps) => import("react").JSX.Element;
+    };
 };
 export default Feedback;

package/dist/Feedback/index.js

@@ -9,8 +9,10 @@ import ProgressCircle from "./Feedback.ProgressCircle.js";
 import Skeleton from "./Feedback.Skeleton.js";
 import Spinner from "./Feedback.Spinner.js";
 import SplashScreen from "./Feedback.Splash.js";
+import { Toast } from "./Toast.context.js";
 export { ErrorBoundary } from "./ErrorBoundary.js";
-export { ToastProvider, useToast, } from "./Toast.context.js";
+export { Toast, ToastProvider, useToast, } from "./Toast.context.js";
+export { useReducedMotion } from "../utils/useReducedMotion.js";
 export const Feedback = {
     Loading,
     Spinner,
@@ -23,5 +25,6 @@ export const Feedback = {
     EmptyState,
     Error,
     SplashScreen,
+    Toast,
 };
 export default Feedback;

package/dist/Form/Form.Checkbox.d.ts

@@ -8,9 +8,8 @@ interface RowCheckBoxProps {
     onCheck?: (isChecked: boolean) => void;
     disabled?: boolean;
     accessibilityLabel?: string;
-    accessibleSizing?: boolean;
     className?: string;
     testID?: string;
 }
-declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, accessibilityLabel, accessibleSizing, className, testID, }: RowCheckBoxProps): import("react").JSX.Element;
+declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, accessibilityLabel, className, testID, }: RowCheckBoxProps): import("react").JSX.Element;
 export default RowCheckBox;

package/dist/Form/Form.Checkbox.js

@@ -4,7 +4,7 @@ import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { Checkbox } from "expo-checkbox";
 import { Pressable, View } from "react-native";
-function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked = false, onCheck = () => { }, disabled = false, accessibilityLabel, accessibleSizing = false, className, testID, }) {
+function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked = false, onCheck = () => { }, disabled = false, accessibilityLabel, className, testID, }) {
     const handlePress = () => {
         if (!disabled) {
             onCheck(!isChecked);
@@ -25,6 +25,6 @@ function RowCheckBox({ mainText, subText, rightText, rightComponent, leftCompone
         }
         return null;
     };
-    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? [mainText, subText, rightText].filter(Boolean).join(", "), accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, className: cn("flex-row justify-between items-center", disabled && "opacity-50", className), disabled: disabled, onPress: handlePress, style: accessibleSizing ? { minHeight: 48, paddingVertical: 8 } : undefined, testID: testID, children: [_jsx(View, { children: renderLeftComponent() }), _jsxs(View, { className: "flex-row items-center", children: [renderRightComponent(), _jsx(Checkbox, { className: "ml-2", color: theme.primary, disabled: disabled, pointerEvents: "none", value: isChecked })] })] }));
+    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? [mainText, subText, rightText].filter(Boolean).join(", "), accessibilityRole: "checkbox", accessibilityState: { checked: isChecked, disabled }, className: cn("flex-row justify-between items-center", disabled && "opacity-50", className), disabled: disabled, onPress: handlePress, style: { minHeight: 48, minWidth: 48, paddingVertical: 8 }, testID: testID, children: [_jsx(View, { className: "flex-1 min-w-0", children: renderLeftComponent() }), _jsxs(View, { className: "flex-row items-center flex-shrink", children: [renderRightComponent(), _jsx(Checkbox, { accessibilityElementsHidden: true, accessible: false, className: "ml-2", color: theme.primary, disabled: disabled, importantForAccessibility: "no-hide-descendants", pointerEvents: "none", value: isChecked })] })] }));
 }
 export default RowCheckBox;

package/dist/Form/Form.DatePicker.d.ts

@@ -8,7 +8,6 @@ export interface DatePickerProps {
     minimumDate?: Date;
     maximumDate?: Date;
     disabled?: boolean;
-    accessibleSizing?: boolean;
     className?: string;
     testID?: string;
 }
@@ -17,5 +16,5 @@ export interface DatePickerProps {
  * (`@react-native-community/datetimepicker`) — a case where native wins (expected UX).
  * Subpath `Form/DatePicker`; **optional** peer dep.
  */
-declare function DatePicker({ value, onChange, mode, label, placeholder, format, minimumDate, maximumDate, disabled, accessibleSizing, className, testID, }: DatePickerProps): import("react").JSX.Element;
+declare function DatePicker({ value, onChange, mode, label, placeholder, format, minimumDate, maximumDate, disabled, className, testID, }: DatePickerProps): import("react").JSX.Element;
 export default DatePicker;

package/dist/Form/Form.DatePicker.js

@@ -24,7 +24,7 @@ const iconByMode = {
  * (`@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, accessibleSizing = false, className, testID, }) {
+function DatePicker({ value, onChange, mode = "date", label, placeholder = "Seleccionar…", format, minimumDate, maximumDate, disabled = false, className, testID, }) {
     const [open, setOpen] = useState(false);
     const theme = useTheme();
     const fmt = format ?? ((d) => defaultFormat(d, mode));
@@ -34,6 +34,6 @@ function DatePicker({ value, onChange, mode = "date", label, placeholder = "Sele
         if (date)
             onChange(date);
     };
-    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-[44px]", disabled: disabled, onPress: () => setOpen(true), style: accessibleSizing ? { minHeight: 48 } : undefined, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", value ? "text-text-primary" : "text-text-tertiary"), 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] }));
+    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] }));
 }
 export default DatePicker;

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

@@ -1,14 +1,26 @@
+import { Typography } from "../Typography/index.js";
+import { type ComponentProps, type ReactNode } from "react";
+import { type TouchableOpacityProps, type ViewProps } from "react-native";
 export interface DropdownOption {
     id: string;
     title: string;
     onPress: () => void;
     disabled?: boolean;
 }
-interface DropdownButtonProps {
+export interface DropdownButtonProps {
     title: string;
-    options: DropdownOption[];
+    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>;
+    renderOption?: (option: DropdownOption) => ReactNode;
+    testID?: string;
 }
-declare function DropdownButton({ title, options, variant, size, }: DropdownButtonProps): import("react").JSX.Element;
+declare function DropdownButton({ title, options, variant, size, disabled, closeAccessibilityLabel, buttonProps, contentProps, optionProps, titleTextProps, optionTextProps, renderOption, testID, }: DropdownButtonProps): import("react").JSX.Element;
 export default DropdownButton;

package/dist/Form/Form.Dropdown.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { Display } from "../Display/index.js";
-import { theme } from "../theme/index.js";
+import IconButton from "../Actions/Actions.IconButton.js";
+import Icon from "../Display/Display.Icon.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, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
+import { Modal, ScrollView, TouchableOpacity, TouchableWithoutFeedback, View, } from "react-native";
 import { tv } from "tailwind-variants";
 const dropdown = tv({
     slots: {
@@ -52,7 +55,9 @@ const dropdown = tv({
         size: "small",
     },
 });
-function DropdownButton({ title, options, variant = "secondary", size = "small", }) {
+function DropdownButton({ title, options, variant = "secondary", size = "small", disabled = false, closeAccessibilityLabel = "Cerrar opciones", buttonProps, contentProps, optionProps, titleTextProps, optionTextProps, renderOption, testID, }) {
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
     const [isOpen, setIsOpen] = useState(false);
     const handleOptionPress = (option) => {
         if (!option.disabled) {
@@ -77,9 +82,19 @@ function DropdownButton({ title, options, variant = "secondary", size = "small",
         xs: "bodySmall",
         small: "bodySmall",
     }[size];
-    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: styles.button(), onPress: () => setIsOpen(true), children: [_jsx(Typography.Text, { className: textColorClass, variant: textVariant, children: title }), _jsx(Display.Icon, { color: iconColor, name: "chevron-down", size: 16, type: "feather" })] }), _jsx(Modal, { animationType: "fade", presentationStyle: "overFullScreen", transparent: true, visible: isOpen, children: _jsx(TouchableWithoutFeedback, { onPress: () => setIsOpen(false), children: _jsx(View, { className: styles.overlay(), children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { className: styles.dropdownContainer(), style: {
+    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { ...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,
-                                }, children: [_jsxs(View, { className: styles.header(), children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "bodyLarge", children: title }), _jsx(TouchableOpacity, { onPress: () => setIsOpen(false), children: _jsx(Display.Icon, { name: "x", size: 20, type: "feather" }) })] }), _jsx(View, { className: styles.optionsList(), children: options.map((option, index) => (_jsxs(View, { children: [_jsx(TouchableOpacity, { activeOpacity: 0.7, className: dropdown({ disabled: option.disabled }).option(), disabled: option.disabled, onPress: () => handleOptionPress(option), children: _jsx(Typography.Text, { className: option.disabled ? "text-text-disabled" : "text-text-primary", variant: "body", children: option.title }) }), index < options.length - 1 && _jsx(View, { className: styles.separator() })] }, option.id))) })] }) }) }) }) })] }));
+                                },
+                                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))) })] })] }) })] }));
 }
 export default DropdownButton;

package/dist/Form/Form.ErrorSummary.d.ts

@@ -0,0 +1,23 @@
+import { Typography } from "../Typography/index.js";
+import { type ComponentProps, type ReactNode } from "react";
+import { type StyleProp, type ViewProps, type ViewStyle } from "react-native";
+export interface ErrorSummaryItem {
+    readonly id: string;
+    readonly label: string;
+    readonly message: string;
+}
+export interface ErrorSummaryProps extends Omit<ViewProps, "children"> {
+    errors: readonly ErrorSummaryItem[];
+    onSelectError: (id: string) => void;
+    title?: string;
+    announce?: boolean;
+    className?: string;
+    itemStyle?: StyleProp<ViewStyle>;
+    /** Custom content must preserve the message and remain scalable, multiline and non-interactive. */
+    renderErrorContent?: (error: ErrorSummaryItem, index: number) => ReactNode;
+    /** Custom content must remain scalable and multiline; the wrapper owns header semantics. */
+    renderHeader?: (title: string) => ReactNode;
+    itemTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children" | "accessibilityRole" | "allowFontScaling" | "numberOfLines">;
+    titleTextProps?: Omit<ComponentProps<typeof Typography.Text>, "children" | "accessibilityRole" | "allowFontScaling" | "numberOfLines">;
+}
+export default function ErrorSummary({ errors, onSelectError, title, announce, className, style, itemStyle, renderErrorContent, renderHeader, itemTextProps, titleTextProps, ...props }: ErrorSummaryProps): import("react").JSX.Element | null;

package/dist/Form/Form.ErrorSummary.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
+import { uniqueKeys } from "../utils/keys.js";
+import { useEffect, useRef } from "react";
+import { AccessibilityInfo, StyleSheet, View, } from "react-native";
+export default function ErrorSummary({ errors, onSelectError, title = "Revisa los siguientes errores", announce = true, className, style, itemStyle, renderErrorContent, renderHeader, itemTextProps, titleTextProps, ...props }) {
+    const theme = useTheme();
+    const nonemptyEpisode = useRef(false);
+    uniqueKeys(errors, (error) => error.id, "ErrorSummary");
+    for (const { label, message } of errors) {
+        if (typeof label !== "string" || !label.trim())
+            throw new Error("Form.ErrorSummary requires non-empty error labels.");
+        if (typeof message !== "string" || !message.trim())
+            throw new Error("Form.ErrorSummary requires non-empty error messages.");
+    }
+    useEffect(() => {
+        if (errors.length === 0) {
+            nonemptyEpisode.current = false;
+            return;
+        }
+        if (nonemptyEpisode.current)
+            return;
+        nonemptyEpisode.current = true;
+        if (announce)
+            AccessibilityInfo.announceForAccessibility([title, ...errors.map(({ label, message }) => `${label}: ${message}`)].join("\n"));
+    }, [announce, errors, title]);
+    if (errors.length === 0)
+        return null;
+    return (_jsxs(View, { className: className, style: [
+            {
+                backgroundColor: theme.bg.card,
+                borderColor: theme.danger,
+                borderWidth: 2,
+                borderRadius: 8,
+                padding: 16,
+                gap: 8,
+            },
+            style,
+        ], ...props, children: [renderHeader ? (_jsx(View, { accessibilityLabel: title, accessibilityRole: "header", accessible: true, children: renderHeader(title) })) : (_jsx(Typography.Text, { semibold: true, variant: "body", ...titleTextProps, accessibilityRole: "header", allowFontScaling: true, numberOfLines: 0, children: title })), errors.map((error, index) => (_jsx(Pressable, { accessibilityLabel: `${error.label}: ${error.message}`, accessibilityRole: "button", accessible: true, hitSlop: 0, onPress: () => onSelectError(error.id), style: [styles.item, itemStyle, styles.target], children: renderErrorContent ? (renderErrorContent(error, index)) : (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { semibold: true, variant: "bodySmall", ...itemTextProps, allowFontScaling: true, numberOfLines: 0, children: error.label }), _jsx(Typography.Text, { className: "text-text-accent", underline: true, ...itemTextProps, allowFontScaling: true, numberOfLines: 0, children: error.message })] })) }, error.id)))] }));
+}
+const styles = StyleSheet.create({
+    item: {
+        justifyContent: "center",
+        paddingVertical: 8,
+        gap: 4,
+    },
+    target: {
+        minHeight: 48,
+        minWidth: 48,
+    },
+});

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

@@ -6,7 +6,6 @@ interface FormInputProps extends TextInputProps {
     error?: string;
     tooltip?: string;
     className?: string;
-    accessibleSizing?: boolean;
 }
-declare function FormInput({ label, error, tooltip, style, multiline, numberOfLines, onFocus, onBlur, className, accessibleSizing, ref, ...props }: FormInputProps): import("react").JSX.Element;
+declare function FormInput({ label, error, tooltip, style, multiline, numberOfLines, onFocus, onBlur, className, ref, ...props }: FormInputProps): import("react").JSX.Element;
 export default FormInput;

package/dist/Form/Form.Input.js

@@ -15,7 +15,7 @@ const inputContainer = tv({
     },
     defaultVariants: { state: "default" },
 });
-function FormInput({ label, error, tooltip, style, multiline = false, numberOfLines = 1, onFocus, onBlur, className, accessibleSizing = false, ref, ...props }) {
+function FormInput({ label, error, tooltip, style, multiline = false, numberOfLines = 1, onFocus, onBlur, className, ref, ...props }) {
     const [isFocused, setIsFocused] = useState(false);
     const hasError = Boolean(error);
     const handleFocus = (e) => {
@@ -33,6 +33,6 @@ function FormInput({ label, error, tooltip, style, multiline = false, numberOfLi
             return "focused";
         return "default";
     };
-    return (_jsxs(View, { className: cn("mb-2", className), children: [_jsx(Typography.Text, { className: "mb-1 font-medium text-text-primary", variant: "bodySmall", children: label }), _jsx(View, { className: inputContainer({ state: getState() }), children: _jsx(TextInput, { accessibilityHint: error || tooltip, accessibilityLabel: label, className: cn("px-3 py-2.5 text-sm min-h-[44px] text-text-primary", multiline && "min-h-[64px] pt-2.5"), multiline: multiline, numberOfLines: numberOfLines, onBlur: handleBlur, onFocus: handleFocus, placeholderTextColor: theme.text.tertiary, ref: ref, selectionColor: theme.primary, style: [accessibleSizing ? { minHeight: 48 } : undefined, style], textAlignVertical: multiline ? "top" : "center", underlineColorAndroid: "transparent", ...props }) }), hasError && (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "mt-0.5 text-danger", variant: "bodySmall", children: error }))] }));
+    return (_jsxs(View, { className: cn("mb-2", className), children: [_jsx(Typography.Text, { className: "mb-1 font-medium text-text-primary", variant: "bodySmall", children: label }), _jsx(View, { className: inputContainer({ state: getState() }), children: _jsx(TextInput, { accessibilityHint: error || tooltip, accessibilityLabel: label, className: cn("px-3 py-2.5 text-sm min-h-[48px] text-text-primary", multiline && "min-h-[64px] pt-2.5"), multiline: multiline, numberOfLines: numberOfLines, onBlur: handleBlur, onFocus: handleFocus, placeholderTextColor: theme.text.tertiary, ref: ref, selectionColor: theme.primary, style: [{ minHeight: multiline ? 64 : 48 }, style], textAlignVertical: multiline ? "top" : "center", underlineColorAndroid: "transparent", ...props }) }), hasError && (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "mt-0.5 text-danger", variant: "bodySmall", children: error }))] }));
 }
 export default FormInput;

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

@@ -10,10 +10,9 @@ export interface SelectProps<T extends string | number> {
     placeholder?: string;
     title?: string;
     disabled?: boolean;
-    accessibleSizing?: boolean;
     className?: string;
     testID?: string;
     showCloseButton?: boolean;
 }
-declare function Select<T extends string | number>({ options, value, onChange, label, placeholder, title, disabled, accessibleSizing, className, testID, showCloseButton, }: SelectProps<T>): import("react").JSX.Element;
+declare function Select<T extends string | number>({ options, value, onChange, label, placeholder, title, disabled, className, testID, showCloseButton, }: SelectProps<T>): import("react").JSX.Element;
 export default Select;

package/dist/Form/Form.Select.js

@@ -4,33 +4,20 @@ import Pressable from "../primitives/Pressable.js";
 import { themeToVars, useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
+import { useSheetTranslation } from "../utils/useSheetTranslation.js";
 import { vars } from "nativewind";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { Animated, Modal, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-function Select({ options, value, onChange, label, placeholder = "Seleccionar…", title, disabled = false, accessibleSizing = false, className, testID, showCloseButton = accessibleSizing, }) {
+function Select({ options, value, onChange, label, placeholder = "Seleccionar…", title, disabled = false, className, testID, showCloseButton = true, }) {
     const theme = useTheme();
     const insets = useSafeAreaInsets();
     const [open, setOpen] = useState(false);
     const selected = options.find((o) => o.value === value) ?? null;
-    // eslint-disable-next-line react-hooks/refs
-    const translateY = useRef(new Animated.Value(800)).current;
-    useEffect(() => {
-        if (open) {
-            Animated.spring(translateY, {
-                toValue: 0,
-                useNativeDriver: true,
-                damping: 20,
-                stiffness: 300,
-            }).start();
-        }
-        else {
-            translateY.setValue(800);
-        }
-    }, [open, translateY]);
+    const { translateY } = useSheetTranslation(open);
     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 la lista de opciones", accessibilityLabel: label
                     ? `${label}: ${selected?.label ?? placeholder}`
-                    : (selected?.label ?? placeholder), accessibilityRole: "button", accessibilityState: { disabled, expanded: open }, className: cn("flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3", accessibleSizing ? "min-h-[48px]" : "min-h-[44px]"), disabled: disabled, onPress: () => setOpen(true), children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", selected ? "text-text-primary" : "text-text-tertiary"), numberOfLines: accessibleSizing ? undefined : 1, style: accessibleSizing ? { paddingVertical: 12 } : undefined, children: selected ? selected.label : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: "chevron-down", size: 18 })] }), _jsx(Modal, { animationType: "none", onRequestClose: () => setOpen(false), presentationStyle: "overFullScreen", transparent: true, visible: open, children: _jsxs(View, { className: "flex-1 justify-end", children: [_jsx(View, { accessibilityElementsHidden: true, className: "absolute inset-0 bg-black/50", importantForAccessibility: "no-hide-descendants", onResponderRelease: () => setOpen(false), onStartShouldSetResponder: () => true }), _jsxs(Animated.View, { accessibilityViewIsModal: true, className: "rounded-t-3xl", importantForAccessibility: "yes", onAccessibilityEscape: () => setOpen(false), style: [
+                    : (selected?.label ?? placeholder), accessibilityRole: "button", accessibilityState: { disabled, expanded: open }, 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", selected ? "text-text-primary" : "text-text-tertiary"), style: { paddingVertical: 12 }, children: selected ? selected.label : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: "chevron-down", size: 18 })] }), _jsx(Modal, { animationType: "none", onRequestClose: () => setOpen(false), presentationStyle: "overFullScreen", transparent: true, visible: open, children: _jsxs(View, { className: "flex-1 justify-end", children: [_jsx(View, { accessibilityElementsHidden: true, className: "absolute inset-0 bg-black/50", importantForAccessibility: "no-hide-descendants", onResponderRelease: () => setOpen(false), onStartShouldSetResponder: () => true }), _jsxs(Animated.View, { accessibilityViewIsModal: true, className: "rounded-t-3xl", importantForAccessibility: "yes", onAccessibilityEscape: () => setOpen(false), style: [
                                 vars(themeToVars(theme)),
                                 {
                                     transform: [{ translateY }],
@@ -48,7 +35,7 @@ function Select({ options, value, onChange, label, placeholder = "Seleccionar…
                                         return (_jsxs(Pressable, { accessibilityRole: "menuitem", accessibilityState: { selected: isSelected }, className: "flex-row items-center justify-between px-4 py-3 border-b border-border-light", onPress: () => {
                                                 onChange(option.value);
                                                 setOpen(false);
-                                            }, style: accessibleSizing ? { minHeight: 48 } : undefined, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", isSelected ? "text-text-accent font-semibold" : "text-text-primary"), children: option.label }), isSelected ? (_jsx(Icon, { color: theme.text.accent, name: "checkmark", size: 18 })) : null] }, String(option.value)));
+                                            }, style: { minHeight: 48, minWidth: 48 }, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", isSelected ? "text-text-accent font-semibold" : "text-text-primary"), children: option.label }), isSelected ? (_jsx(Icon, { color: theme.text.accent, name: "checkmark", size: 18 })) : null] }, String(option.value)));
                                     }) })] })] }) })] }));
 }
 export default Select;

package/dist/Form/index.d.ts

@@ -6,6 +6,7 @@ import ControlledMonetaryInput from "./Form.ControlledMonetaryInput.js";
 import ControlledRadioButton from "./Form.ControlledRadioButton.js";
 import DatePicker from "./Form.DatePicker.js";
 import Dropdown from "./Form.Dropdown.js";
+import ErrorSummary from "./Form.ErrorSummary.js";
 import FAB from "./Form.FAB.js";
 import { FilterButtonGroup } from "./Form.FilterButton.js";
 import FractionalQuantityInput from "./Form.FractionalQuantityInput.js";
@@ -27,6 +28,7 @@ export declare const Form: {
     InputField: import("react").FC<import("./Form.InputField.js").InputFieldProps>;
     KeyboardForm: typeof KeyboardForm;
     KeyboardToolbar: typeof KeyboardToolbar;
+    ErrorSummary: typeof ErrorSummary;
     Button: import("react").FC<import("./Form.Button.js").ButtonProps> & {
         Icon: import("react").FC<import("./Form.Button.js").ButtonIconProps>;
     };
@@ -54,6 +56,7 @@ export declare const Form: {
     FilterButtonGroup: typeof FilterButtonGroup;
 };
 export { type DropdownOption };
+export type { ErrorSummaryItem, ErrorSummaryProps, } from "./Form.ErrorSummary.js";
 export type { KeyboardFormProps } from "./Form.KeyboardForm.js";
 export type { KeyboardToolbarAction, KeyboardToolbarProps, } from "./Form.KeyboardToolbar.js";
 export default Form;

package/dist/Form/index.js

@@ -7,6 +7,7 @@ import ControlledMonetaryInput from "./Form.ControlledMonetaryInput.js";
 import ControlledRadioButton from "./Form.ControlledRadioButton.js";
 import DatePicker from "./Form.DatePicker.js";
 import Dropdown from "./Form.Dropdown.js";
+import ErrorSummary from "./Form.ErrorSummary.js";
 import FAB from "./Form.FAB.js";
 import { FilterButton, FilterButtonGroup } from "./Form.FilterButton.js";
 import FractionalQuantityInput from "./Form.FractionalQuantityInput.js";
@@ -31,6 +32,7 @@ export const Form = {
     InputField,
     KeyboardForm,
     KeyboardToolbar,
+    ErrorSummary,
     Button: ButtonWithIcon,
     IconButton,
     PasswordInput,