Calendar

Selector de fecha completo, con soporte para rangos y navegación por mes/año.

---

Import

import { Calendar } from '@imansi/ui';

---

Uso básico

import { useState } from 'react';

export function Ejemplo() {
  const [fecha, setFecha] = useState(new Date());

  return (
    <Calendar
      mode="single"
      selected={fecha}
      onSelect={setFecha}
      className="rounded-md border"
    />
  );
}

---

Rango de fechas

const [rango, setRango] = useState({ from: null, to: null });

<Calendar
  mode="range"
  selected={rango}
  onSelect={setRango}
  numberOfMonths={2}
  className="rounded-md border"
/>

---

Con fechas deshabilitadas

<Calendar
  mode="single"
  selected={fecha}
  onSelect={setFecha}
  disabled={(date) => date < new Date()}
  className="rounded-md border"
/>

---

Múltiples meses

<Calendar mode="single" numberOfMonths={2} />

---

Props

Prop	Tipo	Default	Descripción
mode	'single' | 'multiple' | 'range'	'single'	Modo de selección
selected	Date | Date[] | {from, to}	—	Fecha(s) seleccionada(s)
onSelect	(date) => void	—	Callback al seleccionar
disabled	boolean | ((date) => boolean)	—	Fechas deshabilitadas
numberOfMonths	number	1	Cantidad de meses visibles
locale	object	—	Locale de date-fns (ej: es)
className	string	—	Clases adicionales

---

Accesibilidad

• Navegable con Tab y Flechas
• Enter / Space selecciona
• Page Up/Down cambia de mes
• Home / End van al inicio/fin de la semana
• role="grid" con aria-selected en cada día