componente · @solu30/ui-kit/input

Calendar

Calendario mensual para elegir fechas, con rangos de color pintados sobre los días.

17 sitios de import en 6 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
cmp-packages
dietaly
easycharter
gestorsalon
luigi

El componente, montado

Cargando el espécimen…

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.

Cómo se usa

import { Calendar } from '@solu30/ui-kit/input'

Props

3 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
buttonVariant	opcional	`string`	@deprecated NO HACE NADA. Se descarta en el destructuring y nunca llega ni a `DayPicker` ni a `calendarVariants`. Existía para que el código copiado del Calendar de shadcn —que sí tiene `buttonVariant`— compilara. Las clases de los días se pisan con `classNames`, que es como estiliza `DayPicker`. Se elimina en el próximo major.
dateDecorations	opcional	`DateDecoration[]`	—
disableOutsideDecorations	opcional	`boolean`	—

Ejemplo del paquete

// Envuelve react-day-picker: `mode`, `selected` y `onSelect` son de ahí.
// `dateDecorations` es lo propio del kit: marcas por fecha sin tocar la selección.
<Calendar mode="single" selected={fecha} onSelect={setFecha} locale={es}
  dateDecorations={[{ date: new Date(), className: 'bg-ui-warning/20' }]} />

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.