Combobox

npx shadcn@latest add https://docs.nasaqui.com/r/combobox.json

import { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxEmpty } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  Field,
  FieldLabel,
} from "@fadymondy/nasaq/web";

const COUNTRIES = [
  { value: "sa", label: "Saudi Arabia" },
  { value: "eg", label: "Egypt" },
  { value: "jo", label: "Jordan" },
];

export function CountryField() {
  return (
    <Field>
      <FieldLabel>Country</FieldLabel>
      <Combobox items={COUNTRIES}>
        <ComboboxInput placeholder="Search a country…" />
        <ComboboxContent>
          <ComboboxEmpty>No results</ComboboxEmpty>
          <ComboboxList>
            {(item: { value: string; label: string }) => (
              <ComboboxItem key={item.value} value={item}>
                {item.label}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </Field>
  );
}

Combobox                  Base UI Combobox.Root (filter defaults to comboboxFilter)
├─ ComboboxInput          single: box with input, clear and chevron   data-slot="combobox-input-group"
│  or ComboboxChips       multiple: chips + inline input              data-slot="combobox-chips"
│     └─ chip             data-slot="combobox-chip" / "combobox-chip-remove"
└─ ComboboxContent        portal + positioner + popup                 data-slot="combobox-content"
   ├─ ComboboxEmpty       data-slot="combobox-empty"
   └─ ComboboxList        data-slot="combobox-list"
      ├─ ComboboxGroup / ComboboxLabel / ComboboxSeparator
      └─ ComboboxItem     data-slot="combobox-item", check at the inline-start

import {
  Combobox,
  ComboboxChips,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxItem,
  ComboboxList,
} from "@fadymondy/nasaq/web";
import { useState } from "react";

type Option = { value: string; label: string };
const ITEMS: Option[] = [
  { value: "sa", label: "المملكة العربية السعودية" },
  { value: "eg", label: "مصر" },
  { value: "jo", label: "الأردن" },
];

export function Countries() {
  const [value, setValue] = useState<Option[]>([]);
  return (
    <Combobox multiple items={ITEMS} value={value} onValueChange={setValue}>
      <ComboboxChips placeholder="ابحث عن دولة…" removeLabel="إزالة" />
      <ComboboxContent>
        <ComboboxEmpty>لا توجد نتائج</ComboboxEmpty>
        <ComboboxList>
          {(item: Option) => (
            <ComboboxItem key={item.value} value={item}>
              {item.label}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}