@sincpro/mobile-ui 1.0.1 → 2.0.0

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.FilterButton.d.ts

@@ -1,3 +1,3 @@
 /** @deprecated Use `Actions.FilterButton` from `@sincpro/mobile-ui/Actions` instead. */
-export type { FilterButtonProps } from "../Actions/Actions.FilterButton.js";
+export type { FilterButtonGroupProps, FilterButtonProps, } from "../Actions/Actions.FilterButton.js";
 export { FilterButton, FilterButtonGroup, } from "../Actions/Actions.FilterButton.js";

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

@@ -1,10 +1,11 @@
-import type React from "react";
-import { type TextInputProps } from "react-native";
+import type { ComponentRef, Ref } from "react";
+import { TextInput, type TextInputProps } from "react-native";
 interface FormInputProps extends TextInputProps {
+    ref?: Ref<ComponentRef<typeof TextInput>>;
     label: string;
     error?: string;
     tooltip?: string;
     className?: string;
 }
-declare function FormInput({ label, error, tooltip, style, multiline, numberOfLines, onFocus, onBlur, className, ...props }: FormInputProps): 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, ...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, { 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, selectionColor: theme.primary, textAlignVertical: multiline ? "top" : "center", underlineColorAndroid: "transparent", ...props }) }), hasError && (_jsx(Typography.Text, { 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.KeyboardForm.d.ts

@@ -0,0 +1,11 @@
+import { type KeyboardToolbarProps } from "./Form.KeyboardToolbar.js";
+import { type ReactNode, type Ref } from "react";
+import type { KeyboardAwareScrollViewProps, KeyboardAwareScrollViewRef } from "react-native-keyboard-controller";
+export interface KeyboardFormProps extends KeyboardAwareScrollViewProps {
+    children: ReactNode;
+    ref?: Ref<KeyboardAwareScrollViewRef>;
+    toolbar?: boolean;
+    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;

package/dist/Form/Form.KeyboardForm.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+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 }) {
+    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] }));
+}

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

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import { type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+export type KeyboardToolbarAction = "previous" | "next" | "done";
+export interface KeyboardToolbarProps {
+    previousLabel?: string;
+    nextLabel?: string;
+    doneLabel?: string;
+    showDoneLabel?: boolean;
+    onHeightChange?: (height: number) => void;
+    className?: string;
+    style?: StyleProp<ViewStyle>;
+    actionStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    iconSize?: 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;

package/dist/Form/Form.KeyboardToolbar.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { useTheme } from "../theme/index.js";
+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, }) {
+    const theme = useTheme();
+    const frame = useRef(null);
+    const { height: windowHeight } = useWindowDimensions();
+    const [bottomGap, setBottomGap] = useState(0);
+    const [height, setHeight] = useState(48);
+    const [inputs, setInputs] = useState({ current: 0, count: 0 });
+    const isVisible = useKeyboardState((state) => state.isVisible);
+    useEffect(() => {
+        const subscription = FocusedInputEvents.addListener("focusDidSet", setInputs);
+        return () => subscription.remove();
+    }, []);
+    const previousDisabled = inputs.current === 0;
+    const nextDisabled = inputs.current >= inputs.count - 1;
+    const content = (action, label, disabled) => {
+        if (renderActionContent)
+            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(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) => {
+                    const nextHeight = event.nativeEvent.layout.height;
+                    setHeight(nextHeight);
+                    onHeightChange?.(nextHeight);
+                }, style: [
+                    {
+                        minHeight: 48,
+                        flexDirection: "row",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        paddingHorizontal: 8,
+                        backgroundColor: theme.bg.card,
+                        borderTopWidth: StyleSheet.hairlineWidth,
+                        borderTopColor: theme.border.light,
+                    },
+                    style,
+                ], testID: testID, children: [_jsxs(View, { style: { flexDirection: "row" }, children: [_jsx(Pressable, { accessibilityLabel: previousLabel, disabled: previousDisabled, hitSlop: 0, onPress: () => KeyboardController.setFocusTo("prev"), style: [styles.arrow, actionStyle], children: content("previous", previousLabel, previousDisabled) }), _jsx(Pressable, { accessibilityLabel: nextLabel, disabled: nextDisabled, hitSlop: 0, onPress: () => KeyboardController.setFocusTo("next"), style: [styles.arrow, actionStyle], children: content("next", nextLabel, nextDisabled) })] }), _jsx(Pressable, { accessibilityLabel: doneLabel, hitSlop: 0, onPress: () => KeyboardController.dismiss(), style: [
+                            {
+                                minWidth: 48,
+                                minHeight: 48,
+                                flexShrink: 1,
+                                justifyContent: "center",
+                                padding: 8,
+                            },
+                            actionStyle,
+                        ], children: content("done", doneLabel, false) })] }) }) }));
+}
+const styles = StyleSheet.create({
+    arrow: {
+        minWidth: 48,
+        minHeight: 48,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});

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

@@ -12,6 +12,7 @@ export interface SelectProps<T extends string | number> {
     disabled?: boolean;
     className?: string;
     testID?: string;
+    showCloseButton?: boolean;
 }
-declare function Select<T extends string | number>({ options, value, onChange, label, placeholder, title, disabled, className, testID, }: 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

@@ -1,41 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { themeToVars, useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { useEffect, useRef, useState } from "react";
-import { Animated, Modal, Pressable as RNPressable, ScrollView, View } from "react-native";
+import { useSheetTranslation } from "../utils/useSheetTranslation.js";
+import { vars } from "nativewind";
+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, className, testID, }) {
+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]);
-    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 ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled }, 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), children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", selected ? "text-text-primary" : "text-text-tertiary"), numberOfLines: 1, 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: _jsx(RNPressable, { className: "flex-1 justify-end bg-black/50", onPress: () => setOpen(false), children: _jsx(Animated.View, { style: { transform: [{ translateY }] }, children: _jsxs(RNPressable, { className: "rounded-t-3xl", style: {
-                                backgroundColor: theme.bg.card,
-                                paddingBottom: insets.bottom + 8,
-                                maxHeight: "70%",
-                            }, children: [_jsx(View, { className: "items-center pt-3 pb-1", children: _jsx(View, { className: "w-10 h-1 rounded-full bg-border-strong" }) }), title ? (_jsx(Typography.Text, { className: "text-text-primary px-4 py-2", semibold: true, variant: "body", children: title })) : null, _jsx(ScrollView, { children: options.map((option) => {
+    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: "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 }],
+                                    maxHeight: "70%",
+                                    backgroundColor: theme.bg.card,
+                                    paddingBottom: insets.bottom + 8,
+                                },
+                            ], children: [_jsx(View, { className: "items-center pt-3 pb-1", children: _jsx(View, { className: "w-10 h-1 rounded-full bg-border-strong" }) }), title || showCloseButton ? (_jsxs(View, { className: "flex-row items-center justify-between px-4", children: [_jsx(Typography.Text, { accessibilityRole: "header", className: "flex-1 text-text-primary py-2", semibold: true, variant: "body", children: title ?? label ?? "Seleccionar" }), showCloseButton ? (_jsx(Pressable, { accessibilityLabel: "Cerrar opciones", onPress: () => setOpen(false), style: {
+                                                minWidth: 48,
+                                                minHeight: 48,
+                                                justifyContent: "center",
+                                                alignItems: "center",
+                                            }, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Cerrar" }) })) : null] })) : null, _jsx(ScrollView, { children: options.map((option) => {
                                         const isSelected = option.value === value;
                                         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);
-                                            }, 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,11 +6,14 @@ 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";
 import IconButton from "./Form.IconButton.js";
 import Input from "./Form.Input.js";
+import KeyboardForm from "./Form.KeyboardForm.js";
+import KeyboardToolbar from "./Form.KeyboardToolbar.js";
 import MonetaryInput from "./Form.MonetaryInput.js";
 import PinInput from "./Form.PinInput.js";
 import QuantitySelector from "./Form.QuantitySelector.js";
@@ -23,6 +26,9 @@ export declare const Form: {
     TextInput: import("react").FC<import("./Form.TextInput.js").TextInputFProps>;
     Input: typeof Input;
     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>;
     };
@@ -50,4 +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,12 +7,15 @@ 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";
 import IconButton from "./Form.IconButton.js";
 import Input from "./Form.Input.js";
 import InputField from "./Form.InputField.js";
+import KeyboardForm from "./Form.KeyboardForm.js";
+import KeyboardToolbar from "./Form.KeyboardToolbar.js";
 import MonetaryInput from "./Form.MonetaryInput.js";
 import PasswordInput from "./Form.PasswordInput.js";
 import PinInput from "./Form.PinInput.js";
@@ -27,6 +30,9 @@ export const Form = {
     TextInput,
     Input,
     InputField,
+    KeyboardForm,
+    KeyboardToolbar,
+    ErrorSummary,
     Button: ButtonWithIcon,
     IconButton,
     PasswordInput,

package/dist/Navigation/Navigation.AppBar.js

@@ -35,16 +35,18 @@ function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone =
     // primary/secondary header actions like "Editar", "Nuevo", "Guardar".
     if (label) {
         return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? label, accessibilityRole: "button", className: "flex-row items-center justify-center gap-1.5", hitSlop: 6, onPress: onPress, style: {
-                height: 36,
+                minHeight: 48,
+                minWidth: 48,
                 paddingHorizontal: 14,
+                paddingVertical: 8,
                 borderRadius: 999,
                 backgroundColor: bg,
                 ...(showBorder ? { borderWidth: 1, borderColor: theme.border.light } : null),
-            }, testID: testID, children: [icon ? _jsx(Icon, { color: iconColor, name: icon, size: 16 }) : null, _jsx(Typography.Text, { semibold: true, style: { color: iconColor }, variant: "bodySmall", children: label })] }));
+            }, testID: testID, children: [icon ? _jsx(Icon, { color: iconColor, name: icon, size: 16 }) : null, _jsx(Typography.Text, { semibold: true, style: { color: iconColor, flexShrink: 1 }, variant: "bodySmall", children: label })] }));
     }
     return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", className: "items-center justify-center", hitSlop: 6, onPress: onPress, style: {
-            width: 40,
-            height: 40,
+            width: 48,
+            height: 48,
             borderRadius: 12,
             backgroundColor: bg,
             ...(showBorder ? { borderWidth: 1, borderColor: theme.border.light } : null),
@@ -106,13 +108,13 @@ function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant
                 ? { borderBottomLeftRadius: 24, borderBottomRightRadius: 24, overflow: "hidden" }
                 : null),
             ...(showShadow ? theme.shadow.md : null),
-        }, testID: testID, children: [hasBackground ? (_jsx(GradientSurface, { colors: background.colors, end: background.end, padding: "none", preset: background.surface ?? "warm", radius: "none", start: background.start, style: StyleSheet.absoluteFill })) : gradient ? (_jsx(GradientSurface, { colors: theme.gradient.accent, padding: "none", radius: "none", style: StyleSheet.absoluteFill })) : null, background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, showTopBar ? (_jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[56px]", children: [_jsxs(View, { className: "flex-row items-center gap-2", style: { minWidth: 38 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading] }), _jsxs(View, { className: cn("flex-1", centered && "items-center"), children: [title ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-primary", numberOfLines: 1, semibold: true, style: titleStyle, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", numberOfLines: 1, style: subtitleStyle, variant: "caption", children: subtitle })) : null] }), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] })) : null, large && title ? (_jsxs(View, { className: cn("flex-row px-4 pb-3", largeHasNav ? "items-center gap-2" : ""), style: { paddingTop: topSpacing != null ? topSpacing : 8 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading, accentBar && !largeHasNav ? (_jsx(View, { style: {
+        }, testID: testID, children: [hasBackground ? (_jsx(GradientSurface, { colors: background.colors, end: background.end, padding: "none", preset: background.surface ?? "warm", radius: "none", start: background.start, style: StyleSheet.absoluteFill })) : gradient ? (_jsx(GradientSurface, { colors: theme.gradient.accent, padding: "none", radius: "none", style: StyleSheet.absoluteFill })) : null, background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, showTopBar ? (_jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[56px]", children: [_jsxs(View, { className: "flex-row items-center gap-2", style: { minWidth: 38 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading] }), _jsxs(View, { className: cn("flex-1", centered && "items-center"), children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: colored ? "" : "text-text-primary", semibold: true, style: titleStyle, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", style: subtitleStyle, variant: "caption", children: subtitle })) : null] }), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] })) : null, large && title ? (_jsxs(View, { className: cn("flex-row px-4 pb-3", largeHasNav ? "items-center gap-2" : ""), style: { paddingTop: topSpacing != null ? topSpacing : 8 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading, accentBar && !largeHasNav ? (_jsx(View, { style: {
                             width: 4,
                             marginRight: 10,
                             marginVertical: 2,
                             borderRadius: 999,
                             backgroundColor: theme.accent,
-                        } })) : null, _jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { className: colored ? "" : "text-text-primary", style: titleStyle, variant: "h2", children: title }), subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", style: subtitleStyle, variant: "bodySmall", children: subtitle })) : null] }), actions ? (_jsx(View, { className: cn("flex-row items-center justify-end gap-2 pl-2", largeHasNav ? "" : "self-center"), children: actions })) : null] })) : null, subheader ? _jsx(View, { className: "px-3 pb-3 pt-0.5", children: subheader }) : null, showWave ? (_jsx(View, { style: {
+                        } })) : null, _jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { accessibilityRole: "header", className: colored ? "" : "text-text-primary", style: titleStyle, variant: "h2", children: title }), subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", style: subtitleStyle, variant: "bodySmall", children: subtitle })) : null] }), actions ? (_jsx(View, { className: cn("flex-row items-center justify-end gap-2 pl-2", largeHasNav ? "" : "self-center"), children: actions })) : null] })) : null, subheader ? _jsx(View, { className: "px-3 pb-3 pt-0.5", children: subheader }) : null, showWave ? (_jsx(View, { style: {
                     height: 24,
                     backgroundColor: theme.bg.page,
                     borderTopLeftRadius: 24,

package/dist/Navigation/Navigation.BottomNav.js

@@ -52,9 +52,14 @@ function BottomNav({ items, value, onChange, showLabels = true, centerAction, sa
         // Variant A — extended pill with text (active = horizontal pill, inactive = icon only).
         if (indicator === "pill-text") {
             if (active) {
-                return (_jsxs(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", accessibilityState: { selected: true }, className: "flex-row items-center px-4 py-2", onPress: () => onChange(item.key), style: { borderRadius: 999, backgroundColor: activeTint }, children: [renderIconNode(item, true, onActive), item.label ? (_jsx(Typography.Text, { semibold: true, style: { color: onActive, fontSize: 13, marginLeft: 8 }, children: item.label })) : null] }, item.key));
+                return (_jsxs(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", accessibilityState: { selected: true }, className: "flex-row items-center px-4 py-2", onPress: () => onChange(item.key), style: {
+                        borderRadius: 999,
+                        backgroundColor: activeTint,
+                        minHeight: 48,
+                        minWidth: 48,
+                    }, children: [renderIconNode(item, true, onActive), item.label ? (_jsx(Typography.Text, { semibold: true, style: { color: onActive, fontSize: 13, marginLeft: 8, flexShrink: 1 }, children: item.label })) : null] }, item.key));
             }
-            return (_jsx(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", className: "items-center justify-center px-3 py-2", onPress: () => onChange(item.key), children: renderIconNode(item, false, inactiveColor) }, item.key));
+            return (_jsx(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", className: "items-center justify-center px-3 py-2", onPress: () => onChange(item.key), style: { minHeight: 48, minWidth: 48 }, children: renderIconNode(item, false, inactiveColor) }, item.key));
         }
         // Variants none / pill / bar / glow — vertical icon + optional indicator + optional label.
         const inPill = indicator === "pill" && active;
@@ -70,7 +75,7 @@ function BottomNav({ items, value, onChange, showLabels = true, centerAction, sa
             labelColor = theme.text.inverse;
         else if (active)
             labelColor = brandText;
-        return (_jsxs(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", accessibilityState: { selected: active }, className: "flex-1 items-center justify-center py-1.5", onPress: () => onChange(item.key), children: [indicator === "bar" && active ? (_jsx(View, { style: {
+        return (_jsxs(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", accessibilityState: { selected: active }, className: "flex-1 items-center justify-center py-1.5", onPress: () => onChange(item.key), style: { minHeight: 48, minWidth: 48 }, children: [indicator === "bar" && active ? (_jsx(View, { style: {
                         position: "absolute",
                         top: 0,
                         width: 26,
@@ -87,7 +92,7 @@ function BottomNav({ items, value, onChange, showLabels = true, centerAction, sa
                         shadowOpacity: 0.9,
                         shadowRadius: 5,
                         elevation: 4,
-                    } })) : null, showLabels && item.label && indicator !== "glow" ? (_jsx(Typography.Text, { numberOfLines: 1, semibold: active, style: { color: labelColor, fontSize: 11, marginTop: 3 }, children: item.label })) : null] }, item.key));
+                    } })) : null, showLabels && item.label && indicator !== "glow" ? (_jsx(Typography.Text, { semibold: active, style: { color: labelColor, fontSize: 11, marginTop: 3, textAlign: "center" }, children: item.label })) : null] }, item.key));
     };
     const renderCenterFab = () => (_jsx(Pressable, { accessibilityLabel: centerAction?.accessibilityLabel ?? "Acción", accessibilityRole: "button", className: "items-center justify-center", onPress: centerAction?.onPress, style: {
             width: 52,
@@ -112,7 +117,7 @@ function BottomNav({ items, value, onChange, showLabels = true, centerAction, sa
         content = items.map(renderItem);
     }
     const justify = indicator === "pill-text" ? "justify-around" : "";
-    return (_jsx(View, { className: cn("flex-row items-center", justify, className), style: containerStyle, testID: testID, children: content }));
+    return (_jsx(View, { accessibilityRole: "tablist", className: cn("flex-row items-center", justify, className), style: containerStyle, testID: testID, children: content }));
 }
 export default BottomNav;
 export { BottomNav };

package/dist/Navigation/Navigation.Header.d.ts

@@ -1,9 +1,9 @@
+import type { ImageSource } from "../utils/image.js";
 import React, { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 export interface HeaderProps {
     title?: string;
     logo?: ReactNode;
-    logoSource?: ImageSourcePropType;
+    logoSource?: ImageSource;
     backButton?: boolean;
     handleBackButton?: () => void;
     className?: string;

package/dist/Navigation/Navigation.Menu.js

@@ -4,10 +4,12 @@ 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 { cloneElement, useRef, useState } from "react";
 import { Dimensions, Modal, Pressable as RNPressable, View, } from "react-native";
 function Menu({ items, trigger, menuWidth = 220, testID }) {
     const theme = useTheme();
+    const reducedMotion = useReducedMotion();
     const triggerRef = useRef(null);
     const [anchor, setAnchor] = useState(null);
     const open = () => {
@@ -21,7 +23,12 @@ function Menu({ items, trigger, menuWidth = 220, testID }) {
     const top = anchor ? anchor.y + anchor.height + 4 : 0;
     return (_jsxs(View, { collapsable: false, ref: triggerRef, testID: testID, children: [trigger ? (
             // eslint-disable-next-line react-hooks/refs
-            cloneElement(trigger, { onPress: open })) : (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", accessibilityRole: "button", onPress: open, children: _jsx(Icon, { color: theme.icon.secondary, name: "ellipsis-vertical", size: 22 }) })), _jsx(Modal, { animationType: "fade", onRequestClose: close, presentationStyle: "overFullScreen", transparent: true, visible: anchor !== null, children: _jsx(RNPressable, { onPress: close, style: { flex: 1 }, children: _jsx(View, { className: "rounded-lg py-1", style: {
+            cloneElement(trigger, { onPress: open })) : (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", accessibilityRole: "button", onPress: open, style: {
+                    minWidth: 48,
+                    minHeight: 48,
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, children: _jsx(Icon, { color: theme.icon.secondary, name: "ellipsis-vertical", size: 22 }) })), _jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: close, presentationStyle: "overFullScreen", transparent: true, visible: anchor !== null, children: _jsx(RNPressable, { onPress: close, style: { flex: 1 }, children: _jsx(View, { accessibilityViewIsModal: true, className: "rounded-lg py-1", onAccessibilityEscape: close, style: {
                             position: "absolute",
                             top,
                             right,
@@ -35,10 +42,10 @@ function Menu({ items, trigger, menuWidth = 220, testID }) {
                                 return _jsx(View, { className: "my-1 h-px bg-border-default" }, `sep-${index}`);
                             }
                             const item = entry;
-                            return (_jsxs(Pressable, { accessibilityRole: "menuitem", accessibilityState: { disabled: item.disabled }, className: "flex-row items-center gap-3 px-4 py-3", disabled: item.disabled, onPress: () => {
+                            return (_jsxs(Pressable, { accessibilityLabel: item.label, accessibilityRole: "menuitem", accessibilityState: { disabled: item.disabled }, className: "flex-row items-center gap-3 px-4 py-3", disabled: item.disabled, onPress: () => {
                                     close();
                                     item.onPress();
-                                }, children: [item.icon ? (_jsx(Icon, { color: item.destructive ? theme.danger : theme.icon.secondary, name: item.icon, size: 18 })) : null, _jsx(Typography.Text, { className: cn("flex-1 text-sm", item.destructive ? "text-danger" : "text-text-primary", item.disabled && "text-text-disabled"), children: item.label })] }, item.label));
+                                }, style: { minHeight: 48 }, children: [item.icon ? (_jsx(Icon, { color: item.destructive ? theme.danger : theme.icon.secondary, name: item.icon, size: 18 })) : null, _jsx(Typography.Text, { className: cn("flex-1 text-sm", item.destructive ? "text-danger" : "text-text-primary", item.disabled && "text-text-disabled"), children: item.label })] }, item.label));
                         }) }) }) })] }));
 }
 export default Menu;

package/dist/Navigation/Navigation.RowItem.d.ts

@@ -1,5 +1,5 @@
 import { IRowItemProps } from "../views/types/IListView.js";
-declare function RowItem({ item, className }: IRowItemProps<any> & {
+declare function RowItem({ item, className, onPress, readonly, }: IRowItemProps<any> & {
     className?: string;
 }): import("react").JSX.Element;
 export default RowItem;