import { InputBasicDemo } from "../../../src/components/input-basic-demo";
import { InputSizesDemo } from "../../../src/components/input-sizes-demo";
import { InputWidthVariantsDemo } from "../../../src/components/input-width-variants-demo";
import { InputInvalidDemo } from "../../../src/components/input-invalid-demo";

## Overview

The Input component provides a styled text input field with support for different sizes, width behaviors, and validation states. It includes automatic styling for focus, disabled, and error states, with proper accessibility attributes.

## Import

```tsx
import { Input } from "@px-ui/core";
```

## Usage

<Preview>
  <InputBasicDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Input placeholder="Enter your email" />
  ```
</CodeBlock>

## Examples

### Sizes

The Input component supports two size variants for different interface densities.

<Preview>
  <InputSizesDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Input size="sm" placeholder="Small input" />
  <Input size="default" placeholder="Default input" />
  ```
</CodeBlock>

### Width Variants

Control how the input handles width with two variants: enforced for a fixed minimum width, and full for 100% width.

<Preview>
  <InputWidthVariantsDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Input widthVariant="enforced" placeholder="Enforced width" />
  <Input widthVariant="full" placeholder="Full width" />
  ```
</CodeBlock>

### Invalid State

The Input component supports validation states through the `invalid` prop, which applies error styling and sets the appropriate ARIA attributes.

<Preview>
  <InputInvalidDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Input placeholder="Valid input" />
  <Input invalid placeholder="Invalid input" />
  <Input disabled placeholder="Disabled input" />
  ```
</CodeBlock>

## API Reference

### Input

A styled text input component with size, width, and validation customization.

| Prop           | Type                   | Default     | Description                                                                  |
| -------------- | ---------------------- | ----------- | ---------------------------------------------------------------------------- |
| `size`         | `"default" \| "sm"`    | `"default"` | Size variant of the input                                                    |
| `widthVariant` | `"enforced" \| "full"` | `"full"`    | Width behavior - enforced uses a fixed minimum width, full stretches to 100% |
| `invalid`      | `boolean`              | `false`     | When true, applies error styling and sets `aria-invalid` attribute           |
| `className`    | `string`               | -           | Additional CSS classes                                                       |

**Inherited Props:** Inherits all props from native HTML `input` element including `type`, `value`, `onChange`, `placeholder`, `disabled`, etc. Note that the native `size` attribute is omitted in favor of the custom `size` prop.