Calendar

package calendar import (	"strconv"	"strings"	"time" 	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/utils") type Day int var (	Sunday    = Day(0)	Monday    = Day(1)	Tuesday   = Day(2)	Wednesday = Day(3)	Thursday  = Day(4)	Friday    = Day(5)	Saturday  = Day(6)) type Mode string const (	ModeSingle Mode = "single"	ModeRange  Mode = "range") type CaptionLayout string const (	// CaptionLayoutLabel shows "July 2026" as a static caption (default).	CaptionLayoutLabel CaptionLayout = "label"	// CaptionLayoutDropdown shows month and year dropdowns.	CaptionLayoutDropdown CaptionLayout = "dropdown") type Props struct {	ID         string	Class      string	Attributes templ.Attributes	// Mode: 'single' (default) or 'range'.	Mode Mode	// CaptionLayout: 'label' (default) or 'dropdown'.	CaptionLayout CaptionLayout	// Selected preselects a date (single mode) or the range start.	Selected time.Time	// EndValue preselects the range end (range mode).	EndValue time.Time	// Month controls the initially displayed month. Defaults to Selected or now.	Month time.Time	// Name renders a hidden input that submits the selected date (ISO).	Name string	// EndName is the hidden input name for the range end. Defaults to Name + "-end".	EndName   string	// Locale is a BCP 47 tag like "de-DE", the browser's Intl handles	// every locale natively. Defaults to "en-US".	Locale string	// WeekStartsOn: 0-6, Sunday-Saturday. Defaults to Sunday, like shadcn.	WeekStartsOn Day	// HideOutsideDays hides the leading/trailing days of adjacent months.	HideOutsideDays bool	// FixedWeeks always renders six weeks, keeping the height stable.	FixedWeeks bool	// ShowWeekNumber renders an ISO week number column.	ShowWeekNumber bool	// MinDate/MaxDate bound the selectable dates.	MinDate time.Time	MaxDate time.Time	// Disabled are not selectable.	Disabled []time.Time	// BookedDates are not selectable and render struck through.	BookedDates []time.Time	// NumberOfMonths renders several months side by side. Defaults to 1.	NumberOfMonths int} func isoList(dates []time.Time) string {	parts := make([]string, len(dates))	for i, d := range dates {		parts[i] = d.Format("2006-01-02")	}	return strings.Join(parts, ",")} templ Calendar(props ...Props) {	{{		var p Props		if len(props) > 0 {			p = props[0]		}		if p.ID == "" {			p.ID = utils.RandomID()		}		if p.Mode == "" {			p.Mode = ModeSingle		}		if p.CaptionLayout == "" {			p.CaptionLayout = CaptionLayoutLabel		}		if p.Locale == "" {			p.Locale = "en-US"		}		if p.Mode == ModeRange && p.Name != "" && p.EndName == "" {			p.EndName = p.Name + "-end"		}		view := time.Now()		if !p.Selected.IsZero() {			view = p.Selected		}		if !p.Month.IsZero() {			view = p.Month		}		selectedISO := ""		if !p.Selected.IsZero() {			selectedISO = p.Selected.Format("2006-01-02")		}		endISO := ""		if !p.EndValue.IsZero() {			endISO = p.EndValue.Format("2006-01-02")		}		monthNames := []string{"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"}		months := p.NumberOfMonths		if months < 1 {			months = 1		}	}}	<div		id={ p.ID }		data-slot="calendar"		data-tui-calendar		data-tui-calendar-mode={ string(p.Mode) }		data-tui-calendar-locale={ p.Locale }		data-tui-calendar-week-starts-on={ strconv.Itoa(int(p.WeekStartsOn)) }		data-tui-calendar-month={ view.Format("2006-01-02") }		if selectedISO != "" {			data-tui-calendar-selected={ selectedISO }		}		if endISO != "" {			data-tui-calendar-end={ endISO }		}		if p.HideOutsideDays {			data-tui-calendar-outside-days="false"		}		if p.FixedWeeks {			data-tui-calendar-fixed-weeks		}		if p.ShowWeekNumber {			data-tui-calendar-week-number		}		if !p.MinDate.IsZero() {			data-tui-calendar-min={ p.MinDate.Format("2006-01-02") }		}		if !p.MaxDate.IsZero() {			data-tui-calendar-max={ p.MaxDate.Format("2006-01-02") }		}		if len(p.Disabled) > 0 {			data-tui-calendar-disabled={ isoList(p.Disabled) }		}		if len(p.BookedDates) > 0 {			data-tui-calendar-booked-dates={ isoList(p.BookedDates) }		}		class={			utils.CN(				// 1:1 base/ui/calendar.tsx className + classNames.root. The rtl				// chevron flip lives on the icons as cn-rtl-flip (the tsx's extra				// rtl:**:[.rdp-button_next>svg] selectors target rdp-* classes our				// DOM does not have).				"cn-calendar group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent w-fit",				p.Class,			),		}		{ p.Attributes... }	>		if p.Name != "" {			<input type="hidden" name={ p.Name } value={ selectedISO } data-tui-calendar-hidden-input aria-hidden="true" tabindex="-1"/>			if p.Mode == ModeRange {				<input type="hidden" name={ p.EndName } value={ endISO } data-tui-calendar-hidden-end-input aria-hidden="true" tabindex="-1"/>			}		}		<div class="relative flex flex-col gap-4 md:flex-row">			<div class="absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1">					@button.Button(button.Props{						Variant: button.VariantGhost,						Class:   "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",						Attributes: templ.Attributes{							"data-tui-calendar-prev": "",							"aria-label":             "Go to the previous month",						},					}) {						@icon.ChevronLeft(icon.Props{Class: "cn-rtl-flip size-4"})					}					@button.Button(button.Props{						Variant: button.VariantGhost,						Class:   "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",						Attributes: templ.Attributes{							"data-tui-calendar-next": "",							"aria-label":             "Go to the next month",						},					}) {						@icon.ChevronRight(icon.Props{Class: "cn-rtl-flip size-4"})					}			</div>			for m := 0; m < months; m++ {				<div class="flex w-full flex-col gap-4" data-tui-calendar-month-block={ strconv.Itoa(m) }>					<div class="flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)">						if p.CaptionLayout == CaptionLayoutDropdown && months == 1 {						<div class="flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium">							<div class="cn-calendar-dropdown-root relative rounded-(--cell-radius)">								<select									data-tui-calendar-month-select									class="absolute inset-0 bg-popover opacity-0"									aria-label="Choose the month"								>									for i := 0; i < 12; i++ {										<option value={ strconv.Itoa(i) } selected?={ i == int(view.Month())-1 }>{ monthNames[i] }</option>									}								</select>								<span class="font-medium select-none cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground" aria-hidden="true">									<span data-tui-calendar-month-label>{ monthNames[int(view.Month())-1] }</span>									@icon.ChevronDown(icon.Props{Class: "size-4"})								</span>							</div>							<div class="cn-calendar-dropdown-root relative rounded-(--cell-radius)">								<select									data-tui-calendar-year-select									class="absolute inset-0 bg-popover opacity-0"									aria-label="Choose the year"								>									for year := time.Now().Year() - 100; year <= time.Now().Year(); year++ {										<option value={ strconv.Itoa(year) } selected?={ year == view.Year() }>{ strconv.Itoa(year) }</option>									}								</select>								<span class="font-medium select-none cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground" aria-hidden="true">									<span data-tui-calendar-year-label>{ strconv.Itoa(view.Year()) }</span>									@icon.ChevronDown(icon.Props{Class: "size-4"})								</span>							</div>						</div>					} else {						<span data-tui-calendar-caption class="font-medium select-none cn-calendar-caption text-sm">							{ view.AddDate(0, m, 0).Format("January 2006") }						</span>					}				</div>				<table class="w-full border-collapse">					<thead>						<tr data-tui-calendar-weekdays class="flex"></tr>					</thead>					<tbody data-tui-calendar-weeks></tbody>				</table>			</div>			}		</div>		<template data-tui-calendar-day-template>			@button.Button(button.Props{				Variant: button.VariantGhost,				Size:    button.SizeIcon,				Class:   "cn-calendar-day-button relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",			})		</template>	</div>}

(function () {  // Verbatim class strings from base/ui/calendar.tsx (react-day-picker  // classNames slots). The look lives in the vendored style-*.css via the  // cn-calendar-* classes; none of the grid slots below has a cn- class in  // any style, they are pure structural utilities. The day button template  // (cn-calendar-day-button) lives in the templ file; the grid below is  // (re)built here.  const CLS = {    week: "mt-2 flex w-full",    weekday:      "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",    weekNumberHeader: "w-(--cell-size) select-none",    weekNumber: "text-[0.8rem] text-muted-foreground select-none",    weekNumberInner: "flex size-(--cell-size) items-center justify-center text-center",    day: "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",    dayFirstRound: "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",    dayFirstRoundWeekNumbers: "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)",    rangeStart:      "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",    rangeMiddle: "rounded-none",    rangeEnd:      "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",    today: "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",    outside: "text-muted-foreground aria-selected:text-muted-foreground",    disabled: "text-muted-foreground opacity-50",    // shadcn-templ extension, no shadcn slot or cn- class for booked days exists.    booked: "[&>button]:line-through opacity-100",  };   function containers() {    return document.querySelectorAll("[data-tui-calendar]");  }   function parseISO(s) {    if (!s) return null;    const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s.trim());    return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null;  }   function toISO(d) {    if (!d) return "";    const p = (n) => String(n).padStart(2, "0");    return d.getFullYear() + "-" + p(d.getMonth() + 1) + "-" + p(d.getDate());  }   function sameDay(a, b) {    return !!(a && b) && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();  }   function isoWeek(date) {    const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));    const day = d.getUTCDay() || 7;    d.setUTCDate(d.getUTCDate() + 4 - day);    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));    return Math.ceil(((d - yearStart) / 86400000 + 1) / 7);  }   function state(root) {    if (!root._tui) {      const selected = parseISO(root.getAttribute("data-tui-calendar-selected"));      const end = parseISO(root.getAttribute("data-tui-calendar-end"));      const view = parseISO(root.getAttribute("data-tui-calendar-month")) || selected || new Date();      root._tui = {        mode: root.getAttribute("data-tui-calendar-mode") || "single",        locale: root.getAttribute("data-tui-calendar-locale") || "en-US",        startOfWeek: parseInt(root.getAttribute("data-tui-calendar-week-starts-on"), 10) || 0,        outsideDays: root.getAttribute("data-tui-calendar-outside-days") !== "false",        fixedWeeks: root.hasAttribute("data-tui-calendar-fixed-weeks"),        weekNumbers: root.hasAttribute("data-tui-calendar-week-number"),        min: parseISO(root.getAttribute("data-tui-calendar-min")),        max: parseISO(root.getAttribute("data-tui-calendar-max")),        disabledDates: (root.getAttribute("data-tui-calendar-disabled") || "")          .split(",").map(parseISO).filter(Boolean),        bookedDates: (root.getAttribute("data-tui-calendar-booked-dates") || "")          .split(",").map(parseISO).filter(Boolean),        month: new Date(view.getFullYear(), view.getMonth(), 1),        selected: selected,        end: end,      };    }    return root._tui;  }   function isDisabled(s, date) {    if (s.min && date < s.min && !sameDay(date, s.min)) return true;    if (s.max && date > s.max && !sameDay(date, s.max)) return true;    return s.disabledDates.some((d) => sameDay(d, date)) || s.bookedDates.some((d) => sameDay(d, date));  }   function render(root) {    const s = state(root);    root.querySelectorAll("[data-tui-calendar-month-block]").forEach((block) => {      const offset = parseInt(block.getAttribute("data-tui-calendar-month-block"), 10) || 0;      const month = new Date(s.month.getFullYear(), s.month.getMonth() + offset, 1);      renderCaption(block, s, month);      renderWeekdays(block, s);      renderWeeks(root, block, s, month);    });    updateNav(root, s);    root.dispatchEvent(new CustomEvent("calendar-rendered", { bubbles: true }));  }   function renderCaption(block, s, month) {    const label = block.querySelector("[data-tui-calendar-caption]");    if (label) {      label.textContent = month.toLocaleDateString(s.locale, { month: "long", year: "numeric" });    }    const monthSelect = block.querySelector("[data-tui-calendar-month-select]");    if (monthSelect) {      monthSelect.value = String(month.getMonth());      const monthLabel = block.querySelector("[data-tui-calendar-month-label]");      if (monthLabel) {        monthLabel.textContent = new Date(2000, month.getMonth(), 1).toLocaleDateString(s.locale, { month: "short" });      }    }    const yearSelect = block.querySelector("[data-tui-calendar-year-select]");    if (yearSelect) {      yearSelect.value = String(month.getFullYear());      const yearLabel = block.querySelector("[data-tui-calendar-year-label]");      if (yearLabel) yearLabel.textContent = String(month.getFullYear());    }  }   function renderWeekdays(block, s) {    const row = block.querySelector("[data-tui-calendar-weekdays]");    if (!row) return;    row.innerHTML = "";    if (s.weekNumbers) {      const th = document.createElement("th");      th.className = CLS.weekNumberHeader;      row.appendChild(th);    }    for (let i = 0; i < 7; i++) {      const day = (s.startOfWeek + i) % 7;      const th = document.createElement("th");      th.className = CLS.weekday;      th.scope = "col";      // 2021-08-01 was a Sunday; the offset picks the right weekday name.      th.textContent = new Date(2021, 7, 1 + day)        .toLocaleDateString(s.locale, { weekday: "short" }).slice(0, 2);      row.appendChild(th);    }  }   function dayCellClasses(s, mods) {    let cls = CLS.day + " " + (s.weekNumbers ? CLS.dayFirstRoundWeekNumbers : CLS.dayFirstRound);    // A single-day range gets both classes, exactly like react-day-picker.    if (mods.rangeStart) cls += " " + CLS.rangeStart;    if (mods.rangeEnd) cls += " " + CLS.rangeEnd;    if (mods.rangeMiddle) cls += " " + CLS.rangeMiddle;    if (mods.today) cls += " " + CLS.today;    if (mods.outside) cls += " " + CLS.outside;    if (mods.disabled) cls += " " + CLS.disabled;    if (mods.booked) cls += " " + CLS.booked;    return cls;  }   function renderWeeks(root, block, s, month) {    const tbody = block.querySelector("[data-tui-calendar-weeks]");    const template = root.querySelector("[data-tui-calendar-day-template]");    if (!tbody || !template) return;    tbody.innerHTML = "";     const first = new Date(month.getFullYear(), month.getMonth(), 1);    const lead = (first.getDay() - s.startOfWeek + 7) % 7;    const start = new Date(first.getFullYear(), first.getMonth(), 1 - lead);    const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();    const rows = s.fixedWeeks ? 6 : Math.ceil((lead + daysInMonth) / 7);    const today = new Date();     for (let w = 0; w < rows; w++) {      const tr = document.createElement("tr");      tr.className = CLS.week;      if (s.weekNumbers) {        const td = document.createElement("td");        td.className = CLS.weekNumber;        const inner = document.createElement("div");        inner.className = CLS.weekNumberInner;        inner.textContent = String(isoWeek(new Date(start.getFullYear(), start.getMonth(), start.getDate() + w * 7))).padStart(2, "0");        td.appendChild(inner);        tr.appendChild(td);      }      for (let i = 0; i < 7; i++) {        const date = new Date(start.getFullYear(), start.getMonth(), start.getDate() + w * 7 + i);        const outside = date.getMonth() !== month.getMonth();        const mods = {          outside: outside,          today: sameDay(date, today),          disabled: isDisabled(s, date),          booked: s.bookedDates.some((d) => sameDay(d, date)),          selectedSingle: false,          rangeStart: false,          rangeMiddle: false,          rangeEnd: false,        };        if (s.mode === "range" && s.selected) {          const from = s.selected;          const to = s.end;          if (to && !sameDay(from, to)) {            mods.rangeStart = sameDay(date, from);            mods.rangeEnd = sameDay(date, to);            mods.rangeMiddle = date > from && date < to;          } else {            mods.rangeStart = sameDay(date, from);            mods.rangeEnd = sameDay(date, from);          }        } else if (s.selected) {          mods.selectedSingle = sameDay(date, s.selected);        }        const selected = mods.selectedSingle || mods.rangeStart || mods.rangeMiddle || mods.rangeEnd;         const td = document.createElement("td");        td.className = dayCellClasses(s, mods) + (outside && !s.outsideDays ? " invisible" : "");        td.setAttribute("data-selected", selected ? "true" : "false");         const btn = template.content.firstElementChild.cloneNode(true);        btn.textContent = String(date.getDate());        btn.setAttribute("data-tui-calendar-day", toISO(date));        btn.setAttribute("data-day", date.toLocaleDateString(s.locale));        btn.setAttribute("data-outside", outside ? "true" : "false");        btn.setAttribute("data-selected-single", mods.selectedSingle ? "true" : "false");        btn.setAttribute("data-range-start", mods.rangeStart ? "true" : "false");        btn.setAttribute("data-range-middle", mods.rangeMiddle ? "true" : "false");        btn.setAttribute("data-range-end", mods.rangeEnd ? "true" : "false");        if (selected) btn.setAttribute("aria-selected", "true");        if (mods.disabled || (outside && !s.outsideDays)) btn.disabled = true;        td.appendChild(btn);        tr.appendChild(td);      }      tbody.appendChild(tr);    }  }   function updateNav(root, s) {    const prev = root.querySelector("[data-tui-calendar-prev]");    const next = root.querySelector("[data-tui-calendar-next]");    if (prev && s.min) {      prev.disabled = s.month <= new Date(s.min.getFullYear(), s.min.getMonth(), 1);    }    if (next && s.max) {      next.disabled = new Date(s.month.getFullYear(), s.month.getMonth() + 1, 1) > s.max;    }  }   function sync(root, s) {    const hidden = root.querySelector("[data-tui-calendar-hidden-input]");    const hiddenEnd = root.querySelector("[data-tui-calendar-hidden-end-input]");    if (hiddenEnd) hiddenEnd.value = toISO(s.end);    if (hidden && hidden.value !== toISO(s.selected)) {      hidden.value = toISO(s.selected);      hidden.dispatchEvent(new Event("change", { bubbles: true }));    }    root.dispatchEvent(      new CustomEvent("calendar-change", {        bubbles: true,        detail: { value: s.selected, endValue: s.end, valueISO: toISO(s.selected), endValueISO: toISO(s.end) },      }),    );  }   // Range selection is react-day-picker's addToRange (min 0, not required):  // every click yields a complete range, a single day means from == to.  // Clicking that single day again clears, clicking the start collapses to  // it, clicking the end makes it the new start, clicks before/after extend,  // clicks inside move the end.  function selectDate(root, date) {    const s = state(root);    if (s.mode === "range") {      const from = s.selected;      const to = s.end || s.selected;      if (!from) {        s.selected = date;        s.end = date;      } else if (sameDay(from, date) && sameDay(to, date)) {        s.selected = null;        s.end = null;      } else if (sameDay(from, date)) {        s.end = date;      } else if (sameDay(to, date)) {        s.selected = date;        s.end = date;      } else if (date < from) {        s.selected = date;      } else {        s.end = date;      }    } else {      s.selected = sameDay(s.selected, date) ? null : date;    }    render(root);    sync(root, s);    // Re-rendering destroyed the clicked button; refocus its replacement so    // the focus ring stays on the day, exactly like react-day-picker.    const btn = root.querySelector('[data-tui-calendar-day="' + toISO(date) + '"]');    if (btn) btn.focus();  }   function setDate(root, date) {    const s = state(root);    s.selected = date;    s.end = s.mode === "range" ? date : null;    s.month = new Date(date.getFullYear(), date.getMonth(), 1);    render(root);    sync(root, s);  }   document.addEventListener("click", (e) => {    if (!(e.target instanceof Element)) return;    const root = e.target.closest("[data-tui-calendar]");    if (!root) return;    const s = state(root);     const day = e.target.closest("[data-tui-calendar-day]");    if (day && !day.disabled) {      selectDate(root, parseISO(day.getAttribute("data-tui-calendar-day")));      return;    }    if (e.target.closest("[data-tui-calendar-prev]")) {      s.month = new Date(s.month.getFullYear(), s.month.getMonth() - 1, 1);      render(root);      return;    }    if (e.target.closest("[data-tui-calendar-next]")) {      s.month = new Date(s.month.getFullYear(), s.month.getMonth() + 1, 1);      render(root);    }  });   document.addEventListener("change", (e) => {    if (!(e.target instanceof Element)) return;    const root = e.target.closest("[data-tui-calendar]");    if (!root) return;    const s = state(root);    if (e.target.hasAttribute("data-tui-calendar-month-select")) {      s.month = new Date(s.month.getFullYear(), parseInt(e.target.value, 10), 1);      render(root);    } else if (e.target.hasAttribute("data-tui-calendar-year-select")) {      s.month = new Date(parseInt(e.target.value, 10), s.month.getMonth(), 1);      render(root);    }  });   // Programmatic selection, e.g. from preset buttons: dispatch a  // "calendar-set" CustomEvent with detail.date (ISO) on/inside the calendar.  document.addEventListener("calendar-set", (e) => {    const root = e.target instanceof Element && e.target.closest("[data-tui-calendar]");    if (!root) return;    const date = parseISO(e.detail && e.detail.date);    if (date) setDate(root, date);  });   // Keyboard: arrows move day focus, Enter/Space activate natively.  document.addEventListener("keydown", (e) => {    if (!(e.target instanceof Element) || !e.target.hasAttribute("data-tui-calendar-day")) return;    const deltas = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };    const delta = deltas[e.key];    if (!delta) return;    e.preventDefault();    const root = e.target.closest("[data-tui-calendar]");    const s = state(root);    const current = parseISO(e.target.getAttribute("data-tui-calendar-day"));    const nextDate = new Date(current.getFullYear(), current.getMonth(), current.getDate() + delta);    if (nextDate.getMonth() !== s.month.getMonth() || nextDate.getFullYear() !== s.month.getFullYear()) {      s.month = new Date(nextDate.getFullYear(), nextDate.getMonth(), 1);      render(root);    }    const btn = root.querySelector('[data-tui-calendar-day="' + toISO(nextDate) + '"]');    if (btn) btn.focus();  });   // The focus ring lives on the cell (group/day) like react-day-picker.  document.addEventListener("focusin", (e) => {    if (e.target instanceof Element && e.target.hasAttribute("data-tui-calendar-day")) {      const td = e.target.closest("td");      if (td) td.setAttribute("data-focused", "true");    }  });  document.addEventListener("focusout", (e) => {    if (e.target instanceof Element && e.target.hasAttribute("data-tui-calendar-day")) {      const td = e.target.closest("td");      if (td) td.removeAttribute("data-focused");    }  });   function init() {    containers().forEach((root) => {      if (!root._tuiRendered) {        root._tuiRendered = true;        render(root);      }    });  }   let initQueued = false;  function queueInit() {    if (initQueued) return;    initQueued = true;    requestAnimationFrame(() => {      initQueued = false;      init();    });  }   if (document.readyState === "loading") {    document.addEventListener("DOMContentLoaded", init);  } else {    init();  }  new MutationObserver((mutations) => {    for (const m of mutations) {      if (m.addedNodes.length) {        queueInit();        break;      }    }  }).observe(document.documentElement, { childList: true, subtree: true });})();