MaskedInput

'use client';

import { CardInput, Field, MaskedInput, MoneyInput, PhoneInput } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function MaskedInputOverview() {
  const [phone, setPhone] = useState('');
  const [sum, setSum] = useState<number | null>(1250000);
  const [card, setCard] = useState('');
  const [passport, setPassport] = useState('');

  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      <Field label="Telefon" description={`Qiymat: "${phone}"`}>
        <PhoneInput value={phone} onValueChange={setPhone} />
      </Field>
      <Field label="Summa" description={`Qiymat: ${sum ?? 'null'}`}>
        <MoneyInput value={sum} onValueChange={setSum} />
      </Field>
      <Field label="Karta raqami" description={`Qiymat: "${card}"`}>
        <CardInput value={card} onValueChange={setCard} />
      </Field>
      <Field label="Pasport" description={`Qiymat: "${passport}"`}>
        <MaskedInput
          mask="AA 9999999"
          uppercase
          placeholder="AB 1234567"
          value={passport}
          onValueChange={setPassport}
        />
      </Field>
    </div>
  );
}

'use client';

import { Field, PhoneInput, type PhoneInputDetails } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function PhoneInputDemo() {
  const [phone, setPhone] = useState('');
  const [details, setDetails] = useState<PhoneInputDetails | null>(null);

  const badOperator = phone.length >= 2 && !details?.operator;

  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Field
        label="Telefon raqami"
        required
        error={badOperator ? `"${phone.slice(0, 2)}" — bunday operator kodi yo'q` : undefined}
        description={
          details?.valid ? `Operator: ${details.operator}` : '+998 90 123 45 67 ni joylang'
        }
      >
        <PhoneInput
          value={phone}
          onValueChange={(value, info) => {
            setPhone(value);
            setDetails(info);
          }}
        />
      </Field>
      <PhoneInput aria-label="Kichik" size="sm" defaultValue="991234567" />
      <PhoneInput aria-label="Faqat o'qish" readOnly defaultValue="935554433" />
    </div>
  );
}

'use client';

import { Field, MoneyInput } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function MoneyInputDemo() {
  const [price, setPrice] = useState<number | null>(null);

  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      <Field label="Narx" description={`Qiymat: ${price ?? 'null'}`}>
        <MoneyInput value={price} onValueChange={setPrice} clearable />
      </Field>
      <Field label="Kurs" description='decimals={2}, currency="$"'>
        <MoneyInput decimals={2} currency="$" defaultValue={12.5} />
      </Field>
      <Field label="Oylik to'lov" description="100 000 dan 50 000 000 gacha">
        <MoneyInput min={100000} max={50000000} />
      </Field>
      <Field label="Valyutasiz" description="currency={null}">
        <MoneyInput currency={null} defaultValue={980000} />
      </Field>
    </div>
  );
}

'use client';

import { CardInput, Field, getCardDetails } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function CardInputDemo() {
  const [card, setCard] = useState('');
  const { complete, valid, brand } = getCardDetails(card);

  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      <Field
        label="Karta raqami"
        error={complete && !valid ? "Karta raqami noto'g'ri" : undefined}
        description={
          valid ? `Karta to'g'ri · ${brand ?? 'boshqa'}` : "Sinab ko'ring: 4111 1111 1111 1111"
        }
      >
        <CardInput value={card} onValueChange={setCard} />
      </Field>
      <div className="flex flex-col gap-3">
        <CardInput aria-label="Uzcard" defaultValue="8600123412341234" />
        <CardInput aria-label="Humo" defaultValue="9860010203040506" />
        <CardInput aria-label="Luhn xato" defaultValue="4111111111111112" />
      </div>
    </div>
  );
}

'use client';

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

export default function MaskedInputCustom() {
  return (
    <div className="grid w-full max-w-2xl gap-4 sm:grid-cols-2">
      <Field label="Avtomobil raqami" description='mask="99 A 999 AA"'>
        <MaskedInput mask="99 A 999 AA" uppercase placeholder="01 A 123 BC" />
      </Field>
      <Field label="JShShIR" description="14 ta raqam">
        <MaskedInput mask="99999999999999" inputMode="numeric" placeholder="14 raqam" />
      </Field>
      <Field label="Vaqt" description='mask="99:99"'>
        <MaskedInput mask="99:99" inputMode="numeric" placeholder="09:30" />
      </Field>
      <Field label="Promo-kod" description='mask="****-****"'>
        <MaskedInput mask="****-****" uppercase placeholder="XXXX-XXXX" />
      </Field>
    </div>
  );
}