# CustomInput Component

A flexible, themeable text input component for React Native applications with support for labels, icons, error messages, and helper text.

## Basic Usage

```jsx
import React, { useState } from 'react';
import { View } from 'react-native';
import { CustomInput } from '@your-org/component-library';

const MyForm = () => {
  const [name, setName] = useState('');
  
  return (
    <View style={{ padding: 16 }}>
      <CustomInput
        label="Full Name"
        placeholder="Enter your full name"
        value={name}
        onChangeText={setName}
      />
    </View>
  );
};

export default MyForm;
```

## Props

The `CustomInput` component extends React Native's `TextInputProps` (except for the `style` prop which is replaced with more specific styling props) and adds the following:

### Core Properties

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `label` | `string` | ❌ | - | Text to display above the input field |
| `error` | `string` | ❌ | - | Error message to display below the input (turns border red) |
| `helper` | `string` | ❌ | - | Helper text to display below the input (hidden if error is present) |

### Icon Properties

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `leftIcon` | `React.ReactNode` | ❌ | - | Icon component to display on the left side of the input |
| `rightIcon` | `React.ReactNode` | ❌ | - | Icon component to display on the right side of the input |
| `onRightIconPress` | `() => void` | ❌ | - | Function to call when the right icon is pressed |

### Style Customization

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `containerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the outer container |
| `labelStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the label text |
| `inputStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the text input itself |
| `inputContainerStyle` | `StyleProp<ViewStyle>` | ❌ | - | Style for the container around the input and icons |
| `errorStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the error message text |
| `helperStyle` | `StyleProp<TextStyle>` | ❌ | - | Style for the helper text |

### Behavior Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `onChangeText` | `(text: string) => void` | ❌ | - | Function to call when text changes |
| `onBlur` | `() => void` | ❌ | - | Function to call when input loses focus |
| `onFocus` | `() => void` | ❌ | - | Function to call when input gains focus |

## Examples

### Basic Input with Label

```jsx
<CustomInput
  label="Username"
  placeholder="Enter your username"
  onChangeText={(text) => console.log(text)}
/>
```

### Input with Error State

```jsx
<CustomInput
  label="Email"
  placeholder="Enter your email"
  value={email}
  onChangeText={setEmail}
  error={!isValidEmail(email) ? "Please enter a valid email address" : ""}
/>
```

### Input with Helper Text

```jsx
<CustomInput
  label="Password"
  placeholder="Enter your password"
  secureTextEntry
  helper="Password must be at least 8 characters long"
  onChangeText={setPassword}
/>
```

### Input with Icons

```jsx
import { Ionicons } from '@expo/vector-icons';

// Password input with toggle icon
const [showPassword, setShowPassword] = useState(false);

<CustomInput
  label="Password"
  placeholder="Enter your password"
  secureTextEntry={!showPassword}
  leftIcon={<Ionicons name="lock-closed" size={20} color="#888" />}
  rightIcon={
    <Ionicons 
      name={showPassword ? "eye-off" : "eye"} 
      size={20} 
      color="#888" 
    />
  }
  onRightIconPress={() => setShowPassword(!showPassword)}
  onChangeText={setPassword}
/>
```