SelectTrigger

export function SelectCompositionMatrix() {
  const [flavor, setFlavor] = useState('dulce-de-leche')

  return (
    <Stage label="SelectRoot · composición, agrupada, sin prop de error" tall wide>
      <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
        <SelectRoot value={flavor} onValueChange={setFlavor}>
          <SelectTrigger>
            <SelectValue placeholder="Elegí un sabor" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Clásicos</SelectLabel>
              <SelectItem value="dulce-de-leche">Dulce de leche</SelectItem>
              <SelectItem value="chocolate">Chocolate amargo</SelectItem>
            </SelectGroup>
            <SelectSeparator />
            <SelectGroup>
              <SelectLabel>De estación</SelectLabel>
              <SelectItem value="frutilla">Frutilla</SelectItem>
              <SelectItem value="mango" disabled>
                Mango (sin stock)
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </SelectRoot>
        <SelectRoot value="" onValueChange={() => {}} disabled>
          <SelectTrigger>
            <SelectValue placeholder="Franquicia cerrada temporalmente" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="a">—</SelectItem>
          </SelectContent>
        </SelectRoot>
      </div>
    </Stage>
  )
}

De specimens/input.tsx · SelectCompositionMatrix: 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.