@oxyhq/services 5.7.5 → 5.8.1

package/lib/module/ui/components/internal/TextField.js

@@ -1,591 +1,651 @@
 "use strict";
 
-import React, { useState, useCallback, forwardRef, useEffect, useRef } from 'react';
+import React, { useState, useCallback, forwardRef, useEffect, useRef, useMemo } from 'react';
 import { View, Text, TextInput, TouchableOpacity, ActivityIndicator, StyleSheet, Platform, Animated } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import Svg, { Path } from 'react-native-svg';
+import { fontFamilies } from '../../styles/fonts';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Color palette for different states
+const colorPalette = {
+  primary: {
+    main: '#d169e5',
+    light: '#e8b5f0',
+    dark: '#a64db3'
+  },
+  secondary: {
+    main: '#666666',
+    light: '#999999',
+    dark: '#333333'
+  },
+  error: {
+    main: '#D32F2F',
+    light: '#ffcdd2',
+    dark: '#b71c1c'
+  },
+  success: {
+    main: '#2E7D32',
+    light: '#c8e6c9',
+    dark: '#1b5e20'
+  },
+  warning: {
+    main: '#FF9800',
+    light: '#ffe0b2',
+    dark: '#e65100'
+  }
+};
+
+// Surface scale for consistent theming
+const surfaceScale = level => {
+  const base = 255;
+  const value = Math.round(base - level * 255);
+  return `#${value.toString(16).padStart(2, '0').repeat(3)}`;
+};
+
+// Password strength calculation
+const calculatePasswordStrength = password => {
+  if (!password) return {
+    score: 0,
+    feedback: '',
+    color: '#E0E0E0',
+    label: ''
+  };
+  let score = 0;
+  const feedback = [];
+  if (password.length >= 8) score += 25;else feedback.push('At least 8 characters');
+  if (/[A-Z]/.test(password)) score += 25;else feedback.push('One uppercase letter');
+  if (/[a-z]/.test(password)) score += 25;else feedback.push('One lowercase letter');
+  if (/[\d\W]/.test(password)) score += 25;else feedback.push('One number or special character');
+  const colors = {
+    0: '#E0E0E0',
+    25: '#D32F2F',
+    50: '#FF9800',
+    75: '#2196F3',
+    100: '#4CAF50'
+  };
+  const labels = {
+    0: '',
+    25: 'Weak',
+    50: 'Fair',
+    75: 'Good',
+    100: 'Strong'
+  };
+  return {
+    score,
+    feedback: score === 100 ? 'Strong password!' : `Missing: ${feedback.join(', ')}`,
+    color: colors[score] || colors[0],
+    label: labels[score] || ''
+  };
+};
+
+// Input formatting utilities
+const formatters = {
+  phone: value => {
+    const cleaned = value.replace(/\D/g, '');
+    const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
+    if (match) return `(${match[1]}) ${match[2]}-${match[3]}`;
+    return value;
+  },
+  creditCard: value => {
+    const cleaned = value.replace(/\D/g, '');
+    const match = cleaned.match(/^(\d{4})(\d{4})(\d{4})(\d{4})$/);
+    if (match) return `${match[1]} ${match[2]} ${match[3]} ${match[4]}`;
+    return value.replace(/(.{4})/g, '$1 ').trim();
+  },
+  currency: value => {
+    const cleaned = value.replace(/[^\d.]/g, '');
+    const num = parseFloat(cleaned);
+    return isNaN(num) ? value : `$${num.toFixed(2)}`;
+  }
+};
+
+// Debounce hook
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};
 const TextField = /*#__PURE__*/forwardRef(({
+  // Basic props
   label,
-  icon,
-  iconColor,
+  variant = 'filled',
+  color = 'primary',
+  // Leading and trailing
+  leading,
+  trailing,
+  // States
   error,
   success = false,
   loading = false,
-  rightComponent,
-  leftComponent,
-  colors,
-  containerStyle,
+  disabled = false,
+  // Helper text
+  helperText,
+  // Enhanced features
+  maxLength,
+  showCharacterCount,
+  inputMask,
+  customMask,
+  formatValue,
+  validateOnChange,
+  debounceMs = 300,
+  passwordStrength = false,
+  clearable = false,
+  // Mouse events
+  onMouseEnter,
+  onMouseLeave,
+  // Styling
+  style,
+  inputContainerStyle,
   inputStyle,
-  labelStyle,
-  errorStyle,
-  variant = 'outlined',
+  leadingContainerStyle,
+  trailingContainerStyle,
+  // Callbacks
+  onValidationChange,
+  onClear,
+  // TextInput props
+  placeholder,
   onFocus,
   onBlur,
   onChangeText,
-  testID,
-  secureTextEntry,
   value = '',
-  validMessage,
-  ...textInputProps
+  secureTextEntry,
+  ...rest
 }, ref) => {
-  const [isFocused, setIsFocused] = useState(false);
+  // State management
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
-  const [isLabelFloating, setIsLabelFloating] = useState(value ? true : false);
-  const [labelWidth, setLabelWidth] = useState(0);
-  const [labelLeft, setLabelLeft] = useState(0);
-  const [inputWidth, setInputWidth] = useState(0);
-  const [inputHeight, setInputHeight] = useState(64);
-  const borderRadius = 16;
-  const borderWidth = 2;
-
-  // Animation values
-  const labelAnim = useRef(new Animated.Value(value ? 1 : 0)).current;
-  const borderAnim = useRef(new Animated.Value(0)).current;
-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-    onFocus?.();
-
-    // Animate label to top
-    Animated.timing(labelAnim, {
-      toValue: 1,
-      duration: 200,
-      useNativeDriver: false
-    }).start();
+  const [internalValue, setInternalValue] = useState(value);
+  const [isValidating, setIsValidating] = useState(false);
+
+  // Refs
+  const focusAnimation = useRef(new Animated.Value(0)).current;
+  const activeAnimation = useRef(new Animated.Value(Boolean(value) ? 1 : 0)).current;
+  const inputRef = useRef(null);
+
+  // Get color palette
+  const palette = colorPalette[color] || colorPalette.primary;
+
+  // Determine if we should show error colors
+  const effectiveColor = error ? 'error' : success ? 'success' : color;
+  const effectivePalette = colorPalette[effectiveColor] || colorPalette.primary;
+
+  // Get icon color based on focus state and error state
+  const iconColor = error ? effectivePalette.main // Always show error color when there's an error
+  : focused ? effectivePalette.main : surfaceScale(0.62);
+
+  // Helper function to clone React elements with updated color
+  const cloneWithColor = (element, color) => {
+    if (/*#__PURE__*/React.isValidElement(element) && element.type) {
+      return /*#__PURE__*/React.cloneElement(element, {
+        ...element.props,
+        color: color
+      });
+    }
+    return element;
+  };
+
+  // Render leading/trailing elements
+  const leadingNode = typeof leading === 'function' ? leading({
+    color: iconColor,
+    size: 24
+  }) : cloneWithColor(leading, iconColor);
+  const trailingNode = typeof trailing === 'function' ? trailing({
+    color: iconColor,
+    size: 24
+  }) : cloneWithColor(trailing, iconColor);
+
+  // Debounced value for validation
+  const debouncedValue = useDebounce(internalValue, debounceMs);
+
+  // Password strength calculation
+  const passwordStrengthData = useMemo(() => {
+    if (passwordStrength && secureTextEntry && internalValue) {
+      return calculatePasswordStrength(internalValue);
+    }
+    return null;
+  }, [passwordStrength, secureTextEntry, internalValue]);
+
+  // Format input value
+  const formatInputValue = useCallback(text => {
+    if (formatValue) return formatValue(text);
+    if (inputMask && inputMask !== 'custom' && formatters[inputMask]) {
+      return formatters[inputMask](text);
+    }
+    if (customMask) return customMask(text);
+    return text;
+  }, [formatValue, inputMask, customMask]);
+
+  // Handle focus
+  const handleFocus = useCallback(event => {
+    if (disabled) return;
+    setFocused(true);
+    onFocus?.(event);
+  }, [disabled, onFocus]);
+
+  // Handle blur
+  const handleBlur = useCallback(event => {
+    setFocused(false);
+    onBlur?.(event);
+  }, [onBlur]);
+
+  // Handle mouse events
+  const handleMouseEnter = useCallback(event => {
+    onMouseEnter?.(event);
+    setHovered(true);
+  }, [onMouseEnter]);
+  const handleMouseLeave = useCallback(event => {
+    onMouseLeave?.(event);
+    setHovered(false);
+  }, [onMouseLeave]);
+
+  // Handle text change
+  const handleChangeText = useCallback(text => {
+    const formattedText = formatInputValue(text);
+    setInternalValue(formattedText);
+    onChangeText?.(formattedText);
+  }, [formatInputValue, onChangeText]);
+
+  // Handle clear
+  const handleClear = useCallback(() => {
+    setInternalValue('');
+    onChangeText?.('');
+    onClear?.();
+    inputRef.current?.focus();
+  }, [onChangeText, onClear]);
+
+  // Toggle password visibility
+  const togglePasswordVisibility = useCallback(() => {
+    setShowPassword(prev => !prev);
+  }, []);
 
-    // Animate border
-    Animated.timing(borderAnim, {
-      toValue: 1,
+  // Animate focus state
+  useEffect(() => {
+    Animated.timing(focusAnimation, {
+      toValue: focused ? 1 : 0,
       duration: 200,
       useNativeDriver: false
     }).start();
-  }, [onFocus, labelAnim, borderAnim]);
-  const handleBlur = useCallback(() => {
-    setIsFocused(false);
-    onBlur?.();
-
-    // Animate border back
-    Animated.timing(borderAnim, {
-      toValue: 0,
+  }, [focused, focusAnimation]);
+
+  // Animate active state (when focused or has value)
+  useEffect(() => {
+    const shouldBeActive = focused || Boolean(internalValue);
+    Animated.timing(activeAnimation, {
+      toValue: shouldBeActive ? 1 : 0,
       duration: 200,
       useNativeDriver: false
     }).start();
+  }, [focused, internalValue, activeAnimation]);
 
-    // Keep label at top if there's a value
-    if (!value) {
-      Animated.timing(labelAnim, {
-        toValue: 0,
-        duration: 200,
-        useNativeDriver: false
-      }).start();
-    }
-  }, [onBlur, borderAnim, labelAnim, value]);
-  const handleChangeText = useCallback(text => {
-    onChangeText?.(text);
-
-    // Animate label if value changes from empty to filled or vice versa
-    const shouldShowLabel = text.length > 0;
-    if (shouldShowLabel !== isLabelFloating) {
-      setIsLabelFloating(shouldShowLabel);
-      Animated.timing(labelAnim, {
-        toValue: shouldShowLabel ? 1 : 0,
-        duration: 200,
-        useNativeDriver: false
-      }).start();
-    }
-  }, [onChangeText, labelAnim, isLabelFloating]);
+  // Validation effect
+  useEffect(() => {
+    if (!validateOnChange || !onValidationChange) return;
+    const timer = setTimeout(() => {
+      setIsValidating(true);
+      const isValid = !error && debouncedValue.length > 0;
+      onValidationChange(isValid, debouncedValue);
+      setIsValidating(false);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [debouncedValue, validateOnChange, onValidationChange, error]);
 
-  // Initialize label position based on current value
+  // Update internal value when prop changes
   useEffect(() => {
-    if (value && !isLabelFloating) {
-      setIsLabelFloating(true);
-      labelAnim.setValue(1);
-    }
-  }, [value, isLabelFloating, labelAnim]);
-  const togglePasswordVisibility = useCallback(() => {
-    setShowPassword(!showPassword);
-  }, [showPassword]);
-  const getBorderColor = () => {
-    if (error) return colors?.error || '#D32F2F';
-    if (success) return colors?.success || '#2E7D32';
-    if (isFocused) return colors?.primary || '#d169e5';
-    return colors?.border || '#E0E0E0';
-  };
-  const getIconColor = () => {
-    if (isFocused) return colors?.primary || '#d169e5';
-    return iconColor || colors?.secondaryText || '#666666';
+    setInternalValue(value);
+  }, [value]);
+
+  // Styles
+  const styles = useMemo(() => {
+    const isActive = focused || Boolean(internalValue);
+    return StyleSheet.create({
+      container: {
+        width: '100%',
+        marginBottom: 24
+      },
+      inputContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        minHeight: variant === 'standard' ? 48 : 56,
+        backgroundColor: variant === 'filled' ? focused ? surfaceScale(0.08) : hovered ? surfaceScale(0.08) : surfaceScale(0.04) : 'transparent',
+        borderRadius: variant === 'standard' ? 0 : variant === 'filled' ? 16 : 8,
+        borderTopLeftRadius: variant === 'filled' ? 16 : undefined,
+        borderTopRightRadius: variant === 'filled' ? 16 : undefined,
+        borderBottomLeftRadius: variant === 'filled' ? 0 : undefined,
+        borderBottomRightRadius: variant === 'filled' ? 0 : undefined,
+        borderWidth: variant === 'outlined' ? focused ? 2 : 1 : 0,
+        borderColor: error ? effectivePalette.main // Always show error color when there's an error
+        : focused ? effectivePalette.main : hovered ? surfaceScale(0.87) : surfaceScale(0.42),
+        position: 'relative',
+        ...Platform.select({
+          web: {
+            outlineStyle: 'none',
+            outlineWidth: 0,
+            outlineOffset: 0
+          },
+          default: {}
+        })
+      },
+      input: {
+        flex: 1,
+        minHeight: variant === 'standard' ? 48 : 56,
+        paddingStart: leadingNode ? 12 : variant === 'standard' ? 0 : 16,
+        paddingEnd: trailingNode || clearable || secureTextEntry ? 12 : variant === 'standard' ? 0 : 16,
+        paddingTop: variant === 'filled' && label ? 18 : 0,
+        color: surfaceScale(0.87),
+        fontSize: 16,
+        borderWidth: 0,
+        backgroundColor: 'transparent',
+        ...Platform.select({
+          web: {
+            border: 'none',
+            outlineStyle: 'none',
+            outlineWidth: 0,
+            outlineOffset: 0,
+            boxShadow: 'none',
+            '-webkit-appearance': 'none',
+            '-moz-appearance': 'none',
+            appearance: 'none'
+          },
+          default: {}
+        })
+      },
+      leading: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 24,
+        height: 24,
+        marginStart: variant === 'standard' ? 0 : 12,
+        marginVertical: variant === 'standard' ? 12 : 16
+      },
+      trailing: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginEnd: variant === 'standard' ? 0 : 12,
+        marginVertical: variant === 'standard' ? 12 : 16
+      },
+      underline: {
+        position: 'absolute',
+        start: 0,
+        end: 0,
+        bottom: 0,
+        height: 1,
+        backgroundColor: error ? effectivePalette.main // Always show error color when there's an error
+        : hovered ? surfaceScale(0.87) : surfaceScale(0.42)
+      },
+      underlineFocused: {
+        position: 'absolute',
+        start: 0,
+        end: 0,
+        bottom: 0,
+        height: 2,
+        backgroundColor: effectivePalette.main
+      },
+      labelContainer: {
+        justifyContent: 'center',
+        position: 'absolute',
+        top: 0,
+        start: variant === 'standard' ? leadingNode ? 36 : 0 : leadingNode ? 48 : 16,
+        height: variant === 'standard' ? 48 : 56
+      },
+      label: {
+        fontSize: 16,
+        fontFamily: fontFamilies.phuduSemiBold,
+        color: surfaceScale(0.87)
+      },
+      helperText: {
+        fontSize: 12,
+        fontFamily: fontFamilies.phuduMedium,
+        marginTop: 4,
+        marginHorizontal: 16,
+        color: surfaceScale(0.6)
+      },
+      passwordStrengthContainer: {
+        marginTop: 8,
+        marginHorizontal: 16
+      },
+      passwordStrengthBar: {
+        height: 4,
+        backgroundColor: '#E0E0E0',
+        borderRadius: 2,
+        overflow: 'hidden'
+      },
+      passwordStrengthFill: {
+        height: '100%',
+        borderRadius: 2
+      },
+      passwordStrengthText: {
+        fontSize: 11,
+        fontWeight: '600',
+        marginTop: 4
+      },
+      characterCount: {
+        fontSize: 11,
+        marginTop: 4,
+        marginHorizontal: 16,
+        textAlign: 'right',
+        color: surfaceScale(0.6)
+      },
+      clearButton: {
+        padding: 4,
+        marginLeft: 8
+      },
+      passwordToggle: {
+        padding: 4,
+        marginLeft: 8
+      },
+      validationIndicator: {
+        marginLeft: 8
+      }
+    });
+  }, [variant, focused, hovered, effectivePalette, leadingNode, trailingNode, clearable, secureTextEntry, label, error, internalValue]);
+
+  // Character count display
+  const characterCount = internalValue.length;
+  const showCount = showCharacterCount && maxLength;
+
+  // Render password strength indicator
+  const renderPasswordStrength = () => {
+    if (!passwordStrengthData) return null;
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.passwordStrengthContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.passwordStrengthBar,
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.passwordStrengthFill, {
+            width: `${passwordStrengthData.score}%`,
+            backgroundColor: passwordStrengthData.color
+          }]
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [styles.passwordStrengthText, {
+          color: passwordStrengthData.color
+        }],
+        children: passwordStrengthData.label
+      })]
+    });
   };
-  const getLabelColor = () => {
-    if (error) return colors?.error || '#D32F2F';
-    if (isFocused) return colors?.primary || '#d169e5';
-    return colors?.secondaryText || '#666666';
+
+  // Render character count
+  const renderCharacterCount = () => {
+    if (!showCount) return null;
+    return /*#__PURE__*/_jsxs(Text, {
+      style: styles.characterCount,
+      children: [characterCount, "/", maxLength]
+    });
   };
-  const getBackgroundColor = () => {
-    if (variant === 'filled') {
-      return colors?.inputBackground || '#F5F5F5';
+
+  // Get helper text content (error takes precedence over helper text)
+  const helperTextContent = error || helperText;
+
+  // Render trailing elements
+  const renderTrailingElements = () => {
+    const elements = [];
+
+    // Loading indicator
+    if (isValidating) {
+      elements.push(/*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: effectivePalette.main,
+        style: styles.validationIndicator
+      }, "validating"));
+    }
+
+    // Loading indicator
+    if (loading && !isValidating) {
+      elements.push(/*#__PURE__*/_jsx(ActivityIndicator, {
+        size: "small",
+        color: effectivePalette.main,
+        style: styles.validationIndicator
+      }, "loading"));
+    }
+
+    // Success indicator
+    if (success && !loading && !isValidating) {
+      elements.push(/*#__PURE__*/_jsx(Ionicons, {
+        name: "checkmark-circle",
+        size: 22,
+        color: colorPalette.success.main,
+        style: styles.validationIndicator
+      }, "success"));
+    }
+
+    // Clear button
+    if (clearable && internalValue && !secureTextEntry) {
+      elements.push(/*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.clearButton,
+        onPress: handleClear,
+        hitSlop: {
+          top: 10,
+          bottom: 10,
+          left: 10,
+          right: 10
+        },
+        accessibilityLabel: "Clear input",
+        accessibilityRole: "button",
+        children: /*#__PURE__*/_jsx(Ionicons, {
+          name: "close-circle",
+          size: 20,
+          color: iconColor
+        })
+      }, "clear"));
+    }
+
+    // Password toggle
+    if (secureTextEntry) {
+      elements.push(/*#__PURE__*/_jsx(TouchableOpacity, {
+        style: styles.passwordToggle,
+        onPress: togglePasswordVisibility,
+        hitSlop: {
+          top: 10,
+          bottom: 10,
+          left: 10,
+          right: 10
+        },
+        accessibilityLabel: showPassword ? "Hide password" : "Show password",
+        accessibilityRole: "button",
+        children: /*#__PURE__*/_jsx(Ionicons, {
+          name: showPassword ? "eye-off" : "eye",
+          size: 22,
+          color: iconColor
+        })
+      }, "password"));
     }
-    return 'transparent';
+    return elements;
   };
-  const styles = createStyles(colors, variant);
-  const BASE_PADDING = 20;
-  const ICON_WIDTH = 22;
-  const ICON_MARGIN = 12;
-  const TEXT_LEFT = icon || leftComponent ? BASE_PADDING + ICON_WIDTH + ICON_MARGIN : BASE_PADDING;
-  const FLOAT_LEFT_OFFSET = 10;
-  const isLabelFloated = Boolean(value || isFocused);
-
-  // For web, make TextInput the primary element with absolute positioned decorations
-  if (Platform.OS === 'web') {
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.container, containerStyle],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.webInputContainer,
-        children: [/*#__PURE__*/_jsx(TextInput, {
-          ref: ref,
-          style: [styles.webInput, {
-            color: colors?.text || '#000000',
-            borderColor: 'transparent',
-            backgroundColor: getBackgroundColor(),
-            paddingLeft: TEXT_LEFT,
-            paddingRight: 60,
-            // Space for right components
-            paddingTop: label ? 24 : 20,
-            // Make room for floated label
-            paddingBottom: 8,
-            borderWidth: 0,
-            ...Platform.select({
-              web: {
-                border: 'none',
-                outline: 'none',
-                boxShadow: 'none'
-              },
-              default: {}
-            })
-          }, inputStyle],
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          onChangeText: handleChangeText,
-          secureTextEntry: secureTextEntry && !showPassword,
-          placeholderTextColor: "transparent",
-          testID: testID,
-          autoComplete: secureTextEntry ? 'current-password' : 'off',
-          spellCheck: false,
-          value: value,
-          ...textInputProps
-        }), /*#__PURE__*/_jsx(Svg, {
-          width: inputWidth,
-          height: inputHeight,
-          style: {
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            zIndex: 0
-          },
-          pointerEvents: "none",
-          children: /*#__PURE__*/_jsx(Path, {
-            d: (() => {
-              const y = borderWidth / 2;
-              const x1 = borderRadius + borderWidth / 2;
-              const x2 = inputWidth - borderRadius - borderWidth / 2;
-              const labelGapStart = isLabelFloated ? labelLeft - 4 : x1;
-              const labelGapEnd = isLabelFloated ? labelLeft + labelWidth + 4 : x2;
-              // Start at left arc
-              return `M${x1},${y}` + ` A${borderRadius},${borderRadius} 0 0 1 ${borderWidth / 2},${y + borderRadius}` + ` L${borderWidth / 2},${inputHeight - borderRadius - borderWidth / 2}` + ` A${borderRadius},${borderRadius} 0 0 1 ${x1},${inputHeight - borderWidth / 2}` + ` L${x2},${inputHeight - borderWidth / 2}` + ` A${borderRadius},${borderRadius} 0 0 1 ${inputWidth - borderWidth / 2},${inputHeight - borderRadius - borderWidth / 2}` + ` L${inputWidth - borderWidth / 2},${y + borderRadius}` + ` A${borderRadius},${borderRadius} 0 0 1 ${x2},${y}` + ` L${labelGapStart},${y}` + ` M${labelGapEnd},${y}` + ` L${x2},${y}`;
-            })(),
-            stroke: getBorderColor(),
-            strokeWidth: borderWidth,
-            fill: "none"
-          })
-        }), label && /*#__PURE__*/_jsx(Animated.Text, {
-          onLayout: e => {
-            setLabelWidth(e.nativeEvent.layout.width);
-            setLabelLeft(e.nativeEvent.layout.x);
-          },
-          style: [styles.webFloatingLabel, {
-            color: getLabelColor(),
-            left: labelAnim.interpolate({
-              inputRange: [0, 1],
-              outputRange: [TEXT_LEFT, FLOAT_LEFT_OFFSET]
-            }),
-            top: labelAnim.interpolate({
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    ...(Platform.OS === 'web' && {
+      className: 'oxy-textfield-container'
+    }),
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [styles.inputContainer, inputContainerStyle],
+      ...(Platform.OS === 'web' && {
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave
+      }),
+      children: [leadingNode && /*#__PURE__*/_jsx(View, {
+        style: [styles.leading, leadingContainerStyle],
+        children: leadingNode
+      }), /*#__PURE__*/_jsx(TextInput, {
+        ref: r => {
+          if (typeof ref === 'function') {
+            ref(r);
+          } else if (ref && typeof ref === 'object') {
+            // @ts-ignore - React ref assignment
+            ref.current = r;
+          }
+          // @ts-ignore - Internal ref assignment
+          inputRef.current = r;
+        },
+        style: [styles.input, inputStyle],
+        placeholder: label ? focused ? placeholder : undefined : placeholder,
+        placeholderTextColor: surfaceScale(0.4),
+        selectionColor: effectivePalette.main,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onChangeText: handleChangeText,
+        secureTextEntry: secureTextEntry && !showPassword,
+        value: internalValue,
+        editable: !disabled,
+        maxLength: maxLength,
+        ...(Platform.OS === 'web' && {
+          className: 'oxy-textfield-input'
+        }),
+        ...rest
+      }), /*#__PURE__*/_jsxs(View, {
+        style: [styles.trailing, trailingContainerStyle],
+        children: [trailingNode, renderTrailingElements()]
+      }), (variant === 'filled' || variant === 'standard') && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.underline,
+          pointerEvents: "none"
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.underlineFocused, {
+            transform: [{
+              scaleX: focusAnimation
+            }]
+          }],
+          pointerEvents: "none"
+        })]
+      }), label && /*#__PURE__*/_jsx(View, {
+        style: styles.labelContainer,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Animated.Text, {
+          style: [styles.label, {
+            color: focusAnimation.interpolate({
               inputRange: [0, 1],
-              outputRange: [20, -14]
+              outputRange: [error ? effectivePalette.main : surfaceScale(0.87), effectivePalette.main]
             }),
-            fontSize: labelAnim.interpolate({
+            fontSize: activeAnimation.interpolate({
               inputRange: [0, 1],
               outputRange: [16, 12]
             }),
-            backgroundColor: 'transparent',
-            paddingHorizontal: 4,
-            zIndex: 2
-          }, labelStyle],
-          children: label
-        }), icon && !leftComponent && /*#__PURE__*/_jsx(View, {
-          style: styles.webLeftIcon,
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: icon,
-            size: 22,
-            color: getIconColor()
-          })
-        }), leftComponent && /*#__PURE__*/_jsx(View, {
-          style: styles.webLeftComponent,
-          children: leftComponent
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.webRightComponents,
-          children: [loading && /*#__PURE__*/_jsx(ActivityIndicator, {
-            size: "small",
-            color: colors?.primary || '#d169e5',
-            style: styles.validationIndicator
-          }), success && !loading && /*#__PURE__*/_jsx(Ionicons, {
-            name: "checkmark-circle",
-            size: 22,
-            color: colors?.success || '#2E7D32',
-            style: styles.validationIndicator
-          }), error && !loading && !success && /*#__PURE__*/_jsx(Ionicons, {
-            name: "close-circle",
-            size: 22,
-            color: colors?.error || '#D32F2F',
-            style: styles.validationIndicator
-          }), secureTextEntry && /*#__PURE__*/_jsx(TouchableOpacity, {
-            style: styles.passwordToggle,
-            onPress: togglePasswordVisibility,
-            hitSlop: {
-              top: 10,
-              bottom: 10,
-              left: 10,
-              right: 10
-            },
-            ...(Platform.OS === 'web' && {
-              role: 'button',
-              tabIndex: 0,
-              onKeyPress: e => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault();
-                  togglePasswordVisibility();
-                }
-              }
-            }),
-            children: /*#__PURE__*/_jsx(Ionicons, {
-              name: showPassword ? "eye-off" : "eye",
-              size: 22,
-              color: colors?.secondaryText || '#666666'
-            })
-          }), rightComponent]
-        })]
-      }), error && /*#__PURE__*/_jsxs(View, {
-        style: [styles.errorContainer, errorStyle],
-        children: [/*#__PURE__*/_jsx(Ionicons, {
-          name: "alert-circle",
-          size: 16,
-          color: colors?.error || '#D32F2F'
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.errorText, {
-            color: colors?.error || '#D32F2F'
+            transform: [{
+              translateY: activeAnimation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, variant === 'filled' ? -12 : variant === 'outlined' ? -28 : -24]
+              })
+            }]
           }],
-          children: error
-        })]
+          children: label
+        })
       })]
-    });
-  }
-
-  // For mobile platforms, use Material Design structure
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, containerStyle],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: [styles.inputWrapper, {
-        borderColor: 'transparent',
-        backgroundColor: getBackgroundColor(),
-        borderWidth: 0,
-        borderBottomWidth: variant === 'filled' ? 2 : variant === 'outlined' ? 2 : 0
+    }), helperTextContent && /*#__PURE__*/_jsx(Text, {
+      style: [styles.helperText, error && {
+        color: effectivePalette.main
       }],
-      onLayout: e => {
-        setInputWidth(e.nativeEvent.layout.width);
-        setInputHeight(e.nativeEvent.layout.height);
-      },
-      children: [icon && !leftComponent && /*#__PURE__*/_jsx(Ionicons, {
-        name: icon,
-        size: 22,
-        color: getIconColor(),
-        style: styles.inputIcon
-      }), leftComponent, /*#__PURE__*/_jsxs(View, {
-        style: styles.inputContent,
-        children: [label && /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx(Svg, {
-            width: inputWidth,
-            height: inputHeight,
-            style: {
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              zIndex: 0
-            },
-            pointerEvents: "none",
-            children: /*#__PURE__*/_jsx(Path, {
-              d: (() => {
-                const y = borderWidth / 2;
-                const x1 = borderRadius + borderWidth / 2;
-                const x2 = inputWidth - borderRadius - borderWidth / 2;
-                const labelGapStart = isLabelFloated ? labelLeft - 4 : x1;
-                const labelGapEnd = isLabelFloated ? labelLeft + labelWidth + 4 : x2;
-                // Start at left arc
-                return `M${x1},${y}` + ` A${borderRadius},${borderRadius} 0 0 1 ${borderWidth / 2},${y + borderRadius}` + ` L${borderWidth / 2},${inputHeight - borderRadius - borderWidth / 2}` + ` A${borderRadius},${borderRadius} 0 0 1 ${x1},${inputHeight - borderWidth / 2}` + ` L${x2},${inputHeight - borderWidth / 2}` + ` A${borderRadius},${borderRadius} 0 0 1 ${inputWidth - borderWidth / 2},${inputHeight - borderRadius - borderWidth / 2}` + ` L${inputWidth - borderWidth / 2},${y + borderRadius}` + ` A${borderRadius},${borderRadius} 0 0 1 ${x2},${y}` + ` L${labelGapStart},${y}` + ` M${labelGapEnd},${y}` + ` L${x2},${y}`;
-              })(),
-              stroke: getBorderColor(),
-              strokeWidth: borderWidth,
-              fill: "none"
-            })
-          }), /*#__PURE__*/_jsx(Animated.Text, {
-            onLayout: e => {
-              setLabelWidth(e.nativeEvent.layout.width);
-              setLabelLeft(e.nativeEvent.layout.x);
-            },
-            style: [styles.floatingLabel, {
-              color: getLabelColor(),
-              left: labelAnim.interpolate({
-                inputRange: [0, 1],
-                outputRange: [TEXT_LEFT, FLOAT_LEFT_OFFSET]
-              }),
-              top: labelAnim.interpolate({
-                inputRange: [0, 1],
-                outputRange: [20, -14]
-              }),
-              fontSize: labelAnim.interpolate({
-                inputRange: [0, 1],
-                outputRange: [16, 12]
-              }),
-              zIndex: 2,
-              paddingHorizontal: 4,
-              backgroundColor: 'transparent'
-            }, labelStyle],
-            children: label
-          })]
-        }), /*#__PURE__*/_jsx(TextInput, {
-          ref: ref,
-          style: [styles.input, {
-            color: colors?.text || '#000000',
-            backgroundColor: getBackgroundColor(),
-            paddingLeft: TEXT_LEFT,
-            paddingRight: 60,
-            // Space for right components
-            paddingTop: label ? 24 : 20,
-            // Make room for floated label
-            paddingBottom: 8,
-            borderWidth: 0,
-            borderColor: 'transparent',
-            ...Platform.select({
-              web: {
-                border: 'none',
-                outline: 'none',
-                boxShadow: 'none'
-              },
-              default: {}
-            })
-          }, inputStyle],
-          onFocus: handleFocus,
-          onBlur: handleBlur,
-          onChangeText: handleChangeText,
-          secureTextEntry: secureTextEntry && !showPassword,
-          placeholderTextColor: "transparent",
-          testID: testID,
-          value: value,
-          ...textInputProps
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.rightComponents,
-        children: [loading && /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: colors?.primary || '#d169e5',
-          style: styles.validationIndicator
-        }), success && !loading && /*#__PURE__*/_jsx(Ionicons, {
-          name: "checkmark-circle",
-          size: 22,
-          color: colors?.success || '#2E7D32',
-          style: styles.validationIndicator
-        }), error && !loading && !success && /*#__PURE__*/_jsx(Ionicons, {
-          name: "close-circle",
-          size: 22,
-          color: colors?.error || '#D32F2F',
-          style: styles.validationIndicator
-        }), secureTextEntry && /*#__PURE__*/_jsx(TouchableOpacity, {
-          style: styles.passwordToggle,
-          onPress: togglePasswordVisibility,
-          hitSlop: {
-            top: 10,
-            bottom: 10,
-            left: 10,
-            right: 10
-          },
-          children: /*#__PURE__*/_jsx(Ionicons, {
-            name: showPassword ? "eye-off" : "eye",
-            size: 22,
-            color: colors?.secondaryText || '#666666'
-          })
-        }), rightComponent]
-      })]
-    }), error && /*#__PURE__*/_jsxs(View, {
-      style: [styles.errorContainer, errorStyle],
-      children: [/*#__PURE__*/_jsx(Ionicons, {
-        name: "alert-circle",
-        size: 16,
-        color: colors?.error || '#D32F2F'
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.errorText, {
-          color: colors?.error || '#D32F2F'
-        }],
-        children: error
-      })]
-    }), !error && validMessage && /*#__PURE__*/_jsxs(View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginTop: 4,
-        gap: 6
-      },
-      children: [/*#__PURE__*/_jsx(Ionicons, {
-        name: "checkmark-circle",
-        size: 16,
-        color: colors?.success || '#2E7D32'
-      }), /*#__PURE__*/_jsx(Text, {
-        style: {
-          fontSize: 13,
-          fontWeight: '500',
-          color: colors?.success || '#2E7D32'
-        },
-        children: validMessage
-      })]
-    })]
+      children: helperTextContent
+    }), renderPasswordStrength(), renderCharacterCount()]
   });
 });
-const createStyles = (colors, variant) => StyleSheet.create({
-  container: {
-    width: '100%',
-    marginBottom: 24
-  },
-  inputWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: 64,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    paddingHorizontal: 20,
-    backgroundColor: variant === 'filled' ? colors?.inputBackground || '#F5F5F5' : 'transparent',
-    position: 'relative',
-    borderWidth: 0,
-    borderColor: 'transparent'
-  },
-  inputIcon: {
-    marginRight: 12,
-    width: 22,
-    height: 22,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  inputContent: {
-    flex: 1,
-    justifyContent: 'center',
-    position: 'relative',
-    height: 64
-  },
-  floatingLabel: {
-    position: 'absolute',
-    fontWeight: '500',
-    lineHeight: 24,
-    backgroundColor: 'transparent',
-    paddingHorizontal: 4
-  },
-  input: {
-    flex: 1,
-    fontSize: 16,
-    height: 24,
-    paddingVertical: 0,
-    marginTop: 8,
-    // Space for floating label
-    borderWidth: 0,
-    borderColor: 'transparent'
-  },
-  // Web-specific styles
-  webInputContainer: {
-    position: 'relative',
-    height: 64
-  },
-  webInput: {
-    width: '100%',
-    height: 64,
-    fontSize: 16,
-    paddingHorizontal: 20,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0,
-    borderWidth: 0,
-    borderColor: 'transparent',
-    borderStyle: 'solid'
-  },
-  webFloatingLabel: {
-    position: 'absolute',
-    fontWeight: '500',
-    lineHeight: 24,
-    backgroundColor: 'transparent',
-    paddingHorizontal: 4
-  },
-  webLeftIcon: {
-    position: 'absolute',
-    left: 20,
-    top: 21,
-    // (64 - 22) / 2
-    zIndex: 1,
-    width: 22,
-    height: 22,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  webLeftComponent: {
-    position: 'absolute',
-    left: 20,
-    top: 0,
-    height: 64,
-    justifyContent: 'center',
-    zIndex: 1
-  },
-  webRightComponents: {
-    position: 'absolute',
-    right: 20,
-    top: 0,
-    height: 64,
-    flexDirection: 'row',
-    alignItems: 'center',
-    zIndex: 1
-  },
-  rightComponents: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  validationIndicator: {
-    marginLeft: 8
-  },
-  passwordToggle: {
-    padding: 4,
-    marginLeft: 8
-  },
-  errorContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 12,
-    borderRadius: 12,
-    marginTop: 8,
-    gap: 8,
-    backgroundColor: (colors?.error || '#D32F2F') + '10',
-    borderWidth: 1,
-    borderColor: (colors?.error || '#D32F2F') + '30'
-  },
-  errorText: {
-    fontSize: 12,
-    fontWeight: '500',
-    flex: 1
-  }
-});
 TextField.displayName = 'TextField';
 export default TextField;
 //# sourceMappingURL=TextField.js.map