@sincpro/mobile-ui 1.0.1 → 1.1.0

package/dist/layouts/AuthContainer.js

@@ -2,14 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { Display } from "../Display/index.js";
 import GradientSurface from "../Display/Display.GradientSurface.js";
 import { Pattern } from "../Display/Display.Pattern.js";
+import KeyboardForm from "../Form/Form.KeyboardForm.js";
 import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Keyboard, TouchableOpacity, TouchableWithoutFeedback, useWindowDimensions, View, } from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
 import { SafeAreaView } from "react-native-safe-area-context";
-function AuthContainer({ header, children, onBackPress, background, className, }) {
+function AuthContainer({ header, children, onBackPress, background, className, keyboardToolbar = false, keyboardFormProps, }) {
     const { height: screenHeight } = useWindowDimensions();
     const theme = useTheme();
-    return (_jsxs(GradientSurface, { className: cn("flex-1", className), colors: background?.colors, end: background?.end ?? (background?.colors ? { x: 0, y: 1 } : undefined), preset: background?.surface ?? "warm", radius: "none", start: background?.start ?? (background?.colors ? { x: 0, y: 0 } : undefined), style: { flex: 1 }, children: [background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, _jsx(SafeAreaView, { className: "flex-1", edges: ["top"], children: _jsxs(View, { className: "flex-1", children: [_jsx(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, children: _jsxs(View, { className: "justify-center items-center relative", style: { height: screenHeight * 0.3 }, children: [onBackPress && (_jsx(TouchableOpacity, { className: "absolute top-4 left-4 p-2 z-[1]", onPress: onBackPress, children: _jsx(Display.Icon, { color: background?.textColor ?? theme.text.inverse, name: "arrow-back", size: 24, type: "ionicons" }) })), header] }) }), _jsx(View, { className: "flex-1 bg-bg-card rounded-t-3xl shadow-lg", style: { minHeight: screenHeight * 0.7 }, children: _jsx(KeyboardAwareScrollView, { bottomOffset: 50, bounces: false, className: "flex-1", contentContainerClassName: "flex-grow pb-10", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: _jsx(View, { className: "p-4", children: children }) }) })] }) })] }));
+    return (_jsxs(GradientSurface, { className: cn("flex-1", className), colors: background?.colors, end: background?.end ?? (background?.colors ? { x: 0, y: 1 } : undefined), preset: background?.surface ?? "warm", radius: "none", start: background?.start ?? (background?.colors ? { x: 0, y: 0 } : undefined), style: { flex: 1 }, children: [background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, _jsx(SafeAreaView, { className: "flex-1", edges: ["top"], children: _jsxs(View, { className: "flex-1", children: [_jsx(TouchableWithoutFeedback, { onPress: Keyboard.dismiss, children: _jsxs(View, { className: "justify-center items-center relative", style: { height: screenHeight * 0.3 }, children: [onBackPress && (_jsx(TouchableOpacity, { className: "absolute top-4 left-4 p-2 z-[1]", onPress: onBackPress, children: _jsx(Display.Icon, { color: background?.textColor ?? theme.text.inverse, name: "arrow-back", size: 24, type: "ionicons" }) })), header] }) }), _jsx(View, { className: "flex-1 bg-bg-card rounded-t-3xl shadow-lg", style: { minHeight: screenHeight * 0.7 }, children: _jsx(KeyboardForm, { bottomOffset: keyboardToolbar ? undefined : 50, bounces: false, className: "flex-1", contentContainerClassName: "flex-grow pb-10", keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, ...keyboardFormProps, toolbar: keyboardToolbar, children: _jsx(View, { className: "p-4", children: children }) }) })] }) })] }));
 }
 export default AuthContainer;

package/dist/primitives/BaseButton.d.ts

@@ -1,6 +1,7 @@
 import { type VariantProps } from "../theme/tw.js";
 import type React from "react";
 import { FC } from "react";
+import type { AccessibilityProps } from "react-native";
 declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: "bg-accent";
@@ -123,21 +124,25 @@ declare const buttonIcon: import("tailwind-variants").TVReturnType<{
         true: "opacity-70";
     };
 }, undefined>>;
-export interface BaseButtonProps extends VariantProps<typeof button> {
+export interface BaseButtonProps extends VariantProps<typeof button>, AccessibilityProps {
     title: string;
     onPress?: () => void;
     loading?: boolean;
     disabled?: boolean;
     className?: string;
     icon?: React.ReactNode;
+    accessibleSizing?: boolean;
+    testID?: string;
 }
 export declare const BaseButton: FC<BaseButtonProps>;
-export interface BaseButtonIconProps extends VariantProps<typeof buttonIcon> {
+export interface BaseButtonIconProps extends VariantProps<typeof buttonIcon>, AccessibilityProps {
     icon: string;
     onPress?: () => void;
     loading?: boolean;
     disabled?: boolean;
     className?: string;
+    accessibleSizing?: boolean;
+    testID?: string;
 }
 export declare const BaseButtonIcon: FC<BaseButtonIconProps>;
 declare const BaseButtonWithIcon: React.FC<BaseButtonProps> & {

package/dist/primitives/BaseButton.js

@@ -192,7 +192,7 @@ function getIconSize(size) {
 function getTextVariant(size) {
     return textVariantMap[size] ?? "button";
 }
-export const BaseButton = ({ title, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, }) => {
+export const BaseButton = ({ title, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, accessibleSizing = false, testID, accessibilityLabel, accessibilityState, ...accessibilityProps }) => {
     const textColorClass = textColor({
         variant: variant ?? "primary",
         disabled,
@@ -200,15 +200,29 @@ export const BaseButton = ({ title, onPress, variant = "primary", size = "medium
     const loadingColorValue = getLoadingColor(variant ?? "primary");
     const textVariantValue = getTextVariant(size ?? "medium");
     if (variant === "link") {
-        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
+        return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
+                ...accessibilityState,
+                disabled: disabled || loading,
+                busy: loading,
+            }, style: accessibleSizing
+                ? { minHeight: 48, minWidth: 48, justifyContent: "center" }
+                : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
     }
-    return (_jsxs(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, semibold: variant === "primary", variant: textVariantValue, children: title }))] }));
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityLabel: accessibilityLabel ?? title, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            disabled: disabled || loading,
+            busy: loading,
+        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, semibold: variant === "primary", variant: textVariantValue, children: title }))] }));
 };
-export const BaseButtonIcon = ({ icon, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, }) => {
+export const BaseButtonIcon = ({ icon, onPress, variant = "primary", size = "medium", loading = false, disabled = false, className, accessibleSizing = false, testID, accessibilityState, ...accessibilityProps }) => {
     const iconColorValue = getIconColor(variant ?? "primary", disabled);
     const loadingColorValue = getLoadingColor(variant ?? "primary");
     const iconSizeValue = getIconSize(size ?? "medium");
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: onPress, ...accessibilityProps, accessibilityRole: "button", accessibilityState: {
+            ...accessibilityState,
+            disabled: disabled || loading,
+            busy: loading,
+        }, style: accessibleSizing ? { minHeight: 48, minWidth: 48 } : undefined, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
 };
 // ============================================================================
 // COMPOUND COMPONENT

package/dist/theme/typography.d.ts

@@ -10,6 +10,7 @@ export declare const fontFamilies: Record<FontRole, string>;
 export declare function configureFonts(overrides: Partial<Record<FontRole, string>>): void;
 /** Reset all font roles to the defaults (IBM Plex Sans + IBM Plex Mono). Useful in tests and stories. */
 export declare function resetFonts(): void;
+export declare function resolveTextFontFamily(variant: keyof typeof typographyVariants, bold?: boolean, semibold?: boolean): string;
 export declare const fontWeights: {
     readonly light: "300";
     readonly regular: "400";
@@ -103,6 +104,13 @@ export declare const typographyVariants: {
         readonly lineHeight: number;
         readonly letterSpacing: 0;
     };
+    readonly bodyReadable: {
+        readonly fontSize: 17;
+        readonly fontFamily: string;
+        readonly fontWeight: "400";
+        readonly lineHeight: number;
+        readonly letterSpacing: 0;
+    };
     readonly bodyLarge: {
         readonly fontSize: 16;
         readonly fontFamily: string;
@@ -314,6 +322,13 @@ export declare const Typography: {
             readonly lineHeight: number;
             readonly letterSpacing: 0;
         };
+        readonly bodyReadable: {
+            readonly fontSize: 17;
+            readonly fontFamily: string;
+            readonly fontWeight: "400";
+            readonly lineHeight: number;
+            readonly letterSpacing: 0;
+        };
         readonly bodyLarge: {
             readonly fontSize: 16;
             readonly fontFamily: string;
@@ -421,7 +436,7 @@ export declare const Typography: {
             readonly letterSpacing: 0;
         };
     };
-    readonly variantFontRole: Record<"label" | "button" | "title" | "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bodyLarge" | "body" | "bodySmall" | "labelSmall" | "data" | "dataLarge" | "overline" | "caption" | "captionSmall" | "buttonSmall" | "buttonLarge" | "subtitle", FontRole>;
+    readonly variantFontRole: Record<"label" | "button" | "title" | "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "bodyReadable" | "bodyLarge" | "body" | "bodySmall" | "labelSmall" | "data" | "dataLarge" | "overline" | "caption" | "captionSmall" | "buttonSmall" | "buttonLarge" | "subtitle", FontRole>;
     readonly createTextStyle: (variant: keyof typeof typographyVariants, overrides?: Partial<TextStyle>) => TextStyle;
     readonly createCustomTextStyle: (fontSize: keyof typeof fontSizes, fontFamily: keyof typeof fontFamilies, options?: {
         lineHeight?: keyof typeof lineHeights;

package/dist/theme/typography.js

@@ -26,6 +26,17 @@ export function configureFonts(overrides) {
 export function resetFonts() {
     Object.assign(fontFamilies, DEFAULT_FONT_FAMILIES);
 }
+export function resolveTextFontFamily(variant, bold = false, semibold = false) {
+    const variantFamily = fontFamilies[variantFontRole[variant]] ?? typographyVariants[variant].fontFamily;
+    const isBrandedFace = !variantFamily.startsWith("Inter_") && !variantFamily.startsWith("IBMPlexSans_");
+    return isBrandedFace
+        ? variantFamily
+        : bold
+            ? fontFamilies.extraBold
+            : semibold
+                ? fontFamilies.semiBold
+                : variantFamily;
+}
 export const fontWeights = {
     light: "300",
     regular: "400",
@@ -126,6 +137,13 @@ export const typographyVariants = {
         letterSpacing: letterSpacing.normal,
     },
     // Body
+    bodyReadable: {
+        fontSize: 17,
+        fontFamily: fontFamilies.regular,
+        fontWeight: fontWeights.regular,
+        lineHeight: 17 * lineHeights.normal,
+        letterSpacing: letterSpacing.normal,
+    },
     bodyLarge: {
         fontSize: fontSizes.lg,
         fontFamily: fontFamilies.regular,
@@ -251,6 +269,7 @@ export const variantFontRole = {
     h4: "medium",
     h5: "medium",
     h6: "medium",
+    bodyReadable: "regular",
     bodyLarge: "regular",
     body: "regular",
     bodySmall: "regular",

package/dist/utils/criteria.d.ts

@@ -0,0 +1,56 @@
+export type CriteriaValue = string | number | boolean;
+export interface CriteriaOperator {
+    id: string;
+    label: string;
+    arity: "none" | "one" | "range";
+}
+export interface CriteriaField {
+    id: string;
+    label: string;
+    type: "text" | "number" | "date" | "choice";
+    operators: readonly CriteriaOperator[];
+    options?: readonly {
+        label: string;
+        value: CriteriaValue;
+    }[];
+}
+export interface CriteriaCondition {
+    kind: "condition";
+    field: string;
+    operator: string;
+    values: readonly CriteriaValue[];
+}
+export interface CriteriaGroup {
+    kind: "group";
+    join: "all" | "any" | "none";
+    children: readonly CriteriaNode[];
+}
+export type CriteriaNode = CriteriaCondition | CriteriaGroup;
+export interface CollectionSort {
+    field: string;
+    direction: "asc" | "desc";
+}
+export interface CollectionQuery {
+    search: string;
+    filter: CriteriaGroup;
+    sort: readonly CollectionSort[];
+    groupBy: readonly string[];
+}
+export interface CollectionField {
+    id: string;
+    label: string;
+    ascLabel?: string;
+    descLabel?: string;
+}
+export interface SavedCollectionQuery {
+    id: string;
+    label: string;
+    query: CollectionQuery;
+}
+export declare function parseCriteriaDate(value: CriteriaValue | undefined): Date | null;
+export declare function criteriaAt(root: CriteriaNode, path: readonly number[]): CriteriaNode;
+export declare function replaceCriteria(root: CriteriaGroup, path: readonly number[], replacement: CriteriaNode | null): CriteriaGroup;
+export declare function describeCriteria(node: CriteriaNode, fields: readonly CriteriaField[]): string;
+export declare function validateCondition(condition: CriteriaCondition, fields: readonly CriteriaField[]): string | undefined;
+export declare function validateCriteria(group: CriteriaGroup, fields: readonly CriteriaField[]): string | undefined;
+export declare function moveCollectionEntry<T>(items: readonly T[], index: number, direction: -1 | 1): T[];

package/dist/utils/criteria.js

@@ -0,0 +1,99 @@
+export function parseCriteriaDate(value) {
+    if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(value))
+        return null;
+    const date = new Date(`${value}T00:00:00Z`);
+    if (!Number.isFinite(date.getTime()) || date.toISOString().slice(0, 10) !== value)
+        return null;
+    return new Date(`${value}T12:00:00`);
+}
+export function criteriaAt(root, path) {
+    let node = root;
+    for (const index of path) {
+        if (node.kind !== "group" || !node.children[index])
+            throw new Error("Invalid criteria path");
+        node = node.children[index];
+    }
+    return node;
+}
+export function replaceCriteria(root, path, replacement) {
+    if (path.length === 0) {
+        if (replacement?.kind !== "group")
+            throw new Error("Criteria root must remain a group");
+        return replacement;
+    }
+    const [index, ...rest] = path;
+    const child = root.children[index];
+    if (!child)
+        throw new Error("Invalid criteria path");
+    if (rest.length && child.kind !== "group")
+        throw new Error("Invalid criteria path");
+    const next = rest.length && child.kind === "group"
+        ? replaceCriteria(child, rest, replacement)
+        : replacement;
+    return {
+        ...root,
+        children: root.children.flatMap((item, position) => position !== index ? [item] : next ? [next] : []),
+    };
+}
+export function describeCriteria(node, fields) {
+    if (node.kind === "group") {
+        if (!node.children.length)
+            return "Sin condiciones";
+        const join = { all: "Todas", any: "Cualquiera", none: "Ninguna" }[node.join];
+        return `${join}: (${node.children.map((child) => describeCriteria(child, fields)).join("; ")})`;
+    }
+    const field = fields.find((item) => item.id === node.field);
+    const operator = field?.operators.find((item) => item.id === node.operator);
+    const values = node.values.map((value) => field?.options?.find((option) => option.value === value)?.label ?? String(value));
+    return `${field?.label ?? node.field} ${operator?.label ?? node.operator}${values.length ? ` ${values.join(" — ")}` : ""}`;
+}
+export function validateCondition(condition, fields) {
+    const field = fields.find((item) => item.id === condition.field);
+    if (!field)
+        return "El campo ya no está disponible.";
+    const operator = field.operators.find((item) => item.id === condition.operator);
+    if (!operator)
+        return "El operador no está disponible para este campo.";
+    const count = { none: 0, one: 1, range: 2 }[operator.arity];
+    if (condition.values.length !== count)
+        return "Completa los valores de la condición.";
+    for (const value of condition.values) {
+        if (field.type === "number" && (typeof value !== "number" || !Number.isFinite(value)))
+            return "Introduce un número válido.";
+        if (field.type === "text" && (typeof value !== "string" || !value.trim()))
+            return "Introduce un texto.";
+        if (field.type === "date" && !parseCriteriaDate(value))
+            return "Introduce una fecha válida (AAAA-MM-DD).";
+        if (field.type === "choice" && !field.options?.some((option) => option.value === value))
+            return "Selecciona un valor disponible.";
+    }
+    if (operator.arity === "range" &&
+        field.type === "number" &&
+        Number(condition.values[0]) > Number(condition.values[1]))
+        return "El inicio no puede superar el final.";
+    if (operator.arity === "range" &&
+        field.type === "date" &&
+        String(condition.values[0]) > String(condition.values[1]))
+        return "El inicio no puede superar el final.";
+    return undefined;
+}
+export function validateCriteria(group, fields) {
+    for (const child of group.children) {
+        if (child.kind === "group" && !child.children.length)
+            return "Completa o elimina el grupo vacío.";
+        const error = child.kind === "group"
+            ? validateCriteria(child, fields)
+            : validateCondition(child, fields);
+        if (error)
+            return error;
+    }
+    return undefined;
+}
+export function moveCollectionEntry(items, index, direction) {
+    const target = index + direction;
+    if (index < 0 || index >= items.length || target < 0 || target >= items.length)
+        throw new Error("Invalid collection reorder");
+    const next = [...items];
+    [next[index], next[target]] = [next[target], next[index]];
+    return next;
+}

package/dist/utils/reorder.d.ts

@@ -0,0 +1,4 @@
+export declare function reorderKeys<T>(items: readonly T[], keyExtractor: (item: T) => string): string[];
+export declare function sameOrder(left: readonly string[], right: readonly string[]): boolean;
+export declare function moveReorderItem<T>(items: readonly T[], fromIndex: number, toIndex: number): T[];
+export declare function applyReorder<T>(items: readonly T[], keyExtractor: (item: T) => string, order: readonly string[]): T[];

package/dist/utils/reorder.js

@@ -0,0 +1,32 @@
+export function reorderKeys(items, keyExtractor) {
+    const keys = items.map(keyExtractor);
+    if (keys.some((key) => typeof key !== "string" || !key.trim()) ||
+        new Set(keys).size !== keys.length)
+        throw new Error("ReorderableList requires unique, non-empty string keys.");
+    return keys;
+}
+export function sameOrder(left, right) {
+    return left.length === right.length && left.every((key, index) => key === right[index]);
+}
+export function moveReorderItem(items, fromIndex, toIndex) {
+    if (!Number.isInteger(fromIndex) ||
+        !Number.isInteger(toIndex) ||
+        fromIndex < 0 ||
+        fromIndex >= items.length ||
+        toIndex < 0 ||
+        toIndex >= items.length)
+        throw new Error("ReorderableList received an invalid move.");
+    const next = [...items];
+    const [item] = next.splice(fromIndex, 1);
+    next.splice(toIndex, 0, item);
+    return next;
+}
+export function applyReorder(items, keyExtractor, order) {
+    const keys = reorderKeys(items, keyExtractor);
+    const indices = new Map(keys.map((key, index) => [key, index]));
+    if (order.length !== keys.length ||
+        new Set(order).size !== order.length ||
+        order.some((key) => !indices.has(key)))
+        throw new Error("ReorderableList received an order that does not match the current items.");
+    return order.map((key) => items[indices.get(key)]);
+}

package/dist/views/AuthFormView.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";
 import { type ImageSourcePropType } from "react-native";
@@ -8,6 +9,8 @@ interface AuthFormProps {
     onBack?: () => void;
     FormNode: ReactNode;
     background?: AppBarBackground;
+    keyboardToolbar?: boolean;
+    keyboardFormProps?: Omit<KeyboardFormProps, "children" | "toolbar">;
 }
-declare function AuthFormView({ title, description, logoSource, onBack, FormNode, background, }: AuthFormProps): import("react").JSX.Element;
+declare function AuthFormView({ title, description, logoSource, onBack, FormNode, background, keyboardToolbar, keyboardFormProps, }: AuthFormProps): import("react").JSX.Element;
 export default AuthFormView;

package/dist/views/AuthFormView.js

@@ -5,7 +5,7 @@ import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 const Logo = Display.Logo;
 const Text = Typography.Text;
-function AuthFormView({ title, description, logoSource, onBack, FormNode, background, }) {
+function AuthFormView({ title, description, logoSource, onBack, FormNode, background, keyboardToolbar, keyboardFormProps, }) {
     const renderTitle = () => {
         if (!title)
             return null;
@@ -16,6 +16,6 @@ function AuthFormView({ title, description, logoSource, onBack, FormNode, backgr
             return null;
         return _jsx(Text, { variant: "body", children: description });
     };
-    return (_jsx(AuthContainer, { background: background, header: _jsx(Logo, { size: "large", source: logoSource }), onBackPress: onBack, children: _jsxs(View, { className: "m-4", children: [_jsxs(View, { className: "mb-5", children: [renderTitle(), renderDescription()] }), FormNode] }) }));
+    return (_jsx(AuthContainer, { background: background, header: _jsx(Logo, { size: "large", source: logoSource }), keyboardFormProps: keyboardFormProps, keyboardToolbar: keyboardToolbar, onBackPress: onBack, children: _jsxs(View, { className: "m-4", children: [_jsxs(View, { className: "mb-5", children: [renderTitle(), renderDescription()] }), FormNode] }) }));
 }
 export default AuthFormView;

package/dist/views/FormViewV2.d.ts

@@ -1,3 +1,4 @@
+import { type KeyboardFormProps } from "../Form/Form.KeyboardForm.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl.js";
 import React, { ReactNode } from "react";
@@ -12,12 +13,14 @@ interface FormViewProps<T> {
     errorMessage?: string;
     readonly?: boolean;
     onRefresh?: () => Promise<void>;
+    onRefreshError?: (error: unknown) => void;
     onRetry?: () => void;
     onBack?: () => void;
     withContainer?: boolean;
     children: ReactNode;
 }
-declare function FormViewRoot<T>({ name, description, item, isLoading, isEmpty, hasError, errorMessage, readonly, onRefresh, onRetry, onBack, withContainer, children, }: FormViewProps<T>): React.JSX.Element;
+export declare function refreshFormData(onRefresh: (() => Promise<void>) | undefined, onRefreshError: ((error: unknown) => void) | undefined, setShowRefreshing: (value: boolean) => void): Promise<void>;
+declare function FormViewRoot<T>({ name, description, item, isLoading, isEmpty, hasError, errorMessage, readonly, onRefresh, onRefreshError, onRetry, onBack, withContainer, children, }: FormViewProps<T>): React.JSX.Element;
 interface HeaderProps {
     /** AppBar display variant. `large` = big title (list/index screens). `center` = modal/detail. */
     variant?: "default" | "large" | "center";
@@ -53,8 +56,10 @@ declare function HeaderActionsBar({ children }: {
  * Use as a child of `<FormViewV2.Header>` — it lands in the AppBar subheader slot.
  */
 declare function HeaderSegmented<T extends string>(props: SegmentedControlProps<T>): React.JSX.Element;
-declare function Content({ withMargin, children, }: {
+declare function Content({ withMargin, keyboardToolbar, keyboardFormProps, children, }: {
     withMargin?: boolean;
+    keyboardToolbar?: boolean;
+    keyboardFormProps?: Omit<KeyboardFormProps, "children" | "toolbar">;
     children: ReactNode;
 }): React.JSX.Element;
 /**

package/dist/views/FormViewV2.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { Display } from "../Display/index.js";
 import { ErrorBoundary, Feedback } from "../Feedback/index.js";
+import KeyboardForm from "../Form/Form.KeyboardForm.js";
 import { useBottomInset } from "../layouts/BottomInset.js";
 import Container from "../layouts/Container.js";
 import { AppBar } from "../Navigation/Navigation.AppBar.js";
@@ -10,13 +11,31 @@ import { useTheme } from "../theme/index.js";
 import { FormViewProvider, useFormView } from "./FormViewV2.context.js";
 import React from "react";
 import { RefreshControl, View } from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
-function FormViewRoot({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onBack, withContainer = true, children, }) {
+const RefreshErrorContext = React.createContext(undefined);
+export async function refreshFormData(onRefresh, onRefreshError, setShowRefreshing) {
+    setShowRefreshing(true);
+    try {
+        await onRefresh?.();
+    }
+    catch (error) {
+        console.error("[FormViewV2] Refresh failed", error);
+        try {
+            onRefreshError?.(error);
+        }
+        catch (callbackError) {
+            console.error("[FormViewV2] onRefreshError callback failed", callbackError);
+        }
+    }
+    finally {
+        setShowRefreshing(false);
+    }
+}
+function FormViewRoot({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRefreshError, onRetry, onBack, withContainer = true, children, }) {
     const Wrapper = withContainer ? Container : View;
     const wrapperProps = withContainer
         ? { edges: ["bottom", "left", "right"] }
         : { style: { flex: 1 } };
-    return (_jsx(FormViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isEmpty: isEmpty, isLoading: isLoading, item: item, name: name, onBack: onBack, onRefresh: onRefresh, onRetry: onRetry, readonly: readonly, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
+    return (_jsx(FormViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, isEmpty: isEmpty, isLoading: isLoading, item: item, name: name, onBack: onBack, onRefresh: onRefresh, onRetry: onRetry, readonly: readonly, children: _jsx(RefreshErrorContext.Provider, { value: onRefreshError, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }) }));
 }
 function Header({ variant = "default", tone, actions, children, topSpacing, background, }) {
     const { name, description, onBack } = useFormView();
@@ -36,24 +55,24 @@ function HeaderActionsBar({ children }) {
 function HeaderSegmented(props) {
     return _jsx(SegmentedControl, { ...props });
 }
-function Content({ withMargin = false, children, }) {
+function Content({ withMargin = false, keyboardToolbar = false, keyboardFormProps, children, }) {
     const { name, isLoading, isEmpty, hasError, errorMessage, item, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useFormView();
     const bottomInset = useBottomInset();
     const theme = useTheme();
+    const onRefreshError = React.useContext(RefreshErrorContext);
     const handleRefresh = React.useCallback(async () => {
-        setShowRefreshing(true);
-        if (onRefresh) {
-            await onRefresh();
-        }
-        setShowRefreshing(false);
-    }, [onRefresh, setShowRefreshing]);
+        await refreshFormData(onRefresh, onRefreshError, setShowRefreshing);
+    }, [onRefresh, onRefreshError, setShowRefreshing]);
     const isCenteredContent = isLoading || isEmpty || !item || hasError;
-    return (_jsx(KeyboardAwareScrollView, { bottomOffset: 20, contentContainerStyle: {
-            flexGrow: 1,
-            justifyContent: isCenteredContent ? "center" : "flex-start",
-            alignItems: isCenteredContent ? "center" : "stretch",
-            paddingBottom: bottomInset,
-        }, keyboardShouldPersistTaps: "handled", refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { flex: 1, backgroundColor: theme.bg.page }, children: isCenteredContent ? (_jsx(_Fragment, { children: isLoading ? (_jsx(Feedback.Loading, { message: `Cargando ${name}...` })) : hasError ? (_jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry })) : (_jsx(Feedback.Empty, {})) })) : (_jsx(View, { style: withMargin ? { paddingHorizontal: 16 } : undefined, children: children })) }));
+    return (_jsx(KeyboardForm, { ...keyboardFormProps, contentContainerStyle: [
+            {
+                flexGrow: 1,
+                justifyContent: isCenteredContent ? "center" : "flex-start",
+                alignItems: isCenteredContent ? "center" : "stretch",
+                paddingBottom: bottomInset,
+            },
+            keyboardFormProps?.contentContainerStyle,
+        ], keyboardShouldPersistTaps: keyboardFormProps?.keyboardShouldPersistTaps ?? "handled", refreshControl: keyboardFormProps?.refreshControl ?? (_jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing })), style: [{ flex: 1, backgroundColor: theme.bg.page }, keyboardFormProps?.style], toolbar: keyboardToolbar, children: isCenteredContent ? (_jsx(_Fragment, { children: isLoading ? (_jsx(Feedback.Loading, { message: `Cargando ${name}...` })) : hasError ? (_jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry })) : (_jsx(Feedback.Empty, {})) })) : (_jsx(View, { style: withMargin ? { paddingHorizontal: 16 } : undefined, children: children })) }));
 }
 /**
  * @deprecated Content already handles isEmpty/!item by rendering Feedback.Empty internally.

package/dist/views/ListViewV2.d.ts

@@ -2,7 +2,7 @@ import { type SearchHistoryProps } from "../Display/Display.SearchHistory.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
 import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl.js";
 import React, { ReactNode } from "react";
-import { StyleProp, ViewStyle } from "react-native";
+import { type ScrollViewProps, StyleProp, ViewStyle } from "react-native";
 interface ListViewProps<T> {
     name: string;
     description?: string;
@@ -12,6 +12,7 @@ interface ListViewProps<T> {
     errorMessage?: string;
     readonly?: boolean;
     onRefresh?: () => Promise<void>;
+    onRefreshError?: (error: unknown) => void;
     onRetry?: () => void;
     onPressItem?: (item: T) => void;
     onDeleteItem?: (item: T) => void;
@@ -25,7 +26,8 @@ interface ListViewProps<T> {
     withContainer?: boolean;
     children: ReactNode;
 }
-declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, backgroundColor, withContainer, children, }: ListViewProps<T>): React.JSX.Element;
+export declare function refreshListData(onRefresh: (() => Promise<void>) | undefined, onRefreshError: ((error: unknown) => void) | undefined, setShowRefreshing: (value: boolean) => void): Promise<void>;
+declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRefreshError, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, backgroundColor, withContainer, children, }: ListViewProps<T>): React.JSX.Element;
 interface HeaderProps {
     /** AppBar display variant. `large` = big title (list/index). `center` = modal/detail. */
     variant?: "default" | "large" | "center";
@@ -79,14 +81,15 @@ declare function FilterChip({ label, active, onPress }: FilterChipProps): React.
 declare function FilterChips({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
-declare function Content({ children, withMargin, }: {
+type ListScrollProps = Pick<ScrollViewProps, "keyboardShouldPersistTaps" | "keyboardDismissMode" | "testID">;
+declare function Content({ children, withMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, }: {
     children?: (item: any) => ReactNode;
     withMargin?: boolean;
-}): React.JSX.Element;
-declare function ContentList({ children, contentWithMargin, }: {
+} & ListScrollProps): React.JSX.Element;
+declare function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, }: {
     children?: (item: any) => ReactNode;
     contentWithMargin: boolean;
-}): React.JSX.Element;
+} & ListScrollProps): React.JSX.Element;
 declare function Footer({ children }: {
     children: ReactNode;
 }): React.JSX.Element | null;