@sincpro/mobile-ui 2.0.1 → 3.0.0

package/dist/Form/Form.Select.js

@@ -1,41 +1,74 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { Host, Picker } from "@expo/ui";
+import { Actions } from "../Actions/index.js";
+import Sheet from "../Dialog/Dialog.Sheet.js";
 import Icon from "../Display/Display.Icon.js";
 import Pressable from "../primitives/Pressable.js";
-import { themeToVars, useTheme } from "../theme/index.js";
+import { relativeLuminance, useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
-import { useSheetTranslation } from "../utils/useSheetTranslation.js";
-import { vars } from "nativewind";
-import { useState } from "react";
-import { Animated, Modal, ScrollView, View } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-function Select({ options, value, onChange, label, placeholder = "Seleccionar…", title, disabled = false, className, testID, showCloseButton = true, }) {
+import { useRef, useState } from "react";
+import { ActivityIndicator, Platform, View } from "react-native";
+function SelectOptions({ options, value, blocked, onSelect, }) {
     const theme = useTheme();
-    const insets = useSafeAreaInsets();
+    if (!options.length) {
+        return _jsx(Typography.Text, { children: "No hay opciones disponibles." });
+    }
+    return (_jsx(View, { className: "gap-2", children: options.map((option, index) => {
+            const selected = option.value === value;
+            return (_jsxs(Pressable, { accessibilityLabel: option.label, accessibilityRole: "radio", accessibilityState: { disabled: blocked, selected }, className: cn("flex-row items-center gap-3 rounded-lg border px-3", selected ? "border-primary bg-primary/10" : "border-border-default"), disabled: blocked, onPress: () => onSelect(option.value), style: { minHeight: 48 }, children: [_jsx(Typography.Text, { className: "flex-1 text-text-primary", children: option.label }), selected ? _jsx(Icon, { color: theme.primary, name: "check", size: 18 }) : null] }, `${index}:${String(option.value)}`));
+        }) }));
+}
+function Select({ options, value, onChange, onBlur, label, placeholder = "Seleccionar…", title, confirmLabel = "Aplicar", disabled = false, readOnly = false, loading = false, error, className, testID, }) {
+    const theme = useTheme();
+    const appearance = relativeLuminance(theme.bg.card) < 0.179 ? "dark" : "light";
+    const saving = useRef(false);
     const [open, setOpen] = useState(false);
-    const selected = options.find((o) => o.value === value) ?? null;
-    const { translateY } = useSheetTranslation(open);
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre la lista de opciones", accessibilityLabel: label
+    const [draftValue, setDraftValue] = useState(null);
+    const [pending, setPending] = useState(false);
+    const [failure, setFailure] = useState();
+    const selected = options.find((option) => option.value === value);
+    const draftIndex = options.findIndex((option) => option.value === draftValue);
+    const blocked = disabled || readOnly || loading || pending;
+    const android = Platform.OS === "android";
+    const close = () => {
+        if (saving.current)
+            return;
+        setOpen(false);
+        onBlur?.();
+    };
+    const commit = async (next) => {
+        if (next === null || blocked || saving.current)
+            return;
+        saving.current = true;
+        setPending(true);
+        setFailure(undefined);
+        try {
+            await onChange(next);
+            setOpen(false);
+            onBlur?.();
+        }
+        catch (cause) {
+            setFailure(cause instanceof Error && cause.message.trim()
+                ? cause.message
+                : "No se pudo aplicar la selección. Vuelve a intentarlo.");
+        }
+        finally {
+            saving.current = false;
+            setPending(false);
+        }
+    };
+    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label ? (_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "bodySmall", children: label })) : null, _jsxs(Pressable, { accessibilityHint: "Abre el selector de opciones", accessibilityLabel: label
                     ? `${label}: ${selected?.label ?? placeholder}`
-                    : (selected?.label ?? placeholder), accessibilityRole: "button", accessibilityState: { disabled, expanded: open }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[48px]", disabled: disabled, onPress: () => setOpen(true), style: { minHeight: 48, minWidth: 48 }, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", selected ? "text-text-primary" : "text-text-tertiary"), style: { paddingVertical: 12 }, children: selected ? selected.label : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: "chevron-down", size: 18 })] }), _jsx(Modal, { animationType: "none", onRequestClose: () => setOpen(false), presentationStyle: "overFullScreen", transparent: true, visible: open, children: _jsxs(View, { className: "flex-1 justify-end", children: [_jsx(View, { accessibilityElementsHidden: true, className: "absolute inset-0 bg-black/50", importantForAccessibility: "no-hide-descendants", onResponderRelease: () => setOpen(false), onStartShouldSetResponder: () => true }), _jsxs(Animated.View, { accessibilityViewIsModal: true, className: "rounded-t-3xl", importantForAccessibility: "yes", onAccessibilityEscape: () => setOpen(false), style: [
-                                vars(themeToVars(theme)),
-                                {
-                                    transform: [{ translateY }],
-                                    maxHeight: "70%",
-                                    backgroundColor: theme.bg.card,
-                                    paddingBottom: insets.bottom + 8,
-                                },
-                            ], children: [_jsx(View, { className: "items-center pt-3 pb-1", children: _jsx(View, { className: "w-10 h-1 rounded-full bg-border-strong" }) }), title || showCloseButton ? (_jsxs(View, { className: "flex-row items-center justify-between px-4", children: [_jsx(Typography.Text, { accessibilityRole: "header", className: "flex-1 text-text-primary py-2", semibold: true, variant: "body", children: title ?? label ?? "Seleccionar" }), showCloseButton ? (_jsx(Pressable, { accessibilityLabel: "Cerrar opciones", onPress: () => setOpen(false), style: {
-                                                minWidth: 48,
-                                                minHeight: 48,
-                                                justifyContent: "center",
-                                                alignItems: "center",
-                                            }, children: _jsx(Typography.Text, { className: "text-text-accent", variant: "bodySmall", children: "Cerrar" }) })) : null] })) : null, _jsx(ScrollView, { children: options.map((option) => {
-                                        const isSelected = option.value === value;
-                                        return (_jsxs(Pressable, { accessibilityRole: "menuitem", accessibilityState: { selected: isSelected }, className: "flex-row items-center justify-between px-4 py-3 border-b border-border-light", onPress: () => {
-                                                onChange(option.value);
-                                                setOpen(false);
-                                            }, style: { minHeight: 48, minWidth: 48 }, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", isSelected ? "text-text-accent font-semibold" : "text-text-primary"), children: option.label }), isSelected ? (_jsx(Icon, { color: theme.text.accent, name: "checkmark", size: 18 })) : null] }, String(option.value)));
-                                    }) })] })] }) })] }));
+                    : (selected?.label ?? placeholder), accessibilityRole: "button", accessibilityState: { disabled: blocked, expanded: open, busy: loading || pending }, className: "flex-row items-center gap-3 rounded-lg border border-input bg-bg-card px-3", disabled: blocked, onPress: () => {
+                    setDraftValue(selected?.value ?? null);
+                    setFailure(undefined);
+                    setOpen(true);
+                }, style: { minHeight: 48, minWidth: 48 }, children: [_jsx(Typography.Text, { className: cn("flex-1", selected ? "text-text-primary" : "text-text-tertiary"), style: { paddingVertical: 12 }, children: selected?.label ?? placeholder }), loading || pending ? (_jsx(ActivityIndicator, { color: theme.primary })) : (_jsx(Icon, { color: theme.icon.secondary, name: "expand", size: 18 }))] }), error ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", className: "text-danger", children: error })) : null, _jsxs(Sheet, { dismissible: !pending, footer: android ? undefined : (_jsx(Actions.Button, { disabled: blocked || draftIndex < 0, loading: pending, onPress: () => void commit(draftValue), title: confirmLabel })), onClose: close, title: title ?? label ?? "Seleccionar", visible: open, children: [open && android ? (_jsx(SelectOptions, { blocked: blocked, onSelect: (next) => void commit(next), options: options, value: value })) : null, open && !android ? (_jsx(Host, { colorScheme: appearance, matchContents: { vertical: true }, seedColor: theme.primary, style: { minHeight: 48 }, children: _jsxs(Picker, { appearance: "wheel", enabled: !blocked && options.length > 0, onValueChange: (index) => {
+                                if (blocked || saving.current)
+                                    return;
+                                setDraftValue(options.find((_, itemIndex) => String(itemIndex) === index)?.value ?? null);
+                                setFailure(undefined);
+                            }, selectedValue: draftIndex < 0 ? "" : String(draftIndex), testID: testID ? `${testID}-picker` : undefined, children: [_jsx(Picker.Item, { label: placeholder, value: "" }), options.map((option, index) => (_jsx(Picker.Item, { label: option.label, value: String(index) }, String(index))))] }) })) : null, open && !android && !options.length ? (_jsx(Typography.Text, { children: "No hay opciones disponibles." })) : null, draftValue !== null && draftIndex < 0 ? (_jsx(Typography.Text, { accessibilityRole: "alert", className: "text-danger", children: "La opci\u00F3n ya no est\u00E1 disponible. Selecciona otra." })) : null, failure ? (_jsx(Typography.Text, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", className: "pt-3 text-danger", selectable: true, children: failure })) : null] })] }));
 }
 export default Select;

package/dist/Form/Form.Slider.d.ts

@@ -7,14 +7,11 @@ export interface SliderProps {
     label?: string;
     formatValue?: (value: number) => string;
     disabled?: boolean;
+    readOnly?: boolean;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
     className?: string;
     testID?: string;
 }
-/**
- * **Tokenized** slider (track in `primary`) on `@react-native-community/slider` — clean,
- * on-brand, consistent across iOS/Android. (The `@expo/ui` Slider was evaluated but its
- * Material style with ticks ignores the tokens → not a case where native wins.)
- * Subpath `Form/Slider`; **optional** peer dep.
- */
-declare function Slider({ value, onChange, min, max, step, label, formatValue, disabled, className, testID, }: SliderProps): import("react").JSX.Element;
+declare function Slider({ value, onChange, min, max, step, label, formatValue, disabled, readOnly, accessibilityLabel, accessibilityHint, className, testID, }: SliderProps): import("react").JSX.Element;
 export default Slider;

package/dist/Form/Form.Slider.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import RNSlider from "@react-native-community/slider";
-import { theme } from "../theme/index.js";
+import NativeSlider from "@expo/ui/community/slider";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
-/**
- * **Tokenized** slider (track in `primary`) on `@react-native-community/slider` — clean,
- * on-brand, consistent across iOS/Android. (The `@expo/ui` Slider was evaluated but its
- * Material style with ticks ignores the tokens → not a case where native wins.)
- * Subpath `Form/Slider`; **optional** peer dep.
- */
-function Slider({ value, onChange, min = 0, max = 100, step = 1, label, formatValue, disabled = false, className, testID, }) {
-    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label || formatValue ? (_jsxs(View, { className: "flex-row items-center justify-between", children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, formatValue ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: formatValue(value) })) : null] })) : null, _jsx(RNSlider, { disabled: disabled, maximumTrackTintColor: theme.bg.muted, maximumValue: max, minimumTrackTintColor: theme.primary, minimumValue: min, onValueChange: onChange, step: step, thumbTintColor: theme.primary, value: value })] }));
+function Slider({ value, onChange, min = 0, max = 100, step = 1, label, formatValue, disabled = false, readOnly = false, accessibilityLabel, accessibilityHint, className, testID, }) {
+    const theme = useTheme();
+    const blocked = disabled || readOnly;
+    return (_jsxs(View, { className: cn("gap-1", className), testID: testID, children: [label || formatValue ? (_jsxs(View, { className: "flex-row items-center justify-between", children: [label ? (_jsx(Typography.Text, { className: "font-medium text-text-primary", variant: "bodySmall", children: label })) : null, formatValue ? (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: formatValue(value) })) : null] })) : null, _jsx(NativeSlider, { accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel ?? label ?? "Valor", disabled: blocked, maximumTrackTintColor: theme.container.primary, maximumValue: max, minimumTrackTintColor: theme.primary, minimumValue: min, onValueChange: (next) => {
+                    if (blocked)
+                        return;
+                    const snapped = step > 0 ? min + Math.round((next - min) / step) * step : next;
+                    onChange(Math.min(max, Math.max(min, snapped)));
+                }, step: step, style: { minHeight: 48 }, testID: testID ? `${testID}-slider` : undefined, thumbTintColor: theme.primary, value: value })] }));
 }
 export default Slider;

package/dist/Form/Form.Switch.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { cn } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { Switch as RNSwitch, View } from "react-native";
 function Switch({ value, onValueChange, label, disabled = false, className, testID, }) {
+    const theme = useTheme();
     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 })] }));
 }
 export default Switch;

package/dist/Form/index.d.ts

@@ -1,16 +1,13 @@
 import Checkbox from "./Form.Checkbox.js";
 import ControlledCheckbox from "./Form.ControlledCheckbox.js";
-import ControlledDropdown, { type DropdownOption } from "./Form.ControlledDropdown.js";
+import ControlledDropdown from "./Form.ControlledDropdown.js";
 import ControlledInput from "./Form.ControlledInput.js";
 import ControlledMonetaryInput from "./Form.ControlledMonetaryInput.js";
 import ControlledRadioButton from "./Form.ControlledRadioButton.js";
 import DatePicker from "./Form.DatePicker.js";
 import Dropdown from "./Form.Dropdown.js";
 import ErrorSummary from "./Form.ErrorSummary.js";
-import FAB from "./Form.FAB.js";
-import { FilterButtonGroup } from "./Form.FilterButton.js";
 import FractionalQuantityInput from "./Form.FractionalQuantityInput.js";
-import IconButton from "./Form.IconButton.js";
 import Input from "./Form.Input.js";
 import KeyboardForm from "./Form.KeyboardForm.js";
 import KeyboardToolbar from "./Form.KeyboardToolbar.js";
@@ -18,7 +15,6 @@ import MonetaryInput from "./Form.MonetaryInput.js";
 import PinInput from "./Form.PinInput.js";
 import QuantitySelector from "./Form.QuantitySelector.js";
 import RadioButton from "./Form.RadioButton.js";
-import SearchBar from "./Form.SearchBar.js";
 import Select from "./Form.Select.js";
 import Slider from "./Form.Slider.js";
 import Switch from "./Form.Switch.js";
@@ -29,10 +25,6 @@ export declare const Form: {
     KeyboardForm: typeof KeyboardForm;
     KeyboardToolbar: typeof KeyboardToolbar;
     ErrorSummary: typeof ErrorSummary;
-    Button: import("react").FC<import("./Form.Button.js").ButtonProps> & {
-        Icon: import("react").FC<import("./Form.Button.js").ButtonIconProps>;
-    };
-    IconButton: typeof IconButton;
     PasswordInput: import("react").FC<import("./Form.PasswordInput.js").PasswordFieldProps>;
     QuantitySelector: typeof QuantitySelector;
     FractionalQuantityInput: typeof FractionalQuantityInput;
@@ -43,8 +35,6 @@ export declare const Form: {
     PinInput: typeof PinInput;
     Slider: typeof Slider;
     DatePicker: typeof DatePicker;
-    FAB: typeof FAB;
-    SearchBar: typeof SearchBar;
     Dropdown: typeof Dropdown;
     MonetaryInput: typeof MonetaryInput;
     ControlledInput: typeof ControlledInput;
@@ -52,11 +42,13 @@ export declare const Form: {
     ControlledCheckbox: typeof ControlledCheckbox;
     ControlledDropdown: typeof ControlledDropdown;
     ControlledMonetaryInput: typeof ControlledMonetaryInput;
-    FilterButton: import("react").FC<import("./Form.FilterButton.js").FilterButtonProps>;
-    FilterButtonGroup: typeof FilterButtonGroup;
 };
-export { type DropdownOption };
+export type { ControlledDropdownProps } from "./Form.ControlledDropdown.js";
+export type { DatePickerProps } from "./Form.DatePicker.js";
+export type { DropdownButtonProps, DropdownOption, } from "./Form.Dropdown.js";
 export type { ErrorSummaryItem, ErrorSummaryProps, } from "./Form.ErrorSummary.js";
 export type { KeyboardFormProps } from "./Form.KeyboardForm.js";
 export type { KeyboardToolbarAction, KeyboardToolbarProps, } from "./Form.KeyboardToolbar.js";
+export type { SelectOption, SelectProps } from "./Form.Select.js";
+export type { SliderProps } from "./Form.Slider.js";
 export default Form;

package/dist/Form/index.js

@@ -1,4 +1,3 @@
-import ButtonWithIcon from "./Form.Button.js";
 import Checkbox from "./Form.Checkbox.js";
 import ControlledCheckbox from "./Form.ControlledCheckbox.js";
 import ControlledDropdown from "./Form.ControlledDropdown.js";
@@ -8,10 +7,7 @@ import ControlledRadioButton from "./Form.ControlledRadioButton.js";
 import DatePicker from "./Form.DatePicker.js";
 import Dropdown from "./Form.Dropdown.js";
 import ErrorSummary from "./Form.ErrorSummary.js";
-import FAB from "./Form.FAB.js";
-import { FilterButton, FilterButtonGroup } from "./Form.FilterButton.js";
 import FractionalQuantityInput from "./Form.FractionalQuantityInput.js";
-import IconButton from "./Form.IconButton.js";
 import Input from "./Form.Input.js";
 import InputField from "./Form.InputField.js";
 import KeyboardForm from "./Form.KeyboardForm.js";
@@ -21,7 +17,6 @@ import PasswordInput from "./Form.PasswordInput.js";
 import PinInput from "./Form.PinInput.js";
 import QuantitySelector from "./Form.QuantitySelector.js";
 import RadioButton from "./Form.RadioButton.js";
-import SearchBar from "./Form.SearchBar.js";
 import Select from "./Form.Select.js";
 import Slider from "./Form.Slider.js";
 import Switch from "./Form.Switch.js";
@@ -33,8 +28,6 @@ export const Form = {
     KeyboardForm,
     KeyboardToolbar,
     ErrorSummary,
-    Button: ButtonWithIcon,
-    IconButton,
     PasswordInput,
     QuantitySelector,
     FractionalQuantityInput,
@@ -45,8 +38,6 @@ export const Form = {
     PinInput,
     Slider,
     DatePicker,
-    FAB,
-    SearchBar,
     Dropdown,
     MonetaryInput,
     ControlledInput,
@@ -54,7 +45,5 @@ export const Form = {
     ControlledCheckbox,
     ControlledDropdown,
     ControlledMonetaryInput,
-    FilterButton,
-    FilterButtonGroup,
 };
 export default Form;

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

@@ -1,10 +1,11 @@
+import type { IconName } from "../Display/index.js";
 import { type GradientPreset } from "../Display/Display.GradientSurface.js";
 import { type PatternKind } from "../Display/Display.Pattern.js";
 import type { LinearGradientPoint } from "expo-linear-gradient";
 import type { ReactNode } from "react";
 export interface AppBarActionProps {
     /** Ionicon name. Optional when `label` is set (text-only CTA). */
-    icon?: string;
+    icon?: IconName;
     /** Text label → renders a pill CTA ("Editar", "Nuevo", "Guardar") instead of an icon circle. */
     label?: string;
     onPress: () => void;

package/dist/Navigation/Navigation.AppBar.js

@@ -50,7 +50,7 @@ function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone =
             borderRadius: 12,
             backgroundColor: bg,
             ...(showBorder ? { borderWidth: 1, borderColor: theme.border.light } : null),
-        }, testID: testID, children: [_jsx(Icon, { color: iconColor, name: icon ?? "ellipse-outline", 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] }));
+        }, testID: testID, children: [_jsx(Icon, { color: iconColor, name: icon ?? "circle", 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
@@ -108,7 +108,7 @@ function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant
                 ? { borderBottomLeftRadius: 24, borderBottomRightRadius: 24, overflow: "hidden" }
                 : null),
             ...(showShadow ? theme.shadow.md : null),
-        }, testID: testID, children: [hasBackground ? (_jsx(GradientSurface, { colors: background.colors, end: background.end, padding: "none", preset: background.surface ?? "warm", radius: "none", start: background.start, style: StyleSheet.absoluteFill })) : gradient ? (_jsx(GradientSurface, { colors: theme.gradient.accent, padding: "none", radius: "none", style: StyleSheet.absoluteFill })) : null, background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, showTopBar ? (_jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[56px]", children: [_jsxs(View, { className: "flex-row items-center gap-2", style: { minWidth: 38 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading] }), _jsxs(View, { className: cn("flex-1", centered && "items-center"), children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: colored ? "" : "text-text-primary", semibold: true, style: titleStyle, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", style: subtitleStyle, variant: "caption", children: subtitle })) : null] }), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] })) : null, large && title ? (_jsxs(View, { className: cn("flex-row px-4 pb-3", largeHasNav ? "items-center gap-2" : ""), style: { paddingTop: topSpacing != null ? topSpacing : 8 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading, accentBar && !largeHasNav ? (_jsx(View, { style: {
+        }, testID: testID, children: [hasBackground ? (_jsx(GradientSurface, { colors: background.colors, end: background.end, padding: "none", preset: background.surface ?? "warm", radius: "none", start: background.start, style: StyleSheet.absoluteFill })) : gradient ? (_jsx(GradientSurface, { colors: theme.gradient.accent, padding: "none", radius: "none", style: StyleSheet.absoluteFill })) : null, background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, showTopBar ? (_jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[56px]", children: [_jsxs(View, { className: "flex-row items-center gap-2", style: { minWidth: 38 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading] }), _jsxs(View, { className: cn("flex-1", centered && "items-center"), children: [title ? (_jsx(Typography.Text, { accessibilityRole: "header", className: colored ? "" : "text-text-primary", semibold: true, style: titleStyle, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", style: subtitleStyle, variant: "caption", children: subtitle })) : null] }), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] })) : null, large && title ? (_jsxs(View, { className: cn("flex-row px-4 pb-3", largeHasNav ? "items-center gap-2" : ""), style: { paddingTop: topSpacing != null ? topSpacing : 8 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading, accentBar && !largeHasNav ? (_jsx(View, { style: {
                             width: 4,
                             marginRight: 10,
                             marginVertical: 2,

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

@@ -1,17 +1,13 @@
-import type { CustomIconProps } from "../icons/props.js";
-import type { ComponentType } from "react";
+import type { IconName } from "../Display/index.js";
 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>;
+    icon?: IconName;
+    activeIcon?: IconName;
     badge?: string | number;
 }
 export interface BottomNavCenterAction {
-    icon: string;
+    icon: IconName;
     onPress: () => void;
     accessibilityLabel?: string;
 }

package/dist/Navigation/Navigation.BottomNav.js

@@ -44,8 +44,8 @@ function BottomNav({ items, value, onChange, showLabels = true, centerAction, sa
             ...(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 name = active ? (item.activeIcon ?? item.icon) : item.icon;
+        return (_jsxs(View, { children: [name ? _jsx(Icon, { color: color, name: name, size: 24 }) : null, 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;

package/dist/Navigation/Navigation.CollapsingHeader.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import AppBar from "./Navigation.AppBar.js";
-import { theme } from "../theme/index.js";
+import { useTheme } from "../theme/index.js";
 import { Typography } from "../Typography/index.js";
 import { Animated, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -21,6 +21,7 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
  * ```
  */
 function CollapsingHeader({ title, subtitle, scrollY, onBack, actions, largeHeight = subtitle ? 72 : 56, safeArea = true, testID, }) {
+    const theme = useTheme();
     const insets = useSafeAreaInsets();
     const largeOpacity = scrollY.interpolate({
         inputRange: [0, largeHeight * 0.6],
@@ -42,6 +43,6 @@ function CollapsingHeader({ title, subtitle, scrollY, onBack, actions, largeHeig
         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" })] }));
+    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: "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.Menu.d.ts

@@ -1,21 +1,26 @@
+import { type IconName } from "../Display/icon-map.js";
 import { type ReactNode } from "react";
-export interface MenuItem {
+import { type StyleProp, type ViewStyle } from "react-native";
+export type MenuItem = {
     label: string;
-    icon?: string;
+    icon?: IconName;
     destructive?: boolean;
     disabled?: boolean;
-    onPress: () => void;
-}
-export interface MenuSeparator {
+    onPress: () => void | Promise<void>;
+};
+export type MenuSeparator = {
     separator: true;
-}
+};
 export type MenuEntry = MenuItem | MenuSeparator;
-export interface MenuProps {
-    items: MenuEntry[];
+export type MenuProps = {
+    items: readonly MenuEntry[];
     trigger?: ReactNode;
-    menuWidth?: number;
+    title?: string;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
     testID?: string;
-}
-declare function Menu({ items, trigger, menuWidth, testID }: MenuProps): import("react").JSX.Element;
+};
+declare function Menu({ items, trigger, title, disabled, accessibilityLabel, style, testID, }: MenuProps): import("react").JSX.Element;
 export default Menu;
 export { Menu };

package/dist/Navigation/Navigation.Menu.js

@@ -1,52 +1,107 @@
-import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import { jsx as _jsx } from "nativewind/jsx-runtime";
+import { MenuView } from "@expo/ui/community/menu";
 import Icon from "../Display/Display.Icon.js";
-import Pressable from "../primitives/Pressable.js";
-import { useTheme } from "../theme/index.js";
-import { cn } from "../theme/tw.js";
-import { Typography } from "../Typography/index.js";
-import { useReducedMotion } from "../utils/useReducedMotion.js";
-import { cloneElement, useRef, useState } from "react";
-import { Dimensions, Modal, Pressable as RNPressable, View, } from "react-native";
-function Menu({ items, trigger, menuWidth = 220, testID }) {
+import { ICON_MAP } from "../Display/icon-map.js";
+import { relativeLuminance, useTheme } from "../theme/index.js";
+import { unstable_getMaterialSymbolSourceAsync } from "expo-symbols";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ActivityIndicator, Alert, Platform, View, } from "react-native";
+function Menu({ items, trigger, title, disabled = false, accessibilityLabel = "Más opciones", style, testID, }) {
     const theme = useTheme();
-    const reducedMotion = useReducedMotion();
-    const triggerRef = useRef(null);
-    const [anchor, setAnchor] = useState(null);
-    const open = () => {
-        triggerRef.current?.measureInWindow((x, y, width, height) => {
-            setAnchor({ x, y, width, height });
+    const running = useRef(false);
+    const [pending, setPending] = useState(false);
+    const blocked = disabled || pending || !items.some((entry) => !("separator" in entry));
+    const [sources, setSources] = useState(() => new Map());
+    const requests = useMemo(() => items.flatMap((entry) => "separator" in entry || !entry.icon
+        ? []
+        : [
+            {
+                icon: entry.icon,
+                color: entry.destructive ? theme.danger : theme.icon.secondary,
+            },
+        ]), [items, theme.danger, theme.icon.secondary]);
+    useEffect(() => {
+        if (Platform.OS !== "android" || !requests.length)
+            return;
+        let active = true;
+        void Promise.all(requests.map(async ({ icon, color }) => ({
+            key: `${icon}:${color}`,
+            source: await unstable_getMaterialSymbolSourceAsync(ICON_MAP[icon].md, 24, color),
+        }))).then((results) => {
+            if (!active)
+                return;
+            const next = new Map();
+            for (const { key, source } of results) {
+                if (source)
+                    next.set(key, source);
+            }
+            setSources(next);
+        }, (cause) => {
+            console.error("[Navigation.Menu] Could not render native icons", cause);
         });
-    };
-    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: [trigger ? (
-            // eslint-disable-next-line react-hooks/refs
-            cloneElement(trigger, { onPress: open })) : (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", accessibilityRole: "button", onPress: open, style: {
+        return () => {
+            active = false;
+        };
+    }, [requests]);
+    const groups = [[]];
+    items.forEach((entry, index) => {
+        if ("separator" in entry) {
+            if (groups[groups.length - 1].length)
+                groups.push([]);
+            return;
+        }
+        const color = entry.disabled
+            ? theme.text.disabled
+            : entry.destructive
+                ? theme.danger
+                : theme.text.primary;
+        const imageColor = entry.destructive ? theme.danger : theme.icon.secondary;
+        groups[groups.length - 1].push({
+            id: String(index),
+            title: entry.label,
+            titleColor: color,
+            image: entry.icon
+                ? Platform.OS === "ios"
+                    ? ICON_MAP[entry.icon].sf
+                    : sources.get(`${entry.icon}:${imageColor}`)
+                : undefined,
+            imageColor,
+            attributes: { disabled: blocked || entry.disabled, destructive: entry.destructive },
+        });
+    });
+    const sections = groups.filter((group) => group.length > 0);
+    const actions = sections.length > 1
+        ? sections.map((subactions, index) => ({
+            id: `section-${index}`,
+            title: "",
+            displayInline: true,
+            subactions,
+        }))
+        : (sections[0] ?? []);
+    return (_jsx(View, { pointerEvents: blocked ? "none" : "auto", style: style, testID: testID, children: _jsx(MenuView, { actions: actions, colorScheme: relativeLuminance(theme.bg.card) < 0.179 ? "dark" : "light", onPressAction: ({ nativeEvent }) => {
+                const entry = items.find((_, index) => String(index) === nativeEvent.event);
+                if (!entry || "separator" in entry || blocked || entry.disabled || running.current)
+                    return;
+                running.current = true;
+                setPending(true);
+                void Promise.resolve()
+                    .then(() => entry.onPress())
+                    .catch((cause) => {
+                    Alert.alert("No se pudo completar la acción", cause instanceof Error && cause.message.trim()
+                        ? cause.message
+                        : "Vuelve a intentarlo.");
+                })
+                    .finally(() => {
+                    running.current = false;
+                    setPending(false);
+                });
+            }, style: { minWidth: 48, minHeight: 48 }, testID: testID ? `${testID}-native-menu` : undefined, title: title, children: _jsx(View, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", accessibilityState: { disabled: blocked, busy: pending }, accessible: true, pointerEvents: "none", style: {
                     minWidth: 48,
                     minHeight: 48,
                     alignItems: "center",
                     justifyContent: "center",
-                }, children: _jsx(Icon, { color: theme.icon.secondary, name: "ellipsis-vertical", size: 22 }) })), _jsx(Modal, { animationType: reducedMotion ? "none" : "fade", onRequestClose: close, presentationStyle: "overFullScreen", transparent: true, visible: anchor !== null, children: _jsx(RNPressable, { onPress: close, style: { flex: 1 }, children: _jsx(View, { accessibilityViewIsModal: true, className: "rounded-lg py-1", onAccessibilityEscape: close, 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, { accessibilityLabel: item.label, accessibilityRole: "menuitem", accessibilityState: { disabled: item.disabled }, className: "flex-row items-center gap-3 px-4 py-3", disabled: item.disabled, onPress: () => {
-                                    close();
-                                    item.onPress();
-                                }, style: { minHeight: 48 }, 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));
-                        }) }) }) })] }));
+                    opacity: blocked ? 0.5 : 1,
+                }, children: pending ? (_jsx(ActivityIndicator, { color: theme.primary })) : ((trigger ?? _jsx(Icon, { color: theme.icon.secondary, name: "more-vertical", size: 22 }))) }) }) }));
 }
 export default Menu;
 export { Menu };

package/dist/Navigation/Navigation.Search.js

@@ -25,10 +25,10 @@ function FilterSheet({ children, activeCount = 0, title = "Filtros", triggerLabe
     const [visible, setVisible] = useState(false);
     const theme = useTheme();
     const countLabel = activeCount > 0 ? `, ${activeCount} activos` : "";
-    return (_jsxs(_Fragment, { children: [_jsxs(Pressable, { accessibilityLabel: `${triggerLabel}${countLabel}`, accessibilityRole: "button", className: "min-h-11 flex-row items-center justify-center gap-2 self-start rounded-full bg-bg-muted px-4", onPress: () => setVisible(true), style: { minHeight: 44 }, testID: testID ? `${testID}-trigger` : undefined, children: [_jsx(Icon, { color: theme.icon.secondary, name: "options-outline", size: 18 }), _jsx(Typography.Text, { className: "text-text-primary", variant: "buttonSmall", children: triggerLabel }), activeCount > 0 ? (_jsx(Typography.Text, { accessibilityLabel: `${activeCount} filtros activos`, className: "text-text-accent", variant: "caption", children: activeCount })) : null] }), _jsx(Sheet, { dismissOnBackdrop: true, footer: _jsxs(View, { className: "flex-row gap-3", children: [onClear ? (_jsx(View, { className: "flex-1", children: _jsx(Button, { onPress: onClear, title: clearLabel, variant: "secondary" }) })) : null, _jsx(View, { className: "flex-1", children: _jsx(Button, { onPress: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Pressable, { accessibilityLabel: `${triggerLabel}${countLabel}`, accessibilityRole: "button", className: "min-h-11 flex-row items-center justify-center gap-2 self-start rounded-full bg-bg-muted px-4", onPress: () => setVisible(true), style: { minHeight: 44 }, testID: testID ? `${testID}-trigger` : undefined, children: [_jsx(Icon, { color: theme.icon.secondary, name: "filter", size: 18 }), _jsx(Typography.Text, { className: "text-text-primary", variant: "buttonSmall", children: triggerLabel }), activeCount > 0 ? (_jsx(Typography.Text, { accessibilityLabel: `${activeCount} filtros activos`, className: "text-text-accent", variant: "caption", children: activeCount })) : null] }), _jsx(Sheet, { footer: _jsxs(View, { className: "flex-row gap-3", children: [onClear ? (_jsx(View, { className: "flex-1", children: _jsx(Button, { onPress: onClear, title: clearLabel, variant: "secondary" }) })) : null, _jsx(View, { className: "flex-1", children: _jsx(Button, { onPress: () => {
                                     onApply();
                                     setVisible(false);
-                                }, title: applyLabel }) })] }), onClose: () => setVisible(false), showCloseButton: true, testID: testID ? `${testID}-sheet` : undefined, title: title, visible: visible, children: children })] }));
+                                }, title: applyLabel }) })] }), onClose: () => setVisible(false), testID: testID ? `${testID}-sheet` : undefined, title: title, visible: visible, children: children })] }));
 }
 function History(props) {
     return _jsx(SearchHistory, { ...props });