@sincpro/mobile-ui 0.3.1 → 0.5.0

package/dist/Navigation/Navigation.AppBar.d.ts

@@ -1,6 +1,9 @@
 import type { ReactNode } from "react";
 export interface AppBarActionProps {
-    icon: string;
+    /** Ionicon name. Optional when `label` is set (text-only CTA). */
+    icon?: string;
+    /** Text label → renders a pill CTA ("Editar", "Nuevo", "Guardar") instead of an icon circle. */
+    label?: string;
     onPress: () => void;
     badge?: string | number;
     accessibilityLabel?: string;
@@ -8,15 +11,16 @@ export interface AppBarActionProps {
     tone?: "plain" | "tinted";
     /** Render for a dark surface (translucent light button + light icon). */
     onDark?: boolean;
-    /** Drop the contained surface → bare icon (iOS-style plain back/action). */
+    /** Drop the contained surface → bare icon/text (iOS-style plain back/action). */
     bare?: boolean;
     testID?: string;
 }
 /**
  * "Contained" icon-button for the AppBar: circular touch area with a subtle surface
  * (merge of Material 3 state-layer + iOS 26 contained button). Optional badge.
+ * With `label`, renders a text pill CTA instead (for "Editar"/"Nuevo"/"Guardar").
  */
-declare function AppBarAction({ icon, onPress, badge, accessibilityLabel, tone, onDark, bare, testID, }: AppBarActionProps): import("react").JSX.Element;
+declare function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone, onDark, bare, testID, }: AppBarActionProps): import("react").JSX.Element;
 export interface AppBarProps {
     title?: string;
     subtitle?: string;

package/dist/Navigation/Navigation.AppBar.js

@@ -12,25 +12,41 @@ const HERO_DARK_FALLBACK = "#0E1714";
 /**
  * "Contained" icon-button for the AppBar: circular touch area with a subtle surface
  * (merge of Material 3 state-layer + iOS 26 contained button). Optional badge.
+ * With `label`, renders a text pill CTA instead (for "Editar"/"Nuevo"/"Guardar").
  */
-function AppBarAction({ icon, onPress, badge, accessibilityLabel, tone = "plain", onDark = false, bare = false, testID, }) {
+function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone = "plain", onDark = false, bare = false, testID, }) {
     const bg = bare
         ? "transparent"
         : onDark
             ? "rgba(255,255,255,0.14)"
             : tone === "tinted"
-                ? theme.bg.accent
+                ? theme.accent // solid brand-green squircle (FAB-style)
                 : theme.bg.card;
-    const iconColor = tone === "tinted" ? theme.primary : onDark ? theme.icon.inverse : theme.icon.primary;
+    const iconColor = tone === "tinted"
+        ? theme.text.onAccent // dark token on green surface
+        : onDark
+            ? theme.icon.inverse
+            : theme.icon.primary;
     // Plain (white) squircle gets a hairline so it reads as a contained button on a light bar.
     const showBorder = !bare && !onDark && tone !== "tinted";
+    // Labeled (text) action → a pill CTA. Distinct from the icon-only circle; use for
+    // primary/secondary header actions like "Editar", "Nuevo", "Guardar".
+    if (label) {
+        return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel ?? label, accessibilityRole: "button", className: "flex-row items-center justify-center gap-1.5", hitSlop: 6, onPress: onPress, style: {
+                height: 36,
+                paddingHorizontal: 14,
+                borderRadius: 999,
+                backgroundColor: bg,
+                ...(showBorder ? { borderWidth: 1, borderColor: theme.border.light } : null),
+            }, testID: testID, children: [icon ? _jsx(Icon, { color: iconColor, name: icon, size: 16 }) : null, _jsx(Typography.Text, { semibold: true, style: { color: iconColor }, variant: "bodySmall", children: label })] }));
+    }
     return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", className: "items-center justify-center", hitSlop: 6, onPress: onPress, style: {
             width: 40,
             height: 40,
             borderRadius: 12,
             backgroundColor: bg,
             ...(showBorder ? { borderWidth: 1, borderColor: theme.border.light } : null),
-        }, testID: testID, children: [_jsx(Icon, { color: iconColor, name: icon, size: bare ? 24 : 20 }), badge != null ? (_jsx(View, { className: "absolute bg-danger rounded-full min-w-[16px] h-4 px-1 items-center justify-center", style: { top: -2, right: -2, borderWidth: 2, borderColor: theme.bg.card }, children: _jsx(Typography.Text, { style: { color: theme.text.inverse, fontSize: 9, lineHeight: 11 }, children: badge }) })) : null] }));
+        }, testID: testID, children: [_jsx(Icon, { color: iconColor, name: icon ?? "ellipse-outline", size: bare ? 24 : 20 }), badge != null ? (_jsx(View, { className: "absolute bg-danger rounded-full min-w-[16px] h-4 px-1 items-center justify-center", style: { top: -2, right: -2, borderWidth: 2, borderColor: theme.bg.card }, children: _jsx(Typography.Text, { style: { color: theme.text.inverse, fontSize: 9, lineHeight: 11 }, children: badge }) })) : null] }));
 }
 /**
  * Flat, modern top bar (merge of Material 3 + iOS 26): tokenized surface, left-aligned
@@ -44,9 +60,11 @@ function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant
     const large = variant === "large";
     const dark = tone === "dark";
     const gradient = tone === "gradient";
-    // Greeting/balance hero (large, no back/leading): drop the empty top toolbar row and put
-    // the action(s) inline beside the big title — avoids a tall dead zone above the title.
-    const largeInlineActions = large && !onBack && !leading;
+    // Large variant: back/leading + actions all live ON the big-title row (single cohesive
+    // block — no separate top toolbar that would push the title to a new line). The compact
+    // top toolbar is only for default/center.
+    const largeHasNav = large && (!!onBack || !!leading);
+    const showTopBar = !large;
     // Both `dark` and `gradient` are colored surfaces: no card bg, no hairline, light/dark text.
     const colored = dark || gradient;
     const onColoredText = gradient ? theme.text.onAccent : theme.text.inverse;
@@ -56,16 +74,19 @@ function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant
         : dark
             ? { color: "rgba(255,255,255,0.7)" }
             : undefined;
-    return (_jsxs(View, { className: cn(colored ? "" : "bg-bg-card", !colored && border && "border-b border-border-light", className), style: {
+    // Large variant on a plain surface should feel like the page itself (no card surface, no
+    // hairline). Compact variants (default/center) keep the card surface for detail screens.
+    const largePlain = large && !colored;
+    return (_jsxs(View, { className: cn(colored ? "" : largePlain ? "bg-bg-page" : "bg-bg-card", !colored && !largePlain && border && "border-b border-border-light", className), style: {
             paddingTop: safeArea ? insets.top : 0,
             ...(dark ? { backgroundColor: theme.bg.inverse ?? HERO_DARK_FALLBACK } : null),
-        }, testID: testID, children: [gradient ? (_jsx(GradientSurface, { colors: theme.gradient.accent, padding: "none", radius: "none", style: StyleSheet.absoluteFill })) : null, largeInlineActions ? null : (_jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[56px]", children: [_jsxs(View, { className: "flex-row items-center gap-2", style: { minWidth: 38 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark, onPress: onBack })) : null, leading] }), !large ? (_jsxs(View, { className: cn("flex-1", centered && "items-center"), children: [title ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-primary", numberOfLines: 1, semibold: true, style: titleStyle, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", numberOfLines: 1, style: subtitleStyle, variant: "caption", children: subtitle })) : null] })) : (_jsx(View, { className: "flex-1" })), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] })), large && title ? (_jsxs(View, { className: cn("flex-row px-4 pb-3", largeInlineActions ? "pt-2" : "pt-0.5"), children: [accentBar ? (_jsx(View, { style: {
+        }, testID: testID, children: [gradient ? (_jsx(GradientSurface, { colors: theme.gradient.accent, padding: "none", radius: "none", style: StyleSheet.absoluteFill })) : null, showTopBar ? (_jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[56px]", children: [_jsxs(View, { className: "flex-row items-center gap-2", style: { minWidth: 38 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark, onPress: onBack })) : null, leading] }), _jsxs(View, { className: cn("flex-1", centered && "items-center"), children: [title ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-primary", numberOfLines: 1, semibold: true, style: titleStyle, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", numberOfLines: 1, style: subtitleStyle, variant: "caption", children: subtitle })) : null] }), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] })) : null, large && title ? (_jsxs(View, { className: cn("flex-row px-4 pt-2 pb-3", largeHasNav ? "items-center gap-2" : ""), children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark, onPress: onBack })) : null, leading, accentBar && !largeHasNav ? (_jsx(View, { style: {
                             width: 4,
                             marginRight: 10,
                             marginVertical: 2,
                             borderRadius: 999,
                             backgroundColor: theme.accent,
-                        } })) : null, _jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { className: colored ? "" : "text-text-primary", style: titleStyle, variant: "h2", children: title }), subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", style: subtitleStyle, variant: "bodySmall", children: subtitle })) : null] }), largeInlineActions && actions ? (_jsx(View, { className: "flex-row items-center justify-end gap-2 pl-2", children: actions })) : null] })) : null, subheader ? _jsx(View, { className: "px-3 pb-3 pt-0.5", children: subheader }) : null] }));
+                        } })) : null, _jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { className: colored ? "" : "text-text-primary", style: titleStyle, variant: "h2", children: title }), subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", style: subtitleStyle, variant: "bodySmall", children: subtitle })) : null] }), actions ? (_jsx(View, { className: cn("flex-row items-center justify-end gap-2 pl-2", largeHasNav ? "" : "self-center"), children: actions })) : null] })) : null, subheader ? _jsx(View, { className: "px-3 pb-3 pt-0.5", children: subheader }) : null] }));
 }
 const AppBarWithAction = Object.assign(AppBar, { Action: AppBarAction });
 export default AppBarWithAction;

package/dist/Navigation/index.d.ts

@@ -10,7 +10,7 @@ import Steps from "../Navigation/Navigation.Steps";
 import TabIcon from "../Navigation/Navigation.TabIcon";
 export declare const Navigation: {
     AppBar: (({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, className, testID, }: import("../Navigation/Navigation.AppBar").AppBarProps) => import("react").JSX.Element) & {
-        Action: ({ icon, onPress, badge, accessibilityLabel, tone, onDark, bare, testID, }: import("../Navigation/Navigation.AppBar").AppBarActionProps) => import("react").JSX.Element;
+        Action: ({ icon, label, onPress, badge, accessibilityLabel, tone, onDark, bare, testID, }: import("../Navigation/Navigation.AppBar").AppBarActionProps) => import("react").JSX.Element;
     };
     BottomNav: typeof BottomNav;
     CollapsingHeader: typeof CollapsingHeader;

package/dist/views/FormViewV2.d.ts

@@ -1,4 +1,4 @@
-import { EVariantScreenHeader } from "../widgets/ScreenHeader";
+import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl";
 import React, { ReactNode } from "react";
 import { type ImageSourcePropType } from "react-native";
 interface FormViewProps<T> {
@@ -17,46 +17,124 @@ 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;
+    /** @deprecated Pass `variant` prop instead. */
+    logoSource?: ImageSourcePropType;
+}
+declare function Header({ variant, tone, actions, children }: 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;
+    /**
+     * 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: SectionHeader label + Card(padding="none") wrapper.
+ * Use inside FormViewV2.Content for preference/config screens where rows are
+ * Display.ListItem or Display.MenuButton (not form inputs).
+ */
+declare function Section({ title, children, withMargin, }: {
+    title?: string;
     children: ReactNode;
     withMargin?: boolean;
-    elevation?: "sm" | "md" | "lg";
 }): 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,7 +1,9 @@
-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 Container from "../layouts/Container";
 import { AppBar } from "../Navigation/Navigation.AppBar";
+import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl";
 import { theme } from "../theme";
 import { FormViewProvider, useFormView } from "../views/FormViewV2.context";
 import React from "react";
@@ -16,15 +18,23 @@ function FormViewRoot({ name, description, item, isLoading = false, isEmpty = fa
         : { 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 }) {
     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, onBack: onBack, safeArea: false, subheader: children, subtitle: description ?? undefined, title: name, tone: tone, 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();
@@ -42,6 +52,10 @@ function Content({ withMargin = false, children, }) {
             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 })) }));
 }
+/**
+ * @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 +63,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: SectionHeader label + Card(padding="none") wrapper.
+ * Use inside FormViewV2.Content for preference/config screens where rows are
+ * Display.ListItem or Display.MenuButton (not form inputs).
+ */
+function Section({ title, children, withMargin = true, }) {
+    return (_jsxs(View, { style: withMargin ? { marginHorizontal: 16 } : undefined, children: [title ? _jsx(Display.SectionHeader, { title: title }) : null, _jsx(Display.Card, { padding: "none", 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,5 @@
-import { EVariantScreenHeader } from "../widgets/ScreenHeader";
+import { type SearchHistoryProps } from "../Display/Display.SearchHistory";
+import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl";
 import React, { ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 interface ListViewProps<T> {
@@ -24,17 +25,37 @@ 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;
+}
+declare function Header({ variant, tone, actions, children }: 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 +129,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;

package/dist/views/ListViewV2.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
 import { Display } from "../Display";
+import SearchHistory from "../Display/Display.SearchHistory";
 import { ErrorBoundary, Feedback } from "../Feedback";
 import Container from "../layouts/Container";
 import { Navigation } from "../Navigation";
+import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl";
 import { theme } from "../theme";
 import { cn, tv } from "../theme/tw";
 import { Typography } from "../Typography";
@@ -20,9 +22,9 @@ function ListViewRoot({ name, description, items, isLoading = false, hasError =
     // Propagate contentWithMargin to ContentList via context
     return (_jsx(ListViewProvider, { description: description, errorMessage: errorMessage, hasError: hasError, 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(ErrorBoundary, { children: _jsx(Wrapper, { ...wrapperProps, children: children }) }) }));
 }
-function Header({ children, }) {
+function Header({ variant = "large", tone, actions, children }) {
     const { name, description, onBack } = useListView();
-    return (_jsx(Navigation.AppBar, { onBack: onBack, safeArea: false, subheader: children, subtitle: description ? description : `Seleccionar ${name}`, title: name }));
+    return (_jsx(Navigation.AppBar, { actions: actions, onBack: onBack, safeArea: false, subheader: children, subtitle: description ?? undefined, title: name, tone: tone, variant: variant }));
 }
 function HeaderSearch({ searchQuery = "" }) {
     const { name, onSearch } = useListView();
@@ -45,7 +47,25 @@ function HeaderSearch({ searchQuery = "" }) {
     return (_jsx(View, { className: "pb-2", children: _jsx(Navigation.SearchBar, { onChangeText: setQuery, placeholder: `Buscar ${name}`, value: query }) }));
 }
 function HeaderActions({ children }) {
-    return (_jsx(View, { className: "flex-row px-4 my-3 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 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. "Activos" / "Archivados").
+ * Use as a child of `<ListViewV2.Header>` — it lands in the AppBar subheader slot.
+ */
+function HeaderSegmented(props) {
+    return _jsx(SegmentedControl, { ...props });
+}
+/**
+ * Recent-searches list. Render as a SIBLING of the Header (like Filters/ActionsBar) —
+ * typically while the search query is empty. Delegates to `Display.SearchHistory`.
+ */
+function HeaderSearchHistory(props) {
+    return _jsx(SearchHistory, { ...props });
 }
 function HeaderFilters({ children }) {
     return _jsx(View, { className: "px-4 py-2 items-center", children: children });
@@ -178,7 +198,10 @@ const FiltersWithSubComponents = Object.assign(HeaderFilters, {
 });
 const HeaderWithSubComponents = Object.assign(Header, {
     Search: HeaderSearch,
+    SearchHistory: HeaderSearchHistory,
+    Segmented: HeaderSegmented,
     Actions: HeaderActions,
+    ActionsBar: HeaderActionsBar,
     Filters: FiltersWithSubComponents,
 });
 const RowWithSubComponents = Object.assign(RowRoot, {
@@ -194,6 +217,24 @@ const ContentWithSubComponents = Object.assign(Content, {
     List: ContentList,
     Row: RowWithSubComponents,
 });
+/**
+ * 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 const ListViewV2 = {
     Root: ListViewRoot,
     Header: HeaderWithSubComponents,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sincpro/mobile-ui",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "Sincpro Mobile design system: generic, presentational React Native components (no domain logic)",
   "main": "expo/AppEntry.js",
   "types": "./dist/index.d.ts",