@viax.io/uxm 4.36.0

package/dist/ui/calendar/calendar.css

@@ -0,0 +1,212 @@
+@charset "UTF-8";
+/* Calendar — moved from monolithic styles.css */
+/* Soft elevation so the calendar reads as a floating surface in its popover
+   usages (DateInput / TimeInput / EditableCell date). On by default via the
+   `shadow` prop; the shadow itself is tunable through the
+   `--uxm-calendar-shadow-*` vars. */
+.uxm-calendar--shadow {
+  box-shadow: 0 var(--uxm-calendar-shadow-offset-y, 6px) var(--uxm-calendar-shadow-blur, 20px) var(--uxm-calendar-shadow-color, rgba(0, 0, 0, 0.12));
+}
+
+.uxm-calendar {
+  background-color: var(--uxm-calendar-background-color, var(--color-surface));
+  border: 1px solid var(--uxm-calendar-border-color, var(--color-border));
+  border-radius: var(--uxm-calendar-border-radius, 12px);
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-direction: column;
+  font-family: inherit;
+  padding: var(--uxm-calendar-padding, 16px);
+  /* Month and Year views — drill-up navigation surfaces. Share the same state
+     color vars as day cells so designers tune once (today, selected, hover all
+     re-use day-cell color knobs). Dimensions are their own knobs because these
+     cells live in a 4-col grid and are typically wider/taller than day cells. */
+  /* Month and Year cells share a single Cell Size knob — square cells in a
+     4-col grid, same visual role across both views. Explicit width on the grid
+     template means the calendar root widens naturally in month/year view;
+     otherwise cells would share the day-view width (252px / 4 ≈ 60px each
+     minus gaps) and look squeezed. */
+}
+.uxm-calendar__header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 12px;
+}
+.uxm-calendar__title {
+  /* Title is a real <button> so it can drill up (day → month → year). Reset
+     button chrome; add hover affordance only when the title is interactive. */
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--uxm-calendar-title-color, var(--color-text));
+  cursor: pointer;
+  font-family: inherit;
+  font-size: calc(var(--uxm-calendar-title-size, 14px) * var(--type-scale, 1));
+  font-weight: 600;
+  padding: 4px 8px;
+  transition: background-color 0.12s;
+}
+.uxm-calendar__title:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--color-text) 8%, transparent);
+}
+.uxm-calendar__title:disabled {
+  cursor: default;
+}
+.uxm-calendar__nav {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--uxm-calendar-nav-color, var(--color-text-muted));
+  cursor: pointer;
+  display: inline-flex;
+  height: 28px;
+  justify-content: center;
+  transition: background-color 0.12s, color 0.12s;
+  width: 28px;
+}
+.uxm-calendar__nav:hover {
+  background-color: color-mix(in srgb, var(--color-text) 8%, transparent);
+  color: var(--color-text);
+}
+.uxm-calendar__weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  padding-bottom: 6px;
+}
+.uxm-calendar__weekday {
+  color: var(--uxm-calendar-weekday-color, var(--color-text-muted));
+  font-size: calc(var(--uxm-calendar-weekday-size, 11px) * var(--type-scale, 1));
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-align: center;
+  text-transform: uppercase;
+}
+.uxm-calendar__grid {
+  display: grid;
+  gap: 2px;
+  grid-template-columns: repeat(7, 1fr);
+}
+.uxm-calendar__grid-row {
+  /* ARIA-only wrapper: keeps each week's gridcells grouped under a
+     role="row" element while `display: contents` lets the day cells
+     participate directly in the parent's 7-column grid. Without it the
+     wrapper itself becomes one grid item and the month renders transposed
+     (weeks as columns). */
+  display: contents;
+}
+.uxm-calendar__day {
+  align-items: center;
+  background: transparent;
+  /* 1px transparent reserved so `today`'s outline doesn't shift layout. */
+  border: 1px solid transparent;
+  border-radius: var(--uxm-calendar-cell-radius, 8px);
+  box-sizing: border-box;
+  color: var(--uxm-calendar-default-color, var(--color-text));
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: calc(var(--uxm-calendar-cell-font-size, 13px) * var(--type-scale, 1));
+  font-weight: 500;
+  height: var(--uxm-calendar-cell-size, 36px);
+  justify-content: center;
+  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
+  width: var(--uxm-calendar-cell-size, 36px);
+}
+.uxm-calendar__day:hover:not(.uxm-calendar__day--disabled):not(.uxm-calendar__day--selected), .uxm-calendar__day--hover {
+  background-color: var(--uxm-calendar-hover-bg, color-mix(in srgb, var(--color-text) 6%, transparent));
+}
+.uxm-calendar__day--outside {
+  color: var(--uxm-calendar-outside-color, var(--color-text-subtle));
+}
+.uxm-calendar__day--in-range {
+  background-color: var(--uxm-calendar-in-range-bg, var(--color-accent-subtle));
+  color: var(--uxm-calendar-in-range-color, var(--color-accent-bold));
+}
+.uxm-calendar__day--range-start {
+  background-color: var(--uxm-calendar-range-start-bg, var(--color-accent-bold));
+  color: var(--uxm-calendar-range-start-color, var(--color-text-inverse));
+}
+.uxm-calendar__day--range-end {
+  background-color: var(--uxm-calendar-range-end-bg, var(--color-accent-bold));
+  color: var(--uxm-calendar-range-end-color, var(--color-text-inverse));
+}
+.uxm-calendar__day--today {
+  border-color: var(--uxm-calendar-today-border-color, var(--color-accent-bold));
+  color: var(--uxm-calendar-today-color, var(--color-accent-bold));
+  font-weight: 600;
+}
+.uxm-calendar__day--selected {
+  background-color: var(--uxm-calendar-selected-bg, var(--color-accent-bold));
+  color: var(--uxm-calendar-selected-color, var(--color-text-inverse));
+}
+.uxm-calendar__day--disabled {
+  color: var(--uxm-calendar-disabled-color, var(--color-text-subtle));
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.uxm-calendar__months, .uxm-calendar__years {
+  display: grid;
+  gap: 4px;
+  grid-template-columns: repeat(4, var(--uxm-calendar-month-cell-size, 64px));
+}
+.uxm-calendar__month, .uxm-calendar__year {
+  align-items: center;
+  background: transparent;
+  /* Reserved 1px transparent border keeps the today-outline state non-shifting. */
+  border: 1px solid transparent;
+  border-radius: var(--uxm-calendar-cell-radius, 8px);
+  box-sizing: border-box;
+  color: var(--uxm-calendar-default-color, var(--color-text));
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: calc(var(--uxm-calendar-month-cell-font-size, 13px) * var(--type-scale, 1));
+  font-weight: 500;
+  height: var(--uxm-calendar-month-cell-size, 64px);
+  justify-content: center;
+  transition: background-color 0.12s, color 0.12s, border-color 0.12s;
+  width: var(--uxm-calendar-month-cell-size, 64px);
+}
+.uxm-calendar__month:hover:not(:disabled), .uxm-calendar__year:hover:not(:disabled), .uxm-calendar__month--hover, .uxm-calendar__year--hover {
+  background-color: var(--uxm-calendar-hover-bg, color-mix(in srgb, var(--color-text) 6%, transparent));
+}
+.uxm-calendar__month--today, .uxm-calendar__year--today {
+  border-color: var(--uxm-calendar-today-border-color, var(--color-accent-bold));
+  color: var(--uxm-calendar-today-color, var(--color-accent-bold));
+  font-weight: 600;
+}
+.uxm-calendar__month--selected, .uxm-calendar__year--selected {
+  background-color: var(--uxm-calendar-selected-bg, var(--color-accent-bold));
+  color: var(--uxm-calendar-selected-color, var(--color-text-inverse));
+}
+.uxm-calendar {
+  /* "Today" footer — the button jumps the view back to the current month. */
+}
+.uxm-calendar__footer {
+  display: flex;
+  justify-content: center;
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--uxm-calendar-border-color, var(--color-border));
+}
+.uxm-calendar__today-button {
+  padding: 4px 12px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--uxm-calendar-today-button-color, var(--color-accent));
+  font: inherit;
+  font-size: calc(var(--uxm-calendar-today-button-size, 13px) * var(--type-scale, 1));
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.12s, color 0.12s;
+}
+.uxm-calendar__today-button:hover:not(:disabled) {
+  background-color: var(--uxm-calendar-today-button-hover-bg, color-mix(in srgb, var(--color-accent) 12%, transparent));
+}
+.uxm-calendar__today-button:disabled {
+  color: var(--color-text-subtle);
+  cursor: default;
+}

package/dist/ui/calendar/calendar.d.ts

@@ -0,0 +1,34 @@
+import { type WeekStart } from '../../lib/calendar-grid.js';
+import type { HTMLAttributes } from 'react';
+export interface CalendarValue {
+    start: Date | null;
+    end: Date | null;
+}
+export interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Currently-displayed month. Controlled. If omitted, atom owns it (initialized to the selected value's month, else today's). */
+    month?: Date;
+    /** Selection value. Controlled when passed. `{ start, end: null }` for a single date; `{ start, end }` for a range. */
+    value?: CalendarValue;
+    /** Override for "today". Defaults to real current date. */
+    today?: Date;
+    /** Predicate for disabled days. Disabled cells ignore clicks. */
+    isDisabled?: (date: Date) => boolean;
+    /** 0 = Sunday (US), 1 = Monday. */
+    weekStartsOn?: WeekStart;
+    /** Locale for month label and weekday names. */
+    locale?: string;
+    /** Fires after every click. `end` is null after the first click of a new range, set after the second. */
+    onChange?: (value: CalendarValue) => void;
+    /** Month navigation callback (prev/next buttons, outside-month-cell click, or drilling via month/year views). */
+    onMonthChange?: (next: Date) => void;
+    /** Drop a soft elevation shadow (the floating-surface look). Default true — pass `false` for a flat, inline / embedded calendar. */
+    shadow?: boolean;
+    /** Accessible name for the previous-month button. Default `"Previous"`. */
+    previousMonthLabel?: string;
+    /** Accessible name for the next-month button. Default `"Next"`. */
+    nextMonthLabel?: string;
+    /** Accessible name for the month/year drill-up button. Default `"Drill up"`. */
+    drillUpLabel?: string;
+}
+export declare function Calendar({ month, value, today, isDisabled, weekStartsOn, locale, onChange, onMonthChange, shadow, previousMonthLabel, nextMonthLabel, drillUpLabel, className, ...rest }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=calendar.d.ts.map

package/dist/ui/calendar/calendar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../../src/ui/calendar/calendar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAG3E,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,OAAO,CAAC;AAE3D,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAC;CAClB;AAID,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACrF,iIAAiI;IACjI,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,uHAAuH;IACvH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,iEAAiE;IACjE,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;IACrC,mCAAmC;IACnC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gDAAgD;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC1C,iHAAiH;IACjH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACrC,oIAAoI;IACpI,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2EAA2E;IAC3E,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mEAAmE;IACnE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gFAAgF;IAChF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAqFD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,YAAgB,EAChB,MAAgB,EAChB,QAAQ,EACR,aAAa,EACb,MAAa,EACb,kBAA+B,EAC/B,cAAuB,EACvB,YAAyB,EACzB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,2CAsYf"}

package/dist/ui/calendar/calendar.js

@@ -0,0 +1,392 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { computeMonthGrid } from "../../lib/calendar-grid.js";
+import { Icon } from "../icon/index.js";
+const MS_PER_DAY = 864e5;
+const YEARS_PER_BLOCK = 12;
+function startOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+function sameDay(a, b) {
+  if (!a || !b) return false;
+  return startOfDay(a).getTime() === startOfDay(b).getTime();
+}
+function isStrictlyBetween(date, start, end) {
+  if (!start || !end) return false;
+  const t = startOfDay(date).getTime();
+  const lo = Math.min(startOfDay(start).getTime(), startOfDay(end).getTime());
+  const hi = Math.max(startOfDay(start).getTime(), startOfDay(end).getTime());
+  return t > lo && t < hi;
+}
+function getWeekdayLabels(locale, weekStartsOn) {
+  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  const anchor = new Date(2024, 0, 7);
+  const labels = [];
+  for (let i = 0; i < 7; i++) {
+    labels.push(fmt.format(new Date(anchor.getTime() + i * MS_PER_DAY)));
+  }
+  return weekStartsOn === 1 ? [...labels.slice(1), labels[0]] : labels;
+}
+function yearBlockStart(year) {
+  return Math.floor(year / YEARS_PER_BLOCK) * YEARS_PER_BLOCK;
+}
+function monthOverlapsSelection(year, monthIdx, value) {
+  if (!value.start) return false;
+  const monthFirstMs = new Date(year, monthIdx, 1).getTime();
+  const monthLastMs = new Date(year, monthIdx + 1, 0).getTime();
+  const sMs = startOfDay(value.start).getTime();
+  const eMs = value.end ? startOfDay(value.end).getTime() : sMs;
+  const lo = Math.min(sMs, eMs);
+  const hi = Math.max(sMs, eMs);
+  return monthFirstMs <= hi && monthLastMs >= lo;
+}
+function yearOverlapsSelection(year, value) {
+  if (!value.start) return false;
+  const sY = value.start.getFullYear();
+  const eY = value.end ? value.end.getFullYear() : sY;
+  const lo = Math.min(sY, eY);
+  const hi = Math.max(sY, eY);
+  return year >= lo && year <= hi;
+}
+const EMPTY_VALUE = { start: null, end: null };
+function defaultDayFocusIndex(cells, start, today, isCellDisabled) {
+  const startIndex = start ? cells.findIndex((c) => sameDay(c.date, start)) : -1;
+  if (startIndex >= 0 && !isCellDisabled(cells[startIndex].date)) return startIndex;
+  const todayIndex = cells.findIndex((c) => sameDay(c.date, today));
+  if (todayIndex >= 0 && !isCellDisabled(cells[todayIndex].date)) return todayIndex;
+  const firstEnabled = cells.findIndex((c) => !isCellDisabled(c.date));
+  return firstEnabled >= 0 ? firstEnabled : 0;
+}
+function Calendar({
+  month,
+  value,
+  today,
+  isDisabled,
+  weekStartsOn = 0,
+  locale = "en-US",
+  onChange,
+  onMonthChange,
+  shadow = true,
+  previousMonthLabel = "Previous",
+  nextMonthLabel = "Next",
+  drillUpLabel = "Drill up",
+  className,
+  ...rest
+}) {
+  const realToday = useMemo(() => today ?? /* @__PURE__ */ new Date(), [today]);
+  const [internalMonth, setInternalMonth] = useState(() => {
+    const seed = value?.start ?? value?.end ?? realToday;
+    return new Date(seed.getFullYear(), seed.getMonth(), 1);
+  });
+  const currentMonth = month ?? internalMonth;
+  const [view, setView] = useState("day");
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(EMPTY_VALUE);
+  const currentValue = isControlled ? value : internalValue;
+  const currentStart = currentValue.start;
+  const currentEnd = currentValue.end;
+  const [hoveredDate, setHoveredDate] = useState(null);
+  const inFlight = !!currentStart && !currentEnd;
+  const previewEnd = inFlight && hoveredDate ? hoveredDate : currentEnd;
+  const isRangeView = !!currentStart && !!previewEnd && !sameDay(currentStart, previewEnd);
+  const dayCells = useMemo(
+    () => computeMonthGrid(currentMonth, weekStartsOn),
+    [currentMonth, weekStartsOn]
+  );
+  const isCellDisabled = useCallback((date) => isDisabled?.(date) ?? false, [isDisabled]);
+  const dayRefs = useRef([]);
+  const [focusedDayIndex, setFocusedDayIndex] = useState(
+    () => defaultDayFocusIndex(dayCells, currentStart, realToday, isCellDisabled)
+  );
+  const weekdays = useMemo(
+    () => getWeekdayLabels(locale, weekStartsOn),
+    [locale, weekStartsOn]
+  );
+  const titleLabel = useMemo(() => {
+    if (view === "day") {
+      return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(currentMonth);
+    }
+    if (view === "month") {
+      return String(currentMonth.getFullYear());
+    }
+    const start = yearBlockStart(currentMonth.getFullYear());
+    return `${start}\u2013${start + YEARS_PER_BLOCK - 1}`;
+  }, [view, currentMonth, locale]);
+  const monthShortNames = useMemo(() => {
+    const fmt = new Intl.DateTimeFormat(locale, { month: "short" });
+    return Array.from({ length: 12 }, (_, i) => fmt.format(new Date(2024, i, 1)));
+  }, [locale]);
+  const setMonth = useCallback(
+    (next) => {
+      if (month === void 0) setInternalMonth(next);
+      onMonthChange?.(next);
+      const nextCells = computeMonthGrid(next, weekStartsOn);
+      setFocusedDayIndex(defaultDayFocusIndex(nextCells, currentStart, realToday, isCellDisabled));
+    },
+    [month, onMonthChange, weekStartsOn, currentStart, realToday, isCellDisabled]
+  );
+  const handleNav = useCallback(
+    (delta) => {
+      const m = currentMonth.getMonth();
+      const y = currentMonth.getFullYear();
+      let next;
+      if (view === "day") {
+        next = new Date(y, m + delta, 1);
+      } else if (view === "month") {
+        next = new Date(y + delta, m, 1);
+      } else {
+        next = new Date(y + delta * YEARS_PER_BLOCK, m, 1);
+      }
+      setMonth(next);
+    },
+    [view, currentMonth, setMonth]
+  );
+  const handleTitleClick = useCallback(() => {
+    if (view === "day") setView("month");
+    else if (view === "month") setView("year");
+  }, [view]);
+  const commit = useCallback(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  const handleDayClick = useCallback(
+    (date, outside, disabled) => {
+      if (disabled) return;
+      if (outside) {
+        setMonth(new Date(date.getFullYear(), date.getMonth(), 1));
+      }
+      const startingNew = !currentStart || !!currentEnd;
+      if (startingNew) {
+        commit({ start: date, end: null });
+      } else {
+        const s = currentStart;
+        let finalStart = s;
+        let finalEnd = date;
+        if (startOfDay(date).getTime() < startOfDay(s).getTime()) {
+          finalStart = date;
+          finalEnd = s;
+        }
+        commit({ start: finalStart, end: finalEnd });
+      }
+      setHoveredDate(null);
+    },
+    [currentStart, currentEnd, commit, setMonth]
+  );
+  const handleMonthClick = useCallback(
+    (monthIdx) => {
+      setMonth(new Date(currentMonth.getFullYear(), monthIdx, 1));
+      setView("day");
+    },
+    [currentMonth, setMonth]
+  );
+  const handleYearClick = useCallback(
+    (year) => {
+      setMonth(new Date(year, currentMonth.getMonth(), 1));
+      setView("month");
+    },
+    [currentMonth, setMonth]
+  );
+  const handleMouseEnter = useCallback(
+    (date, disabled) => {
+      if (disabled) return;
+      if (inFlight) setHoveredDate(date);
+    },
+    [inFlight]
+  );
+  const handleMouseLeave = useCallback((date) => {
+    setHoveredDate((prev) => sameDay(prev, date) ? null : prev);
+  }, []);
+  const handleDayKeyDown = useCallback(
+    (e, i) => {
+      const rowStart = i - i % 7;
+      let step = 0;
+      let bound = null;
+      switch (e.key) {
+        case "ArrowLeft":
+          step = -1;
+          break;
+        case "ArrowRight":
+          step = 1;
+          break;
+        case "ArrowUp":
+          step = -7;
+          break;
+        case "ArrowDown":
+          step = 7;
+          break;
+        case "Home":
+          step = -1;
+          bound = rowStart;
+          break;
+        case "End":
+          step = 1;
+          bound = rowStart + 6;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      let next = bound ?? i + step;
+      while (next >= 0 && next < dayCells.length && isCellDisabled(dayCells[next].date)) {
+        next += step;
+      }
+      if (next < 0 || next >= dayCells.length) return;
+      setFocusedDayIndex(next);
+      dayRefs.current[next]?.focus();
+    },
+    [dayCells, isCellDisabled]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("uxm-calendar", `uxm-calendar--view-${view}`, shadow && "uxm-calendar--shadow", className), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "uxm-calendar__header", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "uxm-calendar__nav",
+          onClick: () => handleNav(-1),
+          "aria-label": previousMonthLabel,
+          children: /* @__PURE__ */ jsx(Icon, { glyph: "chevron-left", size: 16 })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "uxm-calendar__title",
+          onClick: handleTitleClick,
+          disabled: view === "year",
+          "aria-label": view === "year" ? void 0 : drillUpLabel,
+          children: titleLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "uxm-calendar__nav",
+          onClick: () => handleNav(1),
+          "aria-label": nextMonthLabel,
+          children: /* @__PURE__ */ jsx(Icon, { glyph: "chevron-right", size: 16 })
+        }
+      )
+    ] }),
+    view === "day" && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "uxm-calendar__weekdays", "aria-hidden": "true", children: weekdays.map((w) => /* @__PURE__ */ jsx("div", { className: "uxm-calendar__weekday", children: w }, w)) }),
+      /* @__PURE__ */ jsx("div", { className: "uxm-calendar__grid", role: "grid", children: Array.from({ length: dayCells.length / 7 }, (_, week) => (
+        // `display: contents` (see calendar.scss) keeps these cells as
+        // direct participants in the parent's CSS grid while giving
+        // each week its own `role="row"` — the ARIA grid pattern
+        // requires gridcells to be grouped into rows.
+        /* @__PURE__ */ jsx("div", { role: "row", className: "uxm-calendar__grid-row", children: dayCells.slice(week * 7, week * 7 + 7).map(({ date, outside }, col) => {
+          const i = week * 7 + col;
+          const isToday = sameDay(date, realToday);
+          const isStart = sameDay(date, currentStart);
+          const isEnd = !!previewEnd && sameDay(date, previewEnd);
+          const isSelected = !isRangeView && isStart;
+          const isRangeStart = isRangeView && isStart;
+          const isRangeEnd = isRangeView && isEnd;
+          const isInRange = isStrictlyBetween(date, currentStart, previewEnd);
+          const disabled = isDisabled?.(date) ?? false;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: (el) => {
+                dayRefs.current[i] = el;
+              },
+              type: "button",
+              role: "gridcell",
+              disabled,
+              tabIndex: i === focusedDayIndex ? 0 : -1,
+              onClick: () => {
+                handleDayClick(date, outside, disabled);
+                if (!disabled && !outside) setFocusedDayIndex(i);
+              },
+              onKeyDown: (e) => handleDayKeyDown(e, i),
+              onMouseEnter: () => handleMouseEnter(date, disabled),
+              onMouseLeave: () => handleMouseLeave(date),
+              className: cn(
+                "uxm-calendar__day",
+                outside && "uxm-calendar__day--outside",
+                isToday && "uxm-calendar__day--today",
+                isSelected && "uxm-calendar__day--selected",
+                isRangeStart && "uxm-calendar__day--range-start",
+                isRangeEnd && "uxm-calendar__day--range-end",
+                isInRange && "uxm-calendar__day--in-range",
+                disabled && "uxm-calendar__day--disabled"
+              ),
+              "aria-selected": isSelected || isRangeStart || isRangeEnd || void 0,
+              "aria-current": isToday ? "date" : void 0,
+              children: date.getDate()
+            },
+            i
+          );
+        }) }, week)
+      )) })
+    ] }),
+    view === "month" && /* @__PURE__ */ jsx("div", { className: "uxm-calendar__months", role: "grid", children: monthShortNames.map((name, i) => {
+      const year = currentMonth.getFullYear();
+      const isCurrent = realToday.getFullYear() === year && realToday.getMonth() === i;
+      const isSelected = monthOverlapsSelection(year, i, currentValue);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "gridcell",
+          onClick: () => handleMonthClick(i),
+          className: cn(
+            "uxm-calendar__month",
+            isCurrent && "uxm-calendar__month--today",
+            isSelected && "uxm-calendar__month--selected"
+          ),
+          "aria-selected": isSelected || void 0,
+          "aria-current": isCurrent ? "true" : void 0,
+          children: name
+        },
+        i
+      );
+    }) }),
+    view === "year" && /* @__PURE__ */ jsx("div", { className: "uxm-calendar__years", role: "grid", children: Array.from({ length: YEARS_PER_BLOCK }, (_, i) => {
+      const year = yearBlockStart(currentMonth.getFullYear()) + i;
+      const isCurrent = realToday.getFullYear() === year;
+      const isSelected = yearOverlapsSelection(year, currentValue);
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "gridcell",
+          onClick: () => handleYearClick(year),
+          className: cn(
+            "uxm-calendar__year",
+            isCurrent && "uxm-calendar__year--today",
+            isSelected && "uxm-calendar__year--selected"
+          ),
+          "aria-selected": isSelected || void 0,
+          "aria-current": isCurrent ? "true" : void 0,
+          children: year
+        },
+        year
+      );
+    }) }),
+    /* @__PURE__ */ jsx("div", { className: "uxm-calendar__footer", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "uxm-calendar__today-button",
+        disabled: isDisabled?.(realToday),
+        onClick: () => {
+          setView("day");
+          setMonth(new Date(realToday.getFullYear(), realToday.getMonth(), 1));
+        },
+        children: "Today"
+      }
+    ) })
+  ] });
+}
+export {
+  Calendar
+};
+//# sourceMappingURL=calendar.js.map