TimePicker

export function DateTimeMatrix() {
  const [pickupDate, setPickupDate] = useState<Date | undefined>(new Date(2026, 7, 22))
  const [range, setRange] = useState<DateRangeValue>({
    from: new Date(2026, 7, 20),
    to: new Date(2026, 7, 22),
  })
  const [boardingTime, setBoardingTime] = useState('09:30')

  return (
    <Stage label="Calendar, DateRangePicker y TimePicker" tall wide>
      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-3">
        <Calendar
          mode="single"
          selected={pickupDate}
          onSelect={setPickupDate}
          disabled={{ before: new Date(2026, 7, 19) }}
        />
        <div className="flex flex-col gap-3">
          <div className="flex flex-col gap-1.5">
            <Label>Rango de reserva del salón</Label>
            <DateRangePicker
              value={range}
              onChange={setRange}
              presets={[
                { label: 'Este fin de semana', from: new Date(2026, 7, 22), to: new Date(2026, 7, 23) },
              ]}
            />
            <span className="text-xs text-content/50">
              Sin disabled ni error: no bloquea fechas tomadas ni marca un rango inválido —
              KIT-023.
            </span>
          </div>
          <div className="flex flex-col gap-1.5">
            <Label>Hora de embarque</Label>
            <TimePicker value={boardingTime} onChange={setBoardingTime} minuteStep={15} />
          </div>
          <div className="flex flex-col gap-1.5">
            <Label>Hora de cierre de cocina</Label>
            <TimePicker value="23:00" onChange={() => {}} disabled />
          </div>
        </div>
      </div>
    </Stage>
  )
}

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