Usage

import {
  Combobox,
  ComboboxGroup,
  ComboboxItem,
  ComboboxEmpty,
} from "@aqqo/aqqo-ui";

// Example data
const frameworks = [
  {
    value: "next.js",
    label: "Next.js",
  },
  {
    value: "sveltekit",
    label: "SvelteKit",
  },
  {
    value: "nuxt.js",
    label: "Nuxt.js",
  },
  {
    value: "remix",
    label: "Remix",
  },
  {
    value: "astro",
    label: "Astro",
  },
]

<Combobox
  options={frameworks}
  value={value}
  setValue={setValue}
  selectPlaceholder="Select framework..."
  searchPlaceholder="Search frameworks..."
>
  <ComboboxGroup>
    {frameworks.map((framework) => (
      <ComboboxItem
        key={framework.value}
        value={framework.value} // value to search on (could use framework.label instead)
        onSelect={() => setValue(framework.value)}
      >
        {framework.label}
        <Check weight="bold" className={cm("size-4 opacity-0", value === framework.value && "opacity-100")} />
      </ComboboxItem>
    ))}
  </ComboboxGroup>
  <ComboboxEmpty>No framework found.</ComboboxEmpty>
</Combobox>