Range Calendar

<RangeCalendar.Root>
  <RangeCalendar.DayGrid>
    <RangeCalendar.DayGridHeader>
      {({ days }) =>
        days.map((day) => <RangeCalendar.DayGridHeaderCell value={day} />)
      }
    </RangeCalendar.DayGridHeader>
    <RangeCalendar.DayGridBody>
      {({ weeks }) =>
        weeks.map((week) => (
          <RangeCalendar.DayGridRow value={week}>
            {({ days }) => days.map((day) => <RangeCalendar.DayCell value={day} />)}
          </RangeCalendar.DayGridRow>
        ))
      }
    </RangeCalendar.DayGridBody>
  </RangeCalendar.DayGrid>
</RangeCalendar.Root>

// Grid layout
<RangeCalendar.Root>
  <RangeCalendar.MonthGrid>
    {({ months }) => months.map((month) => <RangeCalendar.MonthCell value={month} />)}
  </RangeCalendar.MonthGrid>
</RangeCalendar.Root>

// List layout
<RangeCalendar.Root>
  <RangeCalendar.MonthList>
    {({ months }) => months.map((month) => <RangeCalendar.MonthCell value={month} />)}
  </RangeCalendar.MonthList>
</RangeCalendar.Root>

// Grid layout
<RangeCalendar.Root>
  <RangeCalendar.YearGrid>
    {({ years }) => years.map((year) => <RangeCalendar.YearCell value={year} />)}
  </RangeCalendar.YearGrid>
</RangeCalendar.Root>

// List layout
<RangeCalendar.Root>
  <RangeCalendar.YearList>
    {({ years }) => years.map((year) => <RangeCalendar.YearCell value={year} />)}
  </RangeCalendar.YearList>
</RangeCalendar.Root>

<RangeCalendar.Root>
  <RangeCalendar.SetVisibleYear />
  <RangeCalendar.SetVisibleMonth />
</RangeCalendar.Root>

<RangeCalendar.Root disableHoverPreview>{children}</RangeCalendar.Root>