@sincpro/mobile-ui 0.7.1 → 1.0.1

package/dist/Form/Form.RadioButton.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Typography } from "../Typography";
+import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
 import { tv } from "tailwind-variants";
 const radioButton = tv({
@@ -12,9 +12,9 @@ const radioButton = tv({
     variants: {
         selected: {
             true: {
-                container: "border-accent bg-accent/10",
-                radioCircle: "border-accent",
-                radioInner: "bg-accent",
+                container: "border-primary bg-primary/10",
+                radioCircle: "border-primary",
+                radioInner: "bg-primary",
                 label: "text-text-primary font-semibold",
             },
             false: {

package/dist/Form/Form.SearchBar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import { theme } from "../theme";
-import { cn, tv } from "../theme/tw";
+import { Display } from "../Display/index.js";
+import { theme } from "../theme/index.js";
+import { cn, tv } from "../theme/tw.js";
 import { useState } from "react";
 import { TextInput, TouchableOpacity, View } from "react-native";
 const Icon = Display.Icon;
@@ -21,6 +21,6 @@ const searchBarContainer = tv({
  */
 function SearchBar({ value, onChangeText, placeholder = "Search", className, }) {
     const [isFocused, setIsFocused] = useState(false);
-    return (_jsxs(View, { className: cn(searchBarContainer({ focused: isFocused }), className), children: [_jsx(View, { className: "mr-1 ml-0.5 items-center justify-center h-full", children: _jsx(Icon, { className: "text-text-tertiary", name: "search", size: 18, type: "ionicons" }) }), _jsx(TextInput, { className: "flex-1 h-full text-sm py-0 px-1.5 text-text-primary", onBlur: () => setIsFocused(false), onChangeText: onChangeText, onFocus: () => setIsFocused(true), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, value: value }), value.length > 0 && (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: "mr-0.5 ml-1 items-center justify-center h-full px-1", onPress: () => onChangeText(""), children: _jsx(Icon, { className: "text-text-tertiary", name: "x", size: 18, type: "feather" }) }))] }));
+    return (_jsxs(View, { className: cn(searchBarContainer({ focused: isFocused }), className), children: [_jsx(View, { className: "mr-1 ml-0.5 items-center justify-center h-full", children: _jsx(Icon, { className: "text-text-tertiary", name: "search", size: 18, type: "ionicons" }) }), _jsx(TextInput, { className: "flex-1 h-full text-sm py-0 px-1.5 text-text-primary", onBlur: () => setIsFocused(false), onChangeText: onChangeText, onFocus: () => setIsFocused(true), placeholder: placeholder, placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, underlineColorAndroid: "transparent", value: value }), value.length > 0 && (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: "mr-0.5 ml-1 items-center justify-center h-full px-1", onPress: () => onChangeText(""), children: _jsx(Icon, { className: "text-text-tertiary", name: "x", size: 18, type: "feather" }) }))] }));
 }
 export default SearchBar;

package/dist/Form/Form.Select.js

@@ -1,26 +1,41 @@
 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 { Modal, Pressable as RNPressable, ScrollView, View } from "react-native";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
+import { useEffect, useRef, useState } from "react";
+import { Animated, Modal, Pressable as RNPressable, 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, }) {
     const insets = useSafeAreaInsets();
     const [open, setOpen] = useState(false);
     const selected = options.find((o) => o.value === value) ?? null;
-    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 ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[44px]", disabled: disabled, onPress: () => setOpen(true), children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", selected ? "text-text-primary" : "text-text-tertiary"), numberOfLines: 1, children: selected ? selected.label : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: "chevron-down", size: 18 })] }), _jsx(Modal, { animationType: "slide", onRequestClose: () => setOpen(false), transparent: true, visible: open, children: _jsx(RNPressable, { className: "flex-1 justify-end bg-black/50", onPress: () => setOpen(false), children: _jsxs(RNPressable, { className: "rounded-t-3xl", style: {
-                            backgroundColor: theme.bg.card,
-                            paddingBottom: insets.bottom + 8,
-                            maxHeight: "70%",
-                        }, children: [_jsx(View, { className: "items-center pt-3 pb-1", children: _jsx(View, { className: "w-10 h-1 rounded-full bg-border-strong" }) }), title ? (_jsx(Typography.Text, { className: "text-text-primary px-4 py-2", semibold: true, variant: "body", children: title })) : 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);
-                                        }, children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", isSelected ? "text-primary font-semibold" : "text-text-primary"), children: option.label }), isSelected ? (_jsx(Icon, { color: theme.primary, name: "checkmark", size: 18 })) : null] }, String(option.value)));
-                                }) })] }) }) })] }));
+    // eslint-disable-next-line react-hooks/refs
+    const translateY = useRef(new Animated.Value(800)).current;
+    useEffect(() => {
+        if (open) {
+            Animated.spring(translateY, {
+                toValue: 0,
+                useNativeDriver: true,
+                damping: 20,
+                stiffness: 300,
+            }).start();
+        }
+        else {
+            translateY.setValue(800);
+        }
+    }, [open, translateY]);
+    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 ?? placeholder, accessibilityRole: "button", accessibilityState: { disabled }, className: "flex-row items-center justify-between rounded-lg border border-input bg-bg-card px-3 min-h-[44px]", disabled: disabled, onPress: () => setOpen(true), children: [_jsx(Typography.Text, { className: cn("flex-1 text-sm", selected ? "text-text-primary" : "text-text-tertiary"), numberOfLines: 1, 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: _jsx(RNPressable, { className: "flex-1 justify-end bg-black/50", onPress: () => setOpen(false), children: _jsx(Animated.View, { style: { transform: [{ translateY }] }, children: _jsxs(RNPressable, { className: "rounded-t-3xl", style: {
+                                backgroundColor: theme.bg.card,
+                                paddingBottom: insets.bottom + 8,
+                                maxHeight: "70%",
+                            }, children: [_jsx(View, { className: "items-center pt-3 pb-1", children: _jsx(View, { className: "w-10 h-1 rounded-full bg-border-strong" }) }), title ? (_jsx(Typography.Text, { className: "text-text-primary px-4 py-2", semibold: true, variant: "body", children: title })) : 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);
+                                            }, 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)));
+                                    }) })] }) }) }) })] }));
 }
 export default Select;

package/dist/Form/Form.Slider.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 import RNSlider from "@react-native-community/slider";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import { theme } 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,

package/dist/Form/Form.Switch.js

@@ -1,9 +1,9 @@
 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 { theme } 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, }) {
-    return (_jsxs(View, { className: cn("flex-row items-center justify-between gap-3", className), children: [label ? (_jsx(Typography.Text, { className: cn("flex-1 text-text-primary", disabled && "text-text-disabled"), children: label })) : null, _jsx(RNSwitch, { accessibilityLabel: label, accessibilityRole: "switch", accessibilityState: { checked: value, disabled }, disabled: disabled, ios_backgroundColor: theme.bg.muted, onValueChange: onValueChange, testID: testID, thumbColor: theme.bg.card, trackColor: { false: theme.bg.muted, true: theme.accent }, value: value })] }));
+    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/Form.TextInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
 import { TextInput } from "react-native";
 const TextInputF = ({ className, ...props }) => {
-    return (_jsx(TextInput, { ...props, className: cn("border border-input rounded-md h-11 px-3 py-2 text-text-primary", className), placeholderTextColor: theme.text.tertiary, style: props.style }));
+    return (_jsx(TextInput, { ...props, className: cn("border border-input rounded-md h-11 px-3 py-2 text-text-primary", className), placeholderTextColor: theme.text.tertiary, selectionColor: theme.primary, style: props.style, underlineColorAndroid: "transparent" }));
 };
 export default TextInputF;

package/dist/Form/index.d.ts

@@ -1,33 +1,33 @@
-import Checkbox from "../Form/Form.Checkbox";
-import ControlledCheckbox from "../Form/Form.ControlledCheckbox";
-import ControlledDropdown, { type DropdownOption } from "../Form/Form.ControlledDropdown";
-import ControlledInput from "../Form/Form.ControlledInput";
-import ControlledMonetaryInput from "../Form/Form.ControlledMonetaryInput";
-import ControlledRadioButton from "../Form/Form.ControlledRadioButton";
-import DatePicker from "../Form/Form.DatePicker";
-import Dropdown from "../Form/Form.Dropdown";
-import FAB from "../Form/Form.FAB";
-import { FilterButtonGroup } from "../Form/Form.FilterButton";
-import FractionalQuantityInput from "../Form/Form.FractionalQuantityInput";
-import IconButton from "../Form/Form.IconButton";
-import Input from "../Form/Form.Input";
-import MonetaryInput from "../Form/Form.MonetaryInput";
-import PinInput from "../Form/Form.PinInput";
-import QuantitySelector from "../Form/Form.QuantitySelector";
-import RadioButton from "../Form/Form.RadioButton";
-import SearchBar from "../Form/Form.SearchBar";
-import Select from "../Form/Form.Select";
-import Slider from "../Form/Form.Slider";
-import Switch from "../Form/Form.Switch";
+import Checkbox from "./Form.Checkbox.js";
+import ControlledCheckbox from "./Form.ControlledCheckbox.js";
+import ControlledDropdown, { type DropdownOption } 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 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 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";
 export declare const Form: {
-    TextInput: import("react").FC<import("../Form/Form.TextInput").TextInputFProps>;
+    TextInput: import("react").FC<import("./Form.TextInput.js").TextInputFProps>;
     Input: typeof Input;
-    InputField: import("react").FC<import("../Form/Form.InputField").InputFieldProps>;
-    Button: import("react").FC<import("../Form/Form.Button").ButtonProps> & {
-        Icon: import("react").FC<import("../Form/Form.Button").ButtonIconProps>;
+    InputField: import("react").FC<import("./Form.InputField.js").InputFieldProps>;
+    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/Form.PasswordInput").PasswordFieldProps>;
+    PasswordInput: import("react").FC<import("./Form.PasswordInput.js").PasswordFieldProps>;
     QuantitySelector: typeof QuantitySelector;
     FractionalQuantityInput: typeof FractionalQuantityInput;
     RadioButton: typeof RadioButton;
@@ -46,7 +46,7 @@ export declare const Form: {
     ControlledCheckbox: typeof ControlledCheckbox;
     ControlledDropdown: typeof ControlledDropdown;
     ControlledMonetaryInput: typeof ControlledMonetaryInput;
-    FilterButton: import("react").FC<import("../Form/Form.FilterButton").FilterButtonProps>;
+    FilterButton: import("react").FC<import("./Form.FilterButton.js").FilterButtonProps>;
     FilterButtonGroup: typeof FilterButtonGroup;
 };
 export { type DropdownOption };

package/dist/Form/index.js

@@ -1,28 +1,28 @@
-import ButtonWithIcon from "../Form/Form.Button";
-import Checkbox from "../Form/Form.Checkbox";
-import ControlledCheckbox from "../Form/Form.ControlledCheckbox";
-import ControlledDropdown from "../Form/Form.ControlledDropdown";
-import ControlledInput from "../Form/Form.ControlledInput";
-import ControlledMonetaryInput from "../Form/Form.ControlledMonetaryInput";
-import ControlledRadioButton from "../Form/Form.ControlledRadioButton";
-import DatePicker from "../Form/Form.DatePicker";
-import Dropdown from "../Form/Form.Dropdown";
-import FAB from "../Form/Form.FAB";
-import { FilterButton, FilterButtonGroup } from "../Form/Form.FilterButton";
-import FractionalQuantityInput from "../Form/Form.FractionalQuantityInput";
-import IconButton from "../Form/Form.IconButton";
-import Input from "../Form/Form.Input";
-import InputField from "../Form/Form.InputField";
-import MonetaryInput from "../Form/Form.MonetaryInput";
-import PasswordInput from "../Form/Form.PasswordInput";
-import PinInput from "../Form/Form.PinInput";
-import QuantitySelector from "../Form/Form.QuantitySelector";
-import RadioButton from "../Form/Form.RadioButton";
-import SearchBar from "../Form/Form.SearchBar";
-import Select from "../Form/Form.Select";
-import Slider from "../Form/Form.Slider";
-import Switch from "../Form/Form.Switch";
-import TextInput from "../Form/Form.TextInput";
+import ButtonWithIcon from "./Form.Button.js";
+import Checkbox from "./Form.Checkbox.js";
+import ControlledCheckbox from "./Form.ControlledCheckbox.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 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 MonetaryInput from "./Form.MonetaryInput.js";
+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";
+import TextInput from "./Form.TextInput.js";
 export const Form = {
     TextInput,
     Input,

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

@@ -1,5 +1,5 @@
-import { type GradientPreset } from "../Display/Display.GradientSurface";
-import { type PatternKind } from "../Display/Display.Pattern";
+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 {
@@ -57,7 +57,7 @@ export interface AppBarProps {
      * (no need to also set `tone="dark"`). Overrides the solid `tone` background.
      *
      * Preset: `background={{ surface: "mesh" }}`
-     * Custom: `background={{ colors: ["#0B1410", "#10B981", "#1E1B8A"] }}`
+     * Custom: `background={{ colors: ["#4A3100", "#C9A84C", "#8B6914", "#F0D060"] }}`
      * With texture: `background={{ surface: "night-green", pattern: "dots" }}`
      */
     background?: AppBarBackground;
@@ -78,7 +78,8 @@ export interface AppBarProps {
  * Pass as the `background` prop — white text/icons are activated automatically.
  */
 export interface AppBarBackground {
-    /** Named gradient preset: `"mesh"` (dark aurora), `"night-green"`, `"neon-teal"`, `"emerald"`. */
+    /** Named gradient preset: `"warm"` (default), or `"brand"` (themeable). Legacy
+     * `"mesh" | "neon-teal" | "night-green" | "emerald"` presets still work but are deprecated. */
     surface?: GradientPreset;
     /** Custom color stops — overrides `surface`. Minimum 2 colors. */
     colors?: readonly [string, string, ...string[]];

package/dist/Navigation/Navigation.AppBar.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import GradientSurface from "../Display/Display.GradientSurface";
-import Icon from "../Display/Display.Icon";
-import { Pattern } from "../Display/Display.Pattern";
-import Pressable from "../primitives/Pressable";
-import { useTheme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import GradientSurface from "../Display/Display.GradientSurface.js";
+import Icon from "../Display/Display.Icon.js";
+import { Pattern } from "../Display/Display.Pattern.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 { StyleSheet, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /** Fallback for the `tone="dark"` hero surface when the theme has no `bg.inverse` token. */
@@ -22,7 +22,7 @@ function AppBarAction({ icon, label, onPress, badge, accessibilityLabel, tone =
         : onDark
             ? "rgba(255,255,255,0.14)"
             : tone === "tinted"
-                ? theme.accent // solid brand-green squircle (FAB-style)
+                ? theme.accent // solid brand-gold squircle (FAB-style)
                 : theme.bg.card;
     const iconColor = tone === "tinted"
         ? theme.text.onAccent // dark token on green surface
@@ -71,7 +71,7 @@ function AppBar({ title, subtitle, onBack, leading, actions, subheader, variant
     const showTopBar = !large;
     // Colored = any rich surface. `background` alone activates colored mode (white text/icons).
     const colored = dark || gradient || hasBackground;
-    // gradient (neon green) → dark text via onAccent. background → textColor prop (default white, since
+    // gradient (brand gold) → dark text via onAccent. background → textColor prop (default white, since
     // gradient surfaces are dark). dark tone → white always. text.inverse is NOT used here: it flips to
     // near-black in dark-mode themes (semantic: "text on light surfaces"), wrong for dark gradient AppBars.
     const onColoredText = gradient && !hasBackground
@@ -106,7 +106,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 ?? "neon-teal", radius: "none", start: background.start, style: StyleSheet.absoluteFill })) : gradient ? (_jsx(GradientSurface, { colors: theme.gradient.accent, padding: "none", radius: "none", style: StyleSheet.absoluteFill })) : null, background?.pattern ? (_jsx(Pattern, { color: background.patternColor ?? "#FFFFFF", kind: background.pattern, opacity: background.patternOpacity ?? 0.18 })) : null, showTopBar ? (_jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[56px]", children: [_jsxs(View, { className: "flex-row items-center gap-2", style: { minWidth: 38 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading] }), _jsxs(View, { className: cn("flex-1", centered && "items-center"), children: [title ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-primary", numberOfLines: 1, semibold: true, style: titleStyle, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", numberOfLines: 1, style: subtitleStyle, variant: "caption", children: subtitle })) : null] }), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] })) : null, large && title ? (_jsxs(View, { className: cn("flex-row px-4 pb-3", largeHasNav ? "items-center gap-2" : ""), style: { paddingTop: topSpacing != null ? topSpacing : 8 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading, accentBar && !largeHasNav ? (_jsx(View, { style: {
+        }, 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, { className: colored ? "" : "text-text-primary", numberOfLines: 1, semibold: true, style: titleStyle, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", numberOfLines: 1, style: subtitleStyle, variant: "caption", children: subtitle })) : null] }), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] })) : null, large && title ? (_jsxs(View, { className: cn("flex-row px-4 pb-3", largeHasNav ? "items-center gap-2" : ""), style: { paddingTop: topSpacing != null ? topSpacing : 8 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark || gradient || hasBackground, onPress: onBack })) : null, leading, accentBar && !largeHasNav ? (_jsx(View, { style: {
                             width: 4,
                             marginRight: 10,
                             marginVertical: 2,

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

@@ -1,4 +1,4 @@
-import type { CustomIconProps } from "../icons/props";
+import type { CustomIconProps } from "../icons/props.js";
 import type { ComponentType } from "react";
 export interface BottomNavItem {
     key: string;

package/dist/Navigation/Navigation.BottomNav.js

@@ -1,12 +1,16 @@
 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 { useTheme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { relativeLuminance, useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-const DARK_SURFACE = "#15181B";
+/** Forced-dark chrome: prefer `bg.inverse` when it is actually dark, else `bg.card`. */
+function resolveDarkSurface(theme) {
+    const candidate = theme.bg.inverse ?? theme.bg.card;
+    return relativeLuminance(candidate) < 0.25 ? candidate : theme.bg.card;
+}
 /**
  * The single bottom-navigation component. Extensible by props, not by forking:
  * `shape` (bar/floating), `tone` (light/dark), `indicator` (none/pill/pill-text/bar/glow),
@@ -19,9 +23,10 @@ function BottomNav({ items, value, onChange, showLabels = true, centerAction, sa
     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 onActive = activeColor === "accent" ? theme.text.onAccent : theme.text.onPrimary;
+    const brandText = theme.text.accent;
     const inactiveColor = dark ? "rgba(255,255,255,0.55)" : theme.icon.secondary;
-    const surfaceColor = dark ? DARK_SURFACE : theme.bg.card;
+    const surfaceColor = dark ? resolveDarkSurface(theme) : theme.bg.card;
     const containerStyle = rounded
         ? {
             borderRadius: 32,
@@ -53,14 +58,18 @@ function BottomNav({ items, value, onChange, showLabels = true, centerAction, sa
         }
         // 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;
+        let iconColor = inactiveColor;
+        if (inPill)
+            iconColor = onActive;
+        else if (active)
+            iconColor = brandText;
+        let labelColor = inactiveColor;
+        if (active && inPill)
+            labelColor = onActive;
+        else if (active && dark)
+            labelColor = theme.text.inverse;
+        else if (active)
+            labelColor = brandText;
         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,

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

@@ -1,4 +1,4 @@
-import { type AppBarActionProps } from "../Navigation/Navigation.AppBar";
+import { type AppBarActionProps } from "./Navigation.AppBar.js";
 import type { ReactNode } from "react";
 import { Animated } from "react-native";
 export interface CollapsingHeaderProps {

package/dist/Navigation/Navigation.CollapsingHeader.js

@@ -1,7 +1,7 @@
 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 AppBar from "./Navigation.AppBar.js";
+import { theme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { Animated, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**

package/dist/Navigation/Navigation.FloatingBar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "nativewind/jsx-runtime";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
 import { View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 /**

package/dist/Navigation/Navigation.Header.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Logo from "../Display/Display.Logo";
-import GradientContainer from "../layouts/GradientContainer";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import Logo from "../Display/Display.Logo.js";
+import GradientContainer from "../layouts/GradientContainer.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
 /**
  * @deprecated Legacy style (forced gradient via `GradientContainer`). Use

package/dist/Navigation/Navigation.HeaderToolbar.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "nativewind/jsx-runtime";
-import { Display } from "../Display";
-import GradientContainer from "../layouts/GradientContainer";
-import { theme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import { Display } from "../Display/index.js";
+import GradientContainer from "../layouts/GradientContainer.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
 const Icon = Display.Icon;
 const Text = Typography.Text;

package/dist/Navigation/Navigation.Menu.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import Pressable from "../primitives/Pressable";
-import { useTheme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+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 { cloneElement, useRef, useState } from "react";
-import { Dimensions, Modal, Pressable as RNPressable, View } from "react-native";
+import { Dimensions, Modal, Pressable as RNPressable, View, } from "react-native";
 function Menu({ items, trigger, menuWidth = 220, testID }) {
     const theme = useTheme();
     const triggerRef = useRef(null);
@@ -21,7 +21,7 @@ function Menu({ items, trigger, menuWidth = 220, testID }) {
     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, children: _jsx(Icon, { color: theme.icon.secondary, name: "ellipsis-vertical", size: 22 }) })), _jsx(Modal, { animationType: "fade", onRequestClose: close, transparent: true, visible: anchor !== null, children: _jsx(RNPressable, { onPress: close, style: { flex: 1 }, children: _jsx(View, { className: "rounded-lg py-1", style: {
+            cloneElement(trigger, { onPress: open })) : (_jsx(Pressable, { accessibilityLabel: "M\u00E1s opciones", accessibilityRole: "button", onPress: open, children: _jsx(Icon, { color: theme.icon.secondary, name: "ellipsis-vertical", size: 22 }) })), _jsx(Modal, { animationType: "fade", onRequestClose: close, presentationStyle: "overFullScreen", transparent: true, visible: anchor !== null, children: _jsx(RNPressable, { onPress: close, style: { flex: 1 }, children: _jsx(View, { className: "rounded-lg py-1", style: {
                             position: "absolute",
                             top,
                             right,

package/dist/Navigation/Navigation.MenuSection.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { useTheme } from "../theme";
-import { Typography } from "../Typography";
+import { useTheme } from "../theme/index.js";
+import { Typography } from "../Typography/index.js";
 import { View } from "react-native";
 /**
  * Titled card that groups `Display.MenuButton` rows into a visual section.

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

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

package/dist/Navigation/Navigation.RowItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
 function RowItem({ item, className }) {
     function rowContent() {

package/dist/Navigation/Navigation.SearchBar.js

@@ -1,9 +1,9 @@
 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 Icon from "../Display/Display.Icon.js";
+import Pressable from "../primitives/Pressable.js";
+import { theme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { TextInput, View } from "react-native";
 /**
@@ -16,7 +16,7 @@ function SearchBar({ value, onChangeText, placeholder = "Buscar", onSubmit, onCl
             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: () => {
+        }, 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", selectionColor: theme.primary, underlineColorAndroid: "transparent", 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] }));

package/dist/Navigation/Navigation.SegmentedControl.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
-import Icon from "../Display/Display.Icon";
-import { useTheme } from "../theme";
-import { cn } from "../theme/tw";
-import { Typography } from "../Typography";
+import Icon from "../Display/Display.Icon.js";
+import { useTheme } from "../theme/index.js";
+import { cn } from "../theme/tw.js";
+import { Typography } from "../Typography/index.js";
 import { TouchableOpacity, View } from "react-native";
 function SegmentedControl({ options, value, onChange, iconLayout = "top", className, testID, }) {
     const theme = useTheme();