mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-22 07:50:36 +01:00
feat(Calendar): allow year and month buttons styling (#3672)
This commit is contained in:
Hugo Richard
GitHub
@@ -28,6 +28,10 @@ describe('Calendar', () => {
|
||||
['with weekStartsOn', { props: { weekStartsOn: 1 } }],
|
||||
['with weekdayFormat', { props: { weekdayFormat: 'short' } }],
|
||||
['with numberOfMonths', { props: { numberOfMonths: 2 } }],
|
||||
['with nextYear', { props: { nextYear: { size: 'lg', color: 'primary' } } }],
|
||||
['with nextMonth', { props: { nextMonth: { size: 'lg', color: 'primary' } } }],
|
||||
['with prevYear', { props: { prevYear: { size: 'lg', color: 'primary' } } }],
|
||||
['with prevMonth', { props: { prevMonth: { size: 'lg', color: 'primary' } } }],
|
||||
['without fixedWeeks', { props: { fixedWeeks: false } }],
|
||||
['without monthControls', { props: { monthControls: false } }],
|
||||
['without yearControls', { props: { yearControls: false } }],
|
||||
|
||||
@@ -1958,6 +1958,362 @@ exports[`Calendar > renders with multiple correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Calendar > renders with nextMonth correctly 1`] = `
|
||||
"<div role="application" aria-label="Event Date, January 2025" dir="ltr" nextmonth="[object Object]">
|
||||
<div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-(--ui-primary) hover:bg-(--ui-primary)/10 focus:outline-none focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
|
||||
<thead aria-hidden="true">
|
||||
<tr class="mb-1 grid w-full grid-cols-7">
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">M</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">W</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">F</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="grid">
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">9</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">10</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">11</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">12</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">13</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">14</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">15</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">16</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">17</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">18</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">19</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">20</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">21</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">22</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">23</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">24</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">25</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">26</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">27</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">28</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
|
||||
<div role="heading" aria-level="2">Event Date, January 2025</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Calendar > renders with nextYear correctly 1`] = `
|
||||
"<div role="application" aria-label="Event Date, January 2025" dir="ltr" nextyear="[object Object]">
|
||||
<div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-(--ui-primary) hover:bg-(--ui-primary)/10 focus:outline-none focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
|
||||
<thead aria-hidden="true">
|
||||
<tr class="mb-1 grid w-full grid-cols-7">
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">M</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">W</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">F</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="grid">
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">9</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">10</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">11</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">12</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">13</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">14</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">15</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">16</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">17</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">18</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">19</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">20</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">21</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">22</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">23</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">24</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">25</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">26</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">27</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">28</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
|
||||
<div role="heading" aria-level="2">Event Date, January 2025</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Calendar > renders with numberOfMonths correctly 1`] = `
|
||||
"<div role="application" aria-label="Event Date, January - February 2025" dir="ltr">
|
||||
<div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
@@ -2289,6 +2645,362 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Calendar > renders with prevMonth correctly 1`] = `
|
||||
"<div role="application" aria-label="Event Date, January 2025" dir="ltr" prevmonth="[object Object]">
|
||||
<div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-(--ui-primary) hover:bg-(--ui-primary)/10 focus:outline-none focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
|
||||
<thead aria-hidden="true">
|
||||
<tr class="mb-1 grid w-full grid-cols-7">
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">M</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">W</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">F</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="grid">
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">9</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">10</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">11</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">12</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">13</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">14</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">15</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">16</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">17</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">18</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">19</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">20</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">21</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">22</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">23</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">24</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">25</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">26</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">27</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">28</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
|
||||
<div role="heading" aria-level="2">Event Date, January 2025</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Calendar > renders with prevYear correctly 1`] = `
|
||||
"<div role="application" aria-label="Event Date, January 2025" dir="ltr" prevyear="[object Object]">
|
||||
<div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-(--ui-primary) hover:bg-(--ui-primary)/10 focus:outline-none focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
|
||||
<thead aria-hidden="true">
|
||||
<tr class="mb-1 grid w-full grid-cols-7">
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">M</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">W</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">F</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="grid">
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">9</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">10</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">11</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">12</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">13</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">14</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">15</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">16</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">17</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">18</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">19</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">20</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">21</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">22</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">23</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">24</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">25</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">26</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">27</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">28</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
|
||||
<div role="heading" aria-level="2">Event Date, January 2025</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Calendar > renders with range correctly 1`] = `
|
||||
"<div role="application" aria-label="Event Date, January 2025" dir="ltr">
|
||||
<div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
|
||||
|
||||
@@ -1958,6 +1958,362 @@ exports[`Calendar > renders with multiple correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Calendar > renders with nextMonth correctly 1`] = `
|
||||
"<div role="application" aria-label="Event Date, January 2025" dir="ltr" nextmonth="[object Object]">
|
||||
<div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-(--ui-primary) hover:bg-(--ui-primary)/10 focus:outline-none focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
|
||||
<thead aria-hidden="true">
|
||||
<tr class="mb-1 grid w-full grid-cols-7">
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">M</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">W</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">F</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="grid">
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">9</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">10</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">11</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">12</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">13</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">14</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">15</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">16</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">17</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">18</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">19</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">20</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">21</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">22</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">23</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">24</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">25</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">26</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">27</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">28</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
|
||||
<div role="heading" aria-level="2">Event Date, January 2025</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Calendar > renders with nextYear correctly 1`] = `
|
||||
"<div role="application" aria-label="Event Date, January 2025" dir="ltr" nextyear="[object Object]">
|
||||
<div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-(--ui-primary) hover:bg-(--ui-primary)/10 focus:outline-none focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
|
||||
<thead aria-hidden="true">
|
||||
<tr class="mb-1 grid w-full grid-cols-7">
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">M</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">W</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">F</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="grid">
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">9</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">10</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">11</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">12</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">13</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">14</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">15</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">16</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">17</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">18</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">19</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">20</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">21</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">22</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">23</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">24</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">25</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">26</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">27</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">28</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
|
||||
<div role="heading" aria-level="2">Event Date, January 2025</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Calendar > renders with numberOfMonths correctly 1`] = `
|
||||
"<div role="application" aria-label="Event Date, January - February 2025" dir="ltr">
|
||||
<div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
|
||||
@@ -2289,6 +2645,362 @@ exports[`Calendar > renders with numberOfMonths correctly 1`] = `
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Calendar > renders with prevMonth correctly 1`] = `
|
||||
"<div role="application" aria-label="Event Date, January 2025" dir="ltr" prevmonth="[object Object]">
|
||||
<div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-(--ui-primary) hover:bg-(--ui-primary)/10 focus:outline-none focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
|
||||
<thead aria-hidden="true">
|
||||
<tr class="mb-1 grid w-full grid-cols-7">
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">M</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">W</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">F</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="grid">
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">9</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">10</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">11</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">12</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">13</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">14</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">15</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">16</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">17</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">18</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">19</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">20</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">21</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">22</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">23</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">24</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">25</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">26</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">27</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">28</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
|
||||
<div role="heading" aria-level="2">Event Date, January 2025</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Calendar > renders with prevYear correctly 1`] = `
|
||||
"<div role="application" aria-label="Event Date, January 2025" dir="ltr" prevyear="[object Object]">
|
||||
<div class="flex items-center justify-between"><button type="button" aria-label="Previous year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-(--ui-primary) hover:bg-(--ui-primary)/10 focus:outline-none focus-visible:bg-(--ui-primary)/10 disabled:bg-transparent aria-disabled:bg-transparent dark:disabled:bg-transparent dark:aria-disabled:bg-transparent p-2"><span class="iconify i-lucide:chevrons-left shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Previous month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-left shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
<div class="text-center font-medium truncate mx-auto text-sm">January 2025</div><button type="button" aria-label="Next month" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevron-right shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button><button type="button" aria-label="Next year" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text) hover:bg-(--ui-bg-elevated) focus:outline-none focus-visible:bg-(--ui-bg-elevated) hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5"><span class="iconify i-lucide:chevrons-right shrink-0 size-5" aria-hidden="true"></span>
|
||||
<!--v-if-->
|
||||
<!--v-if-->
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0">
|
||||
<table tabindex="-1" role="grid" class="w-full border-collapse select-none space-y-1 focus:outline-none">
|
||||
<thead aria-hidden="true">
|
||||
<tr class="mb-1 grid w-full grid-cols-7">
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">M</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">W</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">T</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">F</th>
|
||||
<th class="rounded-[calc(var(--ui-radius)*1.5)] text-(--ui-primary) text-xs">S</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="grid">
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-29" month="2025-01-01" role="button" aria-label="Sunday, December 29, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-29" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-30" month="2025-01-01" role="button" aria-label="Monday, December 30, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-30" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2024-12-31" month="2025-01-01" role="button" aria-label="Tuesday, December 31, 2024" data-reka-calendar-cell-trigger="" data-value="2024-12-31" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-01" month="2025-01-01" role="button" aria-label="Wednesday, January 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-01" data-today="" data-focused="" tabindex="0" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-02" month="2025-01-01" role="button" aria-label="Thursday, January 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-02" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-03" month="2025-01-01" role="button" aria-label="Friday, January 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-03" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-04" month="2025-01-01" role="button" aria-label="Saturday, January 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-04" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-05" month="2025-01-01" role="button" aria-label="Sunday, January 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-05" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-06" month="2025-01-01" role="button" aria-label="Monday, January 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-06" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-07" month="2025-01-01" role="button" aria-label="Tuesday, January 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-07" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-08" month="2025-01-01" role="button" aria-label="Wednesday, January 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-08" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-09" month="2025-01-01" role="button" aria-label="Thursday, January 9, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-09" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">9</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-10" month="2025-01-01" role="button" aria-label="Friday, January 10, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-10" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">10</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-11" month="2025-01-01" role="button" aria-label="Saturday, January 11, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-11" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">11</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-12" month="2025-01-01" role="button" aria-label="Sunday, January 12, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-12" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">12</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-13" month="2025-01-01" role="button" aria-label="Monday, January 13, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-13" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">13</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-14" month="2025-01-01" role="button" aria-label="Tuesday, January 14, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-14" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">14</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-15" month="2025-01-01" role="button" aria-label="Wednesday, January 15, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-15" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">15</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-16" month="2025-01-01" role="button" aria-label="Thursday, January 16, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-16" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">16</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-17" month="2025-01-01" role="button" aria-label="Friday, January 17, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-17" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">17</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-18" month="2025-01-01" role="button" aria-label="Saturday, January 18, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-18" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">18</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-19" month="2025-01-01" role="button" aria-label="Sunday, January 19, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-19" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">19</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-20" month="2025-01-01" role="button" aria-label="Monday, January 20, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-20" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">20</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-21" month="2025-01-01" role="button" aria-label="Tuesday, January 21, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-21" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">21</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-22" month="2025-01-01" role="button" aria-label="Wednesday, January 22, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-22" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">22</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-23" month="2025-01-01" role="button" aria-label="Thursday, January 23, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-23" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">23</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-24" month="2025-01-01" role="button" aria-label="Friday, January 24, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-24" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">24</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-25" month="2025-01-01" role="button" aria-label="Saturday, January 25, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-25" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">25</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-26" month="2025-01-01" role="button" aria-label="Sunday, January 26, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-26" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">26</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-27" month="2025-01-01" role="button" aria-label="Monday, January 27, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-27" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">27</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-28" month="2025-01-01" role="button" aria-label="Tuesday, January 28, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-28" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">28</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-29" month="2025-01-01" role="button" aria-label="Wednesday, January 29, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-29" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">29</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-30" month="2025-01-01" role="button" aria-label="Thursday, January 30, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-30" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">30</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-01-31" month="2025-01-01" role="button" aria-label="Friday, January 31, 2025" data-reka-calendar-cell-trigger="" data-value="2025-01-31" tabindex="-1" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">31</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-01" month="2025-01-01" role="button" aria-label="Saturday, February 1, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-01" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">1</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="grid grid-cols-7">
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-02" month="2025-01-01" role="button" aria-label="Sunday, February 2, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-02" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">2</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-03" month="2025-01-01" role="button" aria-label="Monday, February 3, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-03" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">3</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-04" month="2025-01-01" role="button" aria-label="Tuesday, February 4, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-04" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">4</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-05" month="2025-01-01" role="button" aria-label="Wednesday, February 5, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-05" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">5</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-06" month="2025-01-01" role="button" aria-label="Thursday, February 6, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-06" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">6</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-07" month="2025-01-01" role="button" aria-label="Friday, February 7, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-07" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">7</div>
|
||||
</td>
|
||||
<td role="gridcell" aria-disabled="false" class="relative text-center text-sm">
|
||||
<div day="2025-02-08" month="2025-01-01" role="button" aria-label="Saturday, February 8, 2025" data-reka-calendar-cell-trigger="" data-value="2025-02-08" data-outside-view="" data-outside-visible-view="" class="m-0.5 relative flex items-center justify-center rounded-full whitespace-nowrap focus-visible:ring-2 focus:outline-none data-disabled:text-(--ui-text-muted) data-unavailable:line-through data-unavailable:text-(--ui-text-muted) data-unavailable:pointer-events-none data-[selected]:text-(--ui-bg) data-today:font-semibold data-[outside-view]:text-(--ui-text-muted) transition focus-visible:ring-(--ui-primary) data-[selected]:bg-(--ui-primary) data-today:not-data-[selected]:text-(--ui-primary) data-[highlighted]:bg-(--ui-primary)/20 hover:not-data-[selected]:bg-(--ui-primary)/20 size-8">8</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
|
||||
<div role="heading" aria-level="2">Event Date, January 2025</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Calendar > renders with range correctly 1`] = `
|
||||
"<div role="application" aria-label="Event Date, January 2025" dir="ltr">
|
||||
<div style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;">
|
||||
|
||||
Reference in New Issue
Block a user