Combobox

npm install @kuzenbo/core

import { Combobox } from "@kuzenbo/core";

const frameworks = [
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "svelte", label: "Svelte" },
];

function Example() {
  const [value, setValue] = useState("");

  return (
    <Combobox value={value} onValueChange={setValue}>
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Row>
        <Combobox.Input placeholder="Select framework..." />
        <Combobox.Trigger />
      </Combobox.Row>
      <Combobox.Portal>
        <Combobox.Positioner>
          <Combobox.Popup>
            <Combobox.Content>
              <Combobox.List>
                <Combobox.Empty>No results found.</Combobox.Empty>
                <Combobox.Collection items={frameworks}>
                  {(item) => (
                    <Combobox.Item value={item.value}>
                      <Combobox.ItemIndicator />
                      {item.label}
                    </Combobox.Item>
                  )}
                </Combobox.Collection>
              </Combobox.List>
            </Combobox.Content>
          </Combobox.Popup>
        </Combobox.Positioner>
      </Combobox.Portal>
    </Combobox>
  );
}

<Combobox multiple value={values} onValueChange={setValues}>
  <Combobox.Chips>
    {values.map((value) => (
      <Combobox.Chip key={value} value={value}>
        {value}
        <Combobox.ChipRemove />
      </Combobox.Chip>
    ))}
    <Combobox.ChipsInput />
  </Combobox.Chips>
  {/* ... */}
</Combobox>

const { useFilter, useFilteredItems } = Combobox;

function FilteredCombobox() {
  const filter = useFilter({ sensitivity: "base" });
  const filteredItems = useFilteredItems(items, filter);

  return (
    <Combobox>
      {/* ... */}
      <Combobox.Collection items={filteredItems}>
        {(item) => <Combobox.Item value={item.value}>{item.label}</Combobox.Item>}
      </Combobox.Collection>
    </Combobox>
  );
}

<Combobox.List>
  <Combobox.Group>
    <Combobox.GroupLabel>Frameworks</Combobox.GroupLabel>
    <Combobox.Item value="react">React</Combobox.Item>
    <Combobox.Item value="vue">Vue</Combobox.Item>
  </Combobox.Group>
  <Combobox.Separator />
  <Combobox.Group>
    <Combobox.GroupLabel>Libraries</Combobox.GroupLabel>
    <Combobox.Item value="redux">Redux</Combobox.Item>
    <Combobox.Item value="zustand">Zustand</Combobox.Item>
  </Combobox.Group>
</Combobox.List>