@sincpro/mobile-ui 1.0.1 → 2.0.0

package/dist/primitives/BaseButton.js

@@ -8,7 +8,7 @@ import { ActivityIndicator, TouchableOpacity, View } from "react-native";
 // STYLE VARIANTS
 // ============================================================================
 const button = tv({
-    base: "rounded-md items-center justify-center flex-row min-h-[44px]",
+    base: "rounded-md items-center justify-center flex-row min-h-[48px]",
     variants: {
         variant: {
             primary: "bg-accent",
@@ -18,12 +18,12 @@ const button = tv({
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
             flat: "bg-text-primary/10",
-            link: "bg-transparent min-h-0",
+            link: "bg-transparent",
             transparent: "bg-transparent border border-border-light",
         },
         size: {
-            small: "py-1.5 px-3 min-h-[36px]",
-            medium: "py-2.5 px-4 min-h-[44px]",
+            small: "py-1.5 px-3 min-h-[48px]",
+            medium: "py-2.5 px-4 min-h-[48px]",
             large: "py-3 px-5 min-h-[48px]",
         },
         disabled: {
@@ -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, testID, accessibilityLabel, accessibilityState, ...accessibilityProps }) => {
     const textColorClass = textColor({
         variant: variant ?? "primary",
         disabled,
@@ -200,15 +200,27 @@ 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: { minHeight: 48, minWidth: 48, justifyContent: "center" }, testID: testID, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { allowFontScaling: true, className: textColorClass, style: { flexShrink: 1 }, 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: { minHeight: 48, minWidth: 48 }, testID: testID, children: [icon && !loading && _jsx(View, { className: "mr-2", children: icon }), loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { allowFontScaling: true, className: textColorClass, semibold: variant === "primary", style: { flexShrink: 1 }, 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, 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: { minHeight: 48, minWidth: 48 }, 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<"display" | "label" | "button" | "title" | "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/image.d.ts

@@ -0,0 +1,3 @@
+import type { ImageProps } from "expo-image";
+export type ImageSource = NonNullable<ImageProps["source"]>;
+export declare function imageSourceKey(source: ImageProps["source"]): string | undefined;

package/dist/utils/image.js

@@ -0,0 +1,13 @@
+const sharedSourceKeys = new WeakMap();
+let nextSharedSourceKey = 0;
+export function imageSourceKey(source) {
+    if (source && typeof source === "object" && "nativeRefType" in source) {
+        let key = sharedSourceKeys.get(source);
+        if (key === undefined) {
+            key = nextSharedSourceKey++;
+            sharedSourceKeys.set(source, key);
+        }
+        return `shared-image-${key}`;
+    }
+    return JSON.stringify(source);
+}

package/dist/utils/keys.d.ts

@@ -0,0 +1 @@
+export declare function uniqueKeys<T>(items: readonly T[], keyExtractor: (item: T, index: number) => string, component: string): string[];

package/dist/utils/keys.js

@@ -0,0 +1,7 @@
+export function uniqueKeys(items, keyExtractor, component) {
+    const keys = items.map(keyExtractor);
+    if (keys.some((key) => typeof key !== "string" || !key.trim()) ||
+        new Set(keys).size !== keys.length)
+        throw new Error(`${component} requires unique, non-empty string keys.`);
+    return keys;
+}

package/dist/utils/progress.d.ts

@@ -0,0 +1 @@
+export declare function normalizeProgress(value: number): number;

package/dist/utils/progress.js

@@ -0,0 +1,5 @@
+export function normalizeProgress(value) {
+    if (!Number.isFinite(value))
+        throw new RangeError("Progress value must be a finite number");
+    return Math.max(0, Math.min(1, value));
+}

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,29 @@
+import { uniqueKeys } from "./keys.js";
+export function reorderKeys(items, keyExtractor) {
+    return uniqueKeys(items, keyExtractor, "ReorderableList");
+}
+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/utils/useReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare function useReducedMotion(): boolean;

package/dist/utils/useReducedMotion.js

@@ -0,0 +1,43 @@
+import { useSyncExternalStore } from "react";
+import { AccessibilityInfo } from "react-native";
+const listeners = new Set();
+let reducedMotion = true;
+let generation = 0;
+let subscription;
+function publish(enabled) {
+    if (reducedMotion === enabled)
+        return;
+    reducedMotion = enabled;
+    for (const listener of [...listeners])
+        listener();
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    if (listeners.size === 1) {
+        const request = ++generation;
+        let receivedChange = false;
+        subscription = AccessibilityInfo.addEventListener("reduceMotionChanged", (enabled) => {
+            receivedChange = true;
+            publish(enabled);
+        });
+        AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
+            if (request === generation && !receivedChange)
+                publish(enabled);
+        }, (error) => {
+            if (request === generation)
+                console.warn("[useReducedMotion] Could not read accessibility preference", error);
+        });
+    }
+    return () => {
+        listeners.delete(listener);
+        if (listeners.size === 0) {
+            generation += 1;
+            subscription?.remove();
+            subscription = undefined;
+            reducedMotion = true;
+        }
+    };
+}
+export function useReducedMotion() {
+    return useSyncExternalStore(subscribe, () => reducedMotion, () => true);
+}

package/dist/utils/useSheetTranslation.d.ts

@@ -0,0 +1,5 @@
+import { Animated } from "react-native";
+export declare function useSheetTranslation(visible: boolean, hiddenOffset?: number): {
+    translateY: Animated.Value;
+    reducedMotion: boolean;
+};

package/dist/utils/useSheetTranslation.js

@@ -0,0 +1,23 @@
+import { useReducedMotion } from "./useReducedMotion.js";
+import { useEffect, useState } from "react";
+import { Animated } from "react-native";
+export function useSheetTranslation(visible, hiddenOffset = 800) {
+    const reducedMotion = useReducedMotion();
+    const [translateY] = useState(() => new Animated.Value(visible ? 0 : hiddenOffset));
+    useEffect(() => {
+        translateY.stopAnimation();
+        if (visible && !reducedMotion) {
+            const animation = Animated.spring(translateY, {
+                toValue: 0,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 300,
+            });
+            animation.start();
+            return () => animation.stop();
+        }
+        translateY.setValue(visible ? 0 : hiddenOffset);
+        return () => translateY.stopAnimation();
+    }, [visible, hiddenOffset, reducedMotion, translateY]);
+    return { translateY, reducedMotion };
+}

package/dist/views/AppSplashView.d.ts

@@ -1,12 +1,13 @@
 import { type SpinnerVariant } from "../Feedback/Feedback.Spinner.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
+import type { ImageSource } from "../utils/image.js";
 import type { ReactNode } from "react";
-import { type ImageSourcePropType, type ViewStyle } from "react-native";
+import { type ViewStyle } from "react-native";
 export interface AppSplashViewProps {
     /** Gradient + pattern background. Defaults to `night-green` preset. */
     background?: AppBarBackground;
     /** App logo shown centered above the loading indicator. */
-    logo?: ImageSourcePropType;
+    logo?: ImageSource;
     /** Built-in loading animation variant. Ignored when `loader` is provided. Defaults to `"dots"`. */
     loadingVariant?: SpinnerVariant;
     /** Fully custom loading element. Takes precedence over `loadingVariant`. */

package/dist/views/AppSplashView.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import ExpoImage from "../Display/Display.ExpoImage.js";
 import GradientSurface from "../Display/Display.GradientSurface.js";
 import { Pattern } from "../Display/Display.Pattern.js";
 import Spinner from "../Feedback/Feedback.Spinner.js";
-import { Image, View } from "react-native";
+import { View } from "react-native";
 export function AppSplashView({ background, logo, loadingVariant = "dots", loader, style, }) {
-    return (_jsxs(GradientSurface, { className: "flex-1", colors: background?.colors, end: background?.end, padding: "none", preset: background?.surface ?? "night-green", radius: "none", start: background?.start, style: { flex: 1, ...style }, children: [background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, _jsxs(View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: [logo ? (_jsx(Image, { source: logo, style: { width: 140, height: 140, resizeMode: "contain", marginBottom: 40 } })) : null, loader ?? (_jsx(Spinner, { color: "rgba(255,255,255,0.9)", size: "large", variant: loadingVariant }))] })] }));
+    return (_jsxs(GradientSurface, { className: "flex-1", colors: background?.colors, end: background?.end, padding: "none", preset: background?.surface ?? "night-green", radius: "none", start: background?.start, style: { flex: 1, ...style }, children: [background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, _jsxs(View, { style: { flex: 1, alignItems: "center", justifyContent: "center" }, children: [logo ? (_jsx(ExpoImage, { contentFit: "contain", source: logo, style: { width: 140, height: 140, marginBottom: 40 } })) : null, loader ?? (_jsx(Spinner, { color: "rgba(255,255,255,0.9)", size: "large", variant: loadingVariant }))] })] }));
 }
 export default AppSplashView;

package/dist/views/AuthFormView.d.ts

@@ -1,13 +1,16 @@
+import type { KeyboardFormProps } from "../Form/Form.KeyboardForm.js";
 import type { AppBarBackground } from "../Navigation/Navigation.AppBar.js";
+import type { ImageSource } from "../utils/image.js";
 import { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 interface AuthFormProps {
     title?: string;
     description?: string;
-    logoSource?: ImageSourcePropType;
+    logoSource?: ImageSource;
     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,7 +1,8 @@
+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 type { ImageSource } from "../utils/image.js";
 import React, { ReactNode } from "react";
-import { type ImageSourcePropType } from "react-native";
 interface FormViewProps<T> {
     name: string;
     description?: string;
@@ -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";
@@ -38,7 +41,7 @@ interface HeaderProps {
      */
     background?: AppBarBackground;
     /** @deprecated Pass `variant` prop instead. */
-    logoSource?: ImageSourcePropType;
+    logoSource?: ImageSource;
 }
 declare function Header({ variant, tone, actions, children, topSpacing, background, }: HeaderProps): React.JSX.Element;
 declare function HeaderActions({ children }: {
@@ -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;
 /**