@sincpro/mobile-ui 0.3.0 → 0.3.1

package/dist/Feedback/Toast.context.js

@@ -6,26 +6,18 @@ import { tv } from "../theme/tw";
 import { Typography } from "../Typography";
 import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
 import { ActivityIndicator, View } from "react-native";
-import Animated, { FadeInDown, FadeOutDown } from "react-native-reanimated";
+import Animated, { FadeInDown, FadeInUp, FadeOutDown, FadeOutUp, } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 const ToastContext = createContext(null);
 const DEFAULT_DURATION = 3500;
+// iOS-style card: rounded, hairline border + soft shadow, neutral surface. The variant is
+// conveyed by the colored icon (no left-accent stripe — it doesn't read well on iOS).
 const toast = tv({
     slots: {
-        root: "flex-row items-center gap-3 rounded-lg px-4 py-3 bg-bg-card border-l-4 shadow-lg",
+        root: "flex-row items-center gap-3 rounded-2xl px-4 py-3 bg-bg-card border border-border-light shadow-lg",
         title: "text-sm font-semibold text-text-primary",
         message: "text-sm text-text-secondary",
     },
-    variants: {
-        variant: {
-            info: { root: "border-info" },
-            success: { root: "border-success" },
-            warning: { root: "border-warning" },
-            danger: { root: "border-danger" },
-            loading: { root: "border-primary" },
-        },
-    },
-    defaultVariants: { variant: "info" },
 });
 const iconByVariant = {
     info: { name: "information-circle", color: theme.info },
@@ -33,15 +25,19 @@ const iconByVariant = {
     warning: { name: "warning", color: theme.warning },
     danger: { name: "close-circle", color: theme.danger },
 };
-function ToastItem({ entry, onHide }) {
+function ToastItem({ entry, onHide, position, }) {
     const variant = entry.variant ?? "info";
-    const styles = toast({ variant });
-    return (_jsxs(Animated.View, { accessibilityLiveRegion: "polite", accessible: true, className: styles.root(), entering: FadeInDown.duration(220), exiting: FadeOutDown.duration(180), children: [variant === "loading" ? (_jsx(ActivityIndicator, { color: theme.primary, size: "small" })) : (_jsx(Icon, { color: iconByVariant[variant].color, name: iconByVariant[variant].name, size: 22 })), _jsxs(View, { className: "flex-1", children: [entry.title ? (_jsx(Typography.Text, { className: styles.title(), children: entry.title })) : null, _jsx(Typography.Text, { className: styles.message(), children: entry.message })] }), entry.action ? (_jsx(Pressable, { accessibilityLabel: entry.action.label, onPress: () => {
+    const styles = toast();
+    const entering = position === "top" ? FadeInDown : FadeInUp;
+    const exiting = position === "top" ? FadeOutUp : FadeOutDown;
+    const resolvedDuration = entry.duration ?? (variant === "loading" ? 0 : DEFAULT_DURATION);
+    const showClose = entry.dismissible ?? resolvedDuration === 0;
+    return (_jsxs(Animated.View, { accessibilityLiveRegion: "polite", accessible: true, className: styles.root(), entering: entering.duration(220), exiting: exiting.duration(180), children: [variant === "loading" ? (_jsx(ActivityIndicator, { color: theme.primary, size: "small" })) : (_jsx(Icon, { color: iconByVariant[variant].color, name: iconByVariant[variant].name, size: 22 })), _jsxs(View, { className: "flex-1", children: [entry.title ? (_jsx(Typography.Text, { className: styles.title(), children: entry.title })) : null, _jsx(Typography.Text, { className: styles.message(), children: entry.message })] }), entry.action ? (_jsx(Pressable, { accessibilityLabel: entry.action.label, onPress: () => {
                     entry.action?.onPress();
                     onHide(entry.id);
-                }, children: _jsx(Typography.Text, { className: "text-primary text-sm font-semibold", children: entry.action.label }) })) : null] }));
+                }, children: _jsx(Typography.Text, { className: "text-primary text-sm font-semibold", children: entry.action.label }) })) : null, showClose ? (_jsx(Pressable, { accessibilityLabel: "Cerrar", hitSlop: 8, onPress: () => onHide(entry.id), children: _jsx(Icon, { color: theme.text.tertiary, name: "close", size: 18 }) })) : null] }));
 }
-export function ToastProvider({ children }) {
+export function ToastProvider({ children, position = "bottom", }) {
     const insets = useSafeAreaInsets();
     const [toasts, setToasts] = useState([]);
     const counter = useRef(0);
@@ -65,11 +61,17 @@ export function ToastProvider({ children }) {
         }
     }, [clearTimer, hide]);
     const show = useCallback((options) => {
-        counter.current += 1;
-        const id = `toast-${counter.current}`;
-        setToasts((prev) => [...prev, { ...options, id }]);
-        scheduleDismiss(id, options.variant, options.duration);
-        return id;
+        let id = options.id;
+        if (!id) {
+            counter.current += 1;
+            id = `toast-${counter.current}`;
+        }
+        const toastId = id;
+        setToasts((prev) => prev.some((t) => t.id === toastId)
+            ? prev.map((t) => (t.id === toastId ? { ...t, ...options, id: toastId } : t))
+            : [...prev, { ...options, id: toastId }]);
+        scheduleDismiss(toastId, options.variant, options.duration);
+        return toastId;
     }, [scheduleDismiss]);
     const update = useCallback((id, options) => {
         setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, ...options } : t)));
@@ -108,7 +110,7 @@ export function ToastProvider({ children }) {
             promise,
         };
     }, [show, update, hide]);
-    return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx(View, { className: "absolute left-0 right-0 px-4 gap-2 z-toast", pointerEvents: "box-none", style: { bottom: insets.bottom + 12 }, children: toasts.map((entry) => (_jsx(ToastItem, { entry: entry, onHide: hide }, entry.id))) })] }));
+    return (_jsxs(ToastContext.Provider, { value: value, children: [children, _jsx(View, { className: "absolute left-0 right-0 px-4 gap-2 z-toast", pointerEvents: "box-none", style: position === "top" ? { top: insets.top + 12 } : { bottom: insets.bottom + 12 }, children: toasts.map((entry) => (_jsx(ToastItem, { entry: entry, onHide: hide, position: position }, entry.id))) })] }));
 }
 export function useToast() {
     const ctx = useContext(ToastContext);

package/dist/Form/Form.Button.d.ts

@@ -21,7 +21,7 @@ declare const button: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
-}, undefined, "rounded-lg items-center justify-center flex-row min-h-[44px]", {
+}, undefined, "rounded-[13px] items-center justify-center flex-row min-h-[44px]", {
     variant: {
         primary: string;
         accent: string;
@@ -63,7 +63,7 @@ declare const button: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
-}, undefined, "rounded-lg items-center justify-center flex-row min-h-[44px]", unknown, unknown, undefined>>;
+}, undefined, "rounded-[13px] items-center justify-center flex-row min-h-[44px]", unknown, unknown, undefined>>;
 declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
@@ -85,7 +85,7 @@ declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
-}, undefined, "rounded-lg items-center justify-center aspect-square", {
+}, undefined, "rounded-[13px] items-center justify-center aspect-square", {
     variant: {
         primary: string;
         accent: string;
@@ -127,7 +127,7 @@ declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     disabled: {
         true: string;
     };
-}, undefined, "rounded-lg items-center justify-center aspect-square", unknown, unknown, undefined>>;
+}, undefined, "rounded-[13px] items-center justify-center aspect-square", unknown, unknown, undefined>>;
 export interface ButtonProps extends VariantProps<typeof button> {
     title: string;
     onPress?: () => void;

package/dist/Form/Form.Button.js

@@ -12,13 +12,13 @@ import { runOnJS } from "react-native-reanimated";
 // STYLE VARIANTS
 // ============================================================================
 const button = tv({
-    base: "rounded-lg items-center justify-center flex-row min-h-[44px]",
+    base: "rounded-[13px] items-center justify-center flex-row min-h-[44px]",
     variants: {
         variant: {
             primary: "shadow-sm",
             accent: "shadow-sm",
             cta: "shadow-sm",
-            secondary: "bg-bg-card border border-primary shadow-sm",
+            secondary: "bg-bg-muted",
             outline: "bg-transparent border border-primary",
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
@@ -41,13 +41,13 @@ const button = tv({
     },
 });
 const buttonIcon = tv({
-    base: "rounded-lg items-center justify-center aspect-square",
+    base: "rounded-[13px] items-center justify-center aspect-square",
     variants: {
         variant: {
             primary: "shadow-sm",
             accent: "shadow-sm",
             cta: "shadow-sm",
-            secondary: "bg-bg-card border border-primary shadow-sm",
+            secondary: "bg-bg-muted",
             outline: "bg-transparent border border-primary",
             outlineDanger: "bg-transparent border border-danger",
             outlineBlack: "bg-transparent border border-border-strong",
@@ -73,9 +73,9 @@ const textColor = tv({
     variants: {
         variant: {
             primary: "text-white",
-            accent: "text-white",
-            cta: "text-white",
-            secondary: "text-primary",
+            accent: "text-text-on-accent",
+            cta: "text-text-on-accent",
+            secondary: "text-text-primary",
             outline: "text-primary",
             outlineDanger: "text-danger",
             outlineBlack: "text-text-primary",
@@ -96,12 +96,12 @@ const textColor = tv({
         {
             variant: "accent",
             disabled: true,
-            className: "text-white/70",
+            className: "text-text-on-accent",
         },
         {
             variant: "cta",
             disabled: true,
-            className: "text-white/70",
+            className: "text-text-on-accent",
         },
         {
             variant: "transparent",
@@ -142,7 +142,7 @@ function getLoadingColorDynamic(variant) {
         primary: theme.text.inverse,
         accent: theme.text.inverse,
         cta: theme.text.inverse,
-        secondary: theme.primary,
+        secondary: theme.text.primary,
         outline: theme.primary,
         outlineDanger: theme.danger,
         outlineBlack: theme.text.primary,
@@ -156,9 +156,9 @@ function getIconColorDynamic(variant, disabled) {
     if (disabled) {
         const disabledMap = {
             primary: theme.icon.inverse + "70",
-            accent: theme.icon.inverse + "70",
-            cta: theme.icon.inverse + "70",
-            secondary: theme.icon.disabled,
+            accent: theme.text.onAccent + "70",
+            cta: theme.text.onAccent + "70",
+            secondary: theme.text.disabled,
             outline: theme.icon.disabled,
             outlineDanger: theme.danger + "7f",
             outlineBlack: theme.text.primary + "7f",
@@ -170,9 +170,9 @@ function getIconColorDynamic(variant, disabled) {
     }
     const enabledMap = {
         primary: theme.icon.inverse,
-        accent: theme.icon.inverse,
-        cta: theme.icon.inverse,
-        secondary: theme.primary,
+        accent: theme.text.onAccent,
+        cta: theme.text.onAccent,
+        secondary: theme.text.primary,
         outline: theme.primary,
         outlineDanger: theme.danger,
         outlineBlack: theme.text.primary,
@@ -239,7 +239,7 @@ const Button = ({ title, onPress, confirm, variant = "primary", size = "medium",
     if (variant === "primary" || variant === "accent" || variant === "cta") {
         const gradientColors = variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
         return (_jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
-                borderRadius: 8,
+                borderRadius: 13,
                 opacity: disabled ? 0.7 : 1,
             }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: handlePress, children: _jsx(View, { className: button({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: false, bold: true, className: textColorClass, ellipsizeMode: "tail", numberOfLines: 1, variant: textVariantValue, children: title })] })) }) }) }));
     }
@@ -269,8 +269,8 @@ const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "mediu
         }
     }, [onPress, confirm, show, hide]);
     if (variant === "primary") {
-        return (_jsx(LinearGradient, { colors: disabled ? ["#93c5fd", "#60a5fa"] : ["#2563eb", "#1d4ed8"], end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
-                borderRadius: 8,
+        return (_jsx(LinearGradient, { colors: theme.gradient.primary, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
+                borderRadius: 13,
                 opacity: disabled ? 0.7 : 1,
             }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: handlePress, 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 })) }) }) }));
     }

package/dist/Form/Form.Checkbox.js

@@ -25,6 +25,6 @@ function RowCheckBox({ mainText, subText, rightText, rightComponent, leftCompone
         }
         return null;
     };
-    return (_jsxs(Pressable, { className: cn("flex-row justify-between items-center", disabled && "opacity-50", className), disabled: disabled, onPress: handlePress, children: [_jsx(View, { children: renderLeftComponent() }), _jsxs(View, { className: "flex-row items-center", children: [renderRightComponent(), _jsx(Checkbox, { className: "ml-2", color: theme.primary, disabled: disabled, pointerEvents: "none", value: isChecked })] })] }));
+    return (_jsxs(Pressable, { className: cn("flex-row justify-between items-center", disabled && "opacity-50", className), disabled: disabled, onPress: handlePress, children: [_jsx(View, { children: renderLeftComponent() }), _jsxs(View, { className: "flex-row items-center", children: [renderRightComponent(), _jsx(Checkbox, { className: "ml-2", color: theme.accent, disabled: disabled, pointerEvents: "none", value: isChecked })] })] }));
 }
 export default RowCheckBox;

package/dist/Form/Form.Input.js

@@ -9,7 +9,7 @@ const inputContainer = tv({
     variants: {
         state: {
             error: "border-2 border-danger",
-            focused: "border-2 border-ring",
+            focused: "border-2 border-border-focus",
             default: "border border-input",
         },
     },

package/dist/Form/Form.InputField.js

@@ -9,7 +9,7 @@ const inputFieldBorder = tv({
     variants: {
         state: {
             error: "border-2 border-danger",
-            focused: "border-2 border-ring",
+            focused: "border-2 border-border-focus",
             default: "border border-input",
         },
     },

package/dist/Form/Form.Switch.js

@@ -4,6 +4,6 @@ import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
 import { Switch as RNSwitch, View } from "react-native";
 function Switch({ value, onValueChange, label, disabled = false, className, testID, }) {
-    return (_jsxs(View, { className: cn("flex-row items-center justify-between gap-3", className), children: [label ? (_jsx(Typography.Text, { className: cn("flex-1 text-text-primary", disabled && "text-text-disabled"), children: label })) : null, _jsx(RNSwitch, { accessibilityLabel: label, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, disabled: disabled, ios_backgroundColor: theme.bg.muted, onValueChange: onValueChange, testID: testID, thumbColor: theme.bg.card, trackColor: { false: theme.bg.muted, true: theme.primary }, value: value })] }));
+    return (_jsxs(View, { className: cn("flex-row items-center justify-between gap-3", className), children: [label ? (_jsx(Typography.Text, { className: cn("flex-1 text-text-primary", disabled && "text-text-disabled"), children: label })) : null, _jsx(RNSwitch, { accessibilityLabel: label, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, disabled: disabled, ios_backgroundColor: theme.bg.muted, onValueChange: onValueChange, testID: testID, thumbColor: theme.bg.card, trackColor: { false: theme.bg.muted, true: theme.accent }, value: value })] }));
 }
 export default Switch;

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

@@ -6,13 +6,17 @@ export interface AppBarActionProps {
     accessibilityLabel?: string;
     /** `tinted` highlights (primary action); `plain` is the neutral contained default. */
     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). */
+    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.
  */
-declare function AppBarAction({ icon, onPress, badge, accessibilityLabel, tone, testID, }: AppBarActionProps): import("react").JSX.Element;
+declare function AppBarAction({ icon, onPress, badge, accessibilityLabel, tone, onDark, bare, testID, }: AppBarActionProps): import("react").JSX.Element;
 export interface AppBarProps {
     title?: string;
     subtitle?: string;
@@ -21,6 +25,18 @@ export interface AppBarProps {
     actions?: ReactNode;
     subheader?: ReactNode;
     variant?: "default" | "large" | "center";
+    /**
+     * Surface tone:
+     * - `default` — tokenized light card.
+     * - `dark` — always-dark hero (light text + light contained actions).
+     * - `gradient` — brand-accent gradient hero for greeting headers ("Buenos días, …"),
+     *   with dark text via `text.onAccent` (reads `theme.gradient.accent`).
+     */
+    tone?: "default" | "dark" | "gradient";
+    /** [large variant] Show a left vertical accent bar beside the large title. */
+    accentBar?: boolean;
+    /** Back button style: `contained` (circular surface) or `plain` (bare iOS chevron). */
+    backVariant?: "contained" | "plain";
     border?: boolean;
     /** Reserves the status-bar space (insets.top). `false` to embed/demo. */
     safeArea?: boolean;
@@ -33,7 +49,7 @@ export interface AppBarProps {
  * 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, border, safeArea, className, testID, }: AppBarProps): import("react").JSX.Element;
+declare function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant, tone, accentBar, backVariant, border, safeArea, className, testID, }: AppBarProps): import("react").JSX.Element;
 declare const AppBarWithAction: typeof AppBar & {
     Action: typeof AppBarAction;
 };

package/dist/Navigation/Navigation.AppBar.js

@@ -1,21 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import GradientSurface from "../Display/Display.GradientSurface";
 import Icon from "../Display/Display.Icon";
 import Pressable from "../primitives/Pressable";
 import { theme } from "../theme";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+/** Fallback for the `tone="dark"` hero surface when the theme has no `bg.inverse` token. */
+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.
  */
-function AppBarAction({ icon, onPress, badge, accessibilityLabel, tone = "plain", testID, }) {
-    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", className: "items-center justify-center rounded-full", hitSlop: 6, onPress: onPress, style: {
-            width: 38,
-            height: 38,
-            backgroundColor: tone === "tinted" ? theme.bg.accent : theme.bg.muted,
-        }, testID: testID, children: [_jsx(Icon, { color: tone === "tinted" ? theme.primary : theme.icon.primary, name: icon, size: 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] }));
+function AppBarAction({ icon, 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.bg.card;
+    const iconColor = tone === "tinted" ? theme.primary : 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";
+    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] }));
 }
 /**
  * Flat, modern top bar (merge of Material 3 + iOS 26): tokenized surface, left-aligned
@@ -23,10 +38,34 @@ function AppBarAction({ icon, onPress, badge, accessibilityLabel, tone = "plain"
  * 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", 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, className, testID, }) {
     const insets = useSafeAreaInsets();
     const centered = variant === "center";
-    return (_jsxs(View, { className: cn("bg-bg-card", border && "border-b border-border-light", className), style: { paddingTop: safeArea ? insets.top : 0 }, testID: testID, children: [_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", icon: "chevron-back", onPress: onBack })) : null, leading] }), variant !== "large" ? (_jsxs(View, { className: cn("flex-1", centered && "items-center"), children: [title ? (_jsx(Typography.Text, { className: "text-text-primary", numberOfLines: 1, semibold: true, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", numberOfLines: 1, 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 })] }), variant === "large" && title ? (_jsxs(View, { className: "px-4 pb-2 pt-0.5", children: [_jsx(Typography.Text, { className: "text-text-primary", variant: "h2", children: title }), subtitle ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: subtitle })) : null] })) : null, subheader ? _jsx(View, { className: "px-3 pb-3 pt-0.5", children: subheader }) : null] }));
+    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;
+    // 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;
+    const titleStyle = colored ? { color: onColoredText } : undefined;
+    const subtitleStyle = gradient
+        ? { color: theme.text.onAccent, opacity: 0.72 }
+        : 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: {
+            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: {
+                            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] }));
 }
 const AppBarWithAction = Object.assign(AppBar, { Action: AppBarAction });
 export default AppBarWithAction;

package/dist/Navigation/Navigation.BottomNav.d.ts

@@ -1,8 +1,13 @@
+import type { CustomIconProps } from "../icons/props";
+import type { ComponentType } from "react";
 export interface BottomNavItem {
     key: string;
     label?: string;
-    icon: string;
+    /** Icon font name (Display.Icon). Provide this OR `customIcon`. */
+    icon?: string;
     activeIcon?: string;
+    /** Brand/custom SVG icon component. Takes precedence over `icon` (for non-font brand marks). */
+    customIcon?: ComponentType<CustomIconProps>;
     badge?: string | number;
 }
 export interface BottomNavCenterAction {
@@ -10,20 +15,43 @@ export interface BottomNavCenterAction {
     onPress: () => void;
     accessibilityLabel?: string;
 }
+/**
+ * Active-tab indicator style:
+ * - `none`: color only.
+ * - `pill`: filled round pill behind the icon.
+ * - `pill-text`: extended pill with icon + label inside (inactive = icon only).
+ * - `bar`: top accent bar over the active item (label below).
+ * - `glow`: glowing dot under the active icon (pairs with `tone="dark"`).
+ */
+export type BottomNavIndicator = "none" | "pill" | "pill-text" | "bar" | "glow";
 export interface BottomNavProps {
     items: BottomNavItem[];
     value: string;
     onChange: (key: string) => void;
+    /** Show the text label under each icon. `false` = icon-only. */
     showLabels?: boolean;
+    /** Elevated center FAB (delivery/social apps). Splits items left/right around it. */
     centerAction?: BottomNavCenterAction;
-    /** Reserva el espacio inferior (insets.bottom). `false` al embeber en FloatingBar. */
+    /** Reserve the bottom inset (insets.bottom). Auto-disabled for `floating`/`dark`. */
     safeArea?: boolean;
+    /** `bar` = full-width docked bar; `floating` = self-contained rounded pill (shadow, margins). */
+    shape?: "bar" | "floating";
+    /** Surface tone. `dark` renders a dark rounded bar (pairs with `glow`). */
+    tone?: "light" | "dark";
+    /** Active-tab indicator style (see BottomNavIndicator). */
+    indicator?: BottomNavIndicator;
+    /** [light bar only] Top hairline + card surface. */
+    bordered?: boolean;
+    /** Token for the active color. `primary` (default) or `accent` (e.g. green CTA brand). */
+    activeColor?: "primary" | "accent";
     className?: string;
     testID?: string;
 }
 /**
- * Bottom navigation flat y moderna: superficie tokenizada + hairline superior, activo en
- * `primary`. `centerAction` agrega un FAB central elevado (estilo apps de delivery/social).
+ * The single bottom-navigation component. Extensible by props, not by forking:
+ * `shape` (bar/floating), `tone` (light/dark), `indicator` (none/pill/pill-text/bar/glow),
+ * `showLabels`, `centerAction` (FAB), `activeColor`. Replaces the legacy `TabNavigatorLayout`.
  */
-declare function BottomNav({ items, value, onChange, showLabels, centerAction, safeArea, className, testID, }: BottomNavProps): import("react").JSX.Element;
+declare function BottomNav({ items, value, onChange, showLabels, centerAction, safeArea, shape, tone, indicator, bordered, activeColor, className, testID, }: BottomNavProps): import("react").JSX.Element;
 export default BottomNav;
+export { BottomNav };

package/dist/Navigation/Navigation.BottomNav.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+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";
@@ -6,30 +6,103 @@ import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
 import { View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+const DARK_SURFACE = "#15181B";
 /**
- * Bottom navigation flat y moderna: superficie tokenizada + hairline superior, activo en
- * `primary`. `centerAction` agrega un FAB central elevado (estilo apps de delivery/social).
+ * The single bottom-navigation component. Extensible by props, not by forking:
+ * `shape` (bar/floating), `tone` (light/dark), `indicator` (none/pill/pill-text/bar/glow),
+ * `showLabels`, `centerAction` (FAB), `activeColor`. Replaces the legacy `TabNavigatorLayout`.
  */
-function BottomNav({ items, value, onChange, showLabels = true, centerAction, safeArea = true, className, testID, }) {
+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 bottomPad = safeArea ? insets.bottom : 0;
+    const dark = tone === "dark";
+    const rounded = shape === "floating" || dark;
+    const bottomPad = rounded ? 6 : safeArea ? insets.bottom : 0;
+    const activeTint = activeColor === "accent" ? theme.accent : theme.primary;
+    const onActive = activeColor === "accent" ? theme.text.onAccent : theme.icon.inverse;
+    const inactiveColor = dark ? "rgba(255,255,255,0.55)" : theme.icon.secondary;
+    const surfaceColor = dark ? DARK_SURFACE : theme.bg.card;
+    const containerStyle = rounded
+        ? {
+            borderRadius: 32,
+            paddingBottom: bottomPad,
+            paddingTop: 6,
+            paddingHorizontal: 6,
+            minHeight: 64,
+            backgroundColor: surfaceColor,
+            ...theme.shadow.lg,
+        }
+        : {
+            paddingBottom: bottomPad,
+            minHeight: 56,
+            backgroundColor: surfaceColor,
+            ...(bordered ? { borderTopWidth: 1, borderTopColor: theme.border.light } : null),
+        };
+    const renderIconNode = (item, active, color) => {
+        const node = item.customIcon ? (_jsx(Icon, { color: color, customIcon: item.customIcon, size: 24, type: "custom" })) : (_jsx(Icon, { color: color, name: (active ? (item.activeIcon ?? item.icon) : item.icon) ?? "", size: 24 }));
+        return (_jsxs(View, { children: [node, item.badge != null ? (_jsx(View, { className: "absolute bg-danger rounded-full min-w-[16px] h-4 px-1 items-center justify-center", style: { top: -4, right: -10, borderWidth: 2, borderColor: surfaceColor }, children: _jsx(Typography.Text, { style: { color: theme.text.inverse, fontSize: 9, lineHeight: 11 }, children: item.badge }) })) : null] }));
+    };
     const renderItem = (item) => {
         const active = item.key === value;
-        const color = active ? theme.primary : theme.icon.secondary;
-        return (_jsxs(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", accessibilityState: { selected: active }, className: "flex-1 items-center justify-center py-1.5", onPress: () => onChange(item.key), children: [_jsxs(View, { children: [_jsx(Icon, { color: color, name: active ? (item.activeIcon ?? item.icon) : item.icon, size: 24 }), item.badge != null ? (_jsx(View, { className: "absolute bg-danger rounded-full min-w-[16px] h-4 px-1 items-center justify-center", style: { top: -4, right: -10, borderWidth: 2, borderColor: theme.bg.card }, children: _jsx(Typography.Text, { style: { color: theme.text.inverse, fontSize: 9, lineHeight: 11 }, children: item.badge }) })) : null] }), showLabels && item.label ? (_jsx(Typography.Text, { numberOfLines: 1, style: { color, fontSize: 11, marginTop: 3 }, children: item.label })) : null] }, item.key));
+        // Variant A — extended pill with text (active = horizontal pill, inactive = icon only).
+        if (indicator === "pill-text") {
+            if (active) {
+                return (_jsxs(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", accessibilityState: { selected: true }, className: "flex-row items-center px-4 py-2", onPress: () => onChange(item.key), style: { borderRadius: 999, backgroundColor: activeTint }, children: [renderIconNode(item, true, onActive), item.label ? (_jsx(Typography.Text, { semibold: true, style: { color: onActive, fontSize: 13, marginLeft: 8 }, children: item.label })) : null] }, item.key));
+            }
+            return (_jsx(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", className: "items-center justify-center px-3 py-2", onPress: () => onChange(item.key), children: renderIconNode(item, false, inactiveColor) }, item.key));
+        }
+        // Variants none / pill / bar / glow — vertical icon + optional indicator + optional label.
+        const inPill = indicator === "pill" && active;
+        const iconColor = inPill
+            ? onActive
+            : active
+                ? indicator === "glow"
+                    ? activeTint
+                    : activeTint
+                : inactiveColor;
+        const labelColor = active ? (dark ? "#FFFFFF" : activeTint) : inactiveColor;
+        return (_jsxs(Pressable, { accessibilityLabel: item.label ?? item.key, accessibilityRole: "tab", accessibilityState: { selected: active }, className: "flex-1 items-center justify-center py-1.5", onPress: () => onChange(item.key), children: [indicator === "bar" && active ? (_jsx(View, { style: {
+                        position: "absolute",
+                        top: 0,
+                        width: 26,
+                        height: 3,
+                        borderRadius: 999,
+                        backgroundColor: activeTint,
+                    } })) : null, _jsx(View, { className: inPill ? "px-5 py-1.5" : undefined, style: inPill ? { borderRadius: 999, backgroundColor: activeTint } : undefined, children: renderIconNode(item, active, iconColor) }), indicator === "glow" && active ? (_jsx(View, { style: {
+                        width: 5,
+                        height: 5,
+                        borderRadius: 999,
+                        marginTop: 4,
+                        backgroundColor: activeTint,
+                        shadowColor: activeTint,
+                        shadowOpacity: 0.9,
+                        shadowRadius: 5,
+                        elevation: 4,
+                    } })) : null, showLabels && item.label && indicator !== "glow" ? (_jsx(Typography.Text, { numberOfLines: 1, semibold: active, style: { color: labelColor, fontSize: 11, marginTop: 3 }, children: item.label })) : null] }, item.key));
     };
+    const renderCenterFab = () => (_jsx(Pressable, { accessibilityLabel: centerAction?.accessibilityLabel ?? "Acción", accessibilityRole: "button", className: "items-center justify-center", onPress: centerAction?.onPress, style: {
+            width: 52,
+            height: 52,
+            borderRadius: 18,
+            marginTop: -20,
+            marginHorizontal: 6,
+            backgroundColor: activeTint,
+            // Glow halo en el color de acento (iOS shadow + Android elevation).
+            shadowColor: activeTint,
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.55,
+            shadowRadius: 14,
+            elevation: 10,
+        }, children: _jsx(Icon, { color: onActive, name: centerAction?.icon ?? "add", size: 26 }) }));
+    let content;
     if (centerAction) {
         const mid = Math.ceil(items.length / 2);
-        const left = items.slice(0, mid);
-        const right = items.slice(mid);
-        return (_jsxs(View, { className: cn("flex-row items-center bg-bg-card border-t border-border-light", className), style: { paddingBottom: bottomPad, minHeight: 56 }, testID: testID, children: [left.map(renderItem), _jsx(Pressable, { accessibilityLabel: centerAction.accessibilityLabel ?? "Acción", accessibilityRole: "button", className: "items-center justify-center bg-primary rounded-full", onPress: centerAction.onPress, style: {
-                        width: 52,
-                        height: 52,
-                        marginTop: -20,
-                        marginHorizontal: 6,
-                        ...theme.shadow.md,
-                    }, children: _jsx(Icon, { color: theme.icon.inverse, name: centerAction.icon, size: 26 }) }), right.map(renderItem)] }));
+        content = (_jsxs(_Fragment, { children: [items.slice(0, mid).map(renderItem), renderCenterFab(), items.slice(mid).map(renderItem)] }));
+    }
+    else {
+        content = items.map(renderItem);
     }
-    return (_jsx(View, { className: cn("flex-row bg-bg-card border-t border-border-light", className), style: { paddingBottom: bottomPad, minHeight: 56 }, testID: testID, children: items.map(renderItem) }));
+    const justify = indicator === "pill-text" ? "justify-around" : "";
+    return (_jsx(View, { className: cn("flex-row items-center", justify, className), style: containerStyle, testID: testID, children: content }));
 }
 export default BottomNav;
+export { BottomNav };