material-plus-ui 1.3.0 → 1.4.0

package/dist/index.d.ts

@@ -1,78 +1,91 @@
-export * from './types';
-export { registerMPMessages, type MPLocale, type MPMessages, type MPPartialMessages } from './internal/i18n';
-export * from './constants/icons';
-export * from './components/accordion';
-export * from './components/alert';
-export * from './components/animate-appear';
-export * from './components/animate-blink';
-export * from './components/animate-fade';
-export * from './components/animate-grow';
-export * from './components/animate-headline';
-export * from './components/animate-lighting';
-export * from './components/animate-marquee';
-export * from './components/animate-rotate';
-export * from './components/animate-slide';
-export * from './components/animate-typing';
-export * from './components/animate-zoom';
-export * from './components/aspect-ratio';
-export * from './components/avatar';
-export * from './components/badge';
-export * from './components/blockquote';
-export * from './components/bottom-navigation';
-export * from './components/box';
-export * from './components/breadcrumb';
-export * from './components/button';
-export * from './components/button-group';
-export * from './components/card';
-export * from './components/carousel';
-export * from './components/chat-bubble';
-export * from './components/checkbox';
-export * from './components/chip';
-export * from './components/collapsible';
-export * from './components/color-picker';
-export * from './components/combobox';
-export * from './components/container';
-export * from './components/date-picker';
-export * from './components/date-range-picker';
-export * from './components/date-time-picker';
-export * from './components/dialog';
-export * from './components/divider';
-export * from './components/drawer';
-export * from './components/empty';
-export * from './components/file-picker';
-export * from './components/floating-action-button';
-export * from './components/grid';
-export * from './components/highlight';
-export * from './components/icon';
-export * from './components/icon-button';
-export * from './components/list';
-export * from './components/locale';
-export * from './components/menu';
-export * from './components/number-field';
-export * from './components/otp-field';
-export * from './components/overlay';
-export * from './components/pagination';
-export * from './components/panes';
-export * from './components/pill';
-export * from './components/popover';
-export * from './components/progress-box';
-export * from './components/progress-circular';
-export * from './components/progress-linear';
-export * from './components/radio-group';
-export * from './components/rating';
-export * from './components/segmented-button';
-export * from './components/select';
-export * from './components/shortcut';
-export * from './components/skeleton';
-export * from './components/slider';
-export * from './components/snackbar';
-export * from './components/spoiler';
-export * from './components/switch';
-export * from './components/table';
-export * from './components/tabs';
-export * from './components/text-field';
-export * from './components/text-link';
-export * from './components/time-picker';
-export * from './components/timeline';
-export * from './components/tooltip';
-export * from './components/typography';
+export * from './types.js';
+export { registerMPMessages, type MPLocale, type MPMessages, type MPPartialMessages } from './internal/i18n.js';
+export * from './constants/icons.js';
+export * from './components/accordion/index.js';
+export * from './components/alert/index.js';
+export * from './components/animate-appear/index.js';
+export * from './components/animate-blink/index.js';
+export * from './components/animate-fade/index.js';
+export * from './components/animate-grow/index.js';
+export * from './components/animate-headline/index.js';
+export * from './components/animate-lighting/index.js';
+export * from './components/animate-marquee/index.js';
+export * from './components/animate-rotate/index.js';
+export * from './components/animate-slide/index.js';
+export * from './components/animate-typing/index.js';
+export * from './components/animate-zoom/index.js';
+export * from './components/aspect-ratio/index.js';
+export * from './components/avatar/index.js';
+export * from './components/avatar-group/index.js';
+export * from './components/badge/index.js';
+export * from './components/blockquote/index.js';
+export * from './components/bottom-navigation/index.js';
+export * from './components/box/index.js';
+export * from './components/breadcrumb/index.js';
+export * from './components/button/index.js';
+export * from './components/button-group/index.js';
+export * from './components/card/index.js';
+export * from './components/carousel/index.js';
+export * from './components/chat-bubble/index.js';
+export * from './components/checkbox/index.js';
+export * from './components/chip/index.js';
+export * from './components/collapsible/index.js';
+export * from './components/color-picker/index.js';
+export * from './components/combobox/index.js';
+export * from './components/command-palette/index.js';
+export * from './components/container/index.js';
+export * from './components/date-picker/index.js';
+export * from './components/date-range-picker/index.js';
+export * from './components/date-time-picker/index.js';
+export * from './components/dialog/index.js';
+export * from './components/divider/index.js';
+export * from './components/drawer/index.js';
+export * from './components/empty/index.js';
+export * from './components/fieldset/index.js';
+export * from './components/file-picker/index.js';
+export * from './components/floating-action-button/index.js';
+export * from './components/footer/index.js';
+export * from './components/form/index.js';
+export * from './components/grid/index.js';
+export * from './components/header/index.js';
+export * from './components/highlight/index.js';
+export * from './components/icon/index.js';
+export * from './components/icon-button/index.js';
+export * from './components/list/index.js';
+export * from './components/locale/index.js';
+export * from './components/menu/index.js';
+export * from './components/menubar/index.js';
+export * from './components/navigation-menu/index.js';
+export * from './components/number-field/index.js';
+export * from './components/otp-field/index.js';
+export * from './components/overlay/index.js';
+export * from './components/page-layout/index.js';
+export * from './components/pagination/index.js';
+export * from './components/panes/index.js';
+export * from './components/pill/index.js';
+export * from './components/popover/index.js';
+export * from './components/progress-box/index.js';
+export * from './components/progress-circular/index.js';
+export * from './components/progress-linear/index.js';
+export * from './components/radio-group/index.js';
+export * from './components/rating/index.js';
+export * from './components/segmented-button/index.js';
+export * from './components/select/index.js';
+export * from './components/shortcut/index.js';
+export * from './components/sidebar/index.js';
+export * from './components/skeleton/index.js';
+export * from './components/slider/index.js';
+export * from './components/snackbar/index.js';
+export * from './components/spoiler/index.js';
+export * from './components/switch/index.js';
+export * from './components/table/index.js';
+export * from './components/tabs/index.js';
+export * from './components/text-field/index.js';
+export * from './components/text-link/index.js';
+export * from './components/time-picker/index.js';
+export * from './components/timeline/index.js';
+export * from './components/toggle/index.js';
+export * from './components/toggle-group/index.js';
+export * from './components/tooltip/index.js';
+export * from './components/transfer/index.js';
+export * from './components/typography/index.js';

package/dist/index.js

@@ -1 +1 @@
-export*from"./types";export{registerMPMessages}from"./internal/i18n";export*from"./constants/icons";export*from"./components/accordion";export*from"./components/alert";export*from"./components/animate-appear";export*from"./components/animate-blink";export*from"./components/animate-fade";export*from"./components/animate-grow";export*from"./components/animate-headline";export*from"./components/animate-lighting";export*from"./components/animate-marquee";export*from"./components/animate-rotate";export*from"./components/animate-slide";export*from"./components/animate-typing";export*from"./components/animate-zoom";export*from"./components/aspect-ratio";export*from"./components/avatar";export*from"./components/badge";export*from"./components/blockquote";export*from"./components/bottom-navigation";export*from"./components/box";export*from"./components/breadcrumb";export*from"./components/button";export*from"./components/button-group";export*from"./components/card";export*from"./components/carousel";export*from"./components/chat-bubble";export*from"./components/checkbox";export*from"./components/chip";export*from"./components/collapsible";export*from"./components/color-picker";export*from"./components/combobox";export*from"./components/container";export*from"./components/date-picker";export*from"./components/date-range-picker";export*from"./components/date-time-picker";export*from"./components/dialog";export*from"./components/divider";export*from"./components/drawer";export*from"./components/empty";export*from"./components/file-picker";export*from"./components/floating-action-button";export*from"./components/grid";export*from"./components/highlight";export*from"./components/icon";export*from"./components/icon-button";export*from"./components/list";export*from"./components/locale";export*from"./components/menu";export*from"./components/number-field";export*from"./components/otp-field";export*from"./components/overlay";export*from"./components/pagination";export*from"./components/panes";export*from"./components/pill";export*from"./components/popover";export*from"./components/progress-box";export*from"./components/progress-circular";export*from"./components/progress-linear";export*from"./components/radio-group";export*from"./components/rating";export*from"./components/segmented-button";export*from"./components/select";export*from"./components/shortcut";export*from"./components/skeleton";export*from"./components/slider";export*from"./components/snackbar";export*from"./components/spoiler";export*from"./components/switch";export*from"./components/table";export*from"./components/tabs";export*from"./components/text-field";export*from"./components/text-link";export*from"./components/time-picker";export*from"./components/timeline";export*from"./components/tooltip";export*from"./components/typography";
+export*from"./types.js";export{registerMPMessages}from"./internal/i18n.js";export*from"./constants/icons.js";export*from"./components/accordion/index.js";export*from"./components/alert/index.js";export*from"./components/animate-appear/index.js";export*from"./components/animate-blink/index.js";export*from"./components/animate-fade/index.js";export*from"./components/animate-grow/index.js";export*from"./components/animate-headline/index.js";export*from"./components/animate-lighting/index.js";export*from"./components/animate-marquee/index.js";export*from"./components/animate-rotate/index.js";export*from"./components/animate-slide/index.js";export*from"./components/animate-typing/index.js";export*from"./components/animate-zoom/index.js";export*from"./components/aspect-ratio/index.js";export*from"./components/avatar/index.js";export*from"./components/avatar-group/index.js";export*from"./components/badge/index.js";export*from"./components/blockquote/index.js";export*from"./components/bottom-navigation/index.js";export*from"./components/box/index.js";export*from"./components/breadcrumb/index.js";export*from"./components/button/index.js";export*from"./components/button-group/index.js";export*from"./components/card/index.js";export*from"./components/carousel/index.js";export*from"./components/chat-bubble/index.js";export*from"./components/checkbox/index.js";export*from"./components/chip/index.js";export*from"./components/collapsible/index.js";export*from"./components/color-picker/index.js";export*from"./components/combobox/index.js";export*from"./components/command-palette/index.js";export*from"./components/container/index.js";export*from"./components/date-picker/index.js";export*from"./components/date-range-picker/index.js";export*from"./components/date-time-picker/index.js";export*from"./components/dialog/index.js";export*from"./components/divider/index.js";export*from"./components/drawer/index.js";export*from"./components/empty/index.js";export*from"./components/fieldset/index.js";export*from"./components/file-picker/index.js";export*from"./components/floating-action-button/index.js";export*from"./components/footer/index.js";export*from"./components/form/index.js";export*from"./components/grid/index.js";export*from"./components/header/index.js";export*from"./components/highlight/index.js";export*from"./components/icon/index.js";export*from"./components/icon-button/index.js";export*from"./components/list/index.js";export*from"./components/locale/index.js";export*from"./components/menu/index.js";export*from"./components/menubar/index.js";export*from"./components/navigation-menu/index.js";export*from"./components/number-field/index.js";export*from"./components/otp-field/index.js";export*from"./components/overlay/index.js";export*from"./components/page-layout/index.js";export*from"./components/pagination/index.js";export*from"./components/panes/index.js";export*from"./components/pill/index.js";export*from"./components/popover/index.js";export*from"./components/progress-box/index.js";export*from"./components/progress-circular/index.js";export*from"./components/progress-linear/index.js";export*from"./components/radio-group/index.js";export*from"./components/rating/index.js";export*from"./components/segmented-button/index.js";export*from"./components/select/index.js";export*from"./components/shortcut/index.js";export*from"./components/sidebar/index.js";export*from"./components/skeleton/index.js";export*from"./components/slider/index.js";export*from"./components/snackbar/index.js";export*from"./components/spoiler/index.js";export*from"./components/switch/index.js";export*from"./components/table/index.js";export*from"./components/tabs/index.js";export*from"./components/text-field/index.js";export*from"./components/text-link/index.js";export*from"./components/time-picker/index.js";export*from"./components/timeline/index.js";export*from"./components/toggle/index.js";export*from"./components/toggle-group/index.js";export*from"./components/tooltip/index.js";export*from"./components/transfer/index.js";export*from"./components/typography/index.js";

package/dist/internal/Calendar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type MPTimeUnit } from './date';
-import type { MPMessages } from './i18n';
-import type { MPColor, MPSize, MPWeekday } from '../types';
+import { type MPTimeUnit } from './date.js';
+import type { MPMessages } from './i18n.js';
+import type { MPColor, MPSize, MPWeekday } from '../types.js';
 /**
  * The calendar grid and the clock columns, written once for the four pickers.
  *

package/dist/internal/Calendar.js

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPSize } from '../types';
+import type { MPSize } from '../types.js';
 export interface MPFieldOutlineProps {
     /** The label, which is what cuts the notch. Without one the outline is closed. */
     label?: React.ReactNode;

package/dist/internal/FieldOutline.js

@@ -1 +1,2 @@
-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)}}}}
+"use client";
+import{jsx as r,Fragment as t,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{Field as a}from"@base-ui/react/field";import{PROSE_TEXT as n}from"./scale.js";const i={xs:"start-1",sm:"start-2",md:"start-3",lg:"start-3",xl:"start-4"},s={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function d(o,a){return e(t,{children:[o,a?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:t,required:e=!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:t?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(t,e)}):null})}export function MPFieldLabel({size:t,label:e,required:o=!1,htmlFor:p,shrunk:u=!0,multiline:l=!1}){return r(a.Label,{htmlFor:p,"data-mp-shrunk":u?"":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[t],u?"text-mp-body-small pointer-events-auto top-0 max-w-none":[n[t],"pointer-events-none max-w-[calc(100%-2rem)] truncate",l?s[t]:"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(e,o)})}export function useFloatingLabel({floating:r,filled:t,pinned:e=!1}){const[a,n]=o.useState(!1);return{shrunk:!r||t||a||e,focusProps:{onFocusCapture:()=>n(!0),onBlurCapture:r=>{r.currentTarget.contains(r.relatedTarget)||n(!1)}}}}

package/dist/internal/Picker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { MPPickerLabels } from './Calendar';
-import type { MPColor, MPSize, MPStyleProps } from '../types';
+import type { MPPickerLabels } from './Calendar.js';
+import type { MPColor, MPSize, MPStyleProps } from '../types.js';
 /**
  * The strings a trigger is held open by, kept across renders that did not
  * change what it could say.

package/dist/internal/Picker.js

@@ -1 +1,2 @@
-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"};
+"use client";
+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.js";import{CloseIcon as a}from"../constants/icons.js";import{accentSlots as s}from"./accent.js";import{MPFieldLabel as l,MPFieldOutline as p,useFloatingLabel as c}from"./FieldOutline.js";import{MPStateLayer as m}from"./StateLayer.js";import{MPSupportingText as d}from"./SupportingText.js";import{MPWidthSizer as u}from"./WidthSizer.js";import{displaySamples as f}from"./date.js";import{CONTROL_ICON as h,hasContent as g,PROSE_TEXT as x}from"./scale.js";import{FADE as b,PORTAL_LAYER as j}from"./surface.js";export function useDisplaySamples(e,r){const n=`${e??""} ${JSON.stringify(r)}`;return i.useMemo(()=>f(e,r),[n])}const v={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"}},y={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function MPPickerShell({slug:f,size:N="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=v[N],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":N,className:[`mp-${f} group flex-col align-top`,w?"flex w-full":"inline-flex w-fit",R??""].filter(Boolean).join(" "),style:{...s(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[N],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[N]})]}):null,e(p,{label:O,required:F,notched:X}),g(O)?e(l,{size:N,label:O,required:F,htmlFor:Q,shrunk:X}):null]}),e(t.Portal,{children:e(t.Positioner,{className:j,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",y[N],x[N],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/StateLayer.js

@@ -1 +1,2 @@
+"use client";
 import{jsx as o}from"react/jsx-runtime";export function MPStateLayer({layer:t="inset-0 rounded-[inherit] bg-current",className:a}){return o("span",{"aria-hidden":"true",className:["pointer-events-none absolute opacity-0",t,"transition-opacity duration-(--mp-sys-motion-duration-short4)","group-hover:opacity-8","group-active:opacity-10","group-focus-visible:opacity-10","group-disabled:opacity-0 group-data-disabled:opacity-0",a??""].filter(Boolean).join(" ")})}

package/dist/internal/SupportingText.d.ts

@@ -20,4 +20,4 @@ export declare function MPSupportingText({ description, errorMessage, className
     errorMessage?: React.ReactNode;
     /** Whatever inset lines the text up with the control it belongs to. */
     className?: string;
-}): React.JSX.Element | null;
+}): React.JSX.Element;

package/dist/internal/SupportingText.js

@@ -1 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{Field as e}from"@base-ui/react/field";import{META_TEXT as t,hasContent as o}from"./scale";export function MPSupportingText({description:a,errorMessage:s,className:i}){const n=["mp-supporting-text block",t,"data-disabled:text-mp-on-surface/38",i??""].filter(Boolean).join(" ");return o(s)?r(e.Error,{match:!0,className:`${n} text-mp-error`,children:s}):o(a)?r(e.Description,{className:`${n} text-mp-on-surface-variant`,children:a}):null}
+"use client";
+import{jsx as r}from"react/jsx-runtime";import{Field as e}from"@base-ui/react/field";import{META_TEXT as t,hasContent as o}from"./scale.js";export function MPSupportingText({description:a,errorMessage:s,className:i}){const c=["mp-supporting-text block",t,"data-disabled:text-mp-on-surface/38",i??""].filter(Boolean).join(" ");return o(s)?r(e.Error,{match:!0,className:`${c} text-mp-error`,children:s}):o(a)?r(e.Description,{className:`${c} text-mp-on-surface-variant`,children:a}):r(e.Error,{className:`${c} text-mp-error`})}

package/dist/internal/WidthSizer.js

@@ -1 +1,2 @@
+"use client";
 import{jsx as e}from"react/jsx-runtime";export function MPWidthSizer({samples:a}){return 0===a.length?null:e("span",{"aria-hidden":"true",className:"invisible h-0 min-h-0 overflow-hidden",children:a.map((a,n)=>e("span",{"data-sample":a,className:"block whitespace-nowrap before:content-[attr(data-sample)]"},`${n}:${a}`))})}

package/dist/internal/accent.d.ts

@@ -27,7 +27,7 @@
  * source colour scoped to a section, is what the component resolves against.
  */
 import type * as React from 'react';
-import type { MPColor } from '../types';
+import type { MPColor } from '../types.js';
 /**
  * The four roles an accent family has, pointed at one of the four families.
  *

package/dist/internal/animate.d.ts

@@ -38,7 +38,7 @@
  * and their logic stays in their own files.
  */
 import * as React from 'react';
-import type { MPAnimateMode, MPAnimateRepeat, MPAnimateTrigger, MPAnimation, MPEasing, MPSide } from '../types';
+import type { MPAnimateMode, MPAnimateRepeat, MPAnimateTrigger, MPAnimation, MPEasing, MPSide } from '../types.js';
 /** The class that reads the slots. Always paired with one of the below. */
 export declare const ANIM_BASE = "mp-anim";
 /**
@@ -52,28 +52,11 @@ export declare const ANIM_BASE = "mp-anim";
 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;

package/dist/internal/animate.js

@@ -1 +1,2 @@
-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}}}
+"use client";
+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})`}function i(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}function a(e,n){return"out"===e?n?"alternate-reverse":"reverse":n?"alternate":"normal"}export function animationSlots(e){const n=e.mode??"in",r={"--_mp-anim-duration":i(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":a(n,e.alternate)};return void 0!==e.opacity&&(r["--_mp-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(r["--_mp-anim-scale"]=String(e.scale)),void 0!==e.x&&(r["--_mp-anim-x"]=e.x),void 0!==e.y&&(r["--_mp-anim-y"]=e.y),void 0!==e.angle&&(r["--_mp-anim-angle"]=e.angle),void 0!==e.angleTo&&(r["--_mp-anim-angle-to"]=e.angleTo),r}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 r="(prefers-reduced-motion: reduce)";function o(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const n=window.matchMedia(r);return n.addEventListener("change",e),()=>n.removeEventListener("change",e)}function s(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia(r).matches}function m(){return!1}export function usePrefersReducedMotion(){return e.useSyncExternalStore(o,s,m)}export function useAnimationRun({trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o}){const s=e.useRef(null),[m,u]=e.useState("mount"===n),[c,d]=e.useState(0),l=e.useCallback(()=>{u(!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 u(!0);const t=new IntersectionObserver(([e])=>{e.isIntersecting?(l(),i&&t.disconnect()):i||u(!1)},{threshold:a});return t.observe(e),()=>t.disconnect()},[n,i,a,l]),e.useEffect(()=>{"manual"===n&&(t?l():u(!1))},[n,t,l]);const p=e.useCallback(()=>{o&&u(!1)},[o]),f="hover"===n?{onPointerEnter:l,onFocus:l,onPointerLeave:p,onBlur:p}:{};return{ref:e.useCallback(e=>{s.current=e},[]),state:m&&!r?"running":"paused",started:m,handlers:f}}export function useAnimateElement(e){const{trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o,...s}=e,m=useAnimationRun({trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o});return{ref:m.ref,className:`mp-anim ${ANIMATION_CLASS[s.effect]}`,style:{...animationSlots(s),"--_mp-anim-state":m.state},props:{...m.handlers,"data-mp-animation":s.effect,"data-mp-state":m.state}}}

package/dist/internal/avatar-group.d.ts

@@ -0,0 +1,22 @@
+/**
+ * What an avatar inherits from the stack around it.
+ *
+ * Its own module rather than a file `MPAvatarGroup` exports, for the reason
+ * `button-group.ts` gives: both sides import it — the group provides the
+ * context and the avatar reads it — so putting it in either component would
+ * make one of them pull in the other, and an `MPAvatar` that dragged a group
+ * nobody used into the bundle is dead weight on every page with a face on it.
+ *
+ * Every field is optional and every one of them may legitimately be `undefined`.
+ * An avatar reads the group as a *fallback*, so "not set on the group" has to
+ * keep meaning "use the avatar's own default" rather than turning into one.
+ */
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../types.js';
+export interface MPAvatarGroupContextValue {
+    size?: MPSize;
+    shape?: 'circle' | 'square';
+    variant?: MPVariant;
+    color?: MPColor;
+}
+export declare const MPAvatarGroupContext: React.Context<MPAvatarGroupContextValue | null>;

package/dist/internal/avatar-group.js

@@ -0,0 +1,2 @@
+"use client";
+import*as t from"react";export const MPAvatarGroupContext=/*@__PURE__*/t.createContext(null);

package/dist/internal/button-group.d.ts

@@ -11,7 +11,7 @@
  * meaning "use the button's own default" rather than turning into one.
  */
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../types';
+import type { MPColor, MPOrientation, MPSize, MPVariant } from '../types.js';
 export interface MPButtonGroupContextValue {
     variant?: MPVariant;
     size?: MPSize;
@@ -19,3 +19,22 @@ export interface MPButtonGroupContextValue {
     disabled?: boolean;
 }
 export declare const MPButtonGroupContext: React.Context<MPButtonGroupContextValue | null>;
+/**
+ * The corners that face a neighbour.
+ *
+ * MD3's connected button group keeps the run's *outer* corners fully round and
+ * cuts the inner ones back to `corner-small`, so the row reads as one shape that
+ * has been divided rather than as three pills that happen to be adjacent. The
+ * seam is a 2px gap rather than a border, which is what lets a filled group work
+ * at all: two filled buttons sharing an edge merge into one blob, and a hairline
+ * between them would be the only line on the page drawn between two fills.
+ *
+ * Logical properties (`s`/`e`) rather than left/right: under RTL the first
+ * button is on the right, and `rounded-l-none` would flatten the wrong side.
+ *
+ * It is here rather than in `MPButtonGroup`, which was its first reader, because
+ * `MPToggleGroup` is a connected run of exactly the same shape — and two copies
+ * of one table is how a run of toggles ends up cut differently from a run of
+ * buttons beside it.
+ */
+export declare const GROUP_JOIN: Record<MPOrientation, string>;

package/dist/internal/button-group.js

@@ -1 +1,2 @@
-import*as t from"react";export const MPButtonGroupContext=/*@__PURE__*/t.createContext(null);
+"use client";
+import*as t from"react";export const MPButtonGroupContext=/*@__PURE__*/t.createContext(null);export const GROUP_JOIN={horizontal:"[&>*:not(:first-child)]:rounded-s-mp-sm [&>*:not(:last-child)]:rounded-e-mp-sm",vertical:"[&>*:not(:first-child)]:rounded-t-mp-sm [&>*:not(:last-child)]:rounded-b-mp-sm"};

package/dist/internal/color.d.ts

@@ -58,10 +58,6 @@ export interface MPColorValue {
 /** The three ways the picker will write a colour back out. */
 export type MPColorFormat = 'hex' | 'rgb' | 'hsl';
 export declare function clamp(value: number, min: number, max: number): number;
-export declare function hsvToRgb({ h, s, v }: MPHsv): MPRgb;
-export declare function rgbToHsv({ r, g, b }: MPRgb): MPHsv;
-export declare function rgbToHsl({ r, g, b }: MPRgb): MPHsl;
-export declare function hslToRgb({ h, s, l }: MPHsl): MPRgb;
 /**
  * A CSS colour string, or `null` if it is not one this understands.
  *
@@ -71,7 +67,6 @@ export declare function hslToRgb({ h, s, l }: MPHsl): MPRgb;
  * honest way back from `rebeccapurple` to a point on the panel.
  */
 export declare function parseColor(input: string): MPColorValue | null;
-export declare function rgbToHex({ r, g, b }: MPRgb, alpha?: number): string;
 /**
  * The value the component hands back, in whichever notation was asked for.
  *

package/dist/internal/color.js

@@ -1 +1 @@
-export function clamp(r,t,n){return r<t?t:r>n?n:r}function r(r){const t=r%360;return t<0?t+360:t}export function hsvToRgb({h:t,s:n,v:o}){const e=r(t)/60,a=clamp(n,0,100)/100,s=clamp(o,0,100)/100,c=s*a,l=c*(1-Math.abs(e%2-1)),u=s-c,i=Math.floor(e)%6,[g,h,f]=[[c,l,0],[l,c,0],[0,c,l],[0,l,c],[l,0,c],[c,0,l]][i];return{r:Math.round(255*(g+u)),g:Math.round(255*(h+u)),b:Math.round(255*(f+u))}}export function rgbToHsv({r:t,g:n,b:o}){const e=clamp(t,0,255)/255,a=clamp(n,0,255)/255,s=clamp(o,0,255)/255,c=Math.max(e,a,s),l=c-Math.min(e,a,s);let u=0;return 0!==l&&(u=c===e?(a-s)/l%6:c===a?(s-e)/l+2:(e-a)/l+4),{h:r(60*u),s:0===c?0:l/c*100,v:100*c}}export function rgbToHsl({r:r,g:t,b:n}){const{h:o,s:e,v:a}=rgbToHsv({r:r,g:t,b:n}),s=a/100,c=s*(1-e/100/2),l=Math.min(c,1-c);return{h:o,s:0===l?0:(s-c)/l*100,l:100*c}}export function hslToRgb({h:r,s:t,l:n}){const o=clamp(n,0,100)/100,e=o+clamp(t,0,100)/100*Math.min(o,1-o);return hsvToRgb({h:r,s:0===e?0:2*(1-o/e)*100,v:100*e})}const t=/^#?([0-9a-f]{3,8})$/i;export function parseColor(r){const n=r.trim().toLowerCase();if(!n)return null;if(n.startsWith("#")||t.test(n))return function(r){const n=t.exec(r.trim());if(!n)return null;const o=n[1],e=3===o.length||4===o.length?[...o].map(r=>r+r).join(""):o;if(6!==e.length&&8!==e.length)return null;const a=r=>parseInt(e.slice(2*r,2*r+2),16);return{hsv:rgbToHsv({r:a(0),g:a(1),b:a(2)}),alpha:8===e.length?a(3)/255:1}}(n);const o=/^(rgba?|hsla?)\((.*)\)$/.exec(n);if(!o)return null;const[,e,a]=o,s=function(r){return r.match(/-?[\d.]+%?/g)??[]}(a),c=s.map(r=>parseFloat(r));if(c.length<3||c.some(Number.isNaN))return null;const l=function(r,t){return t.length<=3?1:clamp(r[3]?.endsWith("%")?t[3]/100:t[3],0,1)}(s,c);return e.startsWith("rgb")?{hsv:rgbToHsv({r:c[0],g:c[1],b:c[2]}),alpha:l}:{hsv:rgbToHsv(hslToRgb({h:c[0],s:c[1],l:c[2]})),alpha:l}}function n(r){return clamp(Math.round(r),0,255).toString(16).padStart(2,"0")}export function rgbToHex({r:r,g:t,b:o},e=1){const a=`#${n(r)}${n(t)}${n(o)}`;return e>=1?a:`${a}${n(255*e)}`}function o(r){return String(Math.round(100*clamp(r,0,1))/100)}export function formatColor(r,t,n){const e=hsvToRgb(r);if("hex"===n)return rgbToHex(e,t);if("rgb"===n){const r=`${e.r}, ${e.g}, ${e.b}`;return t>=1?`rgb(${r})`:`rgba(${r}, ${o(t)})`}const{h:a,s:s,l:c}=rgbToHsl(e),l=`${Math.round(a)}, ${Math.round(s)}%, ${Math.round(c)}%`;return t>=1?`hsl(${l})`:`hsla(${l}, ${o(t)})`}export function cssColor(r,t=1){const{r:n,g:e,b:a}=hsvToRgb(r);return t>=1?`rgb(${n}, ${e}, ${a})`:`rgba(${n}, ${e}, ${a}, ${o(t)})`}export function readableInk(r){const{r:t,g:n,b:o}=hsvToRgb(r),e=r=>{const t=r/255;return t<=.03928?t/12.92:((t+.055)/1.055)**2.4};return.2126*e(t)+.7152*e(n)+.0722*e(o)>.42?"#000000":"#ffffff"}export const DEFAULT_SWATCHES=["#000000","#4b5563","#9ca3af","#ffffff","#ef4444","#f97316","#f59e0b","#84cc16","#22c55e","#14b8a6","#06b6d4","#3b82f6","#6366f1","#8b5cf6","#d946ef","#ec4899"];export const CHECKER_BACKGROUND={backgroundImage:"linear-gradient(45deg, var(--_mp-color-outline-variant) 25%, transparent 25%), linear-gradient(-45deg, var(--_mp-color-outline-variant) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--_mp-color-outline-variant) 75%), linear-gradient(-45deg, transparent 75%, var(--_mp-color-outline-variant) 75%)",backgroundSize:"8px 8px",backgroundPosition:"0 0, 0 4px, 4px -4px, -4px 0"};
+export function clamp(n,t,r){return n<t?t:n>r?r:n}function n(n){const t=n%360;return t<0?t+360:t}function t({h:t,s:r,v:a}){const o=n(t)/60,e=clamp(r,0,100)/100,c=clamp(a,0,100)/100,u=c*e,l=u*(1-Math.abs(o%2-1)),i=c-u,s=Math.floor(o)%6,[f,h,p]=[[u,l,0],[l,u,0],[0,u,l],[0,l,u],[l,0,u],[u,0,l]][s];return{r:Math.round(255*(f+i)),g:Math.round(255*(h+i)),b:Math.round(255*(p+i))}}function r({r:t,g:r,b:a}){const o=clamp(t,0,255)/255,e=clamp(r,0,255)/255,c=clamp(a,0,255)/255,u=Math.max(o,e,c),l=u-Math.min(o,e,c);let i=0;return 0!==l&&(i=u===o?(e-c)/l%6:u===e?(c-o)/l+2:(o-e)/l+4),{h:n(60*i),s:0===u?0:l/u*100,v:100*u}}function a({h:n,s:r,l:a}){const o=clamp(a,0,100)/100,e=o+clamp(r,0,100)/100*Math.min(o,1-o);return t({h:n,s:0===e?0:2*(1-o/e)*100,v:100*e})}const o=/^#?([0-9a-f]{3,8})$/i;export function parseColor(n){const t=n.trim().toLowerCase();if(!t)return null;if(t.startsWith("#")||o.test(t))return function(n){const t=o.exec(n.trim());if(!t)return null;const a=t[1],e=3===a.length||4===a.length?[...a].map(n=>n+n).join(""):a;if(6!==e.length&&8!==e.length)return null;const c=n=>parseInt(e.slice(2*n,2*n+2),16);return{hsv:r({r:c(0),g:c(1),b:c(2)}),alpha:8===e.length?c(3)/255:1}}(t);const e=/^(rgba?|hsla?)\((.*)\)$/.exec(t);if(!e)return null;const[,c,u]=e,l=function(n){return n.match(/-?[\d.]+%?/g)??[]}(u),i=l.map(n=>parseFloat(n));if(i.length<3||i.some(Number.isNaN))return null;const s=function(n,t){return t.length<=3?1:clamp(n[3]?.endsWith("%")?t[3]/100:t[3],0,1)}(l,i);return c.startsWith("rgb")?{hsv:r({r:i[0],g:i[1],b:i[2]}),alpha:s}:{hsv:r(a({h:i[0],s:i[1],l:i[2]})),alpha:s}}function e(n){return clamp(Math.round(n),0,255).toString(16).padStart(2,"0")}function c(n){return String(Math.round(100*clamp(n,0,1))/100)}export function formatColor(n,a,o){const u=t(n);if("hex"===o)return function({r:n,g:t,b:r},a=1){const o=`#${e(n)}${e(t)}${e(r)}`;return a>=1?o:`${o}${e(255*a)}`}(u,a);if("rgb"===o){const n=`${u.r}, ${u.g}, ${u.b}`;return a>=1?`rgb(${n})`:`rgba(${n}, ${c(a)})`}const{h:l,s:i,l:s}=function({r:n,g:t,b:a}){const{h:o,s:e,v:c}=r({r:n,g:t,b:a}),u=c/100,l=u*(1-e/100/2),i=Math.min(l,1-l);return{h:o,s:0===i?0:(u-l)/i*100,l:100*l}}(u),f=`${Math.round(l)}, ${Math.round(i)}%, ${Math.round(s)}%`;return a>=1?`hsl(${f})`:`hsla(${f}, ${c(a)})`}export function cssColor(n,r=1){const{r:a,g:o,b:e}=t(n);return r>=1?`rgb(${a}, ${o}, ${e})`:`rgba(${a}, ${o}, ${e}, ${c(r)})`}export function readableInk(n){const{r:r,g:a,b:o}=t(n),e=n=>{const t=n/255;return t<=.03928?t/12.92:((t+.055)/1.055)**2.4};return.2126*e(r)+.7152*e(a)+.0722*e(o)>.42?"#000000":"#ffffff"}export const DEFAULT_SWATCHES=["#000000","#4b5563","#9ca3af","#ffffff","#ef4444","#f97316","#f59e0b","#84cc16","#22c55e","#14b8a6","#06b6d4","#3b82f6","#6366f1","#8b5cf6","#d946ef","#ec4899"];export const CHECKER_BACKGROUND={backgroundImage:"linear-gradient(45deg, var(--_mp-color-outline-variant) 25%, transparent 25%), linear-gradient(-45deg, var(--_mp-color-outline-variant) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--_mp-color-outline-variant) 75%), linear-gradient(-45deg, transparent 75%, var(--_mp-color-outline-variant) 75%)",backgroundSize:"8px 8px",backgroundPosition:"0 0, 0 4px, 4px -4px, -4px 0"};

package/dist/internal/date.d.ts

@@ -22,7 +22,7 @@
  * Nothing here is exported from `src/index.ts`. It is the library talking to
  * itself, in the sense `internal/` always means.
  */
-import type { MPWeekday } from '../types';
+import type { MPWeekday } from '../types.js';
 /** Which unit the calendar is currently letting you pick. */
 export type MPCalendarView = 'day' | 'month' | 'year';
 /** How many years one page of the year grid holds. Four columns of three. */

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),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}
+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}function t(t,e,r){if(t.set(e,r),t.size>64){const e=t.keys().next();e.done||t.delete(e.value)}return r}const e=new Map;export function dateFormatter(r,n){const o=`${r??""}\0${JSON.stringify(n)}`,a=e.get(o);return a||t(e,o,new Intl.DateTimeFormat(r,n))}export function formatDate(t,e,r){return isValidDate(t)?dateFormatter(e,r).format(t):""}const r=Array.from({length:24},(t,e)=>new Date(2027,e%12,21+e%7,e,58,58));export function displaySamples(t,e){const n=dateFormatter(t,e);return[...new Set(r.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 n=makeDate(2021,7,1),o=new Map;export function weekdayLabels(e,r,a="narrow"){const u=`w ${e??""} ${r} ${a}`,i=o.get(u);if(i)return i;const s=dateFormatter(e,{weekday:a});return t(o,u,Array.from({length:7},(t,e)=>s.format(addDays(n,(r+e)%7))))}export function monthLabels(e,r="short"){const n=`m ${e??""} ${r}`,a=o.get(n);if(a)return a;const u=dateFormatter(e,{month:r});return t(o,n,Array.from({length:12},(t,e)=>u.format(makeDate(2021,e,1))))}export function isMonthBeforeYear(t){const e=dateFormatter(t,{year:"numeric",month:"long"}).formatToParts(n);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}),r=t=>{const r=e.formatToParts(withTime(n,{hours:t})).find(t=>"dayPeriod"===t.type);return r?.value??(t<12?"AM":"PM")};return[r(9),r(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}