import {
  Canvas,
  Controls,
  Meta,
  Subtitle,
  Title,
} from '@storybook/addon-docs/blocks'
import * as FieldInputStories from './FieldInput.stories'
import { LifecycleTag } from '../../docs/components'

<Meta title="Form/FieldInput" of={FieldInputStories} />

<Title>FieldInput</Title>
<Subtitle>
  Enhanced input with a leading icon slot, validation state indicators, password
  toggle, and inline error message. Composable via primitives for custom
  layouts.
</Subtitle>
<LifecycleTag variant="In Development" />
**Component type:** Abstraction over Input

<Canvas of={FieldInputStories.Default} layout="padded" sourceState="shown" />
<Controls of={FieldInputStories.Default} />

## When to use

Use `FieldInput` when the input needs a leading icon, loading/valid/invalid state indicators, a password toggle, or a hover-to-clear button. For plain inputs without these features, use `Input`. For custom slot arrangements, use the **FieldInput Primitives** directly.

## Import

```tsx
import { FieldInput } from '@chainlink/blocks'
```

For custom layouts using the underlying primitives, see **FieldInput Primitives**.

## Anatomy

```tsx
{
  /* With leading icon — pass icon as children */
}
;<FieldInput placeholder="you@example.com" type="email">
  <SvgEmail />
</FieldInput>

{
  /* Without icon */
}
;<FieldInput placeholder="Enter text..." />
```

## Examples

### With icon

<Canvas of={FieldInputStories.LeftIcon} layout="padded" sourceState="shown" />

### Validation states

<Canvas
  of={FieldInputStories.LoadingState}
  layout="padded"
  sourceState="shown"
/>
<Canvas of={FieldInputStories.ValidState} layout="padded" sourceState="shown" />
<Canvas
  of={FieldInputStories.InvalidState}
  layout="padded"
  sourceState="shown"
/>

### Error

<Canvas of={FieldInputStories.WithError} layout="padded" sourceState="shown" />
<Canvas
  of={FieldInputStories.WithErrorMessage}
  layout="padded"
  sourceState="shown"
/>

### Password

<Canvas
  of={FieldInputStories.PasswordHidden}
  layout="padded"
  sourceState="shown"
/>
<Canvas
  of={FieldInputStories.PasswordWithLeftIcon}
  layout="padded"
  sourceState="shown"
/>

### Clearable

<Canvas of={FieldInputStories.Clearable} layout="padded" sourceState="shown" />

### Sizes

<Canvas of={FieldInputStories.Small} layout="padded" sourceState="shown" />

### Width variants

<Canvas of={FieldInputStories.Widths} layout="padded" sourceState="shown" />

## Related components

- `FieldInput Primitives` for custom layouts that arrange icon, control, and action slots differently
- `Input` for simple inputs without icons or validation states
- `Field` to add a label, helper text, or error message around the input