Combobox in five frameworks

import { Combobox } from '@hamur/react/combobox'

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Lemon', 'Mango', 'Orange', 'Peach', 'Pear']

export default function ComboboxExample() {
  return (
    <Combobox.Root items={fruits}>
      <label className="field">
        <span className="select-label">Choose a fruit</span>
        <Combobox.InputGroup className="combobox">
          <Combobox.Input className="combobox-input" placeholder="e.g. Apple" />
          <Combobox.Clear
            className="combobox-button"
            aria-label="Clear selection"
          >
            ×
          </Combobox.Clear>
          <Combobox.Trigger
            className="combobox-button"
            aria-label="Open popup"
          >
            <Combobox.Icon className="select-icon" />
          </Combobox.Trigger>
        </Combobox.InputGroup>
      </label>
      <Combobox.Portal>
        <Combobox.Positioner className="select-positioner" sideOffset={6}>
          <Combobox.Popup className="select-popup combobox-popup">
            <Combobox.Empty className="combobox-empty">
              No fruits found.
            </Combobox.Empty>
            <Combobox.List className="select-list">
              <Combobox.Collection>
                {(fruit: string) => (
                  <Combobox.Item
                    key={fruit}
                    value={fruit}
                    className="select-item"
                  >
                    <Combobox.ItemIndicator
                      className="select-item-indicator"
                    >
                      ✓
                    </Combobox.ItemIndicator>
                    <span className="select-item-text">{fruit}</span>
                  </Combobox.Item>
                )}
              </Combobox.Collection>
            </Combobox.List>
          </Combobox.Popup>
        </Combobox.Positioner>
      </Combobox.Portal>
    </Combobox.Root>
  )
}