Combobox

export function ComboTagMatrix() {
  const [crew, setCrew] = useState('')
  const [toppings, setToppings] = useState<string[]>(['dulce-de-leche'])
  const [allergens, setAllergens] = useState<string[]>(['gluten', 'frutos secos'])

  return (
    <Stage label="Combobox, MultiSelect y TagInput · ninguno tiene error" tall wide>
      <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
        <Combobox
          label="Tripulación de guardia"
          options={CREW_OPTIONS}
          value={crew}
          onChange={setCrew}
          onCreate={(name) => setCrew(name)}
          placeholder="Buscar o agregar..."
        />
        <Combobox
          label="Proveedor de catering"
          options={CREW_OPTIONS}
          value=""
          onChange={() => {}}
          error="No hay proveedores habilitados para esta fecha"
        />
        <MultiSelect
          label="Toppings incluidos"
          options={TOPPING_OPTIONS}
          value={toppings}
          onChange={setToppings}
          showSelectAll
          summaryAfter={3}
        />
        <div className="flex flex-col gap-1.5">
          <TagInput
            label="Alérgenos declarados"
            value={allergens}
            onChange={setAllergens}
            placeholder="Agregar alérgeno..."
          />
          <span className="text-xs text-content/50">
            TagInput no tiene error: una lista mal cargada no se puede marcar en rojo — KIT-023.
          </span>
        </div>
      </div>
    </Stage>
  )
}

De specimens/input.tsx · ComboTagMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.