@sincpro/mobile-ui 0.5.0 → 0.6.0

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

@@ -1,3 +1,6 @@
+import { type GradientPreset } from "../Display/Display.GradientSurface";
+import { type PatternKind } from "../Display/Display.Pattern";
+import type { LinearGradientPoint } from "expo-linear-gradient";
 import type { ReactNode } from "react";
 export interface AppBarActionProps {
     /** Ionicon name. Optional when `label` is set (text-only CTA). */
@@ -44,16 +47,68 @@ export interface AppBarProps {
     border?: boolean;
     /** Reserves the status-bar space (insets.top). `false` to embed/demo. */
     safeArea?: boolean;
+    /**
+     * [large variant] Extra top padding (px) above the large title row.
+     * Default is 8. Use ~16–24 on root/home screens without a back button.
+     */
+    topSpacing?: number;
+    /**
+     * Decorative gradient + texture surface. When set, automatically renders white text/icons
+     * (no need to also set `tone="dark"`). Overrides the solid `tone` background.
+     *
+     * Preset: `background={{ surface: "mesh" }}`
+     * Custom: `background={{ colors: ["#0B1410", "#10B981", "#1E1B8A"] }}`
+     * With texture: `background={{ surface: "night-green", pattern: "dots" }}`
+     */
+    background?: AppBarBackground;
+    /**
+     * Visual treatment at the bottom edge of the AppBar.
+     * - `"line"` — hairline border separator (default for light-surface variants)
+     * - `"shadow"` — drop-shadow only, no border (floating/elevated feel)
+     * - `"rounded"` — rounded bottom corners (24 px); gradient is clipped inside
+     * - `"wave"` — inverse-arc cutout: page-bg arch at the bottom creates a wave illusion
+     * - `"none"` — hard edge, no decoration
+     */
+    bottomDivider?: "none" | "line" | "shadow" | "rounded" | "wave";
     className?: string;
     testID?: string;
 }
+/**
+ * Gradient + texture surface descriptor for AppBar headers.
+ * Pass as the `background` prop — white text/icons are activated automatically.
+ */
+export interface AppBarBackground {
+    /** Named gradient preset: `"mesh"` (dark aurora), `"night-green"`, `"neon-teal"`, `"emerald"`. */
+    surface?: GradientPreset;
+    /** Custom color stops — overrides `surface`. Minimum 2 colors. */
+    colors?: readonly [string, string, ...string[]];
+    /** Gradient start point. Default: top-left `{ x: 0, y: 0 }`. */
+    start?: LinearGradientPoint;
+    /** Gradient end point. Default: bottom-right `{ x: 1, y: 1 }`. */
+    end?: LinearGradientPoint;
+    /** SVG texture overlay kind. */
+    pattern?: PatternKind;
+    /** Texture opacity (0–1). Default 0.18. */
+    patternOpacity?: number;
+    /**
+     * Text and icon color rendered over this gradient surface.
+     * Defaults to `"#FFFFFF"` since gradient AppBar surfaces are typically dark.
+     * Pass a dark color (e.g. `theme.text.primary`) for light-colored gradients.
+     */
+    textColor?: string;
+    /**
+     * SVG texture pattern tint color. Defaults to `"#FFFFFF"`.
+     * Override when using a light gradient that needs a dark dot/grid texture.
+     */
+    patternColor?: string;
+}
 /**
  * Flat, modern top bar (merge of Material 3 + iOS 26): tokenized surface, left-aligned
  * title + subtitle, **contained** icon-buttons (back and actions with a circular area),
  * a `subheader` slot (for SearchBar/Segmented below the title), and a `large` variant.
  * Replaces the gradient look of `Navigation.Header`/`ScreenHeader`.
  */
-declare function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, className, testID, }: AppBarProps): import("react").JSX.Element;
+declare function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, topSpacing, background, bottomDivider, className, testID, }: AppBarProps): import("react").JSX.Element;
 declare const AppBarWithAction: typeof AppBar & {
     Action: typeof AppBarAction;
 };

package/dist/Navigation/Navigation.AppBar.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import GradientSurface from "../Display/Display.GradientSurface";
 import Icon from "../Display/Display.Icon";
+import { Pattern } from "../Display/Display.Pattern";
 import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
+import { useTheme } from "../theme";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
 import { StyleSheet, View } from "react-native";
@@ -15,6 +16,7 @@ const HERO_DARK_FALLBACK = "#0E1714";
  * With `label`, renders a text pill CTA instead (for "Editar"/"Nuevo"/"Guardar").
  */
 function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone = "plain", onDark = false, bare = false, testID, }) {
+    const theme = useTheme();
     const bg = bare
         ? "transparent"
         : onDark
@@ -25,7 +27,7 @@ function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone =
     const iconColor = tone === "tinted"
         ? theme.text.onAccent // dark token on green surface
         : onDark
-            ? theme.icon.inverse
+            ? "#FFFFFF" // always white on tone="dark"/gradient surfaces; icon.inverse flips dark in dark-mode
             : 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";
@@ -54,39 +56,68 @@ function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone =
  * a `subheader` slot (for SearchBar/Segmented below the title), and a `large` variant.
  * Replaces the gradient look of `Navigation.Header`/`ScreenHeader`.
  */
-function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant = "default", tone = "default", accentBar = false, backVariant = "contained", border = true, safeArea = true, className, testID, }) {
+function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant = "default", tone = "default", accentBar = false, backVariant = "contained", border = true, safeArea = true, topSpacing, background, bottomDivider, className, testID, }) {
+    const theme = useTheme();
     const insets = useSafeAreaInsets();
     const centered = variant === "center";
     const large = variant === "large";
     const dark = tone === "dark";
     const gradient = tone === "gradient";
+    const hasBackground = !!background;
     // 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;
+    // Colored = any rich surface. `background` alone activates colored mode (white text/icons).
+    const colored = dark || gradient || hasBackground;
+    // gradient (neon green) → dark text via onAccent. background → textColor prop (default white, since
+    // gradient surfaces are dark). dark tone → white always. text.inverse is NOT used here: it flips to
+    // near-black in dark-mode themes (semantic: "text on light surfaces"), wrong for dark gradient AppBars.
+    const onColoredText = gradient && !hasBackground
+        ? theme.text.onAccent
+        : hasBackground
+            ? (background?.textColor ?? "#FFFFFF")
+            : "#FFFFFF";
     const titleStyle = colored ? { color: onColoredText } : undefined;
-    const subtitleStyle = gradient
+    const subtitleStyle = gradient && !hasBackground
         ? { color: theme.text.onAccent, opacity: 0.72 }
-        : dark
+        : colored
             ? { color: "rgba(255,255,255,0.7)" }
             : undefined;
     // 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: {
+    // bottomDivider controls the bottom edge decoration. When not set, fall back to the
+    // legacy border prop (hairline for default/center on plain surfaces).
+    const showBorder = bottomDivider
+        ? bottomDivider === "line"
+        : !colored && !largePlain && border;
+    const showRounded = bottomDivider === "rounded";
+    const showShadow = bottomDivider === "shadow";
+    const showWave = bottomDivider === "wave";
+    return (_jsxs(View, { className: cn(colored ? "" : largePlain ? "bg-bg-page" : "bg-bg-card", showBorder && "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, 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: {
+            // dark tone without a background → solid inverse bg; background prop → GradientSurface handles it
+            ...(dark && !hasBackground
+                ? { backgroundColor: theme.bg.inverse ?? HERO_DARK_FALLBACK }
+                : null),
+            ...(showRounded
+                ? { borderBottomLeftRadius: 24, borderBottomRightRadius: 24, overflow: "hidden" }
+                : null),
+            ...(showShadow ? theme.shadow.md : null),
+        }, testID: testID, children: [hasBackground ? (_jsx(GradientSurface, { colors: background.colors, end: background.end, padding: "none", preset: background.surface ?? "neon-teal", radius: "none", start: background.start, style: StyleSheet.absoluteFill })) : gradient ? (_jsx(GradientSurface, { colors: theme.gradient.accent, padding: "none", radius: "none", style: StyleSheet.absoluteFill })) : null, background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : 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 || gradient || hasBackground, 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 pb-3", largeHasNav ? "items-center gap-2" : ""), style: { paddingTop: topSpacing != null ? topSpacing : 8 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, 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] }), 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] }));
+                        } })) : 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, showWave ? (_jsx(View, { style: {
+                    height: 24,
+                    backgroundColor: theme.bg.page,
+                    borderTopLeftRadius: 24,
+                    borderTopRightRadius: 24,
+                } })) : null] }));
 }
 const AppBarWithAction = Object.assign(AppBar, { Action: AppBarAction });
 export default AppBarWithAction;

package/dist/Navigation/Navigation.BottomNav.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
 import Icon from "../Display/Display.Icon";
 import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
+import { useTheme } from "../theme";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
 import { View } from "react-native";
@@ -14,6 +14,7 @@ const DARK_SURFACE = "#15181B";
  */
 function BottomNav({ items, value, onChange, showLabels = true, centerAction, safeArea = true, shape = "bar", tone = "light", indicator = "none", bordered = true, activeColor = "primary", className, testID, }) {
     const insets = useSafeAreaInsets();
+    const theme = useTheme();
     const dark = tone === "dark";
     const rounded = shape === "floating" || dark;
     const bottomPad = rounded ? 6 : safeArea ? insets.bottom : 0;

package/dist/Navigation/Navigation.Header.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
+import Icon from "../Display/Display.Icon";
+import Logo from "../Display/Display.Logo";
 import GradientContainer from "../layouts/GradientContainer";
 import { theme } from "../theme";
 import { cn } from "../theme/tw";
@@ -11,6 +12,6 @@ import { TouchableOpacity, View } from "react-native";
  */
 const Header = ({ title, logo, logoSource, backButton, handleBackButton, className, }) => {
     const onBackPress = handleBackButton ?? (() => { });
-    return (_jsx(GradientContainer, { className: cn("pt-10 pb-3.5 px-4", className), children: _jsxs(View, { className: "relative items-center justify-center", children: [backButton && (_jsx(TouchableOpacity, { className: "absolute top-0 left-0 z-10 border border-white p-1.5 rounded", onPress: onBackPress, children: _jsx(Display.Icon, { color: theme.text.inverse, name: "chevron-back", size: 25, type: "ionicons" }) })), _jsxs(View, { className: "items-center justify-center", children: [logo || _jsx(Display.Logo, { size: "medium", source: logoSource }), title && (_jsx(Typography.Text, { className: "text-white", variant: "h4", children: title }))] })] }) }));
+    return (_jsx(GradientContainer, { className: cn("pt-10 pb-3.5 px-4", className), children: _jsxs(View, { className: "relative items-center justify-center", children: [backButton && (_jsx(TouchableOpacity, { className: "absolute top-0 left-0 z-10 border border-white p-1.5 rounded", onPress: onBackPress, children: _jsx(Icon, { color: theme.text.inverse, name: "chevron-back", size: 25, type: "ionicons" }) })), _jsxs(View, { className: "items-center justify-center", children: [logo || _jsx(Logo, { size: "medium", source: logoSource }), title && (_jsx(Typography.Text, { className: "text-white", variant: "h4", children: title }))] })] }) }));
 };
 export default Header;

package/dist/Navigation/Navigation.Menu.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import Icon from "../Display/Display.Icon";
 import Pressable from "../primitives/Pressable";
-import { theme } from "../theme";
+import { useTheme } from "../theme";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
-import { useRef, useState } from "react";
+import { cloneElement, useRef, useState } from "react";
 import { Dimensions, Modal, Pressable as RNPressable, View } from "react-native";
 function Menu({ items, trigger, menuWidth = 220, testID }) {
+    const theme = useTheme();
     const triggerRef = useRef(null);
     const [anchor, setAnchor] = useState(null);
     const open = () => {
@@ -18,7 +19,9 @@ function Menu({ items, trigger, menuWidth = 220, testID }) {
     const screen = Dimensions.get("window");
     const right = anchor ? Math.max(8, screen.width - (anchor.x + anchor.width)) : 8;
     const top = anchor ? anchor.y + anchor.height + 4 : 0;
-    return (_jsxs(View, { collapsable: false, ref: triggerRef, testID: testID, children: [_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", accessibilityRole: "button", onPress: open, children: trigger ?? _jsx(Icon, { color: theme.icon.secondary, name: "ellipsis-vertical", size: 22 }) }), _jsx(Modal, { animationType: "fade", onRequestClose: close, transparent: true, visible: anchor !== null, children: _jsx(RNPressable, { onPress: close, style: { flex: 1 }, children: _jsx(View, { className: "rounded-lg py-1", style: {
+    return (_jsxs(View, { collapsable: false, ref: triggerRef, testID: testID, children: [trigger ? (
+            // eslint-disable-next-line react-hooks/refs
+            cloneElement(trigger, { onPress: open })) : (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", accessibilityRole: "button", onPress: open, children: _jsx(Icon, { color: theme.icon.secondary, name: "ellipsis-vertical", size: 22 }) })), _jsx(Modal, { animationType: "fade", onRequestClose: close, transparent: true, visible: anchor !== null, children: _jsx(RNPressable, { onPress: close, style: { flex: 1 }, children: _jsx(View, { className: "rounded-lg py-1", style: {
                             position: "absolute",
                             top,
                             right,

package/dist/Navigation/Navigation.MenuSection.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+export interface MenuSectionProps {
+    /** Section heading above the card. */
+    title?: string;
+    /** Footer note below the card (hints, disclaimers). */
+    footer?: string;
+    children: ReactNode;
+}
+/**
+ * Titled card that groups `Display.MenuButton` rows into a visual section.
+ * Mirrors iOS grouped-table-view style: title above, card surface, optional footer note.
+ *
+ * Usage:
+ *   <MenuSection title="General">
+ *     <Display.MenuButton label="Impresora" icon={PrinterIcon} onPress={...} />
+ *     <Display.MenuButton label="Ajustes" icon={SettingsIcon} onPress={...} showDivider={false} />
+ *   </MenuSection>
+ */
+export declare function MenuSection({ title, footer, children }: MenuSectionProps): import("react").JSX.Element;

package/dist/Navigation/Navigation.MenuSection.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { useTheme } from "../theme";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+/**
+ * Titled card that groups `Display.MenuButton` rows into a visual section.
+ * Mirrors iOS grouped-table-view style: title above, card surface, optional footer note.
+ *
+ * Usage:
+ *   <MenuSection title="General">
+ *     <Display.MenuButton label="Impresora" icon={PrinterIcon} onPress={...} />
+ *     <Display.MenuButton label="Ajustes" icon={SettingsIcon} onPress={...} showDivider={false} />
+ *   </MenuSection>
+ */
+export function MenuSection({ title, footer, children }) {
+    const theme = useTheme();
+    return (_jsxs(View, { style: { marginHorizontal: 16, marginBottom: 20 }, children: [title ? (_jsx(Typography.Text, { semibold: true, style: { color: theme.text.secondary, marginBottom: 6, paddingHorizontal: 4 }, variant: "caption", children: title.toUpperCase() })) : null, _jsx(View, { style: {
+                    backgroundColor: theme.bg.card,
+                    borderRadius: 14,
+                    borderWidth: 1,
+                    borderColor: theme.border.default,
+                    overflow: "hidden",
+                    ...theme.shadow.sm,
+                }, children: children }), footer ? (_jsx(Typography.Text, { style: { color: theme.text.tertiary, marginTop: 6, paddingHorizontal: 4 }, variant: "caption", children: footer })) : null] }));
+}

package/dist/Navigation/Navigation.SegmentedControl.d.ts

@@ -1,14 +1,28 @@
+import { ComponentType } from "react";
 export interface SegmentedOption<T extends string> {
     label: string;
     value: T;
+    /** Ionicon name rendered above (or before) the label. */
+    icon?: string;
+    /** Custom icon component — takes precedence over `icon`. */
+    customIcon?: ComponentType<{
+        size?: number;
+        color?: string;
+    }>;
 }
 export interface SegmentedControlProps<T extends string> {
     options: SegmentedOption<T>[];
     value: T;
     onChange: (value: T) => void;
+    /**
+     * Icon layout when options have icons:
+     * - `"top"` (default) — icon stacked above the label (taller pill).
+     * - `"left"` — icon inline left of the label (compact, single-line).
+     */
+    iconLayout?: "top" | "left";
     className?: string;
     testID?: string;
 }
-declare function SegmentedControl<T extends string>({ options, value, onChange, className, testID, }: SegmentedControlProps<T>): import("react").JSX.Element;
+declare function SegmentedControl<T extends string>({ options, value, onChange, iconLayout, className, testID, }: SegmentedControlProps<T>): import("react").JSX.Element;
 export default SegmentedControl;
 export { SegmentedControl };

package/dist/Navigation/Navigation.SegmentedControl.js

@@ -1,12 +1,30 @@
-import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import { useTheme } from "../theme";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
 import { TouchableOpacity, View } from "react-native";
-function SegmentedControl({ options, value, onChange, className, testID, }) {
+function SegmentedControl({ options, value, onChange, iconLayout = "top", className, testID, }) {
+    const theme = useTheme();
+    const hasIcons = options.some((o) => o.icon || o.customIcon);
     return (_jsx(View, { accessibilityRole: "tablist", className: cn("flex-row bg-bg-muted rounded-lg p-1 gap-1", className), testID: testID, children: options.map((option) => {
             const selected = option.value === value;
-            return (_jsx(TouchableOpacity, { accessibilityLabel: option.label, accessibilityRole: "tab", accessibilityState: { selected }, activeOpacity: 0.7, className: "flex-1 items-center justify-center py-2 rounded-md", onPress: () => onChange(option.value), style: selected ? { backgroundColor: theme.bg.card, ...theme.shadow.sm } : undefined, children: _jsx(Typography.Text, { numberOfLines: 1, semibold: selected, style: { color: selected ? theme.text.primary : theme.text.secondary }, children: option.label }) }, option.value));
+            const iconColor = selected ? theme.text.primary : theme.text.secondary;
+            const hasIcon = !!(option.icon || option.customIcon);
+            const inline = hasIcons && iconLayout === "left";
+            return (_jsxs(TouchableOpacity, { accessibilityLabel: option.label, accessibilityRole: "tab", accessibilityState: { selected }, activeOpacity: 0.7, onPress: () => onChange(option.value), style: {
+                    flex: 1,
+                    flexDirection: inline ? "row" : "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: hasIcon ? 4 : 0,
+                    paddingVertical: hasIcons && !inline ? 8 : 8,
+                    paddingHorizontal: 4,
+                    borderRadius: 8,
+                    ...(selected
+                        ? { backgroundColor: theme.bg.card, ...theme.shadow.sm }
+                        : undefined),
+                }, children: [hasIcon ? (_jsx(Icon, { color: iconColor, customIcon: option.customIcon, name: option.icon, size: 16, type: option.customIcon ? "custom" : "ionicons" })) : null, _jsx(Typography.Text, { numberOfLines: 1, semibold: selected, style: { color: iconColor, fontSize: 12 }, variant: "caption", children: option.label })] }, option.value));
         }) }));
 }
 export default SegmentedControl;

package/dist/Navigation/Navigation.TabIcon.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
+import Icon from "../Display/Display.Icon";
 import { cn } from "../theme/tw";
 import { View } from "react-native";
-const Icon = Display.Icon;
 /**
  * @deprecated Orphan tab-bar icon piece (unused). Use `Navigation.BottomNav` (single source
  * of truth for the bottom tab bar). Kept for backwards compatibility; removed in the next major.

package/dist/Navigation/Navigation.TabItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
+import Icon from "../Display/Display.Icon";
 import { cn } from "../theme/tw";
 import { View } from "react-native";
 /**
@@ -8,6 +8,6 @@ import { View } from "react-native";
  * compatibility; removed in the next major.
  */
 const TabIcon = ({ focused, size = 24, customIcon, type = "custom", name, className, }) => {
-    return (_jsx(View, { className: cn("justify-center items-center w-12 h-12 rounded-full", focused ? "bg-primary shadow-md" : "bg-transparent", className), children: _jsx(Display.Icon, { color: focused ? "#FFFFFF" : "#6B7280", customIcon: customIcon, name: name, size: size, type: type }) }));
+    return (_jsx(View, { className: cn("justify-center items-center w-12 h-12 rounded-full", focused ? "bg-primary shadow-md" : "bg-transparent", className), children: _jsx(Icon, { color: focused ? "#FFFFFF" : "#6B7280", customIcon: customIcon, name: name, size: size, type: type }) }));
 };
 export default TabIcon;

package/dist/Navigation/Navigation.Tabs.d.ts

@@ -1,20 +1,25 @@
 import { type ReactNode } from "react";
+type TabsVariant = "underline" | "filled";
 export interface TabsProps {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
+    variant?: TabsVariant;
     className?: string;
     children: ReactNode;
 }
-declare function TabsRoot({ value, defaultValue, onValueChange, className, children }: TabsProps): import("react").JSX.Element;
+declare function TabsRoot({ value, defaultValue, onValueChange, variant, className, children, }: TabsProps): import("react").JSX.Element;
 declare function TabsList({ children, className }: {
     children: ReactNode;
     className?: string;
 }): import("react").JSX.Element;
-declare function TabsTrigger({ value, children }: {
+export interface TabsTriggerProps {
     value: string;
     children: ReactNode;
-}): import("react").JSX.Element;
+    icon?: string;
+    iconLayout?: "top" | "left";
+}
+declare function TabsTrigger({ value, children, icon, iconLayout }: TabsTriggerProps): import("react").JSX.Element;
 declare function TabsContent({ value, children }: {
     value: string;
     children: ReactNode;

package/dist/Navigation/Navigation.Tabs.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
+import Icon from "../Display/Display.Icon";
+import { useTheme } from "../theme";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
 import { createContext, useCallback, useContext, useState } from "react";
@@ -12,7 +13,7 @@ function useTabs() {
     }
     return ctx;
 }
-function TabsRoot({ value, defaultValue, onValueChange, className, children }) {
+function TabsRoot({ value, defaultValue, onValueChange, variant = "underline", className, children, }) {
     const [internal, setInternal] = useState(defaultValue ?? "");
     const current = value ?? internal;
     const setValue = useCallback((next) => {
@@ -20,15 +21,27 @@ function TabsRoot({ value, defaultValue, onValueChange, className, children }) {
             setInternal(next);
         onValueChange?.(next);
     }, [value, onValueChange]);
-    return (_jsx(TabsContext.Provider, { value: { value: current, setValue }, children: _jsx(View, { className: cn("flex-1", className), children: children }) }));
+    return (_jsx(TabsContext.Provider, { value: { value: current, setValue, variant }, children: _jsx(View, { className: cn("flex-1", className), children: children }) }));
 }
 function TabsList({ children, className }) {
+    const { variant } = useTabs();
+    if (variant === "filled") {
+        return (_jsx(View, { accessibilityRole: "tablist", className: cn("flex-row rounded-xl p-1", className), style: { backgroundColor: "#E5E7EB" }, children: children }));
+    }
     return (_jsx(View, { accessibilityRole: "tablist", className: cn("flex-row border-b border-border-default", className), children: children }));
 }
-function TabsTrigger({ value, children }) {
-    const { value: active, setValue } = useTabs();
+function TabsTrigger({ value, children, icon, iconLayout = "left" }) {
+    const theme = useTheme();
+    const { value: active, setValue, variant } = useTabs();
     const selected = active === value;
-    return (_jsxs(TouchableOpacity, { accessibilityRole: "tab", accessibilityState: { selected }, activeOpacity: 0.7, className: "flex-1 items-center", onPress: () => setValue(value), children: [_jsx(View, { className: "py-3", children: _jsx(Typography.Text, { semibold: selected, style: { color: selected ? theme.primary : theme.text.secondary }, children: children }) }), _jsx(View, { className: "h-0.5 w-full", style: { backgroundColor: selected ? theme.primary : "transparent" } })] }));
+    const iconColor = selected ? theme.primary : theme.text.secondary;
+    if (variant === "filled") {
+        return (_jsx(TouchableOpacity, { accessibilityRole: "tab", accessibilityState: { selected }, activeOpacity: 0.7, className: "flex-1 items-center justify-center rounded-lg py-2", onPress: () => setValue(value), style: selected ? { backgroundColor: theme.bg.card, ...theme.shadow.sm } : {}, children: _jsxs(View, { className: cn("items-center", iconLayout === "left" && icon ? "flex-row gap-1.5" : "gap-1"), children: [icon && iconLayout === "top" && _jsx(Icon, { color: iconColor, name: icon, size: 16 }), icon && iconLayout === "left" && _jsx(Icon, { color: iconColor, name: icon, size: 14 }), _jsx(Typography.Text, { semibold: selected, style: { color: iconColor }, variant: "bodySmall", children: children })] }) }));
+    }
+    // underline variant
+    return (_jsxs(TouchableOpacity, { accessibilityRole: "tab", accessibilityState: { selected }, activeOpacity: 0.7, className: "flex-1 items-center", onPress: () => setValue(value), children: [_jsxs(View, { className: cn("py-3", iconLayout === "top" && icon
+                    ? "items-center gap-1"
+                    : "flex-row items-center gap-1.5"), children: [icon && iconLayout === "top" && _jsx(Icon, { color: iconColor, name: icon, size: 18 }), icon && iconLayout === "left" && _jsx(Icon, { color: iconColor, name: icon, size: 14 }), _jsx(Typography.Text, { semibold: selected, style: { color: iconColor }, children: children })] }), _jsx(View, { className: "h-0.5 w-full", style: { backgroundColor: selected ? theme.primary : "transparent" } })] }));
 }
 function TabsContent({ value, children }) {
     const { value: active } = useTabs();

package/dist/Navigation/index.d.ts

@@ -3,13 +3,16 @@ import CollapsingHeader from "../Navigation/Navigation.CollapsingHeader";
 import FloatingBar from "../Navigation/Navigation.FloatingBar";
 import HeaderToolbar from "../Navigation/Navigation.HeaderToolbar";
 import Menu from "../Navigation/Navigation.Menu";
+import { MenuSection } from "../Navigation/Navigation.MenuSection";
 import RowItem from "../Navigation/Navigation.RowItem";
 import SearchBar from "../Navigation/Navigation.SearchBar";
 import SegmentedControl from "../Navigation/Navigation.SegmentedControl";
 import Steps from "../Navigation/Navigation.Steps";
 import TabIcon from "../Navigation/Navigation.TabIcon";
+export type { AppBarBackground } from "../Navigation/Navigation.AppBar";
+export type { MenuSectionProps } from "../Navigation/Navigation.MenuSection";
 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) & {
+    AppBar: (({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, topSpacing, background, bottomDivider, className, testID, }: import("../Navigation/Navigation.AppBar").AppBarProps) => 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;
@@ -22,21 +25,19 @@ export declare const Navigation: {
     TabIcon: typeof TabIcon;
     RowItem: typeof RowItem;
     SegmentedControl: typeof SegmentedControl;
-    Tabs: (({ value, defaultValue, onValueChange, className, children }: import("../Navigation/Navigation.Tabs").TabsProps) => import("react").JSX.Element) & {
+    Tabs: (({ value, defaultValue, onValueChange, variant, className, children, }: import("../Navigation/Navigation.Tabs").TabsProps) => import("react").JSX.Element) & {
         List: ({ children, className }: {
             children: import("react").ReactNode;
             className?: string;
         }) => import("react").JSX.Element;
-        Trigger: ({ value, children }: {
-            value: string;
-            children: import("react").ReactNode;
-        }) => import("react").JSX.Element;
+        Trigger: ({ value, children, icon, iconLayout }: import("../Navigation/Navigation.Tabs").TabsTriggerProps) => import("react").JSX.Element;
         Content: ({ value, children }: {
             value: string;
             children: import("react").ReactNode;
         }) => import("react").JSX.Element | null;
     };
     Menu: typeof Menu;
+    MenuSection: typeof MenuSection;
     Steps: typeof Steps;
 };
 export default Navigation;

package/dist/Navigation/index.js

@@ -5,6 +5,7 @@ import FloatingBar from "../Navigation/Navigation.FloatingBar";
 import Header from "../Navigation/Navigation.Header";
 import HeaderToolbar from "../Navigation/Navigation.HeaderToolbar";
 import Menu from "../Navigation/Navigation.Menu";
+import { MenuSection } from "../Navigation/Navigation.MenuSection";
 import RowItem from "../Navigation/Navigation.RowItem";
 import SearchBar from "../Navigation/Navigation.SearchBar";
 import SegmentedControl from "../Navigation/Navigation.SegmentedControl";
@@ -26,6 +27,7 @@ export const Navigation = {
     SegmentedControl,
     Tabs,
     Menu,
+    MenuSection,
     Steps,
 };
 export default Navigation;

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/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();