material-plus-ui 1.0.0 → 1.2.0

package/dist/internal/Calendar.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import*as n from"react";import{MPButton as r}from"../components/button/MPButton";import{MPIcon as l}from"../components/icon/MPIcon";import{MPIconButton as a}from"../components/icon-button/MPIconButton";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons";import{MPStateLayer as u}from"./StateLayer";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale";import{VISUALLY_HIDDEN as p}from"./visually-hidden";import{addDays as f,addMonths as g,addYears as v,calendarWeeks as w,compareDay as x,dateFormatter as y,daysInMonth as b,isDayOutside as D,isMonthBeforeYear as S,isSameDay as N,isSameMonth as M,isValidDate as P,makeDate as C,meridiemLabels as _,monthLabels as k,startOfDay as z,startOfMonth as F,today as Y,weekdayLabels as A,withTime as j,YEAR_PAGE_SIZE as E,yearPageStart as B}from"./date";const R={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},T={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},$=["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none bg-transparent font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" ");function H({children:t,label:n,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:p,onKeyDown:f}){return o("button",{type:"button",role:"gridcell","aria-label":n,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[$,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"cursor-default text-mp-on-surface/38":r?"bg-(--_mp-accent) text-(--_mp-on-accent)":l?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"border border-(--_mp-accent) text-(--_mp-accent)":c?"text-mp-on-surface-variant":"text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),t]})}function K({size:n,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:v,showNextButton:w,onStep:x,onViewChange:y}){const b=k(f,"long")[p.getMonth()],D=String(p.getFullYear()),N=S(f),M=T[n],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],C=(o,t)=>t?e(a,{size:M,color:u,label:P[-1===o?0:1],icon:e(l,{icon:-1===o?c:i,size:m[M],className:"rtl:rotate-180"}),onClick:()=>x(o)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),_=o=>e(l,{icon:s,size:m[M],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",o?"rotate-180":""].filter(Boolean).join(" ")}),z=e(r,{variant:"text",size:M,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:_("month"===d),onClick:()=>y("month"===d?"day":"month"),children:b},"month"),F=e(r,{variant:"text",size:M,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:_("year"===d),onClick:()=>y("year"===d?"day":"year"),children:D},"year"),Y=B(p.getFullYear());return o("div",{className:"flex items-center justify-between gap-1",children:[C(-1,v),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[n]}`,children:`${Y}–${Y+E-1}`}):"month"===d?F:o(t,N?{children:[z,F]}:{children:[F,z]})}),C(1,w)]})}export function MPCalendar({size:t,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:p,maxDate:f,shouldDisableDate:w,showOutsideDays:x=!0,autoFocus:y=!1,showPreviousButton:b=!0,showNextButton:S=!0,labels:N}){const[_,k]=n.useState("day"),A=n.useMemo(()=>i.filter(P),[i]),[j,B]=n.useState(()=>{const e=A.find(e=>M(e,s));return e?z(e):M(Y(),s)?Y():F(s)}),T=n.useRef(y),$=n.useRef(null);n.useEffect(()=>{B(e=>M(e,s)?e:F(s))},[s]),n.useLayoutEffect(()=>{T.current&&(T.current=!1,$.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const H=n.useCallback(e=>D(e,p,f)||(w?.(e)??!1),[p,f,w]),q=e=>{T.current=!0,k(e)},I=e=>{T.current=!0,c(e)};return o("div",{ref:$,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":R[t]},onPointerLeave:()=>h?.(null),children:[e(K,{size:t,color:r,view:_,month:s,locale:l,labels:N,showPreviousButton:b,showNextButton:S,onStep:e=>{c("day"===_?g(s,e):v(s,"month"===_?e:e*E))},onViewChange:q}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===_?e(L,{size:t,locale:l,weekStartsOn:a,month:s,chosen:A,rangeStart:u,rangeEnd:m,focusedDate:j,showOutsideDays:x,isDisabled:H,onSelect:e=>{B(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{T.current=!0,B(e),M(e,s)||c(F(e))}}):"month"===_?e(O,{size:t,locale:l,month:s,chosen:A,minDate:p,maxDate:f,onMoveCursor:I,onPick:e=>{c(C(s.getFullYear(),e,1)),q("day")}}):e(U,{size:t,month:s,chosen:A,minDate:p,maxDate:f,onMoveCursor:I,onPick:e=>{c(C(e,s.getMonth(),1)),q("month")}})})]})}function L({size:t,locale:n,weekStartsOn:r,month:l,chosen:a,rangeStart:s,rangeEnd:c,focusedDate:i,showOutsideDays:u,isDisabled:m,onSelect:p,onPreviewChange:v,onMoveFocus:b}){const D=w(l,r),S=A(n,r,"narrow"),C=A(n,r,"long"),_=y(n,{dateStyle:"full"}),k=(F=c,P(z=s)&&P(F)?x(z,F)<=0?[z,F]:[F,z]:null);var z,F;const j=Y();return o("div",{role:"grid",className:"flex h-full flex-col",children:[e("div",{role:"row",className:"grid grid-cols-7",children:S.map((o,t)=>e("span",{role:"columnheader","aria-label":C[t],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:o},t))}),D.map((o,n)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(o=>{const n=!M(o,l);if(n&&!u)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},o.getTime());const s=a.some(e=>N(e,o)),c=null!==k&&x(o,k[0])>=0&&x(o,k[1])<=0,d=null!==k&&c&&N(o,k[0]),w=null!==k&&c&&N(o,k[1]);return e(H,{label:_.format(o),selected:s,inRange:c&&!s,rangeEdge:c?d&&w?"both":d?"start":w?"end":"middle":null,current:N(o,j)&&!s,muted:n,disabled:m(o),focused:N(o,i),className:`size-(--_mp-cell) ${h[t]}`,onClick:()=>p(o),onPointerEnter:()=>v?.(o),onKeyDown:e=>((e,o)=>{const t=(o.getDay()-r+7)%7,n={ArrowLeft:()=>f(o,-1),ArrowRight:()=>f(o,1),ArrowUp:()=>f(o,-7),ArrowDown:()=>f(o,7),Home:()=>f(o,-t),End:()=>f(o,6-t),PageUp:()=>g(o,e.shiftKey?-12:-1),PageDown:()=>g(o,e.shiftKey?12:1)}[e.key];n&&(e.preventDefault(),b(n()))})(e,o),children:o.getDate()},o.getTime())})},n))]})}function O({size:o,locale:t,month:n,chosen:r,minDate:l,maxDate:a,onMoveCursor:s,onPick:c}){const i=k(t,"short"),u=k(t,"long"),m=n.getFullYear(),d=new Date,p=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==o&&(e.preventDefault(),s(g(F(n),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(s=>{const f=3*t+s,g=C(m,f,1),v=C(m,f,b(m,f));return e(H,{label:`${u[f]} ${m}`,selected:r.some(e=>e.getFullYear()===m&&e.getMonth()===f),current:d.getFullYear()===m&&d.getMonth()===f,disabled:P(l)&&x(v,l)<0||P(a)&&x(g,a)>0,focused:f===n.getMonth(),className:`h-(--_mp-cell) w-full ${h[o]}`,onClick:()=>c(f),onKeyDown:p,children:i[f]},f)})},t))})}function U({size:o,month:t,chosen:n,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=B(t.getFullYear()),i=(new Date).getFullYear(),u=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-E,PageDown:E}[e.key];void 0!==o&&(e.preventDefault(),a(v(F(t),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e(H,{label:String(d),selected:n.some(e=>e.getFullYear()===d),current:d===i,disabled:P(r)&&d<r.getFullYear()||P(l)&&d>l.getFullYear(),focused:d===t.getFullYear(),className:`h-(--_mp-cell) w-full ${h[o]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function q(e){const o=e.parentElement;if(!o)return;const t=e.getBoundingClientRect(),n=o.getBoundingClientRect(),r=t.top-n.top-o.clientTop+o.scrollTop,l=r+t.height;r<o.scrollTop?o.scrollTop=r:l>o.scrollTop+o.clientHeight&&(o.scrollTop=l-o.clientHeight)}export function MPTimeGrid({size:t,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:v=!1,labels:w}){const x=l??a,b=n.useRef(null),[D,S]=n.useMemo(()=>_(r),[r]);n.useEffect(()=>{const e=b.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(q),v){const o=e?.querySelector('[role="listbox"]');(o?.querySelector('[data-chosen="true"]')??o?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[v]);const N=n.useMemo(()=>{const e=Math.ceil((c?12:24)/m),o=Array.from({length:e},(e,o)=>o*m);return c?o.map(e=>0===e?12:e):o},[c,m]),M=n.useMemo(()=>Array.from({length:Math.ceil(60/d)},(e,o)=>o*d),[d]),P=n.useMemo(()=>Array.from({length:Math.ceil(60/f)},(e,o)=>o*f),[f]),C=e=>String(e).padStart(2,"0"),k=c?x.getHours()%12||12:x.getHours(),z=(n,r,a,i,m)=>e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),children:a.map(r=>{const a=((e,o)=>j(x,"hour"===e?{hours:c?o%12+(x.getHours()>=12?12:0):o}:"minute"===e?{minutes:o}:"second"===e?{seconds:o}:{hours:x.getHours()%12+12*o}))(n,r),d=null!==l&&i(r),p=g?.(a,n)??!1;return o("button",{type:"button",role:"option","aria-selected":d,"aria-disabled":p||void 0,"data-chosen":d?"true":void 0,className:[$,"rounded-mp-full h-(--_mp-cell) w-full shrink-0",h[t],p?"cursor-default text-mp-on-surface/38":d?"bg-(--_mp-accent) text-(--_mp-on-accent)":"text-mp-on-surface"].join(" "),onClick:()=>{p||s(a)},children:[p?null:e(u,{}),m(r)]},r)})},n);return o("div",{ref:b,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":R[t]},children:[z("hour",w.hour,N,e=>e===k,e=>c?String(e):C(e)),z("minute",w.minute,M,e=>e===x.getMinutes(),C),i?z("second",w.second,P,e=>e===x.getSeconds(),C):null,c?z("meridiem",w.meridiem,[0,1],e=>(x.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":y(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}
+import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import*as n from"react";import{MPButton as r}from"../components/button/MPButton";import{MPIcon as l}from"../components/icon/MPIcon";import{MPIconButton as a}from"../components/icon-button/MPIconButton";import{ChevronDownIcon as s,ChevronLeftIcon as c,ChevronRightIcon as i}from"../constants/icons";import{MPStateLayer as u}from"./StateLayer";import{CONTROL_ICON as m,META_TEXT as d,PROSE_TEXT as h}from"./scale";import{VISUALLY_HIDDEN as p}from"./visually-hidden";import{addDays as f,addMonths as g,addYears as v,calendarWeeks as y,compareDay as w,dateFormatter as x,daysInMonth as b,isDayOutside as D,isMonthBeforeYear as S,isSameDay as N,isSameMonth as M,isValidDate as P,makeDate as _,meridiemLabels as C,monthLabels as k,startOfDay as z,startOfMonth as F,today as Y,weekdayLabels as A,withTime as E,YEAR_PAGE_SIZE as j,yearPageStart as B}from"./date";const R={xs:"1.75rem",sm:"2rem",md:"2.5rem",lg:"2.75rem",xl:"3rem"},T={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"},$=["group relative flex cursor-pointer items-center justify-center overflow-hidden","box-border appearance-none bg-transparent font-[inherit] tabular-nums select-none","transition-[background-color,border-color,color]","duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:z-10 focus-visible:outline-2","focus-visible:outline-offset-[-2px] focus-visible:outline-solid outline-none"].join(" ");function H({children:t,label:n,selected:r,inRange:l=!1,rangeEdge:a=null,current:s=!1,muted:c=!1,disabled:i=!1,focused:m=!1,className:d,onClick:h,onPointerEnter:p,onKeyDown:f}){return o("button",{type:"button",role:"gridcell","aria-label":n,"aria-selected":r,"aria-current":s?"date":void 0,"aria-disabled":i||void 0,tabIndex:m?0:-1,"data-focus-target":m?"true":void 0,className:[$,"start"===a?"rounded-s-mp-full":"end"===a?"rounded-e-mp-full":"middle"===a?"rounded-none":"rounded-mp-full",i?"cursor-default text-mp-on-surface/38":r?"bg-(--_mp-accent) text-(--_mp-on-accent)":l?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"border border-(--_mp-accent) text-(--_mp-accent)":c?"text-mp-on-surface-variant":"text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),t]})}function K({size:n,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:v,showNextButton:y,onStep:w,onViewChange:x}){const b=k(f,"long")[p.getMonth()],D=String(p.getFullYear()),N=S(f),M=T[n],P="day"===d?[g.previousMonth,g.nextMonth]:"month"===d?[g.previousYear,g.nextYear]:[g.previousYears,g.nextYears],_=(o,t)=>t?e(a,{size:M,color:u,label:P[-1===o?0:1],icon:e(l,{icon:-1===o?c:i,size:m[M],className:"rtl:rotate-180"}),onClick:()=>w(o)}):e("span",{"aria-hidden":"true",className:"size-(--_mp-cell)"}),C=o=>e(l,{icon:s,size:m[M],className:["transition-transform duration-(--mp-sys-motion-duration-short4)",o?"rotate-180":""].filter(Boolean).join(" ")}),z=e(r,{variant:"text",size:M,color:u,"aria-label":g.chooseMonth,"aria-expanded":"month"===d,endIcon:C("month"===d),onClick:()=>x("month"===d?"day":"month"),children:b},"month"),F=e(r,{variant:"text",size:M,color:u,className:"tabular-nums","aria-label":g.chooseYear,"aria-expanded":"year"===d,endIcon:C("year"===d),onClick:()=>x("year"===d?"day":"year"),children:D},"year"),Y=B(p.getFullYear());return o("div",{className:"flex items-center justify-between gap-1",children:[_(-1,v),e("div",{className:"flex min-w-0 flex-1 items-center justify-center gap-1",children:"year"===d?e("span",{className:`text-mp-on-surface flex h-(--_mp-cell) items-center tabular-nums ${h[n]}`,children:`${Y}–${Y+j-1}`}):"month"===d?F:o(t,N?{children:[z,F]}:{children:[F,z]})}),_(1,y)]})}export function MPCalendar({size:t,color:r,locale:l,weekStartsOn:a,month:s,onMonthChange:c,selected:i,rangeStart:u=null,rangeEnd:m=null,onSelect:d,onPreviewChange:h,minDate:p,maxDate:f,shouldDisableDate:y,showOutsideDays:w=!0,autoFocus:x=!1,showPreviousButton:b=!0,showNextButton:S=!0,labels:N}){const[C,k]=n.useState("day"),A=n.useMemo(()=>i.filter(P),[i]),[E,B]=n.useState(()=>{const e=A.find(e=>M(e,s));return e?z(e):M(Y(),s)?Y():F(s)}),T=n.useRef(x),$=n.useRef(null);n.useEffect(()=>{B(e=>M(e,s)?e:F(s))},[s]),n.useLayoutEffect(()=>{T.current&&(T.current=!1,$.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const H=n.useCallback(e=>D(e,p,f)||(y?.(e)??!1),[p,f,y]),q=e=>{T.current=!0,k(e)},I=e=>{T.current=!0,c(e)};return o("div",{ref:$,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":R[t]},onPointerLeave:()=>h?.(null),children:[e(K,{size:t,color:r,view:C,month:s,locale:l,labels:N,showPreviousButton:b,showNextButton:S,onStep:e=>{c("day"===C?g(s,e):v(s,"month"===C?e:e*j))},onViewChange:q}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===C?e(L,{size:t,locale:l,weekStartsOn:a,month:s,chosen:A,rangeStart:u,rangeEnd:m,focusedDate:E,showOutsideDays:w,isDisabled:H,onSelect:e=>{B(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{T.current=!0,B(e),M(e,s)||c(F(e))}}):"month"===C?e(O,{size:t,locale:l,month:s,chosen:A,minDate:p,maxDate:f,onMoveCursor:I,onPick:e=>{c(_(s.getFullYear(),e,1)),q("day")}}):e(U,{size:t,month:s,chosen:A,minDate:p,maxDate:f,onMoveCursor:I,onPick:e=>{c(_(e,s.getMonth(),1)),q("month")}})})]})}function L({size:t,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:p,onSelect:v,onPreviewChange:b,onMoveFocus:D}){const S=A(r,l,"narrow"),_=A(r,l,"long"),C=(z=i,P(k=c)&&P(z)?w(k,z)<=0?[k,z]:[z,k]:null);var k,z;const F=Y(),E=n.useMemo(()=>{const e=x(r,{dateStyle:"full"});return y(a,l).map(o=>o.map(o=>({date:o,label:e.format(o)})))},[a,l,r]),j=n.useRef(null),B=n.useRef(a);n.useLayoutEffect(()=>{const e=j.current,o=B.current;if(B.current=a,!e||M(o,a))return;const t=o.getTime()<a.getTime(),n="rtl"===getComputedStyle(e).direction;e.style.setProperty("--_mp-calendar-from",String(t===n?-1:1)),e.dataset.mpPaged="true",e.style.animationName="none",e.offsetWidth,e.style.animationName=""},[a]);return o("div",{role:"grid","aria-label":x(r,{year:"numeric",month:"long"}).format(a),className:"flex h-full flex-col",children:[e("div",{role:"rowgroup",children:e("div",{role:"row",className:"grid grid-cols-7",children:S.map((o,t)=>e("span",{role:"columnheader","aria-label":_[t],className:`text-mp-on-surface-variant flex h-(--_mp-cell) items-center justify-center select-none ${d}`,children:o},t))})}),e("div",{ref:j,role:"rowgroup",className:"mp-calendar__page flex flex-1 flex-col",children:E.map((o,n)=>e("div",{role:"row",className:"grid grid-cols-7",children:o.map(({date:o,label:n})=>{const r=!M(o,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},o.getTime());const c=s.some(e=>N(e,o)),i=null!==C&&w(o,C[0])>=0&&w(o,C[1])<=0,d=null!==C&&i&&N(o,C[0]),y=null!==C&&i&&N(o,C[1]);return e(H,{label:n,selected:c,inRange:i&&!c,rangeEdge:i?d&&y?"both":d?"start":y?"end":"middle":null,current:N(o,F)&&!c,muted:r,disabled:p(o),focused:N(o,u),className:`size-(--_mp-cell) ${h[t]}`,onClick:()=>v(o),onPointerEnter:()=>b?.(o),onKeyDown:e=>((e,o)=>{const t=(o.getDay()-l+7)%7,n={ArrowLeft:()=>f(o,-1),ArrowRight:()=>f(o,1),ArrowUp:()=>f(o,-7),ArrowDown:()=>f(o,7),Home:()=>f(o,-t),End:()=>f(o,6-t),PageUp:()=>g(o,e.shiftKey?-12:-1),PageDown:()=>g(o,e.shiftKey?12:1)}[e.key];n&&(e.preventDefault(),D(n()))})(e,o),children:o.getDate()},o.getTime())})},n))})]})}function O({size:o,locale:t,month:n,chosen:r,minDate:l,maxDate:a,onMoveCursor:s,onPick:c}){const i=k(t,"short"),u=k(t,"long"),m=n.getFullYear(),d=new Date,p=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==o&&(e.preventDefault(),s(g(F(n),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2,3].map(t=>e("div",{role:"row",className:"grid grid-cols-3 gap-1",children:[0,1,2].map(s=>{const f=3*t+s,g=_(m,f,1),v=_(m,f,b(m,f));return e(H,{label:`${u[f]} ${m}`,selected:r.some(e=>e.getFullYear()===m&&e.getMonth()===f),current:d.getFullYear()===m&&d.getMonth()===f,disabled:P(l)&&w(v,l)<0||P(a)&&w(g,a)>0,focused:f===n.getMonth(),className:`h-(--_mp-cell) w-full ${h[o]}`,onClick:()=>c(f),onKeyDown:p,children:i[f]},f)})},t))})}function U({size:o,month:t,chosen:n,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=B(t.getFullYear()),i=(new Date).getFullYear(),u=e=>{const o={ArrowLeft:-1,ArrowRight:1,ArrowUp:-4,ArrowDown:4,PageUp:-j,PageDown:j}[e.key];void 0!==o&&(e.preventDefault(),a(v(F(t),o)))};return e("div",{role:"grid",className:"flex h-full flex-col justify-evenly",children:[0,1,2].map(a=>e("div",{role:"row",className:"grid grid-cols-4 gap-1",children:[0,1,2,3].map(m=>{const d=c+4*a+m;return e(H,{label:String(d),selected:n.some(e=>e.getFullYear()===d),current:d===i,disabled:P(r)&&d<r.getFullYear()||P(l)&&d>l.getFullYear(),focused:d===t.getFullYear(),className:`h-(--_mp-cell) w-full ${h[o]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function q(e){const o=e.parentElement;if(!o)return;const t=e.getBoundingClientRect(),n=o.getBoundingClientRect(),r=t.top-n.top-o.clientTop+o.scrollTop,l=r+t.height;r<o.scrollTop?o.scrollTop=r:l>o.scrollTop+o.clientHeight&&(o.scrollTop=l-o.clientHeight)}export function MPTimeGrid({size:t,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:v=!1,labels:y}){const w=l??a,b=n.useRef(null),[D,S]=n.useMemo(()=>C(r),[r]);n.useEffect(()=>{const e=b.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(q),v){const o=e?.querySelector('[role="listbox"]');(o?.querySelector('[data-chosen="true"]')??o?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[v]);const N=n.useMemo(()=>{const e=Math.ceil((c?12:24)/m),o=Array.from({length:e},(e,o)=>o*m);return c?o.map(e=>0===e?12:e):o},[c,m]),M=n.useMemo(()=>Array.from({length:Math.ceil(60/d)},(e,o)=>o*d),[d]),P=n.useMemo(()=>Array.from({length:Math.ceil(60/f)},(e,o)=>o*f),[f]),_=e=>String(e).padStart(2,"0"),k=c?w.getHours()%12||12:w.getHours(),z=(n,r,a,i,m)=>e("div",{role:"listbox","aria-label":r,className:["mp-time-grid__column flex flex-col gap-0.5 overflow-y-auto overscroll-contain","h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*1.75)]","scroll-py-0.5 [scrollbar-width:thin]"].join(" "),children:a.map(r=>{const a=((e,o)=>E(w,"hour"===e?{hours:c?o%12+(w.getHours()>=12?12:0):o}:"minute"===e?{minutes:o}:"second"===e?{seconds:o}:{hours:w.getHours()%12+12*o}))(n,r),d=null!==l&&i(r),p=g?.(a,n)??!1;return o("button",{type:"button",role:"option","aria-selected":d,"aria-disabled":p||void 0,"data-chosen":d?"true":void 0,className:[$,"rounded-mp-full h-(--_mp-cell) w-full shrink-0",h[t],p?"cursor-default text-mp-on-surface/38":d?"bg-(--_mp-accent) text-(--_mp-on-accent)":"text-mp-on-surface"].join(" "),onClick:()=>{p||s(a)},children:[p?null:e(u,{}),m(r)]},r)})},n);return o("div",{ref:b,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":R[t]},children:[z("hour",y.hour,N,e=>e===k,e=>c?String(e):_(e)),z("minute",y.minute,M,e=>e===w.getMinutes(),_),i?z("second",y.second,P,e=>e===w.getSeconds(),_):null,c?z("meridiem",y.meridiem,[0,1],e=>(w.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":x(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}

package/dist/internal/FieldOutline.d.ts

@@ -4,6 +4,13 @@ export interface MPFieldOutlineProps {
     /** The label, which is what cuts the notch. Without one the outline is closed. */
     label?: React.ReactNode;
     required?: boolean;
+    /**
+     * Whether the notch is cut. `false` closes it, for the moment the label is
+     * resting on the control's line and there is nothing on the border to make
+     * room for.
+     * @default true
+     */
+    notched?: boolean;
 }
 /**
  * The outline itself.
@@ -17,15 +24,28 @@ export interface MPFieldOutlineProps {
  * from the real `<label>`, and announcing a `<fieldset>` as a group around a
  * single control is noise a screen reader does not need.
  */
-export declare function MPFieldOutline({ label, required }: MPFieldOutlineProps): React.JSX.Element;
+export declare function MPFieldOutline({ label, required, notched }: MPFieldOutlineProps): React.JSX.Element;
 export interface MPFieldLabelProps extends MPFieldOutlineProps {
     /**
-     * Which rung the control is drawn at. Only the inline offset reads it: the
-     * label has to land over the gap the container's own padding put the notch in.
+     * Which rung the control is drawn at. Read twice: for the inline offset, so
+     * the label lands over the gap the container's padding put the notch in, and
+     * for the type scale it rests at.
      */
     size: MPSize;
     /** The control the label names. */
     htmlFor?: string;
+    /**
+     * Whether the label is up in the notch. `false` rests it on the control's own
+     * line, at the control's own type scale, where it reads as the placeholder.
+     * @default true
+     */
+    shrunk?: boolean;
+    /**
+     * Whether the control is a `<textarea>`, which is the one case a resting
+     * label cannot simply be centred in. See `MULTILINE_REST`.
+     * @default false
+     */
+    multiline?: boolean;
 }
 /**
  * The label a reader actually gets.
@@ -34,5 +54,56 @@ export interface MPFieldLabelProps extends MPFieldOutlineProps {
  * border line where the legend cut it away. It cannot *be* the legend: the
  * outline is `pointer-events-none` so that clicks land on the control
  * underneath, and a label inside it would stop being clickable.
+ *
+ * Resting, it is `pointer-events-none` instead — it is lying over the text the
+ * caret goes into, and a click on it has to reach the control so the caret
+ * lands where the pointer did. A `<label for>` would only have focused the
+ * control, which puts the caret at the end of the text rather than under the
+ * pointer.
+ */
+export declare function MPFieldLabel({ size, label, required, htmlFor, shrunk, multiline }: MPFieldLabelProps): React.JSX.Element;
+export interface MPFloatingLabel {
+    /** Whether the label is up in the notch right now. */
+    shrunk: boolean;
+    /**
+     * Spread on the element the control sits inside — the `Field.Root`, or the
+     * shell `<div>` under it. Anything focusable within it counts as the field
+     * being focused, which is what a reader tabbing onto a password toggle or a
+     * stepper means by it.
+     */
+    focusProps: {
+        onFocusCapture: React.FocusEventHandler<HTMLElement>;
+        onBlurCapture: React.FocusEventHandler<HTMLElement>;
+    };
+}
+export interface MPFloatingLabelOptions {
+    /**
+     * Whether the label floats at all. `false` pins it in the notch — which is
+     * also what a control with no label wants, since there is nothing to rest.
+     */
+    floating: boolean;
+    /** Whether the control holds anything. A filled control keeps its label up. */
+    filled: boolean;
+    /**
+     * Anything else that holds the label up: a start adornment already occupying
+     * the resting label's place, or a popup the focus has moved into.
+     * @default false
+     */
+    pinned?: boolean;
+}
+/**
+ * Which of its two places the label is in, and how the field learns it moved.
+ *
+ * Focus is tracked here rather than read from Base UI's `data-focused` because
+ * the two do not agree on what a field is. `data-focused` follows the one
+ * control the `Field` owns, and half the shells here have a button beside it —
+ * a reveal toggle, a stepper, a clear × — that a reader on the keyboard is
+ * plainly still *in* the field for. `focus-within` on the shell is the honest
+ * boundary, and a capture-phase pair is how React spells it without a
+ * `:focus-within` selector, which cannot be read back as a value.
+ *
+ * The `relatedTarget` test is what keeps the label still while focus moves
+ * between two things inside the same shell. Without it, tabbing from the input
+ * to the toggle drops the label and lifts it again in the same frame.
  */
-export declare function MPFieldLabel({ size, label, required, htmlFor }: MPFieldLabelProps): React.JSX.Element;
+export declare function useFloatingLabel({ floating, filled, pinned }: MPFloatingLabelOptions): MPFloatingLabel;

package/dist/internal/FieldOutline.js

@@ -1 +1 @@
-import{jsx as r,Fragment as e,jsxs as o}from"react/jsx-runtime";import{Field as t}from"@base-ui/react/field";function a(t,a){return o(e,{children:[t,a?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:e,required:o=!1}){return r("fieldset",{"aria-hidden":"true",className:["pointer-events-none absolute inset-0 -top-[5px] m-0 min-w-0 px-2 pt-0","rounded-mp-xs border border-mp-outline","transition-[border-color] duration-(--mp-sys-motion-duration-short4)","group-hover:border-mp-on-surface","group-focus-within:border-2 group-focus-within:border-mp-primary","group-data-focused:border-2 group-data-focused:border-mp-primary","group-data-invalid:border-mp-error","group-data-disabled:border-mp-on-surface/12"].join(" "),children:e?r("legend",{className:"text-mp-body-small invisible float-none block h-[11px] w-auto p-0 px-1 leading-none",children:a(e,o)}):null})}export function MPFieldLabel({size:e,label:o,required:n=!1,htmlFor:i}){return r(t.Label,{htmlFor:i,className:["text-mp-body-small text-mp-on-surface-variant","transition-[color] duration-(--mp-sys-motion-duration-short4)","pointer-events-auto absolute top-0 -translate-y-1/2 px-1 leading-none","xs"===e?"left-1":"sm"===e?"left-2":"xl"===e?"left-4":"left-3","group-focus-within:text-mp-primary","group-data-focused:text-mp-primary","group-data-invalid:text-mp-error","group-data-disabled:text-mp-on-surface/38"].join(" "),children:a(o,n)})}
+import{jsx as r,Fragment as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Field as n}from"@base-ui/react/field";import{PROSE_TEXT as a}from"./scale";const i={xs:"left-1",sm:"left-2",md:"left-3",lg:"left-3",xl:"left-4"},s={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function d(o,n){return t(e,{children:[o,n?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:e,required:t=!1,notched:o=!0}){return r("fieldset",{"aria-hidden":"true",className:["pointer-events-none absolute inset-0 -top-[5px] m-0 min-w-0 px-2 pt-0","rounded-mp-xs border border-mp-outline","transition-[border-color] duration-(--mp-sys-motion-duration-short4)","group-hover:border-mp-on-surface","group-focus-within:border-2 group-focus-within:border-mp-primary","group-data-focused:border-2 group-data-focused:border-mp-primary","group-data-invalid:border-mp-error","group-data-disabled:border-mp-on-surface/12"].join(" "),children:e?r("legend",{className:["text-mp-body-small invisible float-none block h-[11px] w-auto overflow-hidden p-0","leading-none","ease-mp-standard transition-[max-width,padding]","duration-(--mp-sys-motion-duration-short4)",o?"max-w-full px-1":"max-w-0 px-0"].join(" "),children:d(e,t)}):null})}export function MPFieldLabel({size:e,label:t,required:o=!1,htmlFor:p,shrunk:l=!0,multiline:u=!1}){return r(n.Label,{htmlFor:p,"data-mp-shrunk":l?"":void 0,className:["text-mp-on-surface-variant","ease-mp-standard transition-[color,top,font-size,max-width]","duration-(--mp-sys-motion-duration-short4)","absolute -translate-y-1/2 px-1 leading-none",i[e],l?"text-mp-body-small pointer-events-auto top-0 max-w-none":[a[e],"pointer-events-none max-w-[calc(100%-2rem)] truncate",u?s[e]:"top-1/2"].join(" "),"group-focus-within:text-mp-primary","group-data-focused:text-mp-primary","group-data-invalid:text-mp-error","group-data-disabled:text-mp-on-surface/38"].join(" "),children:d(t,o)})}export function useFloatingLabel({floating:r,filled:e,pinned:t=!1}){const[n,a]=o.useState(!1);return{shrunk:!r||e||n||t,focusProps:{onFocusCapture:()=>a(!0),onBlurCapture:r=>{r.currentTarget.contains(r.relatedTarget)||a(!1)}}}}

package/dist/internal/Picker.d.ts

@@ -1,6 +1,30 @@
 import * as React from 'react';
 import type { MPPickerLabels } from './Calendar';
 import type { MPColor, MPSize, MPStyleProps } from '../types';
+/**
+ * The strings a trigger is held open by, kept across renders that did not
+ * change what it could say.
+ *
+ * `displaySamples` formats two dozen instants and deduplicates them, which is
+ * cheap once and not cheap sixty times a second — and sixty times a second is
+ * exactly what a range picker asks for, because moving the pointer across the
+ * calendar re-renders the whole control to redraw the band.
+ *
+ * ## Why it is keyed on the format's *contents*
+ *
+ * Because an options object is nearly always a fresh one. Three of the four
+ * pickers build theirs from a default parameter or a literal, so it is a new
+ * object on every render by construction; and a caller who writes
+ * `format={{ dateStyle: 'full' }}` inline hands over a new object too. Keyed on
+ * identity, the memo would miss every single time — which is what it was doing.
+ *
+ * Serialising instead means the memo holds for as long as the format *says* the
+ * same thing, whoever built the object. `internal/date.ts` keys its formatter
+ * cache the same way, and inherits the same harmless quirk: two objects whose
+ * keys are in a different order read as two formats. That costs one extra miss,
+ * never a wrong answer.
+ */
+export declare function useDisplaySamples(locale: string | undefined, options: Intl.DateTimeFormatOptions): string[];
 /**
  * The props a picker takes from its shell rather than inventing.
  *
@@ -16,11 +40,22 @@ export interface MPPickerShellProps extends MPStyleProps {
      */
     color?: MPColor;
     /**
-     * Label in the outline's notch. Always drawn there rather than floating over
-     * the value, so a picker with a label and one without sit at the same height
-     * in a form.
+     * Label for the picker, drawn in the outline's notch and — while nothing is
+     * chosen, the popup is shut and there is no leading glyph — resting on the
+     * trigger's own line where the placeholder would be. See `floatingLabel`.
      */
     label?: React.ReactNode;
+    /**
+     * Whether the label rests on the trigger's line while there is nothing to make
+     * room for, and rises into the notch on focus or on the first choice.
+     *
+     * A picker draws its own glyph before the value, and that glyph stands exactly
+     * where a resting label would — so in practice this only takes effect on a
+     * picker asked for without one, `startIcon={null}`. Two things cannot share a
+     * spot, and of the two the glyph is what says the trigger opens a calendar.
+     * @default true
+     */
+    floatingLabel?: boolean;
     /** The line under the control. Replaced by `errorMessage` when there is one. */
     description?: React.ReactNode;
     /**
@@ -29,7 +64,10 @@ export interface MPPickerShellProps extends MPStyleProps {
      * way to render a control that is visibly wrong with no explanation of why.
      */
     errorMessage?: React.ReactNode;
-    /** Content placed before the value. Defaults to the picker's own glyph. */
+    /**
+     * Content placed before the value. Defaults to the picker's own glyph, and
+     * `null` is how that glyph is asked for by name to go away.
+     */
     startIcon?: React.ReactNode;
     /** Marks the picker required, both to assistive technology and to the label. */
     required?: boolean;
@@ -44,8 +82,8 @@ export interface MPPickerShellProps extends MPStyleProps {
      */
     readOnly?: boolean;
     /**
-     * The id put on the trigger and pointed at by the label. Derived from `name`
-     * when omitted, and generated when there is no name either.
+     * The id put on the trigger and pointed at by the label. Generated when it is
+     * left out.
      */
     id?: string;
     className?: string;
@@ -70,12 +108,17 @@ interface InternalShellProps extends MPPickerShellProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     labels: MPPickerLabels;
-    /** `<input type="hidden">` rows, so the control submits with a form. */
+    /**
+     * `<input type="hidden">` rows, so the control submits with a form.
+     *
+     * Each row carries its own name, which is why the shell takes no `name` of
+     * its own: a range picker submits two of them under one name, and the id the
+     * label points at is generated rather than derived from it.
+     */
     hiddenValues?: Array<{
         name: string;
         value: string;
     }>;
-    name?: string;
     children: React.ReactNode;
     triggerRef?: React.Ref<HTMLButtonElement>;
 }
@@ -87,7 +130,7 @@ interface InternalShellProps extends MPPickerShellProps {
  * treatment, and the popup's `surface-container` at elevation 2 — which is the
  * same floating sheet a menu and a select's list are drawn on.
  */
-export declare function MPPickerShell({ slug, size, color, fullWidth, label, description, errorMessage, startIcon, required, disabled, readOnly, id, className, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, name, children, triggerRef }: InternalShellProps): React.JSX.Element;
+export declare function MPPickerShell({ slug, size, color, fullWidth, label, floatingLabel, description, errorMessage, startIcon, required, disabled, readOnly, id, className, style, display, samples, empty, clearable, onClear, open, onOpenChange, labels, hiddenValues, children, triggerRef }: InternalShellProps): React.JSX.Element;
 /**
  * The row of shortcuts under a picker's panel.
  *

package/dist/internal/Picker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{Field as t}from"@base-ui/react/field";import{Popover as n}from"@base-ui/react/popover";import{MPIcon as a}from"../components/icon/MPIcon";import{CloseIcon as o}from"../constants/icons";import{accentSlots as l}from"./accent";import{MPFieldLabel as s,MPFieldOutline as p}from"./FieldOutline";import{MPStateLayer as c}from"./StateLayer";import{MPSupportingText as m}from"./SupportingText";import{MPWidthSizer as d}from"./WidthSizer";import{CONTROL_ICON as u,hasContent as f,PROSE_TEXT as h}from"./scale";import{FADE as x,PORTAL_LAYER as g}from"./surface";const b={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}},v={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function MPPickerShell({slug:y,size:N="md",color:j="primary",fullWidth:P=!1,label:w,description:O,errorMessage:z,startIcon:M,required:k=!1,disabled:F=!1,readOnly:S=!1,id:B,className:C,style:I,display:R,samples:$,empty:q,clearable:T=!1,onClear:_,open:E,onOpenChange:W,labels:D,hiddenValues:L,name:V,children:Z,triggerRef:A}){const G=f(z),H=b[N],J=i.useId(),K=B??`mp-${y}-${V??J}`,Q=T&&!q&&!(F||S);return r(t.Root,{disabled:F,invalid:G,"data-mp-size":N,className:[`mp-${y} group flex-col align-top`,P?"flex w-full":"inline-flex w-fit",C??""].filter(Boolean).join(" "),style:{...l(j),...I},children:[r(n.Root,{open:E,onOpenChange:W,children:[r("div",{className:"relative w-full",children:[r(n.Trigger,{id:K,ref:A,disabled:F,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",H.padding,Q?"pe-10":"",H.height,h[N],F?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(S?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[M?e("span",{className:["flex shrink-0 items-center",F?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:M}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:["w-full truncate text-start",q&&!F?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:R}),e(d,{samples:$??[]})]})]}),Q?r("button",{type:"button","aria-label":D.clear,onClick:_,className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(c,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(a,{icon:o,size:u[N]})]}):null,e(p,{label:w,required:k}),f(w)?e(s,{size:N,label:w,required:k,htmlFor:K}):null]}),e(n.Portal,{children:e(n.Positioner,{className:g,sideOffset:4,align:"start",children:e(n.Popup,{initialFocus:!1,className:[`mp-${y}__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container`,"text-mp-on-surface outline-none",v[N],h[N],x].join(" "),children:Z})})})]}),e(m,{description:O,errorMessage:z,className:H.padding}),L?.map((r,i)=>e("input",{type:"hidden",name:r.name,value:r.value},i))]})}export function MPPickerFooter({children:r}){return e("div",{className:"border-mp-outline-variant flex items-center justify-end gap-1 border-t pt-1.5",children:r})}export function MPPickerDivider(){return e("div",{"aria-hidden":"true",className:"bg-mp-outline-variant w-px self-stretch"})}export const FOOTER_SIZE={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{Field as n}from"@base-ui/react/field";import{Popover as t}from"@base-ui/react/popover";import{MPIcon as o}from"../components/icon/MPIcon";import{CloseIcon as a}from"../constants/icons";import{accentSlots as l}from"./accent";import{MPFieldLabel as s,MPFieldOutline as p,useFloatingLabel as c}from"./FieldOutline";import{MPStateLayer as m}from"./StateLayer";import{MPSupportingText as d}from"./SupportingText";import{MPWidthSizer as u}from"./WidthSizer";import{displaySamples as f}from"./date";import{CONTROL_ICON as h,hasContent as g,PROSE_TEXT as x}from"./scale";import{FADE as b,PORTAL_LAYER as v}from"./surface";export function useDisplaySamples(e,r){const n=`${e??""} ${JSON.stringify(r)}`;return i.useMemo(()=>f(e,r),[n])}const y={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}},N={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function MPPickerShell({slug:f,size:j="md",color:P="primary",fullWidth:w=!1,label:O,floatingLabel:k=!0,description:M,errorMessage:S,startIcon:z,required:F=!1,disabled:B=!1,readOnly:C=!1,id:I,className:R,style:$,display:q,samples:T,empty:_,clearable:D=!1,onClear:E,open:L,onOpenChange:W,labels:J,hiddenValues:V,children:Z,triggerRef:A}){const G=g(S),H=y[j],K=i.useId(),Q=I??K,U=D&&!_&&!(B||C),{shrunk:X,focusProps:Y}=c({floating:k&&g(O),filled:!_,pinned:L||g(z)});return r(n.Root,{disabled:B,invalid:G,"data-mp-size":j,className:[`mp-${f} group flex-col align-top`,w?"flex w-full":"inline-flex w-fit",R??""].filter(Boolean).join(" "),style:{...l(P),...$},...Y,children:[r(t.Root,{open:L,onOpenChange:W,children:[r("div",{className:"relative w-full",children:[r(t.Trigger,{id:Q,ref:A,disabled:B,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",H.padding,U?"pe-10":"",H.height,x[j],B?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(C?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[z?e("span",{className:["flex shrink-0 items-center",B?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:z}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:["w-full truncate text-start",_&&!B?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:_&&!X?null:q}),e(u,{samples:T??[]})]})]}),U?r("button",{type:"button","aria-label":J.clear,onClick:E,className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(m,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(o,{icon:a,size:h[j]})]}):null,e(p,{label:O,required:F,notched:X}),g(O)?e(s,{size:j,label:O,required:F,htmlFor:Q,shrunk:X}):null]}),e(t.Portal,{children:e(t.Positioner,{className:v,sideOffset:4,align:"start",children:e(t.Popup,{initialFocus:!1,className:[`mp-${f}__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container`,"text-mp-on-surface outline-none",N[j],x[j],b].join(" "),children:Z})})})]}),e(d,{description:M,errorMessage:S,className:H.padding}),V?.map((r,i)=>e("input",{type:"hidden",name:r.name,value:r.value},i))]})}export function MPPickerFooter({children:r}){return e("div",{className:"border-mp-outline-variant flex items-center justify-end gap-1 border-t pt-1.5",children:r})}export function MPPickerDivider(){return e("div",{"aria-hidden":"true",className:"bg-mp-outline-variant w-px self-stretch"})}export const FOOTER_SIZE={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};

package/dist/internal/animate.d.ts

@@ -0,0 +1,179 @@
+/**
+ * The machinery every `MPAnimate*` component runs on.
+ *
+ * It lives in `internal/` for the reason `menu.ts` and `button-group.ts` do:
+ * eleven components need it and none of them should have to import another.
+ *
+ * ## The shape of it
+ *
+ * Every effect is one `@keyframes` in `styles.css` running from a state written
+ * entirely in `--_mp-anim-*` custom properties to the element's natural one.
+ * Nothing here generates CSS: it fills slots, and the stylesheet decides what
+ * they mean. That is the same split `accentSlots()` makes for colour, for the
+ * same reason — Tailwind only ever sees class names that appear literally in
+ * the source, so a per-value class would not survive the first prop.
+ *
+ * Because the from-state is the *keyframe* rather than a second class, running
+ * an effect backwards is `animation-direction: reverse` and nothing else. That
+ * is what makes `mode="out"` free on all five of the effects that take one —
+ * the fade, the grow, the zoom, the slide and the rotate — and, as it happens,
+ * correct:
+ * CSS mirrors the timing function along with the keyframes, so an entrance
+ * eased on `emphasized-decelerate` comes out accelerating on the way back. The
+ * specification asks for exactly that pair, and the browser supplies it.
+ *
+ * ## Why the defaults are `var()` rather than numbers
+ *
+ * A duration nobody set resolves to `var(--mp-sys-motion-duration-medium4)`,
+ * not to `400ms`. Both would draw the same animation today; only one of them
+ * moves when a page retunes its motion tokens. Same rule as everywhere else in
+ * this library: the value a caller does not name is the *token*, so a theme can
+ * still reach it.
+ *
+ * ## What is deliberately not here
+ *
+ * An animation that has to know what its children *are* — a marquee that
+ * duplicates them, a headline that swaps between them, a typewriter that counts
+ * characters — cannot be a class name and a few numbers. Those are components,
+ * and their logic stays in their own files.
+ */
+import * as React from 'react';
+import type { MPAnimateMode, MPAnimateRepeat, MPAnimateTrigger, MPAnimation, MPEasing, MPSide } from '../types';
+/** The class that reads the slots. Always paired with one of the below. */
+export declare const ANIM_BASE = "mp-anim";
+/**
+ * Which keyframe an effect runs.
+ *
+ * `grow` and `zoom` share one: they are the same arithmetic at two strengths,
+ * and a second identical `@keyframes` would only be a second place to fix a
+ * bug. What separates them is their defaults and their origin, which is a
+ * property rather than a keyframe.
+ */
+export declare const ANIMATION_CLASS: Record<MPAnimation, string>;
+/** A curve, as the stylesheet spells it. */
+export declare function easingValue(easing: MPEasing): string;
+/**
+ * A duration, as the stylesheet spells it.
+ *
+ * A number is milliseconds and lands as milliseconds. Nothing at all lands as
+ * the effect's own Material token, so a page that retunes its motion moves this
+ * animation with it.
+ */
+export declare function durationValue(duration: number | undefined, effect: MPAnimation, mode?: MPAnimateMode): string;
+/** A number is pixels; a string is already a CSS length. */
+export declare function lengthValue(value: number | string): string;
+/** `'infinite'` reaches CSS as the word; a count reaches it as the number. */
+export declare function repeatValue(repeat: MPAnimateRepeat): string;
+export declare function isInfinite(repeat: MPAnimateRepeat | undefined): boolean;
+/**
+ * `normal`, `reverse`, `alternate`, `alternate-reverse` — the four CSS already
+ * has, assembled from the two props that mean something to a caller.
+ *
+ * `mode="out"` is a reversed run rather than a keyframe of its own, which is
+ * also why a reversed animation ends held on its own first frame: `fill-mode`
+ * is `both`, so a faded-out element stays faded out instead of snapping back.
+ */
+export declare function directionValue(mode: MPAnimateMode, alternate: boolean | undefined): string;
+export interface AnimationSlotOptions {
+    /** Which effect's tokens to fall back to, and which keyframe to run. */
+    effect: MPAnimation;
+    /** Milliseconds. Unset takes the effect's Material duration token. */
+    duration?: number;
+    /** Milliseconds. */
+    delay: number;
+    /** Unset takes the effect's Material easing token. */
+    easing?: MPEasing;
+    repeat: MPAnimateRepeat;
+    alternate?: boolean;
+    mode?: MPAnimateMode;
+    /** Where the animated properties start. Only the ones an effect reads. */
+    opacity?: number;
+    scale?: number;
+    x?: string;
+    y?: string;
+    angle?: string;
+    angleTo?: string;
+}
+/**
+ * The `--_mp-anim-*` slots, as an inline style object.
+ *
+ * Inline rather than utilities for the reason the accent slots are: these are
+ * per-instance numbers, and Tailwind cannot generate a class for a duration it
+ * has never seen written down.
+ */
+export declare function animationSlots(options: AnimationSlotOptions): React.CSSProperties;
+/**
+ * Which way a slide starts, given the edge it comes from.
+ *
+ * `MPSide` is physical everywhere in this library, and it stays physical here:
+ * something sliding in from the top of the window comes from the top in every
+ * writing direction.
+ */
+export declare function slideOffsets(from: MPSide, distance: number | string): {
+    x: string;
+    y: string;
+};
+export declare function usePrefersReducedMotion(): boolean;
+export interface AnimationRunOptions {
+    trigger: MPAnimateTrigger;
+    play?: boolean;
+    once: boolean;
+    threshold: number;
+    paused?: boolean;
+    /** An infinite effect stops when the pointer leaves; a finite one finishes. */
+    infinite: boolean;
+}
+export interface AnimationRun {
+    /** Goes on the animated element. */
+    ref: React.RefCallback<HTMLElement>;
+    /** `running` or `paused`, for `--_mp-anim-state`. */
+    state: 'running' | 'paused';
+    /** Whether the animation has been let go at all. */
+    started: boolean;
+    /** Spread onto the element when `trigger` is `hover`; empty otherwise. */
+    handlers: React.HTMLAttributes<HTMLElement>;
+}
+/**
+ * Starts, restarts and holds an animation.
+ *
+ * Two things here are less obvious than they look.
+ *
+ * **Waiting is `animation-play-state: paused`, not a second class.** An element
+ * that has not been triggered yet has to already look like its own first frame,
+ * or a `visible` fade would be fully drawn until it scrolled into view and then
+ * blink out to start. With `fill-mode: both` a paused animation shows exactly
+ * that frame, so waiting and running are one animation in two states rather
+ * than two states to keep in step.
+ *
+ * **Restarting reaches for the DOM.** There is no way to rewind a CSS animation
+ * from React: re-rendering with the same class changes nothing, and a `key`
+ * would restart the animation by unmounting the children, taking their state
+ * with it. Clearing `animation-name`, reading a layout property to force the
+ * style to settle, and putting it back is the one move that rewinds the element
+ * and leaves everything inside it alone.
+ */
+export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite }: AnimationRunOptions): AnimationRun;
+export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions {
+}
+export interface AnimateElement {
+    ref: React.RefCallback<HTMLElement>;
+    className: string;
+    style: React.CSSProperties;
+    /** The hover handlers and the two data attributes, ready to be spread. */
+    props: React.HTMLAttributes<HTMLElement> & Record<string, unknown>;
+}
+/**
+ * Everything an `MPAnimate*` root needs, in one call.
+ *
+ * The six effect components differ only in their defaults and in which slots
+ * they fill, so this is where the identical two-thirds of each of them lives.
+ * The ones that have to understand their children — Typing, Marquee, Headline,
+ * Appear — call `useAnimationRun` directly and put the classes where their own
+ * structure needs them.
+ *
+ * `data-mp-animation` and `data-mp-state` are here rather than in each
+ * component because they are the same two facts every time, and because a test
+ * that has to assert on a class name is a test that breaks when a class name
+ * changes.
+ */
+export declare function useAnimateElement(params: AnimateElementParams): AnimateElement;

package/dist/internal/animate.js

@@ -0,0 +1 @@
+import*as e from"react";export const ANIM_BASE="mp-anim";export const ANIMATION_CLASS={fade:"mp-anim-fade",grow:"mp-anim-scale",slide:"mp-anim-slide",zoom:"mp-anim-scale",rotate:"mp-anim-rotate",blink:"mp-anim-blink"};const n={fade:{in:"medium2",out:"short4"},grow:{in:"medium4",out:"short4"},slide:{in:"medium4",out:"short4"},zoom:{in:"medium4",out:"short4"},rotate:{in:"long2",out:"medium2"},blink:{in:"extra-long4",out:"extra-long4"}},t={fade:"emphasized-decelerate",grow:"emphasized-decelerate",slide:"emphasized-decelerate",zoom:"emphasized-decelerate",rotate:"emphasized-decelerate",blink:"standard"};export function easingValue(e){return`var(--mp-sys-motion-easing-${e})`}export function durationValue(e,t,i="in"){return void 0!==e?`${e}ms`:`var(--mp-sys-motion-duration-${n[t][i]})`}export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}export function directionValue(e,n){return"out"===e?n?"alternate-reverse":"reverse":n?"alternate":"normal"}export function animationSlots(e){const n=e.mode??"in",i={"--_mp-anim-duration":durationValue(e.duration,e.effect,n),"--_mp-anim-delay":`${e.delay}ms`,"--_mp-anim-ease":easingValue(e.easing??t[e.effect]),"--_mp-anim-repeat":repeatValue(e.repeat),"--_mp-anim-direction":directionValue(n,e.alternate)};return void 0!==e.opacity&&(i["--_mp-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(i["--_mp-anim-scale"]=String(e.scale)),void 0!==e.x&&(i["--_mp-anim-x"]=e.x),void 0!==e.y&&(i["--_mp-anim-y"]=e.y),void 0!==e.angle&&(i["--_mp-anim-angle"]=e.angle),void 0!==e.angleTo&&(i["--_mp-anim-angle-to"]=e.angleTo),i}export function slideOffsets(e,n){const t=lengthValue(n),i="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:i};case"bottom":return{x:"0px",y:t};case"left":return{x:i,y:"0px"};default:return{x:t,y:"0px"}}}const i="(prefers-reduced-motion: reduce)";function a(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const n=window.matchMedia(i);return n.addEventListener("change",e),()=>n.removeEventListener("change",e)}function r(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia(i).matches}function o(){return!1}export function usePrefersReducedMotion(){return e.useSyncExternalStore(a,r,o)}export function useAnimationRun({trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o}){const s=e.useRef(null),[u,m]=e.useState("mount"===n),[c,d]=e.useState(0),l=e.useCallback(()=>{m(!0),d(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=s.current;if(!e||0===c)return;const n=[e,...e.querySelectorAll(".mp-anim, .mp-marquee-track")];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[c]),e.useEffect(()=>{if("visible"!==n)return;const e=s.current;if(!e||"undefined"==typeof IntersectionObserver)return void m(!0);const t=new IntersectionObserver(([e])=>{e.isIntersecting?(l(),i&&t.disconnect()):i||m(!1)},{threshold:a});return t.observe(e),()=>t.disconnect()},[n,i,a,l]),e.useEffect(()=>{"manual"===n&&(t?l():m(!1))},[n,t,l]);const p=e.useCallback(()=>{o&&m(!1)},[o]),f="hover"===n?{onPointerEnter:l,onFocus:l,onPointerLeave:p,onBlur:p}:{};return{ref:e.useCallback(e=>{s.current=e},[]),state:u&&!r?"running":"paused",started:u,handlers:f}}export function useAnimateElement(e){const{trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o,...s}=e,u=useAnimationRun({trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o});return{ref:u.ref,className:`mp-anim ${ANIMATION_CLASS[s.effect]}`,style:{...animationSlots(s),"--_mp-anim-state":u.state},props:{...u.handlers,"data-mp-animation":s.effect,"data-mp-state":u.state}}}

package/dist/internal/date.d.ts

@@ -148,9 +148,9 @@ export declare function toISODateTime(date: Date, withSeconds?: boolean): string
  * (`S`, `M`, `T`, `W`, `T`, `F`, `S`), so the full name goes on the header's
  * `aria-label` and a screen reader hears "Monday" rather than "M".
  */
-export declare function weekdayLabels(locale: string | undefined, weekStartsOn: MPWeekday, weekday?: 'narrow' | 'short' | 'long'): string[];
+export declare function weekdayLabels(locale: string | undefined, weekStartsOn: MPWeekday, weekday?: 'narrow' | 'short' | 'long'): readonly string[];
 /** The twelve month names, January first, in the locale's own words. */
-export declare function monthLabels(locale: string | undefined, month?: 'short' | 'long'): string[];
+export declare function monthLabels(locale: string | undefined, month?: 'short' | 'long'): readonly string[];
 /**
  * Does this locale write the month before the year?
  *

package/dist/internal/date.js

@@ -1 +1 @@
-export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,r){const n=new Date(0);return n.setFullYear(t,e,r),n.setHours(0,0,0,0),n}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}export function addDays(t,e){const r=new Date(t.getTime());return r.setDate(r.getDate()+e),r}export function addMonths(t,e){const r=new Date(t.getTime()),n=makeDate(t.getFullYear(),t.getMonth()+e,1);return r.setFullYear(n.getFullYear(),n.getMonth(),Math.min(t.getDate(),daysInMonth(n.getFullYear(),n.getMonth()))),r}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function isDayOutside(t,e,r){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(r)&&compareDay(t,r)>0}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const r=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(r/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(r/60);return[t,t+59]}if("second"===t)return[r,r];const n=e.getHours()<12?0:43200;return[n,n+43200-1]}export function withTime(t,e){const r=new Date(t.getTime());return r.setHours(e.hours??r.getHours(),e.minutes??r.getMinutes(),e.seconds??r.getSeconds(),0),r}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const r=startOfMonth(t),n=(r.getDay()-e+7)%7,o=addDays(r,-n);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,r)=>addDays(o,7*e+r)))}export function yearPageStart(t){return t-(t%12+12)%12}const t=new Map;export function dateFormatter(e,r){const n=`${e??""}\0${JSON.stringify(r)}`;let o=t.get(n);return o||(o=new Intl.DateTimeFormat(e,r),t.set(n,o)),o}export function formatDate(t,e,r){return isValidDate(t)?dateFormatter(e,r).format(t):""}const e=Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58));export function displaySamples(t,r){const n=dateFormatter(t,r);return[...new Set(e.map(t=>n.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const e=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${e(t.getMonth()+1)}-${e(t.getDate())}`}export function toISOTime(t,e=!1){const r=t=>String(t).padStart(2,"0"),n=`${r(t.getHours())}:${r(t.getMinutes())}`;return e?`${n}:${r(t.getSeconds())}`:n}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const r=makeDate(2021,7,1);export function weekdayLabels(t,e,n="narrow"){const o=dateFormatter(t,{weekday:n});return Array.from({length:7},(t,n)=>o.format(addDays(r,(e+n)%7)))}export function monthLabels(t,e="short"){const r=dateFormatter(t,{month:e});return Array.from({length:12},(t,e)=>r.format(makeDate(2021,e,1)))}export function isMonthBeforeYear(t){const e=dateFormatter(t,{year:"numeric",month:"long"}).formatToParts(r);return e.findIndex(t=>"month"===t.type)<e.findIndex(t=>"year"===t.type)}export function isHour12(t){const e=dateFormatter(t,{hour:"numeric"}).resolvedOptions();return e.hourCycle?"h11"===e.hourCycle||"h12"===e.hourCycle:!0===e.hour12}export function meridiemLabels(t){const e=dateFormatter(t,{hour:"numeric",hour12:!0}),n=t=>{const n=e.formatToParts(withTime(r,{hours:t})).find(t=>"dayPeriod"===t.type);return n?.value??(t<12?"AM":"PM")};return[n(9),n(21)]}export function localeWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,r=new Intl.Locale(e),n="function"==typeof r.getWeekInfo?r.getWeekInfo():r.weekInfo;if("number"==typeof n?.firstDay)return n.firstDay%7}catch{}return 0}
+export const YEAR_PAGE_SIZE=12;export function makeDate(t,e,r){const n=new Date(0);return n.setFullYear(t,e,r),n.setHours(0,0,0,0),n}export function isValidDate(t){return t instanceof Date&&!Number.isNaN(t.getTime())}export function startOfDay(t){const e=new Date(t.getTime());return e.setHours(0,0,0,0),e}export function startOfMonth(t){return makeDate(t.getFullYear(),t.getMonth(),1)}export function daysInMonth(t,e){return makeDate(t,e+1,0).getDate()}export function today(){return startOfDay(new Date)}export function addDays(t,e){const r=new Date(t.getTime());return r.setDate(r.getDate()+e),r}export function addMonths(t,e){const r=new Date(t.getTime()),n=makeDate(t.getFullYear(),t.getMonth()+e,1);return r.setFullYear(n.getFullYear(),n.getMonth(),Math.min(t.getDate(),daysInMonth(n.getFullYear(),n.getMonth()))),r}export function addYears(t,e){return addMonths(t,12*e)}export function compareDay(t,e){return startOfDay(t).getTime()-startOfDay(e).getTime()}export function isSameDay(t,e){return isValidDate(t)&&isValidDate(e)&&0===compareDay(t,e)}export function isSameMonth(t,e){return isValidDate(t)&&isValidDate(e)&&t.getFullYear()===e.getFullYear()&&t.getMonth()===e.getMonth()}export function isDayOutside(t,e,r){return!!(isValidDate(e)&&compareDay(t,e)<0)||isValidDate(r)&&compareDay(t,r)>0}export function secondsOfDay(t){return 3600*t.getHours()+60*t.getMinutes()+t.getSeconds()}export function timeUnitSpan(t,e){const r=secondsOfDay(e);if("hour"===t){const t=3600*Math.floor(r/3600);return[t,t+3599]}if("minute"===t){const t=60*Math.floor(r/60);return[t,t+59]}if("second"===t)return[r,r];const n=e.getHours()<12?0:43200;return[n,n+43200-1]}export function withTime(t,e){const r=new Date(t.getTime());return r.setHours(e.hours??r.getHours(),e.minutes??r.getMinutes(),e.seconds??r.getSeconds(),0),r}export function mergeDateAndTime(t,e){return withTime(startOfDay(t),{hours:e.getHours(),minutes:e.getMinutes(),seconds:e.getSeconds()})}export function calendarWeeks(t,e){const r=startOfMonth(t),n=(r.getDay()-e+7)%7,o=addDays(r,-n);return Array.from({length:6},(t,e)=>Array.from({length:7},(t,r)=>addDays(o,7*e+r)))}export function yearPageStart(t){return t-(t%12+12)%12}const t=new Map;export function dateFormatter(e,r){const n=`${e??""}\0${JSON.stringify(r)}`;let o=t.get(n);return o||(o=new Intl.DateTimeFormat(e,r),t.set(n,o)),o}export function formatDate(t,e,r){return isValidDate(t)?dateFormatter(e,r).format(t):""}const e=Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58));export function displaySamples(t,r){const n=dateFormatter(t,r);return[...new Set(e.map(t=>n.format(t)))]}export function withPlaceholder(t,e){return"string"==typeof e&&""!==e?[...t,e]:t}export function toISODate(t){const e=t=>String(t).padStart(2,"0");return`${String(t.getFullYear()).padStart(4,"0")}-${e(t.getMonth()+1)}-${e(t.getDate())}`}export function toISOTime(t,e=!1){const r=t=>String(t).padStart(2,"0"),n=`${r(t.getHours())}:${r(t.getMinutes())}`;return e?`${n}:${r(t.getSeconds())}`:n}export function toISODateTime(t,e=!1){return`${toISODate(t)}T${toISOTime(t,e)}`}const r=makeDate(2021,7,1),n=new Map;export function weekdayLabels(t,e,o="narrow"){const a=`w ${t??""} ${e} ${o}`;let s=n.get(a);if(!s){const i=dateFormatter(t,{weekday:o});s=Array.from({length:7},(t,n)=>i.format(addDays(r,(e+n)%7))),n.set(a,s)}return s}export function monthLabels(t,e="short"){const r=`m ${t??""} ${e}`;let o=n.get(r);if(!o){const a=dateFormatter(t,{month:e});o=Array.from({length:12},(t,e)=>a.format(makeDate(2021,e,1))),n.set(r,o)}return o}export function isMonthBeforeYear(t){const e=dateFormatter(t,{year:"numeric",month:"long"}).formatToParts(r);return e.findIndex(t=>"month"===t.type)<e.findIndex(t=>"year"===t.type)}export function isHour12(t){const e=dateFormatter(t,{hour:"numeric"}).resolvedOptions();return e.hourCycle?"h11"===e.hourCycle||"h12"===e.hourCycle:!0===e.hour12}export function meridiemLabels(t){const e=dateFormatter(t,{hour:"numeric",hour12:!0}),n=t=>{const n=e.formatToParts(withTime(r,{hours:t})).find(t=>"dayPeriod"===t.type);return n?.value??(t<12?"AM":"PM")};return[n(9),n(21)]}export function localeWeekStart(t){try{const e=t??(new Intl.DateTimeFormat).resolvedOptions().locale,r=new Intl.Locale(e),n="function"==typeof r.getWeekInfo?r.getWeekInfo():r.weekInfo;if("number"==typeof n?.firstDay)return n.firstDay%7}catch{}return 0}