@sincpro/mobile-ui 1.0.1 → 1.1.0

package/dist/Form/Form.Select.js

@@ -1,13 +1,15 @@
 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 { vars } from "nativewind";
 import { useEffect, useRef, useState } from "react";
-import { Animated, Modal, Pressable as RNPressable, ScrollView, View } from "react-native";
+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, accessibleSizing = false, className, testID, showCloseButton = accessibleSizing, }) {
+    const theme = useTheme();
     const insets = useSafeAreaInsets();
     const [open, setOpen] = useState(false);
     const selected = options.find((o) => o.value === value) ?? null;
@@ -26,16 +28,27 @@ function Select({ options, value, onChange, label, placeholder = "Seleccionar…
             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) => {
+    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: [
+                                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: 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)));
+                                    }) })] })] }) })] }));
 }
 export default Select;

package/dist/Form/index.d.ts

@@ -11,6 +11,8 @@ 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 +25,8 @@ 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;
     Button: import("react").FC<import("./Form.Button.js").ButtonProps> & {
         Icon: import("react").FC<import("./Form.Button.js").ButtonIconProps>;
     };
@@ -50,4 +54,6 @@ export declare const Form: {
     FilterButtonGroup: typeof FilterButtonGroup;
 };
 export { type DropdownOption };
+export type { KeyboardFormProps } from "./Form.KeyboardForm.js";
+export type { KeyboardToolbarAction, KeyboardToolbarProps, } from "./Form.KeyboardToolbar.js";
 export default Form;

package/dist/Form/index.js

@@ -13,6 +13,8 @@ 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 +29,8 @@ export const Form = {
     TextInput,
     Input,
     InputField,
+    KeyboardForm,
+    KeyboardToolbar,
     Button: ButtonWithIcon,
     IconButton,
     PasswordInput,

package/dist/Navigation/Navigation.AppBar.d.ts

@@ -16,6 +16,8 @@ export interface AppBarActionProps {
     onDark?: boolean;
     /** Drop the contained surface → bare icon/text (iOS-style plain back/action). */
     bare?: boolean;
+    /** Increase the action target to 48 points. */
+    accessibleSizing?: boolean;
     testID?: string;
 }
 /**
@@ -23,7 +25,7 @@ export interface AppBarActionProps {
  * (merge of Material 3 state-layer + iOS 26 contained button). Optional badge.
  * With `label`, renders a text pill CTA instead (for "Editar"/"Nuevo"/"Guardar").
  */
-declare function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone, onDark, bare, testID, }: AppBarActionProps): import("react").JSX.Element;
+declare function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone, onDark, bare, accessibleSizing, testID, }: AppBarActionProps): import("react").JSX.Element;
 export interface AppBarProps {
     title?: string;
     subtitle?: string;
@@ -47,6 +49,8 @@ export interface AppBarProps {
     border?: boolean;
     /** Reserves the status-bar space (insets.top). `false` to embed/demo. */
     safeArea?: boolean;
+    /** Increase the back-action target to 48 points. */
+    accessibleSizing?: boolean;
     /**
      * [large variant] Extra top padding (px) above the large title row.
      * Default is 8. Use ~16–24 on root/home screens without a back button.
@@ -109,7 +113,7 @@ export interface AppBarBackground {
  * a `subheader` slot (for SearchBar/Segmented below the title), and a `large` variant.
  * Replaces the gradient look of `Navigation.Header`/`ScreenHeader`.
  */
-declare function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, topSpacing, background, bottomDivider, className, testID, }: AppBarProps): import("react").JSX.Element;
+declare function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, accessibleSizing, topSpacing, background, bottomDivider, className, testID, }: AppBarProps): import("react").JSX.Element;
 declare const AppBarWithAction: typeof AppBar & {
     Action: typeof AppBarAction;
 };

package/dist/Navigation/Navigation.AppBar.js

@@ -15,7 +15,7 @@ const HERO_DARK_FALLBACK = "#0E1714";
  * (merge of Material 3 state-layer + iOS 26 contained button). Optional badge.
  * With `label`, renders a text pill CTA instead (for "Editar"/"Nuevo"/"Guardar").
  */
-function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone = "plain", onDark = false, bare = false, testID, }) {
+function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone = "plain", onDark = false, bare = false, accessibleSizing = false, testID, }) {
     const theme = useTheme();
     const bg = bare
         ? "transparent"
@@ -35,7 +35,7 @@ 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,
+                height: accessibleSizing ? 48 : 36,
                 paddingHorizontal: 14,
                 borderRadius: 999,
                 backgroundColor: bg,
@@ -43,8 +43,8 @@ function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone =
             }, 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 })] }));
     }
     return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", className: "items-center justify-center", hitSlop: 6, onPress: onPress, style: {
-            width: 40,
-            height: 40,
+            width: accessibleSizing ? 48 : 40,
+            height: accessibleSizing ? 48 : 40,
             borderRadius: 12,
             backgroundColor: bg,
             ...(showBorder ? { borderWidth: 1, borderColor: theme.border.light } : null),
@@ -56,7 +56,7 @@ function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone =
  * a `subheader` slot (for SearchBar/Segmented below the title), and a `large` variant.
  * Replaces the gradient look of `Navigation.Header`/`ScreenHeader`.
  */
-function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant = "default", tone = "default", accentBar = false, backVariant = "contained", border = true, safeArea = true, topSpacing, background, bottomDivider, className, testID, }) {
+function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant = "default", tone = "default", accentBar = false, backVariant = "contained", border = true, safeArea = true, accessibleSizing = false, topSpacing, background, bottomDivider, className, testID, }) {
     const theme = useTheme();
     const insets = useSafeAreaInsets();
     const centered = variant === "center";
@@ -106,13 +106,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", accessibleSizing: accessibleSizing, 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", 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", accessibleSizing: accessibleSizing, 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.d.ts

@@ -44,6 +44,8 @@ export interface BottomNavProps {
     bordered?: boolean;
     /** Token for the active color. `primary` (default) or `accent` (e.g. green CTA brand). */
     activeColor?: "primary" | "accent";
+    /** Increase each tab's target to at least 48 points. */
+    accessibleSizing?: boolean;
     className?: string;
     testID?: string;
 }
@@ -52,6 +54,6 @@ export interface BottomNavProps {
  * `shape` (bar/floating), `tone` (light/dark), `indicator` (none/pill/pill-text/bar/glow),
  * `showLabels`, `centerAction` (FAB), `activeColor`. Replaces the legacy `TabNavigatorLayout`.
  */
-declare function BottomNav({ items, value, onChange, showLabels, centerAction, safeArea, shape, tone, indicator, bordered, activeColor, className, testID, }: BottomNavProps): import("react").JSX.Element;
+declare function BottomNav({ items, value, onChange, showLabels, centerAction, safeArea, shape, tone, indicator, bordered, activeColor, accessibleSizing, className, testID, }: BottomNavProps): import("react").JSX.Element;
 export default BottomNav;
 export { BottomNav };

package/dist/Navigation/Navigation.BottomNav.js

@@ -16,7 +16,7 @@ function resolveDarkSurface(theme) {
  * `shape` (bar/floating), `tone` (light/dark), `indicator` (none/pill/pill-text/bar/glow),
  * `showLabels`, `centerAction` (FAB), `activeColor`. Replaces the legacy `TabNavigatorLayout`.
  */
-function BottomNav({ items, value, onChange, showLabels = true, centerAction, safeArea = true, shape = "bar", tone = "light", indicator = "none", bordered = true, activeColor = "primary", className, testID, }) {
+function BottomNav({ items, value, onChange, showLabels = true, centerAction, safeArea = true, shape = "bar", tone = "light", indicator = "none", bordered = true, activeColor = "primary", accessibleSizing = false, className, testID, }) {
     const insets = useSafeAreaInsets();
     const theme = useTheme();
     const dark = tone === "dark";
@@ -52,9 +52,13 @@ 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,
+                        ...(accessibleSizing ? { minHeight: 48, minWidth: 48 } : null),
+                    }, 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 (_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: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, 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 +74,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: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, children: [indicator === "bar" && active ? (_jsx(View, { style: {
                         position: "absolute",
                         top: 0,
                         width: 26,
@@ -112,7 +116,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.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;

package/dist/Navigation/Navigation.RowItem.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
-function RowItem({ item, className }) {
+function RowItem({ item, className, onPress = item.onPress, readonly = item.readonly, }) {
     function rowContent() {
         return (_jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { className: "flex-1", variant: "title", children: item.rowTitle }), _jsx(Typography.Text, { className: "mt-0.5 text-text-secondary", variant: "bodySmall", children: item.rowSubtitle })] }));
     }
-    return item.readonly ? (_jsx(View, { className: cn("flex-row items-center py-2.5", className), children: rowContent() })) : (_jsx(TouchableOpacity, { className: cn("flex-row items-center py-2.5", className), onPress: item.onPress, children: rowContent() }));
+    return readonly ? (_jsx(View, { className: cn("flex-row items-center py-2.5", className), children: rowContent() })) : (_jsx(TouchableOpacity, { className: cn("flex-row items-center py-2.5", className), onPress: onPress, children: rowContent() }));
 }
 export default RowItem;

package/dist/Navigation/Navigation.SearchBar.d.ts

@@ -1,3 +1,4 @@
+import { type SearchSuggestionsProps } from "./Navigation.SearchSuggestions.js";
 export interface SearchBarProps {
     value: string;
     onChangeText: (value: string) => void;
@@ -9,10 +10,14 @@ export interface SearchBarProps {
     onPress?: () => void;
     className?: string;
     testID?: string;
+    accessibleSizing?: boolean;
+    accessibilityLabel?: string;
+    clearAccessibilityLabel?: string;
+    suggestions?: SearchSuggestionsProps;
 }
 /**
  * **Pill** search bar (rounded-full), 2026 style (merge of Material 3 + iOS 26).
  * Use `editable={false}` + `onPress` for a trigger that navigates to the search screen.
  */
-declare function SearchBar({ value, onChangeText, placeholder, onSubmit, onClear, autoFocus, editable, onPress, className, testID, }: SearchBarProps): import("react").JSX.Element;
+declare function SearchBar({ value, onChangeText, placeholder, onSubmit, onClear, autoFocus, editable, onPress, className, testID, accessibleSizing, accessibilityLabel, clearAccessibilityLabel, suggestions, }: SearchBarProps): import("react").JSX.Element;
 export default SearchBar;

package/dist/Navigation/Navigation.SearchBar.js

@@ -1,28 +1,49 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Icon from "../Display/Display.Icon.js";
+import SearchSuggestions from "./Navigation.SearchSuggestions.js";
 import Pressable from "../primitives/Pressable.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
+import { resolveTextFontFamily, typographyVariants, } from "../theme/typography.js";
 import { Typography } from "../Typography/index.js";
 import { useState } from "react";
-import { TextInput, View } from "react-native";
+import { Keyboard, TextInput, View } from "react-native";
 /**
  * **Pill** search bar (rounded-full), 2026 style (merge of Material 3 + iOS 26).
  * Use `editable={false}` + `onPress` for a trigger that navigates to the search screen.
  */
-function SearchBar({ value, onChangeText, placeholder = "Buscar", onSubmit, onClear, autoFocus, editable = true, onPress, className, testID, }) {
+function SearchBar({ value, onChangeText, placeholder = "Buscar", onSubmit, onClear, autoFocus, editable = true, onPress, className, testID, accessibleSizing = false, accessibilityLabel, clearAccessibilityLabel = "Limpiar", suggestions, }) {
+    const theme = useTheme();
     const [focused, setFocused] = useState(false);
     const body = (_jsxs(View, { className: cn("flex-row items-center gap-2 rounded-full px-4", focused ? "bg-bg-card" : "bg-bg-muted", className), style: {
-            height: 44,
+            ...(accessibleSizing ? { minHeight: 48 } : { height: 44 }),
             borderWidth: 1,
             borderColor: focused ? theme.border.focus : "transparent",
-        }, children: [_jsx(Icon, { color: focused ? theme.border.focus : theme.icon.tertiary, name: "search", size: 18 }), editable ? (_jsx(TextInput, { autoFocus: autoFocus, className: "flex-1 text-sm text-text-primary", onBlur: () => setFocused(false), onChangeText: onChangeText, onFocus: () => setFocused(true), onSubmitEditing: (e) => onSubmit?.(e.nativeEvent.text), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, returnKeyType: "search", selectionColor: theme.primary, underlineColorAndroid: "transparent", value: value })) : (_jsx(Typography.Text, { className: "flex-1 text-text-tertiary text-sm", numberOfLines: 1, children: value || placeholder })), editable && value.length > 0 ? (_jsx(Pressable, { accessibilityLabel: "Limpiar", hitSlop: 8, onPress: () => {
+        }, children: [_jsx(View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", children: _jsx(Icon, { color: focused ? theme.border.focus : theme.icon.tertiary, name: "search", size: 18 }) }), editable ? (_jsx(TextInput, { accessibilityLabel: accessibilityLabel ?? placeholder, autoFocus: autoFocus, className: cn("flex-1 text-text-primary", !accessibleSizing && "text-sm"), onBlur: () => setFocused(false), onChangeText: onChangeText, onFocus: () => setFocused(true), onSubmitEditing: (e) => onSubmit?.(e.nativeEvent.text), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, returnKeyType: "search", selectionColor: theme.primary, style: accessibleSizing
+                    ? {
+                        ...typographyVariants.bodyReadable,
+                        fontFamily: resolveTextFontFamily("bodyReadable"),
+                        minHeight: 48,
+                        paddingVertical: 8,
+                    }
+                    : undefined, testID: testID ? `${testID}-input` : undefined, underlineColorAndroid: "transparent", value: value })) : (_jsx(Typography.Text, { className: cn("flex-1 text-text-tertiary", !accessibleSizing && "text-sm"), numberOfLines: accessibleSizing ? undefined : 1, variant: accessibleSizing ? "bodyReadable" : "body", children: value || placeholder })), editable && value.length > 0 ? (_jsx(Pressable, { accessibilityLabel: clearAccessibilityLabel, hitSlop: 8, onPress: () => {
                     onChangeText("");
                     onClear?.();
-                }, children: _jsx(Icon, { color: theme.icon.tertiary, name: "close-circle", size: 18 }) })) : null] }));
+                }, style: accessibleSizing
+                    ? {
+                        minHeight: 48,
+                        minWidth: 48,
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }
+                    : undefined, children: _jsx(Icon, { color: theme.icon.tertiary, name: "close-circle", size: 18 }) })) : null] }));
     if (!editable && onPress) {
-        return (_jsx(Pressable, { accessibilityLabel: placeholder, accessibilityRole: "search", onPress: onPress, testID: testID, children: body }));
+        return (_jsx(Pressable, { accessibilityLabel: accessibilityLabel ?? placeholder, accessibilityRole: "search", onPress: onPress, testID: testID, children: body }));
     }
-    return _jsx(View, { testID: testID, children: body });
+    return (_jsxs(View, { testID: testID, children: [body, focused && suggestions ? (_jsx(SearchSuggestions, { ...suggestions, onSelect: (suggestion) => {
+                    suggestions.onSelect(suggestion);
+                    setFocused(false);
+                    Keyboard.dismiss();
+                } })) : null] }));
 }
 export default SearchBar;

package/dist/Navigation/Navigation.SearchSuggestions.d.ts

@@ -0,0 +1,14 @@
+export interface SearchSuggestion {
+    id: string;
+    label: string;
+    description?: string;
+}
+export interface SearchSuggestionsProps {
+    items: readonly SearchSuggestion[];
+    onSelect: (suggestion: SearchSuggestion) => void;
+    loading?: boolean;
+    error?: string;
+    onRetry?: () => void;
+    emptyLabel?: string;
+}
+export default function SearchSuggestions({ items, onSelect, loading, error, onRetry, emptyLabel, }: SearchSuggestionsProps): import("react").JSX.Element;

package/dist/Navigation/Navigation.SearchSuggestions.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Pressable from "../primitives/Pressable.js";
+import { Typography } from "../Typography/index.js";
+import { View } from "react-native";
+export default function SearchSuggestions({ items, onSelect, loading, error, onRetry, emptyLabel = "Sin sugerencias", }) {
+    return (_jsx(View, { className: "gap-1 border-b border-border-light py-2", children: loading ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", children: "Buscando sugerencias\u2026" })) : error ? (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-danger", children: error }), onRetry ? (_jsx(Pressable, { onPress: onRetry, style: { minHeight: 48, justifyContent: "center" }, children: _jsx(Typography.Text, { className: "text-text-accent", children: "Reintentar sugerencias" }) })) : null] })) : !items.length ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-text-secondary", children: emptyLabel })) : (items.map((item) => (_jsxs(Pressable, { accessibilityLabel: item.description ? `${item.label}. ${item.description}` : item.label, className: "px-3 py-2", onPress: () => onSelect(item), style: { minHeight: 48, justifyContent: "center" }, children: [_jsx(Typography.Text, { variant: "bodyReadable", children: item.label }), item.description ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodyLarge", children: item.description })) : null] }, item.id)))) }));
+}

package/dist/Navigation/Navigation.SegmentedControl.d.ts

@@ -20,9 +20,11 @@ export interface SegmentedControlProps<T extends string> {
      * - `"left"` — icon inline left of the label (compact, single-line).
      */
     iconLayout?: "top" | "left";
+    /** Increase each option's target to at least 48 points. */
+    accessibleSizing?: boolean;
     className?: string;
     testID?: string;
 }
-declare function SegmentedControl<T extends string>({ options, value, onChange, iconLayout, className, testID, }: SegmentedControlProps<T>): import("react").JSX.Element;
+declare function SegmentedControl<T extends string>({ options, value, onChange, iconLayout, accessibleSizing, className, testID, }: SegmentedControlProps<T>): import("react").JSX.Element;
 export default SegmentedControl;
 export { SegmentedControl };

package/dist/Navigation/Navigation.SegmentedControl.js

@@ -4,7 +4,7 @@ import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
-function SegmentedControl({ options, value, onChange, iconLayout = "top", className, testID, }) {
+function SegmentedControl({ options, value, onChange, iconLayout = "top", accessibleSizing = false, className, testID, }) {
     const theme = useTheme();
     const hasIcons = options.some((o) => o.icon || o.customIcon);
     return (_jsx(View, { accessibilityRole: "tablist", className: cn("flex-row bg-bg-muted rounded-lg p-1 gap-1", className), testID: testID, children: options.map((option) => {
@@ -14,6 +14,7 @@ function SegmentedControl({ options, value, onChange, iconLayout = "top", classN
             const inline = hasIcons && iconLayout === "left";
             return (_jsxs(TouchableOpacity, { accessibilityLabel: option.label, accessibilityRole: "tab", accessibilityState: { selected }, activeOpacity: 0.7, onPress: () => onChange(option.value), style: {
                     flex: 1,
+                    minHeight: accessibleSizing ? 48 : undefined,
                     flexDirection: inline ? "row" : "column",
                     alignItems: "center",
                     justifyContent: "center",

package/dist/Navigation/index.d.ts

@@ -6,19 +6,23 @@ import Menu from "./Navigation.Menu.js";
 import { MenuSection } from "./Navigation.MenuSection.js";
 import RowItem from "./Navigation.RowItem.js";
 import SearchBar from "./Navigation.SearchBar.js";
+import SearchSuggestions from "./Navigation.SearchSuggestions.js";
 import SegmentedControl from "./Navigation.SegmentedControl.js";
 import Steps from "./Navigation.Steps.js";
 import TabIcon from "./Navigation.TabIcon.js";
 export type { AppBarBackground } from "./Navigation.AppBar.js";
 export type { MenuSectionProps } from "./Navigation.MenuSection.js";
+export type { SearchBarProps } from "./Navigation.SearchBar.js";
+export type { SearchSuggestion, SearchSuggestionsProps, } from "./Navigation.SearchSuggestions.js";
 export declare const Navigation: {
-    AppBar: (({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, topSpacing, background, bottomDivider, className, testID, }: import("./Navigation.AppBar.js").AppBarProps) => import("react").JSX.Element) & {
-        Action: ({ icon, label, onPress, badge, accessibilityLabel, tone, onDark, bare, testID, }: import("./Navigation.AppBar.js").AppBarActionProps) => import("react").JSX.Element;
+    AppBar: (({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, accessibleSizing, topSpacing, background, bottomDivider, className, testID, }: import("./Navigation.AppBar.js").AppBarProps) => import("react").JSX.Element) & {
+        Action: ({ icon, label, onPress, badge, accessibilityLabel, tone, onDark, bare, accessibleSizing, testID, }: import("./Navigation.AppBar.js").AppBarActionProps) => import("react").JSX.Element;
     };
     BottomNav: typeof BottomNav;
     CollapsingHeader: typeof CollapsingHeader;
     FloatingBar: typeof FloatingBar;
     SearchBar: typeof SearchBar;
+    SearchSuggestions: typeof SearchSuggestions;
     Header: ({ title, logo, logoSource, backButton, handleBackButton, className, }: import("./Navigation.Header.js").HeaderProps) => import("react").JSX.Element;
     HeaderToolbar: typeof HeaderToolbar;
     TabItem: import("react").FC<import("./Navigation.TabItem.js").TabIconProps>;

package/dist/Navigation/index.js

@@ -8,6 +8,7 @@ import Menu from "./Navigation.Menu.js";
 import { MenuSection } from "./Navigation.MenuSection.js";
 import RowItem from "./Navigation.RowItem.js";
 import SearchBar from "./Navigation.SearchBar.js";
+import SearchSuggestions from "./Navigation.SearchSuggestions.js";
 import SegmentedControl from "./Navigation.SegmentedControl.js";
 import Steps from "./Navigation.Steps.js";
 import TabIcon from "./Navigation.TabIcon.js";
@@ -19,6 +20,7 @@ export const Navigation = {
     CollapsingHeader,
     FloatingBar,
     SearchBar,
+    SearchSuggestions,
     Header,
     HeaderToolbar,
     TabItem,

package/dist/Typography/Typography.Heading.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { AppText } from "./Typography.Text.js";
 const Heading = ({ variant = "h1", ...props }) => {
-    return _jsx(AppText, { variant: variant, ...props });
+    return _jsx(AppText, { accessibilityRole: "header", variant: variant, ...props });
 };
 export default Heading;

package/dist/Typography/Typography.SelectableText.d.ts

@@ -0,0 +1,10 @@
+import { typographyVariants } from "../theme/typography.js";
+import { type TextInputProps } from "react-native";
+export type SelectableTextProps = Pick<TextInputProps, "accessibilityLabel" | "testID" | "style" | "allowFontScaling" | "onSelectionChange"> & {
+    value: string;
+    variant?: keyof typeof typographyVariants;
+    semibold?: boolean;
+    className?: string;
+};
+declare function SelectableText({ value, variant, semibold, className, style, ...props }: SelectableTextProps): import("react").JSX.Element;
+export default SelectableText;

package/dist/Typography/Typography.SelectableText.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { cn } from "../theme/tw.js";
+import { resolveTextFontFamily, typographyVariants, } from "../theme/typography.js";
+import { TextInput } from "react-native";
+function SelectableText({ value, variant = "body", semibold = false, className, style, ...props }) {
+    return (_jsx(TextInput, { ...props, className: cn("text-text-primary", className), editable: false, multiline: true, readOnly: true, scrollEnabled: false, showSoftInputOnFocus: false, style: [
+            typographyVariants[variant],
+            {
+                fontFamily: resolveTextFontFamily(variant, false, semibold),
+                padding: 0,
+                textAlignVertical: "top",
+            },
+            style,
+        ], underlineColorAndroid: "transparent", value: value }));
+}
+export default SelectableText;

package/dist/Typography/Typography.Text.js

@@ -1,31 +1,15 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { cn } from "../theme/tw.js";
-import { fontFamilies, Typography, variantFontRole, } from "../theme/typography.js";
-import { Text } from "react-native";
+import { resolveTextFontFamily, Typography, } from "../theme/typography.js";
+import { StyleSheet, Text } from "react-native";
 function AppText({ variant = "body", color, bold = false, italic = false, underline = false, align = "left", transform = "none", semibold = false, style, className, children, ...props }) {
     const baseStyle = Typography.variants[variant];
     const textClassName = cn("text-text-primary", align === "center" && "text-center", align === "right" && "text-right", align === "justify" && "text-justify", transform === "uppercase" && "uppercase", transform === "lowercase" && "lowercase", transform === "capitalize" && "capitalize", underline && "underline", italic && "italic", className);
-    // Resolve the family LIVE from the configurable registry by the variant's role, so
-    // `configureFonts(...)` (app/Storybook) takes effect. Falls back to the variant's baked
-    // family if a role is somehow missing.
-    const variantFamily = fontFamilies[variantFontRole[variant]] ?? baseStyle.fontFamily;
-    // `bold`/`semibold` map to the IBM Plex Sans weights — but NOT when the active family is a
-    // branded face (a configured title face, or IBM Plex Mono): those carry their own weight, so
-    // forcing Plex Sans would erase the typeface. Keep the variant's family for those.
-    const isBrandedFace = typeof variantFamily === "string" &&
-        !variantFamily.startsWith("Inter_") &&
-        !variantFamily.startsWith("IBMPlexSans_");
     const textStyle = {
         ...baseStyle,
         ...(color ? { color } : {}),
-        fontFamily: isBrandedFace
-            ? variantFamily
-            : bold
-                ? fontFamilies.extraBold
-                : semibold
-                    ? fontFamilies.semiBold
-                    : variantFamily,
-        ...(Array.isArray(style) ? Object.assign({}, ...style) : style),
+        fontFamily: resolveTextFontFamily(variant, bold, semibold),
+        ...StyleSheet.flatten(style),
     };
     return (_jsx(Text, { className: textClassName, style: textStyle, ...props, children: children }));
 }

package/dist/Typography/index.d.ts

@@ -1,7 +1,10 @@
+import SelectableText from "./Typography.SelectableText.js";
 import { AppText } from "./Typography.Text.js";
 export declare const Typography: {
     Text: typeof AppText;
     Heading: import("react").FC<import("./Typography.Heading.js").TypographyProps>;
+    SelectableText: typeof SelectableText;
 };
 export { AppText };
+export { SelectableText };
 export default Typography;

package/dist/Typography/index.js

@@ -1,8 +1,11 @@
 import Heading from "./Typography.Heading.js";
+import SelectableText from "./Typography.SelectableText.js";
 import { AppText } from "./Typography.Text.js";
 export const Typography = {
     Text: AppText,
     Heading,
+    SelectableText,
 };
 export { AppText };
+export { SelectableText };
 export default Typography;

package/dist/layouts/AuthContainer.d.ts

@@ -1,3 +1,4 @@
+import { type KeyboardFormProps } from "../Form/Form.KeyboardForm.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import { ReactNode } from "react";
 interface AuthContainerProps {
@@ -5,11 +6,13 @@ interface AuthContainerProps {
     children: ReactNode;
     onBackPress?: () => void;
     className?: string;
+    keyboardToolbar?: boolean;
+    keyboardFormProps?: Omit<KeyboardFormProps, "children" | "toolbar">;
     /** Gradient + optional texture surface for the header area. Defaults to the `warm`
      *  preset. Set `background.pattern` to opt-in a texture (`dots` / `grid` /
      *  `diagonals`); compose `<Display.Pattern kind="mesh" />` outside if you want the
      *  brand symbol. */
     background?: AppBarBackground;
 }
-declare function AuthContainer({ header, children, onBackPress, background, className, }: AuthContainerProps): import("react").JSX.Element;
+declare function AuthContainer({ header, children, onBackPress, background, className, keyboardToolbar, keyboardFormProps, }: AuthContainerProps): import("react").JSX.Element;
 export default AuthContainer;