Switch

export function SwitchMatrix() {
  const [notify, setNotify] = useState(true)
  const [autoConfirm, setAutoConfirm] = useState(false)
  const [openNow, setOpenNow] = useState(true)

  return (
    <Stage label="Switch · dos tamaños nomás, sin lg" tall wide>
      <div className="flex w-full flex-col gap-4">
        <div className="flex flex-wrap items-center gap-6">
          <Switch checked={notify} onCheckedChange={setNotify} size="sm" />
          <Switch checked={notify} onCheckedChange={setNotify} size="md" />
          <Switch checked={false} onCheckedChange={() => {}} disabled />
          <Switch checked indeterminate onCheckedChange={() => {}} />
        </div>
        <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2">
          <SwitchWithLabel
            label="Confirmación automática"
            description="Reservas de hasta 20 invitados se aprueban solas"
            checked={autoConfirm}
            onChange={setAutoConfirm}
            color="success"
          />
          <SwitchWithLabel
            label="Salón abierto hoy"
            checked={openNow}
            onChange={setOpenNow}
            color="danger"
            disabled
          />
          <SwitchWithLabel
            label="Sincronizando con el calendario del catamarán"
            checked
            onChange={() => {}}
            loading
          />
        </div>
      </div>
    </Stage>
  )
}

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