Combobox

import { Combobox, ComboboxWithIcons } from '@hanzo/ui'

export function Default() {
  const [value, setValue] = useState("")
  return (
    <Combobox
      options={frameworks}
      value={value}
      onChange={setValue}
      placeholder="Select framework..."
      searchPlaceholder="Search framework..."
      emptyText="No framework found."
    />
  )
}

export function WithIcons() {
  const [value, setValue] = useState("todo")
  return (
    <XStack items="center" gap="$4">
      <Text color="$quiet" fontSize="$3">
        Status
      </Text>
      <ComboboxWithIcons
        options={statuses}
        value={value}
        onChange={setValue}
        placeholder="Set status..."
        searchPlaceholder="Change status..."
        width={160}
      />
    </XStack>
  )
}

export function Disabled() {
  return (
    <Combobox
      options={frameworks}
      placeholder="Select framework..."
      disabled
    />
  )
}

Types

export type ComboboxOption = {
  value: string
  label: string
}

export type ComboboxProps = Omit<ComponentProps<typeof PopoverContent>, 'children' | 'onChange'> & {
  options: ComboboxOption[]
  value?: string
  onChange?: (value: string) => void
  placeholder?: string
  searchPlaceholder?: string
  emptyText?: string
  disabled?: boolean
}

export type ComboboxIconOption = ComboboxOption & {
  icon: ComponentType<{ size?: number }>
}

export type ComboboxWithIconsProps = Omit<ComboboxProps, 'options'> & {
  options: ComboboxIconOption[]
}

Exports