Form

'use client';

import { zUz } from '@akhatmirzo/core/zod';
import {
  Checkbox,
  DatePicker,
  Input,
  PhoneInput,
  PinflInput,
  Radio,
  RadioGroup,
  RegionSelect,
} from '@akhatmirzo/ui';
import { Form, FormField, FormRootError, FormSubmit } from '@akhatmirzo/ui/form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

const schema = z.object({
  fullName: z.string().trim().min(3, "To'liq ismingizni kiriting"),
  phone: zUz.phone(),
  pinfl: zUz.pinfl(),
  birthDate: z.date({ error: "Tug'ilgan sanani kiriting" }),
  gender: z.enum(['male', 'female'], { error: 'Jinsni tanlang' }),
  region: zUz.region(),
  password: zUz.password({ minScore: 2 }),
  terms: z.literal(true, { error: 'Shartlarga rozilik bering' }),
});

type Registration = z.output<typeof schema>;

export default function FormRegistration() {
  const [saved, setSaved] = useState<Registration | null>(null);
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { fullName: '', phone: '', pinfl: '', region: '', password: '' },
  });

  const save = async (data: Registration) => {
    await new Promise((r) => setTimeout(r, 600));
    if (data.pinfl.startsWith('6')) {
      form.setError('root', {
        message: "Bu JShShIR bilan foydalanuvchi allaqachon ro'yxatdan o'tgan",
      });
      return;
    }
    setSaved(data);
  };

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Form form={form} onSubmit={save} className="flex flex-col gap-4">
        <FormField name="fullName" label="To'liq ism" required>
          <Input placeholder="Sarvar Abduxoliqov" autoComplete="name" />
        </FormField>
        <FormField name="phone" label="Telefon" description="SMS kod yuboriladi" required>
          <PhoneInput />
        </FormField>
        <FormField name="pinfl" label="JShShIR" description="Pasportdagi 14 xonali raqam" required>
          <PinflInput />
        </FormField>
        <FormField name="birthDate" label="Tug'ilgan sana" required>
          <DatePicker />
        </FormField>
        <FormField name="gender" label="Jinsi" required>
          <RadioGroup orientation="horizontal">
            <Radio value="male" label="Erkak" />
            <Radio value="female" label="Ayol" />
          </RadioGroup>
        </FormField>
        <FormField name="region" label="Hudud" required>
          <RegionSelect />
        </FormField>
        <FormField name="password" label="Parol" required>
          <Input type="password" autoComplete="new-password" />
        </FormField>
        <FormField name="terms">
          <Checkbox label="Foydalanish shartlariga roziman" />
        </FormField>
        <FormRootError />
        <FormSubmit fullWidth>Ro'yxatdan o'tish</FormSubmit>
      </Form>
      {saved && (
        <pre className="overflow-x-auto rounded-lg bg-surface-muted p-3 text-xs text-text-muted">
          {JSON.stringify(saved, null, 2)}
        </pre>
      )}
    </div>
  );
}

'use client';

import { zUz } from '@akhatmirzo/core/zod';
import { FileUpload, MoneyInput, SegmentedControl, TagInput, toast } from '@akhatmirzo/ui';
import { Form, FormField, FormSubmit } from '@akhatmirzo/ui/form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

const schema = z.object({
  condition: z.enum(['new', 'used'], { error: 'Holatini tanlang' }),
  price: zUz.money({ min: 10_000, max: 500_000_000 }),
  tags: z.array(z.string()).min(1, 'Kamida bitta teg').max(5, "Ko'pi bilan 5 ta teg"),
  photos: z.array(z.unknown()).min(1, 'Kamida bitta rasm yuklang'),
});

export default function FormListing() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { price: null, tags: [], photos: [] },
  });

  return (
    <Form
      form={form}
      onSubmit={(data) => {
        toast.success("E'lon saqlandi", {
          description: `${data.price} so'm · ${data.tags.join(', ')}`,
        });
        form.reset();
      }}
      className="flex w-full max-w-md flex-col gap-4"
    >
      <FormField name="condition" label="Holati">
        <SegmentedControl fullWidth>
          <SegmentedControl.Item value="new">Yangi</SegmentedControl.Item>
          <SegmentedControl.Item value="used">Ishlatilgan</SegmentedControl.Item>
        </SegmentedControl>
      </FormField>
      <FormField name="price" label="Narxi" description="10 000 so'mdan 500 mln so'mgacha">
        <MoneyInput showWords />
      </FormField>
      <FormField name="tags" label="Teglar" description="Enter yoki vergul bilan qo'shing">
        <TagInput placeholder="telefon, samsung" />
      </FormField>
      <FormField name="photos" label="Rasmlar">
        <FileUpload accept={['image/*']} multiple maxFiles={4} />
      </FormField>
      <FormSubmit>E'lonni joylash</FormSubmit>
    </Form>
  );
}

'use client';

import { cn } from '@akhatmirzo/ui';
import { Form, FormField, FormSubmit } from '@akhatmirzo/ui/form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

const slots = ['09:00–12:00', '12:00–15:00', '15:00–18:00', '18:00–21:00'];

const schema = z.object({
  slot: z.string().min(1, 'Yetkazib berish vaqtini tanlang'),
});

export default function FormRenderFallback() {
  const form = useForm({ resolver: zodResolver(schema), defaultValues: { slot: '' } });

  return (
    <Form
      form={form}
      onSubmit={(data) => alert(`Tanlandi: ${data.slot}`)}
      className="flex w-full max-w-sm flex-col gap-4"
    >
      <FormField
        name="slot"
        label="Yetkazib berish vaqti"
        render={({ value, onValueChange, controlProps, invalid }) => (
          <div {...controlProps} role="radiogroup" className="grid grid-cols-2 gap-2">
            {slots.map((slot) => (
              <button
                key={slot}
                type="button"
                role="radio"
                aria-checked={value === slot}
                onClick={() => onValueChange(slot)}
                className={cn(
                  'rounded-lg border px-3 py-2 text-sm tabular-nums',
                  value === slot
                    ? 'border-primary bg-primary-soft text-primary-soft-foreground'
                    : 'border-border bg-surface text-text',
                  invalid && value !== slot && 'border-danger',
                )}
              >
                {slot}
              </button>
            ))}
          </div>
        )}
      />
      <FormSubmit>Tasdiqlash</FormSubmit>
    </Form>
  );
}