OtpInput

'use client';

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

const CORRECT = '123456';

export default function OtpInputVerify() {
  const [code, setCode] = useState('');
  const [status, setStatus] = useState<'idle' | 'error' | 'ok'>('idle');

  return (
    <div className="flex flex-col gap-2">
      <Field
        label="Tasdiqlash kodi"
        description={
          status === 'ok' ? 'Kod tasdiqlandi' : `+998 90 *** ** 67 ga yuborildi. Kod: ${CORRECT}`
        }
        error={status === 'error' ? "Kod noto'g'ri. Qayta urinib ko'ring." : undefined}
      >
        <OtpInput
          groupSize={3}
          value={code}
          disabled={status === 'ok'}
          onValueChange={(value) => {
            setCode(value);
            if (status === 'error') setStatus('idle');
          }}
          onComplete={(value) => setStatus(value === CORRECT ? 'ok' : 'error')}
        />
      </Field>
      <OtpInput.ResendTimer
        onResend={() => {
          setCode('');
          setStatus('idle');
          toast('Yangi kod yuborildi');
        }}
      />
    </div>
  );
}

'use client';

import { OtpInput } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function OtpInputLength() {
  const [promo, setPromo] = useState('');

  return (
    <div className="flex flex-col items-start gap-5">
      <OtpInput length={4} aria-label="4 xonali PIN" />
      <OtpInput length={6} groupSize={2} aria-label="Juft guruhli kod" />
      <div className="flex flex-col gap-2">
        <OtpInput
          type="alphanumeric"
          groupSize={3}
          aria-label="Harfli kod"
          value={promo}
          onValueChange={setPromo}
        />
        <span className="text-sm text-text-muted">Qiymat: {promo || '—'}</span>
      </div>
    </div>
  );
}

'use client';

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

export default function OtpInputStates() {
  return (
    <div className="flex flex-col items-start gap-5">
      <OtpInput invalid defaultValue="482913" groupSize={3} aria-label="Xato kod" />
      <OtpInput disabled defaultValue="12" groupSize={3} aria-label="O'chirilgan" />
    </div>
  );
}

'use client';

import { OtpInput, toast } from '@akhatmirzo/ui';

const sendSms = () =>
  new Promise<void>((resolve) => {
    setTimeout(() => {
      toast('SMS qayta yuborildi');
      resolve();
    }, 800);
  });

export default function OtpResendTimer() {
  return (
    <div className="flex flex-col items-start gap-3">
      <OtpInput.ResendTimer seconds={5} onResend={() => toast('Kod qayta yuborildi')} />
      <OtpInput.ResendTimer
        seconds={3}
        labels={{ resend: 'SMS ni qayta olish' }}
        onResend={sendSms}
      />
    </div>
  );
}