@sincpro/mobile-ui 0.2.0 → 0.3.0

package/dist/Feedback/index.js

@@ -1,14 +1,29 @@
+import Banner from "../Feedback/Feedback.Banner";
 import DomainSplashScreen from "../Feedback/Feedback.DomainSplashScreen";
 import Empty from "../Feedback/Feedback.Empty";
+import EmptyState from "../Feedback/Feedback.EmptyState";
 import Error from "../Feedback/Feedback.Error";
 import Loading from "../Feedback/Feedback.Loading";
+import PermissionCard from "../Feedback/Feedback.PermissionCard";
+import Progress from "../Feedback/Feedback.Progress";
+import ProgressCircle from "../Feedback/Feedback.ProgressCircle";
+import Skeleton from "../Feedback/Feedback.Skeleton";
 import Spinner from "../Feedback/Feedback.Spinner";
+import SplashScreen from "../Feedback/Feedback.Splash";
 export { ErrorBoundary } from "../Feedback/ErrorBoundary";
+export { ToastProvider, useToast, } from "../Feedback/Toast.context";
 export const Feedback = {
     Loading,
     Spinner,
+    Skeleton,
+    Progress,
+    ProgressCircle,
+    Banner,
+    PermissionCard,
     Empty,
+    EmptyState,
     Error,
+    SplashScreen,
     DomainSplashScreen,
 };
 export default Feedback;

package/dist/Form/Form.Button.d.ts

@@ -4,6 +4,7 @@ declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
         accent: string;
+        cta: string;
         secondary: string;
         outline: string;
         outlineDanger: string;
@@ -24,6 +25,7 @@ declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
         accent: string;
+        cta: string;
         secondary: string;
         outline: string;
         outlineDanger: string;
@@ -44,6 +46,7 @@ declare const button: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
         accent: string;
+        cta: string;
         secondary: string;
         outline: string;
         outlineDanger: string;
@@ -65,6 +68,7 @@ declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
         accent: string;
+        cta: string;
         secondary: string;
         outline: string;
         outlineDanger: string;
@@ -85,6 +89,7 @@ declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
         accent: string;
+        cta: string;
         secondary: string;
         outline: string;
         outlineDanger: string;
@@ -105,6 +110,7 @@ declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
         accent: string;
+        cta: string;
         secondary: string;
         outline: string;
         outlineDanger: string;

package/dist/Form/Form.Button.js

@@ -17,6 +17,7 @@ const button = tv({
         variant: {
             primary: "shadow-sm",
             accent: "shadow-sm",
+            cta: "shadow-sm",
             secondary: "bg-bg-card border border-primary shadow-sm",
             outline: "bg-transparent border border-primary",
             outlineDanger: "bg-transparent border border-danger",
@@ -45,6 +46,7 @@ const buttonIcon = tv({
         variant: {
             primary: "shadow-sm",
             accent: "shadow-sm",
+            cta: "shadow-sm",
             secondary: "bg-bg-card border border-primary shadow-sm",
             outline: "bg-transparent border border-primary",
             outlineDanger: "bg-transparent border border-danger",
@@ -72,6 +74,7 @@ const textColor = tv({
         variant: {
             primary: "text-white",
             accent: "text-white",
+            cta: "text-white",
             secondary: "text-primary",
             outline: "text-primary",
             outlineDanger: "text-danger",
@@ -95,6 +98,11 @@ const textColor = tv({
             disabled: true,
             className: "text-white/70",
         },
+        {
+            variant: "cta",
+            disabled: true,
+            className: "text-white/70",
+        },
         {
             variant: "transparent",
             disabled: true,
@@ -133,6 +141,7 @@ function getLoadingColorDynamic(variant) {
     const map = {
         primary: theme.text.inverse,
         accent: theme.text.inverse,
+        cta: theme.text.inverse,
         secondary: theme.primary,
         outline: theme.primary,
         outlineDanger: theme.danger,
@@ -148,6 +157,7 @@ function getIconColorDynamic(variant, disabled) {
         const disabledMap = {
             primary: theme.icon.inverse + "70",
             accent: theme.icon.inverse + "70",
+            cta: theme.icon.inverse + "70",
             secondary: theme.icon.disabled,
             outline: theme.icon.disabled,
             outlineDanger: theme.danger + "7f",
@@ -161,6 +171,7 @@ function getIconColorDynamic(variant, disabled) {
     const enabledMap = {
         primary: theme.icon.inverse,
         accent: theme.icon.inverse,
+        cta: theme.icon.inverse,
         secondary: theme.primary,
         outline: theme.primary,
         outlineDanger: theme.danger,
@@ -225,7 +236,7 @@ const Button = ({ title, onPress, confirm, variant = "primary", size = "medium",
     if (variant === "link") {
         return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: className, disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Typography.Text, { className: textColorClass, variant: textVariantValue, children: title })) }));
     }
-    if (variant === "primary" || variant === "accent") {
+    if (variant === "primary" || variant === "accent" || variant === "cta") {
         const gradientColors = variant === "primary" ? theme.gradient.primary : theme.gradient.accent;
         return (_jsx(LinearGradient, { colors: gradientColors, end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
                 borderRadius: 8,

package/dist/Form/Form.Checkbox.d.ts

@@ -9,5 +9,5 @@ interface RowCheckBoxProps {
     disabled?: boolean;
     className?: string;
 }
-declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, className, }: RowCheckBoxProps): import("react/jsx-runtime").JSX.Element;
+declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, className, }: RowCheckBoxProps): import("react").JSX.Element;
 export default RowCheckBox;

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.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.primary }, 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,