@idealyst/components 1.2.29 → 1.2.30

package/src/Input/Input.native.tsx

@@ -1,297 +1,49 @@
-import React, { useState, isValidElement, useMemo, useEffect, useRef, useCallback } from 'react';
-import { View, TextInput, TouchableOpacity, Platform, TextInputProps } from 'react-native';
-import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
-import { useUnistyles } from 'react-native-unistyles';
-import { InputProps } from './types';
-import { inputStyles } from './Input.styles';
-import { getNativeFormAccessibilityProps } from '../utils/accessibility';
+/**
+ * @ignore
+ * @deprecated Use TextInput instead. This component exists for backwards compatibility only.
+ */
+import React, { useEffect, useRef } from 'react';
+import TextInput from '../TextInput/TextInput.native';
+import type { TextInputProps } from '../TextInput/types';
+import type { IdealystElement } from '../utils/refTypes';
+
+// Track if we've already logged the deprecation warning
+let hasLoggedWarning = false;
+
+/**
+ * @ignore
+ * @deprecated Use TextInput instead. Input is maintained for backwards compatibility only.
+ *
+ * Migration:
+ * - Replace `<Input />` with `<TextInput />`
+ * - Replace `inputType` prop with `inputMode` (React Native only)
+ *
+ * @example
+ * // Before
+ * import { Input } from '@idealyst/components';
+ * <Input inputType="email" />
+ *
+ * // After
+ * import { TextInput } from '@idealyst/components';
+ * <TextInput inputMode="email" />
+ */
+const Input = React.forwardRef<IdealystElement, TextInputProps>((props, ref) => {
+  const hasRenderedRef = useRef(false);
 
-// Inner TextInput component that can be memoized to prevent re-renders
-// for Android secure text entry
-type InnerTextInputProps = {
-  inputRef: React.ForwardedRef<TextInput>;
-  value: string | undefined;
-  onChangeText: ((text: string) => void) | undefined;
-  isAndroidSecure: boolean;
-  textInputProps: Omit<TextInputProps, 'value' | 'defaultValue' | 'onChangeText'>;
-  inputStyle: any;
-};
-
-const InnerTextInput = React.memo<InnerTextInputProps>(
-  ({ inputRef, value, onChangeText, isAndroidSecure, textInputProps, inputStyle }) => {
-    return (
-      <TextInput
-        ref={inputRef}
-        // For Android secure text entry, don't pass value prop at all
-        // Let TextInput manage its own state to preserve character reveal animation
-        {...(isAndroidSecure ? {} : { value })}
-        onChangeText={onChangeText}
-        style={inputStyle}
-        {...textInputProps}
-      />
-    );
-  },
-  (prevProps, nextProps) => {
-    // For Android secure text entry, skip re-renders when only value changes
-    if (nextProps.isAndroidSecure) {
-      // Only re-render if non-value props change
-      const valueChanged = prevProps.value !== nextProps.value;
-      const otherPropsChanged =
-        prevProps.onChangeText !== nextProps.onChangeText ||
-        prevProps.isAndroidSecure !== nextProps.isAndroidSecure ||
-        prevProps.textInputProps !== nextProps.textInputProps ||
-        prevProps.inputStyle !== nextProps.inputStyle;
-
-      if (valueChanged && !otherPropsChanged) {
-        return true; // Skip re-render
-      }
-    }
-    return false; // Allow re-render
-  }
-);
-
-const Input = React.forwardRef<TextInput, InputProps>(({
-  value,
-  onChangeText,
-  onFocus,
-  onBlur,
-  onPress,
-  placeholder,
-  disabled = false,
-  inputType = 'text',
-  secureTextEntry = false,
-  leftIcon,
-  rightIcon,
-  showPasswordToggle,
-  autoCapitalize = 'sentences',
-  size = 'md',
-  type = 'outlined',
-  hasError = false,
-  // Spacing variants from FormInputStyleProps
-  margin,
-  marginVertical,
-  marginHorizontal,
-  style,
-  testID,
-  id,
-  // Accessibility props
-  accessibilityLabel,
-  accessibilityHint,
-  accessibilityDisabled,
-  accessibilityHidden,
-  accessibilityRole,
-  accessibilityRequired,
-  accessibilityInvalid,
-}, ref) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-
-  // Track if this is a secure field that needs Android workaround
-  const isSecureField = inputType === 'password' || secureTextEntry;
-  const needsAndroidSecureWorkaround = Platform.OS === 'android' && isSecureField && !isPasswordVisible;
-
-  // For Android secure text entry, we use an internal ref to track value
-  const internalValueRef = useRef(value ?? '');
-
-  // Sync external value changes to internal ref (for programmatic updates)
   useEffect(() => {
-    if (value !== undefined) {
-      internalValueRef.current = value;
-    }
-  }, [value]);
-
-  // Get theme for icon sizes and colors
-  const { theme } = useUnistyles();
-  const iconSize = theme.sizes.input[size].iconSize;
-  const iconColor = theme.colors.text.secondary;
-
-  // Determine if we should show password toggle
-  const isPasswordField = inputType === 'password' || secureTextEntry;
-  const shouldShowPasswordToggle = isPasswordField && (showPasswordToggle !== false);
-
-  const getKeyboardType = useCallback((): 'default' | 'email-address' | 'numeric' => {
-    switch (inputType) {
-      case 'email':
-        return 'email-address';
-      case 'number':
-        return 'numeric';
-      case 'password':
-      case 'text':
-      default:
-        return 'default';
-    }
-  }, [inputType]);
-
-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-    onFocus?.();
-  }, [onFocus]);
-
-  const handlePress = useCallback(() => {
-    onPress?.();
-  }, [onPress]);
-
-  const handleBlur = useCallback(() => {
-    setIsFocused(false);
-    onBlur?.();
-  }, [onBlur]);
-
-  const togglePasswordVisibility = () => {
-    setIsPasswordVisible(!isPasswordVisible);
-  };
-
-  // Memoized change handler for InnerTextInput
-  const handleChangeText = useCallback((text: string) => {
-    internalValueRef.current = text;
-    onChangeText?.(text);
-  }, [onChangeText]);
-
-  // Memoized input style
-  const inputStyle = useMemo(() => (inputStyles.input as any)({}), []);
-
-  // Generate native accessibility props
-  const nativeA11yProps = useMemo(() => {
-    // Derive invalid state from hasError or explicit accessibilityInvalid
-    const isInvalid = accessibilityInvalid ?? hasError;
-
-    return getNativeFormAccessibilityProps({
-      accessibilityLabel,
-      accessibilityHint,
-      accessibilityDisabled: accessibilityDisabled ?? disabled,
-      accessibilityHidden,
-      accessibilityRole: accessibilityRole ?? 'textbox',
-      accessibilityRequired,
-      accessibilityInvalid: isInvalid,
-    });
-  }, [
-    accessibilityLabel,
-    accessibilityHint,
-    accessibilityDisabled,
-    disabled,
-    accessibilityHidden,
-    accessibilityRole,
-    accessibilityRequired,
-    accessibilityInvalid,
-    hasError,
-  ]);
-
-  // Memoized TextInput props (everything except value/onChangeText)
-  const textInputProps = useMemo(() => ({
-    onPress: handlePress,
-    placeholder,
-    editable: !disabled,
-    keyboardType: getKeyboardType(),
-    secureTextEntry: isSecureField && !isPasswordVisible,
-    autoCapitalize,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    placeholderTextColor: '#999999',
-    ...nativeA11yProps,
-  }), [
-    handlePress,
-    placeholder,
-    disabled,
-    getKeyboardType,
-    isSecureField,
-    isPasswordVisible,
-    autoCapitalize,
-    handleFocus,
-    handleBlur,
-    nativeA11yProps,
-  ]);
-
-  // Apply variants to the stylesheet (for size and spacing)
-  inputStyles.useVariants({
-    size,
-    margin,
-    marginVertical,
-    marginHorizontal,
-  });
-
-  // Compute dynamic styles - call as functions for theme reactivity
-  const containerStyle = (inputStyles.container as any)({ type, focused: isFocused, hasError, disabled });
-  const leftIconContainerStyle = (inputStyles.leftIconContainer as any)({});
-  const rightIconContainerStyle = (inputStyles.rightIconContainer as any)({});
-  const passwordToggleStyle = (inputStyles.passwordToggle as any)({});
-
-  // Helper to render left icon
-  const renderLeftIcon = () => {
-    if (!leftIcon) return null;
-
-    if (typeof leftIcon === 'string') {
-      return (
-        <MaterialDesignIcons
-          name={leftIcon}
-          size={iconSize}
-          color={iconColor}
-        />
+    if (!hasRenderedRef.current && !hasLoggedWarning) {
+      hasRenderedRef.current = true;
+      hasLoggedWarning = true;
+      console.warn(
+        'Input is deprecated and maintained for compatibility only. Please use TextInput instead.\n' +
+        'Migration: Replace <Input /> with <TextInput /> and inputType with inputMode.'
       );
-    } else if (isValidElement(leftIcon)) {
-      return leftIcon;
     }
+  }, []);
 
-    return null;
-  };
-
-  // Helper to render right icon (not password toggle)
-  const renderRightIcon = () => {
-    if (!rightIcon) return null;
-
-    if (typeof rightIcon === 'string') {
-      return (
-        <MaterialDesignIcons
-          name={rightIcon}
-          size={iconSize}
-          color={iconColor}
-        />
-      );
-    } else if (isValidElement(rightIcon)) {
-      return rightIcon;
-    }
-
-    return null;
-  };
-
-  return (
-    <View style={[containerStyle, style]} testID={testID} nativeID={id}>
-      {/* Left Icon */}
-      {leftIcon && (
-        <View style={leftIconContainerStyle}>
-          {renderLeftIcon()}
-        </View>
-      )}
-
-      {/* Input */}
-      <InnerTextInput
-        inputRef={ref}
-        value={value}
-        onChangeText={handleChangeText}
-        isAndroidSecure={needsAndroidSecureWorkaround}
-        inputStyle={inputStyle}
-        textInputProps={textInputProps}
-      />
-
-      {/* Right Icon or Password Toggle */}
-      {shouldShowPasswordToggle ? (
-        <TouchableOpacity
-          style={passwordToggleStyle}
-          onPress={togglePasswordVisibility}
-          disabled={disabled}
-          accessibilityLabel={isPasswordVisible ? 'Hide password' : 'Show password'}
-        >
-          <MaterialDesignIcons
-            name={isPasswordVisible ? 'eye-off' : 'eye'}
-            size={iconSize}
-            color={iconColor}
-          />
-        </TouchableOpacity>
-      ) : rightIcon ? (
-        <View style={rightIconContainerStyle}>
-          {renderRightIcon()}
-        </View>
-      ) : null}
-    </View>
-  );
+  return <TextInput ref={ref as any} {...props} />;
 });
 
-export default Input; 
+Input.displayName = 'Input';
+
+export default Input;

package/src/Input/Input.styles.tsx

@@ -67,7 +67,7 @@ export const inputStyles = defineStyle('Input', (theme: Theme) => ({
                 false: { opacity: 1 }
             },
             hasError: {
-                true: { borderColor: theme.intents.error.primary },
+                true: { borderColor: theme.intents.danger.primary },
                 false: { borderColor: theme.colors.border.primary },
             },
             // $iterator expands for each input size

package/src/Input/Input.web.tsx

@@ -1,298 +1,47 @@
-import React, { isValidElement, useState, useMemo, useRef } from 'react';
-import { getWebProps } from 'react-native-unistyles/web';
-import { useUnistyles } from 'react-native-unistyles';
-import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
-import { isIconName } from '../Icon/icon-resolver';
-import useMergeRefs from '../hooks/useMergeRefs';
-import { inputStyles } from './Input.styles';
-import { InputProps } from './types';
-import { getWebFormAriaProps } from '../utils/accessibility';
-
 /**
- * Text input field with support for icons, password visibility toggle, and validation states.
- * Available in outlined and filled variants with multiple sizes.
+ * @ignore
+ * @deprecated Use TextInput instead. This component exists for backwards compatibility only.
  */
-const Input = React.forwardRef<HTMLInputElement, InputProps>(({
-  value,
-  onChangeText,
-  onFocus,
-  onBlur,
-  onPress,
-  placeholder,
-  disabled = false,
-  inputType = 'text',
-  secureTextEntry = false,
-  leftIcon,
-  rightIcon,
-  showPasswordToggle,
-  autoCapitalize = 'sentences',
-  size = 'md',
-  type = 'outlined',
-  hasError = false,
-  // Spacing variants from FormInputStyleProps
-  margin,
-  marginVertical,
-  marginHorizontal,
-  style,
-  testID,
-  id,
-  // Accessibility props
-  accessibilityLabel,
-  accessibilityHint,
-  accessibilityDisabled,
-  accessibilityHidden,
-  accessibilityRole,
-  accessibilityLabelledBy,
-  accessibilityDescribedBy,
-  accessibilityControls,
-  accessibilityExpanded,
-  accessibilityPressed,
-  accessibilityOwns,
-  accessibilityHasPopup,
-  accessibilityRequired,
-  accessibilityInvalid,
-  accessibilityErrorMessage,
-  accessibilityAutoComplete,
-}, ref) => {
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-
-  // Determine if we should show password toggle
-  const isPasswordField = inputType === 'password' || secureTextEntry;
-  const shouldShowPasswordToggle = isPasswordField && (showPasswordToggle !== false);
-
-  // Get theme for icon sizes and colors
-  const { theme } = useUnistyles();
-  const iconSize = theme.sizes.input[size].iconSize;
-  const iconColor = theme.colors.text.secondary;
-
-  const [isFocused, setIsFocused] = useState(false);
-
-  const getInputType = () => {
-    // Handle password visibility
-    if (isPasswordField && !isPasswordVisible) {
-      return 'password';
-    }
-
-    switch (inputType) {
-      case 'email':
-        return 'email';
-      case 'number':
-        return 'number';
-      case 'password':
-        return 'text'; // When visible
-      case 'text':
-      default:
-        return 'text';
-    }
-  };
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (onChangeText) {
-      onChangeText(e.target.value);
-    }
-  };
-
-  const handlePress = (e: React.MouseEvent<HTMLDivElement>) => {
-    // For web compatibility, we can trigger onFocus when pressed
-    e.preventDefault();
-    e.stopPropagation();
-    if (onPress) {
-      onPress();
-    }
-  }
-
-  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsFocused(true);
-    if (onFocus) {
-      onFocus();
-    }
-  };
-
-  const handleBlur = () => {
-    setIsFocused(false);
-    if (onBlur) {
-      onBlur();
-    }
-  };
-
-  const togglePasswordVisibility = () => {
-    setIsPasswordVisible(!isPasswordVisible);
-  };
-
-  // Apply variants (for size and spacing)
-  inputStyles.useVariants({
-    size,
-    margin,
-    marginVertical,
-    marginHorizontal,
-  });
-
-  // Get web props for all styled elements (all styles are dynamic functions)
-  const dynamicContainerStyle = (inputStyles.container as any)({ type, focused: isFocused, hasError, disabled });
-  const {ref: containerStyleRef, ...containerProps} = getWebProps([dynamicContainerStyle, style]);
-  const leftIconContainerProps = getWebProps([(inputStyles.leftIconContainer as any)({})]);
-  const rightIconContainerProps = getWebProps([(inputStyles.rightIconContainer as any)({})]);
-  const passwordToggleProps = getWebProps([(inputStyles.passwordToggle as any)({})]);
+import React, { useEffect, useRef } from 'react';
+import TextInput from '../TextInput/TextInput.web';
+import type { TextInputProps } from '../TextInput/types';
+import type { IdealystElement } from '../utils/refTypes';
 
-  // Get input props
-  const inputWebProps = getWebProps([(inputStyles.input as any)({})]);
+// Track if we've already logged the deprecation warning
+let hasLoggedWarning = false;
 
-  // Generate accessibility props
-  const ariaProps = useMemo(() => {
-    // Derive invalid state from hasError or explicit accessibilityInvalid
-    const isInvalid = accessibilityInvalid ?? hasError;
-
-    return getWebFormAriaProps({
-      accessibilityLabel,
-      accessibilityHint,
-      accessibilityDisabled: accessibilityDisabled ?? disabled,
-      accessibilityHidden,
-      accessibilityRole: accessibilityRole ?? 'textbox',
-      accessibilityLabelledBy,
-      accessibilityDescribedBy,
-      accessibilityControls,
-      accessibilityExpanded,
-      accessibilityPressed,
-      accessibilityOwns,
-      accessibilityHasPopup,
-      accessibilityRequired,
-      accessibilityInvalid: isInvalid,
-      accessibilityErrorMessage,
-      accessibilityAutoComplete,
-    });
-  }, [
-    accessibilityLabel,
-    accessibilityHint,
-    accessibilityDisabled,
-    disabled,
-    accessibilityHidden,
-    accessibilityRole,
-    accessibilityLabelledBy,
-    accessibilityDescribedBy,
-    accessibilityControls,
-    accessibilityExpanded,
-    accessibilityPressed,
-    accessibilityOwns,
-    accessibilityHasPopup,
-    accessibilityRequired,
-    accessibilityInvalid,
-    hasError,
-    accessibilityErrorMessage,
-    accessibilityAutoComplete,
-  ]);
-
-  // Merge the forwarded ref with unistyles ref for the input
-  const mergedInputRef = useMergeRefs(ref, inputWebProps.ref);
-
-  // Helper to render left icon
-  const renderLeftIcon = () => {
-    if (!leftIcon) return null;
-
-    if (isIconName(leftIcon)) {
-      return (
-        <IconSvg
-          name={leftIcon}
-          size={iconSize}
-          color={iconColor}
-          aria-label={leftIcon}
-        />
-      );
-    } else if (isValidElement(leftIcon)) {
-      return <span {...leftIconContainerProps}>{leftIcon}</span>;
-    }
-
-    return null;
-  };
-
-  // Helper to render right icon (not password toggle)
-  const renderRightIcon = () => {
-    if (!rightIcon) return null;
-
-    if (isIconName(rightIcon)) {
-      return (
-        <IconSvg
-          name={rightIcon}
-          size={iconSize}
-          color={iconColor}
-          aria-label={rightIcon}
-        />
+/**
+ * @ignore
+ * @deprecated Use TextInput instead. Input is maintained for backwards compatibility only.
+ *
+ * Migration:
+ * - Replace `<Input />` with `<TextInput />`
+ * - Replace `inputType` prop with `inputMode` (React Native only)
+ *
+ * @example
+ * // Before
+ * import { Input } from '@idealyst/components';
+ * <Input inputType="email" />
+ *
+ * // After
+ * import { TextInput } from '@idealyst/components';
+ * <TextInput inputMode="email" />
+ */
+const Input = React.forwardRef<IdealystElement, TextInputProps>((props, ref) => {
+  const hasRenderedRef = useRef(false);
+
+  useEffect(() => {
+    if (!hasRenderedRef.current && !hasLoggedWarning) {
+      hasRenderedRef.current = true;
+      hasLoggedWarning = true;
+      console.warn(
+        'Input is deprecated and maintained for compatibility only. Please use TextInput instead.\n' +
+        'Migration: Replace <Input /> with <TextInput /> and inputType with inputMode.'
       );
-    } else if (isValidElement(rightIcon)) {
-      return <span {...rightIconContainerProps}>{rightIcon}</span>;
     }
+  }, []);
 
-    return null;
-  };
-
-  // Helper to render password toggle icon
-  const renderPasswordToggleIcon = () => {
-    const iconName = isPasswordVisible ? 'eye-off' : 'eye';
-    return (
-      <IconSvg
-        name={iconName}
-        size={iconSize}
-        color={iconColor}
-        aria-label={iconName}
-      />
-    );
-  };
-
-  const containerRef = useRef<HTMLDivElement>(null);
-
-    const handleContainerPress = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    containerRef.current?.focus();
-  }
-
-  const mergedContainerRef = useMergeRefs(containerRef, containerStyleRef);
-
-  return (
-    <div onClick={handleContainerPress} ref={mergedContainerRef} {...containerProps} id={id} data-testid={testID}>
-      {/* Left Icon */}
-      {leftIcon && (
-        <span {...leftIconContainerProps}>
-          {renderLeftIcon()}
-        </span>
-      )}
-
-      {/* Input */}
-      <input
-        {...inputWebProps}
-        {...ariaProps}
-        ref={mergedInputRef}
-        type={getInputType()}
-        value={value}
-        onClick={handlePress}
-        onChange={handleChange}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        placeholder={placeholder}
-        disabled={disabled}
-        autoCapitalize={autoCapitalize}
-      />
-
-      {/* Right Icon or Password Toggle */}
-      {shouldShowPasswordToggle ? (
-        <button
-          {...passwordToggleProps}
-          onClick={togglePasswordVisibility}
-          disabled={disabled}
-          aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
-          type="button"
-          tabIndex={-1}
-        >
-          {renderPasswordToggleIcon()}
-        </button>
-      ) : rightIcon ? (
-        <span {...rightIconContainerProps}>
-          {renderRightIcon()}
-        </span>
-      ) : null}
-    </div>
-  );
+  return <TextInput ref={ref} {...props} />;
 });
 
 Input.displayName = 'Input';

package/src/Input/index.native.ts

@@ -1,3 +1,10 @@
-// React Native-specific Input export
+/**
+ * @ignore
+ * @deprecated Use TextInput instead. Input is maintained for backwards compatibility only.
+ */
+
+// React Native-specific deprecated Input export
 export { default } from './Input.native';
-export * from './types'; 
+
+// Re-export types from TextInput for backwards compatibility
+export * from '../TextInput/types';