RangeCalendar

1"use client";2
3/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. */4import { RangeCalendar } from "@lenso/ui";5
6export function Basic() {7  return (8    <RangeCalendar aria-label="Trip dates" firstDayOfWeek="mon">9      <RangeCalendar.Header>10        <RangeCalendar.Heading />11        <RangeCalendar.NavButton slot="previous" />12        <RangeCalendar.NavButton slot="next" />13      </RangeCalendar.Header>14      <RangeCalendar.Grid>15        <RangeCalendar.GridHeader>16          {(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}17        </RangeCalendar.GridHeader>18        <RangeCalendar.GridBody>19          {(date) => <RangeCalendar.Cell date={date} />}20        </RangeCalendar.GridBody>21      </RangeCalendar.Grid>22    </RangeCalendar>23  );24}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX. */3import { RangeCalendar } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { CalendarNote, layout } from "../calendar/demo-parts";6import { RangeHeader, RangeGrid } from "./demo-parts";7export function Disabled() {8  return (9    <div {...stylex.props(layout.stack)}>10      <RangeCalendar isDisabled aria-label="Trip dates">11        <RangeHeader />12        <RangeGrid />13      </RangeCalendar>14      <CalendarNote>Range calendar is disabled</CalendarNote>15    </div>16  );17}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. */3import { RangeCalendar } from "@lenso/ui";4import { RangeYearHeader, RangeGrid, RangeYearGrid } from "./demo-parts";5export function YearPicker() {6  return (7    <RangeCalendar aria-label="Trip dates">8      <RangeYearHeader />9      <RangeGrid />10      <RangeYearGrid />11    </RangeCalendar>12  );13}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. */3import { RangeCalendar } from "@lenso/ui";4import { parseDate } from "@internationalized/date";5import { RangeHeader, RangeGrid } from "./demo-parts";6export function DefaultValue() {7  return (8    <RangeCalendar9      aria-label="Trip dates"10      defaultValue={{ end: parseDate("2025-02-12"), start: parseDate("2025-02-03") }}11      firstDayOfWeek="mon"12    >13      <RangeHeader />14      <RangeGrid />15    </RangeCalendar>16  );17}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX and native Base UI Button. */3import { Button, ButtonGroup, RangeCalendar } from "@lenso/ui";4import {5  getLocalTimeZone,6  parseDate,7  startOfMonth,8  startOfWeek,9  today,10  type DateValue,11} from "@internationalized/date";12import { useState } from "react";13import { useLocale } from "react-aria-components/I18nProvider";14import * as stylex from "@stylexjs/stylex";15import { CalendarNote, layout } from "../calendar/demo-parts";16import { RangeHeader, RangeGrid } from "./demo-parts";17export function Controlled() {18  const [value, setValue] = useState<{ start: DateValue; end: DateValue } | null>(null);19  const [focusedDate, setFocusedDate] = useState<DateValue>(() => parseDate("2025-12-25"));20  const { locale } = useLocale();21  return (22    <div {...stylex.props(layout.stack)}>23      <ButtonGroup variant="tertiary">24        <Button onClick={() => setFocusedDate(today(getLocalTimeZone()))}>This week</Button>25        <Button26          onClick={() =>27            setFocusedDate(startOfWeek(today(getLocalTimeZone()).add({ weeks: 1 }), locale))28          }29        >30          Next week31        </Button>32        <Button33          onClick={() => setFocusedDate(startOfMonth(today(getLocalTimeZone()).add({ months: 1 })))}34        >35          Next month36        </Button>37      </ButtonGroup>38      <RangeCalendar39        aria-label="Trip dates"40        firstDayOfWeek="mon"41        focusedValue={focusedDate}42        value={value}43        onChange={setValue}44        onFocusChange={setFocusedDate}45      >46        <RangeHeader />47        <RangeGrid />48      </RangeCalendar>49      <CalendarNote>50        Selected range: {value ? `${value.start.toString()} -> ${value.end.toString()}` : "(none)"}51      </CalendarNote>52      <div {...stylex.props(layout.controls)}>53        <Button54          size="sm"55          variant="secondary"56          onClick={() => {57            const start = today(getLocalTimeZone());58            setValue({ end: start.add({ days: 6 }), start });59            setFocusedDate(start);60          }}61        >62          Set 1 week63        </Button>64        <Button65          size="sm"66          variant="secondary"67          onClick={() => {68            const start = parseDate("2025-12-20");69            setValue({ end: parseDate("2025-12-31"), start });70            setFocusedDate(start);71          }}72        >73          Set Holidays74        </Button>75        <Button size="sm" variant="tertiary" onClick={() => setValue(null)}>76          Clear77        </Button>78      </div>79    </div>80  );81}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX. */3import { RangeCalendar } from "@lenso/ui";4import { getLocalTimeZone, today } from "@internationalized/date";5import * as stylex from "@stylexjs/stylex";6import { CalendarNote, layout } from "../calendar/demo-parts";7import { RangeHeader, RangeGrid } from "./demo-parts";8export function MinMaxDates() {9  const now = today(getLocalTimeZone());10  const maxDate = now.add({ months: 3 });11  return (12    <div {...stylex.props(layout.stack)}>13      <RangeCalendar aria-label="Trip dates" maxValue={maxDate} minValue={now}>14        <RangeHeader />15        <RangeGrid />16      </RangeCalendar>17      <CalendarNote>Select dates between today and {maxDate.toString()}</CalendarNote>18    </div>19  );20}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX. */3import { RangeCalendar } from "@lenso/ui";4import { getLocalTimeZone, today } from "@internationalized/date";5import * as stylex from "@stylexjs/stylex";6import { CalendarNote, layout } from "../calendar/demo-parts";7import { RangeHeader, RangeGrid } from "./demo-parts";8export function UnavailableDates() {9  const now = today(getLocalTimeZone());10  const blockedRanges = [11    [now.add({ days: 2 }), now.add({ days: 5 })],12    [now.add({ days: 12 }), now.add({ days: 13 })],13  ] as const;14  return (15    <div {...stylex.props(layout.stack)}>16      <RangeCalendar17        aria-label="Trip dates"18        defaultValue={{ end: now.add({ days: 9 }), start: now.add({ days: 6 }) }}19        firstDayOfWeek="mon"20        isDateUnavailable={(date) =>21          blockedRanges.some(([start, end]) => date.compare(start) >= 0 && date.compare(end) <= 0)22        }23      >24        <RangeHeader />25        <RangeGrid />26      </RangeCalendar>27      <CalendarNote>Some days are unavailable</CalendarNote>28    </div>29  );30}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX. */3import { RangeCalendar } from "@lenso/ui";4import { getLocalTimeZone, today } from "@internationalized/date";5import * as stylex from "@stylexjs/stylex";6import { CalendarNote, layout } from "../calendar/demo-parts";7import { RangeHeader, RangeGrid } from "./demo-parts";8export function AnchorUnavailableDates() {9  return (10    <div {...stylex.props(layout.stack)}>11      <RangeCalendar12        aria-label="Trip dates"13        isDateUnavailable={(date, anchorDate) =>14          anchorDate != null && Math.abs(date.compare(anchorDate)) > 715        }16        minValue={today(getLocalTimeZone())}17      >18        <RangeHeader />19        <RangeGrid />20      </RangeCalendar>21      <CalendarNote>22        After selecting a start date, only dates within 7 days are available23      </CalendarNote>24    </div>25  );26}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX. */3import { RangeCalendar } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { CalendarNote, layout } from "../calendar/demo-parts";6import { RangeHeader, RangeGrid } from "./demo-parts";7export function WeeksInMonth() {8  return (9    <div {...stylex.props(layout.stack)}>10      <RangeCalendar aria-label="Trip dates" weeksInMonth={6}>11        <RangeHeader />12        <RangeGrid />13      </RangeCalendar>14      <CalendarNote>15        Always shows 6 weeks per month to avoid layout shift when navigating16      </CalendarNote>17    </div>18  );19}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX and native Base UI Select. */3import { RangeCalendar } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { DurationSelect, layout } from "../calendar/demo-parts";7import { RangeHeader, RangeGrid } from "./demo-parts";8export function WeekView() {9  const [weeks, setWeeks] = useState(1);10  return (11    <div {...stylex.props(layout.controlsStack)}>12      <DurationSelect unit="weeks" value={weeks} onChange={setWeeks} />13      <RangeCalendar key={weeks} aria-label="Trip dates" visibleDuration={{ weeks }}>14        <RangeHeader />15        <RangeGrid />16      </RangeCalendar>17    </div>18  );19}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX and native Base UI Select. */3import { RangeCalendar } from "@lenso/ui";4import { useState } from "react";5import * as stylex from "@stylexjs/stylex";6import { DurationSelect, layout } from "../calendar/demo-parts";7import { RangeHeader, RangeGrid } from "./demo-parts";8export function DayView() {9  const [days, setDays] = useState(5);10  return (11    <div {...stylex.props(layout.controlsStack)}>12      <DurationSelect unit="days" value={days} onChange={setDays} />13      <RangeCalendar key={days} aria-label="Trip dates" visibleDuration={{ days }}>14        <RangeHeader />15        <RangeGrid />16      </RangeCalendar>17    </div>18  );19}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX. */3import { RangeCalendar } from "@lenso/ui";4import { getLocalTimeZone, today } from "@internationalized/date";5import * as stylex from "@stylexjs/stylex";6import { CalendarNote, layout } from "../calendar/demo-parts";7import { RangeHeader, RangeGrid } from "./demo-parts";8export function AllowsNonContiguousRanges() {9  const now = today(getLocalTimeZone());10  const blockedRanges = [11    [now.add({ days: 2 }), now.add({ days: 5 })],12    [now.add({ days: 12 }), now.add({ days: 13 })],13  ] as const;14  return (15    <div {...stylex.props(layout.stack)}>16      <RangeCalendar17        allowsNonContiguousRanges18        aria-label="Trip dates"19        defaultValue={{ end: now.add({ days: 9 }), start: now.add({ days: 1 }) }}20        firstDayOfWeek="mon"21        isDateUnavailable={(date) =>22          blockedRanges.some(([start, end]) => date.compare(start) >= 0 && date.compare(end) <= 0)23        }24      >25        <RangeHeader />26        <RangeGrid />27      </RangeCalendar>28      <CalendarNote>Non-contiguous ranges are allowed across unavailable dates</CalendarNote>29    </div>30  );31}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX. */3import { RangeCalendar } from "@lenso/ui";4import { getLocalTimeZone, today } from "@internationalized/date";5import * as stylex from "@stylexjs/stylex";6import { CalendarNote, layout } from "../calendar/demo-parts";7import { RangeHeader, RangeGrid } from "./demo-parts";8export function ReadOnly() {9  const now = today(getLocalTimeZone());10  return (11    <div {...stylex.props(layout.stack)}>12      <RangeCalendar13        isReadOnly14        aria-label="Trip dates"15        defaultValue={{ start: now, end: now.add({ days: 4 }) }}16      >17        <RangeHeader />18        <RangeGrid />19      </RangeCalendar>20      <CalendarNote>Range calendar is read-only</CalendarNote>21    </div>22  );23}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX. */3import { RangeCalendar } from "@lenso/ui";4import { getLocalTimeZone, today, type DateValue } from "@internationalized/date";5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { CalendarNote, layout } from "../calendar/demo-parts";8import { RangeHeader, RangeGrid } from "./demo-parts";9const styles = stylex.create({ error: { fontSize: 14, color: "var(--danger)" } });10export function Invalid() {11  const now = today(getLocalTimeZone());12  const [value, setValue] = useState<{ start: DateValue; end: DateValue }>({13    end: now.add({ days: 14 }),14    start: now.add({ days: 6 }),15  });16  const isInvalid = value.end.compare(value.start) > 7;17  return (18    <div {...stylex.props(layout.stack)}>19      <RangeCalendar20        aria-label="Trip dates"21        firstDayOfWeek="mon"22        isInvalid={isInvalid}23        value={value}24        onChange={setValue}25      >26        <RangeHeader />27        <RangeGrid />28      </RangeCalendar>29      {isInvalid ? (30        <p {...stylex.props(styles.error)}>Maximum stay duration is 1 week</p>31      ) : (32        <CalendarNote>Select a stay of up to 7 days</CalendarNote>33      )}34    </div>35  );36}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX and native Base UI Button. */3import { Button, RangeCalendar } from "@lenso/ui";4import { parseDate, type DateValue } from "@internationalized/date";5import { useState } from "react";6import * as stylex from "@stylexjs/stylex";7import { CalendarNote, layout } from "../calendar/demo-parts";8import { RangeHeader, RangeGrid } from "./demo-parts";9export function FocusedValue() {10  const [focusedDate, setFocusedDate] = useState<DateValue>(() => parseDate("2025-06-15"));11  return (12    <div {...stylex.props(layout.stack)}>13      <RangeCalendar14        aria-label="Trip dates"15        firstDayOfWeek="mon"16        focusedValue={focusedDate}17        onFocusChange={setFocusedDate}18      >19        <RangeHeader />20        <RangeGrid />21      </RangeCalendar>22      <CalendarNote>Focused: {focusedDate.toString()}</CalendarNote>23      <div {...stylex.props(layout.controls)}>24        <Button25          size="sm"26          variant="secondary"27          onClick={() => setFocusedDate(parseDate("2025-01-01"))}28        >29          Go to Jan30        </Button>31        <Button32          size="sm"33          variant="secondary"34          onClick={() => setFocusedDate(parseDate("2025-06-15"))}35        >36          Go to Jun37        </Button>38        <Button39          size="sm"40          variant="secondary"41          onClick={() => setFocusedDate(parseDate("2025-12-25"))}42        >43          Go to Christmas44        </Button>45      </div>46    </div>47  );48}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. */3import { RangeCalendar } from "@lenso/ui";4import { getLocalTimeZone, isToday } from "@internationalized/date";5import { RangeHeader, RangeGrid } from "./demo-parts";6const datesWithEvents = [3, 7, 12, 15, 21, 28];7export function WithIndicators() {8  return (9    <RangeCalendar aria-label="Trip dates">10      <RangeHeader />11      <RangeGrid12        cell={(date) => (13          <RangeCalendar.Cell date={date}>14            {({ formattedDate }) => (15              <>16                {formattedDate}17                {(isToday(date, getLocalTimeZone()) || datesWithEvents.includes(date.day)) && (18                  <RangeCalendar.CellIndicator />19                )}20              </>21            )}22          </RangeCalendar.Cell>23        )}24      />25    </RangeCalendar>26  );27}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX and native Base UI Button. */3import { Button, RangeCalendar } from "@lenso/ui";4import { getLocalTimeZone, isWeekend, today, type DateValue } from "@internationalized/date";5import { useState } from "react";6import { useLocale } from "react-aria-components/I18nProvider";7import * as stylex from "@stylexjs/stylex";8import { layout } from "../calendar/demo-parts";9import { RangeHeader, RangeGrid } from "./demo-parts";10const blockedDates = [5, 6, 12, 13, 14, 20];11export function BookingCalendar() {12  const [selectedRange, setSelectedRange] = useState<{ start: DateValue; end: DateValue } | null>(13    null,14  );15  const { locale } = useLocale();16  return (17    <div {...stylex.props(layout.stack)}>18      <RangeCalendar19        aria-label="Booking range"20        isDateUnavailable={(date) => isWeekend(date, locale) || blockedDates.includes(date.day)}21        minValue={today(getLocalTimeZone())}22        value={selectedRange}23        onChange={setSelectedRange}24      >25        <RangeHeader />26        <RangeGrid27          cell={(date) => (28            <RangeCalendar.Cell date={date}>29              {({ formattedDate, isUnavailable }) => (30                <>31                  {formattedDate}32                  {!isUnavailable &&33                    !isWeekend(date, locale) &&34                    blockedDates.includes(date.day) && <RangeCalendar.CellIndicator />}35                </>36              )}37            </RangeCalendar.Cell>38          )}39        />40      </RangeCalendar>41      <div {...stylex.props(layout.bookingDetails)}>42        <div {...stylex.props(layout.legend)}>43          <span {...stylex.props(layout.legendItem)}>44            <span {...stylex.props(layout.mutedDot)} /> Blocked dates45          </span>46          <span {...stylex.props(layout.legendItem)}>47            <span {...stylex.props(layout.defaultDot)} /> Weekend/Unavailable48          </span>49        </div>50        {selectedRange ? (51          <Button size="sm" variant="primary">52            Book {selectedRange.start.toString()} {"->"} {selectedRange.end.toString()}53          </Button>54        ) : null}55      </div>56    </div>57  );58}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX. */3import { RangeCalendar } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5const styles = stylex.create({6  root: { containerType: "normal", width: "100%", maxWidth: "none", overflowX: "auto" },7  months: { marginInline: "auto", display: "flex", width: "max-content", gap: 32 },8  month: { width: 256 },9  heading: { flex: "none" },10  spacer: { width: 24, height: 24 },11});12export function MultipleMonths() {13  return (14    <RangeCalendar aria-label="Trip dates" xstyle={styles.root} visibleDuration={{ months: 2 }}>15      <div {...stylex.props(styles.months)}>16        <div {...stylex.props(styles.month)}>17          <RangeCalendar.Header>18            <RangeCalendar.NavButton slot="previous" />19            <RangeCalendar.Heading xstyle={styles.heading} />20            <div {...stylex.props(styles.spacer)} />21          </RangeCalendar.Header>22          <RangeCalendar.Grid>23            <RangeCalendar.GridHeader>24              {(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}25            </RangeCalendar.GridHeader>26            <RangeCalendar.GridBody>27              {(date) => <RangeCalendar.Cell date={date} />}28            </RangeCalendar.GridBody>29          </RangeCalendar.Grid>30        </div>31        <div {...stylex.props(styles.month)}>32          <RangeCalendar.Header>33            <div {...stylex.props(styles.spacer)} />34            <RangeCalendar.Heading xstyle={styles.heading} offset={{ months: 1 }} />35            <RangeCalendar.NavButton slot="next" />36          </RangeCalendar.Header>37          <RangeCalendar.Grid offset={{ months: 1 }}>38            <RangeCalendar.GridHeader>39              {(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}40            </RangeCalendar.GridHeader>41            <RangeCalendar.GridBody>42              {(date) => <RangeCalendar.Cell date={date} />}43            </RangeCalendar.GridBody>44          </RangeCalendar.Grid>45        </div>46      </div>47    </RangeCalendar>48  );49}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. */3import { RangeCalendar } from "@lenso/ui";4import { I18nProvider } from "react-aria-components/I18nProvider";5import { RangeYearHeader, RangeGrid, RangeYearGrid } from "./demo-parts";6export function InternationalCalendar() {7  return (8    <I18nProvider locale="hi-IN-u-ca-indian">9      <RangeCalendar aria-label="Trip dates">10        <RangeYearHeader />11        <RangeGrid />12        <RangeYearGrid />13      </RangeCalendar>14    </I18nProvider>15  );16}

1"use client";2/** HeroUI v3.2.6 derived work. Copyright NextUI Inc. Apache-2.0. Modified for StyleX. */3import { RangeCalendar } from "@lenso/ui";4import { parseDate } from "@internationalized/date";5import * as stylex from "@stylexjs/stylex";6
7const styles = stylex.create({8  root: {9    width: 252,10    borderRadius: "var(--radius-xl)",11    borderWidth: 1,12    borderStyle: "solid",13    borderColor: "color-mix(in oklab,var(--border) 80%,transparent)",14    backgroundColor: "var(--surface)",15    padding: 12,16    boxShadow:17      "0 1px 2px 0 rgb(0 0 0 / .05),0 0 0 1px color-mix(in oklab,var(--success) 10%,transparent)",18  },19  heading: { color: "var(--foreground)" },20  nav: {21    borderRadius: "var(--radius-md)",22    color: "var(--success)",23    backgroundColor: {24      default: "transparent",25      ":hover": "var(--success-soft)",26      ":is([data-hovered])": "var(--success-soft)",27    },28  },29  cell: {30    borderRadius: { default: "var(--radius-md)", ":is([data-selected])": 0 },31    borderTopLeftRadius: {32      default: "var(--radius-md)",33      ":is([data-selected])": 0,34      ":is([data-selection-start])": "var(--radius-md)",35    },36    borderBottomLeftRadius: {37      default: "var(--radius-md)",38      ":is([data-selected])": 0,39      ":is([data-selection-start])": "var(--radius-md)",40    },41    borderTopRightRadius: {42      default: "var(--radius-md)",43      ":is([data-selected])": 0,44      ":is([data-selection-end])": "var(--radius-md)",45    },46    borderBottomRightRadius: {47      default: "var(--radius-md)",48      ":is([data-selected])": 0,49      ":is([data-selection-end])": "var(--radius-md)",50    },51    backgroundColor: {52      default: null,53      ":is([data-selected])": "var(--success-soft)",54      ":is([data-selected][data-outside-month])":55        "color-mix(in oklab,var(--default) 20%,transparent)",56    },57  },58  button: {59    borderRadius: "var(--radius-md)",60    backgroundColor: {61      default: null,62      ":is([data-hovered]:not([data-selected]) > *)": "var(--default)",63      ":is([data-today] > *)": "var(--success-soft)",64      ":is([data-today][data-hovered]:not([data-selected]) > *)": "var(--success-soft-hover)",65      ":is([data-selection-start] > *,[data-selection-end] > *)": "var(--success)",66      ":is([data-selection-start][data-pressed] > *,[data-selection-end][data-pressed] > *)":67        "var(--success-hover)",68    },69    color: {70      default: null,71      ":is([data-today] > *)": "var(--success-soft-foreground)",72      ":is([data-selection-start] > *,[data-selection-end] > *)": "var(--success-foreground)",73    },74  },75});76export function CustomStyles() {77  return (78    <RangeCalendar79      aria-label="Hotel stay"80      xstyle={styles.root}81      defaultValue={{ end: parseDate("2025-02-14"), start: parseDate("2025-02-08") }}82      firstDayOfWeek="mon"83    >84      <RangeCalendar.Header>85        <RangeCalendar.Heading xstyle={styles.heading} />86        <RangeCalendar.NavButton xstyle={styles.nav} slot="previous" />87        <RangeCalendar.NavButton xstyle={styles.nav} slot="next" />88      </RangeCalendar.Header>89      <RangeCalendar.Grid>90        <RangeCalendar.GridHeader>91          {(day) => <RangeCalendar.HeaderCell>{day}</RangeCalendar.HeaderCell>}92        </RangeCalendar.GridHeader>93        <RangeCalendar.GridBody>94          {(date) => (95            <RangeCalendar.Cell date={date} xstyle={styles.cell} buttonXstyle={styles.button} />96          )}97        </RangeCalendar.GridBody>98      </RangeCalendar.Grid>99    </RangeCalendar>100  );101}