Input

'use client';

import { Input } from '@akhatmirzo/ui';
import { Search } from 'lucide-react';

export default function InputBasic() {
  return (
    <div className="w-full max-w-sm">
      <Input leftIcon={<Search />} placeholder="Mahsulot qidirish" aria-label="Mahsulot qidirish" />
    </div>
  );
}

'use client';

import { Button, Input } from '@akhatmirzo/ui';

export default function InputSizes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex items-center gap-2">
        <Input size="sm" placeholder="Kichik · 32" aria-label="Kichik" />
        <Button size="sm">Qo'llash</Button>
      </div>
      <div className="flex items-center gap-2">
        <Input size="md" placeholder="O'rta · 40" aria-label="O'rta" />
        <Button size="md">Qo'llash</Button>
      </div>
      <div className="flex items-center gap-2">
        <Input size="lg" placeholder="Katta · 48" aria-label="Katta" />
        <Button size="lg">Qo'llash</Button>
      </div>
    </div>
  );
}

'use client';

import { Input } from '@akhatmirzo/ui';
import { Mail } from 'lucide-react';

export default function InputAddons() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Input prefix="+998" placeholder="90 123 45 67" inputMode="tel" aria-label="Telefon" />
      <Input suffix="so'm" placeholder="1 250 000" inputMode="numeric" aria-label="Narx" />
      <Input rightIcon={<Mail />} type="email" placeholder="email@misol.uz" aria-label="Email" />
      <Input prefix="https://" suffix=".uz" placeholder="dokon" aria-label="Sayt manzili" />
    </div>
  );
}

'use client';

import { Input } from '@akhatmirzo/ui';
import { Search } from 'lucide-react';
import { useState } from 'react';

export default function InputClearable() {
  const [query, setQuery] = useState('Samarqand');

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Input
        leftIcon={<Search />}
        clearable
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Shahar qidirish"
        aria-label="Shahar qidirish"
      />
      <p className="text-xs text-text-muted">Qiymat: {query || '—'}</p>
    </div>
  );
}

'use client';

import { Field, Input } from '@akhatmirzo/ui';

export default function InputPassword() {
  return (
    <div className="w-full max-w-sm">
      <Field label="Parol" description="Kamida 8 ta belgi">
        <Input type="password" defaultValue="maxfiy123" autoComplete="current-password" />
      </Field>
    </div>
  );
}

'use client';

import { Input } from '@akhatmirzo/ui';

export default function InputStates() {
  return (
    <div className="grid w-full max-w-lg grid-cols-1 gap-3 sm:grid-cols-2">
      <Input placeholder="Oddiy" aria-label="Oddiy" />
      <Input invalid defaultValue="sarvar@mail" aria-label="Xato" />
      <Input disabled defaultValue="O'chirilgan" aria-label="O'chirilgan" />
      <Input readOnly defaultValue="Faqat o'qish uchun" aria-label="Faqat o'qish" />
    </div>
  );
}

'use client';

import { Field, Input } from '@akhatmirzo/ui';
import { Mail } from 'lucide-react';

export default function InputWithField() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Field label="Telefon" required description="Tasdiqlash kodi SMS orqali keladi">
        <Input prefix="+998" placeholder="90 123 45 67" inputMode="tel" />
      </Field>
      <Field label="Email" error="Email manzil noto'g'ri">
        <Input leftIcon={<Mail />} defaultValue="sarvar@mail" clearable />
      </Field>
    </div>
  );
}