Validatsiya

'use client';

import { isValidEmail, parsePhone } from '@akhatmirzo/core';
import { Badge, Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function CorePhoneValidate() {
  const [phone, setPhone] = useState('+998 90 123-45-67');
  const [email, setEmail] = useState('sarvar@mail');
  const parsed = parsePhone(phone);
  const code = parsed.digits.slice(0, 2);
  const phoneError =
    code.length === 2 && !parsed.operator ? `"${code}" — bunday operator kodi yo'q` : undefined;
  const emailValid = isValidEmail(email);

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Field label="Telefon" error={phoneError} description={`digits: ${parsed.digits || '—'}`}>
        <Input value={phone} onChange={(e) => setPhone(e.target.value)} inputMode="tel" />
      </Field>
      <div className="flex flex-wrap gap-2">
        <Badge color={parsed.valid ? 'success' : 'neutral'} dot>
          {parsed.valid ? "To'g'ri raqam" : "To'liq emas"}
        </Badge>
        {parsed.operator && <Badge color="info">Operator: {parsed.operator}</Badge>}
      </div>
      <Field
        label="Email"
        error={email.trim() && !emailValid ? "Email manzil noto'g'ri" : undefined}
      >
        <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      </Field>
    </div>
  );
}

'use client';

import { detectCardBrand, formatCardNumber, isValidCardNumber } from '@akhatmirzo/core';
import { Badge, Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const BRANDS = { uzcard: 'Uzcard', humo: 'Humo', visa: 'Visa', mastercard: 'Mastercard' };

export default function CoreCardValidate() {
  const [digits, setDigits] = useState('8600');
  const brand = detectCardBrand(digits);
  const complete = digits.length === 16;
  const valid = isValidCardNumber(digits);

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Field
        label="Karta raqami"
        description="To'g'ri namuna: 4111 1111 1111 1111"
        error={complete && !valid ? "Karta raqami noto'g'ri" : undefined}
      >
        <Input
          value={formatCardNumber(digits)}
          onChange={(e) => setDigits(e.target.value.replace(/\D/g, '').slice(0, 16))}
          inputMode="numeric"
          placeholder="0000 0000 0000 0000"
          suffix={brand ? BRANDS[brand] : undefined}
        />
      </Field>
      <div className="flex flex-wrap gap-2">
        <Badge color={brand ? 'info' : 'neutral'}>{brand ? BRANDS[brand] : "Brend noma'lum"}</Badge>
        <Badge color={!complete ? 'neutral' : valid ? 'success' : 'danger'} dot>
          {!complete ? `${digits.length}/16` : valid ? "Luhn: to'g'ri" : 'Luhn: xato'}
        </Badge>
      </div>
    </div>
  );
}

'use client';

import { passwordStrength } from '@akhatmirzo/core';
import { Badge, Field, Input } from '@akhatmirzo/ui';
import { useState } from 'react';

const BAR = ['bg-danger', 'bg-danger', 'bg-warning', 'bg-success', 'bg-success'];
const COLOR = ['danger', 'danger', 'warning', 'success', 'success'] as const;
const CHECKS = {
  length: 'Kamida 8 belgi',
  lower: 'Kichik harf',
  upper: 'Katta harf',
  digit: 'Raqam',
  symbol: 'Belgi (!@#…)',
};

export default function CorePassword() {
  const [password, setPassword] = useState('Parol123');
  const { score, label, checks } = passwordStrength(password);

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Field label="Parol">
        <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      </Field>
      <div className="flex gap-1" aria-hidden>
        {[1, 2, 3, 4].map((i) => (
          <span
            key={i}
            className={`h-1.5 flex-1 rounded-full ${password && i <= Math.max(score, 1) ? BAR[score] : 'bg-surface-muted'}`}
          />
        ))}
      </div>
      <div className="flex items-center gap-2">
        <Badge color={COLOR[score]}>{label}</Badge>
        <span className="text-xs text-text-muted">score: {score}/4</span>
      </div>
      <ul className="flex flex-col gap-1 text-sm">
        {(Object.keys(CHECKS) as (keyof typeof CHECKS)[]).map((key) => (
          <li key={key} className={checks[key] ? 'text-text' : 'text-text-muted'}>
            {checks[key] ? '✓' : '○'} {CHECKS[key]}
          </li>
        ))}
      </ul>
    </div>
  );
}