@sincpro/mobile-ui 0.4.1 → 0.6.0

package/dist/index.js

@@ -1,4 +1,5 @@
 // Design System - Compound Components
+export { Actions } from "./Actions";
 export { Dialog } from "./Dialog";
 export { Display } from "./Display";
 export { Feedback } from "./Feedback";
@@ -13,6 +14,7 @@ export { getBrandingLogo, setBranding, } from "./branding";
 export { cn, tv } from "./theme/tw";
 export { fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights, typographyVariants, } from "./theme/typography";
 // Layouts
+export { BottomInsetContext } from "./layouts/BottomInset";
 export { default as Container } from "./layouts/Container";
 export { default as GradientContainer } from "./layouts/GradientContainer";
 export { default as PlainLayout } from "./layouts/PlainLayout";

package/dist/layouts/BottomInset.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Extra bottom inset for scroll views, provided by the host app when a floating
+ * element (e.g. position:absolute tab bar) sits above the native safe area.
+ *
+ * FormViewV2.Content and ListViewV2.Content add this value as extra
+ * `contentContainerStyle.paddingBottom` so content can scroll fully above the bar.
+ *
+ * Usage in the host app:
+ *   <BottomInsetContext.Provider value={72}>
+ *     <Tabs.Navigator ...>
+ *
+ * Default: 0 — no extra inset (backwards compatible).
+ * The native safe-area inset is already handled by Container (SafeAreaView edges=["bottom"]).
+ */
+export declare const BottomInsetContext: import("react").Context<number>;
+export declare const useBottomInset: () => number;

package/dist/layouts/BottomInset.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+/**
+ * Extra bottom inset for scroll views, provided by the host app when a floating
+ * element (e.g. position:absolute tab bar) sits above the native safe area.
+ *
+ * FormViewV2.Content and ListViewV2.Content add this value as extra
+ * `contentContainerStyle.paddingBottom` so content can scroll fully above the bar.
+ *
+ * Usage in the host app:
+ *   <BottomInsetContext.Provider value={72}>
+ *     <Tabs.Navigator ...>
+ *
+ * Default: 0 — no extra inset (backwards compatible).
+ * The native safe-area inset is already handled by Container (SafeAreaView edges=["bottom"]).
+ */
+export const BottomInsetContext = createContext(0);
+export const useBottomInset = () => useContext(BottomInsetContext);

package/dist/layouts/TabNavigatorLayout.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
+import DisplayIcon from "../Display/Display.Icon";
 import Container from "../layouts/Container";
 import { Typography } from "../Typography";
 import { Children, isValidElement } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 function TabIcon({ focused, Icon }) {
-    return (_jsxs(View, { className: "justify-center items-center w-10 h-10", children: [focused && _jsx(View, { className: "absolute w-10 h-10 rounded-full bg-primary" }), _jsx(Display.Icon, { color: focused ? "#FFFFFF" : "#6B7280", customIcon: Icon, size: 24, type: "custom" })] }));
+    return (_jsxs(View, { className: "justify-center items-center w-10 h-10", children: [focused && _jsx(View, { className: "absolute w-10 h-10 rounded-full bg-primary" }), _jsx(DisplayIcon, { color: focused ? "#FFFFFF" : "#6B7280", customIcon: Icon, size: 24, type: "custom" })] }));
 }
 function TabNavigator({ items, currentPath, onTabPress, }) {
     const insets = useSafeAreaInsets();

package/dist/primitives/BaseButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
+import Icon from "../Display/Display.Icon";
 import { theme } from "../theme";
 import { tv } from "../theme/tw";
 import { Typography } from "../Typography";
@@ -222,9 +222,9 @@ export const BaseButtonIcon = ({ icon, onPress, variant = "primary", size = "med
         return (_jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
                 borderRadius: 8,
                 opacity: disabled ? 0.7 : 1,
-            }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: onPress, children: _jsx(View, { className: buttonIcon({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Display.Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }) }) }));
+            }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: onPress, children: _jsx(View, { className: buttonIcon({ size, disabled }), style: { backgroundColor: "transparent" }, 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, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Display.Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
+    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 })) }));
 };
 // ============================================================================
 // COMPOUND COMPONENT

package/dist/theme/default.js

@@ -4,7 +4,7 @@ export const DEFAULT_THEME = {
     secondary: "#64748B",
     accent: "#F59E0B",
     bg: {
-        page: "#F9FAFB",
+        page: "#F0F1F3",
         card: "#FFFFFF",
         popover: "#FFFFFF",
         muted: "#F3F4F6",

package/dist/views/FormViewV2.d.ts

@@ -1,4 +1,5 @@
-import { EVariantScreenHeader } from "../widgets/ScreenHeader";
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
+import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl";
 import React, { ReactNode } from "react";
 import { type ImageSourcePropType } from "react-native";
 interface FormViewProps<T> {
@@ -17,46 +18,135 @@ interface FormViewProps<T> {
     children: ReactNode;
 }
 declare function FormViewRoot<T>({ name, description, item, isLoading, isEmpty, hasError, errorMessage, readonly, onRefresh, onRetry, onBack, withContainer, children, }: FormViewProps<T>): React.JSX.Element;
-declare function Header({ children, }: {
-    /** @deprecated The header is now flat (Navigation.AppBar); `variant`/`logoSource` are ignored. */
-    variant?: EVariantScreenHeader;
-    logoSource?: ImageSourcePropType;
+interface HeaderProps {
+    /** 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. */
+    tone?: "default" | "dark" | "gradient";
+    /** Actions rendered in the AppBar action slot (AppBar.Action nodes). */
+    actions?: ReactNode;
+    /** Subheader content rendered below the title bar (SearchBar, SegmentedControl, etc.). */
     children?: ReactNode;
-}): React.JSX.Element;
+    /**
+     * [large variant] Extra top padding (px) above the title.
+     * Use ~16 on root screens (no back button) for more breathing room.
+     */
+    topSpacing?: number;
+    /**
+     * Gradient + texture surface. Automatically activates white text/icons — no need to set `tone="dark"`.
+     * See `AppBarBackground` for the full shape.
+     */
+    background?: AppBarBackground;
+    /** @deprecated Pass `variant` prop instead. */
+    logoSource?: ImageSourcePropType;
+}
+declare function Header({ variant, tone, actions, children, topSpacing, background, }: HeaderProps): React.JSX.Element;
 declare function HeaderActions({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
+/** Secondary action bar docked below the AppBar — use for Save/Cancel, filter chips, etc. */
 declare function HeaderActionsBar({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
+/**
+ * Tab-like segmented switch for the header subheader (e.g. "Detalles" / "Historial").
+ * 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, }: {
     withMargin?: boolean;
     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;
-}): React.JSX.Element | null;
-declare function Group({ children, withMargin, elevation, }: {
+}): React.JSX.Element;
+/**
+ * Card-bordered input group for form fields. Use inside `Content.Groups`.
+ *
+ * Separation — by DEFAULT each Group is its own inset card (`withMargin=true`:
+ * margin 16/4, iOS "grouped" style), so several Groups read as separate sections.
+ * If you DON'T want separation, put all fields in a SINGLE Group (one continuous
+ * card), or pass `withMargin={false}` to render flush/edge-to-edge — e.g. when
+ * embedding inside your own layout.
+ *
+ * `title` renders a SectionHeader label above the card.
+ */
+declare function Group({ children, withMargin, elevation, padding, variant, title, }: {
     children: ReactNode;
+    /** `true` (default) = inset card with margins; `false` = flush, no margin. */
     withMargin?: boolean;
-    elevation?: "sm" | "md" | "lg";
+    /**
+     * Frame style. `card` (default) wraps fields in a Display.Card. `plain` drops the
+     * frame so the content sits directly on the page — useful when the children already
+     * carry their own surface (Form.Input, Display.Card, custom rows) and a wrapping card
+     * would just double up.
+     */
+    variant?: "card" | "plain";
+    /**
+     * [card only] Shadow. `none` (default) = flat — the inputs already carry their own card
+     * surface, so a group shadow only adds a "floating" double-shadow. Opt into `sm`/`md`
+     * for a raised group when it sits directly on the page.
+     */
+    elevation?: "none" | "sm" | "md" | "lg";
+    /**
+     * Inner padding (Display.Card scale). `md` (default) aligns the title with the labels.
+     * Applies to BOTH variants, so `plain` keeps the exact same content position as `card`.
+     */
+    padding?: "none" | "sm" | "md" | "lg";
+    /** Label rendered above the group (SectionHeader style). */
+    title?: string;
+}): React.JSX.Element;
+/**
+ * Settings-style section: titled card grouping Display.MenuButton rows.
+ * Delegates to the standalone `MenuSection` widget — single source of truth
+ * for this pattern whether used inside a FormView or on a standalone screen.
+ */
+declare function Section({ title, footer, children, }: {
+    title?: string;
+    /** Hint text rendered below the card (e.g. "Toca para cambiar la configuración"). */
+    footer?: string;
+    children: ReactNode;
 }): React.JSX.Element;
 declare function Footer({ children }: {
     children: ReactNode;
 }): React.JSX.Element | null;
+/**
+ * Screen container for a single record (detail / create / edit / settings).
+ * Owns safe-area, scroll (KeyboardAware), refresh, and the loading/empty/error states.
+ *
+ * API map:
+ *   FormViewV2.Root      — provider + container; pass `item`, `isLoading`, `hasError`, `onBack`…
+ *   FormViewV2.Header        — AppBar (variant: default | large | center · tone: default | dark | gradient)
+ *     .Header child            → subheader slot: <Header.Segmented> or any node (SearchBar, etc.)
+ *     .Header.Segmented        — tab-like switch in the subheader (Detalles / Historial)
+ *     .Header.ActionsBar       — SIBLING bar below the header (Guardar / Cancelar)
+ *     .Header.Actions          — inline action row (legacy helper)
+ *   FormViewV2.Content       — scroll body; renders Feedback for loading/empty/error
+ *     .Content.Groups          — layout wrapper for Group cards
+ *     .Content.Group           — bordered card of inputs (optional `title`)
+ *     .Content.Section         — SectionHeader + Card (settings/menu rows)
+ *   FormViewV2.Footer        — sticky bottom bar (primary CTA)
+ */
 export declare const FormViewV2: {
     Root: typeof FormViewRoot;
     Header: typeof Header & {
         Actions: typeof HeaderActions;
         ActionsBar: typeof HeaderActionsBar;
+        Segmented: typeof HeaderSegmented;
     };
     Content: typeof Content & {
         Form: typeof Form;
         Groups: typeof Groups;
         Group: typeof Group;
+        Section: typeof Section;
     };
     Footer: typeof Footer;
 };

package/dist/views/FormViewV2.js

@@ -1,33 +1,45 @@
-import { jsx as _jsx, Fragment as _Fragment } from "nativewind/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { Display } from "../Display";
 import { ErrorBoundary, Feedback } from "../Feedback";
+import { useBottomInset } from "../layouts/BottomInset";
 import Container from "../layouts/Container";
 import { AppBar } from "../Navigation/Navigation.AppBar";
-import { theme } from "../theme";
+import { MenuSection } from "../Navigation/Navigation.MenuSection";
+import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl";
+import { useTheme } from "../theme";
 import { FormViewProvider, useFormView } from "../views/FormViewV2.context";
 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 Wrapper = withContainer ? Container : View;
-    // The header (AppBar) / parent layout owns the TOP safe-area; the inner Container only
-    // reserves the remaining edges to avoid stacking the top inset (double padding).
     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 }) }) }));
 }
-function Header({ children, }) {
+function Header({ variant = "default", tone, actions, children, topSpacing, background, }) {
     const { name, description, onBack } = useFormView();
-    return (_jsx(AppBar, { onBack: onBack, safeArea: false, subheader: children, subtitle: description ? description : `Seleccionar ${name}`, title: name }));
+    return (_jsx(AppBar, { actions: actions, background: background, onBack: onBack, safeArea: false, 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-4 items-center justify-between flex-1 gap-2", children: children }));
+    return (_jsx(View, { className: "flex-row px-4 my-2 items-center justify-between flex-1 gap-2", children: children }));
 }
+/** Secondary action bar docked below the AppBar — use for Save/Cancel, filter chips, etc. */
 function HeaderActionsBar({ children }) {
-    return (_jsx(View, { className: "bg-bg-card px-4 py-3 border-b border-border-default flex-row gap-2", children: children }));
+    return (_jsx(View, { className: "bg-bg-card px-4 pt-1 pb-3 border-b border-border-light flex-row gap-2 items-center", children: children }));
+}
+/**
+ * Tab-like segmented switch for the header subheader (e.g. "Detalles" / "Historial").
+ * Use as a child of `<FormViewV2.Header>` — it lands in the AppBar subheader slot.
+ */
+function HeaderSegmented(props) {
+    return _jsx(SegmentedControl, { ...props });
 }
 function Content({ withMargin = false, children, }) {
     const { name, isLoading, isEmpty, hasError, errorMessage, item, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useFormView();
+    const bottomInset = useBottomInset();
+    const theme = useTheme();
     const handleRefresh = React.useCallback(async () => {
         setShowRefreshing(true);
         if (onRefresh) {
@@ -40,8 +52,13 @@ function Content({ withMargin = false, children, }) {
             flexGrow: 1,
             justifyContent: isCenteredContent ? "center" : "flex-start",
             alignItems: isCenteredContent ? "center" : "stretch",
-        }, keyboardShouldPersistTaps: "handled", refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { flex: 1 }, 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 })) }));
+            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 })) }));
 }
+/**
+ * @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) {
@@ -49,37 +66,80 @@ function Form({ children }) {
     }
     return _jsx(_Fragment, { children: children });
 }
+/** Layout wrapper for a set of Group cards. Content already handles isEmpty/loading states. */
 function Groups({ children }) {
-    const { isEmpty } = useFormView();
-    if (isEmpty) {
-        return null;
-    }
     return _jsx(_Fragment, { children: children });
 }
-function Group({ children, withMargin = true, elevation = "md", }) {
-    const groupClass = withMargin
-        ? "bg-bg-card mx-4 my-1 p-1 rounded-lg border border-border-light"
-        : "bg-bg-card p-1 rounded-lg border border-border-light";
-    return (_jsx(View, { className: groupClass, style: theme.shadow[elevation], children: children }));
+/**
+ * Card-bordered input group for form fields. Use inside `Content.Groups`.
+ *
+ * Separation — by DEFAULT each Group is its own inset card (`withMargin=true`:
+ * margin 16/4, iOS "grouped" style), so several Groups read as separate sections.
+ * If you DON'T want separation, put all fields in a SINGLE Group (one continuous
+ * card), or pass `withMargin={false}` to render flush/edge-to-edge — e.g. when
+ * embedding inside your own layout.
+ *
+ * `title` renders a SectionHeader label above the card.
+ */
+function Group({ children, withMargin = true, elevation = "none", padding = "md", variant = "card", title, }) {
+    // `plain` mirrors the card's inner padding so the content lands in the SAME position
+    // as `card` — only the frame (border/bg/shadow) is dropped.
+    const paddingClass = { none: "p-0", sm: "p-3", md: "p-4", lg: "p-6" }[padding];
+    const body = variant === "plain" ? (_jsx(View, { className: paddingClass, children: children })) : (_jsx(Display.Card, { elevation: elevation, padding: padding, children: children }));
+    // Title alignment is identical in both variants (same inset as the card's content).
+    const header = title ? _jsx(Display.SectionHeader, { title: title }) : null;
+    if (withMargin) {
+        return (_jsxs(View, { style: { marginHorizontal: 16, marginVertical: 6 }, children: [header, body] }));
+    }
+    return (_jsxs(_Fragment, { children: [header, body] }));
+}
+/**
+ * Settings-style section: titled card grouping Display.MenuButton rows.
+ * Delegates to the standalone `MenuSection` widget — single source of truth
+ * for this pattern whether used inside a FormView or on a standalone screen.
+ */
+function Section({ title, footer, children, }) {
+    return (_jsx(MenuSection, { footer: footer, title: title, children: children }));
 }
 function Footer({ children }) {
     const { isEmpty, isLoading } = useFormView();
     if (isEmpty || isLoading) {
         return null;
     }
-    return (_jsx(View, { className: "bg-bg-card px-4 py-3 border-t border-border-default", style: theme.shadow.sm, children: children }));
+    // 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 }));
 }
 // Nested Header components
 const HeaderWithSubComponents = Object.assign(Header, {
     Actions: HeaderActions,
     ActionsBar: HeaderActionsBar,
+    Segmented: HeaderSegmented,
 });
 // Nested Content components
 const ContentWithSubComponents = Object.assign(Content, {
     Form,
     Groups,
     Group,
+    Section,
 });
+/**
+ * Screen container for a single record (detail / create / edit / settings).
+ * Owns safe-area, scroll (KeyboardAware), refresh, and the loading/empty/error states.
+ *
+ * API map:
+ *   FormViewV2.Root      — provider + container; pass `item`, `isLoading`, `hasError`, `onBack`…
+ *   FormViewV2.Header        — AppBar (variant: default | large | center · tone: default | dark | gradient)
+ *     .Header child            → subheader slot: <Header.Segmented> or any node (SearchBar, etc.)
+ *     .Header.Segmented        — tab-like switch in the subheader (Detalles / Historial)
+ *     .Header.ActionsBar       — SIBLING bar below the header (Guardar / Cancelar)
+ *     .Header.Actions          — inline action row (legacy helper)
+ *   FormViewV2.Content       — scroll body; renders Feedback for loading/empty/error
+ *     .Content.Groups          — layout wrapper for Group cards
+ *     .Content.Group           — bordered card of inputs (optional `title`)
+ *     .Content.Section         — SectionHeader + Card (settings/menu rows)
+ *   FormViewV2.Footer        — sticky bottom bar (primary CTA)
+ */
 export const FormViewV2 = {
     Root: FormViewRoot,
     Header: HeaderWithSubComponents,

package/dist/views/ListViewV2.d.ts

@@ -1,4 +1,6 @@
-import { EVariantScreenHeader } from "../widgets/ScreenHeader";
+import { type SearchHistoryProps } from "../Display/Display.SearchHistory";
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
+import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl";
 import React, { ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 interface ListViewProps<T> {
@@ -24,17 +26,47 @@ interface ListViewProps<T> {
     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;
-declare function Header({ children, }: {
-    /** @deprecated The header is now flat (Navigation.AppBar); `variant` is ignored. */
-    variant?: EVariantScreenHeader;
+interface HeaderProps {
+    /** 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. */
+    tone?: "default" | "dark" | "gradient";
+    /** Actions rendered in the AppBar action slot (AppBar.Action nodes). */
+    actions?: ReactNode;
+    /** Subheader content rendered below the title bar (SearchBar, SegmentedControl, etc.). */
     children?: ReactNode;
-}): React.JSX.Element;
+    /**
+     * Gradient + texture surface. Automatically activates white text/icons.
+     * See `AppBarBackground` for the full shape.
+     */
+    background?: AppBarBackground;
+    /**
+     * [large variant] Extra top padding (px) above the large title.
+     * Use ~16 on root screens (no back button) for breathing room.
+     */
+    topSpacing?: number;
+}
+declare function Header({ variant, tone, actions, children, background, topSpacing, }: HeaderProps): React.JSX.Element;
 declare function HeaderSearch({ searchQuery }: {
     searchQuery?: string;
 }): React.JSX.Element | null;
 declare function HeaderActions({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
+/** Secondary action bar docked below the AppBar — use for Save/Cancel, filter chips, etc. */
+declare function HeaderActionsBar({ children }: {
+    children: ReactNode;
+}): React.JSX.Element;
+/**
+ * Tab-like segmented switch for the header subheader (e.g. "Activos" / "Archivados").
+ * Use as a child of `<ListViewV2.Header>` — it lands in the AppBar subheader slot.
+ */
+declare function HeaderSegmented<T extends string>(props: SegmentedControlProps<T>): React.JSX.Element;
+/**
+ * Recent-searches list. Render as a SIBLING of the Header (like Filters/ActionsBar) —
+ * typically while the search query is empty. Delegates to `Display.SearchHistory`.
+ */
+declare function HeaderSearchHistory(props: SearchHistoryProps): React.JSX.Element;
 declare function HeaderFilters({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
@@ -108,11 +140,32 @@ interface RowActionButtonProps {
     onPress?: () => void;
 }
 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
+ * loading/empty/error states.
+ *
+ * API map:
+ *   ListViewV2.Root          — provider + container; pass `items`, `onSearch`, `onLoadMore`, `onBack`…
+ *   ListViewV2.Header            — AppBar (variant: default | large | center · tone: default | dark | gradient)
+ *     .Header.Search             — debounced SearchBar in the subheader (wires `onSearch`)
+ *     .Header.SearchHistory      — recent-searches list (SIBLING; show while query is empty)
+ *     .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
+ *     .Content.Row(.Avatar/.Content/.Title/.Subtitle/.Footer/.Actions/.ActionButton)
+ *   ListViewV2.Footer        — pinned footer (hidden when empty)
+ *   ListViewV2.FloatingButton — absolute FAB overlay
+ */
 export declare const ListViewV2: {
     Root: typeof ListViewRoot;
     Header: typeof Header & {
         Search: typeof HeaderSearch;
+        SearchHistory: typeof HeaderSearchHistory;
+        Segmented: typeof HeaderSegmented;
         Actions: typeof HeaderActions;
+        ActionsBar: typeof HeaderActionsBar;
         Filters: typeof HeaderFilters & {
             Chip: typeof FilterChip;
             Chips: typeof FilterChips;