@sincpro/mobile-ui 0.2.1 → 0.3.0

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

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+export interface AppBarActionProps {
+    icon: string;
+    onPress: () => void;
+    badge?: string | number;
+    accessibilityLabel?: string;
+    /** `tinted` highlights (primary action); `plain` is the neutral contained default. */
+    tone?: "plain" | "tinted";
+    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;
+export interface AppBarProps {
+    title?: string;
+    subtitle?: string;
+    onBack?: () => void;
+    leading?: ReactNode;
+    actions?: ReactNode;
+    subheader?: ReactNode;
+    variant?: "default" | "large" | "center";
+    border?: boolean;
+    /** Reserves the status-bar space (insets.top). `false` to embed/demo. */
+    safeArea?: boolean;
+    className?: string;
+    testID?: 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, border, safeArea, className, testID, }: AppBarProps): import("react").JSX.Element;
+declare const AppBarWithAction: typeof AppBar & {
+    Action: typeof AppBarAction;
+};
+export default AppBarWithAction;
+export { AppBarWithAction as AppBar };

package/dist/Navigation/Navigation.AppBar.js

@@ -0,0 +1,33 @@
+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 { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+/**
+ * "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] }));
+}
+/**
+ * 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`.
+ */
+function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant = "default", 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 AppBarWithAction = Object.assign(AppBar, { Action: AppBarAction });
+export default AppBarWithAction;
+export { AppBarWithAction as AppBar };

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

@@ -0,0 +1,29 @@
+export interface BottomNavItem {
+    key: string;
+    label?: string;
+    icon: string;
+    activeIcon?: string;
+    badge?: string | number;
+}
+export interface BottomNavCenterAction {
+    icon: string;
+    onPress: () => void;
+    accessibilityLabel?: string;
+}
+export interface BottomNavProps {
+    items: BottomNavItem[];
+    value: string;
+    onChange: (key: string) => void;
+    showLabels?: boolean;
+    centerAction?: BottomNavCenterAction;
+    /** Reserva el espacio inferior (insets.bottom). `false` al embeber en FloatingBar. */
+    safeArea?: boolean;
+    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).
+ */
+declare function BottomNav({ items, value, onChange, showLabels, centerAction, safeArea, className, testID, }: BottomNavProps): import("react").JSX.Element;
+export default BottomNav;

package/dist/Navigation/Navigation.BottomNav.js

@@ -0,0 +1,35 @@
+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 { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+/**
+ * Bottom navigation flat y moderna: superficie tokenizada + hairline superior, activo en
+ * `primary`. `centerAction` agrega un FAB central elevado (estilo apps de delivery/social).
+ */
+function BottomNav({ items, value, onChange, showLabels = true, centerAction, safeArea = true, className, testID, }) {
+    const insets = useSafeAreaInsets();
+    const bottomPad = safeArea ? insets.bottom : 0;
+    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));
+    };
+    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)] }));
+    }
+    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) }));
+}
+export default 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,22 @@
+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 { 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 body = (_jsxs(View, { className: cn("flex-row items-center gap-2 rounded-full bg-bg-muted px-4", className), style: { height: 44 }, children: [_jsx(Icon, { color: theme.icon.tertiary, name: "search", size: 18 }), editable ? (_jsx(TextInput, { autoFocus: autoFocus, className: "flex-1 text-sm text-text-primary", onChangeText: onChangeText, 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,5 @@ interface TabIconProps {
     name?: any;
     className?: string;
 }
-declare function TabIcon({ focused, size, customIcon, type, name, className, }: TabIconProps): import("react/jsx-runtime").JSX.Element;
+declare function TabIcon({ focused, size, customIcon, type, name, className, }: TabIconProps): import("react").JSX.Element;
 export default TabIcon;

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 };

package/dist/Navigation/index.d.ts

@@ -1,11 +1,42 @@
+import BottomNav from "../Navigation/Navigation.BottomNav";
+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 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 declare const Navigation: {
-    Header: ({ title, logo, logoSource, backButton, handleBackButton, className, }: import("../Navigation/Navigation.Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    AppBar: (({ title, subtitle, onBack, leading, actions, subheader, variant, border, safeArea, className, testID, }: import("../Navigation/Navigation.AppBar").AppBarProps) => import("react").JSX.Element) & {
+        Action: ({ icon, onPress, badge, accessibilityLabel, tone, testID, }: import("../Navigation/Navigation.AppBar").AppBarActionProps) => import("react").JSX.Element;
+    };
+    BottomNav: typeof BottomNav;
+    CollapsingHeader: typeof CollapsingHeader;
+    FloatingBar: typeof FloatingBar;
+    SearchBar: typeof SearchBar;
+    Header: ({ title, logo, logoSource, backButton, handleBackButton, className, }: import("../Navigation/Navigation.Header").HeaderProps) => import("react").JSX.Element;
     HeaderToolbar: typeof HeaderToolbar;
     TabItem: import("react").FC<import("../Navigation/Navigation.TabItem").TabIconProps>;
     TabIcon: typeof TabIcon;
     RowItem: typeof RowItem;
+    SegmentedControl: typeof SegmentedControl;
+    Tabs: (({ value, defaultValue, onValueChange, 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;
+        Content: ({ value, children }: {
+            value: string;
+            children: import("react").ReactNode;
+        }) => import("react").JSX.Element | null;
+    };
+    Menu: typeof Menu;
+    Steps: typeof Steps;
 };
 export default Navigation;