Combobox

'use client';

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

const cities = [
  'Toshkent',
  'Samarqand',
  'Buxoro',
  'Xiva',
  'Namangan',
  'Andijon',
  "Farg'ona",
  "Qo'qon",
  "Marg'ilon",
  'Nukus',
  'Qarshi',
  'Termiz',
].map((label) => ({ value: label.toLowerCase().replace(/'/g, ''), label }));

export default function ComboboxBasic() {
  const [city, setCity] = useState<string | null>(null);

  return (
    <Field
      label="Shahar"
      description={city ? `Qiymat: ${city}` : 'Hali tanlanmagan'}
      className="w-full max-w-xs"
    >
      <Combobox
        options={cities}
        value={city}
        onValueChange={setCity}
        placeholder="Shahar tanlang"
        clearable
      />
    </Field>
  );
}

'use client';

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

const districts = [
  'Gʻuzor',
  "G'allaorol",
  'Oʻrta Chirchiq',
  "Qo'shrabot",
  'Shahrisabz',
  'Chilonzor',
  'Yunusobod',
  "Mirzo Ulug'bek",
  'Toshkent tumani',
].map((label, i) => ({ value: String(i), label }));

export default function ComboboxUzbekSearch() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Field label="Tuman">
        <Combobox options={districts} placeholder="Tumanni tanlang" />
      </Field>
      <p className="text-sm text-text-muted">
        Yozib ko'ring: <span className="font-medium text-text">guzor</span>,{' '}
        <span className="font-medium text-text">g‘allaorol</span>,{' '}
        <span className="font-medium text-text">Чилонзор</span>,{' '}
        <span className="font-medium text-text">ulugbek</span>
      </p>
    </div>
  );
}

'use client';

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

const branches = [
  'Toshkent',
  'Samarqand',
  'Buxoro',
  'Namangan',
  'Andijon',
  "Farg'ona",
  'Nukus',
].map((label) => ({ value: label.toLowerCase().replace(/'/g, ''), label }));

export default function ComboboxMultiple() {
  const [selected, setSelected] = useState<string[]>(['toshkent', 'samarqand']);

  return (
    <Field
      label="Filiallar"
      description={`${selected.length} ta tanlangan`}
      className="w-full max-w-sm"
    >
      <Combobox
        multiple
        options={branches}
        value={selected}
        onValueChange={setSelected}
        placeholder="Filiallarni tanlang"
      />
    </Field>
  );
}

'use client';

import { Combobox, Field, type ComboboxOption } from '@akhatmirzo/ui';
import { useState } from 'react';

const initialTags: ComboboxOption[] = ['dizayn', 'frontend', 'backend', 'mobil'].map((t) => ({
  value: t,
  label: t,
}));

export default function ComboboxCreatable() {
  const [tags, setTags] = useState(initialTags);
  const [chosen, setChosen] = useState<string[]>(['frontend']);

  return (
    <Field
      label="Teglar"
      description="Ro'yxatda yo'q tegni yozing va Enter bosing"
      className="w-full max-w-sm"
    >
      <Combobox
        multiple
        creatable
        options={tags}
        value={chosen}
        onValueChange={setChosen}
        onCreate={(text) => {
          const option = { value: text.toLowerCase(), label: text };
          setTags((prev) => [...prev, option]);
          return option;
        }}
        placeholder="Teg qo'shing"
        leftIcon={null}
      />
    </Field>
  );
}

'use client';

import { searchMatch } from '@akhatmirzo/core';
import { Combobox, Field, type ComboboxOption } from '@akhatmirzo/ui';
import { useRef, useState } from 'react';

const all: ComboboxOption[] = ['Toshkent', 'Samarqand', 'Buxoro', 'Xiva', 'Nukus', 'Termiz'].map(
  (label) => ({ value: label.toLowerCase(), label }),
);

export default function ComboboxServer() {
  const [options, setOptions] = useState(all.slice(0, 3));
  const [loading, setLoading] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);

  // Server so'rovini taqlid qiladi: javob 700ms dan keyin keladi
  const search = (query: string) => {
    clearTimeout(timer.current);
    setLoading(true);
    timer.current = setTimeout(() => {
      setOptions(query ? all.filter((o) => searchMatch(o.label, query).match) : all.slice(0, 3));
      setLoading(false);
    }, 700);
  };

  return (
    <Field label="Shahar (serverdan)" className="w-full max-w-xs">
      <Combobox
        options={options}
        loading={loading}
        onSearch={search}
        placeholder="Qidirib tanlang"
        searchPlaceholder="Shahar nomi..."
        emptyText="Server hech narsa qaytarmadi"
      />
    </Field>
  );
}

'use client';

import { Combobox, Field, type ComboboxOption } from '@akhatmirzo/ui';

function Dot({ className }: { className: string }) {
  return <span className={`size-2.5 rounded-full ${className}`} />;
}

const statuses: ComboboxOption[] = [
  {
    value: 'new',
    label: 'Yangi',
    description: 'Buyurtma qabul qilindi',
    icon: <Dot className="bg-info" />,
  },
  {
    value: 'packing',
    label: "Yig'ilmoqda",
    description: 'Omborda tayyorlanmoqda',
    icon: <Dot className="bg-warning" />,
  },
  {
    value: 'shipping',
    label: "Yo'lda",
    description: 'Kuryerga topshirildi',
    icon: <Dot className="bg-primary" />,
  },
  {
    value: 'cancelled',
    label: 'Bekor qilingan',
    description: 'Arxivlangan holat',
    icon: <Dot className="bg-danger" />,
    disabled: true,
  },
];

export default function ComboboxDetails() {
  return (
    <Field label="Buyurtma holati" className="w-full max-w-xs">
      <Combobox options={statuses} defaultValue="packing" leftIcon={null} />
    </Field>
  );
}

'use client';

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

const cities = ['Toshkent', 'Samarqand', 'Buxoro'].map((label) => ({
  value: label.toLowerCase(),
  label,
}));

export default function ComboboxSizes() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Combobox size="sm" options={cities} aria-label="Shahar" placeholder="sm — 32px" />
      <Combobox size="md" options={cities} aria-label="Shahar" placeholder="md — 40px" />
      <Combobox size="lg" options={cities} aria-label="Shahar" placeholder="lg — 48px" />
    </div>
  );
}

'use client';

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

const cities = ['Toshkent', 'Samarqand', 'Buxoro'].map((label) => ({
  value: label.toLowerCase(),
  label,
}));

export default function ComboboxStates() {
  return (
    <div className="grid w-full gap-4 sm:grid-cols-3">
      <Field label="O'chirilgan" disabled>
        <Combobox options={cities} defaultValue="toshkent" />
      </Field>
      <Field label="Shahar" error="Shaharni tanlang" required>
        <Combobox options={cities} placeholder="Shahar tanlang" />
      </Field>
      <Field label="Yuklanmoqda">
        <Combobox options={[]} loading placeholder="Ochib ko'ring" />
      </Field>
    </div>
  );
}