@idealyst/components 1.0.82 → 1.0.84

package/src/Input/Input.styles.tsx

@@ -1,200 +1,263 @@
 import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Size, CompoundVariants} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+import { InputSize, InputType } from './types';
 
-export const inputStyles = StyleSheet.create((theme) => ({
-  input: {
-    variants: {
-      size: {
-        small: {
-          height: 36,
-          paddingHorizontal: theme.spacing?.sm || 8,
-          paddingVertical: theme.spacing?.xs || 4,
-          fontSize: theme.typography?.fontSize?.sm || 14,
-        },
-        medium: {
-          height: 44,
-          paddingHorizontal: theme.spacing?.md || 12,
-          paddingVertical: theme.spacing?.sm || 8,
-          fontSize: theme.typography?.fontSize?.md || 16,
-        },
-        large: {
-          height: 52,
-          paddingHorizontal: theme.spacing?.lg || 16,
-          paddingVertical: theme.spacing?.md || 12,
-          fontSize: theme.typography?.fontSize?.lg || 18,
-        },
-      },
-      variant: {
-        default: {
-          backgroundColor: theme.colors?.surface?.primary || '#ffffff',
-          borderWidth: 1,
-          borderColor: theme.colors?.border?.primary || '#e5e7eb',
-          borderStyle: 'solid',
-          color: theme.colors?.text?.primary || '#000000',
-          
-          _web: {
-            border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
-          },
-        },
+
+export type InputVariants = {
+    size: InputSize;
+    type: InputType;
+    focused: boolean;
+    hasError: boolean;
+    disabled: boolean;
+}
+
+/**
+ * Create type variants for container
+ */
+function createContainerTypeVariants(theme: Theme) {
+    return {
         outlined: {
-          backgroundColor: 'transparent',
-          borderWidth: 1,
-          borderColor: theme.intents?.primary?.main || '#3b82f6',
-          borderStyle: 'solid',
-          color: theme.colors?.text?.primary || '#000000',
-          
-          _web: {
-            border: `1px solid ${theme.intents?.primary?.main || '#3b82f6'}`,
-          },
+            backgroundColor: 'transparent',
+            borderWidth: 1,
+            borderColor: theme.colors.border.primary,
+            borderStyle: 'solid' as const,
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+            },
         },
         filled: {
-          backgroundColor: theme.colors?.surface?.secondary || '#f9fafb',
-          borderWidth: 0,
-          borderColor: 'transparent',
-          color: theme.colors?.text?.primary || '#000000',
-          
-          _web: {
-            border: 'none',
-          },
+            backgroundColor: theme.colors.surface.secondary,
+            borderWidth: 0,
+            _web: {
+                border: 'none',
+            },
         },
         bare: {
-          backgroundColor: 'transparent',
-          borderWidth: 0,
-          borderColor: 'transparent',
-          color: theme.colors?.text?.primary || '#000000',
-          paddingHorizontal: 0,
-          paddingVertical: 0,
-          
-          _web: {
-            border: 'none',
-            boxShadow: 'none',
-          },
+            backgroundColor: 'transparent',
+            borderWidth: 0,
+            _web: {
+                border: 'none',
+            },
         },
-      },
-      focused: {
-        true: {
-          // Base focused styles - will be overridden by compound variants
-        },
-        false: {
-          // No additional styles when not focused
-        },
-      },
-    },
-    
-    compoundVariants: [
-      // Default variant focus
-      {
-        variant: 'default',
+    } as const;
+}
+
+/**
+ * Create compound variants for focused + type + hasError combinations
+ */
+function createFocusedCompoundVariants(theme: Theme) {
+    const compoundVariants = [] as CompoundVariants<keyof InputVariants>;
+    const focusColor = theme.intents.primary.primary;
+    const errorColor = theme.intents.error.primary;
+
+    // Error state takes precedence
+    compoundVariants.push({
         focused: true,
+        hasError: true,
         styles: {
-          borderColor: theme.intents?.primary?.main || '#3b82f6',
-          shadowColor: theme.intents?.primary?.main || '#3b82f6',
-          shadowOffset: { width: 0, height: 0 },
-          shadowOpacity: 0.1,
-          shadowRadius: 2,
-          elevation: 1,
-        },
-      },
-      // Outlined variant focus
-      {
-        variant: 'outlined',
+            borderColor: errorColor,
+            _web: {
+                border: `1px solid ${errorColor}`,
+                boxShadow: `0 0 0 2px ${errorColor}20`,
+            },
+        },
+    });
+
+    // Default type + focused (no error)
+    compoundVariants.push({
+        type: 'default',
         focused: true,
+        hasError: false,
         styles: {
-          backgroundColor: 'transparent',
-          borderWidth: 1,
-          borderColor: theme.intents?.primary?.main || '#3b82f6',
-          borderStyle: 'solid',
-        },
-      },
-      // Filled variant focus
-      {
-        variant: 'filled',
+            borderColor: focusColor,
+            _web: {
+                border: `1px solid ${focusColor}`,
+                boxShadow: `0 0 0 2px ${focusColor}20`,
+            },
+        },
+    });
+
+    // Outlined type + focused (no error)
+    compoundVariants.push({
+        type: 'outlined',
         focused: true,
+        hasError: false,
         styles: {
-          backgroundColor: theme.colors?.surface?.secondary || '#f3f4f6',
-          borderWidth: 0,
-          shadowColor: theme.intents?.primary?.main || '#3b82f6',
-          shadowOffset: { width: 0, height: 0 },
-          shadowOpacity: 0.05,
-          shadowRadius: 1,
-          elevation: 0.5,
-        },
-      },
-      // Bare variant focus (no visual changes)
-      {
-        variant: 'bare',
+            borderColor: focusColor,
+            _web: {
+                border: `2px solid ${focusColor}`,
+            },
+        },
+    });
+
+    // Filled type + focused (no error)
+    compoundVariants.push({
+        type: 'filled',
         focused: true,
+        hasError: false,
         styles: {
-          backgroundColor: 'transparent',
-          borderWidth: 0,
-          borderColor: 'transparent',
-        },
-      },
-    ],
-    
-    borderRadius: theme.borderRadius?.md || 8,
-    fontWeight: theme.typography?.fontWeight?.regular || '400',
-    // Web-specific styles
-    _web: {
-      boxSizing: 'border-box',
-      outline: 'none',
-      transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
-      fontFamily: 'inherit',
-      _focus: {
-        borderColor: theme.intents?.primary?.main || '#3b82f6',
-      },
-      _hover: {
-        borderColor: theme.intents?.primary?.main || '#3b82f6',
-      },
+            _web: {
+                boxShadow: `0 0 0 2px ${focusColor}20`,
+            },
+        },
+    });
+
+    return compoundVariants;
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+export const inputStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    container: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        borderRadius: 8,
+        variants: {
+            size: buildSizeVariants(theme, 'input', (size) => ({
+                height: size.height,
+                paddingHorizontal: size.paddingHorizontal,
+            })),
+            type: createContainerTypeVariants(theme),
+            focused: {
+                true: {},
+                false: {},
+            },
+            hasError: {
+                true: {
+                    borderColor: theme.intents.error.primary,
+                    _web: {
+                        border: `1px solid ${theme.intents.error.primary}`,
+                    },
+                },
+                false: {},
+            },
+            disabled: {
+                true: {
+                    opacity: 0.6,
+                    backgroundColor: theme.colors.surface.secondary,
+                    _web: {
+                        cursor: 'not-allowed',
+                    },
+                },
+                false: {
+                    _web: {
+                        cursor: 'text',
+                        _hover: {
+                            borderColor: theme.intents.primary.primary,
+                        },
+                    },
+                },
+            },
+        },
+        compoundVariants: createFocusedCompoundVariants(theme),
+        _web: {
+            boxSizing: 'border-box',
+            transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+        },
     },
-  },
-  disabled: {
-    opacity: 0.6,
-    backgroundColor: theme.colors?.surface?.secondary || '#f3f4f6',
-    color: theme.colors?.text?.disabled || '#9ca3af',
-    _web: {
-      cursor: 'not-allowed',
+    leftIconContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        variants: {
+            size: buildSizeVariants(theme, 'input', (size) => ({
+                marginRight: size.iconMargin,
+            })),
+        },
     },
-  },
-  error: {
-    borderWidth: 1,
-    borderColor: theme.intents?.error?.main || '#ef4444',
-    borderStyle: 'solid',
-    
-    variants: {
-      focused: {
-        true: {
-          shadowColor: theme.intents?.error?.main || '#ef4444',
-          shadowOffset: { width: 0, height: 0 },
-          shadowOpacity: 0.1,
-          shadowRadius: 2,
-          elevation: 1,
-        },
-        false: {
-          // No additional styles when not focused
-        },
-      },
-      variant: {
-        default: {
-          // Use default error styles
+    rightIconContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        variants: {
+            size: buildSizeVariants(theme, 'input', (size) => ({
+                marginLeft: size.iconMargin,
+            })),
         },
-        outlined: {
-          // Override outlined styles for error
-          borderColor: theme.intents?.error?.main || '#ef4444',
+    },
+    leftIcon: {
+        color: theme.colors.text.secondary,
+        variants: {
+            size: buildSizeVariants(theme, 'input', (size) => ({
+                fontSize: size.iconSize,
+                width: size.iconSize,
+                height: size.iconSize,
+            })),
         },
-        filled: {
-          // Add border for error even in filled variant
-          borderWidth: 1,
-          borderColor: theme.intents?.error?.main || '#ef4444',
+    },
+    rightIcon: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        color: theme.colors.text.secondary,
+        variants: {
+            size: buildSizeVariants(theme, 'input', (size) => ({
+            fontSize: size.iconSize,
+            width: size.iconSize,
+            height: size.iconSize,
+        })),
         },
-      },
     },
-    
-    _web: {
-      border: `1px solid ${theme.intents?.error?.main || '#ef4444'}`,
-      _focus: {
-        borderColor: theme.intents?.error?.main || '#ef4444',
-        boxShadow: `0 0 0 2px ${theme.intents?.error?.main || '#ef4444'}20`,
-      },
+    passwordToggle: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        padding: 0,
+        variants: {
+            size: buildSizeVariants(theme, 'input', (size) => ({
+                marginLeft: size.iconMargin,
+            })),
+        },
+        _web: {
+            background: 'transparent',
+            border: 'none',
+            cursor: 'pointer',
+            _hover: {
+                opacity: 0.7,
+            },
+            _active: {
+                opacity: 0.5,
+            },
+        },
+    },
+    passwordToggleIcon: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: 0,
+        color: theme.colors.text.secondary,
+        variants: {
+            size: buildSizeVariants(theme, 'input', (size) => ({
+                fontSize: size.iconSize,
+                width: size.iconSize,
+                height: size.iconSize,
+            })),
+        },
+    },
+    input: {
+        flex: 1,
+        minWidth: 0,
+        backgroundColor: 'transparent',
+        color: theme.colors.text.primary,
+        fontWeight: '400',
+        variants: {
+            size: buildSizeVariants(theme, 'input', (size) => ({
+                fontSize: size.fontSize,
+            })),
+        },
+        _web: {
+            border: 'none',
+            outline: 'none',
+            fontFamily: 'inherit',
+        },
     },
-  },
-})); 
+  };
+});

package/src/Input/Input.web.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { useState, isValidElement, useRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { InputProps } from './types';
 import { inputStyles } from './Input.styles';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import useMergeRefs from '../hooks/useMergeRefs';
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   value,
@@ -12,22 +15,37 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   disabled = false,
   inputType = 'text',
   secureTextEntry = false,
+  leftIcon,
+  rightIcon,
+  showPasswordToggle,
   autoCapitalize = 'sentences',
-  size = 'medium',
-  variant = 'default',
+  size = 'md',
+  type = 'outlined',
   hasError = false,
   style,
   testID,
 }, ref) => {
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  // Determine if we should show password toggle
+  const isPasswordField = inputType === 'password' || secureTextEntry;
+  const shouldShowPasswordToggle = isPasswordField && (showPasswordToggle !== false);
+
+  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 'password';
+        return 'text'; // When visible
       case 'text':
       default:
         return 'text';
@@ -41,59 +59,144 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({
   };
 
   const handleFocus = () => {
+    setIsFocused(true);
     if (onFocus) {
       onFocus();
     }
   };
 
   const handleBlur = () => {
+    setIsFocused(false);
     if (onBlur) {
       onBlur();
     }
   };
 
-  // Apply variants using the correct Unistyles 3.0 pattern
+  const togglePasswordVisibility = () => {
+    setIsPasswordVisible(!isPasswordVisible);
+  };
+
+  // Apply variants for container
   inputStyles.useVariants({
-    size: size as 'small' | 'medium' | 'large',
-    variant: variant as 'default' | 'outlined' | 'filled' | 'bare',
+    size,
+    type,
+    focused: isFocused,
+    hasError,
+    disabled,
   });
 
-  // Create the style array following the official documentation pattern
-  const inputStyleArray = [
-    inputStyles.input,
-    disabled && inputStyles.disabled,
-    hasError && inputStyles.error,
-    style,
-  ].filter(Boolean);
-
-  // Use getWebProps for Unistyles, then manually add our ref
-  const { ref: unistylesRef, ...webProps } = getWebProps(inputStyleArray);
-
-  // Forward the ref while still providing unistyles with access
-  const handleRef = (r: HTMLInputElement | null) => {
-    unistylesRef.current = r;
-    if (typeof ref === 'function') {
-      ref(r);
-    } else if (ref) {
-      ref.current = r;
+  // Get web props for all styled elements
+  const containerProps = getWebProps([inputStyles.container, style]);
+  const leftIconContainerProps = getWebProps([inputStyles.leftIconContainer]);
+  const rightIconContainerProps = getWebProps([inputStyles.rightIconContainer]);
+  const leftIconProps = getWebProps([inputStyles.leftIcon]);
+  const rightIconProps = getWebProps([inputStyles.rightIcon]);
+  const passwordToggleProps = getWebProps([inputStyles.passwordToggle]);
+  const passwordToggleIconProps = getWebProps([inputStyles.passwordToggleIcon]);
+
+  // Get input props
+  const inputWebProps = getWebProps([inputStyles.input]);
+
+  // 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)) {
+      const iconPath = resolveIconPath(leftIcon);
+      return (
+        <IconSvg
+          path={iconPath}
+          {...leftIconProps}
+          aria-label={leftIcon}
+        />
+      );
+    } else if (isValidElement(leftIcon)) {
+      return <span {...leftIconProps}>{leftIcon}</span>;
     }
+
+    return null;
+  };
+
+  // Helper to render right icon (not password toggle)
+  const renderRightIcon = () => {
+    if (!rightIcon) return null;
+
+    if (isIconName(rightIcon)) {
+      const iconPath = resolveIconPath(rightIcon);
+      return (
+        <IconSvg
+          path={iconPath}
+          {...rightIconProps}
+          aria-label={rightIcon}
+        />
+      );
+    } else if (isValidElement(rightIcon)) {
+      return <span {...rightIconProps}>{rightIcon}</span>;
+    }
+
+    return null;
+  };
+
+  // Helper to render password toggle icon
+  const renderPasswordToggleIcon = () => {
+    const iconName = isPasswordVisible ? 'eye-off' : 'eye';
+    const iconPath = resolveIconPath(iconName);
+    return (
+      <IconSvg
+        path={iconPath}
+        {...passwordToggleIconProps}
+        aria-label={iconName}
+      />
+    );
   };
 
   return (
-    <input
-      {...webProps}
-      ref={handleRef}
-      type={secureTextEntry ? 'password' : getInputType()}
-      value={value}
-      onChange={handleChange}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-      placeholder={placeholder}
-      disabled={disabled}
-      autoCapitalize={autoCapitalize}
-      data-testid={testID}
-    />
+    <div {...containerProps} data-testid={testID}>
+      {/* Left Icon */}
+      {leftIcon && (
+        <span {...leftIconContainerProps}>
+          {renderLeftIcon()}
+        </span>
+      )}
+
+      {/* Input */}
+      <input
+        {...inputWebProps}
+        ref={mergedInputRef}
+        type={getInputType()}
+        value={value}
+        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>
   );
 });
 
+Input.displayName = 'Input';
+
 export default Input; 

package/src/Input/index.ts

@@ -1,5 +1,5 @@
-// Platform-agnostic Input export
-// Bundlers will resolve to index.web.ts (web) or index.native.ts (React Native)
-// This file serves as fallback for web environments
-export { default } from './Input.web';
-export * from './types'; 
+import InputComponent from './Input.web';
+
+export default InputComponent;
+export { InputComponent as Input };
+export * from './types';