@sincpro/mobile-ui 0.1.2 → 0.1.3

package/lib/Form/Form.FilterButton.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+export interface FilterButtonProps {
+    title: string;
+    active: boolean;
+    onPress: () => void;
+}
+export declare const FilterButton: FC<FilterButtonProps>;
+interface FilterButtonGroupProps {
+    children: React.ReactNode;
+}
+export declare function FilterButtonGroup({ children }: FilterButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Form/Form.FilterButton.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { TouchableOpacity, View } from "react-native";
+const filterButton = tv({
+    base: "rounded-lg items-center justify-center py-2 px-3 min-h-[36px]",
+    variants: {
+        active: {
+            true: "bg-primary border-0",
+            false: "bg-transparent border border-brand-primary",
+        },
+    },
+    defaultVariants: {
+        active: false,
+    },
+});
+const filterText = tv({
+    base: "font-bold",
+    variants: {
+        active: {
+            true: "text-white",
+            false: "text-primary",
+        },
+    },
+    defaultVariants: {
+        active: false,
+    },
+});
+export const FilterButton = ({ title, active, onPress }) => {
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.8, className: filterButton({ active }), onPress: onPress, children: _jsx(Typography.Text, { className: filterText({ active }), variant: "buttonSmall", children: title }) }));
+};
+export function FilterButtonGroup({ children }) {
+    return _jsx(View, { className: "flex-row gap-2 p-3", children: children });
+}

package/lib/Form/Form.FractionalQuantityInput.d.ts

@@ -0,0 +1,13 @@
+import { StyleProp, ViewStyle } from "react-native";
+interface FractionalQuantityInputProps {
+    value: number;
+    onChange: (value: number) => void;
+    precision?: number;
+    minIncrement?: number;
+    maxValue?: number;
+    style?: StyleProp<ViewStyle>;
+    disabled?: boolean;
+    quickAddIncrements?: number[];
+}
+declare function FractionalQuantityInput({ value, onChange, precision, minIncrement, maxValue, style, disabled, quickAddIncrements, }: FractionalQuantityInputProps): import("react/jsx-runtime").JSX.Element;
+export default FractionalQuantityInput;

package/lib/Form/Form.FractionalQuantityInput.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from "../Dialog";
+import { Display } from "../Display";
+import { Typography } from "../Typography";
+import { normalizeQuantity, roundTo } from "../utils/quantity";
+import { useCallback, useMemo, useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+import { tv } from "tailwind-variants";
+const fractionalQuantityInput = tv({
+    slots: {
+        container: "flex-row items-center border border-brand-accent rounded-full px-1",
+        button: "w-9 h-9 rounded-full justify-center items-center",
+        valueContainer: "min-w-[60px] items-center px-3",
+    },
+    variants: {
+        disabled: {
+            true: {
+                button: "opacity-40",
+            },
+        },
+    },
+});
+function parseLocalizedNumber(raw) {
+    let s = raw.trim();
+    if (s === "")
+        return 0;
+    s = s.replace(/[^0-9.,+-]/g, "");
+    const hasComma = s.includes(",");
+    const hasDot = s.includes(".");
+    if (hasComma && (!hasDot || s.lastIndexOf(",") > s.lastIndexOf("."))) {
+        s = s.replace(/\./g, "").replace(/,/g, ".");
+    }
+    else {
+        if (!hasComma && hasDot) {
+            if (/^\d{1,3}(\.\d{3})+$/.test(s)) {
+                s = s.replace(/\./g, "");
+            }
+            else if (s.split(".").length - 1 > 1) {
+                const parts = s.split(".");
+                const decimal = parts.pop();
+                s = parts.join("") + "." + decimal;
+            }
+        }
+        else if (hasComma && hasDot) {
+            s = s.replace(/,/g, "");
+        }
+        s = s.replace(/,/g, "");
+    }
+    const n = parseFloat(s);
+    if (isNaN(n))
+        return 0;
+    return n;
+}
+function FractionalQuantityInput({ value, onChange, precision = 2, minIncrement, maxValue = 999999, style, disabled, quickAddIncrements, }) {
+    const [modalVisible, setModalVisible] = useState(false);
+    const [draft, setDraft] = useState(String(value));
+    const effectiveIncrement = useMemo(() => {
+        if (minIncrement && minIncrement > 0)
+            return minIncrement;
+        return 1 / Math.pow(10, precision);
+    }, [minIncrement, precision]);
+    const chips = useMemo(() => {
+        if (quickAddIncrements && quickAddIncrements.length > 0)
+            return quickAddIncrements;
+        const base = effectiveIncrement;
+        if (base >= 1)
+            return [1, 2, 5];
+        if (base >= 0.5)
+            return [0.5, 1, 2];
+        if (base >= 0.25)
+            return [0.25, 0.5, 1];
+        if (base >= 0.1)
+            return [0.1, 0.25, 0.5];
+        return [base, base * 2, base * 5];
+    }, [effectiveIncrement, quickAddIncrements]);
+    const applyValue = useCallback((next) => {
+        if (next < 0)
+            next = 0;
+        if (next > maxValue)
+            next = maxValue;
+        next = normalizeQuantity(next, effectiveIncrement, precision);
+        onChange(next);
+    }, [onChange, maxValue, effectiveIncrement, precision]);
+    function handleDecrement() {
+        applyValue(value - 1);
+    }
+    function handleIncrement() {
+        applyValue(value + 1);
+    }
+    function openModal() {
+        setDraft(String(value));
+        setModalVisible(true);
+    }
+    function confirmDraft() {
+        let parsed = parseLocalizedNumber(draft);
+        parsed = roundTo(parsed, precision);
+        if (parsed < 0)
+            parsed = 0;
+        if (parsed > maxValue)
+            parsed = maxValue;
+        onChange(parsed);
+        setModalVisible(false);
+    }
+    const formatted = useMemo(() => value.toFixed(precision), [value, precision]);
+    const modalChips = chips.map((item) => ({
+        label: `+${item}`,
+        onPress: () => {
+            const base = parseLocalizedNumber(draft) || 0;
+            const next = roundTo(base + item, precision);
+            setDraft(String(next));
+        },
+    }));
+    const decrementStyles = fractionalQuantityInput({ disabled: disabled || value <= 0 });
+    const incrementStyles = fractionalQuantityInput({ disabled });
+    const containerStyles = fractionalQuantityInput();
+    return (_jsxs(View, { accessibilityLabel: `Cantidad ${formatted}`, className: containerStyles.container(), style: style, children: [_jsx(TouchableOpacity, { className: decrementStyles.button(), disabled: disabled || value <= 0, onPress: handleDecrement, children: _jsx(Display.Icon, { name: "minus", size: 16, type: "feather" }) }), _jsx(TouchableOpacity, { className: containerStyles.valueContainer(), disabled: disabled, onPress: openModal, children: _jsx(Typography.Text, { semibold: true, variant: "body", children: formatted }) }), _jsx(TouchableOpacity, { className: incrementStyles.button(), disabled: disabled, onPress: handleIncrement, children: _jsx(Display.Icon, { name: "plus", size: 16, type: "feather" }) }), _jsx(Dialog.EditValue, { chips: modalChips, keyboardType: "decimal-pad", onCancel: () => setModalVisible(false), onChangeValue: setDraft, onConfirm: confirmDraft, placeholder: `0${precision > 0 ? ",".padEnd(precision + 1, "0") : ""}`, rightAdornment: _jsxs(Typography.Text, { className: "ml-1", variant: "body", children: ["(m\u00EDn ", effectiveIncrement, ")"] }), title: "Editar cantidad", value: draft, visible: modalVisible })] }));
+}
+export default FractionalQuantityInput;

package/lib/Form/Form.IconButton.d.ts

@@ -0,0 +1,67 @@
+import { type VariantProps } from "../theme/tw";
+import { IconType } from "../utils/icon";
+declare const iconButton: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        ghost: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    rounded: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-lg items-center justify-center", {
+    variant: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        ghost: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    rounded: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        ghost: string;
+    };
+    size: {
+        small: string;
+        medium: string;
+        large: string;
+    };
+    rounded: {
+        true: string;
+    };
+    disabled: {
+        true: string;
+    };
+}, undefined, "rounded-lg items-center justify-center", unknown, unknown, undefined>>;
+interface IconButtonProps extends VariantProps<typeof iconButton> {
+    icon?: string;
+    type?: IconType;
+    onPress: () => void;
+    loading?: boolean;
+    iconColor?: string;
+    className?: string;
+}
+declare function IconButton({ icon, type, onPress, variant, size, loading, disabled, rounded, iconColor, className, }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export default IconButton;

package/lib/Form/Form.IconButton.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Display } from "../Display";
+import { theme } from "../theme";
+import { tv } from "../theme/tw";
+import { ActivityIndicator, TouchableOpacity } from "react-native";
+const iconButton = tv({
+    base: "rounded-lg items-center justify-center",
+    variants: {
+        variant: {
+            primary: "bg-primary",
+            secondary: "bg-bg-card border border-primary",
+            tertiary: "bg-accent",
+            ghost: "bg-transparent",
+        },
+        size: {
+            small: "w-8 h-8",
+            medium: "w-10 h-10",
+            large: "w-12 h-12",
+        },
+        rounded: {
+            true: "rounded-full",
+        },
+        disabled: {
+            true: "opacity-50",
+        },
+    },
+    defaultVariants: {
+        variant: "ghost",
+        size: "medium",
+        rounded: false,
+        disabled: false,
+    },
+});
+function IconButton({ icon, type = "feather", onPress, variant = "ghost", size = "medium", loading = false, disabled = false, rounded = false, iconColor, className, }) {
+    const getLoadingColor = () => {
+        switch (variant) {
+            case "primary":
+            case "tertiary":
+                return theme.primary;
+            case "secondary":
+            case "ghost":
+                return theme.primary;
+            default:
+                return theme.primary;
+        }
+    };
+    const getIconColor = () => {
+        if (iconColor)
+            return iconColor;
+        switch (variant) {
+            case "primary":
+            case "tertiary":
+                return theme.primary;
+            case "secondary":
+                return theme.primary;
+            case "ghost":
+                return theme.primary;
+            default:
+                return theme.primary;
+        }
+    };
+    return (_jsx(TouchableOpacity, { activeOpacity: 0.7, className: iconButton({ variant, size, rounded, disabled, className }), disabled: disabled || loading, onPress: onPress, children: loading ? (_jsx(ActivityIndicator, { color: getLoadingColor(), size: "small" })) : (_jsx(Display.Icon, { color: getIconColor(), name: icon, size: 24, type: type })) }));
+}
+export default IconButton;

package/lib/Form/Form.Input.d.ts

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

package/lib/Form/Form.Input.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { theme } from "../theme";
+import { cn, tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { useState } from "react";
+import { TextInput, View } from "react-native";
+const inputContainer = tv({
+    base: "rounded-lg bg-bg-card shadow-sm",
+    variants: {
+        state: {
+            error: "border-2 border-danger",
+            focused: "border-2 border-ring",
+            default: "border border-input",
+        },
+    },
+    defaultVariants: { state: "default" },
+});
+function FormInput({ label, error, tooltip, style, multiline = false, numberOfLines = 1, onFocus, onBlur, className, ...props }) {
+    const [isFocused, setIsFocused] = useState(false);
+    const hasError = Boolean(error);
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        onBlur?.(e);
+    };
+    const getState = () => {
+        if (hasError)
+            return "error";
+        if (isFocused)
+            return "focused";
+        return "default";
+    };
+    return (_jsxs(View, { className: cn("mb-2", className), children: [_jsx(Typography.Text, { className: "mb-1 font-medium text-text-primary", variant: "bodySmall", children: label }), _jsx(View, { className: inputContainer({ state: getState() }), children: _jsx(TextInput, { className: cn("px-3 py-2.5 text-sm min-h-[44px] text-text-primary", multiline && "min-h-[64px] pt-2.5"), multiline: multiline, numberOfLines: numberOfLines, onBlur: handleBlur, onFocus: handleFocus, placeholderTextColor: theme.text.tertiary, textAlignVertical: multiline ? "top" : "center", ...props }) }), hasError && (_jsx(Typography.Text, { className: "mt-0.5 text-danger", variant: "bodySmall", children: error }))] }));
+}
+export default FormInput;

package/lib/Form/Form.InputField.d.ts

@@ -0,0 +1,10 @@
+import TextInputF from "../Form/Form.TextInput";
+import React, { FC } from "react";
+import { TextInputProps } from "react-native";
+export interface InputFieldProps extends TextInputProps {
+    label: string;
+    inputProps: React.ComponentProps<typeof TextInputF>;
+    error?: string;
+}
+declare const InputField: FC<InputFieldProps>;
+export default InputField;

package/lib/Form/Form.InputField.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TextInputF from "../Form/Form.TextInput";
+import { tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { useState } from "react";
+import { View } from "react-native";
+const inputFieldBorder = tv({
+    base: "rounded p-2",
+    variants: {
+        state: {
+            error: "border-2 border-danger",
+            focused: "border-2 border-ring",
+            default: "border border-input",
+        },
+    },
+    defaultVariants: { state: "default" },
+});
+const InputField = ({ label, inputProps, error }) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const hasError = Boolean(error);
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        inputProps?.onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        inputProps?.onBlur?.(e);
+    };
+    const getState = () => {
+        if (hasError)
+            return "error";
+        if (isFocused)
+            return "focused";
+        return "default";
+    };
+    return (_jsxs(View, { className: "mb-4", children: [_jsx(Typography.Text, { className: "mb-1", variant: "bodyLarge", children: label }), _jsx(TextInputF, { className: inputFieldBorder({ state: getState() }), ...inputProps, onBlur: handleBlur, onFocus: handleFocus }), error && (_jsx(Typography.Text, { className: "mt-1 text-danger", variant: "bodySmall", children: error }))] }));
+};
+export default InputField;

package/lib/Form/Form.MonetaryInput.d.ts

@@ -0,0 +1,8 @@
+interface MonetaryInputProps {
+    amount?: number;
+    onChange?: (value: number) => void;
+    currencySymbol?: string;
+    placeholder?: string;
+}
+declare function MonetaryInput({ amount, onChange, currencySymbol, placeholder, }: MonetaryInputProps): import("react/jsx-runtime").JSX.Element;
+export default MonetaryInput;

package/lib/Form/Form.MonetaryInput.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from "../theme/tw";
+import { Typography } from "../Typography";
+import { parseToMonetaryNumber } from "../utils/monetary";
+import { useState } from "react";
+import { View } from "react-native";
+import CurrencyInput from "react-native-currency-input";
+const monetaryBox = tv({
+    base: "justify-center items-center bg-bg-card rounded-lg",
+    variants: {
+        focused: {
+            true: "border-2 border-border-focus",
+            false: "border border-border-default",
+        },
+    },
+    defaultVariants: { focused: false },
+});
+function MonetaryInput({ amount, onChange, currencySymbol = "₡", placeholder = "Escriba el monto", }) {
+    const [raw, setRaw] = useState(parseToMonetaryNumber(amount));
+    const [isFocused, setIsFocused] = useState(false);
+    const handleChange = (amount) => {
+        setRaw(amount);
+        onChange?.(parseToMonetaryNumber(amount));
+    };
+    return (_jsxs(View, { className: "flex-row", children: [_jsx(View, { className: monetaryBox({ focused: isFocused, className: "w-10 h-10" }), children: _jsx(Typography.Text, { className: "text-xl", variant: "body", children: currencySymbol }) }), _jsx(View, { className: monetaryBox({ focused: isFocused, className: "flex-1 h-10 ml-2 px-4" }), children: _jsx(CurrencyInput, { delimiter: ".", keyboardType: "numeric", onBlur: () => setIsFocused(false), onChangeValue: handleChange, onFocus: () => setIsFocused(true), placeholder: placeholder, separator: ",", value: raw }) })] }));
+}
+export default MonetaryInput;

package/lib/Form/Form.PasswordInput.d.ts

@@ -0,0 +1,9 @@
+import InputField from "../Form/Form.InputField";
+import React from "react";
+export interface PasswordFieldProps {
+    label: string;
+    error?: string;
+    inputProps: React.ComponentProps<typeof InputField>["inputProps"];
+}
+declare const PasswordField: React.FC<PasswordFieldProps>;
+export default PasswordField;

package/lib/Form/Form.PasswordInput.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Ionicons } from "@expo/vector-icons";
+import InputField from "../Form/Form.InputField";
+import { useState } from "react";
+import { TouchableOpacity, View } from "react-native";
+const PasswordField = ({ label, error, inputProps }) => {
+    const [showPassword, setShowPassword] = useState(false);
+    return (_jsxs(View, { className: "mb-4 relative", children: [_jsx(InputField, { error: error, inputProps: {
+                    ...inputProps,
+                    secureTextEntry: !showPassword,
+                    autoComplete: "off",
+                    importantForAutofill: "no",
+                }, label: label }), _jsx(TouchableOpacity, { className: "absolute right-3 bottom-[25px]", onPress: () => setShowPassword(!showPassword), children: _jsx(Ionicons, { className: "text-text-primary", name: showPassword ? "eye-off-outline" : "eye-outline", size: 24 }) })] }));
+};
+export default PasswordField;

package/lib/Form/Form.QuantitySelector.d.ts

@@ -0,0 +1,10 @@
+import { StyleProp, ViewStyle } from "react-native";
+interface QuantitySelectorProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    style?: StyleProp<ViewStyle>;
+}
+declare function QuantitySelector({ value, onChange, min, max, style, }: QuantitySelectorProps): import("react/jsx-runtime").JSX.Element;
+export default QuantitySelector;

package/lib/Form/Form.QuantitySelector.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Display } from "../Display";
+import { Typography } from "../Typography";
+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",
+        button: "w-9 h-9 rounded-full justify-center items-center",
+        valueContainer: "min-w-[40px] items-center px-3",
+    },
+    variants: {
+        disabled: {
+            true: {
+                button: "opacity-50",
+            },
+        },
+    },
+});
+function QuantitySelector({ value, onChange, min = 1, max = 999, style, }) {
+    const handleDecrement = () => {
+        if (value > min) {
+            onChange(value - 1);
+        }
+    };
+    const handleIncrement = () => {
+        if (value < max) {
+            onChange(value + 1);
+        }
+    };
+    const decrementStyles = quantitySelector({ disabled: value <= min });
+    const incrementStyles = quantitySelector({ disabled: value >= max });
+    const containerStyles = quantitySelector();
+    return (_jsxs(View, { className: containerStyles.container(), style: style, children: [_jsx(TouchableOpacity, { className: decrementStyles.button(), disabled: value <= min, onPress: handleDecrement, children: _jsx(Display.Icon, { name: "minus", size: 16, type: "feather" }) }), _jsx(View, { className: containerStyles.valueContainer(), children: _jsx(Typography.Text, { semibold: true, variant: "body", children: value }) }), _jsx(TouchableOpacity, { className: incrementStyles.button(), disabled: value >= max, onPress: handleIncrement, children: _jsx(Display.Icon, { name: "plus", size: 16, type: "feather" }) })] }));
+}
+export default QuantitySelector;

package/lib/Form/Form.RadioButton.d.ts

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

package/lib/Form/Form.RadioButton.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from "../Typography";
+import { TouchableOpacity, View } from "react-native";
+import { tv } from "tailwind-variants";
+const radioButton = tv({
+    slots: {
+        container: "flex-row items-center py-2.5 px-3 rounded-lg border-[1.5px] border-border-default bg-bg-card",
+        radioCircle: "w-[18px] h-[18px] rounded-full border-2 border-border-default mr-2 justify-center items-center",
+        radioInner: "w-[9px] h-[9px] rounded-full",
+        label: "flex-1",
+    },
+    variants: {
+        selected: {
+            true: {
+                container: "border-accent bg-accent/10",
+                radioCircle: "border-accent",
+                radioInner: "bg-accent",
+                label: "text-text-primary font-semibold",
+            },
+            false: {
+                label: "text-text-secondary",
+            },
+        },
+    },
+    defaultVariants: { selected: false },
+});
+function RadioButton({ label, selected, onPress }) {
+    const styles = radioButton({ selected });
+    return (_jsxs(TouchableOpacity, { activeOpacity: 0.7, className: styles.container(), onPress: onPress, children: [_jsx(View, { className: styles.radioCircle(), children: selected && _jsx(View, { className: styles.radioInner() }) }), _jsx(Typography.Text, { className: styles.label(), variant: "bodySmall", children: label })] }));
+}
+export default RadioButton;

package/lib/Form/Form.SearchBar.d.ts

@@ -0,0 +1,8 @@
+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;
+export default SearchBar;

package/lib/Form/Form.SearchBar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Display } from "../Display";
+import { theme } from "../theme";
+import { cn, tv } from "../theme/tw";
+import { useState } from "react";
+import { TextInput, TouchableOpacity, View } from "react-native";
+const Icon = Display.Icon;
+const searchBarContainer = tv({
+    base: "flex-row items-center bg-bg-card rounded-lg px-2 h-10 shadow-sm",
+    variants: {
+        focused: {
+            true: "border-2 border-border-focus",
+            false: "border border-border-default",
+        },
+    },
+    defaultVariants: { focused: false },
+});
+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" }) }))] }));
+}
+export default SearchBar;

package/lib/Form/Form.TextInput.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { TextInputProps } from "react-native";
+export interface TextInputFProps extends TextInputProps {
+    error?: string;
+    className?: string;
+}
+declare const TextInputF: FC<TextInputFProps>;
+export default TextInputF;

package/lib/Form/Form.TextInput.js

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