@skdx/react 0.26.0 → 0.28.0

package/dist/calendar/Calendar.js

@@ -1 +1 @@
-import*as u from"react";import{createSafeContext as Oe}from"../utils/createContext.js";import{announce as Be}from"../utils/liveAnnouncer.js";import{skdxPart as Ae}from"../utils/part.js";import{Primitive as Ee}from"../utils/primitive.js";import{useControllableState as te}from"../utils/useControllableState.js";var E=new Date(2024,0,7),V=new Map;function ee(e,t){let r=V.get(e);if(r)return r;let a=t();return V.set(e,a),a}function y(e){return e??new Intl.DateTimeFormat().resolvedOptions().locale}function We(e,t="long"){let r=y(e);return ee(`m|${r}|${t}`,()=>{let a=new Intl.DateTimeFormat(r,{month:t,timeZone:"UTC"});return Array.from({length:12},(n,o)=>a.format(Date.UTC(2024,o,15)))})}function H(e,t=0,r="short"){let a=y(e),n=ee(`w|${a}|${r}`,()=>{let s=new Intl.DateTimeFormat(a,{weekday:r});return Array.from({length:7},(d,l)=>s.format(new Date(E.getFullYear(),E.getMonth(),E.getDate()+l)))}),o=(t%7+7)%7;return n.slice(o).concat(n.slice(0,o))}function Y(e){try{let t=new Intl.Locale(y(e)),r=(t.getWeekInfo?.()??t.weekInfo)?.firstDay;if(typeof r=="number")return r%7}catch{}return 0}function $(e,t){return e.toLocaleDateString(y(t),{month:"long",year:"numeric"})}function M(e,t){return e.toLocaleDateString(y(t),{weekday:"long",year:"numeric",month:"long",day:"numeric"})}function Ie(){V.clear()}import{jsx as ne}from"react/jsx-runtime";function oe(e,t){return new Date(e,t+1,0).getDate()}function R(e){return new Date(e.getFullYear(),e.getMonth(),1)}function f(e,t){let r=e.getDate(),a=new Date(e.getFullYear(),e.getMonth(),1);a.setMonth(a.getMonth()+t);let n=oe(a.getFullYear(),a.getMonth());return a.setDate(Math.min(r,n)),a}function K(e,t){return f(e,t*12)}function D(e,t){let r=new Date(e);return r.setDate(r.getDate()+t),r}function h(e,t){return!e||!t?!1:e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function x(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()}function T(e,t){let r=new Date(e.getFullYear(),e.getMonth(),e.getDate()),a=(r.getDay()-t+7)%7;return r.setDate(r.getDate()-a),r}function ie(e,t){return D(T(e,t),6)}function C(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())}function se(e,t,r,a){let n=C(e).getTime();return!!(t&&n<C(t).getTime()||r&&n>C(r).getTime()||a?.(e))}function L(e){let t=e.getFullYear(),r=String(e.getMonth()+1).padStart(2,"0"),a=String(e.getDate()).padStart(2,"0");return`${t}-${r}-${a}`}function G(e,t){if(x(e,t))return e;let r=oe(t.getFullYear(),t.getMonth());return new Date(t.getFullYear(),t.getMonth(),Math.min(e.getDate(),r))}function de(e,t=0){let r=T(R(e),t),a=[],n=r;for(let o=0;o<6;o++){let s=[];for(let d=0;d<7;d++)s.push({date:n,outsideMonth:!x(n,e)}),n=D(n,1);a.push(s)}return a}function P(e){return e!==null&&!Array.isArray(e)&&!(e instanceof Date)}function ae(e){return e==="multiple"?[]:null}function le(e,t){return e===null?!1:Array.isArray(e)?e.some(r=>h(r,t)):P(e)?U(e,t)!==void 0:h(e,t)}function U(e,t){let r=C(t).getTime(),a=C(e.start).getTime();if(e.end===null)return r===a?"start":void 0;let n=C(e.end).getTime();if(!(r<a||r>n))return r===a?"start":r===n?"end":"middle"}function Ve(e,t,r){if(e==="single")return r;if(e==="multiple"){let n=Array.isArray(t)?t:[],o=n.filter(s=>!h(s,r));return o.length!==n.length?o:[...n,r].sort((s,d)=>s.getTime()-d.getTime())}let a=P(t)&&t.end===null?t:void 0;return a?C(r).getTime()<C(a.start).getTime()?{start:r,end:a.start}:{start:a.start,end:r}:{start:r,end:null}}function Ye(e,t){return P(e)?e.end===null?`${M(e.start,t)} selected as the range start. Select an end date.`:`Range selected, ${M(e.start,t)} to ${M(e.end,t)}.`:Array.isArray(e)?`${e.length} ${e.length===1?"date":"dates"} selected.`:""}var[$e,c]=Oe("Calendar");function Tt(){return c("useCalendarContext")}var _=u.createContext(null);function F(e){return u.useContext(_)?.gridMonth??e}function re(e){return e===null?null:Array.isArray(e)?e[0]??null:P(e)?e.start:e}var Ke=u.forwardRef(({selectionMode:e="single",value:t,defaultValue:r,onValueChange:a,month:n,defaultMonth:o,onMonthChange:s,numberOfMonths:d=1,locale:l,minDate:m,maxDate:i,weekStartsOn:b,disabled:A,isDateUnavailable:be,getSelectionAnnouncement:z,...J},ve)=>{let[w=null,Q]=te({prop:t,defaultProp:r??ae(e),onChange:p=>a?.(p??ae(e))}),X=R(o??re(w)??new Date),[v=X,j]=te({prop:n,defaultProp:X,onChange:s}),[Ne,Se]=u.useState(()=>re(w)??v),N=b??Y(l),He=u.useMemo(()=>{let p=H(l,N,"short"),g=H(l,N,"long");return p.map((S,Fe)=>({short:S,long:g[Fe]}))},[l,N]),Te=u.useMemo(()=>Array.from({length:Math.max(1,d)},(p,g)=>f(v,g)),[v,d]),Le=u.useCallback(p=>{let g=Ve(e,w,p);Q(g);let S=(z??Ye)(g,l);S&&Be(S)},[e,w,Q,l,z]),Ge=u.useCallback(p=>j(R(p)),[j]);return ne($e,{value:w,selectionMode:e,month:v,months:Te,focusedDate:Ne,weekStartsOn:N,locale:l,weekDayNames:He,minDate:m,maxDate:i,disabled:A,isDateUnavailable:be,onValueChange:Le,onMonthChange:Ge,setFocusedDate:Se,children:ne(Ee.div,{...J,...Ae("calendar","root",J.className),ref:ve})})});Ke.displayName="Calendar";import*as me from"react";import{skdxPart as Ue}from"../utils/part.js";import{Primitive as _e}from"../utils/primitive.js";import{jsx as qe}from"react/jsx-runtime";var ce=me.forwardRef((e,t)=>qe(_e.div,{...e,...Ue("calendar","header",e.className),ref:t}));ce.displayName="CalendarHeader";import*as ue from"react";import{skdxPart as Ze}from"../utils/part.js";import{Primitive as ze}from"../utils/primitive.js";import{jsx as Je}from"react/jsx-runtime";var fe=ue.forwardRef(({monthOffset:e=0,children:t,...r},a)=>{let n=c("CalendarHeading"),o=n.months[e]??n.month;return Je(ze.div,{...r,...Ze("calendar","heading",r.className),ref:a,children:t??$(o,n.locale)})});fe.displayName="CalendarHeading";import*as pe from"react";import{skdxPart as Qe}from"../utils/part.js";import{composeEventHandlers as Xe,Primitive as je}from"../utils/primitive.js";import{jsx as et}from"react/jsx-runtime";var Ce=pe.forwardRef((e,t)=>{let r=c("CalendarPreviousButton");return et(je.button,{type:"button","aria-label":"Previous month",...e,...Qe("calendar","previous-button",e.className),ref:t,onClick:Xe(e.onClick,()=>{let a=f(r.month,-1);r.onMonthChange(a),r.setFocusedDate(G(r.focusedDate,a))})})});Ce.displayName="CalendarPreviousButton";import*as De from"react";import{skdxPart as tt}from"../utils/part.js";import{composeEventHandlers as at,Primitive as rt}from"../utils/primitive.js";import{jsx as nt}from"react/jsx-runtime";var ge=De.forwardRef((e,t)=>{let r=c("CalendarNextButton");return nt(rt.button,{type:"button","aria-label":"Next month",...e,...tt("calendar","next-button",e.className),ref:t,onClick:at(e.onClick,()=>{let a=f(r.month,1);r.onMonthChange(a),r.setFocusedDate(G(r.focusedDate,a))})})});ge.displayName="CalendarNextButton";import*as W from"react";import{directionalKey as ot,useDirection as it}from"../utils/direction.js";import{skdxPart as st}from"../utils/part.js";import{composeEventHandlers as dt,Primitive as lt}from"../utils/primitive.js";import{jsx as ye}from"react/jsx-runtime";var he=W.forwardRef(({monthOffset:e=0,...t},r)=>{let a=c("CalendarGrid"),n=it(),o=a.months[e]??a.month,s=W.useMemo(()=>({gridMonth:o}),[o]),d=m=>{a.months.some(i=>x(m,i))||a.onMonthChange(R(m)),a.setFocusedDate(m),requestAnimationFrame(()=>{let i=L(m);document.querySelector(`[data-skdx-calendar-cell="${i}"]`)?.focus()})},l=m=>{let i;switch(ot(m.key,m.currentTarget,n)){case"ArrowLeft":i=D(a.focusedDate,-1);break;case"ArrowRight":i=D(a.focusedDate,1);break;case"ArrowUp":i=D(a.focusedDate,-7);break;case"ArrowDown":i=D(a.focusedDate,7);break;case"Home":i=T(a.focusedDate,a.weekStartsOn);break;case"End":i=ie(a.focusedDate,a.weekStartsOn);break;case"PageUp":i=m.shiftKey?K(a.focusedDate,-1):f(a.focusedDate,-1);break;case"PageDown":i=m.shiftKey?K(a.focusedDate,1):f(a.focusedDate,1);break;default:return}m.preventDefault(),d(i)};return ye(_.Provider,{value:s,children:ye(lt.div,{role:"grid","aria-multiselectable":a.selectionMode!=="single",...t,...st("calendar","grid",t.className),ref:r,onKeyDown:dt(t.onKeyDown,l)})})});he.displayName="CalendarGrid";import*as ke from"react";import{skdxPart as Dt}from"../utils/part.js";import{Primitive as gt}from"../utils/primitive.js";import*as xe from"react";import{skdxPart as mt}from"../utils/part.js";import{Primitive as ct}from"../utils/primitive.js";import{jsx as ut}from"react/jsx-runtime";var k=xe.forwardRef((e,t)=>ut(ct.div,{role:"row",...e,...mt("calendar","row",e.className),ref:t}));k.displayName="CalendarRow";import*as Pe from"react";import{skdxPart as ft}from"../utils/part.js";import{Primitive as pt}from"../utils/primitive.js";import{jsx as Ct}from"react/jsx-runtime";var I=Pe.forwardRef((e,t)=>Ct(pt.div,{role:"columnheader",...e,...ft("calendar","week-day",e.className),ref:t}));I.displayName="CalendarWeekDay";import{jsx as q}from"react/jsx-runtime";var we=ke.forwardRef(({children:e,...t},r)=>{let a=c("CalendarGridHead");return q(gt.div,{role:"rowgroup",...t,...Dt("calendar","grid-head",t.className),ref:r,children:e??q(k,{children:a.weekDayNames.map(n=>q(I,{"aria-label":n.long,children:n.short},n.long))})})});we.displayName="CalendarGridHead";import*as B from"react";import{skdxPart as kt}from"../utils/part.js";import{Primitive as wt}from"../utils/primitive.js";import*as Me from"react";import{skdxPart as yt}from"../utils/part.js";import{composeEventHandlers as ht,Primitive as xt}from"../utils/primitive.js";import{jsx as Pt}from"react/jsx-runtime";var O=Me.forwardRef(({date:e,...t},r)=>{let a=c("CalendarCell"),n=F(a.month),o=L(e),s=!x(e,n),d=s||se(e,a.minDate,a.maxDate,a.disabled),l=!d&&(a.isDateUnavailable?.(o)??!1),m=le(a.value,e),i=P(a.value)?U(a.value,e):void 0,b=h(e,new Date),A=h(e,a.focusedDate);return Pt(xt.button,{type:"button",role:"gridcell","aria-selected":m,"aria-disabled":l||void 0,"data-skdx-calendar-cell":o,"data-state":m?"selected":void 0,"data-today":b?"":void 0,"data-outside-month":s?"":void 0,"data-disabled":d?"":void 0,"data-unavailable":l?"":void 0,"data-range-start":i==="start"?"":void 0,"data-range-middle":i==="middle"?"":void 0,"data-range-end":i==="end"?"":void 0,tabIndex:A?0:-1,disabled:d,...t,...yt("calendar","cell",t.className),ref:r,onClick:ht(t.onClick,()=>{if(!d){if(l){a.setFocusedDate(e);return}a.onValueChange(e),a.setFocusedDate(e)}}),children:t.children??e.getDate()})});O.displayName="CalendarCell";import{jsx as Z}from"react/jsx-runtime";var Re=B.forwardRef(({children:e,...t},r)=>{let a=c("CalendarGridBody"),n=F(a.month),o=B.useMemo(()=>de(n,a.weekStartsOn),[n,a.weekStartsOn]);return Z(wt.div,{role:"rowgroup",...t,...kt("calendar","grid-body",t.className),ref:r,children:e??o.map(s=>Z(k,{children:s.map(({date:d})=>Z(O,{date:d},d.toISOString()))},s[0].date.toISOString()))})});Re.displayName="CalendarGridBody";export{Ke as Calendar,O as CalendarCell,he as CalendarGrid,Re as CalendarGridBody,_ as CalendarGridContext,we as CalendarGridHead,ce as CalendarHeader,fe as CalendarHeading,ge as CalendarNextButton,Ce as CalendarPreviousButton,$e as CalendarProvider,k as CalendarRow,I as CalendarWeekDay,D as addDays,f as addMonths,K as addYears,re as anchorOf,G as clampToMonth,Ie as clearLocaleNameCache,ae as emptySelection,ie as endOfWeek,M as formatDateLabel,$ as formatMonthLabel,oe as getDaysInMonth,Y as getLocaleWeekStartsOn,We as getMonthNames,de as getVisibleWeeks,H as getWeekDayNames,se as isDateDisabled,P as isDateRange,le as isDateSelected,h as isSameDay,x as isSameMonth,Ve as nextSelection,U as rangePositionOf,y as resolveLocale,Ye as selectionAnnouncement,R as startOfMonth,T as startOfWeek,C as stripTime,L as toISODateString,Tt as useCalendarContext,c as useCalendarContextInternal,F as useCalendarGridMonth};
+import*as d from"react";import{useComposedRefs as tn}from"../utils/composeRefs.js";import{createSafeContext as an}from"../utils/createContext.js";import{toCalendarValue as Ot,toDate as K}from"../utils/dateValue.js";import{isDevMode as nn}from"../utils/is-dev-mode.js";import{announce as at}from"../utils/liveAnnouncer.js";import{skdxPart as rn}from"../utils/part.js";import{Primitive as on}from"../utils/primitive.js";import{useControllableState as we}from"../utils/useControllableState.js";import*as Wt from"react";import*as X from"react";import{directionalKey as da,useDirection as la}from"../utils/direction.js";import{skdxPart as ma}from"../utils/part.js";import{composeEventHandlers as ca,Primitive as ua}from"../utils/primitive.js";var Te=new Date(2024,0,7),Se=new Map;function ht(e,t){let n=Se.get(e);if(n)return n;let a=t();return Se.set(e,a),a}function F(e){return e??new Intl.DateTimeFormat().resolvedOptions().locale}function Le(e,t="long"){let n=F(e);return ht(`m|${n}|${t}`,()=>{let a=new Intl.DateTimeFormat(n,{month:t,timeZone:"UTC"});return Array.from({length:12},(r,o)=>a.format(Date.UTC(2024,o,15)))})}function ce(e,t=0,n="short"){let a=F(e),r=ht(`w|${a}|${n}`,()=>{let s=new Intl.DateTimeFormat(a,{weekday:n});return Array.from({length:7},(i,l)=>s.format(new Date(Te.getFullYear(),Te.getMonth(),Te.getDate()+l)))}),o=(t%7+7)%7;return r.slice(o).concat(r.slice(0,o))}function He(e){try{let t=new Intl.Locale(F(e)),n=(t.getWeekInfo?.()??t.weekInfo)?.firstDay;if(typeof n=="number")return n%7}catch{}return 0}function V(e,t){return e.toLocaleDateString(F(t),{month:"long",year:"numeric"})}function E(e,t){return new Intl.NumberFormat(F(t),{useGrouping:!1}).format(e)}function Ee(e,t,n){return`${E(e,n)} \u2013 ${E(t,n)}`}function O(e,t){return e.toLocaleDateString(F(t),{weekday:"long",year:"numeric",month:"long",day:"numeric"})}function sa(){Se.clear()}import{jsx as pt}from"react/jsx-runtime";var Ae=X.forwardRef(({monthOffset:e=0,...t},n)=>{let a=f("CalendarGrid"),r=la(),o=a.months[e]??a.month,s=X.useMemo(()=>({gridMonth:o}),[o]),i=X.useContext(re),l=h=>{let c=Ye(h,a.minDate,a.maxDate);a.months.some(y=>T(c,y))||a.onMonthChange(Y(c)),a.setFocusedDate(c),requestAnimationFrame(()=>{let y=fe(c);(i?.current??document).querySelector(`[data-skdx-calendar-cell="${y}"]:not([disabled])`)?.focus()})},D=h=>{let c;switch(da(h.key,h.currentTarget,r)){case"ArrowLeft":c=A(a.focusedDate,-1);break;case"ArrowRight":c=A(a.focusedDate,1);break;case"ArrowUp":c=A(a.focusedDate,-7);break;case"ArrowDown":c=A(a.focusedDate,7);break;case"Home":c=ue(a.focusedDate,a.weekStartsOn);break;case"End":c=Dt(a.focusedDate,a.weekStartsOn);break;case"PageUp":c=h.shiftKey?Ve(a.focusedDate,-1):k(a.focusedDate,-1);break;case"PageDown":c=h.shiftKey?Ve(a.focusedDate,1):k(a.focusedDate,1);break;default:return}h.preventDefault(),l(c)};return a.view!=="day"?null:pt(Ge.Provider,{value:s,children:pt(ua.div,{role:"grid","aria-label":t["aria-label"]||t["aria-labelledby"]?void 0:V(o,a.locale),"aria-multiselectable":a.selectionMode!=="single","aria-readonly":a.readOnly||void 0,"aria-disabled":a.disabled||void 0,...t,...ma("calendar","grid",t.className),ref:n,onKeyDown:ca(t.onKeyDown,D)})})});Ae.displayName="CalendarGrid";import*as De from"react";import{skdxPart as ka}from"../utils/part.js";import{Primitive as Ma}from"../utils/primitive.js";import*as ge from"react";import{toDate as fa}from"../utils/dateValue.js";import{skdxPart as ga}from"../utils/part.js";import{composeEventHandlers as ha,Primitive as pa}from"../utils/primitive.js";import{jsx as Da}from"react/jsx-runtime";var We=ge.forwardRef(({date:e,...t},n)=>{let a=f("CalendarCell"),r=he(a.month),o=ge.useMemo(()=>fa(e,"date")??r,[e,r]),s=fe(o),i=!T(o,r),l=a.disabled||i&&!a.outsideDaySelectable||Ct(o,a.minDate,a.maxDate,a.isDateDisabled),D=!l&&(a.isDateUnavailable?.(o)??!1),h=yt(a.value,o),c=j(a.value)?Fe(a.value,o):void 0,y=I(o,a.today),M=I(o,a.focusedDate);return Da(pa.button,{type:"button",role:"gridcell","aria-selected":h,"aria-disabled":D||void 0,"aria-current":y?"date":void 0,"aria-label":O(o,a.locale),"data-skdx-calendar-cell":s,"data-state":h?"selected":void 0,"data-today":y?"":void 0,"data-outside-month":i?"":void 0,"data-disabled":l?"":void 0,"data-unavailable":D?"":void 0,"data-range-start":c==="start"?"":void 0,"data-range-middle":c==="middle"?"":void 0,"data-range-end":c==="end"?"":void 0,tabIndex:M?0:-1,disabled:l,...t,...ga("calendar","cell",t.className),ref:n,onClick:ha(t.onClick,()=>{if(!l){if(D){a.setFocusedDate(o);return}a.onValueChange(o),a.setFocusedDate(o),i&&!a.months.some(_=>T(o,_))&&a.onMonthChange(o)}}),children:t.children??o.getDate()})});We.displayName="CalendarCell";import*as bt from"react";import{skdxPart as Ca}from"../utils/part.js";import{Primitive as ya}from"../utils/primitive.js";import{jsx as ba}from"react/jsx-runtime";var oe=bt.forwardRef((e,t)=>ba(ya.div,{role:"row",...e,...Ca("calendar","row",e.className),ref:t}));oe.displayName="CalendarRow";import*as pe from"react";import{toDate as wa}from"../utils/dateValue.js";import{skdxPart as xa}from"../utils/part.js";import{Primitive as va}from"../utils/primitive.js";import{jsx as Ra}from"react/jsx-runtime";var Oe=pe.forwardRef(({date:e,children:t,...n},a)=>{let r=f("CalendarWeekNumber"),o=pe.useMemo(()=>wa(e,"date")??r.month,[e,r.month]),s=wt(o);return Ra(va.div,{role:"rowheader","aria-label":`Week ${s}`,...n,...xa("calendar","week-number",n.className),ref:a,children:t??s})});Oe.displayName="CalendarWeekNumber";import{jsx as Ie,jsxs as Pa}from"react/jsx-runtime";var Be=De.forwardRef(({children:e,...t},n)=>{let a=f("CalendarGridBody"),r=he(a.month),o=De.useMemo(()=>xt(r,a.weekStartsOn),[r,a.weekStartsOn]);return Ie(Ma.div,{role:"rowgroup",...t,...ka("calendar","grid-body",t.className),ref:n,children:e??o.map(s=>Pa(oe,{children:[a.weekNumbers?Ie(Oe,{date:s[0].date}):null,s.map(({date:i})=>Ie(We,{date:i},i.toISOString()))]},s[0].date.toISOString()))})});Be.displayName="CalendarGridBody";import*as kt from"react";import{skdxPart as Va}from"../utils/part.js";import{Primitive as Aa}from"../utils/primitive.js";import*as vt from"react";import{skdxPart as Na}from"../utils/part.js";import{Primitive as Ta}from"../utils/primitive.js";import{jsx as Sa}from"react/jsx-runtime";var Ue=vt.forwardRef((e,t)=>Sa(Ta.div,{role:"columnheader",...e,...Na("calendar","week-day",e.className),ref:t}));Ue.displayName="CalendarWeekDay";import*as Rt from"react";import{skdxPart as La}from"../utils/part.js";import{Primitive as Ha}from"../utils/primitive.js";import{jsx as Ea}from"react/jsx-runtime";var $e=Rt.forwardRef((e,t)=>Ea(Ha.div,{role:"columnheader","aria-label":"Week number",...e,...La("calendar","week-number-header",e.className),ref:t}));$e.displayName="CalendarWeekNumberHeader";import{jsx as Ke,jsxs as Ya}from"react/jsx-runtime";var _e=kt.forwardRef(({children:e,...t},n)=>{let a=f("CalendarGridHead");return Ke(Aa.div,{role:"rowgroup",...t,...Va("calendar","grid-head",t.className),ref:n,children:e??Ya(oe,{children:[a.weekNumbers?Ke($e,{}):null,a.weekDayNames.map(r=>Ke(Ue,{"aria-label":r.long,children:r.short},r.long))]})})});_e.displayName="CalendarGridHead";import*as Mt from"react";import{skdxPart as Ga}from"../utils/part.js";import{Primitive as Wa}from"../utils/primitive.js";import{jsx as Fa}from"react/jsx-runtime";var qe=Mt.forwardRef((e,t)=>Fa(Wa.div,{...e,...Ga("calendar","header",e.className),ref:t}));qe.displayName="CalendarHeader";import*as St from"react";import{skdxPart as Pt}from"../utils/part.js";import{composeEventHandlers as Oa,Primitive as Nt}from"../utils/primitive.js";import{jsx as Tt}from"react/jsx-runtime";var Ce=St.forwardRef(({monthOffset:e=0,children:t,...n},a)=>{let r=f("CalendarHeading"),o=r.months[e]??r.month,s=r.view==="day"?o:r.focusedDate,i=G(s,r.view,r.locale),l=R[R.indexOf(r.view)+1];return l!==void 0&&R.indexOf(r.view)<R.indexOf(r.maxView)?Tt(Nt.button,{type:"button",...n,...Pt("calendar","heading",n.className),ref:a,onClick:Oa(n.onClick,()=>r.setView(l)),children:t??i}):Tt(Nt.div,{...n,...Pt("calendar","heading",n.className),ref:a,children:t??i})});Ce.displayName="CalendarHeading";import*as Lt from"react";import{skdxPart as Ia}from"../utils/part.js";import{composeEventHandlers as Ba,Primitive as Ua}from"../utils/primitive.js";import{jsx as Ka}from"react/jsx-runtime";var $a={day:"Next month",month:"Next year",year:"Next 20 years"},ze=Lt.forwardRef((e,t)=>{let n=f("CalendarNextButton");return Ka(Ua.button,{type:"button","aria-label":$a[n.view],...e,...Ia("calendar","next-button",e.className),ref:t,onClick:Ba(e.onClick,()=>n.pageMonths(1))})});ze.displayName="CalendarNextButton";import*as Ht from"react";import{skdxPart as _a}from"../utils/part.js";import{composeEventHandlers as qa,Primitive as za}from"../utils/primitive.js";import{jsx as Ja}from"react/jsx-runtime";var Za={day:"Previous month",month:"Previous year",year:"Previous 20 years"},Ze=Ht.forwardRef((e,t)=>{let n=f("CalendarPreviousButton");return Ja(za.button,{type:"button","aria-label":Za[n.view],...e,..._a("calendar","previous-button",e.className),ref:t,onClick:qa(e.onClick,()=>n.pageMonths(-1))})});Ze.displayName="CalendarPreviousButton";import*as U from"react";import{directionalKey as Qa,useDirection as Xa}from"../utils/direction.js";import{announce as ja}from"../utils/liveAnnouncer.js";import{skdxPart as Qe}from"../utils/part.js";import{composeEventHandlers as Et,Primitive as ie}from"../utils/primitive.js";import{jsx as B}from"react/jsx-runtime";function Je(){return 4}function Vt(e,t){let n=f(t),a=U.useContext(re),r=Xa(),o=e,s=e==="month"?1:12,i=e==="month"?12:ee,l=n.focusedDate,D=e==="month"?l.getMonth():l.getFullYear()-tt(l.getFullYear()),{locale:h,minDate:c,maxDate:y,isDateDisabled:M,today:_,value:q}=n,b=$(q),se=U.useMemo(()=>{let x=Le(h,"short"),u=l.getFullYear();return Array.from({length:i},(te,C)=>{let z=e==="month"?et(l,new Date(u,C,1)):k(l,(C-D)*s),w=e==="month"?u:z.getFullYear(),ve=e==="month"?new Date(w,C,1):new Date(w,0,1),Re=e==="month"?new Date(w,C,ye(w,C)):new Date(w,11,31),ae=Z=>Z!==null&&Z.getFullYear()===w&&(e==="year"||Z.getMonth()===C);return{date:z,key:e==="month"?`${w}-${C}`:String(w),text:e==="month"?x[C]:E(w,h),label:e==="month"?V(new Date(w,C,1),h):E(w,h),refused:!Yt(ve,Re,c,y,M),selected:ae(b),today:ae(_)}})},[e,i,s,l,D,h,c,y,M,b,_]),de=x=>{let u=k(l,x*s),te=G(l,o,h),C=G(u,o,h);n.setFocusedDate(u),C!==te&&ja(C),requestAnimationFrame(()=>{let z=e==="month"?`${u.getFullYear()}-${u.getMonth()}`:String(u.getFullYear());(a?.current??document).querySelector(`[data-skdx-calendar-view-cell="${z}"]`)?.focus({preventScroll:!0})})};return{context:n,cells:se,focusedIndex:D,handleKeyDown:x=>{let u;switch(Qa(x.key,x.currentTarget,r)){case"ArrowLeft":u=-1;break;case"ArrowRight":u=1;break;case"ArrowUp":u=-Je();break;case"ArrowDown":u=Je();break;case"Home":u=-D;break;case"End":u=i-1-D;break;case"PageUp":u=-i*(x.shiftKey?10:1);break;case"PageDown":u=i*(x.shiftKey?10:1);break;default:return}x.preventDefault(),u!==0&&de(u)}}}function At({cells:e,focusedIndex:t,navigate:n}){let a=[],r=Je();for(let o=0;o<e.length;o+=r)a.push(e.slice(o,o+r));return B(ie.div,{role:"rowgroup",children:a.map((o,s)=>B(ie.div,{role:"row",children:o.map((i,l)=>{let D=s*r+l;return B(ie.button,{type:"button",role:"gridcell","aria-disabled":i.refused||void 0,"aria-selected":i.selected,"aria-current":i.today?"date":void 0,"aria-label":i.label,"data-skdx-calendar-view-cell":i.key,"data-state":i.selected?"selected":void 0,"data-today":i.today?"":void 0,"data-disabled":i.refused?"":void 0,tabIndex:D===t?0:-1,...Qe("calendar","view-cell"),onClick:()=>{i.refused||n(i.date)},children:i.text},i.key)})},o[0].key))})}var Xe=U.forwardRef(({children:e,...t},n)=>{let{context:a,cells:r,focusedIndex:o,handleKeyDown:s}=Vt("month","CalendarMonthGrid");return a.view!=="month"?null:B(ie.div,{role:"grid","aria-label":t["aria-label"]||t["aria-labelledby"]?void 0:G(a.focusedDate,"month",a.locale),"aria-readonly":a.readOnly||void 0,"aria-disabled":a.disabled||void 0,...t,...Qe("calendar","month-grid",t.className),ref:n,onKeyDown:Et(t.onKeyDown,s),children:e??B(At,{cells:r,focusedIndex:o,navigate:a.navigateToUnit})})});Xe.displayName="CalendarMonthGrid";var je=U.forwardRef(({children:e,...t},n)=>{let{context:a,cells:r,focusedIndex:o,handleKeyDown:s}=Vt("year","CalendarYearGrid");return a.view!=="year"?null:B(ie.div,{role:"grid","aria-label":t["aria-label"]||t["aria-labelledby"]?void 0:G(a.focusedDate,"year",a.locale),"aria-readonly":a.readOnly||void 0,"aria-disabled":a.disabled||void 0,...t,...Qe("calendar","year-grid",t.className),ref:n,onKeyDown:Et(t.onKeyDown,s),children:e??B(At,{cells:r,focusedIndex:o,navigate:a.navigateToUnit})})});je.displayName="CalendarYearGrid";import{Fragment as en,jsx as v,jsxs as be}from"react/jsx-runtime";var Gt=({dir:e})=>v("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false",children:v("path",{d:e==="left"?"M10 3 5 8l5 5":"M6 3l5 5-5 5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),Ft=()=>{let{months:e}=f("CalendarAnatomy"),t=e.length>1;return be(en,{children:[be(qe,{children:[v(Ze,{children:v(Gt,{dir:"left"})}),t?null:v(Ce,{}),v(ze,{children:v(Gt,{dir:"right"})})]}),e.map((n,a)=>be(Wt.Fragment,{children:[t?v(Ce,{monthOffset:a}):null,be(Ae,{monthOffset:a,children:[v(_e,{}),v(Be,{})]})]},n.toISOString())),v(Xe,{}),v(je,{})]})};import{jsx as xe}from"react/jsx-runtime";function ye(e,t){return new Date(e,t+1,0).getDate()}function Y(e){return new Date(e.getFullYear(),e.getMonth(),1)}function k(e,t){let n=e.getDate(),a=new Date(e.getFullYear(),e.getMonth(),1);a.setMonth(a.getMonth()+t);let r=ye(a.getFullYear(),a.getMonth());return a.setDate(Math.min(n,r)),a}function Ve(e,t){return k(e,t*12)}function A(e,t){let n=new Date(e);return n.setDate(n.getDate()+t),n}function I(e,t){return!e||!t?!1:e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}function T(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()}function ue(e,t){let n=new Date(e.getFullYear(),e.getMonth(),e.getDate()),a=(n.getDay()-t+7)%7;return n.setDate(n.getDate()-a),n}function Dt(e,t){return A(ue(e,t),6)}function g(e){return new Date(e.getFullYear(),e.getMonth(),e.getDate())}function Ct(e,t,n,a){let r=g(e).getTime();return!!(t&&r<g(t).getTime()||n&&r>g(n).getTime()||a?.(e))}function Ye(e,t,n){return t&&g(e).getTime()<g(t).getTime()?t:n&&g(e).getTime()>g(n).getTime()?n:e}function sn(e,t){return{disabled:e??!1,isDateDisabled:t}}var nt=!1;function ao(){nt=!1}function dn(e,t){!e||nt||!(e.getUTCHours()===0&&e.getUTCMinutes()===0&&e.getUTCSeconds()===0&&e.getUTCMilliseconds()===0)||e.getDate()===e.getUTCDate()&&e.getMonth()===e.getUTCMonth()||(nt=!0,nn()&&console.warn(`[skdx] Calendar: \`${t}\` was given ${e.toISOString()}, which is midnight UTC and therefore ${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")} in this time zone \u2014 a different day from the one the string says. A selection here is a local wall-clock date, never an instant: build it as \`new Date(year, monthIndex, day)\` rather than \`new Date('YYYY-MM-DD')\`, which the platform reads as UTC.`))}function wt(e){let t=new Date(e.getFullYear(),e.getMonth(),e.getDate());t.setDate(t.getDate()-(t.getDay()+6)%7+3);let n=new Date(t.getFullYear(),0,4);return n.setDate(n.getDate()-(n.getDay()+6)%7+3),1+Math.round((t.getTime()-n.getTime())/(10080*60*1e3))}function fe(e){let t=e.getFullYear(),n=String(e.getMonth()+1).padStart(2,"0"),a=String(e.getDate()).padStart(2,"0");return`${t}-${n}-${a}`}function et(e,t){if(T(e,t))return e;let n=ye(t.getFullYear(),t.getMonth());return new Date(t.getFullYear(),t.getMonth(),Math.min(e.getDate(),n))}var R=["day","month","year"],ee=20;function It(e,t,n){let a=R.indexOf(t),r=Math.max(a,R.indexOf(n));return R[Math.min(Math.max(R.indexOf(e),a),r)]}function tt(e){return Math.floor(e/ee)*ee}function Yt(e,t,n,a,r){let o=n&&g(n)>g(e)?g(n):g(e),s=a&&g(a)<g(t)?g(a):g(t);if(o.getTime()>s.getTime())return!1;if(!r)return!0;for(let i=o;i.getTime()<=s.getTime();i=A(i,1))if(!r(i))return!0;return!1}function G(e,t,n){if(t==="day")return V(e,n);if(t==="month")return E(e.getFullYear(),n);let a=tt(e.getFullYear());return Ee(a,a+ee-1,n)}function xt(e,t=0){let n=ue(Y(e),t),a=[],r=n;for(let o=0;o<6;o++){let s=[];for(let i=0;i<7;i++)s.push({date:r,outsideMonth:!T(r,e)}),r=A(r,1);a.push(s)}return a}function j(e){return e!==null&&!Array.isArray(e)&&!(e instanceof Date)}function Bt(e){return e==="multiple"?[]:null}function yt(e,t){return e===null?!1:Array.isArray(e)?e.some(n=>I(n,t)):j(e)?Fe(e,t)!==void 0:I(e,t)}function Fe(e,t){let n=g(t).getTime(),a=g(e.start).getTime();if(e.end===null)return n===a?"start":void 0;let r=g(e.end).getTime();if(!(n<a||n>r))return n===a?"start":n===r?"end":"middle"}function ln(e,t,n){if(e==="single")return n;if(e==="multiple"){let r=Array.isArray(t)?t:[],o=r.filter(s=>!I(s,n));return o.length!==r.length?o:[...r,n].sort((s,i)=>s.getTime()-i.getTime())}let a=j(t)&&t.end===null?t:void 0;return a?g(n).getTime()<g(a.start).getTime()?{start:n,end:a.start}:{start:a.start,end:n}:{start:n,end:null}}function mn(e,t){return j(e)?e.end===null?`${O(e.start,t)} selected as the range start. Select an end date.`:`Range selected, ${O(e.start,t)} to ${O(e.end,t)}.`:Array.isArray(e)?`${e.length} ${e.length===1?"date":"dates"} selected.`:""}var[cn,f]=an("Calendar");function no(){return f("useCalendarContext")}var Ge=d.createContext(null);function he(e){return d.useContext(Ge)?.gridMonth??e}var re=d.createContext(null);function $(e){return e===null?null:Array.isArray(e)?e[0]??null:j(e)?e.start:e}var un=d.forwardRef(({selectionMode:e="single",value:t,defaultValue:n,onValueChange:a,month:r,defaultMonth:o,onMonthChange:s,focusedDate:i,defaultFocusedDate:l,onFocusChange:D,view:h,defaultView:c="day",minView:y="day",maxView:M="year",onViewChange:_,numberOfMonths:q=1,locale:b,minDate:se,maxDate:de,weekStartsOn:rt,pageBehavior:x="visible",weekNumbers:u=!1,today:te,readOnly:C=!1,disabled:z,outsideDaySelectable:w=!1,isDateDisabled:ve,isDateUnavailable:Re,getSelectionAnnouncement:ae,getMonthAnnouncement:Z,children:Ut,...ot},$t)=>{let{disabled:ke,isDateDisabled:Kt}=sn(z,ve),it=d.useRef(null),_t=tn($t,it),qt=d.useMemo(()=>Ot(t,e,"value"),[t,e]),zt=d.useMemo(()=>Ot(n,e,"defaultValue"),[n,e]),Zt=d.useMemo(()=>K(r,"month")??void 0,[r]),Jt=d.useMemo(()=>K(o,"defaultMonth")??void 0,[o]),Me=d.useMemo(()=>K(se,"minDate")??void 0,[se]),Pe=d.useMemo(()=>K(de,"maxDate")??void 0,[de]),Qt=d.useMemo(()=>K(te,"today")??void 0,[te]),[P=null,st]=we({prop:qt,defaultProp:zt??Bt(e),onChange:m=>a?.(m??Bt(e))}),[Xt]=d.useState(()=>new Date),dt=Qt??Xt;dn($(P),"value");let lt=Y(Jt??$(P)??dt),[W=lt,S]=we({prop:Zt,defaultProp:lt,onChange:s}),jt=d.useMemo(()=>K(i,"focusedDate")??void 0,[i]),mt=d.useMemo(()=>K(l,"defaultFocusedDate")??void 0,[l]),[J=mt??$(P)??W,ct]=we({prop:jt,defaultProp:mt??$(P)??W,onChange:D}),L=d.useCallback(m=>{let p=Ye(m,Me,Pe);I(p,J)||ct(p)},[J,ct,Me,Pe]),[ea=c,ut]=we({prop:h,defaultProp:c,onChange:_}),N=It(ea,y,M),Ne=d.useCallback(m=>{let p=It(m,y,M);p!==N&&ut(p)},[N,y,M,ut]),le=rt??He(b),ta=d.useMemo(()=>{let m=ce(b,le,"short"),p=ce(b,le,"long");return m.map((H,me)=>({short:H,long:p[me]}))},[b,le]),ne=d.useMemo(()=>Array.from({length:Math.max(1,q)},(m,p)=>k(W,p)),[W,q]),aa=d.useCallback(m=>{if(C||ke)return;let p=ln(e,P,m);st(p);let H=(ae??mn)(p,b);H&&at(H)},[C,ke,e,P,st,b,ae]),na=d.useCallback(m=>S(Y(m)),[S]),ra=d.useCallback(m=>{if(N!=="day"){let ia=N==="month"?12:12*ee,gt=k(J,m*ia);L(gt),at(G(gt,N,b));return}let p=x==="single"?1:Math.max(1,q),H=k(W,m*p);S(Y(H)),L(et(J,H));let me=(Z??V)(H,b);me&&at(me)},[N,x,q,W,S,J,L,Z,b]),oa=d.useCallback(m=>{L(m),ne.some(p=>T(m,p))||S(Y(m)),Ne(R[R.indexOf(N)-1]??"day")},[L,ne,S,Ne,N]),Q=d.useMemo(()=>{let m=$(P);return m?g(m).getTime():null},[P]),ft=d.useRef(Q);return d.useEffect(()=>{if(Q===null||Q===ft.current)return;ft.current=Q;let m=new Date(Q);ne.some(p=>T(m,p))||(L(m),S(Y(m)))},[Q,ne,S,L]),xe(cn,{value:P,selectionMode:e,month:W,months:ne,focusedDate:J,today:dt,weekStartsOn:le,weekNumbers:u,locale:b,weekDayNames:ta,minDate:Me,maxDate:Pe,readOnly:C,disabled:ke,outsideDaySelectable:w,isDateDisabled:Kt,isDateUnavailable:Re,onValueChange:aa,onMonthChange:na,pageMonths:ra,setFocusedDate:L,view:N,minView:y,maxView:M,setView:Ne,navigateToUnit:oa,children:xe(on.div,{...ot,...rn("calendar","root",ot.className),ref:_t,children:xe(re.Provider,{value:it,children:Ut??xe(Ft,{})})})})});un.displayName="Calendar";export{R as CALENDAR_VIEWS,ee as CALENDAR_YEAR_PAGE,un as Calendar,We as CalendarCell,Ae as CalendarGrid,Be as CalendarGridBody,Ge as CalendarGridContext,_e as CalendarGridHead,qe as CalendarHeader,Ce as CalendarHeading,Xe as CalendarMonthGrid,ze as CalendarNextButton,Ze as CalendarPreviousButton,cn as CalendarProvider,re as CalendarRootContext,oe as CalendarRow,Ue as CalendarWeekDay,Oe as CalendarWeekNumber,$e as CalendarWeekNumberHeader,je as CalendarYearGrid,A as addDays,k as addMonths,Ve as addYears,$ as anchorOf,Ye as clampToDateRange,et as clampToMonth,It as clampView,sa as clearLocaleNameCache,Bt as emptySelection,Dt as endOfWeek,O as formatDateLabel,V as formatMonthLabel,G as formatViewPageLabel,E as formatYear,Ee as formatYearRange,ye as getDaysInMonth,wt as getISOWeek,He as getLocaleWeekStartsOn,Le as getMonthNames,xt as getVisibleWeeks,ce as getWeekDayNames,Yt as hasAvailableDate,Ct as isDateDisabled,j as isDateRange,yt as isDateSelected,I as isSameDay,T as isSameMonth,ln as nextSelection,Fe as rangePositionOf,ao as resetInstantDateWarning,sn as resolveCalendarDisabled,F as resolveLocale,mn as selectionAnnouncement,Y as startOfMonth,ue as startOfWeek,g as stripTime,fe as toISODateString,no as useCalendarContext,f as useCalendarContextInternal,he as useCalendarGridMonth,dn as warnInstantDate,tt as yearPageStart};

package/dist/calendar/CalendarAnatomy.d.cts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+/**
+ * The anatomy a {@link Calendar} draws when it is given no children: the
+ * paging header, one day grid per displayed month, and the month/year view
+ * grids. The three grids each return `null` unless `view` matches, so all
+ * three can be rendered unconditionally.
+ *
+ * Not exported from the package. A consumer who wants this structure gets it
+ * by writing `<Calendar />`; one who wants a different structure writes the
+ * parts, which is exactly what this component does.
+ *
+ * @internal
+ */
+export declare const CalendarAnatomy: () => React.JSX.Element;

package/dist/calendar/CalendarAnatomy.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+/**
+ * The anatomy a {@link Calendar} draws when it is given no children: the
+ * paging header, one day grid per displayed month, and the month/year view
+ * grids. The three grids each return `null` unless `view` matches, so all
+ * three can be rendered unconditionally.
+ *
+ * Not exported from the package. A consumer who wants this structure gets it
+ * by writing `<Calendar />`; one who wants a different structure writes the
+ * parts, which is exactly what this component does.
+ *
+ * @internal
+ */
+export declare const CalendarAnatomy: () => React.JSX.Element;

package/dist/calendar/CalendarCell.d.cts

@@ -1,24 +1,11 @@
 import * as React from 'react';
 import type { CalendarCellProps } from './types.cjs';
 /**
- * Single selectable `role="gridcell"` date within a {@link Calendar}. Renders
- * a `<button type="button">` with `aria-selected`, `data-state="selected"`
- * when chosen, `data-today`, `data-outside-month`, `data-disabled`, and a
- * roving `tabIndex` (`0` only for the currently focused date, `-1` otherwise,
- * per the WAI-ARIA grid pattern). Clicking selects the date. Defaults to the
- * day-of-month number as its content.
- *
- * In `range` selection mode, every cell from the range's start to its end is
- * `aria-selected`, and carries exactly one of `data-range-start`,
- * `data-range-middle` or `data-range-end` for styling the band.
- *
- * Two distinct ways to refuse a date:
- * - **disabled** — outside `minDate`/`maxDate`, outside the displayed month,
- *   or matching the `disabled` predicate. Natively `disabled`, so it is not
- *   focusable and does not fire clicks.
- * - **unavailable** — matching `isDateUnavailable`. Focusable and announced as
- *   `aria-disabled="true"` with a `data-unavailable` hook, so a screen-reader
- *   user can land on it and hear that it is taken; clicks are ignored.
+ * Selectable `role="gridcell"` date within a {@link Calendar}.
+ * Renders `<button>` with `aria-selected`, roving `tabIndex`, day-of-month content.
+ * **Disabled**: natively disabled (not focusable).
+ * **Unavailable**: focusable, `aria-disabled="true"`, clicks ignored.
+ * In range mode, cells carry `data-range-start` / `data-range-middle` / `data-range-end`.
  *
  * @example
  * ```tsx

package/dist/calendar/CalendarCell.d.ts

@@ -1,24 +1,11 @@
 import * as React from 'react';
 import type { CalendarCellProps } from './types.js';
 /**
- * Single selectable `role="gridcell"` date within a {@link Calendar}. Renders
- * a `<button type="button">` with `aria-selected`, `data-state="selected"`
- * when chosen, `data-today`, `data-outside-month`, `data-disabled`, and a
- * roving `tabIndex` (`0` only for the currently focused date, `-1` otherwise,
- * per the WAI-ARIA grid pattern). Clicking selects the date. Defaults to the
- * day-of-month number as its content.
- *
- * In `range` selection mode, every cell from the range's start to its end is
- * `aria-selected`, and carries exactly one of `data-range-start`,
- * `data-range-middle` or `data-range-end` for styling the band.
- *
- * Two distinct ways to refuse a date:
- * - **disabled** — outside `minDate`/`maxDate`, outside the displayed month,
- *   or matching the `disabled` predicate. Natively `disabled`, so it is not
- *   focusable and does not fire clicks.
- * - **unavailable** — matching `isDateUnavailable`. Focusable and announced as
- *   `aria-disabled="true"` with a `data-unavailable` hook, so a screen-reader
- *   user can land on it and hear that it is taken; clicks are ignored.
+ * Selectable `role="gridcell"` date within a {@link Calendar}.
+ * Renders `<button>` with `aria-selected`, roving `tabIndex`, day-of-month content.
+ * **Disabled**: natively disabled (not focusable).
+ * **Unavailable**: focusable, `aria-disabled="true"`, clicks ignored.
+ * In range mode, cells carry `data-range-start` / `data-range-middle` / `data-range-end`.
  *
  * @example
  * ```tsx

package/dist/calendar/CalendarGrid.d.cts

@@ -2,14 +2,9 @@ import * as React from 'react';
 import type { CalendarGridProps } from './types.cjs';
 /**
  * `role="grid"` container for a {@link Calendar}'s date cells, owning
- * arrow-key navigation of the roving-focus date: Arrow Left/Right/Up/Down
- * move by day/week, Home/End jump to the start/end of the focused week,
- * PageUp/PageDown move by month (Shift+PageUp/PageDown move by year).
- * Navigating into a different month calls `onMonthChange` automatically.
- *
- * With a multi-month `Calendar` (`numberOfMonths`), render one grid per month
- * and give each its `monthOffset` — that is what tells the grid's cells which
- * month counts as "outside".
+ * arrow-key navigation of the roving-focus date and calling `onMonthChange`
+ * when it crosses into a different month. With `numberOfMonths` > 1, render
+ * one grid per month and give each its `monthOffset`.
  *
  * @example
  * ```tsx

package/dist/calendar/CalendarGrid.d.ts

@@ -2,14 +2,9 @@ import * as React from 'react';
 import type { CalendarGridProps } from './types.js';
 /**
  * `role="grid"` container for a {@link Calendar}'s date cells, owning
- * arrow-key navigation of the roving-focus date: Arrow Left/Right/Up/Down
- * move by day/week, Home/End jump to the start/end of the focused week,
- * PageUp/PageDown move by month (Shift+PageUp/PageDown move by year).
- * Navigating into a different month calls `onMonthChange` automatically.
- *
- * With a multi-month `Calendar` (`numberOfMonths`), render one grid per month
- * and give each its `monthOffset` — that is what tells the grid's cells which
- * month counts as "outside".
+ * arrow-key navigation of the roving-focus date and calling `onMonthChange`
+ * when it crosses into a different month. With `numberOfMonths` > 1, render
+ * one grid per month and give each its `monthOffset`.
  *
  * @example
  * ```tsx

package/dist/calendar/CalendarGridBody.d.cts

@@ -1,28 +1,9 @@
 import * as React from 'react';
 import type { CalendarGridBodyProps } from './types.cjs';
 /**
- * `role="rowgroup"` wrapper for a {@link Calendar}'s week rows.
- *
- * **Given no children it renders the displayed month itself** — one
- * `CalendarRow` per visible week, one `CalendarCell` per day, taken from the
- * live `month` in context. That is the composition a consumer writes first, and
- * it is now the correct one.
- *
- * It did not used to be. An empty body rendered an empty rowgroup, so the
- * calendar showed a heading and weekday names above no days at all; and the
- * example that worked around it mapped `getVisibleWeeks(new Date())` — a month
- * captured once at render — so the days it did draw never moved when the month
- * changed. Both roads ended at "the days do not change", with the heading
- * updating over a static grid, because `Previous`/`Next` change `month` and
- * nothing was reading it.
- *
- * Pass children to take over completely — to decorate a day, group by week
- * number, or render anything other than a plain cell. Children always win; this
- * only fills an empty body.
- *
- * `rowgroup` rather than a bare `<div>` so `role="grid"` sees only
- * `row`/`rowgroup` children — a plain `div` between the grid and its rows is
- * what axe reports as `aria-required-children`.
+ * `role="rowgroup"` wrapper for {@link Calendar} week rows. When empty, renders
+ * the displayed month as `CalendarRow`/`CalendarCell` from context.
+ * Pass children to customize (decorate days, group by week, etc.); children always win.
  *
  * @example
  * ```tsx
@@ -35,8 +16,7 @@ import type { CalendarGridBodyProps } from './types.cjs';
  *
  * @example
  * ```tsx
- * // Taking over the rows. Read `month` from context — never `new Date()`, or
- * // the grid stops following the Previous/Next buttons.
+ * // Taking over the rows. Read `month` from context — never `new Date()`.
  * const { month, weekStartsOn } = useCalendarContext();
  * <CalendarGridBody>
  *   {getVisibleWeeks(month, weekStartsOn).map((week) => (

package/dist/calendar/CalendarGridBody.d.ts

@@ -1,28 +1,9 @@
 import * as React from 'react';
 import type { CalendarGridBodyProps } from './types.js';
 /**
- * `role="rowgroup"` wrapper for a {@link Calendar}'s week rows.
- *
- * **Given no children it renders the displayed month itself** — one
- * `CalendarRow` per visible week, one `CalendarCell` per day, taken from the
- * live `month` in context. That is the composition a consumer writes first, and
- * it is now the correct one.
- *
- * It did not used to be. An empty body rendered an empty rowgroup, so the
- * calendar showed a heading and weekday names above no days at all; and the
- * example that worked around it mapped `getVisibleWeeks(new Date())` — a month
- * captured once at render — so the days it did draw never moved when the month
- * changed. Both roads ended at "the days do not change", with the heading
- * updating over a static grid, because `Previous`/`Next` change `month` and
- * nothing was reading it.
- *
- * Pass children to take over completely — to decorate a day, group by week
- * number, or render anything other than a plain cell. Children always win; this
- * only fills an empty body.
- *
- * `rowgroup` rather than a bare `<div>` so `role="grid"` sees only
- * `row`/`rowgroup` children — a plain `div` between the grid and its rows is
- * what axe reports as `aria-required-children`.
+ * `role="rowgroup"` wrapper for {@link Calendar} week rows. When empty, renders
+ * the displayed month as `CalendarRow`/`CalendarCell` from context.
+ * Pass children to customize (decorate days, group by week, etc.); children always win.
  *
  * @example
  * ```tsx
@@ -35,8 +16,7 @@ import type { CalendarGridBodyProps } from './types.js';
  *
  * @example
  * ```tsx
- * // Taking over the rows. Read `month` from context — never `new Date()`, or
- * // the grid stops following the Previous/Next buttons.
+ * // Taking over the rows. Read `month` from context — never `new Date()`.
  * const { month, weekStartsOn } = useCalendarContext();
  * <CalendarGridBody>
  *   {getVisibleWeeks(month, weekStartsOn).map((week) => (

package/dist/calendar/CalendarGridHead.d.cts

@@ -1,17 +1,9 @@
 import * as React from 'react';
 import type { CalendarGridHeadProps } from './types.cjs';
 /**
- * `role="rowgroup"` wrapper for a {@link Calendar}'s weekday header.
- *
- * Left childless it renders the weekday row itself, from the `Calendar`'s
- * `locale` and `weekStartsOn` — the visible label is the short name, with the
- * full name as `aria-label` so screen readers say "Monday", not "Mon". That is
- * why no framework ships a hardcoded `['Su', 'Mo', …]` table any more.
- *
- * `rowgroup`, not `row`: `role="grid"` requires `row`/`rowgroup` children and
- * `role="columnheader"` requires a `row` parent, so the old `row`-inside-`row`
- * nesting is exactly what axe flagged as
- * `aria-required-children`/`aria-required-parent`.
+ * `role="rowgroup"` wrapper for a {@link Calendar}'s weekday header. Left
+ * childless, renders the weekday row from the `Calendar`'s `locale` and
+ * `weekStartsOn`. Short name visible, full name in `aria-label`.
  *
  * @example
  * ```tsx

package/dist/calendar/CalendarGridHead.d.ts

@@ -1,17 +1,9 @@
 import * as React from 'react';
 import type { CalendarGridHeadProps } from './types.js';
 /**
- * `role="rowgroup"` wrapper for a {@link Calendar}'s weekday header.
- *
- * Left childless it renders the weekday row itself, from the `Calendar`'s
- * `locale` and `weekStartsOn` — the visible label is the short name, with the
- * full name as `aria-label` so screen readers say "Monday", not "Mon". That is
- * why no framework ships a hardcoded `['Su', 'Mo', …]` table any more.
- *
- * `rowgroup`, not `row`: `role="grid"` requires `row`/`rowgroup` children and
- * `role="columnheader"` requires a `row` parent, so the old `row`-inside-`row`
- * nesting is exactly what axe flagged as
- * `aria-required-children`/`aria-required-parent`.
+ * `role="rowgroup"` wrapper for a {@link Calendar}'s weekday header. Left
+ * childless, renders the weekday row from the `Calendar`'s `locale` and
+ * `weekStartsOn`. Short name visible, full name in `aria-label`.
  *
  * @example
  * ```tsx

package/dist/calendar/CalendarHeader.d.cts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { CalendarHeaderProps } from './types.cjs';
 /**
- * Purely presentational wrapper for a {@link Calendar}'s month navigation
- * row. Renders a plain `<div>`; typically holds `CalendarPreviousButton`,
- * `CalendarHeading` and `CalendarNextButton`.
+ * Wrapper for a {@link Calendar}'s month navigation row. Renders a plain `<div>`.
  *
  * @example
  * ```tsx

package/dist/calendar/CalendarHeader.d.ts

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import type { CalendarHeaderProps } from './types.js';
 /**
- * Purely presentational wrapper for a {@link Calendar}'s month navigation
- * row. Renders a plain `<div>`; typically holds `CalendarPreviousButton`,
- * `CalendarHeading` and `CalendarNextButton`.
+ * Wrapper for a {@link Calendar}'s month navigation row. Renders a plain `<div>`.
  *
  * @example
  * ```tsx

package/dist/calendar/CalendarHeading.d.cts

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import type { CalendarHeadingProps } from './types.cjs';
 /**
- * Label for a {@link Calendar}'s displayed month. Left childless it renders
- * the month and year formatted for the `Calendar`'s `locale` via `Intl`, so
- * no consumer hardcodes an English month name; pass children to override.
- *
- * With a multi-month `Calendar` (`numberOfMonths`), `monthOffset` selects
- * which of the displayed months to label.
+ * Labels the calendar view (month/year/year-page) and offers view-up trigger.
+ * Renders `<button>` below `maxView`, plain `<div>` at `maxView`. Locale-aware
+ * via `Intl`; `monthOffset` selects which month to label (day view only).
  *
  * @example
  * ```tsx
@@ -14,4 +11,4 @@ import type { CalendarHeadingProps } from './types.cjs';
  * <CalendarHeading monthOffset={1} />
  * ```
  */
-export declare const CalendarHeading: React.ForwardRefExoticComponent<Omit<CalendarHeadingProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CalendarHeading: React.ForwardRefExoticComponent<Omit<CalendarHeadingProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/calendar/CalendarHeading.d.ts

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import type { CalendarHeadingProps } from './types.js';
 /**
- * Label for a {@link Calendar}'s displayed month. Left childless it renders
- * the month and year formatted for the `Calendar`'s `locale` via `Intl`, so
- * no consumer hardcodes an English month name; pass children to override.
- *
- * With a multi-month `Calendar` (`numberOfMonths`), `monthOffset` selects
- * which of the displayed months to label.
+ * Labels the calendar view (month/year/year-page) and offers view-up trigger.
+ * Renders `<button>` below `maxView`, plain `<div>` at `maxView`. Locale-aware
+ * via `Intl`; `monthOffset` selects which month to label (day view only).
  *
  * @example
  * ```tsx
@@ -14,4 +11,4 @@ import type { CalendarHeadingProps } from './types.js';
  * <CalendarHeading monthOffset={1} />
  * ```
  */
-export declare const CalendarHeading: React.ForwardRefExoticComponent<Omit<CalendarHeadingProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CalendarHeading: React.ForwardRefExoticComponent<Omit<CalendarHeadingProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/calendar/CalendarNextButton.d.cts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import type { CalendarNextButtonProps } from './types.cjs';
 /**
  * Navigates the {@link Calendar} to the next month on click. Renders a
- * `<button type="button">` with a default `aria-label="Next month"`, and
+ * `<button type="button">` labelled for the view on screen ("Next month",
+ * "Next year", "Next 20 years"), and
  * moves the roving-focus date to the same day (clamped) in the new month.
  *
  * @example

package/dist/calendar/CalendarNextButton.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import type { CalendarNextButtonProps } from './types.js';
 /**
  * Navigates the {@link Calendar} to the next month on click. Renders a
- * `<button type="button">` with a default `aria-label="Next month"`, and
+ * `<button type="button">` labelled for the view on screen ("Next month",
+ * "Next year", "Next 20 years"), and
  * moves the roving-focus date to the same day (clamped) in the new month.
  *
  * @example

package/dist/calendar/CalendarViewGrid.d.cts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import type { CalendarMonthGridProps, CalendarYearGridProps } from './types.cjs';
+/**
+ * Month view grid: 12 gridcell months in rows of 4, with ARIA grid semantics.
+ * Roving tab stop, arrow navigation at month granularity (row=4, page=year, Shift pages 10).
+ * Activation projects focusedDate to month, pages to it, steps view to 'day' (or minView).
+ * Does not select; only day grid affects value.
+ *
+ * @example
+ * ```tsx
+ * <Calendar>
+ *   <CalendarHeader>
+ *     <CalendarPreviousButton>‹</CalendarPreviousButton>
+ *     <CalendarHeading />
+ *     <CalendarNextButton>›</CalendarNextButton>
+ *   </CalendarHeader>
+ *   <CalendarGrid>
+ *     <CalendarGridHead />
+ *     <CalendarGridBody />
+ *   </CalendarGrid>
+ *   <CalendarMonthGrid />
+ *   <CalendarYearGrid />
+ * </Calendar>
+ * ```
+ */
+export declare const CalendarMonthGrid: React.ForwardRefExoticComponent<Omit<CalendarMonthGridProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Year view grid: 20 gridcell years in rows of 4, pages aligned on multiple of 20 (2026 shows 2020–2039).
+ * Same ARIA grid model and aria-disabled rule as CalendarMonthGrid, one unit coarser.
+ * Activation projects focusedDate to year, steps view to 'month'. Does not select.
+ *
+ * @example
+ * ```tsx
+ * <CalendarYearGrid />
+ * ```
+ */
+export declare const CalendarYearGrid: React.ForwardRefExoticComponent<Omit<CalendarYearGridProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/calendar/CalendarViewGrid.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import type { CalendarMonthGridProps, CalendarYearGridProps } from './types.js';
+/**
+ * Month view grid: 12 gridcell months in rows of 4, with ARIA grid semantics.
+ * Roving tab stop, arrow navigation at month granularity (row=4, page=year, Shift pages 10).
+ * Activation projects focusedDate to month, pages to it, steps view to 'day' (or minView).
+ * Does not select; only day grid affects value.
+ *
+ * @example
+ * ```tsx
+ * <Calendar>
+ *   <CalendarHeader>
+ *     <CalendarPreviousButton>‹</CalendarPreviousButton>
+ *     <CalendarHeading />
+ *     <CalendarNextButton>›</CalendarNextButton>
+ *   </CalendarHeader>
+ *   <CalendarGrid>
+ *     <CalendarGridHead />
+ *     <CalendarGridBody />
+ *   </CalendarGrid>
+ *   <CalendarMonthGrid />
+ *   <CalendarYearGrid />
+ * </Calendar>
+ * ```
+ */
+export declare const CalendarMonthGrid: React.ForwardRefExoticComponent<Omit<CalendarMonthGridProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Year view grid: 20 gridcell years in rows of 4, pages aligned on multiple of 20 (2026 shows 2020–2039).
+ * Same ARIA grid model and aria-disabled rule as CalendarMonthGrid, one unit coarser.
+ * Activation projects focusedDate to year, steps view to 'month'. Does not select.
+ *
+ * @example
+ * ```tsx
+ * <CalendarYearGrid />
+ * ```
+ */
+export declare const CalendarYearGrid: React.ForwardRefExoticComponent<Omit<CalendarYearGridProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/calendar/CalendarWeekNumber.d.cts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { CalendarWeekNumberProps } from './types.cjs';
+/**
+ * ISO-8601 week number, `role="rowheader"`. Independent of `weekStartsOn`;
+ * January 1st may be week 52 or 53.
+ *
+ * @example
+ * ```tsx
+ * <CalendarRow>
+ *   <CalendarWeekNumber date={week[0].date} />
+ *   {week.map(({ date }) => (
+ *     <CalendarCell date={date} key={date.toISOString()} />
+ *   ))}
+ * </CalendarRow>
+ * ```
+ */
+export declare const CalendarWeekNumber: React.ForwardRefExoticComponent<Omit<CalendarWeekNumberProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/calendar/CalendarWeekNumber.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import type { CalendarWeekNumberProps } from './types.js';
+/**
+ * ISO-8601 week number, `role="rowheader"`. Independent of `weekStartsOn`;
+ * January 1st may be week 52 or 53.
+ *
+ * @example
+ * ```tsx
+ * <CalendarRow>
+ *   <CalendarWeekNumber date={week[0].date} />
+ *   {week.map(({ date }) => (
+ *     <CalendarCell date={date} key={date.toISOString()} />
+ *   ))}
+ * </CalendarRow>
+ * ```
+ */
+export declare const CalendarWeekNumber: React.ForwardRefExoticComponent<Omit<CalendarWeekNumberProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/calendar/CalendarWeekNumberHeader.d.cts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { CalendarWeekNumberHeaderProps } from './types.cjs';
+/**
+ * The `role="columnheader"` above a {@link Calendar}'s week-number column.
+ *
+ * Visually blank by default (named via `aria-label`) because no abbreviation
+ * of "week number" reads well next to day abbreviations. Pass children for
+ * a visible label like "Wk".
+ *
+ * It exists to prevent grid alignment errors: without this header, the
+ * week-number column causes off-by-one column-index misalignment.
+ *
+ * @example
+ * ```tsx
+ * <CalendarRow>
+ *   <CalendarWeekNumberHeader>Wk</CalendarWeekNumberHeader>
+ *   <CalendarWeekDay aria-label="Monday">Mo</CalendarWeekDay>
+ * </CalendarRow>
+ * ```
+ */
+export declare const CalendarWeekNumberHeader: React.ForwardRefExoticComponent<Omit<CalendarWeekNumberHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/calendar/CalendarWeekNumberHeader.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { CalendarWeekNumberHeaderProps } from './types.js';
+/**
+ * The `role="columnheader"` above a {@link Calendar}'s week-number column.
+ *
+ * Visually blank by default (named via `aria-label`) because no abbreviation
+ * of "week number" reads well next to day abbreviations. Pass children for
+ * a visible label like "Wk".
+ *
+ * It exists to prevent grid alignment errors: without this header, the
+ * week-number column causes off-by-one column-index misalignment.
+ *
+ * @example
+ * ```tsx
+ * <CalendarRow>
+ *   <CalendarWeekNumberHeader>Wk</CalendarWeekNumberHeader>
+ *   <CalendarWeekDay aria-label="Monday">Mo</CalendarWeekDay>
+ * </CalendarRow>
+ * ```
+ */
+export declare const CalendarWeekNumberHeader: React.ForwardRefExoticComponent<Omit<CalendarWeekNumberHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/calendar/index.d.cts

@@ -1,13 +1,3 @@
 export * from './Calendar.cjs';
-export { clearLocaleNameCache, formatDateLabel, formatMonthLabel, getLocaleWeekStartsOn, getMonthNames, getWeekDayNames, resolveLocale, type NameWidth, } from './locale.cjs';
-export { CalendarHeader } from './CalendarHeader.cjs';
-export { CalendarHeading } from './CalendarHeading.cjs';
-export { CalendarPreviousButton } from './CalendarPreviousButton.cjs';
-export { CalendarNextButton } from './CalendarNextButton.cjs';
-export { CalendarGrid } from './CalendarGrid.cjs';
-export { CalendarGridHead } from './CalendarGridHead.cjs';
-export { CalendarWeekDay } from './CalendarWeekDay.cjs';
-export { CalendarGridBody } from './CalendarGridBody.cjs';
-export { CalendarRow } from './CalendarRow.cjs';
-export { CalendarCell } from './CalendarCell.cjs';
-export type { CalendarProps, CalendarHeaderProps, CalendarHeadingProps, CalendarPreviousButtonProps, CalendarNextButtonProps, CalendarGridProps, CalendarGridHeadProps, CalendarWeekDayProps, CalendarGridBodyProps, CalendarRowProps, CalendarCellProps, CalendarDay, CalendarSelectionMode, CalendarValue, DateRange, RangePosition, } from './types.cjs';
+export { clearLocaleNameCache, formatDateLabel, formatMonthLabel, formatYear, formatYearRange, getLocaleWeekStartsOn, getMonthNames, getWeekDayNames, resolveLocale, type NameWidth, } from './locale.cjs';
+export type { CalendarProps, CalendarDay, CalendarPageBehavior, CalendarSelectionMode, CalendarView, CalendarValue, CalendarValueInput, DateRange, RangePosition, } from './types.cjs';