Combobox

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}
  disabled={false}
  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>

const [value, setValue] = React.useState<string[]>([])
 
const handleSelect = (frameworkValue: string) => {
  if (frameworkValue === "__select_all__") {
    // Select all if not all are selected, otherwise deselect all
    const allValues = frameworks.map((f) => f.value)
    const allSelected = allValues.every((val) => value.includes(val))
    setValue(allSelected ? [] : allValues)
  } else {
    if (value.includes(frameworkValue)) {
      setValue(value.filter((v) => v !== frameworkValue))
    } else {
      setValue([...value, frameworkValue])
    }
  }
}
 
const allSelected = frameworks.every((f) => value.includes(f.value))
 
<Combobox
  multiple
  options={frameworks}
  value={value}
  setValue={setValue}
  selectPlaceholder="Select frameworks..."
  searchPlaceholder="Search frameworks..."
>
  <ComboboxGroup>
    <ComboboxItem
      value="__select_all__"
      onSelect={() => handleSelect("__select_all__")}
    >
      Select all
      <Check weight="bold" className={cm("size-4 opacity-0", allSelected && "opacity-100")} />
    </ComboboxItem>
    {frameworks.map((framework) => {
      const isSelected = value.includes(framework.value)
      
      return (
        <ComboboxItem
          key={framework.value}
          value={framework.value}
          onSelect={() => handleSelect(framework.value)}
        >
          {framework.label}
          <Check weight="bold" className={cm("size-4 opacity-0", isSelected && "opacity-100")} />
        </ComboboxItem>
      )
    })}
  </ComboboxGroup>
  <ComboboxEmpty>No framework found.</ComboboxEmpty>
</Combobox>