material-plus-ui 1.9.0 → 1.11.0

package/dist/components/tree-select/MPTreeSelect.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{MPTreeItem as n,MPTreeView as r}from"../tree-view/MPTreeView.js";import{MPPickerShell as t}from"../../internal/Picker.js";import{useMPLocale as o,useMPMessages as i}from"../../internal/locale.js";import{COMBOBOX as s}from"../../internal/messages/combobox.js";import{TRANSFER as c}from"../../internal/messages/transfer.js";import{PICKER as d}from"../../internal/messages/picker.js";import{META_TEXT as p}from"../../internal/scale.js";import{useMPColor as m,useMPSize as u}from"../../internal/config.js";function h(e,l=new Map){for(const a of e)l.set(a.value,a),a.children&&h(a.children,l);return l}const f=e=>e.trim().toLocaleLowerCase();function v(e){return f(e.searchLabel??("string"==typeof e.label?e.label:String(e.value)))}function g(e,l){if(""===l)return e;const a=[];for(const n of e){const e=n.children?g(n.children,l):void 0,r=v(n).includes(l);(r||e&&e.length>0)&&a.push({...n,children:r?n.children:e})}return a}function b(e,l=[]){for(const a of e)a.children&&a.children.length>0&&(l.push(a.value),b(a.children,l));return l}export const MPTreeSelect=/*@__PURE__*/a.forwardRef(function({items:v=[],value:x,defaultValue:j,onValueChange:y,multiple:C=!1,selectableBranches:S=!1,defaultExpanded:w,expanded:N,onExpandedChange:M,open:O,defaultOpen:_,onOpenChange:k,placeholder:P,clearable:V=!1,closeOnSelect:z,searchable:B=!1,searchPlaceholder:E,locale:L,format:T,labels:A,name:I,size:R,color:D,readOnly:q=!1,disabled:F=!1,classNames:G,...H},J){const K=u(R),Q=m(D),U=o(L),W=i(s,U),X=i(d,U,A),Y=i(c,U),Z=e=>null==e?[]:Array.isArray(e)?e:[e],[$,ee]=a.useState(()=>Z(j)),le=void 0!==x?Z(x):$,[ae,ne]=a.useState(_??!1),re=O??ae,[te,oe]=a.useState(""),ie=a.useMemo(()=>h(v),[v]),se=f(te),ce=a.useMemo(()=>g(v,se),[v,se]),de=a.useMemo(()=>""===se?void 0:b(ce),[se,ce]),[pe,me]=a.useState(()=>w??[]),ue=de??N??pe,he=e=>{de||(void 0===N&&me(e),M?.(e))},fe=e=>{e&&(q||F)||(void 0===O&&ne(e),e||oe(""),k?.(e))},ve=e=>{void 0===x&&ee(e),y?.(e)},ge=e=>e.selectable??(!(e.children&&e.children.length>0)||S),be=e=>l=>{l.preventDefault(),e.children&&e.children.length>0&&he(ue.includes(e.value)?ue.filter(l=>l!==e.value):[...ue,e.value])},xe=le.map(e=>ie.get(e)).filter(e=>void 0!==e),je=0===xe.length?P??"":T?T(xe):xe.map(e=>e.label).reduce((e,l,a)=>0===a?[l]:[...e,", ",l],[]),ye=l=>l.map(l=>e(n,{value:l.value,label:l.label,startIcon:l.startIcon,disabled:l.disabled,onClick:ge(l)?void 0:be(l),className:G?.item,children:l.children?ye(l.children):null},l.value));return e(t,{...H,slug:"tree-select",size:K,color:Q,readOnly:q,disabled:F,triggerRef:J,display:je,empty:0===xe.length,clearable:V,onClear:()=>ve([]),open:re,onOpenChange:fe,labels:X,hiddenValues:I?le.map(e=>({name:I,value:String(e)})):void 0,children:l("div",{className:["mp-tree-select__popup flex max-h-80 w-64 flex-col gap-2",G?.popup??""].filter(Boolean).join(" "),children:[B?e("input",{type:"text",value:te,placeholder:E??Y.search,"aria-label":E??Y.search,onChange:e=>oe(e.currentTarget.value),className:["mp-tree-select__search text-mp-on-surface w-full shrink-0 bg-transparent","placeholder:text-mp-on-surface-variant px-1 py-1 [font:inherit] outline-none"].join(" ")}):null,e("div",{className:"min-h-0 flex-1 overflow-auto",children:0===ce.length?e("p",{className:["mp-tree-select__empty text-mp-on-surface-variant m-0 px-1 py-2",p,G?.empty??""].filter(Boolean).join(" "),children:W.empty}):e(r,{size:K,variant:"text",multiple:C,selected:le,onSelectedChange:e=>{const l=e.filter(e=>ie.has(e));ve(C?l:l.slice(-1)),(z??!C)&&fe(!1)},expanded:ue,onExpandedChange:he,className:G?.tree,children:ye(ce)})})]})})});
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{MPTreeItem as a,MPTreeView as r}from"../tree-view/MPTreeView.js";import{MPPickerShell as t}from"../../internal/Picker.js";import{useMPLocale as o,useMPMessages as i}from"../../internal/locale.js";import{COMBOBOX as s}from"../../internal/messages/combobox.js";import{TRANSFER as c}from"../../internal/messages/transfer.js";import{PICKER as u}from"../../internal/messages/picker.js";import{META_TEXT as d}from"../../internal/scale.js";import{useMPColor as p,useMPSize as m}from"../../internal/config.js";function h(e,l=new Map){for(const n of e)l.set(n.value,n),n.children&&h(n.children,l);return l}function f(e){return e.searchLabel??("string"==typeof e.label?e.label:String(e.value))}const g={usage:"search",sensitivity:"base",ignorePunctuation:!0},v=new Map;function b(e,l,n){for(let a=0;a+l.length<=e.length;a+=1)if(0===n.compare(e.slice(a,a+l.length),l))return!0;return!1}function x(e,l,n){if(""===l)return e;const a=[];for(const r of e){const e=r.children?x(r.children,l,n):void 0,t=b(f(r),l,n);(t||e&&e.length>0)&&a.push({...r,children:t?r.children:e})}return a}function j(e,l=[]){for(const n of e)n.children&&n.children.length>0&&(l.push(n.value),j(n.children,l));return l}export const MPTreeSelect=/*@__PURE__*/n.forwardRef(function({items:f=[],value:b,defaultValue:y,onValueChange:C,multiple:S=!1,selectableBranches:w=!1,defaultExpanded:M,expanded:N,onExpandedChange:O,open:V,defaultOpen:_,onOpenChange:P,placeholder:k,clearable:z=!1,closeOnSelect:B,searchable:E=!1,searchPlaceholder:I,locale:T,format:A,labels:D,name:R,size:L,color:q,readOnly:F=!1,disabled:G=!1,classNames:H,...J},K){const Q=m(L),U=p(q),W=o(T),X=i(s,W),Y=i(u,W,D),Z=i(c,W),$=e=>null==e?[]:Array.isArray(e)?e:[e],[ee,le]=n.useState(()=>$(y)),ne=void 0!==b?$(b):ee,[ae,re]=n.useState(_??!1),te=V??ae,[oe,ie]=n.useState(""),se=n.useMemo(()=>h(f),[f]),ce=n.useDeferredValue(oe).trim(),ue=function(e){const l=e??"";let n=v.get(l);return void 0===n&&(n=new Intl.Collator(e,g),v.set(l,n)),n}(W),de=n.useMemo(()=>x(f,ce,ue),[f,ce,ue]),pe=n.useMemo(()=>""===ce?void 0:j(de),[ce,de]),[me,he]=n.useState(()=>M??[]),fe=pe??N??me,ge=e=>{pe||(void 0===N&&he(e),O?.(e))},ve=e=>{e&&(F||G)||(void 0===V&&re(e),e||ie(""),P?.(e))},be=e=>{void 0===b&&le(e),C?.(e)},xe=e=>e.selectable??(!(e.children&&e.children.length>0)||w),je=e=>l=>{l.preventDefault(),e.children&&e.children.length>0&&ge(fe.includes(e.value)?fe.filter(l=>l!==e.value):[...fe,e.value])},ye=ne.map(e=>se.get(e)).filter(e=>void 0!==e),Ce=0===ye.length?k??"":A?A(ye):ye.map(e=>e.label).reduce((e,l,n)=>0===n?[l]:[...e,", ",l],[]),Se=l=>l.map(l=>e(a,{value:l.value,label:l.label,startIcon:l.startIcon,disabled:l.disabled,onClick:xe(l)?void 0:je(l),className:H?.item,children:l.children?Se(l.children):null},l.value));return e(t,{...J,slug:"tree-select",size:Q,color:U,name:R,locale:W,readOnly:F,disabled:G,triggerRef:K,display:Ce,empty:0===ye.length,clearable:z,onClear:()=>be([]),open:te,onOpenChange:ve,labels:Y,formValue:ne.map(String).join(","),hiddenValues:R?ne.map(e=>({name:R,value:String(e)})):void 0,children:l("div",{className:["mp-tree-select__popup flex max-h-80 w-64 flex-col gap-2",H?.popup??""].filter(Boolean).join(" "),children:[E?e("input",{type:"text",value:oe,placeholder:I??Z.search,"aria-label":I??Z.search,onChange:e=>ie(e.currentTarget.value),className:["mp-tree-select__search text-mp-on-surface w-full shrink-0 bg-transparent","placeholder:text-mp-on-surface-variant px-1 py-1 [font:inherit] outline-none"].join(" ")}):null,e("div",{className:"min-h-0 flex-1 overflow-auto",children:0===de.length?e("p",{className:["mp-tree-select__empty text-mp-on-surface-variant m-0 px-1 py-2",d,H?.empty??""].filter(Boolean).join(" "),children:X.empty}):e(r,{size:Q,variant:"text",multiple:S,selected:ne,onSelectedChange:e=>{const l=e.filter(e=>se.has(e));be(S?l:l.slice(-1)),(B??!S)&&ve(!1)},expanded:fe,onExpandedChange:ge,className:H?.tree,children:Se(de)})})]})})});

package/dist/components/tree-view/MPTreeView.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { useRender } from '@base-ui/react/use-render';
 import type { MPDensity, MPElevation, MPSize, MPVariant } from '../../types.js';
 /**
  * How the hierarchy is drawn between the rows.
@@ -86,6 +87,13 @@ export interface MPTreeItemProps extends Omit<React.ComponentPropsWithoutRef<'li
     action?: React.ReactNode;
     /** Renders the row as a link, for a tree that is navigation. */
     href?: string;
+    /**
+     * Renders the row's `<a>` as something else — a router's `Link`, so a press is a
+     * client-side navigation and the page is prefetched. `href` and the classes
+     * still go through, so `render={<NextLink />}` needs the URL written once.
+     * Ignored where there is no link to replace.
+     */
+    render?: useRender.RenderProp;
     /** Fires when the row is pressed, before it opens or is chosen. */
     onClick?: React.MouseEventHandler<HTMLElement>;
     /**

package/dist/components/tree-view/MPTreeView.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{MPIcon as n}from"../icon/MPIcon.js";import{ChevronDownIcon as a}from"../../constants/icons.js";import{containerSurface as o}from"../../internal/elevation.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,PROSE_TEXT as c,hasContent as u}from"../../internal/scale.js";import{useMPDensity as d,useMPSize as m}from"../../internal/config.js";const p=/*@__PURE__*/r.createContext({size:"md",density:0,disabled:!1,expandedKeys:new Set,selectedKeys:new Set,activeKey:null,toggle:()=>{},select:()=>{},activate:()=>{},register:()=>()=>{}}),f=/*@__PURE__*/r.createContext(!1),g={xs:28,sm:32,md:40,lg:48,xl:56},x={xs:14,sm:16,md:20,lg:24,xl:28},v={xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"},h="rounded-mp-full",b={none:"",simple:"mp-tree--simple",folder:"mp-tree--folder"};function y(e,t){return Math.max(24,g[e]+4*t)}function w(e){return Array.from(e.querySelectorAll('[role="treeitem"]')).filter(e=>null===e.closest("[data-mp-closing]"))}const k=e=>String(e);export const MPTreeView=/*@__PURE__*/r.forwardRef(function({variant:t="outlined",elevation:n,size:a,density:i,lines:s="simple",expanded:l,defaultExpanded:c,onExpandedChange:u,selected:f,defaultSelected:g,onSelectedChange:v,multiple:h=!1,disabled:C=!1,label:j,className:N,style:S,children:_,onKeyDown:A,...K},D){const P=m(a),E=d(i),[R,M]=r.useState(c??[]),[I,z]=r.useState(g??[]),[B,F]=r.useState(null),T=l??R,V=f??I,L=r.useRef(null),$=r.useCallback(e=>{L.current=e,"function"==typeof D?D(e):D&&(D.current=e)},[D]),q=r.useCallback(e=>{const t=k(e),r=l??R,n=r.some(e=>k(e)===t)?r.filter(e=>k(e)!==t):[...r,e];void 0===l&&M(n),u?.(n)},[l,R,u]),H=r.useCallback(e=>{const t=k(e),r=f??I,n=r.some(e=>k(e)===t),a=h?n?r.filter(e=>k(e)!==t):[...r,e]:[e];void 0===f&&z(a),v?.(a)},[h,f,I,v]),O=r.useRef(new Map),U=r.useCallback((e,t)=>(O.current.set(e,t),()=>{O.current.delete(e)}),[]),G=r.useMemo(()=>T.map(k).join("\0"),[T]),J=r.useMemo(()=>V.map(k).join("\0"),[V]),Q=r.useMemo(()=>({size:P,density:E,disabled:C,expandedKeys:new Set(T.map(k)),selectedKeys:new Set(V.map(k)),activeKey:B,toggle:q,select:H,activate:F,register:U}),[P,E,C,G,J,B,q,H,U]);return r.useEffect(()=>{if(null!==B&&O.current.has(B))return;const e=L.current;if(!e)return;const t=w(e);t.length>0&&F(t[0].dataset.mpValue??null)}),e(p.Provider,{value:Q,children:e("ul",{ref:$,role:"tree","aria-label":j,"aria-multiselectable":h||void 0,"data-mp-size":P,"data-mp-variant":t,className:["mp-tree rounded-mp-md m-0 box-border flex list-none flex-col p-1",o(t,n),"text-mp-on-surface",b[s],N??""].filter(Boolean).join(" "),style:{"--_mp-tree-indent":`${x[P]}px`,"--_mp-tree-row":`${y(P,E)}px`,...S},onKeyDown:function(e){if(A?.(e),e.defaultPrevented)return;const t=L.current,r=e.target?.closest?.('[role="treeitem"]');if(!t||!r||!t.contains(r))return;const n=w(t),a=n.indexOf(r);if(-1===a)return;const o=t=>{t&&(e.preventDefault(),F(t.dataset.mpValue??null),t.focus())},i=e=>{const t=e.dataset.mpValue;t&&O.current.get(t)?.toggle()},s="rtl"===getComputedStyle(t).direction,l=s?"ArrowLeft":"ArrowRight",c=s?"ArrowRight":"ArrowLeft",u=r.getAttribute("aria-expanded");switch(e.key){case"ArrowDown":o(n[a+1]);break;case"ArrowUp":o(n[a-1]);break;case"Home":o(n[0]);break;case"End":o(n[n.length-1]);break;case l:"false"===u?(e.preventDefault(),i(r)):"true"===u&&o(n[a+1]);break;case c:"true"===u?(e.preventDefault(),i(r)):o(r.parentElement?.closest('[role="treeitem"]'));break;case"Enter":case" ":e.preventDefault(),r.click()}},...K,children:_})})});export const MPTreeItem=/*@__PURE__*/r.forwardRef(function({value:o,label:d,startIcon:m,endIcon:g,action:x,href:b,expandable:y,disabled:w=!1,className:C,children:j,onClick:N,...S},_){const{size:A,disabled:K,expandedKeys:D,selectedKeys:P,activeKey:E,toggle:R,select:M,activate:I,register:z}=r.useContext(p),B=r.useId(),F=o??B,T=k(F),V=r.useRef(null),L=r.useCallback(e=>{V.current=e,"function"==typeof _?_(e):_&&(_.current=e)},[_]),$=r.Children.toArray(j),q=y??$.length>0,H=q&&D.has(T),O=P.has(T),U=w||K,G=r.useRef({toggle:()=>{}});G.current.toggle=()=>{!U&&q&&R(F)};const J=r.useContext(f);r.useEffect(()=>J?void 0:z(T,G.current),[J,T,z]);const[Q,W]=r.useState(H),[X,Y]=r.useState(H),Z=r.useRef(null);r.useEffect(()=>{if(H){W(!0);const e=requestAnimationFrame(()=>Y(!0));return()=>cancelAnimationFrame(e)}Y(!1);const e=Z.current;(null===e||getComputedStyle(e).transitionDuration.split(",").every(e=>0===Number.parseFloat(e)))&&W(!1)},[H]);const ee=["mp-tree__row group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","h-(--_mp-tree-row) no-underline",v[A],h,s[A],c[A],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-focus-visible/tree-item:outline-mp-secondary","group-focus-visible/tree-item:outline-2 group-focus-visible/tree-item:-outline-offset-2","group-focus-visible/tree-item:outline-solid",U?"text-mp-on-surface/38 cursor-default":O?"bg-mp-secondary-container text-mp-on-secondary-container cursor-pointer":"text-mp-on-surface cursor-pointer"].filter(Boolean).join(" "),te=t(r.Fragment,{children:[U?null:e(i,{}),e("span",{"aria-hidden":"true",onClick:e=>{!U&&q&&(e.stopPropagation(),e.preventDefault(),V.current?.focus(),I(T),R(F))},className:["mp-tree__arrow relative flex h-[1lh] w-[1.15em] shrink-0 items-center justify-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none",q?"text-mp-on-surface-variant":"",H?"rotate-0":"-rotate-90 rtl:rotate-90"].filter(Boolean).join(" "),children:q?e(n,{icon:a,size:l[A]-6}):null}),u(m)?e("span",{className:"text-mp-on-surface-variant relative flex h-[1lh] shrink-0 items-center",children:m}):null,e("span",{className:"relative min-w-0 flex-1 truncate",children:d}),u(g)?e("span",{className:"text-mp-on-surface-variant relative flex h-[1lh] shrink-0 items-center",children:g}):null]});return t("li",{ref:L,role:"treeitem","aria-expanded":q?H:void 0,"aria-selected":!!O||void 0,"aria-disabled":U||void 0,"data-mp-value":T,tabIndex:E===T?0:-1,className:["mp-tree__item group/tree-item relative block",C??""].filter(Boolean).join(" "),style:{outline:"none"},onClick:function(e){e.stopPropagation(),U?e.preventDefault():(V.current?.focus(),I(T),N?.(e),e.defaultPrevented||(q&&R(F),M(F)))},...S,children:[t("div",{className:"flex w-full items-center",children:[b&&!U?e("a",{href:b,tabIndex:-1,className:ee,"aria-current":O?"page":void 0,children:te}):e("div",{className:ee,children:te}),u(x)?e("span",{className:`mp-tree__action flex shrink-0 items-center ${v[A]}`,onClick:e=>e.stopPropagation(),children:x}):null]}),q&&Q&&$.length>0?e("div",{ref:Z,"data-mp-closing":H?void 0:"",className:["mp-tree__branch grid","transition-[grid-template-rows] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none",X?"grid-rows-[1fr]":"pointer-events-none grid-rows-[0fr]"].join(" "),onTransitionEnd:e=>{e.target!==e.currentTarget||"grid-template-rows"!==e.propertyName||H||W(!1)},children:e("ul",{role:"group",className:"m-0 min-h-0 list-none overflow-hidden ps-(--_mp-tree-indent)",children:e(f.Provider,{value:J||!H,children:j})})}):null]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useBrowserLayoutEffect as n}from"../../internal/layout-effect.js";import{RenderedLink as o}from"../../internal/RenderedLink.js";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronDownIcon as s}from"../../constants/icons.js";import{containerSurface as i}from"../../internal/elevation.js";import{MPStateLayer as l}from"../../internal/StateLayer.js";import{CONTROL_GAP as c,CONTROL_ICON as u,PROSE_TEXT as d,hasContent as m}from"../../internal/scale.js";import{useMPDensity as p,useMPSize as f}from"../../internal/config.js";function g(e){let t=e;const r=new Set;return{get:()=>t,set:e=>{if(e.expanded!==t.expanded||e.selected!==t.selected||e.active!==t.active){t=e;for(const e of r)e()}},subscribe:e=>(r.add(e),()=>{r.delete(e)})}}const x=/*@__PURE__*/r.createContext({size:"md",density:0,disabled:!1,store:g({expanded:new Set,selected:new Set,active:null}),toggle:()=>{},select:()=>{},activate:()=>{},register:()=>()=>{}}),v=/*@__PURE__*/r.createContext(!1),h={xs:28,sm:32,md:40,lg:48,xl:56},b={xs:14,sm:16,md:20,lg:24,xl:28},w={xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-3.5"},y="rounded-mp-full",k={none:"",simple:"mp-tree--simple",folder:"mp-tree--folder"};function j(e,t){return Math.max(24,h[e]+4*t)}function S(e){return Array.from(e.querySelectorAll('[role="treeitem"]')).filter(e=>null===e.closest("[data-mp-closing]"))}const C=e=>String(e);export const MPTreeView=/*@__PURE__*/r.forwardRef(function({variant:t="outlined",elevation:o,size:a,density:s,lines:l="simple",expanded:c,defaultExpanded:u,onExpandedChange:d,selected:m,defaultSelected:v,onSelectedChange:h,multiple:w=!1,disabled:y=!1,label:N,className:_,style:A,children:R,onKeyDown:D,...E},M){const P=f(a),I=p(s),[z,B]=r.useState(u??[]),[F,L]=r.useState(v??[]),[T,V]=r.useState(null),$=c??z,q=m??F,K=r.useRef(null),H=r.useCallback(e=>{K.current=e,"function"==typeof M?M(e):M&&(M.current=e)},[M]),O=r.useCallback(e=>{const t=C(e),r=c??z,n=r.some(e=>C(e)===t)?r.filter(e=>C(e)!==t):[...r,e];void 0===c&&B(n),d?.(n)},[c,z,d]),U=r.useCallback(e=>{const t=C(e),r=m??F,n=r.some(e=>C(e)===t),o=w?n?r.filter(e=>C(e)!==t):[...r,e]:[e];void 0===m&&L(o),h?.(o)},[w,m,F,h]),G=r.useRef(new Map),J=r.useCallback((e,t)=>(G.current.set(e,t),()=>{G.current.delete(e)}),[]),Q=r.useMemo(()=>$.map(C).join("\0"),[$]),W=r.useMemo(()=>q.map(C).join("\0"),[q]),X=r.useMemo(()=>new Set($.map(C)),[Q]),Y=r.useMemo(()=>new Set(q.map(C)),[W]),Z=r.useRef(null);Z.current??=g({expanded:X,selected:Y,active:T});const ee=Z.current;n(()=>{ee.set({expanded:X,selected:Y,active:T})},[ee,X,Y,T]);const te=r.useMemo(()=>({size:P,density:I,disabled:y,store:ee,toggle:O,select:U,activate:V,register:J}),[P,I,y,ee,O,U,J]);return r.useEffect(()=>{if(null!==T&&G.current.has(T))return;const e=K.current;if(!e)return;const t=S(e);t.length>0&&V(t[0].dataset.mpValue??null)}),e(x.Provider,{value:te,children:e("ul",{ref:H,role:"tree","aria-label":N,"aria-multiselectable":w||void 0,"data-mp-size":P,"data-mp-variant":t,className:["mp-tree rounded-mp-md m-0 box-border flex list-none flex-col p-1",i(t,o),"text-mp-on-surface",k[l],_??""].filter(Boolean).join(" "),style:{"--_mp-tree-indent":`${b[P]}px`,"--_mp-tree-row":`${j(P,I)}px`,...A},onKeyDown:function(e){if(D?.(e),e.defaultPrevented)return;const t=K.current,r=e.target?.closest?.('[role="treeitem"]');if(!t||!r||!t.contains(r))return;const n=S(t),o=n.indexOf(r);if(-1===o)return;const a=t=>{t&&(e.preventDefault(),V(t.dataset.mpValue??null),t.focus())},s=e=>{const t=e.dataset.mpValue;t&&G.current.get(t)?.toggle()},i="rtl"===getComputedStyle(t).direction,l=i?"ArrowLeft":"ArrowRight",c=i?"ArrowRight":"ArrowLeft",u=r.getAttribute("aria-expanded");switch(e.key){case"ArrowDown":a(n[o+1]);break;case"ArrowUp":a(n[o-1]);break;case"Home":a(n[0]);break;case"End":a(n[n.length-1]);break;case l:"false"===u?(e.preventDefault(),s(r)):"true"===u&&a(n[o+1]);break;case c:"true"===u?(e.preventDefault(),s(r)):a(r.parentElement?.closest('[role="treeitem"]'));break;case"Enter":case" ":e.preventDefault(),r.click()}},...E,children:R})})});export const MPTreeItem=/*@__PURE__*/r.forwardRef(function({value:n,label:i,startIcon:p,endIcon:f,action:g,href:h,render:b,expandable:k,disabled:j=!1,className:S,children:N,onClick:_,...A},R){const{size:D,disabled:E,store:M,toggle:P,select:I,activate:z,register:B}=r.useContext(x),F=r.useId(),L=n??F,T=C(L),V=r.useRef(null),$=r.useCallback(e=>{V.current=e,"function"==typeof R?R(e):R&&(R.current=e)},[R]),q=r.Children.toArray(N),K=k??q.length>0,H=()=>function(e,t){return(e.expanded.has(t)?1:0)|(e.selected.has(t)?2:0)|(e.active===t?4:0)}(M.get(),T),O=r.useSyncExternalStore(M.subscribe,H,H),U=K&&!!(1&O),G=!!(2&O),J=j||E,Q=r.useRef({toggle:()=>{}});Q.current.toggle=()=>{!J&&K&&P(L)};const W=r.useContext(v);r.useEffect(()=>W?void 0:B(T,Q.current),[W,T,B]);const[X,Y]=r.useState(U),[Z,ee]=r.useState(U),te=r.useRef(null);r.useEffect(()=>{if(U){Y(!0);const e=requestAnimationFrame(()=>ee(!0));return()=>cancelAnimationFrame(e)}ee(!1);const e=te.current;(null===e||getComputedStyle(e).transitionDuration.split(",").every(e=>0===Number.parseFloat(e)))&&Y(!1)},[U]);const re=["mp-tree__row group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","h-(--_mp-tree-row) no-underline",w[D],y,c[D],d[D],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-focus-visible/tree-item:outline-mp-secondary","group-focus-visible/tree-item:outline-2 group-focus-visible/tree-item:-outline-offset-2","group-focus-visible/tree-item:outline-solid",J?"text-mp-on-surface/38 cursor-default":G?"bg-mp-secondary-container text-mp-on-secondary-container cursor-pointer":"text-mp-on-surface cursor-pointer"].filter(Boolean).join(" "),ne=t(r.Fragment,{children:[J?null:e(l,{}),e("span",{"aria-hidden":"true",onClick:e=>{!J&&K&&(e.stopPropagation(),e.preventDefault(),V.current?.focus(),z(T),P(L))},className:["mp-tree__arrow relative flex h-[1lh] w-[1.15em] shrink-0 items-center justify-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none",K?"text-mp-on-surface-variant":"",U?"rotate-0":"-rotate-90 rtl:rotate-90"].filter(Boolean).join(" "),children:K?e(a,{icon:s,size:u[D]-6}):null}),m(p)?e("span",{className:"text-mp-on-surface-variant relative flex h-[1lh] shrink-0 items-center",children:p}):null,e("span",{className:"relative min-w-0 flex-1 truncate",children:i}),m(f)?e("span",{className:"text-mp-on-surface-variant relative flex h-[1lh] shrink-0 items-center",children:f}):null]});return t("li",{ref:$,role:"treeitem","aria-expanded":K?U:void 0,"aria-selected":!!G||void 0,"aria-disabled":J||void 0,"data-mp-value":T,tabIndex:4&O?0:-1,className:["mp-tree__item group/tree-item relative block",S??""].filter(Boolean).join(" "),style:{outline:"none"},onClick:function(e){e.stopPropagation(),J?e.preventDefault():(V.current?.focus(),z(T),_?.(e),e.defaultPrevented||(K&&P(L),I(L)))},...A,children:[t("div",{className:"flex w-full items-center",children:[h&&!J?e(o,{render:b,props:{href:h,tabIndex:-1,className:re,"aria-current":G?"page":void 0,children:ne}}):e("div",{className:re,children:ne}),m(g)?e("span",{className:`mp-tree__action flex shrink-0 items-center ${w[D]}`,onClick:e=>e.stopPropagation(),children:g}):null]}),K&&X&&q.length>0?e("div",{ref:te,"data-mp-closing":U?void 0:"",className:["mp-tree__branch grid","transition-[grid-template-rows] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none",Z?"grid-rows-[1fr]":"pointer-events-none grid-rows-[0fr]"].join(" "),onTransitionEnd:e=>{e.target!==e.currentTarget||"grid-template-rows"!==e.propertyName||U||Y(!1)},children:e("ul",{role:"group",className:"m-0 min-h-0 list-none overflow-hidden ps-(--_mp-tree-indent)",children:e(v.Provider,{value:W||!U,children:N})})}):null]})});

package/dist/hooks/index.d.ts

@@ -25,8 +25,10 @@
  * had the switch and nothing to drive it with, so every application wrote the
  * same state, the same storage round trip and the same `<head>` script.
  */
-export { useMPColorScheme, mpColorSchemeScript } from './useMPColorScheme.js';
-export type { MPColorScheme, MPResolvedColorScheme, MPColorSchemeOptions, MPColorSchemeResult } from './useMPColorScheme.js';
+export { useMPColorScheme } from './useMPColorScheme.js';
+export { mpColorSchemeScript } from './mpColorSchemeScript.js';
+export type { MPColorScheme, MPResolvedColorScheme, MPColorSchemeResult } from './useMPColorScheme.js';
+export type { MPColorSchemeOptions } from './mpColorSchemeScript.js';
 export { useMPWindowClass } from './useMPWindowClass.js';
 export { useMPReducedMotion } from './useMPReducedMotion.js';
 export { useMPShortcut, useMPPlatform } from './useMPShortcut.js';

package/dist/hooks/index.js

@@ -1 +1 @@
-export{useMPColorScheme,mpColorSchemeScript}from"./useMPColorScheme.js";export{useMPWindowClass}from"./useMPWindowClass.js";export{useMPReducedMotion}from"./useMPReducedMotion.js";export{useMPShortcut,useMPPlatform}from"./useMPShortcut.js";export{useMPMediaQuery}from"./useMPMediaQuery.js";export{useMPElementSize}from"./useMPElementSize.js";export{useMPOnScreen}from"./useMPOnScreen.js";export{useMPDisclosure}from"./useMPDisclosure.js";
+export{useMPColorScheme}from"./useMPColorScheme.js";export{mpColorSchemeScript}from"./mpColorSchemeScript.js";export{useMPWindowClass}from"./useMPWindowClass.js";export{useMPReducedMotion}from"./useMPReducedMotion.js";export{useMPShortcut,useMPPlatform}from"./useMPShortcut.js";export{useMPMediaQuery}from"./useMPMediaQuery.js";export{useMPElementSize}from"./useMPElementSize.js";export{useMPOnScreen}from"./useMPOnScreen.js";export{useMPDisclosure}from"./useMPDisclosure.js";

package/dist/hooks/mpColorSchemeScript.d.ts

@@ -0,0 +1,46 @@
+export interface MPColorSchemeOptions {
+    /**
+     * Where the choice is remembered, in `localStorage`.
+     *
+     * Change it to keep two applications on one origin from sharing a theme, or
+     * to namespace it under a product. It has to match the key given to
+     * `mpColorSchemeScript`, or the page paints one scheme and then corrects
+     * itself to the other.
+     * @default 'mp-color-scheme'
+     */
+    storageKey?: string;
+}
+/**
+ * The two lines that stop the first paint flashing, as a string to inline.
+ *
+ * A hook runs after the browser has already painted, so a reader who chose dark
+ * gets a white page for a frame and then the right one. The only thing that can
+ * run earlier is a **synchronous script in the `<head>`**, before the body is
+ * parsed, and this is that script.
+ *
+ * ```tsx
+ * // app/layout.tsx
+ * <head>
+ *   <script dangerouslySetInnerHTML={{ __html: mpColorSchemeScript() }} />
+ * </head>
+ * ```
+ *
+ * It reads the same key the hook does, writes the same attribute, and does
+ * nothing at all when the stored value is absent or `system` — leaving the media
+ * query to answer, which it does before the first paint anyway.
+ *
+ * Pass the same `storageKey` you pass the hook. Two different keys is a page
+ * that paints one scheme and then corrects itself to the other, which is the
+ * flash this exists to remove.
+ *
+ * The output is a JavaScript source string and contains no interpolated markup:
+ * the key is JSON-encoded, so a key with a quote in it cannot end the script
+ * early.
+ *
+ * ## It has to be inline
+ *
+ * A `<script src>` is fetched, and a fetch is exactly the delay being avoided.
+ * If the page has a Content Security Policy without `unsafe-inline`, give the
+ * tag a nonce — this returns the source, not the tag, so the tag is yours.
+ */
+export declare function mpColorSchemeScript(options?: MPColorSchemeOptions): string;

package/dist/hooks/mpColorSchemeScript.js

@@ -0,0 +1 @@
+import{DEFAULT_STORAGE_KEY as t,SCHEME_ATTRIBUTE as e}from"../internal/color-scheme-keys.js";export function mpColorSchemeScript(r={}){const{storageKey:o=t}=r;return`try{var s=localStorage.getItem(${JSON.stringify(o)});if(s==="dark"||s==="light")document.documentElement.setAttribute(${JSON.stringify(e)},s)}catch(e){}`}

package/dist/hooks/useMPColorScheme.d.ts

@@ -1,17 +1,6 @@
 import { type MPColorScheme, type MPResolvedColorScheme } from '../internal/color-scheme.js';
-export type { MPColorScheme, MPResolvedColorScheme };
-export interface MPColorSchemeOptions {
-    /**
-     * Where the choice is remembered, in `localStorage`.
-     *
-     * Change it to keep two applications on one origin from sharing a theme, or
-     * to namespace it under a product. It has to match the key given to
-     * `mpColorSchemeScript`, or the page paints one scheme and then corrects
-     * itself to the other.
-     * @default 'mp-color-scheme'
-     */
-    storageKey?: string;
-}
+import type { MPColorSchemeOptions } from './mpColorSchemeScript.js';
+export type { MPColorScheme, MPColorSchemeOptions, MPResolvedColorScheme };
 export interface MPColorSchemeResult {
     /**
      * What has been **chosen** — including `'system'`, which is the absence of a
@@ -99,37 +88,3 @@ export interface MPColorSchemeResult {
  * for — see it for the two lines that go in the `<head>`.
  */
 export declare function useMPColorScheme(options?: MPColorSchemeOptions): MPColorSchemeResult;
-/**
- * The two lines that stop the first paint flashing, as a string to inline.
- *
- * A hook runs after the browser has already painted, so a reader who chose dark
- * gets a white page for a frame and then the right one. The only thing that can
- * run earlier is a **synchronous script in the `<head>`**, before the body is
- * parsed, and this is that script.
- *
- * ```tsx
- * // app/layout.tsx
- * <head>
- *   <script dangerouslySetInnerHTML={{ __html: mpColorSchemeScript() }} />
- * </head>
- * ```
- *
- * It reads the same key the hook does, writes the same attribute, and does
- * nothing at all when the stored value is absent or `system` — leaving the media
- * query to answer, which it does before the first paint anyway.
- *
- * Pass the same `storageKey` you pass the hook. Two different keys is a page
- * that paints one scheme and then corrects itself to the other, which is the
- * flash this exists to remove.
- *
- * The output is a JavaScript source string and contains no interpolated markup:
- * the key is JSON-encoded, so a key with a quote in it cannot end the script
- * early.
- *
- * ## It has to be inline
- *
- * A `<script src>` is fetched, and a fetch is exactly the delay being avoided.
- * If the page has a Content Security Policy without `unsafe-inline`, give the
- * tag a nonce — this returns the source, not the tag, so the tag is yours.
- */
-export declare function mpColorSchemeScript(options?: MPColorSchemeOptions): string;

package/dist/hooks/useMPColorScheme.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";import{DEFAULT_STORAGE_KEY as t,SCHEME_ATTRIBUTE as r,setScheme as s,useChosenScheme as o,useSystemScheme as c}from"../internal/color-scheme.js";export function useMPColorScheme(r={}){const{storageKey:m=t}=r,a=o(m),i=c(),l="system"===a?i:a,n=e.useCallback(e=>s(m,e),[m]),u=e.useCallback(()=>s(m,"dark"===l?"light":"dark"),[m,l]);return e.useMemo(()=>({scheme:a,resolved:l,isSystem:"system"===a,setScheme:n,toggle:u}),[a,l,n,u])}export function mpColorSchemeScript(e={}){const{storageKey:s=t}=e;return`try{var s=localStorage.getItem(${JSON.stringify(s)});if(s==="dark"||s==="light")document.documentElement.setAttribute(${JSON.stringify(r)},s)}catch(e){}`}
+import*as e from"react";import{DEFAULT_STORAGE_KEY as t,SCHEME_ATTRIBUTE as s,applyScheme as o,setScheme as m,useChosenScheme as r,useSystemScheme as c}from"../internal/color-scheme.js";export function useMPColorScheme(l={}){const{storageKey:n=t}=l,u=r(n),a=c(),i="system"===u?a:u;e.useEffect(()=>{"system"!==u&&null===document.documentElement.getAttribute(s)&&o(u)},[u]);const d=e.useCallback(e=>m(n,e),[n]),f=e.useCallback(()=>m(n,"dark"===i?"light":"dark"),[n,i]);return e.useMemo(()=>({scheme:u,resolved:i,isSystem:"system"===u,setScheme:d,toggle:f}),[u,i,d,f])}

package/dist/hooks/useMPMediaQuery.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";export function useMPMediaQuery(t,a=!1){const r=e.useMemo(()=>function(e){if("undefined"==typeof window||!window.matchMedia)return null;let t=n.get(e);t||(t=window.matchMedia(e),n.set(e,t));return t}(t),[t]),c=e.useCallback(e=>r?(r.addEventListener("change",e),()=>r.removeEventListener("change",e)):()=>{},[r]),o=e.useCallback(()=>r?r.matches:a,[r,a]),u=e.useCallback(()=>a,[a]);return e.useSyncExternalStore(c,o,u)}const n=new Map;
+import*as e from"react";import{mediaList as a}from"../internal/media.js";export function useMPMediaQuery(a,n=!1){const r=e.useMemo(()=>t(a),[a]),s=e.useCallback(e=>r?(r.addEventListener("change",e),()=>r.removeEventListener("change",e)):()=>{},[r]),c=e.useCallback(()=>r?r.matches:n,[r,n]),o=e.useCallback(()=>n,[n]);return e.useSyncExternalStore(s,c,o)}const t=a;

package/dist/hooks/useMPOnScreen.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";export function useMPOnScreen(r,{threshold:n=.2,once:t=!0,rootMargin:o}={}){const[s,c]=e.useState(!1);return e.useEffect(()=>{const e=r.current;if(!e)return;if("undefined"==typeof IntersectionObserver)return void c(!0);const s=new IntersectionObserver(([e])=>{e.isIntersecting?(c(!0),t&&s.disconnect()):t||c(!1)},{threshold:n,rootMargin:o});return s.observe(e),()=>s.disconnect()},[r,n,t,o]),s}
+import*as e from"react";import{watchIntersection as r}from"../internal/intersection.js";export function useMPOnScreen(t,{threshold:n=.2,once:o=!0,rootMargin:i}={}){const[s,c]=e.useState(!1);return e.useEffect(()=>{const e=t.current;if(!e)return;if("undefined"==typeof IntersectionObserver)return void c(!0);const s=r(e,e=>{e.isIntersecting?(c(!0),o&&s()):o||c(!1)},{threshold:n,rootMargin:i});return s},[t,n,o,i]),s}

package/dist/internal/Calendar.js

@@ -1,2 +1,2 @@
 "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 p}from"./visually-hidden.js";import{addDays as f,addMonths as g,addYears as b,calendarWeeks as y,compareDay as v,dateFormatter as w,isDayOutside as x,isMonthBeforeYear as D,isSameDay as S,isSameMonth as M,isUnitOutside as N,isValidDate as P,makeDate as _,meridiemLabels as C,monthLabels as k,startOfDay as j,startOfMonth as z,today as A,weekdayLabels as E,withTime as T,YEAR_PAGE_SIZE as F,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 p-0 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(" "),$={day:0,month:1,year:2};function K({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:p,onKeyDown:f}){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?"border-0 bg-transparent cursor-default text-mp-on-surface/38":r?"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)":l?"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"bg-transparent border border-(--_mp-accent) text-(--_mp-accent)":c?"border-0 bg-transparent text-mp-on-surface-variant":"border-0 bg-transparent text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),n]})}function L({size:o,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:b,showNextButton:y,onStep:v,onViewChange:w}){const x=k(f,"long")[p.getMonth()],S=String(p.getFullYear()),M=D(f),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:()=>v(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:()=>w("month"===d?"day":"month"),children:x},"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:()=>w("year"===d?"day":"year"),children:S},"year"),A=Y(p.getFullYear());return t("div",{className:"flex items-center justify-between gap-1",children:[_(-1,b),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:`${A}–${A+F-1}`}):"month"===d?z:t(n,M?{children:[j,z]}:{children:[z,j]})}),_(1,y)]})}export function Calendar({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:p,maxDate:f,shouldDisableDate:y,showOutsideDays:v=!0,autoFocus:w=!1,showPreviousButton:D=!0,showNextButton:S=!0,precision:N="day",labels:C}){const[k,E]=o.useState(N),T=$[k]<$[N]?N:k,Y=o.useMemo(()=>i.filter(P),[i]),[R,H]=o.useState(()=>{const e=Y.find(e=>M(e,s));return e?j(e):M(A(),s)?A():z(s)}),K=o.useRef(w),U=o.useRef(null);o.useEffect(()=>{H(e=>M(e,s)?e:z(s))},[s]),o.useLayoutEffect(()=>{K.current&&(K.current=!1,U.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const V=o.useCallback(e=>x(e,p,f)||(y?.(e)??!1),[p,f,y]),G=e=>{K.current=!0,E(e)},W=e=>{K.current=!0,c(e)};return t("div",{ref:U,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":B[n]},onPointerLeave:()=>h?.(null),children:[e(L,{size:n,color:r,view:T,month:s,locale:l,labels:C,showPreviousButton:D,showNextButton:S,onStep:e=>{c("day"===T?g(s,e):b(s,"month"===T?e:e*F))},onViewChange:G}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===T?e(I,{size:n,locale:l,weekStartsOn:a,month:s,chosen:Y,rangeStart:u,rangeEnd:m,focusedDate:R,showOutsideDays:v,isDisabled:V,onSelect:e=>{H(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{K.current=!0,H(e),M(e,s)||c(z(e))}}):"month"===T?e(O,{size:n,locale:l,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:W,onPick:e=>{const t=_(s.getFullYear(),e,1);"month"!==N?(c(t),G("day")):d(t)}}):e(q,{size:n,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:W,onPick:e=>{"year"!==N?(c(_(e,s.getMonth(),1)),G("month")):d(_(e,0,1))}})})]})}function U(e){return"rtl"===getComputedStyle(e).direction?-1:1}function I({size:n,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:p,onSelect:b,onPreviewChange:x,onMoveFocus:D}){const N=E(r,l,"narrow"),_=E(r,l,"long"),C=(j=i,P(k=c)&&P(j)?v(k,j)<=0?[k,j]:[j,k]:null);var k,j;const z=A(),T=o.useMemo(()=>{const e=w(r,{dateStyle:"full"});return y(a,l).map(t=>t.map(t=>({date:t,label:e.format(t)})))},[a,l,r]),F=o.useRef(null),Y=o.useRef(a);o.useLayoutEffect(()=>{const e=F.current,t=Y.current;if(Y.current=a,!e||M(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":w(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:N.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:F,role:"rowgroup",className:"mp-calendar__page flex flex-1 flex-col",children:T.map((t,o)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(({date:t,label:o})=>{const r=!M(t,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},t.getTime());const c=s.some(e=>S(e,t)),i=null!==C&&v(t,C[0])>=0&&v(t,C[1])<=0,d=null!==C&&i&&S(t,C[0]),y=null!==C&&i&&S(t,C[1]);return e(K,{label:o,selected:c,inRange:i&&!c,rangeEdge:i?d&&y?"both":d?"start":y?"end":"middle":null,current:S(t,z)&&!c,muted:r,disabled:p(t),focused:S(t,u),className:`size-(--_mp-cell) ${h[n]}`,onClick:()=>b(t),onPointerEnter:()=>x?.(t),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-l+7)%7,o=U(e.currentTarget),r={ArrowLeft:()=>f(t,-o),ArrowRight:()=>f(t,o),ArrowUp:()=>f(t,-7),ArrowDown:()=>f(t,7),Home:()=>f(t,-n),End:()=>f(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 O({size:t,locale:n,month:r,chosen:l,minDate:a,maxDate:s,onMoveCursor:c,onPick:i}){const u=k(n,"short"),m=r.getFullYear(),d=new Date,p=o.useMemo(()=>{const e=w(n,{year:"numeric",month:"long"});return Array.from({length:12},(t,n)=>e.format(_(m,n,1)))},[n,m]),f=e=>{const t=U(e.currentTarget),n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),c(g(z(r),n)))};return e("div",{role:"grid","aria-label":String(m),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(o=>{const c=3*n+o;return e(K,{label:p[c],selected:l.some(e=>e.getFullYear()===m&&e.getMonth()===c),current:d.getFullYear()===m&&d.getMonth()===c,disabled:N(_(m,c,1),"month",a,s),focused:c===r.getMonth(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>i(c),onKeyDown:f,children:u[c]},c)})},n))})}function q({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=U(e.currentTarget),o={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-F,PageDown:F}[e.key];void 0!==o&&(e.preventDefault(),a(b(z(n),o)))};return e("div",{role:"grid","aria-label":`${c}–${c+F-1}`,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(K,{label:String(d),selected:o.some(e=>e.getFullYear()===d),current:d===i,disabled:N(_(d,0,1),"year",r,l),focused:d===n.getFullYear(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function V(e,t){return Number.isFinite(e)?Math.min(t,Math.max(1,Math.round(e))):1}function G(e,t="auto"){const n=e.parentElement;if(!n)return;const o=e.getBoundingClientRect(),r=n.getBoundingClientRect(),l=o.top-r.top-n.clientTop+n.scrollTop,a=l+o.height;l<n.scrollTop?n.scrollTo({top:l,behavior:t}):a>n.scrollTop+n.clientHeight&&n.scrollTo({top:a-n.clientHeight,behavior:t})}export function MPTimeGrid({size:n,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:b=!1,labels:y}){const v=l??a,x=o.useRef(null),[D,S]=o.useMemo(()=>C(r),[r]);o.useEffect(()=>{const e=x.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(e=>G(e,"instant")),b){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[b]);const M=o.useMemo(()=>{const e=c?12:24,t=V(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=V(d,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[d]),P=o.useMemo(()=>{const e=V(f,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[f]),_=e=>String(e).padStart(2,"0"),k=c?v.getHours()%12||12:v.getHours(),[j,z]=o.useState({}),A=(o,r,a,i,m)=>{const d=null===l?-1:a.findIndex(e=>i(e)),p=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","motion-safe:scroll-smooth","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:p})(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}),G(r))})(n,e.currentTarget))},children:a.map((r,a)=>{const d=((e,t)=>T(v,"hour"===e?{hours:c?t%12+(v.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:v.getHours()%12+12*t}))(o,r),f=null!==l&&i(r),b=g?.(d,o)??!1;return t("button",{type:"button",role:"option","aria-selected":f,"aria-disabled":b||void 0,"data-chosen":f?"true":void 0,tabIndex:a===p?0:-1,className:[H,"rounded-mp-full h-(--_mp-cell) w-full shrink-0 border-0",h[n],b?"bg-transparent cursor-default text-mp-on-surface/38":f?"bg-(--_mp-accent) text-(--_mp-on-accent)":"bg-transparent text-mp-on-surface"].join(" "),onFocus:()=>z(e=>({...e,[o]:a})),onClick:()=>{b||s(d)},children:[b?null:e(u,{}),m(r)]},r)})},o)};return t("div",{ref:x,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":B[n]},children:[A("hour",y.hour,M,e=>e===k,e=>c?String(e):_(e)),A("minute",y.minute,N,e=>e===v.getMinutes(),_),i?A("second",y.second,P,e=>e===v.getSeconds(),_):null,c?A("meridiem",y.meridiem,[0,1],e=>(v.getHours()>=12?1:0)===e,e=>0===e?D:S):null,e("span",{className:p,"aria-live":"polite",children:null===l?"":w(r,{hour:"numeric",minute:"2-digit",...i?{second:"2-digit"}:{}}).format(l)})]})}
+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 p}from"./visually-hidden.js";import{addDays as f,addMonths as g,addYears as y,calendarWeeks as b,compareDay as v,dateFormatter as x,isDayOutside as w,isMonthBeforeYear as D,isSameDay as S,isSameMonth as M,isUnitOutside as N,isValidDate as P,makeDate as _,meridiemLabels as C,monthLabels as k,startOfDay as j,startOfMonth as T,today as z,weekdayLabels as A,withTime as E,YEAR_PAGE_SIZE as F,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 p-0 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(" "),$={day:0,month:1,year:2};let K=null;function L(){const e=z();return null!==K&&K.getTime()===e.getTime()||(K=e),K}const U=()=>()=>{},I=()=>null;function O(){return o.useSyncExternalStore(U,L,I)}function q({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:p,onKeyDown:f}){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?"border-0 bg-transparent cursor-default text-mp-on-surface/38":r?"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)":l?"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":s?"bg-transparent border border-(--_mp-accent) text-(--_mp-accent)":c?"border-0 bg-transparent text-mp-on-surface-variant":"border-0 bg-transparent text-mp-on-surface",d??""].filter(Boolean).join(" "),onClick:()=>{i||h()},onPointerEnter:p,onKeyDown:f,children:[i?null:e(u,{}),n]})}function V({size:o,color:u,view:d,month:p,locale:f,labels:g,showPreviousButton:y,showNextButton:b,onStep:v,onViewChange:x}){const w=k(f,"long")[p.getMonth()],S=String(p.getFullYear()),M=D(f),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:()=>v(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:w},"month"),T=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:S},"year"),z=Y(p.getFullYear());return t("div",{className:"flex items-center justify-between gap-1",children:[_(-1,y),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:`${z}–${z+F-1}`}):"month"===d?T:t(n,M?{children:[j,T]}:{children:[T,j]})}),_(1,b)]})}export function Calendar({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:p,maxDate:f,shouldDisableDate:b,showOutsideDays:v=!0,autoFocus:x=!1,showPreviousButton:D=!0,showNextButton:S=!0,precision:N="day",labels:C}){const[k,A]=o.useState(N),E=$[k]<$[N]?N:k,Y=o.useMemo(()=>i.filter(P),[i]),[R,H]=o.useState(()=>{const e=Y.find(e=>M(e,s));return e?j(e):M(z(),s)?z():T(s)}),K=o.useRef(x),L=o.useRef(null);o.useEffect(()=>{H(e=>M(e,s)?e:T(s))},[s]),o.useLayoutEffect(()=>{K.current&&(K.current=!1,L.current?.querySelector('[data-focus-target="true"]')?.focus({preventScroll:!0}))});const U=o.useCallback(e=>w(e,p,f)||(b?.(e)??!1),[p,f,b]),I=e=>{K.current=!0,A(e)},O=e=>{K.current=!0,c(e)};return t("div",{ref:L,className:"mp-calendar flex flex-col gap-1",style:{"--_mp-cell":B[n]},onPointerLeave:()=>h?.(null),children:[e(V,{size:n,color:r,view:E,month:s,locale:l,labels:C,showPreviousButton:D,showNextButton:S,onStep:e=>{c("day"===E?g(s,e):y(s,"month"===E?e:e*F))},onViewChange:I}),e("div",{className:"h-[calc(var(--_mp-cell)*7)] w-[calc(var(--_mp-cell)*7)]",children:"day"===E?e(W,{size:n,locale:l,weekStartsOn:a,month:s,chosen:Y,rangeStart:u,rangeEnd:m,focusedDate:R,showOutsideDays:v,isDisabled:U,onSelect:e=>{H(e),d(e)},onPreviewChange:h,onMoveFocus:e=>{K.current=!0,H(e),M(e,s)||c(T(e))}}):"month"===E?e(J,{size:n,locale:l,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:O,onPick:e=>{const t=_(s.getFullYear(),e,1);"month"!==N?(c(t),I("day")):d(t)}}):e(Q,{size:n,month:s,chosen:Y,minDate:p,maxDate:f,onMoveCursor:O,onPick:e=>{"year"!==N?(c(_(e,s.getMonth(),1)),I("month")):d(_(e,0,1))}})})]})}function G(e){return"rtl"===getComputedStyle(e).direction?-1:1}function W({size:n,locale:r,weekStartsOn:l,month:a,chosen:s,rangeStart:c,rangeEnd:i,focusedDate:u,showOutsideDays:m,isDisabled:p,onSelect:y,onPreviewChange:w,onMoveFocus:D}){const N=A(r,l,"narrow"),_=A(r,l,"long"),C=(j=i,P(k=c)&&P(j)?v(k,j)<=0?[k,j]:[j,k]:null);var k,j;const T=O(),z=o.useMemo(()=>{const e=x(r,{dateStyle:"full"});return b(a,l).map(t=>t.map(t=>({date:t,label:e.format(t)})))},[a,l,r]),E=o.useRef(null),F=o.useRef(a);o.useLayoutEffect(()=>{const e=E.current,t=F.current;if(F.current=a,!e||M(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:N.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:E,role:"rowgroup",className:"mp-calendar__page flex flex-1 flex-col",children:z.map((t,o)=>e("div",{role:"row",className:"grid grid-cols-7",children:t.map(({date:t,label:o})=>{const r=!M(t,a);if(r&&!m)return e("span",{role:"gridcell","aria-hidden":"true",className:"size-(--_mp-cell)"},t.getTime());const c=s.some(e=>S(e,t)),i=null!==C&&v(t,C[0])>=0&&v(t,C[1])<=0,d=null!==C&&i&&S(t,C[0]),b=null!==C&&i&&S(t,C[1]);return e(q,{label:o,selected:c,inRange:i&&!c,rangeEdge:i?d&&b?"both":d?"start":b?"end":"middle":null,current:null!==T&&S(t,T)&&!c,muted:r,disabled:p(t),focused:S(t,u),className:`size-(--_mp-cell) ${h[n]}`,onClick:()=>y(t),onPointerEnter:()=>w?.(t),onKeyDown:e=>((e,t)=>{const n=(t.getDay()-l+7)%7,o=G(e.currentTarget),r={ArrowLeft:()=>f(t,-o),ArrowRight:()=>f(t,o),ArrowUp:()=>f(t,-7),ArrowDown:()=>f(t,7),Home:()=>f(t,-n),End:()=>f(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 J({size:t,locale:n,month:r,chosen:l,minDate:a,maxDate:s,onMoveCursor:c,onPick:i}){const u=k(n,"short"),m=r.getFullYear(),d=O(),p=o.useMemo(()=>{const e=x(n,{year:"numeric",month:"long"});return Array.from({length:12},(t,n)=>e.format(_(m,n,1)))},[n,m]),f=e=>{const t=G(e.currentTarget),n={ArrowLeft:-t,ArrowRight:t,ArrowUp:-3,ArrowDown:3,PageUp:-12,PageDown:12}[e.key];void 0!==n&&(e.preventDefault(),c(g(T(r),n)))};return e("div",{role:"grid","aria-label":String(m),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(o=>{const c=3*n+o;return e(q,{label:p[c],selected:l.some(e=>e.getFullYear()===m&&e.getMonth()===c),current:null!==d&&d.getFullYear()===m&&d.getMonth()===c,disabled:N(_(m,c,1),"month",a,s),focused:c===r.getMonth(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>i(c),onKeyDown:f,children:u[c]},c)})},n))})}function Q({size:t,month:n,chosen:o,minDate:r,maxDate:l,onMoveCursor:a,onPick:s}){const c=Y(n.getFullYear()),i=O()?.getFullYear(),u=e=>{const t=G(e.currentTarget),o={ArrowLeft:-t,ArrowRight:t,ArrowUp:-4,ArrowDown:4,PageUp:-F,PageDown:F}[e.key];void 0!==o&&(e.preventDefault(),a(y(T(n),o)))};return e("div",{role:"grid","aria-label":`${c}–${c+F-1}`,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(q,{label:String(d),selected:o.some(e=>e.getFullYear()===d),current:d===i,disabled:N(_(d,0,1),"year",r,l),focused:d===n.getFullYear(),className:`h-(--_mp-cell) w-full ${h[t]}`,onClick:()=>s(d),onKeyDown:u,children:d},d)})},a))})}function X(e,t){return Number.isFinite(e)?Math.min(t,Math.max(1,Math.round(e))):1}function Z(e,t="auto"){const n=e.parentElement;if(!n)return;const o=e.getBoundingClientRect(),r=n.getBoundingClientRect(),l=o.top-r.top-n.clientTop+n.scrollTop,a=l+o.height;l<n.scrollTop?n.scrollTo({top:l,behavior:t}):a>n.scrollTop+n.clientHeight&&n.scrollTo({top:a-n.clientHeight,behavior:t})}export function MPTimeGrid({size:n,locale:r,value:l,referenceDate:a,onChange:s,hour12:c,showSeconds:i,hourStep:m,minuteStep:d,secondStep:f,shouldDisableTime:g,autoFocus:y=!1,labels:b}){const v=l??a,w=o.useRef(null),[D,S]=o.useMemo(()=>C(r),[r]);o.useEffect(()=>{const e=w.current;if(e?.querySelectorAll('[data-chosen="true"]').forEach(e=>Z(e,"instant")),y){const t=e?.querySelector('[role="listbox"]');(t?.querySelector('[data-chosen="true"]')??t?.querySelector('[role="option"]'))?.focus({preventScroll:!0})}},[y]);const M=o.useMemo(()=>{const e=c?12:24,t=X(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=X(d,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[d]),P=o.useMemo(()=>{const e=X(f,60);return Array.from({length:Math.ceil(60/e)},(t,n)=>n*e)},[f]),_=e=>String(e).padStart(2,"0"),k=c?v.getHours()%12||12:v.getHours(),[j,T]=o.useState({}),z=(o,r,a,i,m)=>{const d=null===l?-1:a.findIndex(e=>i(e)),p=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","motion-safe:scroll-smooth","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:p})(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];T(e=>({...e,[o]:n})),r instanceof HTMLElement&&(r.focus({preventScroll:!0}),Z(r))})(n,e.currentTarget))},children:a.map((r,a)=>{const d=((e,t)=>E(v,"hour"===e?{hours:c?t%12+(v.getHours()>=12?12:0):t}:"minute"===e?{minutes:t}:"second"===e?{seconds:t}:{hours:v.getHours()%12+12*t}))(o,r),f=null!==l&&i(r),y=g?.(d,o)??!1;return t("button",{type:"button",role:"option","aria-selected":f,"aria-disabled":y||void 0,"data-chosen":f?"true":void 0,tabIndex:a===p?0:-1,className:[H,"rounded-mp-full h-(--_mp-cell) w-full shrink-0 border-0",h[n],y?"bg-transparent cursor-default text-mp-on-surface/38":f?"bg-(--_mp-accent) text-(--_mp-on-accent)":"bg-transparent text-mp-on-surface"].join(" "),onFocus:()=>T(e=>({...e,[o]:a})),onClick:()=>{y||s(d)},children:[y?null:e(u,{}),m(r)]},r)})},o)};return t("div",{ref:w,className:"mp-time-grid flex gap-1",style:{"--_mp-cell":B[n]},children:[z("hour",b.hour,M,e=>e===k,e=>c?String(e):_(e)),z("minute",b.minute,N,e=>e===v.getMinutes(),_),i?z("second",b.second,P,e=>e===v.getSeconds(),_):null,c?z("meridiem",b.meridiem,[0,1],e=>(v.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/ChartChrome.d.ts

@@ -90,6 +90,10 @@ export interface Visibility {
 export declare function useVisibility(series: readonly {
     hidden?: boolean;
 }[]): Visibility;
+/** `legend` left out or `true`, as one object for every render to share. */
+export declare const LEGEND_ON: MPChartLegend;
+/** `legend={false}`, the same way. */
+export declare const LEGEND_OFF: MPChartLegend;
 interface LegendProps {
     /**
      * What each entry is called. Names rather than series, because a pie's
@@ -129,7 +133,7 @@ interface LegendProps {
  * which a change of hue would not, and `aria-pressed` carries the same fact to
  * a reader who is not looking at all.
  */
-export declare function ChartLegend({ names, colors, options, visibility, size, values, swatch, colorNames }: LegendProps): React.JSX.Element;
+export declare const ChartLegend: React.MemoExoticComponent<({ names, colors, options, visibility, size, values, swatch, colorNames }: LegendProps) => React.JSX.Element>;
 interface PanelProps {
     heading?: React.ReactNode;
     items: readonly MPChartTooltipItem[];
@@ -192,8 +196,13 @@ interface TableProps {
  * Rendered rather than built on demand, because it is the description of a
  * focusable element: an `aria-describedby` pointing at an id that does not
  * exist yet is an `aria-describedby` pointing at nothing.
+ *
+ * Memoised, because it is the largest thing a chart renders and the one thing a
+ * hover never changes. Every column the pointer crosses re-renders the chart,
+ * and before this every one of them formatted every cell of the table again —
+ * half the cost of a hover on a line chart of a few hundred points.
  */
-export declare function ChartTable({ id, caption, corner, categories, names, values, format, locale, empty }: TableProps): React.JSX.Element;
+export declare const ChartTable: React.MemoExoticComponent<({ id, caption, corner, categories, names, values, format, locale, empty }: TableProps) => React.JSX.Element>;
 export interface ChartShellProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'color' | 'title'> {
     size: MPSize;
     /** The element the drawing is measured in and focused on. */

package/dist/internal/ChartChrome.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{VISUALLY_HIDDEN as n}from"./visually-hidden.js";import{cssLength as r}from"./length.js";import{PLOT_HEIGHT as i,formatCategory as s}from"./chart.js";export function useVisibility(e){const[t,l]=a.useState(()=>{const t=new Set;return e.forEach((e,l)=>{e.hidden&&t.add(l)}),t}),[n,r]=a.useState(null),i=a.useCallback(e=>{l(t=>{const l=new Set(t);return l.has(e)?l.delete(e):l.add(e),l})},[]);return{visible:e.map((e,l)=>!t.has(l)),hovered:n,toggle:i,setHovered:r}}const o={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},c={start:"justify-start",center:"justify-center",end:"justify-end"};export function ChartLegend({names:a,colors:n,options:r,visibility:i,size:s,values:o,swatch:m,colorNames:d=!1}){const u=!1!==r.interactive,p="xs"===s||"sm"===s?"text-mp-label-small":"text-mp-label-medium";return e("ul",{className:["mp-chart__legend m-0 flex list-none flex-wrap items-center gap-x-4 gap-y-1 p-0",c[r.align??"center"],p].join(" "),children:a.map((a,r)=>{const s=i.visible[r],c=s&&null!==i.hovered&&i.hovered!==r,p=a??`${r+1}`,h=l(t,{children:[e("span",{className:"shrink-0","aria-hidden":"true",children:m?m(r,n[r]):e("span",{className:"block size-2.5 rounded-mp-full",style:{background:n[r]}})}),e("span",{className:d?"truncate":"text-mp-on-surface-variant truncate",style:d?{color:n[r]}:void 0,children:p}),o?.[r]?e("span",{className:"text-mp-on-surface tabular-nums",children:o[r]}):null]}),f=s?c?"opacity-60":"":"opacity-38";return e("li",{className:"min-w-0",children:u?e("button",{type:"button","aria-pressed":s,onClick:()=>i.toggle(r),onPointerEnter:()=>i.setHovered(r),onPointerLeave:()=>i.setHovered(null),onFocus:e=>{e.currentTarget.matches(":focus-visible")&&i.setHovered(r)},onBlur:()=>i.setHovered(null),className:["flex min-w-0 cursor-pointer items-center gap-1.5 rounded-mp-xs","appearance-none border-0 bg-transparent p-0 text-inherit [font:inherit]","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2",f].filter(Boolean).join(" "),children:h}):e("span",{className:`flex min-w-0 items-center gap-1.5 ${f}`,children:h})},r)})})}export function ChartTooltipPanel({heading:t,items:a,total:n,totalLabel:r,x:i,y:s,flip:o,size:c}){return l("div",{"aria-hidden":"true",className:["mp-chart__tooltip pointer-events-none absolute z-10 min-w-24 max-w-64","bg-mp-surface-container-high shadow-mp-2 rounded-mp-xs px-2.5 py-2","xs"===c||"sm"===c?"text-mp-label-small":"text-mp-label-medium"].join(" "),style:{left:i,top:s,transform:`translate(${o?"calc(-100% - 12px)":"12px"}, -50%)`},children:[null==t||""===t?null:e("div",{className:"text-mp-on-surface-variant mb-1 truncate",children:t}),l("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:[a.map(t=>l("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"block size-2 shrink-0 rounded-mp-full",style:{background:t.color}}),t.name?e("span",{className:"text-mp-on-surface-variant min-w-0 truncate",children:t.name}):null,e("span",{className:"text-mp-on-surface ms-auto ps-2 tabular-nums",children:t.label??t.formatted})]},t.seriesIndex)),void 0===n?null:l("li",{className:"border-mp-outline-variant mt-1 flex items-center gap-1.5 border-0 border-t border-solid pt-1",children:[e("span",{className:"text-mp-on-surface-variant min-w-0 truncate",children:r}),e("span",{className:"text-mp-on-surface ms-auto ps-2 tabular-nums",children:n})]})]})]})}export function ChartStatus({heading:r,items:i,total:s,totalLabel:o}){return e("span",{role:"status","aria-live":"polite",className:n,children:0===i.length?null:l(t,{children:[null==r||""===r?null:l(t,{children:[r,", "]}),i.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex)),void 0===s?null:`, ${o}: ${s}`]})})}export function ChartTable({id:t,caption:a,corner:r,categories:i,names:o,values:c,format:m,locale:d,empty:u}){return e("div",{id:t,className:n,children:l("table",{children:[e("caption",{children:a}),e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:r}),o.map((t,l)=>e("th",{scope:"col",children:t??l+1},l))]})}),e("tbody",{children:0===i.length?e("tr",{children:e("td",{colSpan:o.length+1,children:u})}):i.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:s(t,d)}),o.map((t,l)=>{const n=c[l]?.[a];return e("td",{children:n?.label??(null===n?.value||void 0===n?u:m(n.value))},l)})]},a))})]})})}export function ChartShell({size:t,plotRef:a,name:n,describedBy:s,interactive:c,height:m,plotProps:d,children:u,tooltip:p,overlay:h,legend:f,legendSide:x="bottom",status:b,table:v,className:g,...N}){return l("div",{"data-mp-size":t,className:["mp-chart flex min-w-0 flex-col gap-3",g??""].filter(Boolean).join(" "),...N,children:[l("div",{className:`flex min-w-0 gap-3 ${o[x]}`,children:[l("div",{className:"relative flex min-w-0 flex-1",children:[l("div",{ref:a,role:"img",tabIndex:c?0:void 0,"aria-label":n,"aria-describedby":s,...d,className:["mp-chart__plot rounded-mp-xs relative min-w-0 flex-1","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2"].join(" "),style:{height:r(m)??i[t]},children:[u,p]}),h]}),f]}),e(ChartStatus,{heading:b.heading,items:b.items,total:b.total,totalLabel:b.totalLabel}),v]})}
+import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{VISUALLY_HIDDEN as n}from"./visually-hidden.js";import{cssLength as r}from"./length.js";import{PLOT_HEIGHT as s,formatCategory as i}from"./chart.js";export function useVisibility(e){const[t,l]=a.useState(()=>{const t=new Set;return e.forEach((e,l)=>{e.hidden&&t.add(l)}),t}),[n,r]=a.useState(null),s=a.useCallback(e=>{l(t=>{const l=new Set(t);return l.has(e)?l.delete(e):l.add(e),l})},[]),i=a.useMemo(()=>e.map((e,l)=>!t.has(l)),[e,t]);return a.useMemo(()=>({visible:i,hovered:n,toggle:s,setHovered:r}),[i,n,s])}export const LEGEND_ON={};export const LEGEND_OFF={interactive:!1};const o={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse",right:"flex-row"},c={start:"justify-start",center:"justify-center",end:"justify-end"};export const ChartLegend=/*@__PURE__*/a.memo(function({names:a,colors:n,options:r,visibility:s,size:i,values:o,swatch:m,colorNames:d=!1}){const u=!1!==r.interactive,p="xs"===i||"sm"===i?"text-mp-label-small":"text-mp-label-medium";return e("ul",{className:["mp-chart__legend m-0 flex list-none flex-wrap items-center gap-x-4 gap-y-1 p-0",c[r.align??"center"],p].join(" "),children:a.map((a,r)=>{const i=s.visible[r],c=i&&null!==s.hovered&&s.hovered!==r,p=a??`${r+1}`,h=l(t,{children:[e("span",{className:"shrink-0","aria-hidden":"true",children:m?m(r,n[r]):e("span",{className:"block size-2.5 rounded-mp-full",style:{background:n[r]}})}),e("span",{className:d?"truncate":"text-mp-on-surface-variant truncate",style:d?{color:n[r]}:void 0,children:p}),o?.[r]?e("span",{className:"text-mp-on-surface tabular-nums",children:o[r]}):null]}),f=i?c?"opacity-60":"":"opacity-38";return e("li",{className:"min-w-0",children:u?e("button",{type:"button","aria-pressed":i,onClick:()=>s.toggle(r),onPointerEnter:()=>s.setHovered(r),onPointerLeave:()=>s.setHovered(null),onFocus:e=>{e.currentTarget.matches(":focus-visible")&&s.setHovered(r)},onBlur:()=>s.setHovered(null),className:["flex min-w-0 cursor-pointer items-center gap-1.5 rounded-mp-xs","appearance-none border-0 bg-transparent p-0 text-inherit [font:inherit]","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2",f].filter(Boolean).join(" "),children:h}):e("span",{className:`flex min-w-0 items-center gap-1.5 ${f}`,children:h})},r)})})});export function ChartTooltipPanel({heading:t,items:a,total:n,totalLabel:r,x:s,y:i,flip:o,size:c}){return l("div",{"aria-hidden":"true",className:["mp-chart__tooltip pointer-events-none absolute z-10 min-w-24 max-w-64","bg-mp-surface-container-high shadow-mp-2 rounded-mp-xs px-2.5 py-2","xs"===c||"sm"===c?"text-mp-label-small":"text-mp-label-medium"].join(" "),style:{left:s,top:i,transform:`translate(${o?"calc(-100% - 12px)":"12px"}, -50%)`},children:[null==t||""===t?null:e("div",{className:"text-mp-on-surface-variant mb-1 truncate",children:t}),l("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:[a.map(t=>l("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"block size-2 shrink-0 rounded-mp-full",style:{background:t.color}}),t.name?e("span",{className:"text-mp-on-surface-variant min-w-0 truncate",children:t.name}):null,e("span",{className:"text-mp-on-surface ms-auto ps-2 tabular-nums",children:t.label??t.formatted})]},t.seriesIndex)),void 0===n?null:l("li",{className:"border-mp-outline-variant mt-1 flex items-center gap-1.5 border-0 border-t border-solid pt-1",children:[e("span",{className:"text-mp-on-surface-variant min-w-0 truncate",children:r}),e("span",{className:"text-mp-on-surface ms-auto ps-2 tabular-nums",children:n})]})]})]})}export function ChartStatus({heading:r,items:s,total:i,totalLabel:o}){return e("span",{role:"status","aria-live":"polite",className:n,children:0===s.length?null:l(t,{children:[null==r||""===r?null:l(t,{children:[r,", "]}),s.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,e.label??e.formatted]},e.seriesIndex)),void 0===i?null:`, ${o}: ${i}`]})})}export const ChartTable=/*@__PURE__*/a.memo(function({id:t,caption:a,corner:r,categories:s,names:o,values:c,format:m,locale:d,empty:u}){return e("div",{id:t,className:n,children:l("table",{children:[e("caption",{children:a}),e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:r}),o.map((t,l)=>e("th",{scope:"col",children:t??l+1},l))]})}),e("tbody",{children:0===s.length?e("tr",{children:e("td",{colSpan:o.length+1,children:u})}):s.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:i(t,d)}),o.map((t,l)=>{const n=c[l]?.[a];return e("td",{children:n?.label??(null===n?.value||void 0===n?u:m(n.value))},l)})]},a))})]})})});export function ChartShell({size:t,plotRef:a,name:n,describedBy:i,interactive:c,height:m,plotProps:d,children:u,tooltip:p,overlay:h,legend:f,legendSide:x="bottom",status:b,table:v,className:g,...N}){return l("div",{"data-mp-size":t,className:["mp-chart flex min-w-0 flex-col gap-3",g??""].filter(Boolean).join(" "),...N,children:[l("div",{className:`flex min-w-0 gap-3 ${o[x]}`,children:[l("div",{className:"relative flex min-w-0 flex-1",children:[l("div",{ref:a,role:"img",tabIndex:c?0:void 0,"aria-label":n,"aria-describedby":i,...d,className:["mp-chart__plot rounded-mp-xs relative min-w-0 flex-1","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2"].join(" "),style:{height:r(m)??s[t]},children:[u,p]}),h]}),f]}),e(ChartStatus,{heading:b.heading,items:b.items,total:b.total,totalLabel:b.totalLabel}),v]})}

package/dist/internal/ChartFrame.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t,jsxs as e,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useMPElementSize as a}from"../hooks/useMPElementSize.js";import{useMPLocale as i,useMPMessages as o}from"./locale.js";import{useMPSize as r}from"./config.js";import{CHART as s}from"./messages/chart.js";import{TABLE as h}from"./messages/table.js";import{ChartLegend as c,ChartShell as u,ChartTable as d,ChartTooltipPanel as m,useVisibility as p}from"./ChartChrome.js";import{VISUALLY_HIDDEN as f}from"./visually-hidden.js";import{CHART_FONT_SIZE as x,MARKER_RADIUS as g,PLOT_HEIGHT as v,bandScale as y,categoryAt as b,categoryCount as k,categoryExtent as M,fitsLast as w,formatCategory as z,formatShare as S,formatStatistic as P,seriesColor as C,seriesExtent as A,showsTick as $,textWidth as _,tickStride as B,tickTurn as j,toNumber as R,toValues as N,truncate as W,turnedBand as I,turnedRoom as F,turnedStep as T,valueScale as D,withReferences as L}from"./chart.js";const X=[];function Y({text:e,along:l,top:n,turn:a,fontSize:i}){return t("text",a<=0?{x:l,y:n+i+6,textAnchor:"middle",fill:Z,fontSize:i,children:e}:{x:l,y:n+8,textAnchor:"end",dominantBaseline:"central",transform:`rotate(${-a} ${l} ${n+8})`,fill:Z,fontSize:i,children:e})}const E="var(--_mp-color-outline-variant)",V="var(--_mp-color-outline)",Z="var(--_mp-color-on-surface-variant)";function U({plot:l,scale:n,horizontal:a,categoryPx:i,categoryScale:o,categoryValuePx:r,valuePx:s,tickTexts:h,categoryTexts:c,valueAxis:u,categoryAxis:d,fontSize:m,zeroPx:p,turn:f,tickBand:x}){const g=!1!==u?.grid&&!u?.hidden,v=!d?.hidden&&(d?.grid??null!==o),y=t=>o?r(o.ticks[t]):(a?l.top:l.left)+i(t),b=(t,e)=>f>0?T(f,m):Math.max(...t.map(t=>_(t,m)),1)+e,k=B(c.length,a?l.height:l.width,a?1.8*m:b(c,12)),M=B(n.ticks.length,a?l.width:l.height,a?b(h,16):2*m),z=c.length>1?Math.abs(y(1)-y(0)):l.width,S=n.ticks.length>1?Math.abs(s(n.ticks[1])-s(n.ticks[0])):l.height,P=w(c.length,k,z,a?1.8*m:f>0?T(f,m):_(c[c.length-1]??"",m)),C=w(n.ticks.length,M,S,a?f>0?T(f,m):_(h[h.length-1]??"",m):1.6*m);return e("g",{className:"mp-chart__axes",children:[n.ticks.map((i,o)=>{const r=s(i),c=Math.abs(i)<1e-9&&n.min<0,d=!u?.hidden&&$(o,n.ticks.length,M,C);return e("g",{children:[g?t("line",a?{x1:r,x2:r,y1:l.top,y2:l.top+l.height,stroke:c?V:E,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:r,y2:r,stroke:c?V:E,strokeWidth:1}):null,d?a?t(Y,{text:h[o],along:r,top:l.top+l.height,turn:f,fontSize:m}):t("text",{x:l.left-8,y:r,textAnchor:"end",dominantBaseline:"central",fill:Z,fontSize:m,children:h[o]}):null]},`v${o}`)}),c.map((n,i)=>{const o=y(i),r=!d?.hidden&&$(i,c.length,k,P);return e("g",{children:[v?t("line",a?{x1:l.left,x2:l.left+l.width,y1:o,y2:o,stroke:E,strokeWidth:1}:{x1:o,x2:o,y1:l.top,y2:l.top+l.height,stroke:E,strokeWidth:1}):null,r?a?t("text",{x:l.left-8,y:o,textAnchor:"end",dominantBaseline:"central",fill:Z,fontSize:m,children:n}):t(Y,{text:n,along:o,top:l.top+l.height,turn:f,fontSize:m}):null]},`c${i}`)}),t("line",a?{x1:p,x2:p,y1:l.top,y2:l.top+l.height,stroke:V,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:p,y2:p,stroke:V,strokeWidth:1}),u?.label&&!u.hidden?t("text",{x:a?l.left+l.width/2:m,y:a?l.top+l.height+x+m:l.top+l.height/2,textAnchor:"middle",dominantBaseline:a?"auto":"central",fill:Z,fontSize:m,transform:a?void 0:`rotate(-90 ${m} ${l.top+l.height/2})`,children:u.label}):null,d?.label&&!d.hidden?t("text",{x:a?m:l.left+l.width/2,y:a?l.top+l.height/2:l.top+l.height+x+m,textAnchor:"middle",dominantBaseline:a?"central":"auto",fill:Z,fontSize:m,transform:a?`rotate(-90 ${m} ${l.top+l.height/2})`:void 0,children:d.label}):null]})}function H(t,e){try{e?t.currentTarget.setPointerCapture(t.pointerId):t.currentTarget.releasePointerCapture(t.pointerId)}catch{}}function K(t,e,l){return(t??[]).map(t=>({...t,at:R(t.value),end:void 0===t.to?null:R(t.to)})).filter(t=>null!==t.at).map(t=>({at:e(t.at),to:null===t.end?null:e(t.end),upright:l,label:t.label,color:t.color?C(0,t.color):"var(--_mp-color-outline)",dashed:!1!==t.dashed}))}function O({marks:l,plot:n,pass:a,fontSize:i}){return 0===l.length?null:t("g",{className:`mp-chart__references mp-chart__references--${a}`,"aria-hidden":"true",children:l.map((l,o)=>{if("band"===a)return null===l.to?null:t("rect",{...(r=l.at,s=l.to,l.upright?{x:Math.min(r,s),y:n.top,width:Math.abs(s-r),height:n.height}:{x:n.left,y:Math.min(r,s),width:n.width,height:Math.abs(s-r)}),fill:l.color,opacity:.12},o);var r,s;const h=null===l.to?[l.at]:[l.at,l.to];return e("g",{children:[h.map(e=>t("line",{x1:l.upright?e:n.left,x2:l.upright?e:n.left+n.width,y1:l.upright?n.top:e,y2:l.upright?n.top+n.height:e,stroke:l.color,strokeWidth:1,strokeDasharray:l.dashed?"4 3":void 0},e)),void 0===l.label||null===l.label||""===l.label?null:t("text",{x:l.upright?l.at+4:n.left+n.width,y:l.upright?n.top+i:l.at-4,textAnchor:l.upright?"start":"end",fill:l.color,fontSize:i,children:l.label})]},o)})})}export function CartesianFrame({series:w,categories:$,xAxis:B,yAxis:R,horizontal:T=!1,zoom:Y,stacked:E=!1,includeZero:q=!0,bandRatio:G=1,inset:J=!1,headroom:Q=0,markInset:tt=0,xScale:et="band",marks:lt,markRadius:nt=24,swatch:at,scale:it,table:ot,markTooltip:rt,height:st,format:ht,locale:ct,label:ut,legend:dt,tooltip:mt,empty:pt,labelColor:ft="ink",size:xt,className:gt,style:vt,children:yt,...bt}){const kt=r(xt),Mt=i(ct),wt=o(s,Mt),zt=o(h,Mt),St=n.useRef(null),Pt=a(St),Ct=Pt.width,At=n.useId(),$t=n.useId(),_t=p(w),[Bt,jt]=n.useState(null),[Rt,Nt]=n.useState(null),[Wt,It]=n.useState(null),[Ft,Tt]=n.useState(null),Dt=n.useRef(null),Lt=t=>{Dt.current=t,Tt(t)},Xt=n.useCallback(t=>P(t,Mt,ht,!0),[ht,Mt]),Yt=n.useMemo(()=>N(w),[w]),Et=n.useMemo(()=>w.map((t,e)=>C(e,t.color)),[w]),Vt=n.useMemo(()=>w.map(t=>t.name),[w]),Zt=k(w),Ut=n.useMemo(()=>Array.from({length:Zt},(t,e)=>b(e,$,Yt)),[Zt,$,Yt]),Ht=!0!==Y&&!1!==Y&&Y?Y:{},Kt=void 0!==Y&&!1!==Y&&"band"===et,[Ot,qt]=n.useState(()=>Ht.defaultRange??null),Gt=(void 0!==Ht.range?Ht.range:Ot)??null,Jt=Kt&&null!==Gt&&0!==Zt?[Math.max(0,Math.min(Zt-1,Math.min(Gt[0],Gt[1]))),Math.max(0,Math.min(Zt-1,Math.max(Gt[0],Gt[1])))]:null,Qt=Jt?Jt[0]:0,te=Jt?Jt[1]-Jt[0]+1:Zt,ee=Jt?Yt.map(t=>t.slice(Qt,Qt+te)):Yt,le=Jt?Ut.slice(Qt,Qt+te):Ut,ne=t=>{void 0===Ht.range&&qt(t),Ht.onRangeChange?.(t)},ae=ee.filter((t,e)=>_t.visible[e]),ie="percent"===E,oe=ie?{min:0,max:1}:A(ae,Boolean(E)),re=x[kt],se=R,he=B,ce=it??D(ie?oe:L(oe,se?.references),{min:ie?0:se?.min,max:ie?1:se?.max,tickCount:se?.tickCount??(ie?4:void 0),includeZero:q}),ue="value"===et?M(ae,$):null,de="value"===et?D(L(ue,he?.references),{min:he?.min,max:he?.max,tickCount:he?.tickCount,includeZero:!1}):null,me=ce.ticks.map((t,e)=>se?.tickFormat?String(se.tickFormat(t,e)):ie?S(t,Mt):Xt(t)),pe=de?de.ticks.map((t,e)=>he?.tickFormat?String(he.tickFormat(t,e)):P(t,Mt,void 0,!0)):le.map((t,e)=>he?.tickFormat?String(he.tickFormat(t,e)):z(t,Mt)),fe=me.reduce((t,e)=>Math.max(t,_(e,re)),0),xe=re+6,ge=se?.hidden?0:fe+10+(se?.label?xe:0),ve="number"==typeof st?st:void 0===st?v[kt]:Pt.height,ye=(Ct-(T?0:ge)-16)/Math.max(1,te),be=T?se:he,ke=T?me:pe,Me=T?he?.hidden?0:pe.reduce((t,e)=>Math.max(t,Math.min(150,_(e,re))),0)+10+(he?.label?xe:0):ge,we=ke.reduce((t,e)=>Math.max(t,_(e,re)),0),ze=T?12+Q:Math.max(8,we/2),Se=(Ct-Me-ze-2*tt)/Math.max(1,ke.length),Pe=T||null!==de,Ce=be?.hidden?0:j(be?.tickLabels??(Pe?"truncate":"auto"),ke,re,Se),Ae=Math.min(120,.5*ve),$e=Ce>0&&!T?pe.map((t,e)=>W(t,(t=>Math.min(F(Ce,Ae,re),Ce>=90?1/0:(Me+Se*(t+(J?0:.5)))/Math.cos(Ce*Math.PI/180)))(e),re)):de?pe:T||ye-6>=2.4*re?pe.map(t=>W(t,T?150:ye-6,re)):pe,_e=$e.reduce((t,e)=>Math.max(t,_(e,re)),0),Be=be?.hidden?0:Ce>0?8+Math.min(Ae,I(Ce,T?fe:_e,re))+4:re+12,je=T?he?.hidden?0:_e+10+(he?.label?xe:0):ge,Re=Be+(be?.hidden||!be?.label?0:xe),Ne=(T?he:se)?.thickness??je,We=be?.thickness??Re,Ie=(T||Ce>0?12+(T?Q:0):Math.max(8,_e/2))+tt,Fe=g[kt]+4+(T?0:Q)+tt,Te={left:Ne+tt,top:Fe,width:Math.max(0,Ct-Ne-tt-Ie),height:Math.max(0,ve-Fe-We-tt)},De=T?Te.height:Te.width,Le=y(J?Math.max(1,te-1):te,De,G),Xe=n.useCallback(t=>J?te<=1?De/2:De*t/(te-1):Le.centre(t),[J,te,De,Le]),Ye=n.useCallback(t=>T?Te.left+ce.fraction(t)*Te.width:Te.top+(1-ce.fraction(t))*Te.height,[T,Te.left,Te.top,Te.width,Te.height,ce]),Ee=n.useCallback(t=>T?Te.top+(1-(de?.fraction(t)??0))*Te.height:Te.left+(de?.fraction(t)??0)*Te.width,[T,Te.left,Te.top,Te.width,Te.height,de]),Ve=n.useCallback((t,e)=>T?{x:Ye(e),y:Te.top+Xe(t)}:{x:Te.left+Xe(t),y:Ye(e)},[T,Ye,Xe,Te.left,Te.top]),Ze=Ye(Math.min(Math.max(0,ce.min),ce.max)),Ue=[...K(se?.references,Ye,T),...de?K(he?.references,Ee,!T):[]],He=t=>t instanceof Date?z(t,Mt):Xt(t),Ke=[...se?.references??[],...de?he?.references??[]:[]].filter(t=>void 0!==t.label&&null!==t.label&&""!==t.label),Oe={plot:Te,values:ee,visible:_t.visible,colors:Et,labelInk:t=>"series"===ft?Et[t]??Z:"var(--_mp-color-on-surface)",scale:ce,band:Le,horizontal:T,valuePx:Ye,categoryPx:Xe,point:Ve,categoryScale:de,categoryValuePx:Ee,zeroPx:Ze,categories:le,format:Xt,share:t=>S(t,Mt),size:kt},qe=lt?lt(Oe):X,Ge=!1===mt?{mode:"none"}:!0===mt||void 0===mt?{}:mt,Je=Ge.mode??(lt?"item":"index"),Qe=(t,e)=>{const l=St.current;if(!l||0===te)return null;const n=l.getBoundingClientRect(),a=T?e-n.top-Te.top:t-n.left-Te.left;if(a<-Le.step||a>De+Le.step)return null;const i=J?te<=1?0:Math.round(a/De*(te-1)):Math.floor(a/Le.step);return Math.min(te-1,Math.max(0,i))},tl=null===Rt?null:qe[Rt]??null,el=lt?tl?tl.index:null:Bt,ll=lt?qe.length:te,nl=()=>{jt(null),Nt(null),It(null)},al=t=>{const e=Dt.current;if(null===e)return;H(t,!1);const l=Math.min(e.start,e.to),n=Math.max(e.start,e.to);Lt(null),n-l+1>=Math.max(2,Ht.min??2)&&ne([Qt+l,Qt+n])},il=t=>{const e=null===t?null:Math.min(ll-1,Math.max(0,t));lt?Nt(e):jt(e)},ol=t=>{It(null);il(((lt?Rt:Bt)??(t>0?-1:ll))+t)},rl=null!==el&&ie?ee.reduce((t,e,l)=>{const n=_t.visible[l]?e[el]?.value:null;return t+(null!=n&&n>0?n:0)},0):0,sl=null===el?[]:w.flatMap((t,e)=>{if(!_t.visible[e]||tl&&tl.series!==e)return[];const l=ee[e]?.[el];return l&&null!==l.value?[{seriesIndex:e,name:t.name,color:l.color??Et[e],value:l.value,formatted:ie&&rl>0&&l.value>0?`${Xt(l.value)} · ${S(l.value/rl,Mt)}`:Xt(l.value),label:l.label}]:[]}),hl=tl&&rt?rt(tl):null,cl=hl?hl.items:"item"===Je&&sl.length>1&&null!==Wt?[sl.reduce((t,e)=>Math.abs(Ye(e.value??0)-Wt)<Math.abs(Ye(t.value??0)-Wt)?e:t)]:sl,ul="value"===Ge.sort?[...cl].sort((t,e)=>(e.value??-1/0)-(t.value??-1/0)):cl,dl=!(Ge.total??!0===E)||hl||cl.length<2?void 0:Xt(cl.reduce((t,e)=>t+(e.value??0),0)),ml=hl?hl.heading:tl?z(ee[tl.series]?.[tl.index]?.x??$?.[tl.index]??tl.index,Mt):null===el?void 0:z(le[el]??el,Mt),pl=tl?tl.x:T?Ye(cl[0]?.value??0):Te.left+Xe(el??0),fl=tl?tl.y:T?Te.top+Xe(el??0):Te.top+Te.height/2,xl=tl?(tl.x-Te.left)/Math.max(1,Te.width)>.6:(T?ce.fraction(cl[0]?.value??0):Xe(el??0)/Math.max(1,De))>.6,gl=!1===dt?{interactive:!1}:!0===dt||void 0===dt?{}:dt,vl=!0===dt||!1!==dt&&w.length>1,yl=gl.side??"bottom",bl={...Oe,hovered:_t.hovered,activeIndex:el,marks:qe,activeMark:tl},kl=0===te||null===oe||"value"===et&&null===ue;return t(u,{...bt,size:kt,className:gt,style:vt,plotRef:St,name:ut??wt.label,describedBy:kl?void 0:Ke.length>0?`${At} ${$t}`:At,interactive:!kl,height:st,legendSide:yl,plotProps:{onPointerDown:Kt&&!kl?t=>{const e=Qe(t.clientX,t.clientY);null!==e&&(H(t,!0),nl(),Lt({start:e,to:e}))}:void 0,onPointerMove:kl?void 0:t=>{null===Dt.current?"none"!==Je&&(lt?Nt(((t,e)=>{const l=St.current;if(!l||0===qe.length)return null;const n=l.getBoundingClientRect(),a=t-n.left,i=e-n.top;let o=null,r=1/0,s=1/0;return qe.forEach((t,e)=>{const l=Math.hypot(t.x-a,t.y-i),n=void 0===t.rx?Math.max(0,l-t.r):Math.hypot(Math.max(0,Math.abs(t.x-a)-t.rx),Math.max(0,Math.abs(t.y-i)-(t.ry??t.rx)));n<=nt&&(n<r||n===r&&l<s)&&(r=n,s=l,o=e)}),o})(t.clientX,t.clientY)):jt(Qe(t.clientX,t.clientY)),"item"===Je&&It(((t,e)=>{const l=St.current;if(!l)return null;const n=l.getBoundingClientRect();return T?t-n.left:e-n.top})(t.clientX,t.clientY))):Lt({...Dt.current,to:Qe(t.clientX,t.clientY)??Dt.current.to})},onPointerUp:Kt&&!kl?al:void 0,onPointerCancel:Kt&&!kl?()=>Lt(null):void 0,onPointerLeave:t=>{Kt&&!kl&&al(t),nl()},onKeyDown:kl||"none"===Je&&!Kt?void 0:t=>{const e=T?"ArrowDown":"ArrowRight",l=T?"ArrowUp":"ArrowLeft";if(t.key===e)ol(1);else if(t.key===l)ol(-1);else if("Home"===t.key)il(0);else if("End"===t.key)il(ll-1);else{if("Escape"!==t.key)return;null===el&&null!==Jt?ne(null):nl()}t.preventDefault()},onBlur:nl},overlay:null===Jt||kl?null:t("button",{type:"button",onClick:()=>ne(null),className:["mp-chart__reset absolute end-0 top-0 z-10 cursor-pointer","text-mp-primary text-mp-label-medium rounded-mp-xs px-2 py-1","appearance-none border-0 bg-transparent [font:inherit]","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2"].join(" "),children:wt.showAll}),tooltip:null!==el&&cl.length>0&&"none"!==Je&&null===Ft?Ge.render?t("div",{"aria-hidden":"true",className:"pointer-events-none absolute z-10",style:{left:pl,top:fl,transform:`translate(${xl?"calc(-100% - 12px)":"12px"}, -50%)`},children:Ge.render({index:el,category:le[el]??el,items:ul,total:dl})}):t(m,{heading:ml,items:ul,total:dl,totalLabel:wt.total,x:pl,y:fl,flip:xl,size:kt}):null,legend:vl?t(c,{names:Vt,colors:Et,options:gl,visibility:_t,size:kt,swatch:at,colorNames:"series"===ft,values:gl.showValue&&null!==el?w.map((t,e)=>{const l=ee[e]?.[el]?.value;return null==l?void 0:Xt(l)}):void 0}):null,status:{heading:ml,items:ul,total:dl,totalLabel:wt.total},table:kl?null:e(l,{children:[ot?.(At)??t(d,{id:At,caption:ut??wt.table,corner:he?.label??wt.category,categories:le,names:Vt,values:ee,format:Xt,locale:Mt,empty:zt.empty}),0===Ke.length?null:t("ul",{id:$t,className:f,children:Ke.map((t,l)=>e("li",{children:[t.label,":"," ",void 0===t.to?He(t.value):`${He(t.value)}–${He(t.to)}`]},l))})]}),children:kl?t("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:pt??zt.empty}):Ct>0&&ve>0?e("svg",{width:Ct,height:ve,viewBox:`0 0 ${Ct} ${ve}`,"aria-hidden":"true",className:"block overflow-visible",children:[t(U,{plot:Te,scale:ce,horizontal:T,categoryPx:Xe,categoryScale:de,categoryValuePx:Ee,valuePx:Ye,tickTexts:me,categoryTexts:$e,valueAxis:se,categoryAxis:he,fontSize:re,zeroPx:Ze,turn:Ce,tickBand:Be}),t(O,{marks:Ue,plot:Te,pass:"band",fontSize:re}),null===el||lt||"index"!==Je||!1===Ge.crosshair?null:(()=>{const e=Xe(el);return t("line",T?{x1:Te.left,x2:Te.left+Te.width,y1:Te.top+e,y2:Te.top+e,stroke:V,strokeWidth:1}:{x1:Te.left+e,x2:Te.left+e,y1:Te.top,y2:Te.top+Te.height,stroke:V,strokeWidth:1})})(),yt(bl),t(O,{marks:Ue,plot:Te,pass:"line",fontSize:re}),null===Ft?null:(()=>{const e=[Ft.start,Ft.to].map(t=>(T?Te.top:Te.left)+Xe(t)).sort((t,e)=>t-e),l=Math.max(Le.step,1),n=e[0]-l/2,a=e[1]-e[0]+l;return t("rect",{x:T?Te.left:n,y:T?n:Te.top,width:T?Te.width:a,height:T?a:Te.height,fill:"var(--_mp-color-primary)",fillOpacity:.12,stroke:"var(--_mp-color-primary)",strokeWidth:1})})()]}):null})}
+import{jsx as t,jsxs as e,Fragment as l}from"react/jsx-runtime";import*as n from"react";import{useBoxSize as a}from"./box-size.js";import{useMPLocale as o,useMPMessages as i}from"./locale.js";import{useMPSize as r}from"./config.js";import{CHART as s}from"./messages/chart.js";import{TABLE as h}from"./messages/table.js";import{ChartLegend as c,ChartShell as u,LEGEND_OFF as d,LEGEND_ON as m,ChartTable as p,ChartTooltipPanel as f,useVisibility as x}from"./ChartChrome.js";import{VISUALLY_HIDDEN as g}from"./visually-hidden.js";import{CHART_FONT_SIZE as v,MARKER_RADIUS as y,PLOT_HEIGHT as b,bandScale as k,categoryAt as M,categoryCount as w,categoryExtent as z,fitsLast as S,formatCategory as C,formatShare as P,formatStatistic as A,seriesColor as $,seriesExtent as _,showsTick as B,textWidth as j,tickStride as R,tickTurn as N,toNumber as W,toValues as I,truncate as F,turnedBand as T,turnedRoom as D,turnedStep as L,valueScale as X,withReferences as Y}from"./chart.js";const V=[];function E({text:e,along:l,top:n,turn:a,fontSize:o}){return t("text",a<=0?{x:l,y:n+o+6,textAnchor:"middle",fill:H,fontSize:o,children:e}:{x:l,y:n+8,textAnchor:"end",dominantBaseline:"central",transform:`rotate(${-a} ${l} ${n+8})`,fill:H,fontSize:o,children:e})}const Z="var(--_mp-color-outline-variant)",U="var(--_mp-color-outline)",H="var(--_mp-color-on-surface-variant)";function K({plot:l,scale:n,horizontal:a,categoryPx:o,categoryScale:i,categoryValuePx:r,valuePx:s,tickTexts:h,categoryTexts:c,valueAxis:u,categoryAxis:d,fontSize:m,zeroPx:p,turn:f,tickBand:x}){const g=!1!==u?.grid&&!u?.hidden,v=!d?.hidden&&(d?.grid??null!==i),y=t=>i?r(i.ticks[t]):(a?l.top:l.left)+o(t),b=(t,e)=>f>0?L(f,m):t.reduce((t,e)=>Math.max(t,j(e,m)),1)+e,k=R(c.length,a?l.height:l.width,a?1.8*m:b(c,12)),M=R(n.ticks.length,a?l.width:l.height,a?b(h,16):2*m),w=c.length>1?Math.abs(y(1)-y(0)):l.width,z=n.ticks.length>1?Math.abs(s(n.ticks[1])-s(n.ticks[0])):l.height,C=S(c.length,k,w,a?1.8*m:f>0?L(f,m):j(c[c.length-1]??"",m)),P=S(n.ticks.length,M,z,a?f>0?L(f,m):j(h[h.length-1]??"",m):1.6*m);return e("g",{className:"mp-chart__axes",children:[n.ticks.map((o,i)=>{const r=s(o),c=Math.abs(o)<1e-9&&n.min<0,d=!u?.hidden&&B(i,n.ticks.length,M,P);return e("g",{children:[g?t("line",a?{x1:r,x2:r,y1:l.top,y2:l.top+l.height,stroke:c?U:Z,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:r,y2:r,stroke:c?U:Z,strokeWidth:1}):null,d?a?t(E,{text:h[i],along:r,top:l.top+l.height,turn:f,fontSize:m}):t("text",{x:l.left-8,y:r,textAnchor:"end",dominantBaseline:"central",fill:H,fontSize:m,children:h[i]}):null]},`v${i}`)}),c.map((n,o)=>{const i=y(o),r=!d?.hidden&&B(o,c.length,k,C);return v||r?e("g",{children:[v?t("line",a?{x1:l.left,x2:l.left+l.width,y1:i,y2:i,stroke:Z,strokeWidth:1}:{x1:i,x2:i,y1:l.top,y2:l.top+l.height,stroke:Z,strokeWidth:1}):null,r?a?t("text",{x:l.left-8,y:i,textAnchor:"end",dominantBaseline:"central",fill:H,fontSize:m,children:n}):t(E,{text:n,along:i,top:l.top+l.height,turn:f,fontSize:m}):null]},`c${o}`):null}),t("line",a?{x1:p,x2:p,y1:l.top,y2:l.top+l.height,stroke:U,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:p,y2:p,stroke:U,strokeWidth:1}),u?.label&&!u.hidden?t("text",{x:a?l.left+l.width/2:m,y:a?l.top+l.height+x+m:l.top+l.height/2,textAnchor:"middle",dominantBaseline:a?"auto":"central",fill:H,fontSize:m,transform:a?void 0:`rotate(-90 ${m} ${l.top+l.height/2})`,children:u.label}):null,d?.label&&!d.hidden?t("text",{x:a?m:l.left+l.width/2,y:a?l.top+l.height/2:l.top+l.height+x+m,textAnchor:"middle",dominantBaseline:a?"central":"auto",fill:H,fontSize:m,transform:a?`rotate(-90 ${m} ${l.top+l.height/2})`:void 0,children:d.label}):null]})}function O(t,e){try{e?t.currentTarget.setPointerCapture(t.pointerId):t.currentTarget.releasePointerCapture(t.pointerId)}catch{}}function q(t,e,l){return(t??[]).map(t=>({...t,at:W(t.value),end:void 0===t.to?null:W(t.to)})).filter(t=>null!==t.at).map(t=>({at:e(t.at),to:null===t.end?null:e(t.end),upright:l,label:t.label,color:t.color?$(0,t.color):"var(--_mp-color-outline)",dashed:!1!==t.dashed}))}function G({marks:l,plot:n,pass:a,fontSize:o}){return 0===l.length?null:t("g",{className:`mp-chart__references mp-chart__references--${a}`,"aria-hidden":"true",children:l.map((l,i)=>{if("band"===a)return null===l.to?null:t("rect",{...(r=l.at,s=l.to,l.upright?{x:Math.min(r,s),y:n.top,width:Math.abs(s-r),height:n.height}:{x:n.left,y:Math.min(r,s),width:n.width,height:Math.abs(s-r)}),fill:l.color,opacity:.12},i);var r,s;const h=null===l.to?[l.at]:[l.at,l.to];return e("g",{children:[h.map(e=>t("line",{x1:l.upright?e:n.left,x2:l.upright?e:n.left+n.width,y1:l.upright?n.top:e,y2:l.upright?n.top+n.height:e,stroke:l.color,strokeWidth:1,strokeDasharray:l.dashed?"4 3":void 0},e)),void 0===l.label||null===l.label||""===l.label?null:t("text",{x:l.upright?l.at+4:n.left+n.width,y:l.upright?n.top+o:l.at-4,textAnchor:l.upright?"start":"end",fill:l.color,fontSize:o,children:l.label})]},i)})})}export function CartesianFrame({series:S,categories:B,xAxis:R,yAxis:W,horizontal:L=!1,zoom:E,stacked:Z=!1,includeZero:J=!0,bandRatio:Q=1,inset:tt=!1,headroom:et=0,markInset:lt=0,xScale:nt="band",marks:at,markRadius:ot=24,swatch:it,scale:rt,table:st,markTooltip:ht,height:ct,format:ut,locale:dt,label:mt,legend:pt,tooltip:ft,empty:xt,labelColor:gt="ink",size:vt,className:yt,style:bt,children:kt,...Mt}){const wt=r(vt),zt=o(dt),St=i(s,zt),Ct=i(h,zt),Pt=n.useRef(null),At=a(Pt),$t=At.width,_t=n.useId(),Bt=n.useId(),jt=x(S),[Rt,Nt]=n.useState(null),[Wt,It]=n.useState(null),[Ft,Tt]=n.useState(null),[Dt,Lt]=n.useState(null),Xt=n.useRef(null),Yt=t=>{Xt.current=t,Lt(t)},Vt=n.useCallback(t=>A(t,zt,ut,!0),[ut,zt]),Et=n.useMemo(()=>I(S),[S]),Zt=n.useMemo(()=>S.map((t,e)=>$(e,t.color)),[S]),Ut=n.useMemo(()=>S.map(t=>t.name),[S]),Ht=w(S),Kt=n.useMemo(()=>Array.from({length:Ht},(t,e)=>M(e,B,Et)),[Ht,B,Et]),Ot=!0!==E&&!1!==E&&E?E:{},qt=void 0!==E&&!1!==E&&"band"===nt,[Gt,Jt]=n.useState(()=>Ot.defaultRange??null),Qt=(void 0!==Ot.range?Ot.range:Gt)??null,te=qt&&null!==Qt&&0!==Ht?[Math.max(0,Math.min(Ht-1,Math.min(Qt[0],Qt[1]))),Math.max(0,Math.min(Ht-1,Math.max(Qt[0],Qt[1])))]:null,ee=te?te[0]:0,le=te?te[1]-te[0]+1:Ht,ne=null!==te,ae=n.useMemo(()=>ne?Et.map(t=>t.slice(ee,ee+le)):Et,[Et,ne,ee,le]),oe=n.useMemo(()=>ne?Kt.slice(ee,ee+le):Kt,[Kt,ne,ee,le]),ie=t=>{void 0===Ot.range&&Jt(t),Ot.onRangeChange?.(t)},re=ae.filter((t,e)=>jt.visible[e]),se="percent"===Z,he=se?{min:0,max:1}:_(re,Boolean(Z)),ce=v[wt],ue=W,de=R,me=rt??X(se?he:Y(he,ue?.references),{min:se?0:ue?.min,max:se?1:ue?.max,tickCount:ue?.tickCount??(se?4:void 0),includeZero:J}),pe="value"===nt?z(re,B):null,fe="value"===nt?X(Y(pe,de?.references),{min:de?.min,max:de?.max,tickCount:de?.tickCount,includeZero:!1}):null,xe=me.ticks.map((t,e)=>ue?.tickFormat?String(ue.tickFormat(t,e)):se?P(t,zt):Vt(t)),ge=fe?fe.ticks.map((t,e)=>de?.tickFormat?String(de.tickFormat(t,e)):A(t,zt,void 0,!0)):oe.map((t,e)=>de?.tickFormat?String(de.tickFormat(t,e)):C(t,zt)),ve=xe.reduce((t,e)=>Math.max(t,j(e,ce)),0),ye=ce+6,be=ue?.hidden?0:ve+10+(ue?.label?ye:0),ke="number"==typeof ct?ct:void 0===ct?b[wt]:At.height,Me=($t-(L?0:be)-16)/Math.max(1,le),we=L?ue:de,ze=L?xe:ge,Se=L?de?.hidden?0:ge.reduce((t,e)=>Math.max(t,Math.min(150,j(e,ce))),0)+10+(de?.label?ye:0):be,Ce=ze.reduce((t,e)=>Math.max(t,j(e,ce)),0),Pe=L?12+et:Math.max(8,Ce/2),Ae=($t-Se-Pe-2*lt)/Math.max(1,ze.length),$e=L||null!==fe,_e=we?.hidden?0:N(we?.tickLabels??($e?"truncate":"auto"),ze,ce,Ae),Be=Math.min(120,.5*ke),je=_e>0&&!L?ge.map((t,e)=>F(t,(t=>Math.min(D(_e,Be,ce),_e>=90?1/0:(Se+Ae*(t+(tt?0:.5)))/Math.cos(_e*Math.PI/180)))(e),ce)):fe?ge:L||Me-6>=2.4*ce?ge.map(t=>F(t,L?150:Me-6,ce)):ge,Re=je.reduce((t,e)=>Math.max(t,j(e,ce)),0),Ne=we?.hidden?0:_e>0?8+Math.min(Be,T(_e,L?ve:Re,ce))+4:ce+12,We=L?de?.hidden?0:Re+10+(de?.label?ye:0):be,Ie=Ne+(we?.hidden||!we?.label?0:ye),Fe=(L?de:ue)?.thickness??We,Te=we?.thickness??Ie,De=(L||_e>0?12+(L?et:0):Math.max(8,Re/2))+lt,Le=y[wt]+4+(L?0:et)+lt,Xe={left:Fe+lt,top:Le,width:Math.max(0,$t-Fe-lt-De),height:Math.max(0,ke-Le-Te-lt)},Ye=L?Xe.height:Xe.width,Ve=k(tt?Math.max(1,le-1):le,Ye,Q),Ee=n.useCallback(t=>tt?le<=1?Ye/2:Ye*t/(le-1):Ve.centre(t),[tt,le,Ye,Ve]),Ze=n.useCallback(t=>L?Xe.left+me.fraction(t)*Xe.width:Xe.top+(1-me.fraction(t))*Xe.height,[L,Xe.left,Xe.top,Xe.width,Xe.height,me]),Ue=n.useCallback(t=>L?Xe.top+(1-(fe?.fraction(t)??0))*Xe.height:Xe.left+(fe?.fraction(t)??0)*Xe.width,[L,Xe.left,Xe.top,Xe.width,Xe.height,fe]),He=n.useCallback((t,e)=>L?{x:Ze(e),y:Xe.top+Ee(t)}:{x:Xe.left+Ee(t),y:Ze(e)},[L,Ze,Ee,Xe.left,Xe.top]),Ke=Ze(Math.min(Math.max(0,me.min),me.max)),Oe=[...q(ue?.references,Ze,L),...fe?q(de?.references,Ue,!L):[]],qe=t=>t instanceof Date?C(t,zt):Vt(t),Ge=[...ue?.references??[],...fe?de?.references??[]:[]].filter(t=>void 0!==t.label&&null!==t.label&&""!==t.label),Je={plot:Xe,values:ae,visible:jt.visible,colors:Zt,labelInk:t=>"series"===gt?Zt[t]??H:"var(--_mp-color-on-surface)",scale:me,band:Ve,horizontal:L,valuePx:Ze,categoryPx:Ee,point:He,categoryScale:fe,categoryValuePx:Ue,zeroPx:Ke,categories:oe,format:Vt,share:t=>P(t,zt),size:wt},Qe=at?at(Je):V,tl=!1===ft?{mode:"none"}:!0===ft||void 0===ft?{}:ft,el=tl.mode??(at?"item":"index"),ll=(t,e)=>{const l=Pt.current;if(!l||0===le)return null;const n=l.getBoundingClientRect(),a=L?e-n.top-Xe.top:t-n.left-Xe.left;if(a<-Ve.step||a>Ye+Ve.step)return null;const o=tt?le<=1?0:Math.round(a/Ye*(le-1)):Math.floor(a/Ve.step);return Math.min(le-1,Math.max(0,o))},nl=null===Wt?null:Qe[Wt]??null,al=at?nl?nl.index:null:Rt,ol=at?Qe.length:le,il=()=>{Nt(null),It(null),Tt(null)},rl=t=>{const e=Xt.current;if(null===e)return;O(t,!1);const l=Math.min(e.start,e.to),n=Math.max(e.start,e.to);Yt(null),n-l+1>=Math.max(2,Ot.min??2)&&ie([ee+l,ee+n])},sl=t=>{const e=null===t?null:Math.min(ol-1,Math.max(0,t));at?It(e):Nt(e)},hl=t=>{Tt(null);sl(((at?Wt:Rt)??(t>0?-1:ol))+t)},cl=null!==al&&se?ae.reduce((t,e,l)=>{const n=jt.visible[l]?e[al]?.value:null;return t+(null!=n&&n>0?n:0)},0):0,ul=null===al?[]:S.flatMap((t,e)=>{if(!jt.visible[e]||nl&&nl.series!==e)return[];const l=ae[e]?.[al];return l&&null!==l.value?[{seriesIndex:e,name:t.name,color:l.color??Zt[e],value:l.value,formatted:se&&cl>0&&l.value>0?`${Vt(l.value)} · ${P(l.value/cl,zt)}`:Vt(l.value),label:l.label}]:[]}),dl=nl&&ht?ht(nl):null,ml=dl?dl.items:"item"===el&&ul.length>1&&null!==Ft?[ul.reduce((t,e)=>Math.abs(Ze(e.value??0)-Ft)<Math.abs(Ze(t.value??0)-Ft)?e:t)]:ul,pl="value"===tl.sort?[...ml].sort((t,e)=>(e.value??-1/0)-(t.value??-1/0)):ml,fl=!(tl.total??!0===Z)||dl||ml.length<2?void 0:Vt(ml.reduce((t,e)=>t+(e.value??0),0)),xl=dl?dl.heading:nl?C(ae[nl.series]?.[nl.index]?.x??B?.[nl.index]??nl.index,zt):null===al?void 0:C(oe[al]??al,zt),gl=nl?nl.x:L?Ze(ml[0]?.value??0):Xe.left+Ee(al??0),vl=nl?nl.y:L?Xe.top+Ee(al??0):Xe.top+Xe.height/2,yl=nl?(nl.x-Xe.left)/Math.max(1,Xe.width)>.6:(L?me.fraction(ml[0]?.value??0):Ee(al??0)/Math.max(1,Ye))>.6,bl=!1===pt?d:!0===pt||void 0===pt?m:pt,kl=!0===pt||!1!==pt&&S.length>1,Ml=bl.side??"bottom",wl={...Je,hovered:jt.hovered,activeIndex:al,marks:Qe,activeMark:nl},zl=0===le||null===he||"value"===nt&&null===pe;return t(u,{...Mt,size:wt,className:yt,style:bt,plotRef:Pt,name:mt??St.label,describedBy:zl?void 0:Ge.length>0?`${_t} ${Bt}`:_t,interactive:!zl,height:ct,legendSide:Ml,plotProps:{onPointerDown:qt&&!zl?t=>{const e=ll(t.clientX,t.clientY);null!==e&&(O(t,!0),il(),Yt({start:e,to:e}))}:void 0,onPointerMove:zl?void 0:t=>{if(null!==Xt.current){const e=ll(t.clientX,t.clientY)??Xt.current.to;return void(e!==Xt.current.to&&Yt({...Xt.current,to:e}))}"none"!==el&&(at?It(((t,e)=>{const l=Pt.current;if(!l||0===Qe.length)return null;const n=l.getBoundingClientRect(),a=t-n.left,o=e-n.top;let i=null,r=1/0,s=1/0;return Qe.forEach((t,e)=>{const l=Math.hypot(t.x-a,t.y-o),n=void 0===t.rx?Math.max(0,l-t.r):Math.hypot(Math.max(0,Math.abs(t.x-a)-t.rx),Math.max(0,Math.abs(t.y-o)-(t.ry??t.rx)));n<=ot&&(n<r||n===r&&l<s)&&(r=n,s=l,i=e)}),i})(t.clientX,t.clientY)):Nt(ll(t.clientX,t.clientY)),"item"!==el||at||Tt(((t,e)=>{const l=Pt.current;if(!l)return null;const n=l.getBoundingClientRect();return L?t-n.left:e-n.top})(t.clientX,t.clientY)))},onPointerUp:qt&&!zl?rl:void 0,onPointerCancel:qt&&!zl?()=>Yt(null):void 0,onPointerLeave:t=>{qt&&!zl&&rl(t),il()},onKeyDown:zl||"none"===el&&!qt?void 0:t=>{const e=L?"ArrowDown":"ArrowRight",l=L?"ArrowUp":"ArrowLeft";if(t.key===e)hl(1);else if(t.key===l)hl(-1);else if("Home"===t.key)sl(0);else if("End"===t.key)sl(ol-1);else{if("Escape"!==t.key)return;null===al&&null!==te?ie(null):il()}t.preventDefault()},onBlur:il},overlay:null===te||zl?null:t("button",{type:"button",onClick:()=>ie(null),className:["mp-chart__reset absolute end-0 top-0 z-10 cursor-pointer","text-mp-primary text-mp-label-medium rounded-mp-xs px-2 py-1","appearance-none border-0 bg-transparent [font:inherit]","focus-visible:outline-mp-primary focus-visible:outline-2 focus-visible:outline-offset-2"].join(" "),children:St.showAll}),tooltip:null!==al&&ml.length>0&&"none"!==el&&null===Dt?tl.render?t("div",{"aria-hidden":"true",className:"pointer-events-none absolute z-10",style:{left:gl,top:vl,transform:`translate(${yl?"calc(-100% - 12px)":"12px"}, -50%)`},children:tl.render({index:al,category:oe[al]??al,items:pl,total:fl})}):t(f,{heading:xl,items:pl,total:fl,totalLabel:St.total,x:gl,y:vl,flip:yl,size:wt}):null,legend:kl?t(c,{names:Ut,colors:Zt,options:bl,visibility:jt,size:wt,swatch:it,colorNames:"series"===gt,values:bl.showValue&&null!==al?S.map((t,e)=>{const l=ae[e]?.[al]?.value;return null==l?void 0:Vt(l)}):void 0}):null,status:{heading:xl,items:pl,total:fl,totalLabel:St.total},table:zl?null:e(l,{children:[st?.(_t)??t(p,{id:_t,caption:mt??St.table,corner:de?.label??St.category,categories:oe,names:Ut,values:ae,format:Vt,locale:zt,empty:Ct.empty}),0===Ge.length?null:t("ul",{id:Bt,className:g,children:Ge.map((t,l)=>e("li",{children:[t.label,":"," ",void 0===t.to?qe(t.value):`${qe(t.value)}–${qe(t.to)}`]},l))})]}),children:zl?t("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:xt??Ct.empty}):$t>0&&ke>0?e("svg",{width:$t,height:ke,viewBox:`0 0 ${$t} ${ke}`,"aria-hidden":"true",className:"block overflow-visible",children:[t(K,{plot:Xe,scale:me,horizontal:L,categoryPx:Ee,categoryScale:fe,categoryValuePx:Ue,valuePx:Ze,tickTexts:xe,categoryTexts:je,valueAxis:ue,categoryAxis:de,fontSize:ce,zeroPx:Ke,turn:_e,tickBand:Ne}),t(G,{marks:Oe,plot:Xe,pass:"band",fontSize:ce}),null===al||at||"index"!==el||!1===tl.crosshair?null:(()=>{const e=Ee(al);return t("line",L?{x1:Xe.left,x2:Xe.left+Xe.width,y1:Xe.top+e,y2:Xe.top+e,stroke:U,strokeWidth:1}:{x1:Xe.left+e,x2:Xe.left+e,y1:Xe.top,y2:Xe.top+Xe.height,stroke:U,strokeWidth:1})})(),kt(wl),t(G,{marks:Oe,plot:Xe,pass:"line",fontSize:ce}),null===Dt?null:(()=>{const e=[Dt.start,Dt.to].map(t=>(L?Xe.top:Xe.left)+Ee(t)).sort((t,e)=>t-e),l=Math.max(Ve.step,1),n=e[0]-l/2,a=e[1]-e[0]+l;return t("rect",{x:L?Xe.left:n,y:L?n:Xe.top,width:L?Xe.width:a,height:L?a:Xe.height,fill:"var(--_mp-color-primary)",fillOpacity:.12,stroke:"var(--_mp-color-primary)",strokeWidth:1})})()]}):null})}

package/dist/internal/FieldOutline.d.ts

@@ -32,7 +32,15 @@ export interface MPFieldLabelProps extends MPFieldOutlineProps {
      * for the type scale it rests at.
      */
     size: MPSize;
-    /** The control the label names. */
+    /**
+     * The control the label names, for a control that is not Base UI's own.
+     *
+     * Left out for a `Field.Control`, whose label follows the id the control is
+     * actually drawn with: a generated one in a server's markup, and the caller's
+     * `id` once the page has hydrated. Naming the caller's `id` here pointed the
+     * server's `<label for>` at an element that did not exist, so the label named
+     * nothing until hydration, and every field rendered once more to repair it.
+     */
     htmlFor?: string;
     /**
      * Whether the label is up in the notch. `false` rests it on the control's own
@@ -46,6 +54,16 @@ export interface MPFieldLabelProps extends MPFieldOutlineProps {
      * @default false
      */
     multiline?: boolean;
+    /**
+     * The word the asterisk is read out as, for a control that cannot say it is
+     * required itself.
+     *
+     * Left out wherever `required` is on the control, which is every field drawn
+     * on a native input. A picker's trigger is a `<button>`: it takes neither
+     * `required` nor `aria-required`, so without this the asterisk was the only
+     * sign, and it is `aria-hidden`.
+     */
+    requiredLabel?: string;
 }
 /**
  * The label a reader actually gets.
@@ -70,7 +88,7 @@ export interface MPFieldLabelProps extends MPFieldOutlineProps {
  * picker asked for without its glyph — `startIcon={null}`, which is the whole
  * point of `floatingLabel` on a picker — impossible to open with a mouse.
  */
-export declare function MPFieldLabel({ size, label, required, htmlFor, shrunk, multiline }: MPFieldLabelProps): React.JSX.Element;
+export declare function MPFieldLabel({ size, label, required, htmlFor, shrunk, multiline, requiredLabel }: MPFieldLabelProps): React.JSX.Element;
 export interface MPFloatingLabel {
     /** Whether the label is up in the notch right now. */
     shrunk: boolean;

package/dist/internal/FieldOutline.js

@@ -1,2 +1,2 @@
 "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 m-0 min-w-0 px-2 pt-0",t?"-top-[5px]":"","text-start","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"].filter(Boolean).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:l=!0,multiline:u=!1}){return r(a.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)","pointer-events-none absolute -translate-y-1/2 px-1 leading-none",i[t],l?"text-mp-body-small top-0 max-w-none":[n[t],"max-w-[calc(100%-2rem)] truncate",u?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)}}}}
+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";import{VISUALLY_HIDDEN as i}from"./visually-hidden.js";const s={xs:"start-1",sm:"start-2",md:"start-3",lg:"start-3",xl:"start-4"},d={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function l(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 m-0 min-w-0 px-2 pt-0",t?"-top-[5px]":"","text-start","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"].filter(Boolean).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:l(t,e)}):null})}export function MPFieldLabel({size:o,label:p,required:u=!1,htmlFor:m,shrunk:c=!0,multiline:x=!1,requiredLabel:f}){return e(a.Label,{...void 0===m?null:{htmlFor:m},"data-mp-shrunk":c?"":void 0,className:["text-mp-on-surface-variant","ease-mp-standard transition-[color,top,font-size,max-width]","duration-(--mp-sys-motion-duration-short4)","pointer-events-none absolute -translate-y-1/2 px-1 leading-none",s[o],c?"text-mp-body-small top-0 max-w-none":[n[o],"max-w-[calc(100%-2rem)] truncate",x?d[o]:"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:[l(p,u),u&&f?e(t,{children:[" ",r("span",{className:i,children:f})]}):null]})}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/FieldValue.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The value of a field whose control is a button.
+ *
+ * A picker opens from a popover trigger, and a trigger is a `<button>`: it has
+ * no value, takes no `required`, and registers nothing with the `Field` around
+ * it. So `required` decided nothing, and `MPForm` neither checked the picker on
+ * submit nor saw its value. This is the input that stands in for it.
+ *
+ * It is Base UI's own `Field.Control`, which is what makes the field count:
+ * `MPForm` checks it with every other field, puts its value under the field's
+ * name, shows the browser's message in the line under the field, and moves focus
+ * to it when it is the first field that failed. Outside an `MPForm` it is a
+ * required `<input>` in an ordinary form, which the browser checks before it
+ * submits.
+ *
+ * It has no `name` of its own. The picker's hidden rows are what a form submits,
+ * as they always were, and a name here would send the value twice. The name
+ * `MPForm` files the value under is the `Field.Root`'s.
+ *
+ * Its own file rather than a part of `Picker.tsx`, because `MPColorPicker`
+ * draws one too, and the split stylesheet is cut a file at a time along the
+ * import graph: importing the shell for this would hand the colour picker every
+ * class the shell spells out.
+ */
+import * as React from 'react';
+export interface MPFieldValueProps {
+    /** The value as one string, and `''` while nothing is chosen. */
+    value: string;
+    required: boolean;
+    /** A read-only field is not checked, as a read-only `<input>` is not. */
+    readOnly: boolean;
+    /** The id of the trigger, which is where focus belongs. */
+    targetId: string;
+}
+export declare function MPFieldValue({ value, required, readOnly, targetId }: MPFieldValueProps): React.JSX.Element;

package/dist/internal/FieldValue.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e}from"react/jsx-runtime";import{Field as r}from"@base-ui/react/field";import{VISUALLY_HIDDEN as t}from"./visually-hidden.js";export function MPFieldValue({value:a,required:o,readOnly:n,targetId:d}){return e(r.Control,{value:a,required:o,readOnly:n,tabIndex:-1,"aria-hidden":!0,onFocus:e=>{e.currentTarget.ownerDocument.getElementById(d)?.focus()},className:`${t} start-0 bottom-0 m-0 border-0 p-0`,render:r=>e("input",{...r,name:void 0})})}