@sincpro/mobile-ui 0.5.0 → 0.7.0

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { Actions } from "./Actions";
 export { Dialog } from "./Dialog";
 export { Display } from "./Display";
 export { Feedback } from "./Feedback";
@@ -8,6 +9,7 @@ export { Box, Row, Stack } from "./primitives";
 export { type BrandingConfig, getBrandingLogo, setBranding, } from "./branding";
 export { cn, tv, type VariantProps } from "./theme/tw";
 export { fontFamilies, fontSizes, fontWeights, letterSpacing, lineHeights, typographyVariants, } from "./theme/typography";
+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/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/AuthContainer.d.ts

@@ -1,9 +1,12 @@
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
 import { ReactNode } from "react";
 interface AuthContainerProps {
     header: ReactNode;
     children: ReactNode;
     onBackPress?: () => void;
     className?: string;
+    /** Gradient + pattern surface for the header area. Defaults to `night-green` preset. */
+    background?: AppBarBackground;
 }
-declare function AuthContainer({ header, children, onBackPress, className }: AuthContainerProps): import("react").JSX.Element;
+declare function AuthContainer({ header, children, onBackPress, background, className, }: AuthContainerProps): import("react").JSX.Element;
 export default AuthContainer;

package/dist/layouts/AuthContainer.js

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

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/AppSplashView.d.ts

@@ -0,0 +1,18 @@
+import { type SpinnerVariant } from "../Feedback/Feedback.Spinner";
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
+import type { ReactNode } from "react";
+import { type ImageSourcePropType, type ViewStyle } from "react-native";
+export interface AppSplashViewProps {
+    /** Gradient + pattern background. Defaults to `night-green` preset. */
+    background?: AppBarBackground;
+    /** App logo shown centered above the loading indicator. */
+    logo?: ImageSourcePropType;
+    /** Built-in loading animation variant. Ignored when `loader` is provided. Defaults to `"dots"`. */
+    loadingVariant?: SpinnerVariant;
+    /** Fully custom loading element. Takes precedence over `loadingVariant`. */
+    loader?: ReactNode;
+    /** Override the outer container style. */
+    style?: ViewStyle;
+}
+export declare function AppSplashView({ background, logo, loadingVariant, loader, style, }: AppSplashViewProps): import("react").JSX.Element;
+export default AppSplashView;

package/dist/views/AppSplashView.js

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

package/dist/views/AuthFormView.d.ts

@@ -1,3 +1,4 @@
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
 import { ReactNode } from "react";
 import { type ImageSourcePropType } from "react-native";
 interface AuthFormProps {
@@ -6,6 +7,7 @@ interface AuthFormProps {
     logoSource?: ImageSourcePropType;
     onBack?: () => void;
     FormNode: ReactNode;
+    background?: AppBarBackground;
 }
-declare function AuthFormView({ title, description, logoSource, onBack, FormNode }: AuthFormProps): import("react").JSX.Element;
+declare function AuthFormView({ title, description, logoSource, onBack, FormNode, background, }: AuthFormProps): import("react").JSX.Element;
 export default AuthFormView;

package/dist/views/AuthFormView.js

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

package/dist/views/FormViewV2.d.ts

@@ -1,3 +1,4 @@
+import type { AppBarBackground } from "../Navigation/Navigation.AppBar";
 import { type SegmentedControlProps } from "../Navigation/Navigation.SegmentedControl";
 import React, { ReactNode } from "react";
 import { type ImageSourcePropType } from "react-native";
@@ -26,10 +27,20 @@ interface HeaderProps {
     actions?: ReactNode;
     /** Subheader content rendered below the title bar (SearchBar, SegmentedControl, etc.). */
     children?: ReactNode;
+    /**
+     * [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 }: HeaderProps): React.JSX.Element;
+declare function Header({ variant, tone, actions, children, topSpacing, background, }: HeaderProps): React.JSX.Element;
 declare function HeaderActions({ children }: {
     children: ReactNode;
 }): React.JSX.Element;
@@ -94,14 +105,15 @@ declare function Group({ children, withMargin, elevation, padding, variant, titl
     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).
+ * 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, children, withMargin, }: {
+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;
-    withMargin?: boolean;
 }): React.JSX.Element;
 declare function Footer({ children }: {
     children: ReactNode;

package/dist/views/FormViewV2.js

@@ -1,26 +1,26 @@
 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 { MenuSection } from "../Navigation/Navigation.MenuSection";
 import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl";
-import { theme } from "../theme";
+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({ variant = "default", tone, actions, children }) {
+function Header({ variant = "default", tone, actions, children, topSpacing, background, }) {
     const { name, description, onBack } = useFormView();
-    return (_jsx(AppBar, { actions: actions, onBack: onBack, safeArea: false, subheader: children, subtitle: description ?? undefined, title: name, tone: tone, variant: variant }));
+    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-2 items-center justify-between flex-1 gap-2", children: children }));
@@ -38,6 +38,8 @@ function HeaderSegmented(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) {
@@ -50,7 +52,8 @@ 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.
@@ -91,12 +94,12 @@ function Group({ children, withMargin = true, elevation = "none", padding = "md"
     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).
+ * 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, 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 Section({ title, footer, children, }) {
+    return (_jsx(MenuSection, { footer: footer, title: title, children: children }));
 }
 function Footer({ children }) {
     const { isEmpty, isLoading } = useFormView();

package/dist/views/ListViewV2.d.ts

@@ -1,4 +1,5 @@
 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";
@@ -34,8 +35,18 @@ interface HeaderProps {
     actions?: ReactNode;
     /** Subheader content rendered below the title bar (SearchBar, SegmentedControl, etc.). */
     children?: ReactNode;
+    /**
+     * 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 }: HeaderProps): React.JSX.Element;
+declare function Header({ variant, tone, actions, children, background, topSpacing, }: HeaderProps): React.JSX.Element;
 declare function HeaderSearch({ searchQuery }: {
     searchQuery?: string;
 }): React.JSX.Element | null;

package/dist/views/ListViewV2.js

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/js
 import { Display } from "../Display";
 import SearchHistory from "../Display/Display.SearchHistory";
 import { ErrorBoundary, Feedback } from "../Feedback";
+import { useBottomInset } from "../layouts/BottomInset";
 import Container from "../layouts/Container";
 import { Navigation } from "../Navigation";
 import { SegmentedControl, } from "../Navigation/Navigation.SegmentedControl";
-import { theme } from "../theme";
+import { useTheme } from "../theme";
 import { cn, tv } from "../theme/tw";
 import { Typography } from "../Typography";
 import { ListViewProvider, useListView } from "../views/ListViewV2.context";
@@ -14,17 +15,15 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { FlatList, RefreshControl, ScrollView, TouchableOpacity, View, } from "react-native";
 function ListViewRoot({ name, description, items, isLoading = false, hasError = false, errorMessage, readonly = false, onRefresh, onRetry, onPressItem, onDeleteItem, onSearch, onBack, onLoadMore, loadingMore = false, backgroundColor, withContainer = true, children, }) {
     const Wrapper = withContainer ? Container : View;
-    // The header (AppBar) / parent layout owns the TOP safe-area; the Container only reserves
-    // the remaining edges to avoid stacking the top inset (double padding).
     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, 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({ variant = "large", tone, actions, children }) {
+function Header({ variant = "large", tone, actions, children, background, topSpacing, }) {
     const { name, description, onBack } = useListView();
-    return (_jsx(Navigation.AppBar, { actions: actions, onBack: onBack, safeArea: false, subheader: children, subtitle: description ?? undefined, title: name, tone: tone, variant: variant }));
+    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 }));
 }
 function HeaderSearch({ searchQuery = "" }) {
     const { name, onSearch } = useListView();
@@ -40,7 +39,7 @@ function HeaderSearch({ searchQuery = "" }) {
         if (onSearch && debouncedQuery !== undefined) {
             onSearch(debouncedQuery);
         }
-    }, [debouncedQuery]);
+    }, [debouncedQuery, onSearch]);
     if (!onSearch) {
         return null;
     }
@@ -98,6 +97,8 @@ function FilterChips({ children }) {
 }
 function Content({ children, withMargin = true, }) {
     const { name, items, isLoading, hasError, errorMessage, onRefresh, onRetry, onBack, showRefreshing, setShowRefreshing, } = useListView();
+    const bottomInset = useBottomInset();
+    const theme = useTheme();
     const handleRefresh = useCallback(async () => {
         setShowRefreshing(true);
         if (onRefresh) {
@@ -113,19 +114,23 @@ function Content({ children, withMargin = true, }) {
                 flexGrow: 1,
                 justifyContent: "center",
                 alignItems: "center",
-            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), children: _jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry }) }));
+                paddingBottom: bottomInset,
+            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, children: _jsx(Feedback.Error, { message: errorMessage, onBack: onBack, onRetry: onRetry }) }));
     }
     if (items.length === 0) {
         return (_jsx(ScrollView, { contentContainerStyle: {
                 flexGrow: 1,
                 justifyContent: "center",
                 alignItems: "center",
-            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), children: _jsx(Feedback.Empty, {}) }));
+                paddingBottom: bottomInset,
+            }, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), style: { backgroundColor: theme.bg.page }, children: _jsx(Feedback.Empty, {}) }));
     }
-    return (_jsxs(View, { style: { flex: 1 }, children: [_jsx(Display.CountRecords, { count: items.length || 0, name: name }), _jsx(ContentList, { contentWithMargin: withMargin, children: children })] }));
+    return (_jsxs(View, { style: { flex: 1, backgroundColor: theme.bg.page }, children: [_jsx(Display.CountRecords, { count: items.length || 0, name: name }), _jsx(ContentList, { contentWithMargin: withMargin, children: children })] }));
 }
 function ContentList({ children, contentWithMargin, }) {
     const { items, onRefresh, showRefreshing, setShowRefreshing, onPressItem, onDeleteItem, readonly, onLoadMore, loadingMore, } = useListView();
+    const bottomInset = useBottomInset();
+    const theme = useTheme();
     const rowItems = useMemo(() => toRowItems(items), [items]);
     const handleRefresh = useCallback(async () => {
         setShowRefreshing(true);
@@ -147,7 +152,8 @@ function ContentList({ children, contentWithMargin, }) {
             flex: 1,
             marginTop: 2,
             paddingHorizontal: contentWithMargin ? 4 : 0,
-        }, children: _jsx(FlatList, { data: rowItems, keyExtractor: (item) => String(item.index), ListFooterComponent: loadingMore ? (_jsx(View, { className: "py-4", children: _jsx(Feedback.Spinner, { size: "small" }) })) : null, onEndReached: onLoadMore ? () => onLoadMore() : undefined, onEndReachedThreshold: 0.5, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false }) }));
+            backgroundColor: theme.bg.page,
+        }, children: _jsx(FlatList, { contentContainerStyle: bottomInset ? { paddingBottom: bottomInset } : undefined, data: rowItems, keyExtractor: (item) => String(item.index), ListFooterComponent: loadingMore ? (_jsx(View, { className: "py-4", children: _jsx(Feedback.Spinner, { size: "small" }) })) : null, onEndReached: onLoadMore ? () => onLoadMore() : undefined, onEndReachedThreshold: 0.5, refreshControl: _jsx(RefreshControl, { colors: [theme.primary], onRefresh: handleRefresh, refreshing: showRefreshing }), renderItem: renderItem, scrollEnabled: true, showsVerticalScrollIndicator: false }) }));
 }
 function Footer({ children }) {
     const { items } = useListView();

package/dist/widgets/CircleButton.d.ts

@@ -1,19 +1,3 @@
-import { IconType } from "../utils/icon";
-import React, { ComponentType } from "react";
-interface CircleButtonProps {
-    iconType?: IconType;
-    size?: "sm" | "md" | "lg";
-    color?: string;
-    variant?: "primary" | "secondary" | "accent" | "success" | "danger" | "warning";
-    className?: string;
-    customIcon?: ComponentType<{
-        size?: number;
-        color?: string;
-    }>;
-}
-/**
- * @deprecated Duplicates the icon-button. Use `Form.IconButton` (general) or
- * `Navigation.AppBar.Action` (headers). Kept for backwards compatibility.
- */
-export declare function CircleButton({ iconType, size, color, variant, className, customIcon, }: CircleButtonProps): React.JSX.Element;
-export {};
+/** @deprecated Import from `@sincpro/mobile-ui/Display` → `Display.CircleButton` instead. */
+export type { CircleButtonProps } from "../Display/Display.CircleButton";
+export { CircleButton } from "../Display/Display.CircleButton";

package/dist/widgets/CircleButton.js

@@ -1,41 +1 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { View } from "react-native";
-import { tv } from "tailwind-variants";
-const circleButtonVariants = tv({
-    base: "rounded-full items-center justify-center shadow-sm",
-    variants: {
-        size: {
-            sm: "w-12 h-12", // 48px
-            md: "w-15 h-15", // 60px
-            lg: "w-20 h-20", // 80px
-        },
-        variant: {
-            primary: "bg-primary",
-            secondary: "bg-secondary",
-            accent: "bg-accent",
-            success: "bg-success",
-            danger: "bg-danger",
-            warning: "bg-warning",
-        },
-    },
-    defaultVariants: {
-        size: "md",
-        variant: "accent",
-    },
-});
-const SIZE_MAP = {
-    sm: { container: 48, icon: 24 },
-    md: { container: 60, icon: 30 },
-    lg: { container: 80, icon: 40 },
-};
-/**
- * @deprecated Duplicates the icon-button. Use `Form.IconButton` (general) or
- * `Navigation.AppBar.Action` (headers). Kept for backwards compatibility.
- */
-export function CircleButton({ iconType = "ionicons", size = "md", color = theme.text.inverse, variant = "accent", className, customIcon, }) {
-    const iconSize = SIZE_MAP[size].icon;
-    return (_jsx(View, { className: cn(circleButtonVariants({ size, variant }), className), children: _jsx(Display.Icon, { color: color, customIcon: customIcon, size: iconSize, type: iconType }) }));
-}
+export { CircleButton } from "../Display/Display.CircleButton";

package/dist/widgets/JSONViewer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import { ThemedActivityIndicator } from "../theme";
 import { fontFamilies } from "../theme/typography";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Text, View } from "react-native";
 const parseDeepJson = (value) => {
     if (typeof value === "string") {
@@ -116,19 +116,19 @@ const JsonPreview = ({ selectedJson }) => {
     }, [selectedJson]);
     // Guard 4: colorize with processing control
     const coloredLines = useMemo(() => {
-        setIsProcessing(true);
         try {
             return parseJsonToColoredLines(formattedJson);
         }
         catch (error) {
             console.warn("[JSONViewer] Error coloring JSON:", error);
-            // Fallback a texto plano si falla el coloreado
             return [{ text: formattedJson, color: "#333333" }];
         }
-        finally {
-            // Small delay so the loading state is visible if needed
-            setTimeout(() => setIsProcessing(false), 50);
-        }
+    }, [formattedJson]);
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect
+        setIsProcessing(true);
+        const t = setTimeout(() => setIsProcessing(false), 50);
+        return () => clearTimeout(t);
     }, [formattedJson]);
     // Guard 5: show loading while processing large JSON
     if (isProcessing && formattedJson.length > 50_000) {

package/dist/widgets/MenuCard.d.ts

@@ -1,13 +1,3 @@
-import { IconType } from "../utils/icon";
-import { ComponentType } from "react";
-interface MenuCardProps {
-    title: string;
-    iconType?: IconType;
-    onPress?: () => void;
-    customIcon?: ComponentType<{
-        size?: number;
-        color?: string;
-    }>;
-}
-export declare function MenuCard({ title, iconType, onPress, customIcon, }: MenuCardProps): import("react").JSX.Element;
-export {};
+/** @deprecated Import from `@sincpro/mobile-ui/Display` → `Display.MenuCard` instead. */
+export type { MenuCardProps } from "../Display/Display.MenuCard";
+export { MenuCard } from "../Display/Display.MenuCard";

package/dist/widgets/MenuCard.js

@@ -1,8 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme/useTheme";
-import { Typography } from "../Typography";
-import { CircleButton } from "../widgets/CircleButton";
-import { TouchableOpacity, View } from "react-native";
-export function MenuCard({ title, iconType = "ionicons", onPress, customIcon, }) {
-    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: "bg-bg-card rounded-2xl p-4 m-2 w-[45%] shadow-sm", onPress: onPress, style: theme.shadow["sm"], children: _jsxs(View, { className: "items-center justify-center", children: [_jsx(CircleButton, { customIcon: customIcon, iconType: iconType }), _jsx(Typography.Text, { className: "text-text-primary mt-3 text-center", variant: "label", children: title })] }) }));
-}
+export { MenuCard } from "../Display/Display.MenuCard";

package/dist/widgets/MenuGrid.d.ts

@@ -1,17 +1,5 @@
-import { IconType } from "../utils/icon";
-import React, { ComponentType } from "react";
-export interface MenuItem {
-    id: string;
-    title: string;
-    iconType?: IconType;
-    onPress?: () => void;
-    customIcon?: ComponentType<{
-        size?: number;
-        color?: string;
-    }>;
-}
-interface MenuGridProps {
-    readonly items: MenuItem[];
-}
-export declare const MenuGrid: React.FC<MenuGridProps>;
-export {};
+/** @deprecated Import from `@sincpro/mobile-ui/Display` → `Display.MenuGrid` instead. */
+export type { MenuGridItem, MenuGridProps, } from "../Display/Display.MenuGrid";
+export { MenuGrid } from "../Display/Display.MenuGrid";
+/** @deprecated Renamed to `MenuGridItem`. */
+export type { MenuGridItem as MenuItem } from "../Display/Display.MenuGrid";

package/dist/widgets/MenuGrid.js

@@ -1,6 +1 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { MenuCard } from "../widgets/MenuCard";
-import { View } from "react-native";
-export const MenuGrid = ({ items }) => {
-    return (_jsx(View, { className: "flex-row flex-wrap justify-start p-2 bg-bg-page", children: items.map((item) => (_jsx(MenuCard, { customIcon: item.customIcon, iconType: item.iconType, onPress: item.onPress, title: item.title }, item.id))) }));
-};
+export { MenuGrid } from "../Display/Display.MenuGrid";

package/dist/widgets/MenuSection.d.ts

@@ -0,0 +1,3 @@
+/** @deprecated Import from `@sincpro/mobile-ui/Navigation` → `Navigation.MenuSection` instead. */
+export type { MenuSectionProps } from "../Navigation/Navigation.MenuSection";
+export { MenuSection } from "../Navigation/Navigation.MenuSection";