@sincpro/mobile-ui 0.2.1 → 0.3.1

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

@@ -0,0 +1,57 @@
+import type { CustomIconProps } from "../icons/props";
+import type { ComponentType } from "react";
+export interface BottomNavItem {
+    key: string;
+    label?: 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 {
+    icon: string;
+    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;
+    /** 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;
+}
+/**
+ * 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, shape, tone, indicator, bordered, activeColor, className, testID, }: BottomNavProps): import("react").JSX.Element;
+export default BottomNav;
+export { BottomNav };

package/dist/Navigation/Navigation.BottomNav.js

@@ -0,0 +1,108 @@
+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 { 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";
+/**
+ * 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, shape = "bar", tone = "light", indicator = "none", bordered = true, activeColor = "primary", className, testID, }) {
+    const insets = useSafeAreaInsets();
+    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;
+        // 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);
+        content = (_jsxs(_Fragment, { children: [items.slice(0, mid).map(renderItem), renderCenterFab(), items.slice(mid).map(renderItem)] }));
+    }
+    else {
+        content = 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 };

package/dist/Navigation/Navigation.CollapsingHeader.d.ts

@@ -0,0 +1,34 @@
+import { type AppBarActionProps } from "../Navigation/Navigation.AppBar";
+import type { ReactNode } from "react";
+import { Animated } from "react-native";
+export interface CollapsingHeaderProps {
+    title: string;
+    subtitle?: string;
+    scrollY: Animated.Value;
+    onBack?: () => void;
+    actions?: ReactNode;
+    /** Extra height of the collapsing large-title (px). Default 56, or 72 with subtitle. */
+    largeHeight?: number;
+    /** Reserves the status-bar space (insets.top). `false` to embed/demo. */
+    safeArea?: boolean;
+    testID?: string;
+}
+/**
+ * Header with a large-title that **collapses on scroll** (merge of iOS 26 large title +
+ * Material 3 large top app bar). The compact bar stays fixed and its title fades in while
+ * scrolling; the large-title fades out and slides up. Controlled by an `Animated.Value`.
+ *
+ * Usage: pass `scrollY` from your `Animated.ScrollView`. Since the large-title collapses its
+ * `height` (not supported by the native driver), use `useNativeDriver: false`:
+ * ```tsx
+ * const scrollY = useRef(new Animated.Value(0)).current;
+ * <CollapsingHeader title="Inicio" scrollY={scrollY} />
+ * <Animated.ScrollView
+ *   onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: false })}
+ *   scrollEventThrottle={16}
+ * />
+ * ```
+ */
+declare function CollapsingHeader({ title, subtitle, scrollY, onBack, actions, largeHeight, safeArea, testID, }: CollapsingHeaderProps): import("react").JSX.Element;
+export type { AppBarActionProps };
+export default CollapsingHeader;

package/dist/Navigation/Navigation.CollapsingHeader.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import AppBar from "../Navigation/Navigation.AppBar";
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+import { Animated, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+/**
+ * Header with a large-title that **collapses on scroll** (merge of iOS 26 large title +
+ * Material 3 large top app bar). The compact bar stays fixed and its title fades in while
+ * scrolling; the large-title fades out and slides up. Controlled by an `Animated.Value`.
+ *
+ * Usage: pass `scrollY` from your `Animated.ScrollView`. Since the large-title collapses its
+ * `height` (not supported by the native driver), use `useNativeDriver: false`:
+ * ```tsx
+ * const scrollY = useRef(new Animated.Value(0)).current;
+ * <CollapsingHeader title="Inicio" scrollY={scrollY} />
+ * <Animated.ScrollView
+ *   onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], { useNativeDriver: false })}
+ *   scrollEventThrottle={16}
+ * />
+ * ```
+ */
+function CollapsingHeader({ title, subtitle, scrollY, onBack, actions, largeHeight = subtitle ? 72 : 56, safeArea = true, testID, }) {
+    const insets = useSafeAreaInsets();
+    const largeOpacity = scrollY.interpolate({
+        inputRange: [0, largeHeight * 0.6],
+        outputRange: [1, 0],
+        extrapolate: "clamp",
+    });
+    const largeTranslate = scrollY.interpolate({
+        inputRange: [0, largeHeight],
+        outputRange: [0, -largeHeight / 2],
+        extrapolate: "clamp",
+    });
+    const largeContainerHeight = scrollY.interpolate({
+        inputRange: [0, largeHeight],
+        outputRange: [largeHeight, 0],
+        extrapolate: "clamp",
+    });
+    const compactTitleOpacity = scrollY.interpolate({
+        inputRange: [largeHeight * 0.6, largeHeight],
+        outputRange: [0, 1],
+        extrapolate: "clamp",
+    });
+    return (_jsxs(View, { style: { backgroundColor: theme.bg.card }, testID: testID, children: [_jsx(View, { style: { paddingTop: safeArea ? insets.top : 0 }, children: _jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[52px]", children: [_jsx(View, { style: { minWidth: 38 }, children: onBack ? (_jsx(AppBar.Action, { accessibilityLabel: "Volver", icon: "chevron-back", onPress: onBack })) : null }), _jsx(Animated.View, { className: "flex-1", style: { opacity: compactTitleOpacity }, children: _jsx(Typography.Text, { className: "text-text-primary", numberOfLines: 1, semibold: true, variant: "subtitle", children: title }) }), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] }) }), _jsx(Animated.View, { style: { height: largeContainerHeight, overflow: "hidden" }, children: _jsxs(Animated.View, { className: "px-4 pb-2", style: { opacity: largeOpacity, transform: [{ translateY: largeTranslate }] }, 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] }) }), _jsx(View, { className: "border-b border-border-light" })] }));
+}
+export default CollapsingHeader;

package/dist/Navigation/Navigation.FloatingBar.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface FloatingBarProps {
+    children: ReactNode;
+    position?: "top" | "bottom";
+    inset?: number;
+    className?: string;
+    testID?: string;
+}
+/**
+ * **Rounded floating container** for nav/action bars that float above the content
+ * (Snapchat/TikTok/McDonald's 2026 style). Shadowed pill, safe-area aware.
+ * Presentational: drop a `BottomNav`, actions, or anything inside.
+ */
+declare function FloatingBar({ children, position, inset, className, testID, }: FloatingBarProps): import("react").JSX.Element;
+export default FloatingBar;

package/dist/Navigation/Navigation.FloatingBar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+/**
+ * **Rounded floating container** for nav/action bars that float above the content
+ * (Snapchat/TikTok/McDonald's 2026 style). Shadowed pill, safe-area aware.
+ * Presentational: drop a `BottomNav`, actions, or anything inside.
+ */
+function FloatingBar({ children, position = "bottom", inset = 16, className, testID, }) {
+    const insets = useSafeAreaInsets();
+    const safe = position === "bottom" ? insets.bottom : insets.top;
+    return (_jsx(View, { pointerEvents: "box-none", style: {
+            position: "absolute",
+            left: inset,
+            right: inset,
+            [position]: safe + inset,
+        }, testID: testID, children: _jsx(View, { className: cn("rounded-full bg-bg-card px-2 py-1.5 border border-border-light", className), style: theme.shadow.lg, children: children }) }));
+}
+export default FloatingBar;

package/dist/Navigation/Navigation.Header.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 import { type ImageSourcePropType } from "react-native";
 export interface HeaderProps {
     title?: string;
@@ -8,5 +8,9 @@ export interface HeaderProps {
     handleBackButton?: () => void;
     className?: string;
 }
-declare const Header: ({ title, logo, logoSource, backButton, handleBackButton, className, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Legacy style (forced gradient via `GradientContainer`). Use
+ * `Navigation.AppBar` (flat, modern, opt-in gradient). Kept for backwards compatibility.
+ */
+declare const Header: ({ title, logo, logoSource, backButton, handleBackButton, className, }: HeaderProps) => React.JSX.Element;
 export default Header;

package/dist/Navigation/Navigation.Header.js

@@ -5,6 +5,10 @@ import { theme } from "../theme";
 import { cn } from "../theme/tw";
 import { Typography } from "../Typography";
 import { TouchableOpacity, View } from "react-native";
+/**
+ * @deprecated Legacy style (forced gradient via `GradientContainer`). Use
+ * `Navigation.AppBar` (flat, modern, opt-in gradient). Kept for backwards compatibility.
+ */
 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 }))] })] }) }));

package/dist/Navigation/Navigation.HeaderToolbar.d.ts

@@ -11,5 +11,5 @@ interface HeaderToolbarProps {
     withBackground?: boolean;
     className?: string;
 }
-declare function HeaderToolbar({ title, subtitle, onBack, rightComponent, centerTitle, flat, children, logo, withBackground, className, }: HeaderToolbarProps): import("react/jsx-runtime").JSX.Element;
+declare function HeaderToolbar({ title, subtitle, onBack, rightComponent, centerTitle, flat, children, logo, withBackground, className, }: HeaderToolbarProps): React.JSX.Element;
 export default HeaderToolbar;

package/dist/Navigation/Navigation.Menu.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export interface MenuItem {
+    label: string;
+    icon?: string;
+    destructive?: boolean;
+    disabled?: boolean;
+    onPress: () => void;
+}
+export interface MenuSeparator {
+    separator: true;
+}
+export type MenuEntry = MenuItem | MenuSeparator;
+export interface MenuProps {
+    items: MenuEntry[];
+    trigger?: ReactNode;
+    menuWidth?: number;
+    testID?: string;
+}
+declare function Menu({ items, trigger, menuWidth, testID }: MenuProps): import("react").JSX.Element;
+export default Menu;
+export { Menu };

package/dist/Navigation/Navigation.Menu.js

@@ -0,0 +1,42 @@
+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 { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { useRef, useState } from "react";
+import { Dimensions, Modal, Pressable as RNPressable, View } from "react-native";
+function Menu({ items, trigger, menuWidth = 220, testID }) {
+    const triggerRef = useRef(null);
+    const [anchor, setAnchor] = useState(null);
+    const open = () => {
+        triggerRef.current?.measureInWindow((x, y, width, height) => {
+            setAnchor({ x, y, width, height });
+        });
+    };
+    const close = () => setAnchor(null);
+    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: {
+                            position: "absolute",
+                            top,
+                            right,
+                            width: menuWidth,
+                            backgroundColor: theme.bg.popover,
+                            borderWidth: 1,
+                            borderColor: theme.border.light,
+                            ...theme.shadow.lg,
+                        }, children: items.map((entry, index) => {
+                            if ("separator" in entry && entry.separator) {
+                                return _jsx(View, { className: "my-1 h-px bg-border-default" }, `sep-${index}`);
+                            }
+                            const item = entry;
+                            return (_jsxs(Pressable, { accessibilityRole: "menuitem", accessibilityState: { disabled: item.disabled }, className: "flex-row items-center gap-3 px-4 py-3", disabled: item.disabled, onPress: () => {
+                                    close();
+                                    item.onPress();
+                                }, children: [item.icon ? (_jsx(Icon, { color: item.destructive ? theme.danger : theme.icon.secondary, name: item.icon, size: 18 })) : null, _jsx(Typography.Text, { className: cn("flex-1 text-sm", item.destructive ? "text-danger" : "text-text-primary", item.disabled && "text-text-disabled"), children: item.label })] }, item.label));
+                        }) }) }) })] }));
+}
+export default Menu;
+export { Menu };

package/dist/Navigation/Navigation.RowItem.d.ts

@@ -1,5 +1,5 @@
 import { IRowItemProps } from "../views/types/IListView";
 declare function RowItem({ item, className }: IRowItemProps<any> & {
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 export default RowItem;

package/dist/Navigation/Navigation.SearchBar.d.ts

@@ -0,0 +1,18 @@
+export interface SearchBarProps {
+    value: string;
+    onChangeText: (value: string) => void;
+    placeholder?: string;
+    onSubmit?: (value: string) => void;
+    onClear?: () => void;
+    autoFocus?: boolean;
+    editable?: boolean;
+    onPress?: () => void;
+    className?: string;
+    testID?: string;
+}
+/**
+ * **Pill** search bar (rounded-full), 2026 style (merge of Material 3 + iOS 26).
+ * Use `editable={false}` + `onPress` for a trigger that navigates to the search screen.
+ */
+declare function SearchBar({ value, onChangeText, placeholder, onSubmit, onClear, autoFocus, editable, onPress, className, testID, }: SearchBarProps): import("react").JSX.Element;
+export default SearchBar;

package/dist/Navigation/Navigation.SearchBar.js

@@ -0,0 +1,28 @@
+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 { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { useState } from "react";
+import { TextInput, View } from "react-native";
+/**
+ * **Pill** search bar (rounded-full), 2026 style (merge of Material 3 + iOS 26).
+ * Use `editable={false}` + `onPress` for a trigger that navigates to the search screen.
+ */
+function SearchBar({ value, onChangeText, placeholder = "Buscar", onSubmit, onClear, autoFocus, editable = true, onPress, className, testID, }) {
+    const [focused, setFocused] = useState(false);
+    const body = (_jsxs(View, { className: cn("flex-row items-center gap-2 rounded-full px-4", focused ? "bg-bg-card" : "bg-bg-muted", className), style: {
+            height: 44,
+            borderWidth: 1,
+            borderColor: focused ? theme.border.focus : "transparent",
+        }, children: [_jsx(Icon, { color: focused ? theme.border.focus : theme.icon.tertiary, name: "search", size: 18 }), editable ? (_jsx(TextInput, { autoFocus: autoFocus, className: "flex-1 text-sm text-text-primary", onBlur: () => setFocused(false), onChangeText: onChangeText, onFocus: () => setFocused(true), onSubmitEditing: (e) => onSubmit?.(e.nativeEvent.text), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, returnKeyType: "search", value: value })) : (_jsx(Typography.Text, { className: "flex-1 text-text-tertiary text-sm", numberOfLines: 1, children: value || placeholder })), editable && value.length > 0 ? (_jsx(Pressable, { accessibilityLabel: "Limpiar", hitSlop: 8, onPress: () => {
+                    onChangeText("");
+                    onClear?.();
+                }, children: _jsx(Icon, { color: theme.icon.tertiary, name: "close-circle", size: 18 }) })) : null] }));
+    if (!editable && onPress) {
+        return (_jsx(Pressable, { accessibilityLabel: placeholder, accessibilityRole: "search", onPress: onPress, testID: testID, children: body }));
+    }
+    return _jsx(View, { testID: testID, children: body });
+}
+export default SearchBar;

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

@@ -0,0 +1,14 @@
+export interface SegmentedOption<T extends string> {
+    label: string;
+    value: T;
+}
+export interface SegmentedControlProps<T extends string> {
+    options: SegmentedOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    className?: string;
+    testID?: string;
+}
+declare function SegmentedControl<T extends string>({ options, value, onChange, className, testID, }: SegmentedControlProps<T>): import("react").JSX.Element;
+export default SegmentedControl;
+export { SegmentedControl };

package/dist/Navigation/Navigation.SegmentedControl.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { TouchableOpacity, View } from "react-native";
+function SegmentedControl({ options, value, onChange, className, testID, }) {
+    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));
+        }) }));
+}
+export default SegmentedControl;
+export { SegmentedControl };

package/dist/Navigation/Navigation.Steps.d.ts

@@ -0,0 +1,8 @@
+export interface StepsProps {
+    steps: string[];
+    current: number;
+    className?: string;
+    testID?: string;
+}
+declare function Steps({ steps, current, className, testID }: StepsProps): import("react").JSX.Element;
+export default Steps;

package/dist/Navigation/Navigation.Steps.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Icon from "../Display/Display.Icon";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { View } from "react-native";
+function Steps({ steps, current, className, testID }) {
+    return (_jsx(View, { accessibilityLabel: `Paso ${current + 1} de ${steps.length}`, className: cn("flex-row items-start", className), testID: testID, children: steps.map((label, index) => {
+            const done = index < current;
+            const active = index === current;
+            const circleColor = done || active ? theme.primary : theme.bg.muted;
+            const textColor = done || active ? theme.text.inverse : theme.text.tertiary;
+            const isLast = index === steps.length - 1;
+            return (_jsxs(View, { className: "flex-1 items-center", children: [_jsxs(View, { className: "flex-row items-center w-full", children: [_jsx(View, { className: "flex-1 h-0.5", style: { backgroundColor: "transparent" } }), _jsx(View, { className: "w-7 h-7 rounded-full items-center justify-center", style: { backgroundColor: circleColor }, children: done ? (_jsx(Icon, { color: theme.text.inverse, name: "checkmark", size: 16 })) : (_jsx(Typography.Text, { style: { color: textColor }, variant: "bodySmall", children: index + 1 })) }), _jsx(View, { className: "flex-1 h-0.5", style: { backgroundColor: isLast ? "transparent" : theme.border.default } })] }), _jsx(Typography.Text, { className: "mt-1 text-center", numberOfLines: 1, style: { color: active ? theme.primary : theme.text.tertiary }, variant: "caption", children: label })] }, label));
+        }) }));
+}
+export default Steps;

package/dist/Navigation/Navigation.TabIcon.d.ts

@@ -10,5 +10,9 @@ interface TabIconProps {
     name?: any;
     className?: string;
 }
-declare function TabIcon({ focused, size, customIcon, type, name, className, }: TabIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @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.
+ */
+declare function TabIcon({ focused, size, customIcon, type, name, className, }: TabIconProps): import("react").JSX.Element;
 export default TabIcon;

package/dist/Navigation/Navigation.TabIcon.js

@@ -3,6 +3,10 @@ import { Display } from "../Display";
 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.
+ */
 function TabIcon({ focused, size = 24, customIcon, type = "custom", name, className, }) {
     return (_jsx(View, { className: cn("justify-center items-center h-9 w-14 rounded-2xl", focused && "bg-primary shadow-sm", className), children: _jsx(Icon, { className: focused ? "text-white" : "text-text-secondary", customIcon: customIcon, name: name, size: size, type: type }) }));
 }

package/dist/Navigation/Navigation.TabItem.d.ts

@@ -10,5 +10,10 @@ export interface TabIconProps {
     name?: any;
     className?: string;
 }
+/**
+ * @deprecated Orphan tab-bar icon piece (unused). The bottom tab bar is now the single
+ * `Navigation.BottomNav` (configurable shape/indicator/labels/FAB). Kept for backwards
+ * compatibility; removed in the next major.
+ */
 declare const TabIcon: FC<TabIconProps>;
 export default TabIcon;

package/dist/Navigation/Navigation.TabItem.js

@@ -2,6 +2,11 @@ import { jsx as _jsx } from "nativewind/jsx-runtime";
 import { Display } from "../Display";
 import { cn } from "../theme/tw";
 import { View } from "react-native";
+/**
+ * @deprecated Orphan tab-bar icon piece (unused). The bottom tab bar is now the single
+ * `Navigation.BottomNav` (configurable shape/indicator/labels/FAB). Kept for backwards
+ * 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 }) }));
 };

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

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react";
+export interface TabsProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    children: ReactNode;
+}
+declare function TabsRoot({ value, defaultValue, onValueChange, 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 }: {
+    value: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+declare function TabsContent({ value, children }: {
+    value: string;
+    children: ReactNode;
+}): import("react").JSX.Element | null;
+declare const Tabs: typeof TabsRoot & {
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
+};
+export default Tabs;
+export { Tabs };

package/dist/Navigation/Navigation.Tabs.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { createContext, useCallback, useContext, useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+const TabsContext = createContext(null);
+function useTabs() {
+    const ctx = useContext(TabsContext);
+    if (!ctx) {
+        throw new Error("Tabs.* debe usarse dentro de <Tabs>");
+    }
+    return ctx;
+}
+function TabsRoot({ value, defaultValue, onValueChange, className, children }) {
+    const [internal, setInternal] = useState(defaultValue ?? "");
+    const current = value ?? internal;
+    const setValue = useCallback((next) => {
+        if (value === undefined)
+            setInternal(next);
+        onValueChange?.(next);
+    }, [value, onValueChange]);
+    return (_jsx(TabsContext.Provider, { value: { value: current, setValue }, children: _jsx(View, { className: cn("flex-1", className), children: children }) }));
+}
+function TabsList({ children, className }) {
+    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();
+    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" } })] }));
+}
+function TabsContent({ value, children }) {
+    const { value: active } = useTabs();
+    if (active !== value)
+        return null;
+    return _jsx(View, { className: "flex-1", children: children });
+}
+const Tabs = Object.assign(TabsRoot, {
+    List: TabsList,
+    Trigger: TabsTrigger,
+    Content: TabsContent,
+});
+export default Tabs;
+export { Tabs };