InputField for user text entry.

import Input from '@/components/Input';
export function Example() {  return (    <>      <Input placeholder="Lorem ipsum" />      <Input type="email" placeholder="lorem@example.com" />      <Input type="password" placeholder="••••••••" />    </>  );}

import Input from '@/components/Input';
export function Example() {  return (    <>      <Input         $title="Lorem ipsum"        $description="Dolor sit amet consectetur adipiscing elit."        placeholder="Enter text"      />      <Input         $title="Email address"        $description="We'll never share your email."        type="email"        placeholder="lorem@example.com"        required      />    </>  );}

import Input from '@/components/Input';import { User, Search, Mail } from 'lucide-react';
export function Example() {  return (    <>      <Input         $contentStart={<User />}        placeholder="Lorem ipsum"      />      <Input         $contentStart={<Search />}        $contentEnd="⌘K"        placeholder="Search..."      />      <Input         $contentStart={<Mail />}        $contentEnd="@example.com"        placeholder="username"      />    </>  );}

import Input from '@/components/Input';import { Search } from 'lucide-react';
export function Example() {  return (    <Input      $contentStart={<Search />}      $description="Press Ctrl+K on Windows/Linux or Cmd+K on macOS to focus this input."      $key="k"      $keyCtrl      $title="Quick search"      placeholder="Press Ctrl/Cmd+K"    />  );}

import Input from '@/components/Input';
export function Example() {  return (    <>      <Input         $title="Invalid input"        $description="This field has validation errors."        $invalid        defaultValue="invalid@value"      />      <Input         $title="Disabled input"        $description="This field is disabled."        disabled        defaultValue="cannot edit"      />    </>  );}

import { TextArea } from '@/components/Input';
export function Example() {  return (    <TextArea      $title="Lorem message"      $description="Enter your message below."      placeholder="Lorem ipsum dolor sit amet..."      rows={4}    />  );}

import { Select } from '@/components/Input';
export function Example() {  return (    <Select      $title="Lorem option"      $description="Choose your preferred option."      defaultValue=""    >      <option value="" disabled>Select option</option>      <option value="lorem">Lorem ipsum</option>      <option value="dolor">Dolor sit amet</option>      <option value="consectetur">Consectetur adipiscing</option>    </Select>  );}

import Input from '@/components/Input';
export function Example() {  return (    <Input      type="date"      $title="Lorem date"      $description="Select a date from the calendar."      placeholder="YYYY-MM-DD"    />  );}

import InputOTP from '@/components/InputOTP';
export function Example() {  return (    <Input      $otp      $title="Lorem verification"      $description="Enter the 6-digit code."      name="otp"    />  );}

import InputPhone from '@/components/InputPhone';
export function Example() {  return (    <InputPhone       $title="Lorem phone"      $description="Enter your phone number with country code."      name="phone"      placeholder="Phone number"    />  );}

import Input from '@/components/Input';import Link from '@/components/Link';
export function Example() {  return (    <>      <Input $inline placeholder="Inline input" />            <Input         $title="Lorem with button"        placeholder="Enter text"        $button={<Link href="#">Submit</Link>}      />    </>  );}