@mrmeg/expo-ui 0.1.0

package/dist/components/Switch.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { palette } from "../constants/colors";
+import { fontFamilies } from "../constants/fonts";
+import { spacing } from "../constants/spacing";
+import { useTheme } from "../hooks/useTheme";
+import { hapticLight } from "../lib/haptics";
+import * as SwitchPrimitives from "@rn-primitives/switch";
+import { useCallback, useEffect, useRef } from "react";
+import { ActivityIndicator, Platform, StyleSheet, View } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, interpolate, useReducedMotion, } from "react-native-reanimated";
+import { StyledText } from "./StyledText";
+const DEFAULT_HIT_SLOP = 8;
+function Switch({ variant = "default", labelOn, labelOff, size = { width: 44, height: 24 }, thumbSize = 20, loading = false, style: styleOverride, ...props }) {
+    const { theme, getContrastingColor, withAlpha } = useTheme();
+    const reduceMotion = useReducedMotion();
+    const hasMounted = useRef(false);
+    // Fire haptic on user-initiated toggles (skip initial mount)
+    const wrappedOnCheckedChange = useCallback((checked) => {
+        if (hasMounted.current)
+            hapticLight();
+        props.onCheckedChange?.(checked);
+    }, [props.onCheckedChange]);
+    useEffect(() => {
+        hasMounted.current = true;
+    }, []);
+    // Single shared value drives everything: 0 = off, 1 = on
+    const progress = useSharedValue(props.checked ? 1 : 0);
+    useEffect(() => {
+        const target = props.checked ? 1 : 0;
+        if (reduceMotion) {
+            progress.value = withTiming(target, { duration: 0 });
+        }
+        else {
+            progress.value = withTiming(target, { duration: 120 });
+        }
+    }, [props.checked, reduceMotion]);
+    // Thumb slides from left to right
+    const thumbOffset = 2;
+    const thumbEnd = size.width - thumbSize - thumbOffset;
+    const thumbAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [
+            { translateX: interpolate(progress.value, [0, 1], [thumbOffset, thumbEnd]) },
+        ],
+    }));
+    const isIOS = variant === "ios";
+    // Keep the default checked state on a stable dark neutral so the white thumb
+    // stays distinct in both light and dark themes.
+    const checkedColor = isIOS ? "#34C759" : palette.gray900;
+    const uncheckedColor = theme.dark ? withAlpha(palette.white, 0.18) : palette.gray200;
+    const trackBg = props.checked ? checkedColor : uncheckedColor;
+    const trackBorderColor = props.checked
+        ? theme.dark
+            ? withAlpha(palette.white, 0.18)
+            : withAlpha(palette.black, 0.08)
+        : theme.dark
+            ? withAlpha(palette.white, 0.14)
+            : palette.gray300;
+    const thumbBorderColor = theme.dark
+        ? withAlpha(palette.black, 0.24)
+        : withAlpha(palette.black, 0.12);
+    const thumbIndicatorColor = props.checked ? checkedColor : theme.colors.textDim;
+    // Calculate label color for ON state
+    const labelOnColor = getContrastingColor(checkedColor, palette.white, palette.black);
+    const labelFontSize = size.height / 3;
+    // Flatten style override for web compatibility
+    const flattenedStyle = styleOverride ? StyleSheet.flatten(styleOverride) : undefined;
+    return (_jsxs(SwitchPrimitives.Root, { ...props, onCheckedChange: wrappedOnCheckedChange, style: {
+            position: "relative",
+            width: size.width,
+            height: size.height,
+            borderRadius: size.height / 2,
+            justifyContent: "center",
+            opacity: props.disabled ? 0.5 : 1,
+            ...(Platform.OS === "web" && { cursor: "pointer" }),
+            ...(flattenedStyle || {}),
+        }, hitSlop: DEFAULT_HIT_SLOP, accessibilityRole: "switch", accessibilityState: {
+            checked: props.checked,
+            disabled: !!props.disabled,
+            busy: loading,
+        }, children: [_jsx(View, { style: {
+                    ...StyleSheet.absoluteFillObject,
+                    borderRadius: size.height / 2,
+                    backgroundColor: trackBg,
+                    borderWidth: 1,
+                    borderColor: trackBorderColor,
+                }, pointerEvents: "none" }), labelOn && !isIOS && (_jsx(View, { style: {
+                    position: "absolute",
+                    left: spacing.sm,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    opacity: props.checked ? 1 : 0,
+                }, pointerEvents: "none", children: _jsx(StyledText, { style: {
+                        fontFamily: fontFamilies.sansSerif.bold,
+                        fontSize: labelFontSize,
+                        color: labelOnColor,
+                        userSelect: "none",
+                    }, children: labelOn }) })), _jsx(SwitchPrimitives.Thumb, { children: _jsx(Animated.View, { style: [
+                        {
+                            width: thumbSize,
+                            height: thumbSize,
+                            borderRadius: thumbSize / 2,
+                            backgroundColor: palette.white,
+                            borderWidth: 1,
+                            borderColor: thumbBorderColor,
+                            justifyContent: "center",
+                            alignItems: "center",
+                            ...(Platform.OS !== "web" && {
+                                shadowColor: "#000",
+                                shadowOffset: { width: 0, height: 1 },
+                                shadowOpacity: 0.15,
+                                shadowRadius: 2,
+                                elevation: 2,
+                            }),
+                        },
+                        thumbAnimatedStyle,
+                    ], children: loading && (_jsx(ActivityIndicator, { size: "small", color: thumbIndicatorColor })) }) }), labelOff && !isIOS && (_jsx(View, { style: {
+                    position: "absolute",
+                    right: spacing.sm,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    opacity: props.checked ? 0 : 1,
+                }, pointerEvents: "none", children: _jsx(StyledText, { style: {
+                        fontFamily: fontFamilies.sansSerif.bold,
+                        fontSize: labelFontSize,
+                        color: theme.colors.text,
+                        userSelect: "none",
+                    }, children: labelOff }) }))] }));
+}
+export { Switch };

package/dist/components/Tabs.d.ts

@@ -0,0 +1,31 @@
+import { type StyleProp, type ViewStyle } from "react-native";
+import * as TabsPrimitive from "@rn-primitives/tabs";
+import { type IconName } from "./Icon";
+type TabsVariant = "underline" | "pill";
+type TabsSize = "sm" | "md";
+export interface TabsProps extends TabsPrimitive.RootProps {
+    variant?: TabsVariant;
+    size?: TabsSize;
+}
+declare function TabsRoot({ variant, size, children, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export interface TabsListProps extends TabsPrimitive.ListProps {
+    style?: StyleProp<ViewStyle>;
+}
+declare function TabsList({ style, children, ...props }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+export interface TabsTriggerProps extends TabsPrimitive.TriggerProps {
+    icon?: IconName;
+    style?: StyleProp<ViewStyle>;
+}
+declare function TabsTriggerInner({ icon, style, children, value, ...props }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare const TabsTrigger: typeof TabsTriggerInner;
+export interface TabsContentProps extends TabsPrimitive.ContentProps {
+    style?: StyleProp<ViewStyle>;
+}
+declare function TabsContent({ style, children, ...props }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+declare const Tabs: typeof TabsRoot & {
+    List: typeof TabsList;
+    Trigger: typeof TabsTriggerInner;
+    Content: typeof TabsContent;
+};
+export { Tabs, TabsList, TabsTrigger, TabsContent, };
+export type { TabsVariant, TabsSize, };

package/dist/components/Tabs.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import * as TabsPrimitive from "@rn-primitives/tabs";
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
+import { StyledText, TextClassContext, TextColorContext } from "./StyledText";
+import { Icon } from "./Icon";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+// ============================================================================
+// Size configs
+// ============================================================================
+const SIZE_CONFIGS = {
+    sm: {
+        height: 32,
+        paddingHorizontal: spacing.sm,
+        fontSize: 12,
+        iconSize: spacing.iconSm,
+    },
+    md: {
+        height: 36,
+        paddingHorizontal: spacing.md,
+        fontSize: 13,
+        iconSize: spacing.iconMd,
+    },
+};
+const TabsContext = React.createContext({
+    variant: "underline",
+    size: "md",
+});
+function useTabsContext() {
+    return React.useContext(TabsContext);
+}
+function TabsRoot({ variant = "underline", size = "md", children, ...props }) {
+    return (_jsx(TabsContext.Provider, { value: { variant, size }, children: _jsx(TabsPrimitive.Root, { ...props, children: children }) }));
+}
+function TabsList({ style, children, ...props }) {
+    const { theme } = useTheme();
+    const { variant } = useTabsContext();
+    const listStyle = variant === "pill"
+        ? {
+            flexDirection: "row",
+            backgroundColor: theme.colors.muted,
+            borderRadius: spacing.radiusMd,
+            padding: 2,
+        }
+        : {
+            flexDirection: "row",
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.border,
+        };
+    return (_jsx(TabsPrimitive.List, { style: StyleSheet.flatten([listStyle, style]), ...props, children: children }));
+}
+function TabsTriggerInner({ icon, style, children, value, ...props }) {
+    const { theme } = useTheme();
+    const { variant, size } = useTabsContext();
+    const sizeConfig = SIZE_CONFIGS[size];
+    const reduceMotion = useReducedMotion();
+    const isDisabled = props.disabled ?? false;
+    // Determine selected state by comparing trigger value with root value
+    const rootContext = TabsPrimitive.useRootContext();
+    const isSelected = rootContext.value === value;
+    const activeOpacity = useSharedValue(isSelected ? 1 : 0);
+    React.useEffect(() => {
+        activeOpacity.value = reduceMotion
+            ? (isSelected ? 1 : 0)
+            : withTiming(isSelected ? 1 : 0, { duration: 200 });
+    }, [isSelected, reduceMotion]);
+    const indicatorStyle = useAnimatedStyle(() => ({
+        opacity: activeOpacity.value,
+    }));
+    const textColor = isDisabled
+        ? theme.colors.mutedForeground
+        : isSelected
+            ? theme.colors.foreground
+            : theme.colors.mutedForeground;
+    const triggerBaseStyle = {
+        flex: 1,
+        height: sizeConfig.height,
+        paddingHorizontal: sizeConfig.paddingHorizontal,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacing.xs,
+        opacity: isDisabled ? 0.5 : 1,
+        ...(Platform.OS === "web" && { cursor: isDisabled ? "default" : "pointer", outlineStyle: "none" }),
+    };
+    const pillActiveStyle = isSelected && variant === "pill" ? {
+        backgroundColor: theme.colors.background,
+        borderRadius: spacing.radiusSm,
+    } : {};
+    return (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsxs(TabsPrimitive.Trigger, { value: value, style: StyleSheet.flatten([triggerBaseStyle, pillActiveStyle, style]), ...props, children: [_jsxs(View, { style: triggerContentStyles.container, children: [icon && (_jsx(Icon, { name: icon, size: sizeConfig.iconSize, color: textColor, decorative: true })), typeof children === "string" ? (_jsx(StyledText, { style: { fontSize: sizeConfig.fontSize }, children: children })) : children] }), variant === "underline" && (_jsx(Animated.View, { style: [
+                            {
+                                position: "absolute",
+                                bottom: 0,
+                                left: 0,
+                                right: 0,
+                                height: 2,
+                                backgroundColor: theme.colors.foreground,
+                            },
+                            indicatorStyle,
+                        ] }))] }) }) }));
+}
+const TabsTrigger = TabsTriggerInner;
+function TabsContent({ style, children, ...props }) {
+    return (_jsx(TabsPrimitive.Content, { style: StyleSheet.flatten([{ marginTop: spacing.md }, style]), ...props, children: children }));
+}
+// ============================================================================
+// Styles
+// ============================================================================
+const triggerContentStyles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: spacing.xs,
+    },
+});
+// ============================================================================
+// Compound Export
+// ============================================================================
+const Tabs = Object.assign(TabsRoot, {
+    List: TabsList,
+    Trigger: TabsTrigger,
+    Content: TabsContent,
+});
+export { Tabs, TabsList, TabsTrigger, TabsContent, };

package/dist/components/TextInput.d.ts

@@ -0,0 +1,120 @@
+import React, { ReactNode } from "react";
+import { TextInput as RNTextInput, ViewStyle, TextStyle, TextInputProps, StyleProp } from "react-native";
+/**
+ * Size variants for TextInput
+ */
+export type TextInputSize = "sm" | "md" | "lg";
+/**
+ * Visual variants for TextInput
+ */
+export type TextInputVariant = "outline" | "filled" | "underlined";
+interface TextInputCustomProps extends TextInputProps {
+    /**
+     * Visual variant
+     * @default "outline"
+     */
+    variant?: TextInputVariant;
+    /**
+     * Size variant
+     * @default "md"
+     */
+    size?: TextInputSize;
+    /**
+     * Label text displayed above the input
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Error message displayed below the input (overrides helperText)
+     */
+    errorText?: string;
+    /**
+     * Whether the input is in an error state
+     */
+    error?: boolean;
+    /**
+     * Whether the field is required (shows asterisk)
+     */
+    required?: boolean;
+    /**
+     * Number of rows for multiline input
+     */
+    rows?: number;
+    /**
+     * Whether to show the password visibility toggle
+     * Only applies when secureTextEntry is true
+     */
+    showSecureEntryToggle?: boolean;
+    /**
+     * Custom element to render on the left side of the input
+     */
+    leftElement?: ReactNode;
+    /**
+     * Custom element to render on the right side of the input
+     */
+    rightElement?: ReactNode;
+    /**
+     * Shows an X button to clear the input when it has a value.
+     * Not shown alongside showSecureEntryToggle or on multiline inputs.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Wrapper view style
+     */
+    wrapperStyle?: StyleProp<ViewStyle>;
+    /**
+     * Style applied when input is focused
+     */
+    focusedStyle?: StyleProp<TextStyle>;
+    /**
+     * Force light theme colors (useful for dark backgrounds)
+     */
+    forceLight?: boolean;
+}
+/**
+ * Enhanced TextInput Component
+ *
+ * Features:
+ * - Size variants (sm, md, lg)
+ * - Visual variants (outline, filled, underlined)
+ * - Error states with error text
+ * - Helper text
+ * - Required indicator (asterisk)
+ * - Left/right custom elements
+ * - Password visibility toggle with eye/eye-off icons
+ * - Full accessibility support
+ * - Disabled state styling
+ *
+ * Usage:
+ * ```tsx
+ * // Basic
+ * <TextInput label="Email" placeholder="Enter email" />
+ *
+ * // With error
+ * <TextInput
+ *   label="Email"
+ *   error
+ *   errorText="Email is required"
+ * />
+ *
+ * // With helper text
+ * <TextInput
+ *   label="Password"
+ *   helperText="Must be at least 8 characters"
+ *   secureTextEntry
+ *   showSecureEntryToggle
+ * />
+ *
+ * // With custom elements
+ * <TextInput
+ *   label="Search"
+ *   leftElement={<Icon as={Search} size={20} />}
+ * />
+ * ```
+ */
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputCustomProps & React.RefAttributes<RNTextInput>>;
+export {};

package/dist/components/TextInput.js

@@ -0,0 +1,263 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { StyleSheet, TextInput as RNTextInput, Platform, View, Pressable, } from "react-native";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import { fontFamilies } from "../constants/fonts";
+import { StyledText } from "./StyledText";
+import { Icon } from "./Icon";
+import { hapticLight } from "../lib/haptics";
+import { palette } from "../constants/colors";
+const NUMERIC_REGEX = /^[0-9]*$/;
+const SIZE_CONFIGS = {
+    sm: {
+        height: 32,
+        fontSize: 13,
+        paddingVertical: spacing.xs,
+        paddingHorizontal: spacing.sm,
+    },
+    md: {
+        height: 36,
+        fontSize: 14,
+        paddingVertical: spacing.xs,
+        paddingHorizontal: spacing.sm,
+    },
+    lg: {
+        height: 40,
+        fontSize: 15,
+        paddingVertical: spacing.sm,
+        paddingHorizontal: spacing.md,
+    },
+};
+/**
+ * Enhanced TextInput Component
+ *
+ * Features:
+ * - Size variants (sm, md, lg)
+ * - Visual variants (outline, filled, underlined)
+ * - Error states with error text
+ * - Helper text
+ * - Required indicator (asterisk)
+ * - Left/right custom elements
+ * - Password visibility toggle with eye/eye-off icons
+ * - Full accessibility support
+ * - Disabled state styling
+ *
+ * Usage:
+ * ```tsx
+ * // Basic
+ * <TextInput label="Email" placeholder="Enter email" />
+ *
+ * // With error
+ * <TextInput
+ *   label="Email"
+ *   error
+ *   errorText="Email is required"
+ * />
+ *
+ * // With helper text
+ * <TextInput
+ *   label="Password"
+ *   helperText="Must be at least 8 characters"
+ *   secureTextEntry
+ *   showSecureEntryToggle
+ * />
+ *
+ * // With custom elements
+ * <TextInput
+ *   label="Search"
+ *   leftElement={<Icon as={Search} size={20} />}
+ * />
+ * ```
+ */
+export const TextInput = React.forwardRef(({ variant = "outline", size = "md", label, helperText, errorText, error, required, rows, showSecureEntryToggle, leftElement, rightElement, clearable = false, wrapperStyle, focusedStyle, forceLight, secureTextEntry, inputMode, style, onChangeText, onFocus, onBlur, value, multiline, editable = true, ...rest }, ref) => {
+    const { theme, getContrastingColor } = useTheme();
+    const styles = createStyles(theme, variant, size);
+    const [focused, setFocused] = useState(false);
+    const [contentHeight, setContentHeight] = useState(0);
+    const [passwordVisible, setPasswordVisible] = useState(false);
+    const isDisabled = editable === false;
+    const hasError = error || !!errorText;
+    // Determine background color
+    const backgroundColor = forceLight
+        ? palette.white
+        : variant === "filled"
+            ? theme.colors.card
+            : "transparent";
+    // Handle numeric input validation
+    const handleNumericChange = (input) => {
+        if (NUMERIC_REGEX.test(input)) {
+            onChangeText?.(input);
+        }
+    };
+    const handleTextChange = (input) => {
+        onChangeText?.(input);
+    };
+    const sizeConfig = SIZE_CONFIGS[size];
+    // Pre-calculate all values to avoid expensive recalculations on every keystroke
+    const borderColor = hasError
+        ? theme.colors.destructive
+        : focused
+            ? theme.colors.primary
+            : forceLight
+                ? "#d1d5db"
+                : theme.colors.border;
+    const inputPaddingLeft = leftElement
+        ? sizeConfig.paddingHorizontal + spacing.xl
+        : sizeConfig.paddingHorizontal;
+    const hasSecureToggle = !!(secureTextEntry && showSecureEntryToggle);
+    const showClearButton = clearable && !hasSecureToggle && !multiline && !isDisabled && !!value;
+    const hasRightSlot = !!rightElement || hasSecureToggle || showClearButton;
+    const showErrorIcon = hasError && !hasRightSlot && !multiline;
+    const inputPaddingRight = hasRightSlot || showErrorIcon
+        ? sizeConfig.paddingHorizontal + spacing.xl
+        : sizeConfig.paddingHorizontal;
+    const textColor = forceLight
+        ? "#1f2937"
+        : getContrastingColor(backgroundColor === "transparent" ? theme.colors.background : backgroundColor, theme.colors.text, palette.white);
+    const shouldScroll = multiline && rest.scrollEnabled !== false && contentHeight > 100;
+    const handleFocus = (e) => {
+        setFocused(true);
+        onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setFocused(false);
+        onBlur?.(e);
+    };
+    const togglePasswordVisible = () => {
+        setPasswordVisible(v => !v);
+    };
+    return (_jsxs(View, { style: wrapperStyle, children: [!!label && (_jsx(View, { style: styles.labelContainer, children: _jsxs(StyledText, { style: styles.label, children: [label, required && _jsx(StyledText, { style: styles.required, children: " *" })] }) })), _jsxs(View, { style: styles.wrapper, children: [leftElement && _jsx(View, { style: styles.leftElement, children: leftElement }), _jsx(RNTextInput, { ref: ref, ...rest, editable: editable, inputMode: inputMode || "text", multiline: multiline, numberOfLines: rows, secureTextEntry: secureTextEntry && !passwordVisible, onChangeText: inputMode === "numeric" ? handleNumericChange : handleTextChange, onFocus: handleFocus, onBlur: handleBlur, onContentSizeChange: (e) => setContentHeight(e.nativeEvent.contentSize.height), scrollEnabled: shouldScroll, placeholderTextColor: theme.colors.textDim, style: [
+                            styles.input,
+                            {
+                                backgroundColor,
+                                borderColor,
+                                color: textColor,
+                                fontSize: sizeConfig.fontSize,
+                                minHeight: multiline ? undefined : sizeConfig.height,
+                                paddingVertical: sizeConfig.paddingVertical,
+                                paddingLeft: inputPaddingLeft,
+                                paddingRight: inputPaddingRight,
+                            },
+                            variant === "underlined" && styles.underlined,
+                            variant === "filled" && styles.filled,
+                            style,
+                            focused && focusedStyle,
+                            focused && Platform.OS === "web" && {
+                                boxShadow: `0 0 0 2px ${theme.colors.background}, 0 0 0 4px ${theme.colors.primary}`,
+                            },
+                            isDisabled && styles.disabled,
+                            hasError && styles.error,
+                            Platform.OS === "web" && { fontSize: Math.max(sizeConfig.fontSize, 16) },
+                        ], textAlignVertical: multiline ? "top" : "center", value: value, accessibilityLabel: label, accessibilityHint: helperText || errorText, accessibilityState: { disabled: isDisabled }, "aria-invalid": hasError, "aria-required": required }), showClearButton && !rightElement && (_jsx(Pressable, { style: styles.clearButton, onPress: () => {
+                            hapticLight();
+                            onChangeText?.("");
+                        }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) })), showClearButton && rightElement && !hasSecureToggle && (_jsxs(View, { style: styles.rightElements, children: [_jsx(Pressable, { onPress: () => {
+                                    hapticLight();
+                                    onChangeText?.("");
+                                }, accessibilityLabel: "Clear input", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: spacing.iconSm, color: "textDim", decorative: true }) }), rightElement] })), !showClearButton && rightElement && !hasSecureToggle && (_jsx(View, { style: styles.rightElement, children: rightElement })), secureTextEntry && showSecureEntryToggle && (_jsx(Pressable, { style: styles.passwordToggle, onPress: togglePasswordVisible, accessibilityLabel: passwordVisible ? "Hide password" : "Show password", accessibilityRole: "button", children: _jsx(Icon, { name: passwordVisible ? "eye-off" : "eye", size: spacing.iconSm + 4, color: "textDim" }) })), showErrorIcon && (_jsx(View, { style: styles.errorIcon, accessibilityLabel: "Error", pointerEvents: "none", children: _jsx(Icon, { name: "alert-circle", size: spacing.iconSm, color: "destructive", decorative: true }) }))] }), !!(helperText || errorText) && (_jsx(StyledText, { style: [
+                    styles.helperText,
+                    hasError && styles.errorText,
+                ], children: errorText || helperText }))] }));
+});
+TextInput.displayName = "TextInput";
+const createStyles = (theme, variant, size) => StyleSheet.create({
+    wrapper: {
+        width: "100%",
+        position: "relative",
+        backgroundColor: "transparent",
+        justifyContent: "center",
+    },
+    input: {
+        fontFamily: fontFamilies.sansSerif.regular,
+        borderRadius: spacing.radiusMd,
+        borderWidth: 1,
+        ...(Platform.OS === "web" && { outlineStyle: "none" }),
+    },
+    underlined: {
+        borderRadius: 0,
+        borderWidth: 0,
+        borderBottomWidth: 2,
+    },
+    filled: {
+        borderWidth: 0,
+        borderBottomWidth: 2,
+    },
+    disabled: {
+        opacity: 0.6,
+        ...(Platform.OS === "web" && { cursor: "not-allowed" }),
+    },
+    error: {
+        borderColor: theme.colors.destructive,
+    },
+    labelContainer: {
+        flexDirection: "row",
+        marginBottom: spacing.xs,
+    },
+    label: {
+        fontFamily: fontFamilies.sansSerif.regular,
+        fontWeight: "500",
+        fontSize: 14,
+        color: theme.colors.text,
+    },
+    required: {
+        color: theme.colors.destructive,
+        fontFamily: fontFamilies.sansSerif.bold,
+    },
+    helperText: {
+        fontFamily: fontFamilies.sansSerif.regular,
+        fontSize: 12,
+        color: theme.colors.textDim,
+        marginTop: spacing.xs,
+    },
+    errorText: {
+        color: theme.colors.destructive,
+    },
+    leftElement: {
+        position: "absolute",
+        left: spacing.sm,
+        top: "50%",
+        transform: [{ translateY: -10 }],
+        zIndex: 1,
+    },
+    rightElement: {
+        position: "absolute",
+        right: spacing.sm,
+        top: "50%",
+        transform: [{ translateY: -10 }],
+        zIndex: 1,
+    },
+    passwordToggle: {
+        position: "absolute",
+        right: spacing.sm,
+        top: "50%",
+        transform: [{ translateY: Platform.OS === "web" ? -10 : -12 }],
+        zIndex: 1,
+        ...(Platform.OS === "web" && { cursor: "pointer" }),
+    },
+    errorIcon: {
+        position: "absolute",
+        right: spacing.sm,
+        top: "50%",
+        transform: [{ translateY: -10 }],
+        zIndex: 1,
+    },
+    clearButton: {
+        position: "absolute",
+        right: spacing.sm,
+        top: "50%",
+        transform: [{ translateY: Platform.OS === "web" ? -10 : -12 }],
+        zIndex: 1,
+        ...(Platform.OS === "web" && { cursor: "pointer" }),
+    },
+    rightElements: {
+        position: "absolute",
+        right: spacing.sm,
+        top: 0,
+        bottom: 0,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.xs,
+        zIndex: 1,
+    },
+});