@sincpro/mobile-ui 2.0.1 → 3.0.0

package/dist/theme/typography.d.ts

@@ -60,21 +60,21 @@ export declare const typographyVariants: {
         readonly fontFamily: string;
         readonly fontWeight: "900";
         readonly lineHeight: number;
-        readonly letterSpacing: -0.25;
+        readonly letterSpacing: -1.2;
     };
     readonly h1: {
         readonly fontSize: 32;
         readonly fontFamily: string;
         readonly fontWeight: "700";
         readonly lineHeight: number;
-        readonly letterSpacing: -0.25;
+        readonly letterSpacing: -0.8;
     };
     readonly h2: {
         readonly fontSize: 28;
         readonly fontFamily: string;
         readonly fontWeight: "700";
         readonly lineHeight: number;
-        readonly letterSpacing: 0;
+        readonly letterSpacing: -0.4;
     };
     readonly h3: {
         readonly fontSize: 24;
@@ -219,6 +219,7 @@ export declare const typographyVariants: {
     };
 };
 export declare const variantFontRole: Record<keyof typeof typographyVariants, FontRole>;
+export declare function appliedTextStyle(variant: keyof typeof typographyVariants, bold?: boolean, semibold?: boolean): TextStyle;
 export declare const createTextStyle: (variant: keyof typeof typographyVariants, overrides?: Partial<TextStyle>) => TextStyle;
 export declare const createCustomTextStyle: (fontSize: keyof typeof fontSizes, fontFamily: keyof typeof fontFamilies, options?: {
     lineHeight?: keyof typeof lineHeights;
@@ -278,21 +279,21 @@ export declare const Typography: {
             readonly fontFamily: string;
             readonly fontWeight: "900";
             readonly lineHeight: number;
-            readonly letterSpacing: -0.25;
+            readonly letterSpacing: -1.2;
         };
         readonly h1: {
             readonly fontSize: 32;
             readonly fontFamily: string;
             readonly fontWeight: "700";
             readonly lineHeight: number;
-            readonly letterSpacing: -0.25;
+            readonly letterSpacing: -0.8;
         };
         readonly h2: {
             readonly fontSize: 28;
             readonly fontFamily: string;
             readonly fontWeight: "700";
             readonly lineHeight: number;
-            readonly letterSpacing: 0;
+            readonly letterSpacing: -0.4;
         };
         readonly h3: {
             readonly fontSize: 24;
@@ -436,7 +437,7 @@ export declare const Typography: {
             readonly letterSpacing: 0;
         };
     };
-    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 variantFontRole: Record<"display" | "button" | "label" | "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

@@ -91,7 +91,7 @@ export const typographyVariants = {
         fontFamily: fontFamilies.titleBlack,
         fontWeight: fontWeights.titleBlack,
         lineHeight: fontSizes["7xl"] * lineHeights.tight,
-        letterSpacing: letterSpacing.tight,
+        letterSpacing: -1.2,
     },
     // Headings (title role)
     h1: {
@@ -99,14 +99,14 @@ export const typographyVariants = {
         fontFamily: fontFamilies.title,
         fontWeight: fontWeights.title,
         lineHeight: fontSizes["5xl"] * lineHeights.tight,
-        letterSpacing: letterSpacing.tight,
+        letterSpacing: -0.8,
     },
     h2: {
         fontSize: fontSizes["4xl"],
         fontFamily: fontFamilies.title,
         fontWeight: fontWeights.title,
         lineHeight: fontSizes["4xl"] * lineHeights.snug,
-        letterSpacing: letterSpacing.normal,
+        letterSpacing: -0.4,
     },
     h3: {
         fontSize: fontSizes["3xl"],
@@ -286,9 +286,30 @@ export const variantFontRole = {
     title: "semiBold",
     subtitle: "medium",
 };
+/* The shipped files stop at Bold 700. Asking iOS/Android for 800 or 900 on
+ * that file synthesizes a faux face and drops the loaded family. Rendering
+ * uses the weight of the file that was actually registered. */
+const loadedFaceWeight = {
+    IBMPlexMono_400Regular: "400",
+    IBMPlexMono_500Medium: "500",
+    IBMPlexSans_300Light: "300",
+    IBMPlexSans_400Regular: "400",
+    IBMPlexSans_500Medium: "500",
+    IBMPlexSans_600SemiBold: "600",
+    IBMPlexSans_700Bold: "700",
+};
+export function appliedTextStyle(variant, bold = false, semibold = false) {
+    const fontFamily = resolveTextFontFamily(variant, bold, semibold);
+    const { fontWeight, ...metrics } = typographyVariants[variant];
+    return {
+        ...metrics,
+        fontFamily,
+        fontWeight: loadedFaceWeight[fontFamily] ?? fontWeight,
+    };
+}
 /* -------------------- Utility Functions -------------------- */
 export const createTextStyle = (variant, overrides) => ({
-    ...typographyVariants[variant],
+    ...appliedTextStyle(variant),
     ...overrides,
 });
 export const createCustomTextStyle = (fontSize, fontFamily, options) => {

package/dist/utils/timezone.d.ts

@@ -1,8 +1,3 @@
-/**
- * @deprecated Region-coupled (LatAm locale data); relocated to the core alongside the
- * TimeZone widgets. Import from `@sincpro/mobile/ui/components/molecules` instead. Kept
- * here for backwards compatibility and removed in the next major.
- */
 export interface TimezoneLocale {
     timezone: string;
     locale: string;

package/dist/views/AuthFormView.d.ts

@@ -2,6 +2,7 @@ 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 { Edge } from "react-native-safe-area-context";
 interface AuthFormProps {
     title?: string;
     description?: string;
@@ -9,8 +10,9 @@ interface AuthFormProps {
     onBack?: () => void;
     FormNode: ReactNode;
     background?: AppBarBackground;
+    edges?: Edge[];
     keyboardToolbar?: boolean;
     keyboardFormProps?: Omit<KeyboardFormProps, "children" | "toolbar">;
 }
-declare function AuthFormView({ title, description, logoSource, onBack, FormNode, background, keyboardToolbar, keyboardFormProps, }: AuthFormProps): import("react").JSX.Element;
+declare function AuthFormView({ title, description, logoSource, onBack, FormNode, background, edges, 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, keyboardToolbar, keyboardFormProps, }) {
+function AuthFormView({ title, description, logoSource, onBack, FormNode, background, edges, 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 }), keyboardFormProps: keyboardFormProps, keyboardToolbar: keyboardToolbar, onBackPress: onBack, children: _jsxs(View, { className: "m-4", children: [_jsxs(View, { className: "mb-5", children: [renderTitle(), renderDescription()] }), FormNode] }) }));
+    return (_jsx(AuthContainer, { background: background, edges: edges, 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,8 +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 { Edge } from "react-native-safe-area-context";
 interface FormViewProps<T> {
     name: string;
     description?: string;
@@ -17,11 +17,14 @@ interface FormViewProps<T> {
     onRetry?: () => void;
     onBack?: () => void;
     withContainer?: boolean;
+    edges?: Edge[];
     children: ReactNode;
 }
 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;
+declare function FormViewRoot<T>({ name, description, item, isLoading, isEmpty, hasError, errorMessage, readonly, onRefresh, onRefreshError, onRetry, onBack, withContainer, edges, children, }: FormViewProps<T>): React.JSX.Element;
 interface HeaderProps {
+    /** Reserve the top inset; disable when the host already handles it. */
+    safeArea?: boolean;
     /** AppBar display variant. `large` = big title (list/index screens). `center` = modal/detail. */
     variant?: "default" | "large" | "center";
     /** Surface tone. `dark` = always-dark hero. `gradient` = brand accent gradient. */
@@ -40,10 +43,8 @@ interface HeaderProps {
      * See `AppBarBackground` for the full shape.
      */
     background?: AppBarBackground;
-    /** @deprecated Pass `variant` prop instead. */
-    logoSource?: ImageSource;
 }
-declare function Header({ variant, tone, actions, children, topSpacing, background, }: HeaderProps): React.JSX.Element;
+declare function Header({ safeArea, variant, tone, actions, children, topSpacing, background, }: HeaderProps): React.JSX.Element;
 declare function HeaderActions({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
@@ -62,13 +63,6 @@ declare function Content({ withMargin, keyboardToolbar, keyboardFormProps, child
     keyboardFormProps?: Omit<KeyboardFormProps, "children" | "toolbar">;
     children: ReactNode;
 }): React.JSX.Element;
-/**
- * @deprecated Content already handles isEmpty/!item by rendering Feedback.Empty internally.
- * Use `<FormViewV2.Content>` directly — this wrapper is redundant.
- */
-declare function Form({ children }: {
-    children: ReactNode;
-}): React.JSX.Element;
 /** Layout wrapper for a set of Group cards. Content already handles isEmpty/loading states. */
 declare function Groups({ children }: {
     children: ReactNode;
@@ -148,7 +142,6 @@ export declare const FormViewV2: {
         Segmented: typeof HeaderSegmented;
     };
     Content: typeof Content & {
-        Form: typeof Form;
         Groups: typeof Groups;
         Group: typeof Group;
         Section: typeof Section;

package/dist/views/FormViewV2.js

@@ -10,8 +10,17 @@ import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl.js"
 import { useTheme } from "../theme/index.js";
 import { FormViewProvider, useFormView } from "./FormViewV2.context.js";
 import React from "react";
-import { RefreshControl, View } from "react-native";
+import { RefreshControl, useWindowDimensions, View } from "react-native";
+import { KeyboardStickyView } from "react-native-keyboard-controller";
 const RefreshErrorContext = React.createContext(undefined);
+const FooterHeightContext = React.createContext(null);
+function useFooterHeight() {
+    const context = React.useContext(FooterHeightContext);
+    if (!context) {
+        throw new Error("FormViewV2.Content and Footer must be used within FormViewV2.Root");
+    }
+    return context;
+}
 export async function refreshFormData(onRefresh, onRefreshError, setShowRefreshing) {
     setShowRefreshing(true);
     try {
@@ -30,16 +39,16 @@ export async function refreshFormData(onRefresh, onRefreshError, setShowRefreshi
         setShowRefreshing(false);
     }
 }
-function FormViewRoot({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRefreshError, onRetry, onBack, withContainer = true, children, }) {
+function FormViewRoot({ name, description, item, isLoading = false, isEmpty = false, hasError = false, errorMessage, readonly = false, onRefresh, onRefreshError, onRetry, onBack, withContainer = true, edges = ["left", "right"], children, }) {
+    const [footerHeight, setFooterHeight] = React.useState(0);
+    const footerContext = React.useMemo(() => ({ height: footerHeight, setHeight: setFooterHeight }), [footerHeight]);
     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(RefreshErrorContext.Provider, { value: onRefreshError, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }) }));
+    const wrapperProps = withContainer ? { edges } : { 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(RefreshErrorContext.Provider, { value: onRefreshError, children: _jsx(ErrorBoundary, { children: _jsx(FooterHeightContext.Provider, { value: footerContext, children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }) }) }));
 }
-function Header({ variant = "default", tone, actions, children, topSpacing, background, }) {
+function Header({ safeArea = true, variant = "default", tone, actions, children, topSpacing, background, }) {
     const { name, description, onBack } = useFormView();
-    return (_jsx(AppBar, { actions: actions, background: background, onBack: onBack, safeArea: false, subheader: children, subtitle: description ?? undefined, title: name, tone: tone, topSpacing: topSpacing, variant: variant }));
+    return (_jsx(AppBar, { actions: actions, background: background, onBack: onBack, safeArea: safeArea, subheader: children, subtitle: description ?? undefined, title: name, tone: tone, topSpacing: topSpacing, variant: variant }));
 }
 function HeaderActions({ children }) {
     return (_jsx(View, { className: "flex-row px-4 my-2 items-center justify-between flex-1 gap-2", children: children }));
@@ -55,9 +64,11 @@ function HeaderActionsBar({ children }) {
 function HeaderSegmented(props) {
     return _jsx(SegmentedControl, { ...props });
 }
-function Content({ withMargin = false, keyboardToolbar = false, keyboardFormProps, children, }) {
+function Content({ withMargin = false, keyboardToolbar = true, keyboardFormProps, children, }) {
     const { name, isLoading, isEmpty, hasError, errorMessage, item, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useFormView();
     const bottomInset = useBottomInset();
+    const { height: measuredFooterHeight } = useFooterHeight();
+    const stickyFooterHeight = isLoading || isEmpty ? 0 : measuredFooterHeight;
     const theme = useTheme();
     const onRefreshError = React.useContext(RefreshErrorContext);
     const handleRefresh = React.useCallback(async () => {
@@ -72,18 +83,7 @@ function Content({ withMargin = false, keyboardToolbar = false, keyboardFormProp
                 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.
- * Use `<FormViewV2.Content>` directly — this wrapper is redundant.
- */
-function Form({ children }) {
-    const { isEmpty, item } = useFormView();
-    if (isEmpty || !item) {
-        return _jsx(Feedback.Empty, {});
-    }
-    return _jsx(_Fragment, { children: children });
+        ], keyboardShouldPersistTaps: keyboardFormProps?.keyboardShouldPersistTaps ?? "handled", refreshControl: keyboardFormProps?.refreshControl ?? (_jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing })), stickyFooterHeight: stickyFooterHeight, 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 })) }));
 }
 /** Layout wrapper for a set of Group cards. Content already handles isEmpty/loading states. */
 function Groups({ children }) {
@@ -122,12 +122,17 @@ function Section({ title, footer, children, }) {
 }
 function Footer({ children }) {
     const { isEmpty, isLoading } = useFormView();
+    const { setHeight } = useFooterHeight();
+    const frame = React.useRef(null);
+    const { height: windowHeight } = useWindowDimensions();
+    const [bottomGap, setBottomGap] = React.useState(0);
+    React.useEffect(() => () => setHeight(0), [setHeight]);
     if (isEmpty || isLoading) {
         return null;
     }
-    // Sticky bottom bar (lives outside the scroll). No shadow — a top hairline integrates it
-    // with the form instead of reading as a detached floating card.
-    return (_jsx(View, { className: "bg-bg-card px-4 py-3 border-t border-border-light", children: children }));
+    return (_jsx(View, { onLayout: () => {
+            frame.current?.measureInWindow((_x, y, _width, height) => setBottomGap(Math.max(0, windowHeight - y - height)));
+        }, ref: frame, children: _jsx(KeyboardStickyView, { offset: { closed: 0, opened: bottomGap }, children: _jsx(View, { className: "bg-bg-card px-4 py-3 border-t border-border-light", onLayout: (event) => setHeight(event.nativeEvent.layout.height), children: children }) }) }));
 }
 // Nested Header components
 const HeaderWithSubComponents = Object.assign(Header, {
@@ -137,7 +142,6 @@ const HeaderWithSubComponents = Object.assign(Header, {
 });
 // Nested Content components
 const ContentWithSubComponents = Object.assign(Content, {
-    Form,
     Groups,
     Group,
     Section,

package/dist/views/ListViewV2.context.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 interface ListViewContextValue<T> {
     name: string;
     description?: string;
-    items: T[];
+    items: readonly T[];
     isLoading: boolean;
     hasError: boolean;
     errorMessage?: string;
@@ -11,8 +11,8 @@ interface ListViewContextValue<T> {
     setShowRefreshing: (value: boolean) => void;
     onRefresh?: () => Promise<void>;
     onRetry?: () => void;
-    onPressItem?: (item: T) => void;
-    onDeleteItem?: (item: T) => void;
+    onPressItem?(item: T): void;
+    onDeleteItem?(item: T): void;
     onSearch?: (query: string) => void;
     onBack?: () => void;
     onLoadMore?: () => void;
@@ -22,7 +22,7 @@ interface ListViewContextValue<T> {
 export declare function ListViewProvider<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, hasMore, children, }: {
     name: string;
     description?: string;
-    items: T[];
+    items: readonly T[];
     isLoading?: boolean;
     hasError?: boolean;
     errorMessage?: string;
@@ -38,5 +38,5 @@ export declare function ListViewProvider<T>({ name, description, items, isLoadin
     hasMore?: boolean;
     children: ReactNode;
 }): import("react").JSX.Element;
-export declare function useListView<T>(): ListViewContextValue<T>;
+export declare function useListView<T = unknown>(): ListViewContextValue<T>;
 export {};

package/dist/views/ListViewV2.d.ts

@@ -1,13 +1,15 @@
+import { type FlashListProps, type FlashListRef } from "@shopify/flash-list";
 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 { IRowItem } from "./types/IListView.js";
+import { type IRowItem } from "./types/IListView.js";
 import React, { ReactNode, type Ref } from "react";
-import { FlatList, type FlatListProps, type ScrollViewProps, StyleProp, ViewStyle } from "react-native";
+import { type ScrollViewProps, StyleProp, ViewStyle } from "react-native";
+import type { Edge } from "react-native-safe-area-context";
 interface ListViewProps<T> {
     name: string;
     description?: string;
-    items: T[];
+    items: readonly T[];
     isLoading?: boolean;
     hasError?: boolean;
     errorMessage?: string;
@@ -26,11 +28,14 @@ interface ListViewProps<T> {
     hasMore?: boolean;
     backgroundColor?: string;
     withContainer?: boolean;
+    edges?: Edge[];
     children: ReactNode;
 }
 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, hasMore, backgroundColor, withContainer, children, }: ListViewProps<T>): React.JSX.Element;
+declare function ListViewRoot<T>({ name, description, items, isLoading, hasError, errorMessage, readonly, onRefresh, onRefreshError, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore, hasMore, backgroundColor, withContainer, edges, children, }: ListViewProps<T>): React.JSX.Element;
 interface HeaderProps {
+    /** Reserve the top inset; disable when the host already handles it. */
+    safeArea?: boolean;
     /** AppBar display variant. `large` = big title (list/index). `center` = modal/detail. */
     variant?: "default" | "large" | "center";
     /** Surface tone. `dark` = always-dark hero. `gradient` = brand accent gradient. */
@@ -50,7 +55,7 @@ interface HeaderProps {
      */
     topSpacing?: number;
 }
-declare function Header({ variant, tone, actions, children, background, topSpacing, }: HeaderProps): React.JSX.Element;
+declare function Header({ safeArea, variant, tone, actions, children, background, topSpacing, }: HeaderProps): React.JSX.Element;
 declare function HeaderSearch({ searchQuery }: {
     searchQuery?: string;
 }): React.JSX.Element | null;
@@ -84,20 +89,20 @@ declare function FilterChips({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
 type ListScrollProps = Pick<ScrollViewProps, "keyboardShouldPersistTaps" | "keyboardDismissMode" | "testID">;
-export type ListViewVirtualizationProps = Pick<FlatListProps<IRowItem<unknown>>, "initialNumToRender" | "maxToRenderPerBatch" | "windowSize" | "updateCellsBatchingPeriod" | "removeClippedSubviews" | "extraData" | "getItemLayout" | "onViewableItemsChanged" | "viewabilityConfig" | "onEndReachedThreshold" | "maintainVisibleContentPosition">;
-interface ListContentOptions {
-    listProps?: ListViewVirtualizationProps;
-    listRef?: Ref<FlatList<IRowItem<unknown>>>;
+export type ListViewVirtualizationProps<T = unknown> = Pick<FlashListProps<IRowItem<T>>, "drawDistance" | "maxItemsInRecyclePool" | "getItemType" | "extraData" | "initialScrollIndex" | "initialScrollIndexParams" | "onViewableItemsChanged" | "viewabilityConfig" | "viewabilityConfigCallbackPairs" | "onEndReachedThreshold" | "maintainVisibleContentPosition">;
+interface ListContentOptions<T> {
+    listProps?: ListViewVirtualizationProps<T>;
+    listRef?: Ref<FlashListRef<IRowItem<T>>>;
     contentContainerStyle?: StyleProp<ViewStyle>;
 }
-declare function Content({ children, withMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }: {
-    children?: (item: any) => ReactNode;
-    withMargin?: boolean;
-} & ListScrollProps & ListContentOptions): React.JSX.Element;
-declare function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }: {
-    children?: (item: any) => ReactNode;
+declare function ContentList<T = unknown>({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }: {
+    children?: (item: T, row: IRowItem<T>) => ReactNode;
     contentWithMargin: boolean;
-} & ListScrollProps & ListContentOptions): React.JSX.Element;
+} & ListScrollProps & ListContentOptions<T>): React.JSX.Element;
+declare function Content<T = unknown>({ children, withMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }: {
+    children?: (item: T, row: IRowItem<T>) => ReactNode;
+    withMargin?: boolean;
+} & ListScrollProps & ListContentOptions<T>): React.JSX.Element;
 declare function Footer({ children }: {
     children: ReactNode;
 }): React.JSX.Element | null;
@@ -153,7 +158,7 @@ interface RowActionButtonProps {
 declare function RowActionButton({ icon, onPress }: RowActionButtonProps): React.JSX.Element;
 /**
  * Screen container for a collection (list / index / search results).
- * Owns safe-area, the FlatList (pagination + pull-to-refresh), record count, and the
+ * Owns safe-area, the FlashList (pagination + pull-to-refresh), record count, and the
  * loading/empty/error states.
  *
  * API map:
@@ -164,7 +169,7 @@ declare function RowActionButton({ icon, onPress }: RowActionButtonProps): React
  *     .Header.Segmented          — tab-like switch in the subheader (Activos / Archivados)
  *     .Header.Filters(.Chips/.Chip) — horizontal filter pills (SIBLING below the header)
  *     .Header.ActionsBar         — SIBLING bar below the header (bulk select, etc.)
- *   ListViewV2.Content           — FlatList body; `children` is an optional custom row renderer
+ *   ListViewV2.Content           — FlashList body; `children` is an optional custom row renderer
  *     .Content.Row(.Avatar/.Content/.Title/.Subtitle/.Footer/.Actions/.ActionButton)
  *   ListViewV2.Footer        — pinned footer (hidden when empty)
  *   ListViewV2.FloatingButton — absolute FAB overlay

package/dist/views/ListViewV2.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { FlashList, } from "@shopify/flash-list";
 import { Display } from "../Display/index.js";
 import SearchHistory from "../Display/Display.SearchHistory.js";
 import { ErrorBoundary, Feedback } from "../Feedback/index.js";
@@ -12,7 +13,7 @@ import { Typography } from "../Typography/index.js";
 import { ListViewProvider, useListView } from "./ListViewV2.context.js";
 import { toRowItems } from "./types/IListView.js";
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
-import { FlatList, RefreshControl, ScrollView, TouchableOpacity, View, } from "react-native";
+import { RefreshControl, ScrollView, TouchableOpacity, View, } from "react-native";
 const RefreshErrorContext = createContext(undefined);
 export async function refreshListData(onRefresh, onRefreshError, setShowRefreshing) {
     setShowRefreshing(true);
@@ -32,17 +33,13 @@ export async function refreshListData(onRefresh, onRefreshError, setShowRefreshi
         setShowRefreshing(false);
     }
 }
-function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRefreshError, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, hasMore = true, backgroundColor, withContainer = true, children, }) {
-    const Wrapper = withContainer ? Container : View;
-    const wrapperProps = withContainer
-        ? { edges: ["bottom", "left", "right"] }
-        : { className: "flex-1 bg-bg-page" };
-    // Propagate contentWithMargin to ContentList via context
-    return (_jsx(ListViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, hasMore: hasMore, isLoading: isLoading, items: items, loadingMore: loadingMore, name: name, onBack: onBack, onDeleteItem: onDeleteItem, onLoadMore: onLoadMore, onPressItem: onPressItem, onRefresh: onRefresh, onRetry: onRetry, onSearch: onSearch, readonly: readonly, children: _jsx(RefreshErrorContext.Provider, { value: onRefreshError, children: _jsx(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }) }));
+function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRefreshError, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, hasMore = true, backgroundColor, withContainer = true, edges, children, }) {
+    const style = backgroundColor ? { backgroundColor } : undefined;
+    return (_jsx(ListViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, hasMore: hasMore, isLoading: isLoading, items: items, loadingMore: loadingMore, name: name, onBack: onBack, onDeleteItem: onDeleteItem, onLoadMore: onLoadMore, onPressItem: onPressItem, onRefresh: onRefresh, onRetry: onRetry, onSearch: onSearch, readonly: readonly, children: _jsx(RefreshErrorContext.Provider, { value: onRefreshError, children: _jsx(ErrorBoundary, { children: withContainer ? (_jsx(Container, { edges: edges, style: style, children: children })) : (_jsx(View, { className: "flex-1 bg-bg-page", style: style, children: children })) }) }) }));
 }
-function Header({ variant = "large", tone, actions, children, background, topSpacing, }) {
+function Header({ safeArea = true, variant = "large", tone, actions, children, background, topSpacing, }) {
     const { name, description, onBack } = useListView();
-    return (_jsx(Navigation.AppBar, { actions: actions, background: background, onBack: onBack, safeArea: false, subheader: children, subtitle: description ?? undefined, title: name, tone: tone, topSpacing: topSpacing, variant: variant }));
+    return (_jsx(Navigation.AppBar, { actions: actions, background: background, onBack: onBack, safeArea: safeArea, subheader: children, subtitle: description ?? undefined, title: name, tone: tone, topSpacing: topSpacing, variant: variant }));
 }
 function HeaderSearch({ searchQuery = "" }) {
     const { name, onSearch } = useListView();
@@ -118,8 +115,41 @@ function FilterChip({ label, active = false, onPress }) {
 function FilterChips({ children }) {
     return (_jsx(ScrollView, { contentContainerStyle: { paddingHorizontal: 16, gap: 8 }, horizontal: true, showsHorizontalScrollIndicator: false, style: { flexGrow: 0 }, children: children }));
 }
-function rowKey(item) {
-    return String(item.id ?? item.index);
+function rowKey(row) {
+    return String(row.id);
+}
+function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }) {
+    const { items, onRefresh, showRefreshing, setShowRefreshing, onPressItem, onDeleteItem, readonly, onLoadMore, loadingMore, hasMore, } = useListView();
+    const bottomInset = useBottomInset();
+    const theme = useTheme();
+    const rowItems = useMemo(() => toRowItems(items), [items]);
+    const onRefreshError = useContext(RefreshErrorContext);
+    const handleRefresh = useCallback(async () => {
+        await refreshListData(onRefresh, onRefreshError, setShowRefreshing);
+    }, [onRefresh, onRefreshError, setShowRefreshing]);
+    const renderItem = useCallback(({ item: row }) => {
+        if (children) {
+            return _jsx(_Fragment, { children: children(row.item, row) });
+        }
+        const onPress = () => onPressItem?.(row.item);
+        const onDelete = () => onDeleteItem?.(row.item);
+        const isReadOnly = row.readonly || readonly || false;
+        return (_jsx(Navigation.RowItem, { item: row, onDelete: onDelete, onPress: onPress, readonly: isReadOnly }));
+    }, [children, onPressItem, onDeleteItem, readonly]);
+    return (_jsx(View, { style: {
+            flex: 1,
+            marginTop: 2,
+            paddingHorizontal: contentWithMargin ? 4 : 0,
+            backgroundColor: theme.bg.page,
+        }, children: _jsx(FlashList, { ...listProps, contentContainerStyle: [
+                bottomInset ? { paddingBottom: bottomInset } : undefined,
+                contentContainerStyle,
+            ], data: rowItems, keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, keyExtractor: rowKey, ListFooterComponent: loadingMore ? (_jsx(View, { className: "py-4", children: _jsx(Feedback.Spinner, { size: "small" }) })) : undefined, maintainVisibleContentPosition: listProps?.maintainVisibleContentPosition ?? { disabled: true }, onEndReached: onLoadMore
+                ? () => {
+                    if (hasMore && !loadingMore && !showRefreshing)
+                        onLoadMore();
+                }
+                : undefined, onEndReachedThreshold: listProps?.onEndReachedThreshold ?? 0.5, ref: listRef, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, showsVerticalScrollIndicator: false, style: { flex: 1 }, testID: testID }) }));
 }
 function Content({ children, withMargin = true, keyboardShouldPersistTaps = "handled", keyboardDismissMode = "none", testID, listProps, listRef, contentContainerStyle, }) {
     const { name, items, isLoading, hasError, errorMessage, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useListView();
@@ -156,39 +186,6 @@ function Content({ children, withMargin = true, keyboardShouldPersistTaps = "han
     }
     return (_jsxs(View, { style: { flex: 1, backgroundColor: theme.bg.page }, children: [_jsx(Display.CountRecords, { count: items.length || 0, name: name }), _jsx(ContentList, { contentContainerStyle: contentContainerStyle, contentWithMargin: withMargin, keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, listProps: listProps, listRef: listRef, testID: testID, children: children })] }));
 }
-function ContentList({ children, contentWithMargin, keyboardShouldPersistTaps, keyboardDismissMode, testID, listProps, listRef, contentContainerStyle, }) {
-    const { items, onRefresh, showRefreshing, setShowRefreshing, onPressItem, onDeleteItem, readonly, onLoadMore, loadingMore, hasMore, } = useListView();
-    const bottomInset = useBottomInset();
-    const theme = useTheme();
-    const rowItems = useMemo(() => toRowItems(items), [items]);
-    const onRefreshError = useContext(RefreshErrorContext);
-    const handleRefresh = useCallback(async () => {
-        await refreshListData(onRefresh, onRefreshError, setShowRefreshing);
-    }, [onRefresh, onRefreshError, setShowRefreshing]);
-    const renderItem = useCallback(({ item }) => {
-        if (children) {
-            return _jsx(_Fragment, { children: children(item) });
-        }
-        const onPress = () => onPressItem?.(item);
-        const onDelete = () => onDeleteItem?.(item);
-        const isReadOnly = item.readonly || readonly || false;
-        return (_jsx(Navigation.RowItem, { item: { ...item }, onDelete: onDelete, onPress: onPress, readonly: isReadOnly }));
-    }, [children, onPressItem, onDeleteItem, readonly]);
-    return (_jsx(View, { style: {
-            flex: 1,
-            marginTop: 2,
-            paddingHorizontal: contentWithMargin ? 4 : 0,
-            backgroundColor: theme.bg.page,
-        }, children: _jsx(FlatList, { ...listProps, contentContainerStyle: [
-                bottomInset ? { paddingBottom: bottomInset } : undefined,
-                contentContainerStyle,
-            ], data: rowItems, keyboardDismissMode: keyboardDismissMode, keyboardShouldPersistTaps: keyboardShouldPersistTaps, keyExtractor: rowKey, ListFooterComponent: loadingMore ? (_jsx(View, { className: "py-4", children: _jsx(Feedback.Spinner, { size: "small" }) })) : undefined, onEndReached: onLoadMore
-                ? () => {
-                    if (hasMore && !loadingMore && !showRefreshing)
-                        onLoadMore();
-                }
-                : undefined, onEndReachedThreshold: listProps?.onEndReachedThreshold ?? 0.5, ref: listRef, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false, testID: testID }) }));
-}
 function Footer({ children }) {
     const { items } = useListView();
     if (items.length === 0) {
@@ -259,7 +256,7 @@ const ContentWithSubComponents = Object.assign(Content, {
 });
 /**
  * Screen container for a collection (list / index / search results).
- * Owns safe-area, the FlatList (pagination + pull-to-refresh), record count, and the
+ * Owns safe-area, the FlashList (pagination + pull-to-refresh), record count, and the
  * loading/empty/error states.
  *
  * API map:
@@ -270,7 +267,7 @@ const ContentWithSubComponents = Object.assign(Content, {
  *     .Header.Segmented          — tab-like switch in the subheader (Activos / Archivados)
  *     .Header.Filters(.Chips/.Chip) — horizontal filter pills (SIBLING below the header)
  *     .Header.ActionsBar         — SIBLING bar below the header (bulk select, etc.)
- *   ListViewV2.Content           — FlatList body; `children` is an optional custom row renderer
+ *   ListViewV2.Content           — FlashList body; `children` is an optional custom row renderer
  *     .Content.Row(.Avatar/.Content/.Title/.Subtitle/.Footer/.Actions/.ActionButton)
  *   ListViewV2.Footer        — pinned footer (hidden when empty)
  *   ListViewV2.FloatingButton — absolute FAB overlay

package/dist/views/types/IListView.d.ts

@@ -1,18 +1,19 @@
 import { UICollectionItem, UIItem } from "./UIItem.js";
 import { ReactNode } from "react";
-export type IRowItem<T> = T & UIItem & {
+export type IRowItem<T> = UIItem & {
+    item: T;
     id: string | number;
     index: number;
     rowTitle: string;
     rowSubtitle?: string;
 };
 export interface IRowItemProps<T> extends UIItem {
-    item: IRowItem<T> | T;
+    item: IRowItem<T>;
 }
 export interface IListView<T> extends UICollectionItem<T> {
     name: string;
     description?: string;
-    items: T[];
+    items: readonly T[];
     isLoading?: boolean;
     onRefresh?: () => void | Promise<void>;
     onBack?: () => void | Promise<void>;
@@ -31,4 +32,4 @@ export type RowKeys<T> = Partial<{
     readOnly?: keyof T;
 }>;
 export declare function toRowItem<T>(item: T, index: number, mapKeys?: RowKeys<T>): IRowItem<T>;
-export declare function toRowItems<T>(items: T[], mapKeys?: RowKeys<T>): IRowItem<T>[];
+export declare function toRowItems<T>(items: readonly T[], mapKeys?: RowKeys<T>): IRowItem<T>[];