@sincpro/mobile-ui 0.7.2 → 1.1.0

package/dist/Form/Form.IconButton.d.ts

@@ -1,3 +1,3 @@
 /** @deprecated Use `Actions.IconButton` from `@sincpro/mobile-ui/Actions` instead. */
-export type { IconButtonProps } from "../Actions/Actions.IconButton";
-export { default } from "../Actions/Actions.IconButton";
+export type { IconButtonProps } from "../Actions/Actions.IconButton.js";
+export { default } from "../Actions/Actions.IconButton.js";

package/dist/Form/Form.IconButton.js

@@ -1 +1 @@
-export { default } from "../Actions/Actions.IconButton";
+export { default } from "../Actions/Actions.IconButton.js";

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

@@ -1,10 +1,12 @@
-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;
+    accessibleSizing?: boolean;
 }
-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, accessibleSizing, ref, ...props }: FormInputProps): import("react").JSX.Element;
 export default FormInput;

package/dist/Form/Form.Input.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { cn, tv } from "../theme/tw";
-import { Typography } from "../Typography";
+import { theme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { TextInput, View } from "react-native";
 const inputContainer = tv({
@@ -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, accessibleSizing = false, 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, textAlignVertical: multiline ? "top" : "center", ...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-[44px] text-text-primary", multiline && "min-h-[64px] pt-2.5"), multiline: multiline, numberOfLines: numberOfLines, onBlur: handleBlur, onFocus: handleFocus, placeholderTextColor: theme.text.tertiary, ref: ref, selectionColor: theme.primary, style: [accessibleSizing ? { minHeight: 48 } : undefined, style], textAlignVertical: multiline ? "top" : "center", underlineColorAndroid: "transparent", ...props }) }), hasError && (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "mt-0.5 text-danger", variant: "bodySmall", children: error }))] }));
 }
 export default FormInput;

package/dist/Form/Form.InputField.d.ts

@@ -1,4 +1,4 @@
-import TextInputF from "../Form/Form.TextInput";
+import TextInputF from "./Form.TextInput.js";
 import React, { FC } from "react";
 import { TextInputProps } from "react-native";
 export interface InputFieldProps extends TextInputProps {

package/dist/Form/Form.InputField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import TextInputF from "../Form/Form.TextInput";
-import { tv } from "../theme/tw";
-import { Typography } from "../Typography";
+import TextInputF from "./Form.TextInput.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { View } from "react-native";
 const inputFieldBorder = tv({

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.MonetaryInput.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { tv } from "../theme/tw";
-import { Typography } from "../Typography";
-import { parseToMonetaryNumber } from "../utils/monetary";
+import { theme } from "../theme/index.js";
+import { tv } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { parseToMonetaryNumber } from "../utils/monetary.js";
 import { useState } from "react";
 import { View } from "react-native";
 import CurrencyInput from "react-native-currency-input";
@@ -22,6 +23,6 @@ function MonetaryInput({ amount, onChange, currencySymbol = "₡", placeholder =
         setRaw(amount);
         onChange?.(parseToMonetaryNumber(amount));
     };
-    return (_jsxs(View, { className: "flex-row", children: [_jsx(View, { className: monetaryBox({ focused: isFocused, className: "w-10 h-10" }), children: _jsx(Typography.Text, { className: "text-xl", variant: "body", children: currencySymbol }) }), _jsx(View, { className: monetaryBox({ focused: isFocused, className: "flex-1 h-10 ml-2 px-4" }), children: _jsx(CurrencyInput, { delimiter: ".", keyboardType: "numeric", onBlur: () => setIsFocused(false), onChangeValue: handleChange, onFocus: () => setIsFocused(true), placeholder: placeholder, separator: ",", value: raw }) })] }));
+    return (_jsxs(View, { className: "flex-row", children: [_jsx(View, { className: monetaryBox({ focused: isFocused, className: "w-10 h-10" }), children: _jsx(Typography.Text, { className: "text-xl", variant: "body", children: currencySymbol }) }), _jsx(View, { className: monetaryBox({ focused: isFocused, className: "flex-1 h-10 ml-2 px-4" }), children: _jsx(CurrencyInput, { delimiter: ".", keyboardType: "numeric", onBlur: () => setIsFocused(false), onChangeValue: handleChange, onFocus: () => setIsFocused(true), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, separator: ",", underlineColorAndroid: "transparent", value: raw }) })] }));
 }
 export default MonetaryInput;

package/dist/Form/Form.PasswordInput.d.ts

@@ -1,4 +1,4 @@
-import InputField from "../Form/Form.InputField";
+import InputField from "./Form.InputField.js";
 import React from "react";
 export interface PasswordFieldProps {
     label: string;

package/dist/Form/Form.PasswordInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import InputField from "../Form/Form.InputField";
-import { useTheme } from "../theme";
+import { Display } from "../Display/index.js";
+import InputField from "./Form.InputField.js";
+import { useTheme } from "../theme/index.js";
 import { useState } from "react";
 import { TouchableOpacity, View } from "react-native";
 const PasswordField = ({ label, error, inputProps }) => {

package/dist/Form/Form.PinInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { useRef } from "react";
 import { TextInput, View } from "react-native";
 function PinInput({ value, onChange, length = 6, secure = false, autoFocus = false, onComplete, className, testID, }) {
@@ -18,6 +18,6 @@ function PinInput({ value, onChange, length = 6, secure = false, autoFocus = fal
                 const filled = index < value.length;
                 const active = index === value.length;
                 return (_jsx(View, { className: "flex-1 aspect-square max-w-[52px] rounded-lg border bg-bg-card items-center justify-center", style: { borderColor: active ? theme.border.focus : theme.border.default }, children: _jsx(Typography.Text, { className: "text-text-primary", variant: "h4", children: filled ? (secure ? "•" : chars[index]) : "" }) }, index));
-            }), _jsx(TextInput, { autoFocus: autoFocus, caretHidden: true, keyboardType: "number-pad", maxLength: length, onChangeText: handleChange, ref: inputRef, style: { position: "absolute", opacity: 0, width: 1, height: 1 }, textContentType: "oneTimeCode", value: value })] }));
+            }), _jsx(TextInput, { autoFocus: autoFocus, caretHidden: true, keyboardType: "number-pad", maxLength: length, onChangeText: handleChange, ref: inputRef, selectionColor: theme.primary, style: { position: "absolute", opacity: 0, width: 1, height: 1 }, textContentType: "oneTimeCode", underlineColorAndroid: "transparent", value: value })] }));
 }
 export default PinInput;

package/dist/Form/Form.QuantitySelector.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import { Typography } from "../Typography";
+import { Display } from "../Display/index.js";
+import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
 import { tv } from "tailwind-variants";
 const quantitySelector = tv({
     slots: {
-        container: "flex-row items-center self-start border border-accent rounded-full px-1",
+        container: "flex-row items-center self-start border border-primary rounded-full px-1",
         button: "w-9 h-9 rounded-full justify-center items-center",
         valueContainer: "min-w-[40px] items-center px-3",
     },

package/dist/Form/Form.RadioButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Typography } from "../Typography";
+import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
 import { tv } from "tailwind-variants";
 const radioButton = tv({
@@ -12,9 +12,9 @@ const radioButton = tv({
     variants: {
         selected: {
             true: {
-                container: "border-accent bg-accent/10",
-                radioCircle: "border-accent",
-                radioInner: "bg-accent",
+                container: "border-primary bg-primary/10",
+                radioCircle: "border-primary",
+                radioInner: "bg-primary",
                 label: "text-text-primary font-semibold",
             },
             false: {

package/dist/Form/Form.SearchBar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import { theme } from "../theme";
-import { cn, tv } from "../theme/tw";
+import { Display } from "../Display/index.js";
+import { theme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
 import { useState } from "react";
 import { TextInput, TouchableOpacity, View } from "react-native";
 const Icon = Display.Icon;
@@ -21,6 +21,6 @@ const searchBarContainer = tv({
  */
 function SearchBar({ value, onChangeText, placeholder = "Search", className, }) {
     const [isFocused, setIsFocused] = useState(false);
-    return (_jsxs(View, { className: cn(searchBarContainer({ focused: isFocused }), className), children: [_jsx(View, { className: "mr-1 ml-0.5 items-center justify-center h-full", children: _jsx(Icon, { className: "text-text-tertiary", name: "search", size: 18, type: "ionicons" }) }), _jsx(TextInput, { className: "flex-1 h-full text-sm py-0 px-1.5 text-text-primary", onBlur: () => setIsFocused(false), onChangeText: onChangeText, onFocus: () => setIsFocused(true), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, value: value }), value.length > 0 && (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: "mr-0.5 ml-1 items-center justify-center h-full px-1", onPress: () => onChangeText(""), children: _jsx(Icon, { className: "text-text-tertiary", name: "x", size: 18, type: "feather" }) }))] }));
+    return (_jsxs(View, { className: cn(searchBarContainer({ focused: isFocused }), className), children: [_jsx(View, { className: "mr-1 ml-0.5 items-center justify-center h-full", children: _jsx(Icon, { className: "text-text-tertiary", name: "search", size: 18, type: "ionicons" }) }), _jsx(TextInput, { className: "flex-1 h-full text-sm py-0 px-1.5 text-text-primary", onBlur: () => setIsFocused(false), onChangeText: onChangeText, onFocus: () => setIsFocused(true), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, underlineColorAndroid: "transparent", value: value }), value.length > 0 && (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: "mr-0.5 ml-1 items-center justify-center h-full px-1", onPress: () => onChangeText(""), children: _jsx(Icon, { className: "text-text-tertiary", name: "x", size: 18, type: "feather" }) }))] }));
 }
 export default SearchBar;

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

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

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";
-import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { themeToVars, useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { 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-primary font-semibold" : "text-text-primary"), children: option.label }), isSelected ? (_jsx(Icon, { color: theme.primary, 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/Form.Slider.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import RNSlider from "@react-native-community/slider";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 /**
  * **Tokenized** slider (track in `primary`) on `@react-native-community/slider` — clean,

package/dist/Form/Form.Switch.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { Switch as RNSwitch, View } from "react-native";
 function Switch({ value, onValueChange, label, disabled = false, className, testID, }) {
-    return (_jsxs(View, { className: cn("flex-row items-center justify-between gap-3", className), children: [label ? (_jsx(Typography.Text, { className: cn("flex-1 text-text-primary", disabled && "text-text-disabled"), children: label })) : null, _jsx(RNSwitch, { accessibilityLabel: label, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, disabled: disabled, ios_backgroundColor: theme.bg.muted, onValueChange: onValueChange, testID: testID, thumbColor: theme.bg.card, trackColor: { false: theme.bg.muted, true: theme.accent }, value: value })] }));
+    return (_jsxs(View, { className: cn("flex-row items-center justify-between gap-3", className), children: [label ? (_jsx(Typography.Text, { className: cn("flex-1 text-text-primary", disabled && "text-text-disabled"), children: label })) : null, _jsx(RNSwitch, { accessibilityLabel: label, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, disabled: disabled, ios_backgroundColor: theme.bg.muted, onValueChange: onValueChange, testID: testID, thumbColor: theme.bg.card, trackColor: { false: theme.bg.muted, true: theme.primary }, value: value })] }));
 }
 export default Switch;

package/dist/Form/Form.TextInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
 import { TextInput } from "react-native";
 const TextInputF = ({ className, ...props }) => {
-    return (_jsx(TextInput, { ...props, className: cn("border border-input rounded-md h-11 px-3 py-2 text-text-primary", className), placeholderTextColor: theme.text.tertiary, style: props.style }));
+    return (_jsx(TextInput, { ...props, className: cn("border border-input rounded-md h-11 px-3 py-2 text-text-primary", className), placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, style: props.style, underlineColorAndroid: "transparent" }));
 };
 export default TextInputF;

package/dist/Form/index.d.ts

@@ -1,33 +1,37 @@
-import Checkbox from "../Form/Form.Checkbox";
-import ControlledCheckbox from "../Form/Form.ControlledCheckbox";
-import ControlledDropdown, { type DropdownOption } from "../Form/Form.ControlledDropdown";
-import ControlledInput from "../Form/Form.ControlledInput";
-import ControlledMonetaryInput from "../Form/Form.ControlledMonetaryInput";
-import ControlledRadioButton from "../Form/Form.ControlledRadioButton";
-import DatePicker from "../Form/Form.DatePicker";
-import Dropdown from "../Form/Form.Dropdown";
-import FAB from "../Form/Form.FAB";
-import { FilterButtonGroup } from "../Form/Form.FilterButton";
-import FractionalQuantityInput from "../Form/Form.FractionalQuantityInput";
-import IconButton from "../Form/Form.IconButton";
-import Input from "../Form/Form.Input";
-import MonetaryInput from "../Form/Form.MonetaryInput";
-import PinInput from "../Form/Form.PinInput";
-import QuantitySelector from "../Form/Form.QuantitySelector";
-import RadioButton from "../Form/Form.RadioButton";
-import SearchBar from "../Form/Form.SearchBar";
-import Select from "../Form/Form.Select";
-import Slider from "../Form/Form.Slider";
-import Switch from "../Form/Form.Switch";
+import Checkbox from "./Form.Checkbox.js";
+import ControlledCheckbox from "./Form.ControlledCheckbox.js";
+import ControlledDropdown, { type DropdownOption } from "./Form.ControlledDropdown.js";
+import ControlledInput from "./Form.ControlledInput.js";
+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 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";
+import RadioButton from "./Form.RadioButton.js";
+import SearchBar from "./Form.SearchBar.js";
+import Select from "./Form.Select.js";
+import Slider from "./Form.Slider.js";
+import Switch from "./Form.Switch.js";
 export declare const Form: {
-    TextInput: import("react").FC<import("../Form/Form.TextInput").TextInputFProps>;
+    TextInput: import("react").FC<import("./Form.TextInput.js").TextInputFProps>;
     Input: typeof Input;
-    InputField: import("react").FC<import("../Form/Form.InputField").InputFieldProps>;
-    Button: import("react").FC<import("../Form/Form.Button").ButtonProps> & {
-        Icon: import("react").FC<import("../Form/Form.Button").ButtonIconProps>;
+    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>;
     };
     IconButton: typeof IconButton;
-    PasswordInput: import("react").FC<import("../Form/Form.PasswordInput").PasswordFieldProps>;
+    PasswordInput: import("react").FC<import("./Form.PasswordInput.js").PasswordFieldProps>;
     QuantitySelector: typeof QuantitySelector;
     FractionalQuantityInput: typeof FractionalQuantityInput;
     RadioButton: typeof RadioButton;
@@ -46,8 +50,10 @@ export declare const Form: {
     ControlledCheckbox: typeof ControlledCheckbox;
     ControlledDropdown: typeof ControlledDropdown;
     ControlledMonetaryInput: typeof ControlledMonetaryInput;
-    FilterButton: import("react").FC<import("../Form/Form.FilterButton").FilterButtonProps>;
+    FilterButton: import("react").FC<import("./Form.FilterButton.js").FilterButtonProps>;
     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

@@ -1,32 +1,36 @@
-import ButtonWithIcon from "../Form/Form.Button";
-import Checkbox from "../Form/Form.Checkbox";
-import ControlledCheckbox from "../Form/Form.ControlledCheckbox";
-import ControlledDropdown from "../Form/Form.ControlledDropdown";
-import ControlledInput from "../Form/Form.ControlledInput";
-import ControlledMonetaryInput from "../Form/Form.ControlledMonetaryInput";
-import ControlledRadioButton from "../Form/Form.ControlledRadioButton";
-import DatePicker from "../Form/Form.DatePicker";
-import Dropdown from "../Form/Form.Dropdown";
-import FAB from "../Form/Form.FAB";
-import { FilterButton, FilterButtonGroup } from "../Form/Form.FilterButton";
-import FractionalQuantityInput from "../Form/Form.FractionalQuantityInput";
-import IconButton from "../Form/Form.IconButton";
-import Input from "../Form/Form.Input";
-import InputField from "../Form/Form.InputField";
-import MonetaryInput from "../Form/Form.MonetaryInput";
-import PasswordInput from "../Form/Form.PasswordInput";
-import PinInput from "../Form/Form.PinInput";
-import QuantitySelector from "../Form/Form.QuantitySelector";
-import RadioButton from "../Form/Form.RadioButton";
-import SearchBar from "../Form/Form.SearchBar";
-import Select from "../Form/Form.Select";
-import Slider from "../Form/Form.Slider";
-import Switch from "../Form/Form.Switch";
-import TextInput from "../Form/Form.TextInput";
+import ButtonWithIcon from "./Form.Button.js";
+import Checkbox from "./Form.Checkbox.js";
+import ControlledCheckbox from "./Form.ControlledCheckbox.js";
+import ControlledDropdown from "./Form.ControlledDropdown.js";
+import ControlledInput from "./Form.ControlledInput.js";
+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 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";
+import QuantitySelector from "./Form.QuantitySelector.js";
+import RadioButton from "./Form.RadioButton.js";
+import SearchBar from "./Form.SearchBar.js";
+import Select from "./Form.Select.js";
+import Slider from "./Form.Slider.js";
+import Switch from "./Form.Switch.js";
+import TextInput from "./Form.TextInput.js";
 export const Form = {
     TextInput,
     Input,
     InputField,
+    KeyboardForm,
+    KeyboardToolbar,
     Button: ButtonWithIcon,
     IconButton,
     PasswordInput,