@viasat/beam-react 2.74.0 → 2.75.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 2.75.0 (2026-09-24)
+
+### 🚀 Features
+
+- **Calendar:** Month navigation header ([#1436](https://git.viasat.com/vega/Beam/pull/1436))
+
+### ❤️ Thank You
+
+- Roman-Ionita, Alin
+
 ## 2.74.0 (2026-09-24)
 
 ### 🚀 Features

package/assets/calendar.css

@@ -1 +1 @@
-.bm-calendar{inline-size:-moz-fit-content;inline-size:fit-content}.bm-calendar__visually-hidden{clip:rect(0,0,0,0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.bm-calendar__grid{border-collapse:collapse}.bm-calendar__day{box-sizing:border-box;inline-size:var(--bm-sem-size-height-md);block-size:var(--bm-sem-size-height-sm);font:var(--bm-sem-typo-label-xs);color:var(--bm-sem-color-text-secondary);text-align:center}.bm-calendar__date{padding:0}.bm-calendar__week+.bm-calendar__week>.bm-calendar__date{padding-block-start:var(--bm-sem-space-25)}.bm-calendar__date-button{box-sizing:border-box;inline-size:var(--bm-sem-size-height-md);block-size:var(--bm-sem-size-height-md);border-radius:var(--bm-sem-radius-round);font:var(--bm-sem-typo-body-sm);color:var(--bm-sem-color-text-primary);cursor:default;background-color:#0000;border:none;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.bm-calendar__date[data-outside-month=true] .bm-calendar__date-button{color:var(--bm-sem-color-text-secondary)}
+.bm-calendar{inline-size:-moz-fit-content;inline-size:fit-content}.bm-calendar__visually-hidden{clip:rect(0,0,0,0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.bm-calendar__header{block-size:var(--bm-sem-size-height-md);justify-content:space-between;align-items:center;display:flex}[dir=rtl] .bm-calendar__header .bm-icon{transform:rotate(180deg)}.bm-calendar__header-label{font:var(--bm-sem-typo-label-md);color:var(--bm-sem-color-text-primary)}.bm-calendar__grid{border-collapse:collapse}.bm-calendar__day{box-sizing:border-box;inline-size:var(--bm-sem-size-height-md);block-size:var(--bm-sem-size-height-sm);font:var(--bm-sem-typo-label-xs);color:var(--bm-sem-color-text-secondary);text-align:center}.bm-calendar__dates[data-nav-direction]{animation:.25s ease-out bm-calendar-month-enter}@media (prefers-reduced-motion:reduce){.bm-calendar__dates[data-nav-direction]{animation:none}}.bm-calendar__dates[data-nav-direction=next]{--bm-calendar-month-enter-offset:var(--bm-sem-space-50)}.bm-calendar__dates[data-nav-direction=previous],[dir=rtl] .bm-calendar__dates[data-nav-direction=next]{--bm-calendar-month-enter-offset:calc(0px - var(--bm-sem-space-50))}[dir=rtl] .bm-calendar__dates[data-nav-direction=previous]{--bm-calendar-month-enter-offset:var(--bm-sem-space-50)}.bm-calendar__date{padding:0}.bm-calendar__week+.bm-calendar__week>.bm-calendar__date{padding-block-start:var(--bm-sem-space-25)}.bm-calendar__date-button{box-sizing:border-box;inline-size:var(--bm-sem-size-height-md);block-size:var(--bm-sem-size-height-md);border-radius:var(--bm-sem-radius-round);font:var(--bm-sem-typo-body-sm);color:var(--bm-sem-color-text-primary);cursor:default;background-color:#0000;border:none;justify-content:center;align-items:center;padding:0;display:flex;position:relative}.bm-calendar__date[data-outside-month=true] .bm-calendar__date-button{color:var(--bm-sem-color-text-secondary)}@keyframes bm-calendar-month-enter{0%{opacity:0;transform:translateX(var(--bm-calendar-month-enter-offset,0))}to{opacity:1;transform:none}}

package/chunks/{calendar.module.CKxTOiJx.js → calendar.module.CXGuMNJB.js}

@@ -1,23 +1,31 @@
 import "../assets/calendar.css";
 import { g as e } from "./classNames.koX0H7D0.js";
-const d = "calendar", { baseClassNamePrefix: n, classModifierPrefix: t, subElementClassPrefix: a } = e(d), r = {
+const d = "calendar", { baseClassNamePrefix: n, classModifierPrefix: s, subElementClassPrefix: a } = e(d), t = {
+  header: `${a}header`,
+  headerLabel: `${a}header-label`,
   grid: `${a}grid`,
   day: `${a}day`,
   visuallyHidden: `${a}visually-hidden`,
+  dates: `${a}dates`,
   week: `${a}week`,
   date: `${a}date`,
   dateButton: `${a}date-button`
 }, _ = {
   "bm-calendar": "bm-calendar",
   "bm-calendar__visually-hidden": "bm-calendar__visually-hidden",
+  "bm-calendar__header": "bm-calendar__header",
+  "bm-icon": "bm-icon",
+  "bm-calendar__header-label": "bm-calendar__header-label",
   "bm-calendar__grid": "bm-calendar__grid",
   "bm-calendar__day": "bm-calendar__day",
+  "bm-calendar__dates": "bm-calendar__dates",
+  "bm-calendar-month-enter": "bm-calendar-month-enter",
   "bm-calendar__date": "bm-calendar__date",
   "bm-calendar__week": "bm-calendar__week",
   "bm-calendar__date-button": "bm-calendar__date-button"
 };
 export {
-  r as a,
+  t as a,
   n as b,
   _ as s
 };

package/chunks/calendar.module.D0wrnDz0.js

@@ -0,0 +1 @@
+var s=require("../assets/calendar.css");const e=require("./classNames.CEoAKlth.js"),d="calendar",{baseClassNamePrefix:l,classModifierPrefix:t,subElementClassPrefix:a}=e.getBEMClassNames(d),r={header:`${a}header`,headerLabel:`${a}header-label`,grid:`${a}grid`,day:`${a}day`,visuallyHidden:`${a}visually-hidden`,dates:`${a}dates`,week:`${a}week`,date:`${a}date`,dateButton:`${a}date-button`},n={"bm-calendar":"bm-calendar","bm-calendar__visually-hidden":"bm-calendar__visually-hidden","bm-calendar__header":"bm-calendar__header","bm-icon":"bm-icon","bm-calendar__header-label":"bm-calendar__header-label","bm-calendar__grid":"bm-calendar__grid","bm-calendar__day":"bm-calendar__day","bm-calendar__dates":"bm-calendar__dates","bm-calendar-month-enter":"bm-calendar-month-enter","bm-calendar__date":"bm-calendar__date","bm-calendar__week":"bm-calendar__week","bm-calendar__date-button":"bm-calendar__date-button"};exports.baseClassNamePrefix=l;exports.staticCalendarClassNames=r;exports.styles=n;

package/lib/wip/Calendar/Calendar.Date.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),m=require("clsx"),n=require("react"),e=require("../../../chunks/calendar.module.D09fpoRh.js"),_=require("./Calendar.context.cjs.js"),t=require("./Calendar.utils.cjs.js"),r=n.forwardRef(function({date:a,className:i,"aria-label":d,...o},c){const{locale:l,visibleMonth:u}=_.useCalendar(),C=!t.isSameMonth(a,u);return s.jsxs("td",{...o,ref:c,className:m(e.styles[e.staticCalendarClassNames.date],i),"data-outside-month":C||void 0,children:[s.jsx("span",{className:e.styles[e.staticCalendarClassNames.dateButton],"aria-hidden":"true",children:t.formatDayNumber(a,l)}),s.jsx("span",{className:e.styles[e.staticCalendarClassNames.visuallyHidden],children:d??t.getDateLabel(a,l)})]})});r.displayName="CalendarDate";const b=n.memo(r);exports.CalendarDate=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),m=require("clsx"),n=require("react"),e=require("../../../chunks/calendar.module.D0wrnDz0.js"),_=require("./Calendar.context.cjs.js"),t=require("./Calendar.utils.cjs.js"),r=n.forwardRef(function({date:a,className:i,"aria-label":d,...o},c){const{locale:l,visibleMonth:u}=_.useCalendar(),C=!t.isSameMonth(a,u);return s.jsxs("td",{...o,ref:c,className:m(e.styles[e.staticCalendarClassNames.date],i),"data-outside-month":C||void 0,children:[s.jsx("span",{className:e.styles[e.staticCalendarClassNames.dateButton],"aria-hidden":"true",children:t.formatDayNumber(a,l)}),s.jsx("span",{className:e.styles[e.staticCalendarClassNames.visuallyHidden],children:d??t.getDateLabel(a,l)})]})});r.displayName="CalendarDate";const b=n.memo(r);exports.CalendarDate=b;

package/lib/wip/Calendar/Calendar.Date.es.js

@@ -1,7 +1,7 @@
 import { jsxs as f, jsx as r } from "react/jsx-runtime";
 import p from "clsx";
 import { forwardRef as u, memo as h } from "react";
-import { s as e, a as t } from "../../../chunks/calendar.module.CKxTOiJx.js";
+import { s as e, a as t } from "../../../chunks/calendar.module.CXGuMNJB.js";
 import { useCalendar as C } from "./Calendar.context.es.js";
 import { isSameMonth as D, formatDayNumber as N, getDateLabel as b } from "./Calendar.utils.es.js";
 const o = u(

package/lib/wip/Calendar/Calendar.Dates.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("clsx"),u=require("react"),a=require("../../../chunks/calendar.module.D09fpoRh.js");require("../../../chunks/constants.DLsDVPyH.js");const t=require("../../../chunks/dates.CVW08OQ2.js"),_=require("./Calendar.Date.cjs.js"),y=require("./Calendar.Days.cjs.js"),C=require("./Calendar.context.cjs.js"),n=u.forwardRef(function({className:l,...i},c){const{weeks:d}=C.useCalendar();return e.jsxs("table",{...i,ref:c,className:o(a.styles[a.staticCalendarClassNames.grid],l),children:[e.jsx(y.Days,{}),e.jsx("tbody",{children:d.map(s=>e.jsx("tr",{className:a.styles[a.staticCalendarClassNames.week],children:s.map(r=>e.jsx(_.CalendarDate,{date:r},t.dateToDayKey(r)))},t.dateToDayKey(s[0])))})]})});n.displayName="Dates";exports.Dates=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),C=require("clsx"),m=require("react"),e=require("../../../chunks/calendar.module.D0wrnDz0.js");require("../../../chunks/constants.DLsDVPyH.js");const s=require("../../../chunks/dates.CVW08OQ2.js"),_=require("./Calendar.Date.cjs.js"),D=require("./Calendar.Days.cjs.js"),b=require("./Calendar.context.cjs.js"),l=m.forwardRef(function({className:n,...i},d){const{weeks:c,visibleMonth:o,navDirection:u,monthLabelId:y}=b.useCalendar();return a.jsxs("table",{"aria-labelledby":y,...i,ref:d,className:C(e.styles[e.staticCalendarClassNames.grid],n),children:[a.jsx(D.Days,{}),a.jsx("tbody",{"data-nav-direction":u??void 0,className:e.styles[e.staticCalendarClassNames.dates],children:c.map(t=>a.jsx("tr",{className:e.styles[e.staticCalendarClassNames.week],children:t.map(r=>a.jsx(_.CalendarDate,{date:r},s.dateToDayKey(r)))},s.dateToDayKey(t[0])))},s.dateToDayKey(o))]})});l.displayName="Dates";exports.Dates=l;

package/lib/wip/Calendar/Calendar.Dates.es.js

@@ -1,22 +1,44 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import d from "clsx";
-import { forwardRef as n } from "react";
-import { s as e, a as o } from "../../../chunks/calendar.module.CKxTOiJx.js";
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import y from "clsx";
+import { forwardRef as D } from "react";
+import { s as r, a as e } from "../../../chunks/calendar.module.CXGuMNJB.js";
 import "../../../chunks/constants.XFX4nOSf.js";
-import { d as t } from "../../../chunks/dates.NqdbQ2fR.js";
-import { CalendarDate as c } from "./Calendar.Date.es.js";
-import { Days as y } from "./Calendar.Days.es.js";
-import { useCalendar as D } from "./Calendar.context.es.js";
-const x = n(
+import { d as s } from "../../../chunks/dates.NqdbQ2fR.js";
+import { CalendarDate as b } from "./Calendar.Date.es.js";
+import { Days as h } from "./Calendar.Days.es.js";
+import { useCalendar as N } from "./Calendar.context.es.js";
+const v = D(
   function({ className: m, ...i }, l) {
-    const { weeks: p } = D();
-    return /* @__PURE__ */ f("table", { ...i, ref: l, className: d(e[o.grid], m), children: [
-      /* @__PURE__ */ r(y, {}),
-      /* @__PURE__ */ r("tbody", { children: p.map((a) => /* @__PURE__ */ r("tr", { className: e[o.week], children: a.map((s) => /* @__PURE__ */ r(c, { date: s }, t(s))) }, t(a[0]))) })
-    ] });
+    const { weeks: d, visibleMonth: n, navDirection: c, monthLabelId: p } = N();
+    return (
+      // The grid takes its name from the header's month label, so it announces
+      // as "July 2025 table" rather than an unnamed one. Placed before the
+      // spread so a consumer can still name it themselves.
+      /* @__PURE__ */ f(
+        "table",
+        {
+          "aria-labelledby": p,
+          ...i,
+          ref: l,
+          className: y(r[e.grid], m),
+          children: [
+            /* @__PURE__ */ a(h, {}),
+            /* @__PURE__ */ a(
+              "tbody",
+              {
+                "data-nav-direction": c ?? void 0,
+                className: r[e.dates],
+                children: d.map((t) => /* @__PURE__ */ a("tr", { className: r[e.week], children: t.map((o) => /* @__PURE__ */ a(b, { date: o }, s(o))) }, s(t[0])))
+              },
+              s(n)
+            )
+          ]
+        }
+      )
+    );
   }
 );
-x.displayName = "Dates";
+v.displayName = "Dates";
 export {
-  x as Dates
+  v as Dates
 };

package/lib/wip/Calendar/Calendar.Days.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),a=require("../../../chunks/calendar.module.D09fpoRh.js"),p=require("./Calendar.context.cjs.js"),r=require("./Calendar.utils.cjs.js"),t=m.forwardRef(function({className:n,...c},d){const{weekdayLabels:i,weekStart:s,locale:o}=p.useCalendar(),u=r.getWeekdayFullLabels(o,s);return e.jsx("thead",{...c,ref:d,className:n,children:e.jsx("tr",{children:i.map((y,l)=>e.jsxs("th",{scope:"col",className:a.styles[a.staticCalendarClassNames.day],children:[e.jsx("span",{"aria-hidden":"true",children:y}),e.jsx("span",{className:a.styles[a.staticCalendarClassNames.visuallyHidden],children:u[l]})]},r.wrapWeekday(s+l)))})})});t.displayName="Days";exports.Days=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),a=require("../../../chunks/calendar.module.D0wrnDz0.js"),p=require("./Calendar.context.cjs.js"),r=require("./Calendar.utils.cjs.js"),t=m.forwardRef(function({className:n,...c},d){const{weekdayLabels:i,weekStart:s,locale:o}=p.useCalendar(),u=r.getWeekdayFullLabels(o,s);return e.jsx("thead",{...c,ref:d,className:n,children:e.jsx("tr",{children:i.map((y,l)=>e.jsxs("th",{scope:"col",className:a.styles[a.staticCalendarClassNames.day],children:[e.jsx("span",{"aria-hidden":"true",children:y}),e.jsx("span",{className:a.styles[a.staticCalendarClassNames.visuallyHidden],children:u[l]})]},r.wrapWeekday(s+l)))})})});t.displayName="Days";exports.Days=t;

package/lib/wip/Calendar/Calendar.Days.es.js

@@ -1,6 +1,6 @@
 import { jsx as a, jsxs as p } from "react/jsx-runtime";
 import { forwardRef as f } from "react";
-import { s as r, a as l } from "../../../chunks/calendar.module.CKxTOiJx.js";
+import { s as r, a as l } from "../../../chunks/calendar.module.CXGuMNJB.js";
 import { useCalendar as y } from "./Calendar.context.es.js";
 import { getWeekdayFullLabels as h, wrapWeekday as u } from "./Calendar.utils.es.js";
 const k = f(

package/lib/wip/Calendar/Calendar.Header.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("clsx"),C=require("react"),v=require("../../../chunks/ChevronLeftCurved.JKg9pOxN.js"),m=require("../../../chunks/ChevronRightCurved.CoT-Bqyo.js"),r=require("../../../chunks/calendar.module.D0wrnDz0.js"),b=require("../../Button/Button.cjs.js"),x=require("../../Icon/Icon.cjs.js"),g=require("./Calendar.context.cjs.js"),a=({icon:o,label:t,onClick:n})=>e.jsx(b.Button,{type:"button",appearance:"neutral",kind:"ghost",size:"md",iconOnly:!0,iconBefore:e.jsx(x.Icon,{icon:o}),"aria-label":t,onClick:n}),s=C.forwardRef(function({className:t,...n},i){const{monthLabel:l,monthLabelId:c,goToPreviousMonth:u,goToNextMonth:d}=g.useCalendar();return e.jsxs("div",{...n,ref:i,className:h(r.styles[r.staticCalendarClassNames.header],t),children:[e.jsx(a,{icon:v.SvgChevronLeftCurved,label:"Previous month",onClick:u}),e.jsx("span",{id:c,"aria-live":"polite",className:r.styles[r.staticCalendarClassNames.headerLabel],children:l}),e.jsx(a,{icon:m.SvgChevronRightCurved,label:"Next month",onClick:d})]})});s.displayName="Header";exports.Header=s;

package/lib/wip/Calendar/Calendar.Header.d.ts

@@ -0,0 +1,15 @@
+import { CalendarHeaderProps } from './Calendar.types';
+/**
+ * Month label with previous / next arrows.
+ *
+ * The arrows are Beam `<Button>`s rather than hand-rolled, which supplies the
+ * Figma `neutral/ghost` treatment, the 40×40 `md` sizing, and the `StateLayer`.
+ * Labels are hardcoded English until `ariaLabels` arrives with I-7.
+ *
+ * The label is a live region as well as the grid's accessible name. Paging the
+ * month replaces the grid's contents without moving focus — the arrow keeps it
+ * — so nothing else would tell a screen-reader user the month changed. It
+ * announces on update only: the text is already in the region at mount, which
+ * is when assistive tech registers it, so the first paint is silent.
+ */
+export declare const Header: import('react').ForwardRefExoticComponent<CalendarHeaderProps & import('react').RefAttributes<HTMLDivElement>>;

package/lib/wip/Calendar/Calendar.Header.es.js

@@ -0,0 +1,65 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import f from "clsx";
+import { forwardRef as h } from "react";
+import { S as u } from "../../../chunks/ChevronLeftCurved.CX7aH27X.js";
+import { S as v } from "../../../chunks/ChevronRightCurved.9hi9Zc8J.js";
+import { s as t, a as n } from "../../../chunks/calendar.module.CXGuMNJB.js";
+import { Button as C } from "../../Button/Button.es.js";
+import { Icon as b } from "../../Icon/Icon.es.js";
+import { useCalendar as N } from "./Calendar.context.es.js";
+const i = ({ icon: a, label: e, onClick: r }) => /* @__PURE__ */ o(
+  C,
+  {
+    type: "button",
+    appearance: "neutral",
+    kind: "ghost",
+    size: "md",
+    iconOnly: !0,
+    iconBefore: /* @__PURE__ */ o(b, { icon: a }),
+    "aria-label": e,
+    onClick: r
+  }
+), g = h(
+  function({ className: e, ...r }, s) {
+    const { monthLabel: m, monthLabelId: l, goToPreviousMonth: c, goToNextMonth: d } = N();
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        ...r,
+        ref: s,
+        className: f(t[n.header], e),
+        children: [
+          /* @__PURE__ */ o(
+            i,
+            {
+              icon: u,
+              label: "Previous month",
+              onClick: c
+            }
+          ),
+          /* @__PURE__ */ o(
+            "span",
+            {
+              id: l,
+              "aria-live": "polite",
+              className: t[n.headerLabel],
+              children: m
+            }
+          ),
+          /* @__PURE__ */ o(
+            i,
+            {
+              icon: v,
+              label: "Next month",
+              onClick: d
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+g.displayName = "Header";
+export {
+  g as Header
+};

package/lib/wip/Calendar/Calendar.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),S=require("clsx"),s=require("react"),D=require("../../../chunks/calendar.module.D09fpoRh.js"),k=require("../../../chunks/classNames.CEoAKlth.js");require("../../../chunks/constants.DLsDVPyH.js");const _=require("../../../chunks/dates.CVW08OQ2.js"),O=require("../../../utils/spacing.cjs.js"),j=require("./Calendar.context.cjs.js"),v=require("./Calendar.Date.cjs.js"),y=require("./Calendar.Dates.cjs.js"),L=require("./Calendar.Days.cjs.js"),a=require("./Calendar.utils.cjs.js"),e=s.forwardRef(function({today:c,locale:m,role:p="group","aria-label":b="Calendar",className:q,...g},w){const[f,x]=O.partitionSpacingProps(g),r=m??_.DEFAULT_LOCALE,[d]=s.useState(()=>a.startOfDay(new Date)),i=_.isValidDate(c)?a.startOfDay(c).getTime():null,n=s.useMemo(()=>i===null?d:a.startOfDay(new Date(i)),[i,d]),l=s.useMemo(()=>a.startOfMonth(n),[n]),t=a.getWeekStart(r),u=a.getWeekdayLabels(r,t),C=s.useMemo(()=>a.getCalendarWeeks(l,t),[l,t]),N=s.useMemo(()=>({locale:r,today:n,visibleMonth:l,weekStart:t,weeks:C,weekdayLabels:u}),[r,n,l,t,C,u]),M=S(D.styles[D.baseClassNamePrefix],...k.generateSpacingClasses(f),q);return o.jsx(j.CalendarContext.Provider,{value:N,children:o.jsx("div",{...x,ref:w,role:p,"aria-label":b,className:M,children:o.jsx(y.Dates,{})})})});e.displayName="Calendar";e.Days=L.Days;e.Dates=y.Dates;e.Date=v.CalendarDate;e.Days.displayName="Calendar.Days";e.Dates.displayName="Calendar.Dates";e.Date.displayName="Calendar.Date";exports.Calendar=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),j=require("clsx"),_=require("react"),p=require("../../../chunks/calendar.module.D0wrnDz0.js"),H=require("../../../chunks/classNames.CEoAKlth.js");require("../../../chunks/constants.DLsDVPyH.js");const L=require("../../../chunks/dates.CVW08OQ2.js"),S=require("../../../utils/hooks/useId.cjs.js"),k=require("../../../utils/spacing.cjs.js"),T=require("./Calendar.context.cjs.js"),I=require("./Calendar.Date.cjs.js"),D=require("./Calendar.Dates.cjs.js"),R=require("./Calendar.Days.cjs.js"),q=require("./Calendar.Header.cjs.js");require("./Calendar.utils.cjs.js");const A=require("./useCalendarGrid.cjs.js"),E=require("./useCalendarMonth.cjs.js"),e=_.forwardRef(function({today:y,onVisibleMonthChange:b,locale:m,role:w="group","aria-label":x="Calendar",className:g,...h},N){const[v,M]=k.partitionSpacingProps(h),r=m??L.DEFAULT_LOCALE,{today:n,visibleMonth:s,navDirection:t,goToPreviousMonth:l,goToNextMonth:i}=E.useCalendarMonth({today:y,onVisibleMonthChange:b}),{weekStart:o,weekdayLabels:d,weeks:c,monthLabel:u}=A.useCalendarGrid(s,r),C=S.useId(),P=_.useMemo(()=>({locale:r,today:n,visibleMonth:s,weekStart:o,weeks:c,weekdayLabels:d,monthLabel:u,monthLabelId:C,goToPreviousMonth:l,goToNextMonth:i,navDirection:t}),[r,n,s,o,c,d,u,C,l,i,t]),f=j(p.styles[p.baseClassNamePrefix],...H.generateSpacingClasses(v),g);return a.jsx(T.CalendarContext.Provider,{value:P,children:a.jsxs("div",{...M,ref:N,role:w,"aria-label":x,className:f,children:[a.jsx(q.Header,{}),a.jsx(D.Dates,{})]})})});e.displayName="Calendar";e.Header=q.Header;e.Days=R.Days;e.Dates=D.Dates;e.Date=I.CalendarDate;e.Header.displayName="Calendar.Header";e.Days.displayName="Calendar.Days";e.Dates.displayName="Calendar.Dates";e.Date.displayName="Calendar.Date";exports.Calendar=e;

package/lib/wip/Calendar/Calendar.d.ts

@@ -2,20 +2,23 @@ import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { CalendarDate } from './Calendar.Date';
 import { Dates } from './Calendar.Dates';
 import { Days } from './Calendar.Days';
+import { Header } from './Calendar.Header';
 import { CalendarProps } from './Calendar.types';
 interface CalendarComponent extends ForwardRefExoticComponent<CalendarProps & RefAttributes<HTMLDivElement>> {
+    Header: typeof Header;
     Days: typeof Days;
     Dates: typeof Dates;
     Date: typeof CalendarDate;
 }
 /**
- * A static grid of a single month, with a weekday header.
+ * A month grid with a header for moving between months.
  *
- * The root owns the layout rather than exposing the grid as composable
- * children: the weekday row and the date rows can't be reordered or used
- * apart, and Figma models the calendar's optional parts (footer, presets) as
- * variants rather than slots. Month navigation lands in C-2, selection in C-3,
- * keyboard support in C-7.
+ * The root owns the layout rather than exposing the parts as composable
+ * children: the weekday row and the date rows can't be reordered or used apart,
+ * Figma has no variant that hides the header, and modelling it as children
+ * would leave `<Calendar />` with no way to change months. Figma treats the
+ * genuinely optional parts — footer and presets — as variants, so those become
+ * props when they land.
  */
 export declare const Calendar: CalendarComponent;
 export {};

package/lib/wip/Calendar/Calendar.es.js

@@ -1,60 +1,91 @@
-import { jsx as l } from "react/jsx-runtime";
-import L from "clsx";
-import { forwardRef as S, useState as h, useMemo as r } from "react";
-import { s as v, b as P } from "../../../chunks/calendar.module.CKxTOiJx.js";
-import { a as T } from "../../../chunks/classNames.koX0H7D0.js";
+import { jsx as r, jsxs as w } from "react/jsx-runtime";
+import H from "clsx";
+import { forwardRef as k, useMemo as S } from "react";
+import { s as T, b as j } from "../../../chunks/calendar.module.CXGuMNJB.js";
+import { a as A } from "../../../chunks/classNames.koX0H7D0.js";
 import "../../../chunks/constants.XFX4nOSf.js";
-import { i as M, D as O } from "../../../chunks/dates.NqdbQ2fR.js";
-import { partitionSpacingProps as W } from "../../../utils/spacing.es.js";
-import { CalendarContext as A } from "./Calendar.context.es.js";
-import { CalendarDate as E } from "./Calendar.Date.es.js";
+import { D as E } from "../../../chunks/dates.NqdbQ2fR.js";
+import { useId as I } from "../../../utils/hooks/useId.es.js";
+import { partitionSpacingProps as F } from "../../../utils/spacing.es.js";
+import { CalendarContext as G } from "./Calendar.context.es.js";
+import { CalendarDate as O } from "./Calendar.Date.es.js";
 import { Dates as f } from "./Calendar.Dates.es.js";
-import { Days as V } from "./Calendar.Days.es.js";
-import { startOfDay as i, startOfMonth as j, getWeekStart as F, getWeekdayLabels as R, getCalendarWeeks as U } from "./Calendar.utils.es.js";
-const a = S(
+import { Days as R } from "./Calendar.Days.es.js";
+import { Header as C } from "./Calendar.Header.es.js";
+import "./Calendar.utils.es.js";
+import { useCalendarGrid as U } from "./useCalendarGrid.es.js";
+import { useCalendarMonth as V } from "./useCalendarMonth.es.js";
+const a = k(
   function({
-    today: m,
-    locale: D,
+    today: D,
+    onVisibleMonthChange: y,
+    locale: u,
     // Destructured with defaults rather than written after the prop spread:
     // spreading first would silently drop a caller's own `role` or
     // `aria-label`, and spreading last would let an unrelated pass-through
     // erase the group semantics. This way the caller wins explicitly.
-    role: y = "group",
-    "aria-label": C = "Calendar",
-    className: g,
-    ...u
-  }, b) {
-    const [N, k] = W(u), t = D ?? O, [p] = h(() => i(/* @__PURE__ */ new Date())), n = M(m) ? i(m).getTime() : null, s = r(
-      () => n === null ? p : i(new Date(n)),
-      [n, p]
-    ), o = r(() => j(s), [s]), e = F(t), c = R(t, e), d = r(
-      () => U(o, e),
-      [o, e]
-    ), w = r(
-      () => ({ locale: t, today: s, visibleMonth: o, weekStart: e, weeks: d, weekdayLabels: c }),
-      [t, s, o, e, d, c]
-    ), x = L(
-      v[P],
-      ...T(N),
-      g
+    role: N = "group",
+    "aria-label": b = "Calendar",
+    className: h,
+    ...x
+  }, g) {
+    const [v, L] = F(x), e = u ?? E, { today: t, visibleMonth: o, navDirection: s, goToPreviousMonth: m, goToNextMonth: n } = V({ today: D, onVisibleMonthChange: y }), { weekStart: i, weekdayLabels: l, weeks: d, monthLabel: p } = U(
+      o,
+      e
+    ), c = I(), P = S(
+      () => ({
+        locale: e,
+        today: t,
+        visibleMonth: o,
+        weekStart: i,
+        weeks: d,
+        weekdayLabels: l,
+        monthLabel: p,
+        monthLabelId: c,
+        goToPreviousMonth: m,
+        goToNextMonth: n,
+        navDirection: s
+      }),
+      [
+        e,
+        t,
+        o,
+        i,
+        d,
+        l,
+        p,
+        c,
+        m,
+        n,
+        s
+      ]
+    ), M = H(
+      T[j],
+      ...A(v),
+      h
     );
-    return /* @__PURE__ */ l(A.Provider, { value: w, children: /* @__PURE__ */ l(
+    return /* @__PURE__ */ r(G.Provider, { value: P, children: /* @__PURE__ */ w(
       "div",
       {
-        ...k,
-        ref: b,
-        role: y,
-        "aria-label": C,
-        className: x,
-        children: /* @__PURE__ */ l(f, {})
+        ...L,
+        ref: g,
+        role: N,
+        "aria-label": b,
+        className: M,
+        children: [
+          /* @__PURE__ */ r(C, {}),
+          /* @__PURE__ */ r(f, {})
+        ]
       }
     ) });
   }
 );
 a.displayName = "Calendar";
-a.Days = V;
+a.Header = C;
+a.Days = R;
 a.Dates = f;
-a.Date = E;
+a.Date = O;
+a.Header.displayName = "Calendar.Header";
 a.Days.displayName = "Calendar.Days";
 a.Dates.displayName = "Calendar.Dates";
 a.Date.displayName = "Calendar.Date";

package/lib/wip/Calendar/Calendar.types.d.ts

@@ -12,6 +12,11 @@ export interface CalendarProps extends MarginSpacingProps, PaddingSpacingProps,
      * @default new Date()
      */
     today?: Date;
+    /**
+     * Fires whenever the visible month changes, with the first day of the new
+     * month at local midnight.
+     */
+    onVisibleMonthChange?: (date: Date) => void;
     /**
      * Specify the BCP-47 locale tag driving weekday and month names, the spoken
      * date labels, and which day the week starts on (e.g. `de-DE` → Montag first,
@@ -27,6 +32,8 @@ export interface CalendarProps extends MarginSpacingProps, PaddingSpacingProps,
      */
     'aria-label'?: string;
 }
+/** Which way the visible month last moved, for the enter animation. */
+export type CalendarNavDirection = 'previous' | 'next';
 /**
  * Everything the sub-components need, derived once by the `Calendar` root.
  * @internal
@@ -44,7 +51,22 @@ export interface CalendarContextValue {
     weeks: Date[][];
     /** Abbreviated weekday names, ordered from `weekStart`. */
     weekdayLabels: ReadonlyArray<string>;
+    /** Localized "Month Year" label for `visibleMonth`. */
+    monthLabel: string;
+    /**
+     * `id` of the element rendering `monthLabel`, so the grid can be named by it.
+     * `undefined` only on a React < 18 server render, where `useId` has no id to
+     * give yet and both the `id` and the `aria-labelledby` are simply omitted.
+     */
+    monthLabelId: string | undefined;
+    /** Moves the visible month back one and fires `onVisibleMonthChange`. */
+    goToPreviousMonth: () => void;
+    /** Moves the visible month forward one and fires `onVisibleMonthChange`. */
+    goToNextMonth: () => void;
+    /** Direction of the last navigation; `null` until the user navigates. */
+    navDirection: CalendarNavDirection | null;
 }
+export type CalendarHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
 export type CalendarDaysProps = ComponentPropsWithoutRef<'thead'>;
 export type CalendarDatesProps = Omit<ComponentPropsWithoutRef<'table'>, 'children'>;
 export interface CalendarDateProps extends Omit<ComponentPropsWithoutRef<'td'>, 'children'> {

package/lib/wip/Calendar/Calendar.utils.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../chunks/constants.DLsDVPyH.js");const o=require("../../../chunks/dates.CVW08OQ2.js"),r=7,y=0,i=1,E=6,c=e=>(e%r+r)%r,g=(e,t,a)=>{const n=new Date;return n.setFullYear(e,t,a),n.setHours(0,0,0,0),n},Y=e=>g(e.getFullYear(),e.getMonth(),e.getDate()),m=e=>g(e.getFullYear(),e.getMonth(),1),d=e=>g(e.getFullYear(),e.getMonth()+1,0),h=e=>d(e).getDate(),u=(e,t)=>g(e.getFullYear(),e.getMonth(),e.getDate()+t),_=(e,t)=>e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate(),F=(e,t)=>e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth(),S=[],l=(e,t)=>{const a=o.createBoundedMemo(e,t);return S.push(a),a},I=e=>{var t,a;try{const n=new Intl.Locale(e),s=((t=n.getWeekInfo)==null?void 0:t.call(n).firstDay)??((a=n.weekInfo)==null?void 0:a.firstDay);return typeof s=="number"?c(s):null}catch{return null}},k=new Set(["BD","BR","CA","CO","ET","HK","ID","IL","IN","JP","KE","KR","MO","MX","NP","PE","PH","PK","PT","SA","SG","TH","TW","US","VE","YE","ZA"]),T=new Set(["AF","BH","DZ","EG","IQ","IR","JO","KW","LY","OM","QA","SD","SY"]),C=e=>{try{const t=new Intl.Locale(e).maximize().region;return t?k.has(t)?y:T.has(t)?E:null:null}catch{return null}},N=l(o.canonicalLocaleKey,e=>{const t=o.resolveLocale(e);return I(t)??C(t)??i}),O=864e5,W=e=>{const t=new Date(0);return t.setUTCFullYear(e.getFullYear(),e.getMonth(),e.getDate()),t},w=Date.UTC(2024,8,1),L=(e,t,a)=>{const n=new Intl.DateTimeFormat(o.resolveLocale(e),{weekday:a,timeZone:"UTC"});return Array.from({length:r},(s,D)=>n.format(w+c(t+D)*O))},A=(e,t)=>`${o.canonicalLocaleKey(e)}|${t}`,R=l(A,(e,t)=>L(e,t,"short")),b=l(A,(e,t)=>L(e,t,"long")),U=(e,t)=>R(e,t),K=(e,t)=>{const a=m(e),n=c(a.getDay()-t),s=u(a,-n),D=Math.ceil((n+h(e))/r);return Array.from({length:D},(V,f)=>Array.from({length:r},(j,M)=>u(s,f*r+M)))},P=(e,t)=>b(e,t),p=new Set(["gregory","buddhist","japanese","roc"]),G=l(o.canonicalLocaleKey,e=>{const t=o.resolveLocale(e),{calendar:a}=new Intl.DateTimeFormat(t).resolvedOptions();return new Intl.DateTimeFormat(t,{weekday:"long",year:"numeric",month:"long",day:"numeric",timeZone:"UTC",...p.has(a)?{}:{calendar:"gregory"}})}),v=(e,t)=>G(t).format(W(e)),H=l(o.canonicalLocaleKey,e=>new Intl.NumberFormat(o.resolveLocale(e))),B=(e,t)=>H(t).format(e.getDate()),Z=()=>{o.__clearLocaleKeyCache(),S.forEach(e=>e.clear())};exports.DEFAULT_LOCALE=o.DEFAULT_LOCALE;exports.isValidDate=o.isValidDate;exports.DAYS_IN_WEEK=r;exports.MONDAY=i;exports.SUNDAY=y;exports.__clearCalendarCaches=Z;exports.addDays=u;exports.endOfMonth=d;exports.formatDayNumber=B;exports.getCalendarWeeks=K;exports.getDateLabel=v;exports.getDaysInMonth=h;exports.getWeekStart=N;exports.getWeekdayFullLabels=P;exports.getWeekdayLabels=U;exports.isSameDay=_;exports.isSameMonth=F;exports.startOfDay=Y;exports.startOfMonth=m;exports.wrapWeekday=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../chunks/constants.DLsDVPyH.js");const o=require("../../../chunks/dates.CVW08OQ2.js"),r=7,y=0,i=1,E=6,g=e=>(e%r+r)%r,s=(e,t,n)=>{const a=new Date;return a.setFullYear(e,t,n),a.setHours(0,0,0,0),a},_=e=>s(e.getFullYear(),e.getMonth(),e.getDate()),h=e=>s(e.getFullYear(),e.getMonth(),1),d=e=>s(e.getFullYear(),e.getMonth()+1,0),m=e=>d(e).getDate(),D=(e,t)=>s(e.getFullYear(),e.getMonth(),e.getDate()+t),I=(e,t)=>{const n=s(e.getFullYear(),e.getMonth()+t,1),a=Math.min(e.getDate(),m(n));return s(n.getFullYear(),n.getMonth(),a)},T=(e,t)=>e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate(),k=(e,t)=>e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth(),L=[],l=(e,t)=>{const n=o.createBoundedMemo(e,t);return L.push(n),n},C=e=>{var t,n;try{const a=new Intl.Locale(e),c=((t=a.getWeekInfo)==null?void 0:t.call(a).firstDay)??((n=a.weekInfo)==null?void 0:n.firstDay);return typeof c=="number"?g(c):null}catch{return null}},N=new Set(["BD","BR","CA","CO","ET","HK","ID","IL","IN","JP","KE","KR","MO","MX","NP","PE","PH","PK","PT","SA","SG","TH","TW","US","VE","YE","ZA"]),O=new Set(["AF","BH","DZ","EG","IQ","IR","JO","KW","LY","OM","QA","SD","SY"]),W=e=>{try{const t=new Intl.Locale(e).maximize().region;return t?N.has(t)?y:O.has(t)?E:null:null}catch{return null}},w=l(o.canonicalLocaleKey,e=>{const t=o.resolveLocale(e);return C(t)??W(t)??i}),b=864e5,M=e=>{const t=new Date(0);return t.setUTCFullYear(e.getFullYear(),e.getMonth(),e.getDate()),t},U=Date.UTC(2024,8,1),S=(e,t,n)=>{const a=new Intl.DateTimeFormat(o.resolveLocale(e),{weekday:n,timeZone:"UTC"});return Array.from({length:r},(c,u)=>a.format(U+g(t+u)*b))},A=(e,t)=>`${o.canonicalLocaleKey(e)}|${t}`,R=l(A,(e,t)=>S(e,t,"short")),K=l(A,(e,t)=>S(e,t,"long")),v=(e,t)=>R(e,t),P=(e,t)=>{const n=h(e),a=g(n.getDay()-t),c=D(n,-a),u=Math.ceil((a+m(e))/r);return Array.from({length:u},(Q,F)=>Array.from({length:r},($,Y)=>D(c,F*r+Y)))},p=(e,t)=>K(e,t),G=new Set(["gregory","buddhist","japanese","roc"]),f=e=>{const{calendar:t}=new Intl.DateTimeFormat(e).resolvedOptions();return G.has(t)?{}:{calendar:"gregory"}},H=l(o.canonicalLocaleKey,e=>{const t=o.resolveLocale(e);return new Intl.DateTimeFormat(t,{weekday:"long",year:"numeric",month:"long",day:"numeric",timeZone:"UTC",...f(t)})}),Z=(e,t)=>H(t).format(M(e)),B=l(o.canonicalLocaleKey,e=>{const t=o.resolveLocale(e);return new Intl.DateTimeFormat(t,{month:"long",year:"numeric",timeZone:"UTC",...f(t)})}),V=(e,t)=>B(t).format(M(e)),j=l(o.canonicalLocaleKey,e=>new Intl.NumberFormat(o.resolveLocale(e))),q=(e,t)=>j(t).format(e.getDate()),J=()=>{o.__clearLocaleKeyCache(),L.forEach(e=>e.clear())};exports.DEFAULT_LOCALE=o.DEFAULT_LOCALE;exports.isValidDate=o.isValidDate;exports.DAYS_IN_WEEK=r;exports.MONDAY=i;exports.SUNDAY=y;exports.__clearCalendarCaches=J;exports.addDays=D;exports.addMonths=I;exports.endOfMonth=d;exports.formatDayNumber=q;exports.getCalendarWeeks=P;exports.getDateLabel=Z;exports.getDaysInMonth=m;exports.getMonthLabel=V;exports.getWeekStart=w;exports.getWeekdayFullLabels=p;exports.getWeekdayLabels=v;exports.isSameDay=T;exports.isSameMonth=k;exports.startOfDay=_;exports.startOfMonth=h;exports.wrapWeekday=g;

package/lib/wip/Calendar/Calendar.utils.d.ts

@@ -19,6 +19,13 @@ export declare const endOfMonth: (date: Date) => Date;
 export declare const getDaysInMonth: (date: Date) => number;
 /** Shifts by whole calendar days. Negative amounts move backwards. */
 export declare const addDays: (date: Date, amount: number) => Date;
+/**
+ * Shifts by whole calendar months, clamping the day to the target month's
+ * length so Jan 31 lands on Feb 28 rather than overflowing into March. The
+ * clamp is invisible to month navigation, which always operates on the first
+ * of the month, but C-8's `PageUp`/`PageDown` moves arbitrary days and needs it.
+ */
+export declare const addMonths: (date: Date, amount: number) => Date;
 export declare const isSameDay: (a: Date, b: Date) => boolean;
 export declare const isSameMonth: (a: Date, b: Date) => boolean;
 /**
@@ -57,7 +64,28 @@ export declare const getCalendarWeeks: (visibleMonth: Date, weekStart: number) =
  * "mer."). The header shows the short form and announces this one.
  */
 export declare const getWeekdayFullLabels: (locale: string, weekStart: number) => ReadonlyArray<string>;
+/**
+ * A cell's spoken name — "Wednesday, July 15, 2025".
+ *
+ * The visible text is only the day number, which leaves a screen reader unable
+ * to separate the padding days from the month's own: July 2025 opens on
+ * "29, 30, 1", so it sounds like July starts on the 29th. The dimmed colour is
+ * the only thing saying otherwise, and colour isn't available to a screen
+ * reader.
+ *
+ * Built by `Intl` rather than assembled from parts, so word order and
+ * punctuation follow the locale instead of an English template. C-13 extends
+ * this with state suffixes (today, selected, disabled); I-8 adds the per-cell
+ * override.
+ */
 export declare const getDateLabel: (date: Date, locale: string) => string;
+/**
+ * The header's "Month Year" label. Ordering is the locale's, not a template —
+ * en-US gives "July 2025", ja-JP gives "2025年7月", th-TH keeps its Buddhist
+ * year. Pinned the same way as {@link getDateLabel}, and for the same reasons,
+ * so the header can't name a different month from the cells below it.
+ */
+export declare const getMonthLabel: (date: Date, locale: string) => string;
 /**
  * The day-of-month number as displayed. Routed through `Intl.NumberFormat` so
  * locales with non-Latin default digits render correctly, and so the

package/lib/wip/Calendar/Calendar.utils.es.js

@@ -1,21 +1,24 @@
 import "../../../chunks/constants.XFX4nOSf.js";
-import { c as f, r as c, b as l, _ as d } from "../../../chunks/dates.NqdbQ2fR.js";
-import { D as ee, i as te } from "../../../chunks/dates.NqdbQ2fR.js";
-const a = 7, Y = 0, E = 1, F = 6, D = (e) => (e % a + a) % a, g = (e, t, n) => {
+import { c as F, r as l, b as g, _ as Y } from "../../../chunks/dates.NqdbQ2fR.js";
+import { D as re, i as ae } from "../../../chunks/dates.NqdbQ2fR.js";
+const r = 7, L = 0, E = 1, I = 6, u = (e) => (e % r + r) % r, a = (e, t, n) => {
   const o = /* @__PURE__ */ new Date();
   return o.setFullYear(e, t, n), o.setHours(0, 0, 0, 0), o;
-}, B = (e) => g(e.getFullYear(), e.getMonth(), e.getDate()), M = (e) => g(e.getFullYear(), e.getMonth(), 1), _ = (e) => g(e.getFullYear(), e.getMonth() + 1, 0), I = (e) => _(e).getDate(), m = (e, t) => g(e.getFullYear(), e.getMonth(), e.getDate() + t), Z = (e, t) => e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate(), x = (e, t) => e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth(), y = [], s = (e, t) => {
-  const n = f(e, t);
-  return y.push(n), n;
-}, L = (e) => {
+}, v = (e) => a(e.getFullYear(), e.getMonth(), e.getDate()), T = (e) => a(e.getFullYear(), e.getMonth(), 1), _ = (e) => a(e.getFullYear(), e.getMonth() + 1, 0), h = (e) => _(e).getDate(), D = (e, t) => a(e.getFullYear(), e.getMonth(), e.getDate() + t), x = (e, t) => {
+  const n = a(e.getFullYear(), e.getMonth() + t, 1), o = Math.min(e.getDate(), h(n));
+  return a(n.getFullYear(), n.getMonth(), o);
+}, J = (e, t) => e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate(), Q = (e, t) => e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth(), i = [], s = (e, t) => {
+  const n = F(e, t);
+  return i.push(n), n;
+}, w = (e) => {
   var t, n;
   try {
-    const o = new Intl.Locale(e), r = ((t = o.getWeekInfo) == null ? void 0 : t.call(o).firstDay) ?? ((n = o.weekInfo) == null ? void 0 : n.firstDay);
-    return typeof r == "number" ? D(r) : null;
+    const o = new Intl.Locale(e), c = ((t = o.getWeekInfo) == null ? void 0 : t.call(o).firstDay) ?? ((n = o.weekInfo) == null ? void 0 : n.firstDay);
+    return typeof c == "number" ? u(c) : null;
   } catch {
     return null;
   }
-}, T = /* @__PURE__ */ new Set([
+}, C = /* @__PURE__ */ new Set([
   "BD",
   "BR",
   "CA",
@@ -43,7 +46,7 @@ const a = 7, Y = 0, E = 1, F = 6, D = (e) => (e % a + a) % a, g = (e, t, n) => {
   "VE",
   "YE",
   "ZA"
-]), w = /* @__PURE__ */ new Set([
+]), k = /* @__PURE__ */ new Set([
   "AF",
   "BH",
   "DZ",
@@ -57,97 +60,103 @@ const a = 7, Y = 0, E = 1, F = 6, D = (e) => (e % a + a) % a, g = (e, t, n) => {
   "QA",
   "SD",
   "SY"
-]), k = (e) => {
+]), N = (e) => {
   try {
     const t = new Intl.Locale(e).maximize().region;
-    return t ? T.has(t) ? Y : w.has(t) ? F : null : null;
+    return t ? C.has(t) ? L : k.has(t) ? I : null : null;
   } catch {
     return null;
   }
-}, v = s(
-  l,
+}, V = s(
+  g,
   (e) => {
-    const t = c(e);
-    return L(t) ?? k(t) ?? E;
+    const t = l(e);
+    return w(t) ?? N(t) ?? E;
   }
-), C = 864e5, N = (e) => {
+), R = 864e5, y = (e) => {
   const t = /* @__PURE__ */ new Date(0);
   return t.setUTCFullYear(e.getFullYear(), e.getMonth(), e.getDate()), t;
-}, R = Date.UTC(2024, 8, 1), i = (e, t, n) => {
-  const o = new Intl.DateTimeFormat(c(e), {
+}, U = Date.UTC(2024, 8, 1), d = (e, t, n) => {
+  const o = new Intl.DateTimeFormat(l(e), {
     weekday: n,
     timeZone: "UTC"
   });
   return Array.from(
-    { length: a },
-    (r, u) => o.format(
-      R + D(t + u) * C
+    { length: r },
+    (c, m) => o.format(
+      U + u(t + m) * R
     )
   );
-}, h = (e, t) => `${l(e)}|${t}`, O = s(
-  h,
-  (e, t) => i(e, t, "short")
+}, A = (e, t) => `${g(e)}|${t}`, O = s(
+  A,
+  (e, t) => d(e, t, "short")
 ), W = s(
-  h,
-  (e, t) => i(e, t, "long")
-), J = (e, t) => O(e, t), Q = (e, t) => {
-  const n = M(e), o = D(n.getDay() - t), r = m(n, -o), u = Math.ceil(
-    (o + I(e)) / a
+  A,
+  (e, t) => d(e, t, "long")
+), $ = (e, t) => O(e, t), j = (e, t) => {
+  const n = T(e), o = u(n.getDay() - t), c = D(n, -o), m = Math.ceil(
+    (o + h(e)) / r
   );
   return Array.from(
-    { length: u },
-    (K, A) => Array.from(
-      { length: a },
-      (G, S) => m(r, A * a + S)
+    { length: m },
+    (P, f) => Array.from(
+      { length: r },
+      (H, S) => D(c, f * r + S)
     )
   );
-}, V = (e, t) => W(e, t), U = /* @__PURE__ */ new Set([
+}, z = (e, t) => W(e, t), b = /* @__PURE__ */ new Set([
   "gregory",
   "buddhist",
   "japanese",
   "roc"
-]), b = s(l, (e) => {
-  const t = c(e), { calendar: n } = new Intl.DateTimeFormat(t).resolvedOptions();
+]), M = (e) => {
+  const { calendar: t } = new Intl.DateTimeFormat(e).resolvedOptions();
+  return b.has(t) ? {} : { calendar: "gregory" };
+}, p = s(g, (e) => {
+  const t = l(e);
   return new Intl.DateTimeFormat(t, {
     weekday: "long",
     year: "numeric",
     month: "long",
     day: "numeric",
     timeZone: "UTC",
-    // The grid is laid out from Gregorian `Date` arithmetic, so a label that
-    // names a different day describes a month we never drew: unpinned, `fa-IR`
-    // renders "۸" and announces "۱۴۰۴ تیر ۱۷" — different day, month and year,
-    // on all 35 cells. Forced only for the calendars that actually diverge, so
-    // a Thai user keeps 2568 and a Japanese user keeps the era; both name the
-    // same day the grid drew. A grid that follows the locale's own calendar is
-    // A-3, still deferred.
-    ...U.has(n) ? {} : { calendar: "gregory" }
+    ...M(t)
   });
-}), $ = (e, t) => b(t).format(N(e)), p = s(
-  l,
-  (e) => new Intl.NumberFormat(c(e))
-), j = (e, t) => p(t).format(e.getDate()), z = () => {
-  d(), y.forEach((e) => e.clear());
+}), X = (e, t) => p(t).format(y(e)), K = s(g, (e) => {
+  const t = l(e);
+  return new Intl.DateTimeFormat(t, {
+    month: "long",
+    year: "numeric",
+    timeZone: "UTC",
+    ...M(t)
+  });
+}), q = (e, t) => K(t).format(y(e)), G = s(
+  g,
+  (e) => new Intl.NumberFormat(l(e))
+), ee = (e, t) => G(t).format(e.getDate()), te = () => {
+  Y(), i.forEach((e) => e.clear());
 };
 export {
-  a as DAYS_IN_WEEK,
-  ee as DEFAULT_LOCALE,
+  r as DAYS_IN_WEEK,
+  re as DEFAULT_LOCALE,
   E as MONDAY,
-  Y as SUNDAY,
-  z as __clearCalendarCaches,
-  m as addDays,
+  L as SUNDAY,
+  te as __clearCalendarCaches,
+  D as addDays,
+  x as addMonths,
   _ as endOfMonth,
-  j as formatDayNumber,
-  Q as getCalendarWeeks,
-  $ as getDateLabel,
-  I as getDaysInMonth,
-  v as getWeekStart,
-  V as getWeekdayFullLabels,
-  J as getWeekdayLabels,
-  Z as isSameDay,
-  x as isSameMonth,
-  te as isValidDate,
-  B as startOfDay,
-  M as startOfMonth,
-  D as wrapWeekday
+  ee as formatDayNumber,
+  j as getCalendarWeeks,
+  X as getDateLabel,
+  h as getDaysInMonth,
+  q as getMonthLabel,
+  V as getWeekStart,
+  z as getWeekdayFullLabels,
+  $ as getWeekdayLabels,
+  J as isSameDay,
+  Q as isSameMonth,
+  ae as isValidDate,
+  v as startOfDay,
+  T as startOfMonth,
+  u as wrapWeekday
 };

package/lib/wip/Calendar/index.d.ts

@@ -1,2 +1,2 @@
 export { Calendar } from './Calendar';
-export type { CalendarDateProps, CalendarDatesProps, CalendarDaysProps, CalendarProps, } from './Calendar.types';
+export type { CalendarDateProps, CalendarDatesProps, CalendarDaysProps, CalendarHeaderProps, CalendarNavDirection, CalendarProps, } from './Calendar.types';

package/lib/wip/Calendar/useCalendarGrid.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),a=require("./Calendar.utils.cjs.js"),o=(e,t)=>{const r=a.getWeekStart(t),n=a.getWeekdayLabels(t,r),d=s.useMemo(()=>a.getCalendarWeeks(e,r),[e,r]),u=s.useMemo(()=>a.getMonthLabel(e,t),[e,t]);return{weekStart:r,weekdayLabels:n,weeks:d,monthLabel:u}};exports.useCalendarGrid=o;

package/lib/wip/Calendar/useCalendarGrid.d.ts

@@ -0,0 +1,18 @@
+export interface CalendarGrid {
+    /** First day of the week, in `Date.getDay()` numbering (0 = Sunday). */
+    weekStart: number;
+    /** Abbreviated weekday names, ordered from `weekStart`. */
+    weekdayLabels: ReadonlyArray<string>;
+    /** Whole weeks covering the month, padded with adjacent-month days. */
+    weeks: Date[][];
+    /** Localized "Month Year" label. */
+    monthLabel: string;
+}
+/**
+ * Everything the grid renders, derived from the month and the locale.
+ *
+ * Pure: given the same month and locale it returns the same values, and the
+ * same references. `getWeekStart` and `getWeekdayLabels` are memoized in the
+ * utils layer, so only `weeks` needs a `useMemo` here.
+ */
+export declare const useCalendarGrid: (visibleMonth: Date, locale: string) => CalendarGrid;

package/lib/wip/Calendar/useCalendarGrid.es.js

@@ -0,0 +1,15 @@
+import { useMemo as a } from "react";
+import { getWeekStart as k, getWeekdayLabels as m, getCalendarWeeks as d, getMonthLabel as g } from "./Calendar.utils.es.js";
+const u = (e, t) => {
+  const r = k(t), s = m(t, r), n = a(
+    () => d(e, r),
+    [e, r]
+  ), o = a(
+    () => g(e, t),
+    [e, t]
+  );
+  return { weekStart: r, weekdayLabels: s, weeks: n, monthLabel: o };
+};
+export {
+  u as useCalendarGrid
+};

package/lib/wip/Calendar/useCalendarMonth.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=require("./Calendar.utils.cjs.js"),C=require("../../../chunks/dates.CVW08OQ2.js"),O=({today:r,onVisibleMonthChange:u})=>{const[c]=t.useState(()=>e.startOfDay(new Date)),a=C.isValidDate(r)?e.startOfDay(r).getTime():null,l=t.useMemo(()=>a===null?c:e.startOfDay(new Date(a)),[a,c]),[i,D]=t.useState(()=>e.startOfMonth(l)),[b,f]=t.useState(null),d=t.useRef(i),s=t.useRef(u);s.current=u;const n=t.useCallback(y=>{var M;const o=e.addMonths(d.current,y);d.current=o,D(o),f(y<0?"previous":"next"),(M=s.current)==null||M.call(s,o)},[]),v=t.useCallback(()=>n(-1),[n]),T=t.useCallback(()=>n(1),[n]);return{today:l,visibleMonth:i,navDirection:b,goToPreviousMonth:v,goToNextMonth:T}};exports.useCalendarMonth=O;

package/lib/wip/Calendar/useCalendarMonth.d.ts

@@ -0,0 +1,24 @@
+import { CalendarNavDirection } from './Calendar.types';
+export interface UseCalendarMonthOptions {
+    /** Consumer-supplied "today". Ignored when it isn't a valid `Date`. */
+    today?: Date;
+    onVisibleMonthChange?: (date: Date) => void;
+}
+export interface CalendarMonthState {
+    /** The current date, at local midnight. */
+    today: Date;
+    /** First day of the rendered month, at local midnight. */
+    visibleMonth: Date;
+    /** Direction of the last navigation; `null` until the user navigates. */
+    navDirection: CalendarNavDirection | null;
+    goToPreviousMonth: () => void;
+    goToNextMonth: () => void;
+}
+/**
+ * Owns which month is on screen, and how it got there.
+ *
+ * Split out of the root so the one piece of Calendar that holds mutable state
+ * can be read, tested, and later extended on its own — C-23 turns
+ * `visibleMonth` into a controlled prop here without the root noticing.
+ */
+export declare const useCalendarMonth: ({ today: todayProp, onVisibleMonthChange, }: UseCalendarMonthOptions) => CalendarMonthState;

package/lib/wip/Calendar/useCalendarMonth.es.js

@@ -0,0 +1,30 @@
+import { useState as s, useMemo as h, useRef as v, useCallback as r } from "react";
+import { startOfDay as c, startOfMonth as b, addMonths as w } from "./Calendar.utils.es.js";
+import { i as N } from "../../../chunks/dates.NqdbQ2fR.js";
+const R = ({
+  today: a,
+  onVisibleMonthChange: i
+}) => {
+  const [u] = s(() => c(/* @__PURE__ */ new Date())), o = N(a) ? c(a).getTime() : null, l = h(
+    () => o === null ? u : c(new Date(o)),
+    [o, u]
+  ), [m, D] = s(() => b(l)), [p, y] = s(
+    null
+  ), d = v(m), t = v(i);
+  t.current = i;
+  const e = r((M) => {
+    var f;
+    const n = w(d.current, M);
+    d.current = n, D(n), y(M < 0 ? "previous" : "next"), (f = t.current) == null || f.call(t, n);
+  }, []), T = r(() => e(-1), [e]), x = r(() => e(1), [e]);
+  return {
+    today: l,
+    visibleMonth: m,
+    navDirection: p,
+    goToPreviousMonth: T,
+    goToNextMonth: x
+  };
+};
+export {
+  R as useCalendarMonth
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-react",
-  "version": "2.74.0",
+  "version": "2.75.0",
   "description": "React component library for the Beam design system",
   "license": "MIT",
   "author": "Viasat",
@@ -60,12 +60,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@viasat/beam-fonts": "2.74.0",
-    "@viasat/beam-shared": "2.74.0",
-    "@viasat/beam-styles": "2.74.0",
-    "@viasat/beam-tokens": "2.74.0",
-    "@viasat/beam-icons": "2.74.0",
-    "@viasat/beam-react-claude-plugin": "2.74.0",
+    "@viasat/beam-fonts": "2.75.0",
+    "@viasat/beam-shared": "2.75.0",
+    "@viasat/beam-styles": "2.75.0",
+    "@viasat/beam-tokens": "2.75.0",
+    "@viasat/beam-icons": "2.75.0",
+    "@viasat/beam-react-claude-plugin": "2.75.0",
     "clsx": "^1.2.1",
     "@floating-ui/react": "^0.26.18",
     "@stepperize/react": "^5.1.5",

package/chunks/calendar.module.D09fpoRh.js

@@ -1 +0,0 @@
-var t=require("../assets/calendar.css");const e=require("./classNames.CEoAKlth.js"),s="calendar",{baseClassNamePrefix:d,classModifierPrefix:r,subElementClassPrefix:a}=e.getBEMClassNames(s),l={grid:`${a}grid`,day:`${a}day`,visuallyHidden:`${a}visually-hidden`,week:`${a}week`,date:`${a}date`,dateButton:`${a}date-button`},n={"bm-calendar":"bm-calendar","bm-calendar__visually-hidden":"bm-calendar__visually-hidden","bm-calendar__grid":"bm-calendar__grid","bm-calendar__day":"bm-calendar__day","bm-calendar__date":"bm-calendar__date","bm-calendar__week":"bm-calendar__week","bm-calendar__date-button":"bm-calendar__date-button"};exports.baseClassNamePrefix=d;exports.staticCalendarClassNames=l;exports.styles=n;