@sincpro/mobile-ui 0.2.1 → 0.3.1

package/dist/Form/Form.ControlledCheckbox.d.ts

@@ -5,5 +5,5 @@ interface ControlledCheckboxProps<T extends FieldValues> {
     label: string;
     subText?: string;
 }
-declare function ControlledCheckbox<T extends FieldValues>({ control, name, label, subText, }: ControlledCheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function ControlledCheckbox<T extends FieldValues>({ control, name, label, subText, }: ControlledCheckboxProps<T>): import("react").JSX.Element;
 export default ControlledCheckbox;

package/dist/Form/Form.ControlledInput.d.ts

@@ -11,5 +11,5 @@ interface ControlledInputProps<T extends FieldValues> {
     rules?: any;
     error?: string;
 }
-declare function ControlledInput<T extends FieldValues>({ control, name, label, placeholder, keyboardType, autoCapitalize, multiline, numberOfLines, rules, error, }: ControlledInputProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function ControlledInput<T extends FieldValues>({ control, name, label, placeholder, keyboardType, autoCapitalize, multiline, numberOfLines, rules, error, }: ControlledInputProps<T>): import("react").JSX.Element;
 export default ControlledInput;

package/dist/Form/Form.ControlledMonetaryInput.d.ts

@@ -8,5 +8,5 @@ interface ControlledMonetaryInputProps<T extends FieldValues> {
     rules?: any;
     error?: string;
 }
-declare function ControlledMonetaryInput<T extends FieldValues>({ control, name, label, placeholder, currency, rules, error, }: ControlledMonetaryInputProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function ControlledMonetaryInput<T extends FieldValues>({ control, name, label, placeholder, currency, rules, error, }: ControlledMonetaryInputProps<T>): import("react").JSX.Element;
 export default ControlledMonetaryInput;

package/dist/Form/Form.ControlledRadioButton.d.ts

@@ -5,5 +5,5 @@ interface ControlledRadioButtonProps<T extends FieldValues> {
     label: string;
     value: any;
 }
-declare function ControlledRadioButton<T extends FieldValues>({ control, name, label, value, }: ControlledRadioButtonProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function ControlledRadioButton<T extends FieldValues>({ control, name, label, value, }: ControlledRadioButtonProps<T>): import("react").JSX.Element;
 export default ControlledRadioButton;

package/dist/Form/Form.DatePicker.d.ts

@@ -0,0 +1,20 @@
+export interface DatePickerProps {
+    value: Date | null;
+    onChange: (value: Date) => void;
+    mode?: "date" | "time" | "datetime";
+    label?: string;
+    placeholder?: string;
+    format?: (value: Date) => string;
+    minimumDate?: Date;
+    maximumDate?: Date;
+    disabled?: boolean;
+    className?: string;
+    testID?: string;
+}
+/**
+ * **Hybrid** date/time field: tokenized trigger (NativeWind) + **native picker**
+ * (`@react-native-community/datetimepicker`) — a case where native wins (expected UX).
+ * Subpath `Form/DatePicker`; **optional** peer dep.
+ */
+declare function DatePicker({ value, onChange, mode, label, placeholder, format, minimumDate, maximumDate, disabled, className, testID, }: DatePickerProps): import("react").JSX.Element;
+export default DatePicker;

package/dist/Form/Form.DatePicker.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import DateTimePicker from "@react-native-community/datetimepicker";
+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 { Platform, View } from "react-native";
+function defaultFormat(value, mode) {
+    if (mode === "time")
+        return value.toLocaleTimeString("es-BO", { hour: "2-digit", minute: "2-digit" });
+    if (mode === "datetime")
+        return value.toLocaleString("es-BO");
+    return value.toLocaleDateString("es-BO");
+}
+const iconByMode = {
+    date: "calendar-outline",
+    time: "time-outline",
+    datetime: "calendar-outline",
+};
+/**
+ * **Hybrid** date/time field: tokenized trigger (NativeWind) + **native picker**
+ * (`@react-native-community/datetimepicker`) — a case where native wins (expected UX).
+ * Subpath `Form/DatePicker`; **optional** peer dep.
+ */
+function DatePicker({ value, onChange, mode = "date", label, placeholder = "Seleccionar…", format, minimumDate, maximumDate, disabled = false, className, testID, }) {
+    const [open, setOpen] = useState(false);
+    const fmt = format ?? ((d) => defaultFormat(d, mode));
+    const handleValueChange = (_event, date) => {
+        if (Platform.OS === "android")
+            setOpen(false);
+        if (date)
+            onChange(date);
+    };
+    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 el selector de fecha", 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", value ? "text-text-primary" : "text-text-tertiary"), children: value ? fmt(value) : placeholder }), _jsx(Icon, { color: theme.icon.secondary, name: iconByMode[mode], size: 18 })] }), open ? (_jsx(DateTimePicker, { maximumDate: maximumDate, minimumDate: minimumDate, mode: mode === "datetime" ? "date" : mode, onDismiss: () => setOpen(false), onValueChange: handleValueChange, value: value ?? new Date() })) : null] }));
+}
+export default DatePicker;

package/dist/Form/Form.Dropdown.d.ts

@@ -10,5 +10,5 @@ interface DropdownButtonProps {
     variant?: "primary" | "secondary" | "outline";
     size?: "xs" | "small" | "medium" | "large";
 }
-declare function DropdownButton({ title, options, variant, size, }: DropdownButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function DropdownButton({ title, options, variant, size, }: DropdownButtonProps): import("react").JSX.Element;
 export default DropdownButton;

package/dist/Form/Form.FAB.d.ts

@@ -0,0 +1,10 @@
+export interface FABProps {
+    icon: string;
+    onPress: () => void;
+    label?: string;
+    position?: "bottom-right" | "bottom-left";
+    className?: string;
+    testID?: string;
+}
+declare function FAB({ icon, onPress, label, position, className, testID, }: FABProps): import("react").JSX.Element;
+export default FAB;

package/dist/Form/Form.FAB.js

@@ -0,0 +1,17 @@
+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 { useSafeAreaInsets } from "react-native-safe-area-context";
+function FAB({ icon, onPress, label, position = "bottom-right", className, testID, }) {
+    const insets = useSafeAreaInsets();
+    return (_jsxs(Pressable, { accessibilityLabel: label ?? "Acción", accessibilityRole: "button", className: cn("absolute flex-row items-center justify-center rounded-full bg-primary", label ? "h-14 px-5 gap-2" : "w-14 h-14", className), onPress: onPress, style: {
+            bottom: insets.bottom + 16,
+            right: position === "bottom-right" ? 16 : undefined,
+            left: position === "bottom-left" ? 16 : undefined,
+            ...theme.shadow.lg,
+        }, testID: testID, children: [_jsx(Icon, { color: theme.icon.inverse, name: icon, size: 24 }), label ? (_jsx(Typography.Text, { className: "text-text-on-primary font-semibold", children: label })) : null] }));
+}
+export default FAB;

package/dist/Form/Form.FilterButton.d.ts

@@ -8,5 +8,5 @@ export declare const FilterButton: FC<FilterButtonProps>;
 interface FilterButtonGroupProps {
     children: React.ReactNode;
 }
-export declare function FilterButtonGroup({ children }: FilterButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function FilterButtonGroup({ children }: FilterButtonGroupProps): import("react").JSX.Element;
 export {};

package/dist/Form/Form.FractionalQuantityInput.d.ts

@@ -9,5 +9,5 @@ interface FractionalQuantityInputProps {
     disabled?: boolean;
     quickAddIncrements?: number[];
 }
-declare function FractionalQuantityInput({ value, onChange, precision, minIncrement, maxValue, style, disabled, quickAddIncrements, }: FractionalQuantityInputProps): import("react/jsx-runtime").JSX.Element;
+declare function FractionalQuantityInput({ value, onChange, precision, minIncrement, maxValue, style, disabled, quickAddIncrements, }: FractionalQuantityInputProps): import("react").JSX.Element;
 export default FractionalQuantityInput;

package/dist/Form/Form.IconButton.d.ts

@@ -63,5 +63,5 @@ interface IconButtonProps extends VariantProps<typeof iconButton> {
     iconColor?: string;
     className?: string;
 }
-declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, }: IconButtonProps): import("react").JSX.Element;
 export default IconButton;

package/dist/Form/Form.Input.d.ts

@@ -1,3 +1,4 @@
+import type React from "react";
 import { type TextInputProps } from "react-native";
 interface FormInputProps extends TextInputProps {
     label: string;
@@ -5,5 +6,5 @@ interface FormInputProps extends TextInputProps {
     tooltip?: string;
     className?: string;
 }
-declare function FormInput({ label, error, tooltip, style, multiline, numberOfLines, onFocus, onBlur, className, ...props }: FormInputProps): import("react/jsx-runtime").JSX.Element;
+declare function FormInput({ label, error, tooltip, style, multiline, numberOfLines, onFocus, onBlur, className, ...props }: FormInputProps): React.JSX.Element;
 export default FormInput;

package/dist/Form/Form.Input.js

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

package/dist/Form/Form.InputField.js

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

package/dist/Form/Form.MonetaryInput.d.ts

@@ -4,5 +4,5 @@ interface MonetaryInputProps {
     currencySymbol?: string;
     placeholder?: string;
 }
-declare function MonetaryInput({ amount, onChange, currencySymbol, placeholder, }: MonetaryInputProps): import("react/jsx-runtime").JSX.Element;
+declare function MonetaryInput({ amount, onChange, currencySymbol, placeholder, }: MonetaryInputProps): import("react").JSX.Element;
 export default MonetaryInput;

package/dist/Form/Form.PinInput.d.ts

@@ -0,0 +1,12 @@
+export interface PinInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    length?: number;
+    secure?: boolean;
+    autoFocus?: boolean;
+    onComplete?: (value: string) => void;
+    className?: string;
+    testID?: string;
+}
+declare function PinInput({ value, onChange, length, secure, autoFocus, onComplete, className, testID, }: PinInputProps): import("react").JSX.Element;
+export default PinInput;

package/dist/Form/Form.PinInput.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { useRef } from "react";
+import { TextInput, View } from "react-native";
+function PinInput({ value, onChange, length = 6, secure = false, autoFocus = false, onComplete, className, testID, }) {
+    const inputRef = useRef(null);
+    const chars = value.split("");
+    const handleChange = (text) => {
+        const next = text.replace(/[^0-9]/g, "").slice(0, length);
+        onChange(next);
+        if (next.length === length)
+            onComplete?.(next);
+    };
+    return (_jsxs(Pressable, { accessibilityLabel: "C\u00F3digo de verificaci\u00F3n", className: cn("flex-row gap-2", className), onPress: () => inputRef.current?.focus(), testID: testID, children: [Array.from({ length }).map((_, index) => {
+                const filled = index < value.length;
+                const active = index === value.length;
+                return (_jsx(View, { className: "flex-1 aspect-square max-w-[52px] rounded-lg border bg-bg-card items-center justify-center", style: { borderColor: active ? theme.border.focus : theme.border.default }, children: _jsx(Typography.Text, { className: "text-text-primary", variant: "h4", children: filled ? (secure ? "•" : chars[index]) : "" }) }, index));
+            }), _jsx(TextInput, { autoFocus: autoFocus, caretHidden: true, keyboardType: "number-pad", maxLength: length, onChangeText: handleChange, ref: inputRef, style: { position: "absolute", opacity: 0, width: 1, height: 1 }, textContentType: "oneTimeCode", value: value })] }));
+}
+export default PinInput;

package/dist/Form/Form.QuantitySelector.d.ts

@@ -1,3 +1,4 @@
+import type React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 interface QuantitySelectorProps {
     value: number;
@@ -6,5 +7,5 @@ interface QuantitySelectorProps {
     max?: number;
     style?: StyleProp<ViewStyle>;
 }
-declare function QuantitySelector({ value, onChange, min, max, style, }: QuantitySelectorProps): import("react/jsx-runtime").JSX.Element;
+declare function QuantitySelector({ value, onChange, min, max, style, }: QuantitySelectorProps): React.JSX.Element;
 export default QuantitySelector;

package/dist/Form/Form.QuantitySelector.js

@@ -5,7 +5,7 @@ import { TouchableOpacity, View } from "react-native";
 import { tv } from "tailwind-variants";
 const quantitySelector = tv({
     slots: {
-        container: "flex-row items-center border border-brand-accent rounded-full px-1",
+        container: "flex-row items-center self-start border border-accent rounded-full px-1",
         button: "w-9 h-9 rounded-full justify-center items-center",
         valueContainer: "min-w-[40px] items-center px-3",
     },

package/dist/Form/Form.RadioButton.d.ts

@@ -3,5 +3,5 @@ interface RadioButtonProps {
     selected: boolean;
     onPress: () => void;
 }
-declare function RadioButton({ label, selected, onPress }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function RadioButton({ label, selected, onPress }: RadioButtonProps): import("react").JSX.Element;
 export default RadioButton;

package/dist/Form/Form.SearchBar.d.ts

@@ -1,8 +1,13 @@
+import type React from "react";
 interface SearchBarProps {
     value: string;
     onChangeText: (text: string) => void;
     placeholder?: string;
     className?: string;
 }
-declare function SearchBar({ value, onChangeText, placeholder, className, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Use `Navigation.SearchBar` (2026 pill). Kept for backwards compatibility
+ * (consumed by `ListViewV2`).
+ */
+declare function SearchBar({ value, onChangeText, placeholder, className, }: SearchBarProps): React.JSX.Element;
 export default SearchBar;

package/dist/Form/Form.SearchBar.js

@@ -15,6 +15,10 @@ const searchBarContainer = tv({
     },
     defaultVariants: { focused: false },
 });
+/**
+ * @deprecated Use `Navigation.SearchBar` (2026 pill). Kept for backwards compatibility
+ * (consumed by `ListViewV2`).
+ */
 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" }) }))] }));

package/dist/Form/Form.Select.d.ts

@@ -0,0 +1,17 @@
+export interface SelectOption<T extends string | number> {
+    label: string;
+    value: T;
+}
+export interface SelectProps<T extends string | number> {
+    options: SelectOption<T>[];
+    value: T | null;
+    onChange: (value: T) => void;
+    label?: string;
+    placeholder?: string;
+    title?: string;
+    disabled?: boolean;
+    className?: string;
+    testID?: string;
+}
+declare function Select<T extends string | number>({ options, value, onChange, label, placeholder, title, disabled, className, testID, }: SelectProps<T>): import("react").JSX.Element;
+export default Select;

package/dist/Form/Form.Select.js

@@ -0,0 +1,26 @@
+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 { 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)));
+                                }) })] }) }) })] }));
+}
+export default Select;

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

@@ -0,0 +1,20 @@
+export interface SliderProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    formatValue?: (value: number) => string;
+    disabled?: boolean;
+    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;
+export default Slider;

package/dist/Form/Form.Slider.js

@@ -0,0 +1,16 @@
+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 { 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 })] }));
+}
+export default Slider;

package/dist/Form/Form.Switch.d.ts

@@ -0,0 +1,10 @@
+export interface SwitchProps {
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+    testID?: string;
+}
+declare function Switch({ value, onValueChange, label, disabled, className, testID, }: SwitchProps): import("react").JSX.Element;
+export default Switch;

package/dist/Form/Form.Switch.js

@@ -0,0 +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 { 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 })] }));
+}
+export default Switch;

package/dist/Form/index.d.ts

@@ -4,15 +4,21 @@ import ControlledDropdown, { type DropdownOption } from "../Form/Form.Controlled
 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";
 export declare const Form: {
     TextInput: import("react").FC<import("../Form/Form.TextInput").TextInputFProps>;
     Input: typeof Input;
@@ -26,6 +32,12 @@ export declare const Form: {
     FractionalQuantityInput: typeof FractionalQuantityInput;
     RadioButton: typeof RadioButton;
     Checkbox: typeof Checkbox;
+    Switch: typeof Switch;
+    Select: typeof Select;
+    PinInput: typeof PinInput;
+    Slider: typeof Slider;
+    DatePicker: typeof DatePicker;
+    FAB: typeof FAB;
     SearchBar: typeof SearchBar;
     Dropdown: typeof Dropdown;
     MonetaryInput: typeof MonetaryInput;

package/dist/Form/index.js

@@ -5,7 +5,9 @@ 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";
@@ -13,9 +15,13 @@ 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";
 export const Form = {
     TextInput,
@@ -28,6 +34,12 @@ export const Form = {
     FractionalQuantityInput,
     RadioButton,
     Checkbox,
+    Switch,
+    Select,
+    PinInput,
+    Slider,
+    DatePicker,
+    FAB,
     SearchBar,
     Dropdown,
     MonetaryInput,

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

@@ -0,0 +1,57 @@
+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";
+    /** Render for a dark surface (translucent light button + light icon). */
+    onDark?: boolean;
+    /** Drop the contained surface → bare icon (iOS-style plain back/action). */
+    bare?: boolean;
+    testID?: string;
+}
+/**
+ * "Contained" icon-button for the AppBar: circular touch area with a subtle surface
+ * (merge of Material 3 state-layer + iOS 26 contained button). Optional badge.
+ */
+declare function AppBarAction({ icon, onPress, badge, accessibilityLabel, tone, onDark, bare, 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";
+    /**
+     * Surface tone:
+     * - `default` — tokenized light card.
+     * - `dark` — always-dark hero (light text + light contained actions).
+     * - `gradient` — brand-accent gradient hero for greeting headers ("Buenos días, …"),
+     *   with dark text via `text.onAccent` (reads `theme.gradient.accent`).
+     */
+    tone?: "default" | "dark" | "gradient";
+    /** [large variant] Show a left vertical accent bar beside the large title. */
+    accentBar?: boolean;
+    /** Back button style: `contained` (circular surface) or `plain` (bare iOS chevron). */
+    backVariant?: "contained" | "plain";
+    border?: boolean;
+    /** Reserves the status-bar space (insets.top). `false` to embed/demo. */
+    safeArea?: boolean;
+    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, tone, accentBar, backVariant, 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,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
+import GradientSurface from "../Display/Display.GradientSurface";
+import Icon from "../Display/Display.Icon";
+import Pressable from "../primitives/Pressable";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { StyleSheet, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+/** Fallback for the `tone="dark"` hero surface when the theme has no `bg.inverse` token. */
+const HERO_DARK_FALLBACK = "#0E1714";
+/**
+ * "Contained" icon-button for the AppBar: circular touch area with a subtle surface
+ * (merge of Material 3 state-layer + iOS 26 contained button). Optional badge.
+ */
+function AppBarAction({ icon, onPress, badge, accessibilityLabel, tone = "plain", onDark = false, bare = false, testID, }) {
+    const bg = bare
+        ? "transparent"
+        : onDark
+            ? "rgba(255,255,255,0.14)"
+            : tone === "tinted"
+                ? theme.bg.accent
+                : theme.bg.card;
+    const iconColor = tone === "tinted" ? theme.primary : onDark ? theme.icon.inverse : theme.icon.primary;
+    // Plain (white) squircle gets a hairline so it reads as a contained button on a light bar.
+    const showBorder = !bare && !onDark && tone !== "tinted";
+    return (_jsxs(Pressable, { accessibilityLabel: accessibilityLabel, accessibilityRole: "button", className: "items-center justify-center", hitSlop: 6, onPress: onPress, style: {
+            width: 40,
+            height: 40,
+            borderRadius: 12,
+            backgroundColor: bg,
+            ...(showBorder ? { borderWidth: 1, borderColor: theme.border.light } : null),
+        }, testID: testID, children: [_jsx(Icon, { color: iconColor, name: icon, size: bare ? 24 : 20 }), badge != null ? (_jsx(View, { className: "absolute bg-danger rounded-full min-w-[16px] h-4 px-1 items-center justify-center", style: { top: -2, right: -2, borderWidth: 2, borderColor: theme.bg.card }, children: _jsx(Typography.Text, { style: { color: theme.text.inverse, fontSize: 9, lineHeight: 11 }, children: badge }) })) : null] }));
+}
+/**
+ * Flat, modern top bar (merge of Material 3 + iOS 26): tokenized surface, left-aligned
+ * 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", tone = "default", accentBar = false, backVariant = "contained", border = true, safeArea = true, className, testID, }) {
+    const insets = useSafeAreaInsets();
+    const centered = variant === "center";
+    const large = variant === "large";
+    const dark = tone === "dark";
+    const gradient = tone === "gradient";
+    // Greeting/balance hero (large, no back/leading): drop the empty top toolbar row and put
+    // the action(s) inline beside the big title — avoids a tall dead zone above the title.
+    const largeInlineActions = large && !onBack && !leading;
+    // Both `dark` and `gradient` are colored surfaces: no card bg, no hairline, light/dark text.
+    const colored = dark || gradient;
+    const onColoredText = gradient ? theme.text.onAccent : theme.text.inverse;
+    const titleStyle = colored ? { color: onColoredText } : undefined;
+    const subtitleStyle = gradient
+        ? { color: theme.text.onAccent, opacity: 0.72 }
+        : dark
+            ? { color: "rgba(255,255,255,0.7)" }
+            : undefined;
+    return (_jsxs(View, { className: cn(colored ? "" : "bg-bg-card", !colored && border && "border-b border-border-light", className), style: {
+            paddingTop: safeArea ? insets.top : 0,
+            ...(dark ? { backgroundColor: theme.bg.inverse ?? HERO_DARK_FALLBACK } : null),
+        }, testID: testID, children: [gradient ? (_jsx(GradientSurface, { colors: theme.gradient.accent, padding: "none", radius: "none", style: StyleSheet.absoluteFill })) : null, largeInlineActions ? null : (_jsxs(View, { className: "flex-row items-center px-3 gap-2 min-h-[56px]", children: [_jsxs(View, { className: "flex-row items-center gap-2", style: { minWidth: 38 }, children: [onBack ? (_jsx(AppBarAction, { accessibilityLabel: "Volver", bare: backVariant === "plain", icon: "chevron-back", onDark: dark, onPress: onBack })) : null, leading] }), !large ? (_jsxs(View, { className: cn("flex-1", centered && "items-center"), children: [title ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-primary", numberOfLines: 1, semibold: true, style: titleStyle, variant: "subtitle", children: title })) : null, subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", numberOfLines: 1, style: subtitleStyle, variant: "caption", children: subtitle })) : null] })) : (_jsx(View, { className: "flex-1" })), _jsx(View, { className: "flex-row items-center justify-end gap-2", style: { minWidth: 38 }, children: actions })] })), large && title ? (_jsxs(View, { className: cn("flex-row px-4 pb-3", largeInlineActions ? "pt-2" : "pt-0.5"), children: [accentBar ? (_jsx(View, { style: {
+                            width: 4,
+                            marginRight: 10,
+                            marginVertical: 2,
+                            borderRadius: 999,
+                            backgroundColor: theme.accent,
+                        } })) : null, _jsxs(View, { className: "flex-1", children: [_jsx(Typography.Text, { className: colored ? "" : "text-text-primary", style: titleStyle, variant: "h2", children: title }), subtitle ? (_jsx(Typography.Text, { className: colored ? "" : "text-text-secondary", style: subtitleStyle, variant: "bodySmall", children: subtitle })) : null] }), largeInlineActions && actions ? (_jsx(View, { className: "flex-row items-center justify-end gap-2 pl-2", children: actions })) : null] })) : null, subheader ? _jsx(View, { className: "px-3 pb-3 pt-0.5", children: subheader }) : null] }));
+}
+const AppBarWithAction = Object.assign(AppBar, { Action: AppBarAction });
+export default AppBarWithAction;
+export { AppBarWithAction as AppBar };