TextField

import { TextField } from "@fanvue/ui";
import type { TextFieldProps, TextFieldSize } from "@fanvue/ui";

import { TextField } from "@fanvue/ui";

<TextField label="Label" placeholder="Placeholder Text" />

import { TextField } from "@fanvue/ui";

<TextField
  label="Username"
  placeholder="Enter username"
  error
  helperText="This field is required"
  defaultValue=""
/>

import { TextField } from "@fanvue/ui";

<div className="flex w-[375px] flex-col gap-4">
  <TextField size="48" label="Size 48" leftLabel="$" rightLabel="USD" placeholder="0.00" />
  <TextField size="40" label="Size 40" leftLabel="$" rightLabel="USD" placeholder="0.00" />
  <TextField size="32" label="Size 32" leftLabel="$" rightLabel="USD" placeholder="0.00" />
</div>

import { TextField } from "@fanvue/ui";

<TextField placeholder="No label" aria-label="Search" />

import { HomeIcon, InfoCircleIcon, TextField } from "@fanvue/ui";

<div className="flex w-[375px] flex-col gap-6">
  <TextField label="Default" placeholder="Placeholder" />
  <TextField label="With helper" placeholder="Placeholder" helperText="Helper text" />
  <TextField label="With value" defaultValue="Typed text" />
  <TextField label="Validated" validated defaultValue="user@example.com" />
  <TextField label="Error" error errorMessage="Error message" defaultValue="invalid" />
  <TextField label="Disabled" placeholder="Placeholder" disabled />
  <TextField label="Disabled with value" defaultValue="Value" disabled />
  <TextField label="Left icon" placeholder="Placeholder" leftIcon={<HomeIcon />} />
  <TextField label="Right icon" placeholder="Placeholder" rightIcon={<InfoCircleIcon />} />
  <TextField
    label="Both icons"
    placeholder="Placeholder"
    leftIcon={<HomeIcon />}
    rightIcon={<InfoCircleIcon />}
  />
</div>