@sincpro/mobile-ui 0.1.2 → 0.1.3

package/lib/Form/Form.Button.d.ts

@@ -0,0 +1,145 @@
+import { type VariantProps } from "../theme/tw";
+import type React from "react";
+declare const button: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        accent: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-lg items-center justify-center flex-row min-h-[44px]", {
+    variant: {
+        primary: string;
+        accent: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        accent: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-lg items-center justify-center flex-row min-h-[44px]", unknown, unknown, undefined>>;
+declare const buttonIcon: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        accent: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-lg items-center justify-center aspect-square", {
+    variant: {
+        primary: string;
+        accent: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        accent: string;
+        secondary: string;
+        outline: string;
+        outlineDanger: string;
+        outlineBlack: string;
+        flat: string;
+        link: string;
+        transparent: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-lg items-center justify-center aspect-square", unknown, unknown, undefined>>;
+export interface ButtonProps extends VariantProps<typeof button> {
+    title: string;
+    onPress?: () => void;
+    confirm?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    className?: string;
+    icon?: React.ReactNode;
+}
+export interface ButtonIconProps extends VariantProps<typeof buttonIcon> {
+    icon: string;
+    onPress?: () => void;
+    confirm?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+declare const ButtonWithIcon: React.FC<ButtonProps> & {
+    Icon: React.FC<ButtonIconProps>;
+};
+export default ButtonWithIcon;

package/lib/Form/Form.Button.js

@@ -0,0 +1,272 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConfirmationContext } from "../Dialog/Confirmation.context";
+import { Display } from "../Display";
+import { theme } from "../theme";
+import { tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { LinearGradient } from "expo-linear-gradient";
+import { useCallback } from "react";
+import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import { runOnJS } from "react-native-reanimated";
+// ============================================================================
+// STYLE VARIANTS
+// ============================================================================
+const button = tv({
+    base: "rounded-lg items-center justify-center flex-row min-h-[44px]",
+    variants: {
+        variant: {
+            primary: "shadow-sm",
+            accent: "shadow-sm",
+            secondary: "bg-bg-card border border-primary shadow-sm",
+            outline: "bg-transparent border border-primary",
+            outlineDanger: "bg-transparent border border-danger",
+            outlineBlack: "bg-transparent border border-border-strong",
+            flat: "bg-text-primary/10",
+            link: "bg-transparent min-h-0",
+            transparent: "bg-transparent border border-border-light",
+        },
+        size: {
+            small: "py-1.5 px-3 min-h-[36px]",
+            medium: "py-2.5 px-4 min-h-[44px]",
+            large: "py-3 px-5 min-h-[48px]",
+        },
+        disabled: {
+            true: "opacity-70",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "medium",
+    },
+});
+const buttonIcon = tv({
+    base: "rounded-lg items-center justify-center aspect-square",
+    variants: {
+        variant: {
+            primary: "shadow-sm",
+            accent: "shadow-sm",
+            secondary: "bg-bg-card border border-primary shadow-sm",
+            outline: "bg-transparent border border-primary",
+            outlineDanger: "bg-transparent border border-danger",
+            outlineBlack: "bg-transparent border border-border-strong",
+            flat: "bg-text-primary/10",
+            link: "bg-transparent",
+            transparent: "bg-transparent border border-border-light",
+        },
+        size: {
+            small: "w-9 h-9",
+            medium: "w-11 h-11",
+            large: "w-[52px] h-[52px]",
+        },
+        disabled: {
+            true: "opacity-70",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "medium",
+    },
+});
+const textColor = tv({
+    variants: {
+        variant: {
+            primary: "text-white",
+            accent: "text-white",
+            secondary: "text-primary",
+            outline: "text-primary",
+            outlineDanger: "text-danger",
+            outlineBlack: "text-text-primary",
+            flat: "text-text-primary",
+            link: "text-primary",
+            transparent: "text-white",
+        },
+        disabled: {
+            true: "opacity-50",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "primary",
+            disabled: true,
+            className: "text-white/70",
+        },
+        {
+            variant: "accent",
+            disabled: true,
+            className: "text-white/70",
+        },
+        {
+            variant: "transparent",
+            disabled: true,
+            className: "text-white/70",
+        },
+        {
+            variant: ["secondary", "outline", "link"],
+            disabled: true,
+            className: "text-text-secondary",
+        },
+        {
+            variant: "outlineDanger",
+            disabled: true,
+            className: "text-danger/50",
+        },
+        {
+            variant: "outlineBlack",
+            disabled: true,
+            className: "text-text-primary/50",
+        },
+        {
+            variant: "flat",
+            disabled: true,
+            className: "text-text-primary/50",
+        },
+    ],
+    defaultVariants: {
+        variant: "primary",
+        disabled: false,
+    },
+});
+// ============================================================================
+// COLOR & SIZE MAPS (Dynamic with theme)
+// ============================================================================
+function getLoadingColorDynamic(variant) {
+    const map = {
+        primary: theme.text.inverse,
+        accent: theme.text.inverse,
+        secondary: theme.primary,
+        outline: theme.primary,
+        outlineDanger: theme.danger,
+        outlineBlack: theme.text.primary,
+        flat: theme.text.primary,
+        link: theme.primary,
+        transparent: theme.text.inverse,
+    };
+    return map[variant] ?? theme.text.inverse;
+}
+function getIconColorDynamic(variant, disabled) {
+    if (disabled) {
+        const disabledMap = {
+            primary: theme.icon.inverse + "70",
+            accent: theme.icon.inverse + "70",
+            secondary: theme.icon.disabled,
+            outline: theme.icon.disabled,
+            outlineDanger: theme.danger + "7f",
+            outlineBlack: theme.text.primary + "7f",
+            flat: theme.text.primary + "7f",
+            link: theme.icon.disabled,
+            transparent: theme.icon.inverse + "70",
+        };
+        return disabledMap[variant] ?? theme.icon.disabled;
+    }
+    const enabledMap = {
+        primary: theme.icon.inverse,
+        accent: theme.icon.inverse,
+        secondary: theme.primary,
+        outline: theme.primary,
+        outlineDanger: theme.danger,
+        outlineBlack: theme.text.primary,
+        flat: theme.text.primary,
+        link: theme.primary,
+        transparent: theme.icon.inverse,
+    };
+    return enabledMap[variant] ?? theme.icon.inverse;
+}
+const iconSizeMap = {
+    small: 16,
+    medium: 20,
+    large: 28,
+};
+const textVariantMap = {
+    small: "buttonSmall",
+    medium: "button",
+    large: "buttonLarge",
+};
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+function getLoadingColor(variant) {
+    return getLoadingColorDynamic(variant);
+}
+function getIconColor(variant, disabled) {
+    return getIconColorDynamic(variant, disabled);
+}
+function getIconSize(size) {
+    return iconSizeMap[size] ?? 20;
+}
+function getTextVariant(size) {
+    return textVariantMap[size] ?? "button";
+}
+const Button = ({ title, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, icon, }) => {
+    const { show, hide } = useConfirmationContext();
+    const textColorClass = textColor({
+        variant: variant ?? "primary",
+        disabled,
+    });
+    const loadingColorValue = getLoadingColor(variant ?? "primary");
+    const textVariantValue = getTextVariant(size ?? "medium");
+    const handlePress = useCallback(() => {
+        if (confirm && onPress) {
+            show({
+                title: "Confirmar acción",
+                message: confirm,
+                confirmText: "Confirmar",
+                cancelText: "Cancelar",
+                onConfirm: () => {
+                    hide();
+                    runOnJS(onPress)();
+                },
+                onCancel: () => hide(),
+            });
+        }
+        else if (onPress) {
+            runOnJS(onPress)();
+        }
+    }, [onPress, confirm, show, hide]);
+    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") {
+        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,
+                opacity: disabled ? 0.7 : 1,
+            }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: handlePress, children: _jsx(View, { className: button({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: false, bold: true, className: textColorClass, ellipsizeMode: "tail", numberOfLines: 1, variant: textVariantValue, children: title })] })) }) }) }));
+    }
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: button({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsxs(_Fragment, { children: [icon ? _jsx(View, { className: "mr-2", children: icon }) : null, _jsx(Typography.Text, { allowFontScaling: false, bold: true, className: textColorClass, ellipsizeMode: "tail", numberOfLines: 1, variant: textVariantValue, children: title })] })) }));
+};
+const ButtonIcon = ({ icon, onPress, confirm, variant = "primary", size = "medium", loading = false, disabled = false, className, }) => {
+    const { show, hide } = useConfirmationContext();
+    const iconColorValue = getIconColor(variant ?? "primary", disabled);
+    const iconSizeValue = getIconSize(size ?? "medium");
+    const loadingColorValue = getLoadingColor(variant ?? "primary");
+    const handlePress = useCallback(() => {
+        if (confirm && onPress) {
+            show({
+                title: "Confirmar acción",
+                message: confirm,
+                confirmText: "Confirmar",
+                cancelText: "Cancelar",
+                onConfirm: () => {
+                    hide();
+                    runOnJS(onPress)();
+                },
+                onCancel: () => hide(),
+            });
+        }
+        else if (onPress) {
+            runOnJS(onPress)();
+        }
+    }, [onPress, confirm, show, hide]);
+    if (variant === "primary") {
+        return (_jsx(LinearGradient, { colors: disabled ? ["#93c5fd", "#60a5fa"] : ["#2563eb", "#1d4ed8"], end: { x: 1, y: 1 }, start: { x: 0, y: 0 }, style: {
+                borderRadius: 8,
+                opacity: disabled ? 0.7 : 1,
+            }, children: _jsx(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || loading, onPress: handlePress, children: _jsx(View, { className: buttonIcon({ size, disabled }), style: { backgroundColor: "transparent" }, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Display.Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }) }) }));
+    }
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: buttonIcon({ variant, size, disabled, className }), disabled: disabled || loading, onPress: handlePress, children: loading ? (_jsx(ActivityIndicator, { color: loadingColorValue, size: "small" })) : (_jsx(Display.Icon, { color: iconColorValue, name: icon, size: iconSizeValue })) }));
+};
+// ============================================================================
+// COMPOUND COMPONENT
+// ============================================================================
+const ButtonWithIcon = Object.assign(Button, { Icon: ButtonIcon });
+export default ButtonWithIcon;

package/lib/Form/Form.Checkbox.d.ts

@@ -0,0 +1,13 @@
+interface RowCheckBoxProps {
+    mainText?: string;
+    subText?: string;
+    rightText?: string;
+    leftComponent?: React.ReactNode;
+    rightComponent?: React.ReactNode;
+    isChecked?: boolean;
+    onCheck?: (isChecked: boolean) => void;
+    disabled?: boolean;
+    className?: string;
+}
+declare function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked, onCheck, disabled, className, }: RowCheckBoxProps): import("react/jsx-runtime").JSX.Element;
+export default RowCheckBox;

package/lib/Form/Form.Checkbox.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from "../theme";
+import { cn } from "../theme/tw";
+import { Typography } from "../Typography";
+import { Checkbox } from "expo-checkbox";
+import { Pressable, View } from "react-native";
+function RowCheckBox({ mainText, subText, rightText, rightComponent, leftComponent, isChecked = false, onCheck = () => { }, disabled = false, className, }) {
+    const handlePress = () => {
+        if (!disabled) {
+            onCheck(!isChecked);
+        }
+    };
+    const renderLeftComponent = () => {
+        if (leftComponent) {
+            return leftComponent;
+        }
+        return (_jsxs(_Fragment, { children: [mainText && _jsx(Typography.Text, { semibold: true, children: mainText }), subText && (_jsx(Typography.Text, { className: "text-text-secondary", variant: "bodySmall", children: subText }))] }));
+    };
+    const renderRightComponent = () => {
+        if (rightComponent) {
+            return rightComponent;
+        }
+        if (rightText) {
+            return _jsx(Typography.Text, { variant: "body", children: rightText });
+        }
+        return null;
+    };
+    return (_jsxs(Pressable, { className: cn("flex-row justify-between items-center", disabled && "opacity-50", className), disabled: disabled, onPress: handlePress, children: [_jsx(View, { children: renderLeftComponent() }), _jsxs(View, { className: "flex-row items-center", children: [renderRightComponent(), _jsx(Checkbox, { className: "ml-2", color: theme.primary, disabled: disabled, pointerEvents: "none", value: isChecked })] })] }));
+}
+export default RowCheckBox;

package/lib/Form/Form.ControlledCheckbox.d.ts

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

package/lib/Form/Form.ControlledCheckbox.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Checkbox from "../Form/Form.Checkbox";
+import { Controller } from "react-hook-form";
+function ControlledCheckbox({ control, name, label, subText, }) {
+    return (_jsx(Controller, { control: control, name: name, render: ({ field: { onChange, value } }) => (_jsx(Checkbox, { isChecked: value || false, mainText: label, onCheck: onChange, subText: subText })) }));
+}
+export default ControlledCheckbox;

package/lib/Form/Form.ControlledDropdown.d.ts

@@ -0,0 +1,14 @@
+import { Control, FieldValues, Path } from "react-hook-form";
+export interface DropdownOption {
+    value: string;
+    label: string;
+}
+interface ControlledDropdownProps<T extends FieldValues> {
+    control: Control<T>;
+    name: Path<T>;
+    label: string;
+    options: DropdownOption[];
+    placeholder?: string;
+}
+declare function ControlledDropdown<T extends FieldValues>(_props: ControlledDropdownProps<T>): void;
+export default ControlledDropdown;

package/lib/Form/Form.ControlledDropdown.js

@@ -0,0 +1,4 @@
+function ControlledDropdown(_props) {
+    throw new Error("ControlledDropdown is not implemented yet. Use Form.Dropdown with manual Controller instead.");
+}
+export default ControlledDropdown;

package/lib/Form/Form.ControlledInput.d.ts

@@ -0,0 +1,15 @@
+import { Control, FieldValues, Path } from "react-hook-form";
+interface ControlledInputProps<T extends FieldValues> {
+    control: Control<T>;
+    name: Path<T>;
+    label: string;
+    placeholder?: string;
+    keyboardType?: "default" | "numeric" | "email-address" | "phone-pad";
+    autoCapitalize?: "none" | "sentences" | "words" | "characters";
+    multiline?: boolean;
+    numberOfLines?: number;
+    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;
+export default ControlledInput;

package/lib/Form/Form.ControlledInput.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Input from "../Form/Form.Input";
+import { Controller } from "react-hook-form";
+function ControlledInput({ control, name, label, placeholder, keyboardType, autoCapitalize, multiline, numberOfLines, rules, error, }) {
+    return (_jsx(Controller, { control: control, name: name, render: ({ field: { onChange, onBlur, value } }) => (_jsx(Input, { autoCapitalize: autoCapitalize, error: error, keyboardType: keyboardType, label: label, multiline: multiline, numberOfLines: numberOfLines, onBlur: onBlur, onChangeText: onChange, placeholder: placeholder, value: value })), rules: rules }));
+}
+export default ControlledInput;

package/lib/Form/Form.ControlledMonetaryInput.d.ts

@@ -0,0 +1,12 @@
+import { Control, FieldValues, Path } from "react-hook-form";
+interface ControlledMonetaryInputProps<T extends FieldValues> {
+    control: Control<T>;
+    name: Path<T>;
+    label: string;
+    placeholder?: string;
+    currency?: string;
+    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;
+export default ControlledMonetaryInput;

package/lib/Form/Form.ControlledMonetaryInput.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MonetaryInput from "../Form/Form.MonetaryInput";
+import { Controller } from "react-hook-form";
+function ControlledMonetaryInput({ control, name, label, placeholder, currency = "CRC", rules, error, }) {
+    return (_jsx(Controller, { control: control, name: name, render: ({ field: { onChange, onBlur, value } }) => (_jsx(MonetaryInput, { amount: value, currencySymbol: currency, onChange: onChange, placeholder: placeholder })), rules: rules }));
+}
+export default ControlledMonetaryInput;

package/lib/Form/Form.ControlledRadioButton.d.ts

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

package/lib/Form/Form.ControlledRadioButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import RadioButton from "../Form/Form.RadioButton";
+import { Controller } from "react-hook-form";
+function ControlledRadioButton({ control, name, label, value, }) {
+    return (_jsx(Controller, { control: control, name: name, render: ({ field: { onChange, value: selectedValue } }) => (_jsx(RadioButton, { label: label, onPress: () => onChange(value), selected: selectedValue === value })) }));
+}
+export default ControlledRadioButton;

package/lib/Form/Form.Dropdown.d.ts

@@ -0,0 +1,14 @@
+export interface DropdownOption {
+    id: string;
+    title: string;
+    onPress: () => void;
+    disabled?: boolean;
+}
+interface DropdownButtonProps {
+    title: string;
+    options: DropdownOption[];
+    variant?: "primary" | "secondary" | "outline";
+    size?: "xs" | "small" | "medium" | "large";
+}
+declare function DropdownButton({ title, options, variant, size, }: DropdownButtonProps): import("react/jsx-runtime").JSX.Element;
+export default DropdownButton;

package/lib/Form/Form.Dropdown.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Display } from "../Display";
+import { theme } from "../theme";
+import { Typography } from "../Typography";
+import { useState } from "react";
+import { Modal, TouchableOpacity, TouchableWithoutFeedback, View } from "react-native";
+import { tv } from "tailwind-variants";
+const dropdown = tv({
+    slots: {
+        button: "flex-row justify-between items-center rounded-lg px-3",
+        overlay: "flex-1 bg-black/40 justify-center items-center",
+        dropdownContainer: "rounded-xl mx-5 max-w-[320px] w-[90%] max-h-[70%]",
+        header: "flex-row justify-between items-center px-4 py-3 border-b border-border-default",
+        optionsList: "p-1",
+        option: "py-3 px-3 rounded-lg my-0.5",
+        separator: "h-[1px] bg-border-light mx-3",
+    },
+    variants: {
+        variant: {
+            primary: {
+                button: "bg-primary",
+            },
+            secondary: {
+                button: "bg-bg-card border border-primary",
+            },
+            outline: {
+                button: "bg-transparent border border-primary",
+            },
+        },
+        size: {
+            xs: {
+                button: "py-1.5 min-h-[32px]",
+            },
+            small: {
+                button: "py-2 min-h-[36px]",
+            },
+            medium: {
+                button: "py-2.5 min-h-[40px]",
+            },
+            large: {
+                button: "py-3 min-h-[44px]",
+            },
+        },
+        disabled: {
+            true: {
+                option: "opacity-50",
+            },
+        },
+    },
+    defaultVariants: {
+        variant: "secondary",
+        size: "small",
+    },
+});
+function DropdownButton({ title, options, variant = "secondary", size = "small", }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleOptionPress = (option) => {
+        if (!option.disabled) {
+            option.onPress();
+            setIsOpen(false);
+        }
+    };
+    const styles = dropdown({ variant, size });
+    const textColorClass = {
+        primary: "text-text-on-primary",
+        outline: "text-primary",
+        secondary: "text-primary",
+    }[variant];
+    const iconColor = {
+        primary: theme.text.onPrimary,
+        outline: theme.primary,
+        secondary: theme.primary,
+    }[variant];
+    const textVariant = {
+        large: "body",
+        medium: "body",
+        xs: "bodySmall",
+        small: "bodySmall",
+    }[size];
+    return (_jsxs(_Fragment, { children: [_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: styles.button(), onPress: () => setIsOpen(true), children: [_jsx(Typography.Text, { className: textColorClass, variant: textVariant, children: title }), _jsx(Display.Icon, { color: iconColor, name: "chevron-down", size: 16, type: "feather" })] }), _jsx(Modal, { animationType: "fade", transparent: true, visible: isOpen, children: _jsx(TouchableWithoutFeedback, { onPress: () => setIsOpen(false), children: _jsx(View, { className: styles.overlay(), children: _jsx(TouchableWithoutFeedback, { children: _jsxs(View, { className: styles.dropdownContainer(), style: {
+                                    backgroundColor: theme.bg.popover,
+                                    ...theme.shadow.lg,
+                                }, children: [_jsxs(View, { className: styles.header(), children: [_jsx(Typography.Text, { className: "text-text-primary", semibold: true, variant: "bodyLarge", children: title }), _jsx(TouchableOpacity, { onPress: () => setIsOpen(false), children: _jsx(Display.Icon, { name: "x", size: 20, type: "feather" }) })] }), _jsx(View, { className: styles.optionsList(), children: options.map((option, index) => (_jsxs(View, { children: [_jsx(TouchableOpacity, { activeOpacity: 0.7, className: dropdown({ disabled: option.disabled }).option(), disabled: option.disabled, onPress: () => handleOptionPress(option), children: _jsx(Typography.Text, { className: option.disabled ? "text-text-disabled" : "text-text-primary", variant: "body", children: option.title }) }), index < options.length - 1 && _jsx(View, { className: styles.separator() })] }, option.id))) })] }) }) }) }) })] }));
+}
+export default DropdownButton;