material-plus-ui 1.9.0 → 1.10.0

package/dist/components/image/MPImage.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import*as o from"react";import{Dialog as n}from"@base-ui/react/dialog";import{MPIcon as r}from"../icon/MPIcon.js";import{BrokenImageIcon as a}from"../../constants/icons.js";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FADE as d,PORTAL_LAYER as u,SCRIM as h}from"../../internal/surface.js";import{useMPSize as m}from"../../internal/config.js";const f={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},p={position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"},g=Number.parseInt(o.version,10),b=!Number.isFinite(g)||0===g||g>=19?"fetchPriority":"fetchpriority",v={loading:"eager",[b]:"high"};function y(e,t){const i=2*e+"px";return t?{...p,width:`calc(100cqh + ${i})`,height:`calc(100cqw + ${i})`}:{position:"absolute",top:-e,left:-e,width:`calc(100% + ${i})`,height:`calc(100% + ${i})`,maxWidth:"none"}}const w=new Map([["left",[0,0]],["right",[0,1]],["top",[1,0]],["bottom",[1,1]]]);function j(e,t,i){const o=e.trim().split(/\s+/),n=[.5,.5],r=[!1,!1];if(o.length>2)return e;for(const[t,i]of o.entries()){if("center"===i)continue;const o=w.get(i),a=/^(-?\d*\.?\d+)%$/.exec(i),l=o?o[0]:t,s=o?o[1]:a?Number(a[1])/100:void 0;if(void 0===s||r[l])return e;n[l]=s,r[l]=!0}let[a,l]=n;"horizontal"!==i&&"both"!==i||(a=1-a),"vertical"!==i&&"both"!==i||(l=1-l);for(let e=0;e<t/90;e++)[a,l]=[l,1-a];const s=e=>Math.round(1e4*e)/100+"%";return`${s(a)} ${s(l)}`}function $(e){return"number"==typeof e?Number.isFinite(e)?e:void 0:void 0!==e&&/^\d+$/.test(e.trim())?Number(e):void 0}function x(e){const t=$(e);return void 0===t?String(e):`${t}px`}function N(e,t,i){const o=e??t,n=e??(i?t:void 0);if(!o)return{aspectRatio:"1",width:"min(100%, 100cqh)",containerType:"size"};const r=o.height,a=o.width;return{aspectRatio:`${r} / ${a}`,width:`min(100%, ${n?`${n.height}px, `:""}calc(100cqh * ${r} / ${a}))`,containerType:"size"}}function z(e){return e.naturalWidth>0&&e.naturalHeight>0?{width:e.naturalWidth,height:e.naturalHeight}:void 0}export const MPImage=/*@__PURE__*/o.forwardRef(function({src:g,alt:w,ratio:R,fit:k="cover",placeholder:L,fallback:P,preview:S=!1,previewSrc:T,previewLabel:W,onStateChange:q,rotate:M,flip:F="none",position:B="center",letterbox:E="none",priority:O=!1,size:U,className:I,style:C,width:H,height:V,onLoad:A,...D},G){const J=m(U),K=l(),Q=s(c,K),X="object"==typeof(Y=L)&&null!==Y&&!o.isValidElement(Y)&&"src"in Y?L:void 0;var Y;const Z=function(e){const[t,i]=o.useState();return o.useEffect(()=>{if(void 0===e||"string"==typeof e)return;const t=URL.createObjectURL(e);return i({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),void 0===e||"string"==typeof e?e:t?.blob===e?t.url:void 0}(X?.src),[_,ee]=o.useState({state:g?"loading":"error"}),[te,ie]=o.useState(),oe=o.useRef(null),{state:ne,natural:re}=_,ae=o.useCallback((e,t)=>{const i="loaded"===e&&t?z(t):void 0;ee(t=>t.state===e&&t.natural?.width===i?.width&&t.natural?.height===i?.height?t:(t.state!==e&&q?.(e),{state:e,natural:i}))},[q]),[le,se]=o.useState(g);g!==le&&(se(g),ee({state:g?"loading":"error"})),o.useEffect(()=>{const e=oe.current;e&&g&&e.complete&&ae(e.naturalWidth>0?"loaded":"error",e)},[g,ae]);const ce=function(e){return void 0!==e&&Number.isFinite(e)?(Math.round(e/90)%4+4)%4*90:0}(M),de=90===ce||270===ce,ue=function(e,t){const i="horizontal"===t||"both"===t,o="vertical"===t||"both"===t,[n,r]=90===e||270===e?[o,i]:[i,o];return{...e?{rotate:`${e}deg`}:null,...n||r?{scale:`${n?-1:1} ${r?-1:1}`}:null}}(ce,F),he="center"===B?{}:{objectPosition:j(B,ce,F)},me=void 0!==H&&void 0!==V,fe=void 0===H||me?void 0:x(H),pe=void 0===V||me?void 0:x(V),ge=me?$(H):void 0,be=me?$(V):void 0,ve=(ge&&be?{width:ge,height:be}:void 0)??re,ye=de&&void 0===R&&ve&&void 0===pe?`${ve.height} / ${ve.width}`:R,we="loaded"===ne,je=e("div",{className:["bg-mp-surface-container text-mp-on-surface-variant","flex size-full items-center justify-center"].join(" "),children:e(r,{icon:a,size:24})}),$e=e("div",{className:["bg-mp-surface-container-high size-full","motion-safe:animate-pulse motion-reduce:animate-none"].join(" ")}),xe=/*@__PURE__*/[we?"opacity-100":"opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)"].join(" "),Ne=D.loading??(O?"eager":void 0),ze=D.fetchPriority??(O?"high":void 0),Re="blur"===E&&("contain"===k||"none"===k||"scale-down"===k),ke="none"!==E&&"blur"!==E?E:void 0,Le=Boolean(Z)&&"error"!==ne,Pe=!0===X?.blur?20:"number"==typeof X?.blur&&Number.isFinite(X.blur)?Math.max(0,X.blur):0,Se=i(t,{children:[Re?e("img",{...ze?{[b]:ze}:null,src:g,srcSet:D.srcSet,sizes:D.sizes,loading:Ne,decoding:D.decoding,crossOrigin:D.crossOrigin,referrerPolicy:D.referrerPolicy,alt:"","aria-hidden":"true",draggable:!1,className:`pointer-events-none select-none object-cover ${xe}`,style:{...ue,...he,filter:"blur(24px)",...y(48,de)}}):null,Le?e("img",{src:Z,alt:"","aria-hidden":"true",draggable:!1,className:`pointer-events-none select-none ${f[k]}`,style:{...ue,...he,...Pe?{filter:`blur(${Pe}px)`}:null,...y(2*Pe,de),...we?{opacity:0,transition:"opacity 0ms linear var(--mp-sys-motion-duration-short4)"}:null}}):null,e("img",{...O?v:null,...D,ref:e=>{oe.current=e,"function"==typeof G?G(e):G&&(G.current=e)},src:g,alt:w,width:me?H:void 0,height:me?V:void 0,className:`block size-full ${f[k]} ${xe}`,style:{...ue,...he,...Re||Le?{position:"relative"}:null,...de?p:null},onLoad:e=>{ae("loaded",e.currentTarget),A?.(e)},onError:()=>ae("error")}),"loading"!==ne||!1===L||X?null:e("span",{"aria-hidden":"true",className:"absolute inset-0",children:L??$e}),"error"===ne?e("span",{className:"absolute inset-0",children:P??je}):null]}),Te=["mp-image relative block overflow-hidden",I??""].filter(Boolean).join(" "),We={aspectRatio:ye,...void 0!==fe?{width:fe,maxWidth:"100%"}:null,...void 0!==pe?{height:pe}:null,...void 0!==pe&&void 0!==R?{width:"auto",maxWidth:"100%"}:null,...de?{containerType:"size"}:null,...void 0!==ke?{background:ke}:null,...C},qe=T??g,Me=te?.src===qe?te:void 0,Fe=e=>{const t=z(e.currentTarget);!t||t.width===Me?.width&&t.height===Me?.height||ie({...t,src:qe})};return S?i(n.Root,{children:[e(n.Trigger,{"data-mp-size":J,"data-mp-state":ne,disabled:"error"===ne,"aria-label":(W??w)||Q.open,className:[Te,"w-full","outline-mp-secondary cursor-zoom-in appearance-none border-0 bg-transparent p-0","focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default","outline-none"].filter(Boolean).join(" "),style:We,children:Se}),i(n.Portal,{children:[e(n.Backdrop,{className:`${h} ${d} fixed inset-0 z-40`}),e(n.Popup,{className:[u,d,"fixed inset-0 flex items-center justify-center p-6"].join(" "),style:de?{containerType:"size"}:void 0,children:de?e("span",{className:"relative block shrink-0",style:N(Me,ve,void 0===T),children:e("img",{src:qe,alt:w,className:"object-contain",style:{...ue,...p},onLoad:Fe})}):e("img",{src:qe,alt:w,className:"max-h-full max-w-full object-contain",style:ue,onLoad:Fe})})]})]}):e("span",{"data-mp-size":J,"data-mp-state":ne,className:Te,style:We,children:Se})});
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import*as o from"react";import{Dialog as n}from"@base-ui/react/dialog";import{MPIcon as r}from"../icon/MPIcon.js";import{BrokenImageIcon as a}from"../../constants/icons.js";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FADE as d,PORTAL_LAYER as u,SCRIM as h}from"../../internal/surface.js";import{useMPSize as m}from"../../internal/config.js";const f={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},p={position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"},g=Number.parseInt(o.version,10),b=!Number.isFinite(g)||0===g||g>=19?"fetchPriority":"fetchpriority",v={loading:"eager",[b]:"high"};function y(e,t){const i=2*e+"px";return t?{...p,width:`calc(100cqh + ${i})`,height:`calc(100cqw + ${i})`}:{position:"absolute",top:-e,left:-e,width:`calc(100% + ${i})`,height:`calc(100% + ${i})`,maxWidth:"none"}}const w=new Map([["left",[0,0]],["right",[0,1]],["top",[1,0]],["bottom",[1,1]]]);function j(e,t,i){const o=e.trim().split(/\s+/),n=[.5,.5],r=[!1,!1];if(o.length>2)return e;for(const[t,i]of o.entries()){if("center"===i)continue;const o=w.get(i),a=/^(-?\d*\.?\d+)%$/.exec(i),l=o?o[0]:t,s=o?o[1]:a?Number(a[1])/100:void 0;if(void 0===s||r[l])return e;n[l]=s,r[l]=!0}let[a,l]=n;"horizontal"!==i&&"both"!==i||(a=1-a),"vertical"!==i&&"both"!==i||(l=1-l);for(let e=0;e<t/90;e++)[a,l]=[l,1-a];const s=e=>Math.round(1e4*e)/100+"%";return`${s(a)} ${s(l)}`}function $(e){return"number"==typeof e?Number.isFinite(e)?e:void 0:void 0!==e&&/^\d+$/.test(e.trim())?Number(e):void 0}function x(e){const t=$(e);return void 0===t?String(e):`${t}px`}function N(e,t,i){const o=e??t,n=e??(i?t:void 0);if(!o)return{aspectRatio:"1",width:"min(100%, 100cqh)",containerType:"size"};const r=o.height,a=o.width;return{aspectRatio:`${r} / ${a}`,width:`min(100%, ${n?`${n.height}px, `:""}calc(100cqh * ${r} / ${a}))`,containerType:"size"}}function z(e){return e.naturalWidth>0&&e.naturalHeight>0?{width:e.naturalWidth,height:e.naturalHeight}:void 0}export const MPImage=/*@__PURE__*/o.forwardRef(function({src:g,alt:w,ratio:R,fit:k="cover",placeholder:L,fallback:P,preview:S=!1,previewSrc:T,previewLabel:W,onStateChange:q,rotate:M,flip:F="none",position:B="center",letterbox:E="none",priority:O=!1,size:U,className:I,style:C,width:H,height:V,onLoad:A,...D},G){const J=m(U),K=l(),Q=s(c,K),X="object"==typeof(Y=L)&&null!==Y&&!o.isValidElement(Y)&&"src"in Y?L:void 0;var Y;const Z=function(e){const[t,i]=o.useState();return o.useEffect(()=>{if(void 0===e||"string"==typeof e)return;const t=URL.createObjectURL(e);return i({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),void 0===e||"string"==typeof e?e:t?.blob===e?t.url:void 0}(X?.src),[_,ee]=o.useState({state:g?"loading":"error"}),[te,ie]=o.useState(),oe=o.useRef(null),{state:ne,natural:re}=_,ae=o.useCallback((e,t)=>{const i="loaded"===e&&t?z(t):void 0;ee(t=>t.state===e&&t.natural?.width===i?.width&&t.natural?.height===i?.height?t:(t.state!==e&&q?.(e),{state:e,natural:i}))},[q]),[le,se]=o.useState(g);g!==le&&(se(g),ee({state:g?"loading":"error"})),o.useEffect(()=>{const e=oe.current;e&&g&&e.complete&&ae(e.naturalWidth>0?"loaded":"error",e)},[g,ae]);const ce=function(e){return void 0!==e&&Number.isFinite(e)?(Math.round(e/90)%4+4)%4*90:0}(M),de=90===ce||270===ce,ue=function(e,t){const i="horizontal"===t||"both"===t,o="vertical"===t||"both"===t,[n,r]=90===e||270===e?[o,i]:[i,o];return{...e?{rotate:`${e}deg`}:null,...n||r?{scale:`${n?-1:1} ${r?-1:1}`}:null}}(ce,F),he="center"===B?{}:{objectPosition:j(B,ce,F)},me=void 0!==H&&void 0!==V,fe=void 0===H||me?void 0:x(H),pe=void 0===V||me?void 0:x(V),ge=me?$(H):void 0,be=me?$(V):void 0,ve=(ge&&be?{width:ge,height:be}:void 0)??re,ye=de&&void 0===R&&ve&&void 0===pe?`${ve.height} / ${ve.width}`:R,we="loaded"===ne,je=e("div",{className:["bg-mp-surface-container text-mp-on-surface-variant","flex size-full items-center justify-center"].join(" "),children:e(r,{icon:a,size:24})}),$e=e("div",{className:["bg-mp-surface-container-high size-full","motion-safe:animate-pulse motion-reduce:animate-none"].join(" ")}),xe=O?"":[we?"opacity-100":"opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)"].join(" "),Ne=D.loading??(O?"eager":void 0),ze=D.fetchPriority??(O?"high":void 0),Re="blur"===E&&("contain"===k||"none"===k||"scale-down"===k),ke="none"!==E&&"blur"!==E?E:void 0,Le=Boolean(Z)&&"error"!==ne,Pe=!0===X?.blur?20:"number"==typeof X?.blur&&Number.isFinite(X.blur)?Math.max(0,X.blur):0,Se="loading"!==ne||!1===L||X?null:e("span",{"aria-hidden":"true",className:"absolute inset-0",children:L??$e}),Te=i(t,{children:[O?Se:null,Re?e("img",{...ze?{[b]:ze}:null,src:g,srcSet:D.srcSet,sizes:D.sizes,loading:Ne,decoding:D.decoding,crossOrigin:D.crossOrigin,referrerPolicy:D.referrerPolicy,alt:"","aria-hidden":"true",draggable:!1,className:`pointer-events-none select-none object-cover ${xe}`,style:{...ue,...he,filter:"blur(24px)",...y(48,de)}}):null,Le?e("img",{src:Z,alt:"","aria-hidden":"true",draggable:!1,className:`pointer-events-none select-none ${f[k]}`,style:{...ue,...he,...Pe?{filter:`blur(${Pe}px)`}:null,...y(2*Pe,de),...we?{opacity:0,transition:"opacity 0ms linear var(--mp-sys-motion-duration-short4)"}:null}}):null,e("img",{...O?v:null,...D,ref:e=>{oe.current=e,"function"==typeof G?G(e):G&&(G.current=e)},src:g,alt:w,width:me?H:void 0,height:me?V:void 0,className:`block size-full ${f[k]} ${xe}`,style:{...ue,...he,...Re||Le||O?{position:"relative"}:null,...de?p:null},onLoad:e=>{ae("loaded",e.currentTarget),A?.(e)},onError:()=>ae("error")}),O?null:Se,"error"===ne?e("span",{className:"absolute inset-0",children:P??je}):null]}),We=["mp-image relative block overflow-hidden",I??""].filter(Boolean).join(" "),qe={aspectRatio:ye,...void 0!==fe?{width:fe,maxWidth:"100%"}:null,...void 0!==pe?{height:pe}:null,...void 0!==pe&&void 0!==R?{width:"auto",maxWidth:"100%"}:null,...de?{containerType:"size"}:null,...void 0!==ke?{background:ke}:null,...C},Me=T??g,Fe=te?.src===Me?te:void 0,Be=e=>{const t=z(e.currentTarget);!t||t.width===Fe?.width&&t.height===Fe?.height||ie({...t,src:Me})};return S?i(n.Root,{children:[e(n.Trigger,{"data-mp-size":J,"data-mp-state":ne,disabled:"error"===ne,"aria-label":(W??w)||Q.open,className:[We,"w-full","outline-mp-secondary cursor-zoom-in appearance-none border-0 bg-transparent p-0","focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default","outline-none"].filter(Boolean).join(" "),style:qe,children:Te}),i(n.Portal,{children:[e(n.Backdrop,{className:`${h} ${d} fixed inset-0 z-40`}),e(n.Popup,{className:[u,d,"fixed inset-0 flex items-center justify-center p-6"].join(" "),style:de?{containerType:"size"}:void 0,children:de?e("span",{className:"relative block shrink-0",style:N(Fe,ve,void 0===T),children:e("img",{src:Me,alt:w,className:"object-contain",style:{...ue,...p},onLoad:Be})}):e("img",{src:Me,alt:w,className:"max-h-full max-w-full object-contain",style:ue,onLoad:Be})})]})]}):e("span",{"data-mp-size":J,"data-mp-state":ne,className:We,style:qe,children:Te})});

package/dist/components/line-chart/MPLineChart.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{CartesianFrame as t}from"../../internal/ChartFrame.js";import{BRIDGE_DASH as l,LINE_WIDTH as n,MARKER_RADIUS as a,bridgePath as o,linePath as i}from"../../internal/chart.js";export function MPLineChart({curve:s="linear",markers:u="auto",gaps:c="break",valueLabels:m="none",...h}){return e(t,{...h,inset:!0,includeZero:"zero"===c,headroom:"none"===m?0:14,children:({plot:t,values:h,visible:d,colors:p,labelInk:f,point:x,size:v,hovered:k,activeIndex:j,format:y})=>{const b=n[v],g=a[v],L=h.reduce((e,r)=>Math.max(e,r.length),0),z=L>1?t.width/(L-1):t.width,M="auto"===u?z>=6*g:u;return e("g",{className:"mp-line-chart__marks",children:h.map((n,a)=>{if(!d[a])return null;const u=n.map((e,r)=>null===e.value?"zero"===c?x(r,0):null:x(r,e.value)),h=p[a];return r("g",{opacity:null!==k&&k!==a?.25:1,children:[e("path",{d:i(u,s),fill:"none",stroke:h,strokeWidth:b,strokeLinecap:"round",strokeLinejoin:"round"}),"connect"===c?e("path",{d:o(u),fill:"none",stroke:h,strokeWidth:b,strokeDasharray:`${b*l} ${b*l}`,strokeLinecap:"round"}):null,u.map((r,t)=>{if(!r)return null;const l=j===t;return M||l?e("circle",{cx:r.x,cy:r.y,r:l?g+1:g,fill:h,stroke:"var(--_mp-color-surface)",strokeWidth:2},t):null}),"none"===m?null:n.map((r,l)=>{const o=u[l];if(!o||null===r.value)return null;const i=n.filter(e=>null!==e.value),s=i.map(e=>e.value);if(!("all"===m||"last"===m&&r===i[i.length-1]||"extremes"===m&&(r.value===Math.min(...s)||r.value===Math.max(...s))))return null;const c=o.x>t.left+t.width-24?"end":o.x<t.left+24?"start":"middle";return e("text",{x:o.x,y:o.y-g-5,textAnchor:c,fill:f(a),fontSize:"xs"===v||"sm"===v?10:11,children:r.label??y(r.value)},l)})]},a)})})}})}
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{CartesianFrame as n}from"../../internal/ChartFrame.js";import{BRIDGE_DASH as t,LINE_WIDTH as l,MARKER_RADIUS as o,bridgePath as a,linePath as i,valueLabelTest as s}from"../../internal/chart.js";export function MPLineChart({curve:u="linear",markers:c="auto",gaps:d="break",valueLabels:h="none",...m}){return e(n,{...m,inset:!0,includeZero:"zero"===d,headroom:"none"===h?0:14,children:({plot:n,values:m,visible:p,colors:f,labelInk:x,point:k,size:v,hovered:j,activeIndex:y,format:b})=>{const L=l[v],g=o[v],z=m.reduce((e,r)=>Math.max(e,r.length),0),w=z>1?n.width/(z-1):n.width,W="auto"===c?w>=6*g:c;return e("g",{className:"mp-line-chart__marks",children:m.map((l,o)=>{if(!p[o])return null;const c=l.map((e,r)=>null===e.value?"zero"===d?k(r,0):null:k(r,e.value)),m=f[o],z=null!==j&&j!==o,w=s(l,h);return r("g",{opacity:z?.25:1,children:[e("path",{d:i(c,u),fill:"none",stroke:m,strokeWidth:L,strokeLinecap:"round",strokeLinejoin:"round"}),"connect"===d?e("path",{d:a(c),fill:"none",stroke:m,strokeWidth:L,strokeDasharray:`${L*t} ${L*t}`,strokeLinecap:"round"}):null,c.map((r,n)=>{if(!r)return null;const t=y===n;return W||t?e("circle",{cx:r.x,cy:r.y,r:t?g+1:g,fill:m,stroke:"var(--_mp-color-surface)",strokeWidth:2},n):null}),"none"===h?null:l.map((r,t)=>{const l=c[t];if(!l||null===r.value)return null;if(!w(t))return null;const a=l.x>n.left+n.width-24?"end":l.x<n.left+24?"start":"middle";return e("text",{x:l.x,y:l.y-g-5,textAnchor:a,fill:x(o),fontSize:"xs"===v||"sm"===v?10:11,children:r.label??b(r.value)},t)})]},o)})})}})}

package/dist/components/locale/MPLocaleProvider.d.ts

@@ -19,38 +19,23 @@ export interface MPLocaleProviderProps {
      * over it does.
      */
     locale?: string;
+    /**
+     * The tag dates and numbers are written in on the server, and while the page
+     * hydrates, when `locale` is left `undefined`. Once the page has hydrated, the
+     * reader's own default takes over.
+     *
+     * For a server-rendered page that wants to follow the reader's browser but
+     * cannot tell their language on the server. Without it the server writes in
+     * its own machine's locale, the browser's first render writes in the reader's,
+     * and React discards the server's markup over the difference. With it the two
+     * agree, and the formatted values are rewritten once after hydration instead.
+     *
+     * Ignored when `locale` is set, which already agrees on both sides.
+     */
+    serverLocale?: string;
     children?: React.ReactNode;
 }
-/**
- * The language the components speak, set once for everything under it.
- *
- * Wrap the application. Every component in this library that writes a word or
- * formats a date takes a `locale` prop of its own, and this is where that prop
- * gets its default — so a form of four pickers is one decision rather than four.
- *
- * ```tsx
- * <MPLocaleProvider locale="ko">
- *   <App />
- * </MPLocaleProvider>
- * ```
- *
- * ## Why it is not a whole theme object
- *
- * Everything else a provider might carry here is already a CSS custom property:
- * the colour roles, the type scale, the corners, the motion durations. Those
- * reach a component through the cascade, which means a section of a page can
- * differ from the rest of it without a second provider and without a re-render.
- * A locale cannot travel that way — it decides which *string* is rendered, not
- * how one is painted — so it is the one thing left that needs context, and this
- * provider carries that and nothing else.
- *
- * ## Nesting
- *
- * Providers nest, and the nearest one wins. A page in Korean with one section
- * showing a Japanese listing's dates is two providers, and the inner one does
- * not have to restate anything: there is only the one value.
- */
-export declare function MPLocaleProvider({ locale, children }: MPLocaleProviderProps): React.JSX.Element;
+export declare function MPLocaleProvider({ locale, serverLocale, children }: MPLocaleProviderProps): React.JSX.Element;
 /**
  * The locale in force at this point in the tree.
  *

package/dist/components/locale/MPLocaleProvider.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import{MPLocaleContext as e,useMPLocale as o}from"../../internal/locale.js";export function MPLocaleProvider({locale:o,children:i}){return r(e.Provider,{value:o,children:i})}export{o as useMPLocale};
+import{jsx as r}from"react/jsx-runtime";import*as e from"react";import{MPLocaleContext as o,useMPLocale as t}from"../../internal/locale.js";const c=()=>()=>{},n=()=>{};export function MPLocaleProvider({locale:t,serverLocale:a,children:l}){const i=e.useSyncExternalStore(c,n,()=>a);return r(o.Provider,{value:t??i,children:l})}export{t as useMPLocale};

package/dist/components/menu/MPMenu.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Menu } from '@base-ui/react/menu';
 import type { MPAlign, MPColor, MPSide, MPSize } from '../../types.js';
 /**
  * A menu takes `size` and `color` and stops there.
@@ -95,6 +96,13 @@ export interface MPMenuItemProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /** Renders the row as a real `<a>`. A menu of links has to be links. */
     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?: Menu.LinkItem.Props['render'];
     /** Where the link opens — `_blank` and the rest. Ignored without `href`. */
     target?: string;
     /**
@@ -190,7 +198,7 @@ export type MPMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
  * cannot be copied, and tells a screen reader the wrong thing about every one of
  * them.
  */
-export declare function MPMenuItem({ onClick, href, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuItemProps): React.JSX.Element;
+export declare function MPMenuItem({ onClick, href, render, target, rel, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuItemProps): React.JSX.Element;
 /** A row that ticks. The tick lands in the column a `startIcon` would. */
 export declare function MPMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuCheckboxItemProps): React.JSX.Element;
 /** One choice out of a set. Wraps the rows that make up the set. */

package/dist/components/menu/MPMenu.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as l}from"@base-ui/react/context-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{CheckIcon as s,ChevronRightIcon as o}from"../../constants/icons.js";import{linkRel as i}from"../../internal/link.js";import{MPMenuContext as c}from"../../internal/menu.js";import{accentSlots as m}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{CONTROL_ICON as u,META_TEXT as p,hasContent as h}from"../../internal/scale.js";import{DOT_MOTION as f,MARK_MOTION as x}from"../../internal/mark.js";import{FADE as b,PORTAL_LAYER as g}from"../../internal/surface.js";import{useMPColor as v,useMPSize as N}from"../../internal/config.js";const y=/*@__PURE__*/["mp-menu__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container text-mp-on-surface","max-h-[min(24rem,var(--available-height))] min-w-[112px] max-w-[280px]","overflow-y-auto overscroll-contain py-2 outline-none",b].join(" "),C={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},k={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},j={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},M={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};function O(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",C[e],k[e],j[e],M[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function P(){return e(d,{layer:"inset-0 bg-current",className:"group-data-highlighted:opacity-8 group-data-popup-open:opacity-8 group-data-disabled:opacity-0"})}const I="relative flex shrink-0 items-center justify-center";function $({children:t,description:a}){return h(a)?n("span",{className:"relative flex min-w-0 flex-1 flex-col py-1.5 text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`text-mp-on-surface-variant truncate ${p}`,children:a})]}):e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:t})}function _({shortcut:n}){return h(n)?e("span",{className:`text-mp-on-surface-variant relative ms-2 shrink-0 ${p}`,children:n}):null}export function MPMenuItem({onClick:l,href:r,target:s,rel:o,startIcon:m,endIcon:d,shortcut:u,description:p,color:f,closeOnClick:x=!0,disabled:b=!1,label:g,children:v,className:N,style:y}){const{size:C}=t.useContext(c),k=n(t.Fragment,{children:[e(P,{}),h(m)?e("span",{className:`${I} text-mp-on-surface-variant`,children:m}):null,e($,{description:p,children:v}),h(d)?e("span",{className:`${I} text-mp-on-surface-variant`,children:d}):null,e(_,{shortcut:u})]}),j=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0,M=j||y?{...j,...y}:void 0;return void 0===r||b?e(a.Item,{disabled:b,label:g,closeOnClick:x,onClick:l,className:O(C,Boolean(f),N),style:M,children:k}):e(a.LinkItem,{href:r,target:s,rel:i(s,o),label:g,closeOnClick:x,onClick:l,className:O(C,Boolean(f),N),style:M,children:k})}export function MPMenuCheckboxItem({checked:l,defaultChecked:o,onCheckedChange:i,endIcon:m,shortcut:d,description:p,color:f,closeOnClick:b=!1,disabled:g=!1,label:v,children:N,className:y,style:C}){const{size:k}=t.useContext(c),j=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:o,onCheckedChange:e=>i?.(e),disabled:g,label:v,closeOnClick:b,className:O(k,Boolean(f),y),style:j||C?{...j,...C}:void 0,children:[e(P,{}),e("span",{className:`${I} text-(--_mp-accent)`,style:{width:u[k]},children:e(a.CheckboxItemIndicator,{className:`mp-menu__mark flex items-center justify-center ${x}`,children:e(r,{icon:s,size:u[k]})})}),e($,{description:p,children:N}),h(m)?e("span",{className:`${I} text-mp-on-surface-variant`,children:m}):null,e(_,{shortcut:d})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:s,className:o,style:i}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:o,style:i,children:s})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:s,description:o,color:i,closeOnClick:m=!1,disabled:d=!1,label:p,children:x,className:b,style:g}){const{size:v}=t.useContext(c),N=i?{"--_mp-accent":`var(--_mp-color-${i})`}:void 0;return n(a.RadioItem,{value:l,disabled:d,label:p,closeOnClick:m,className:O(v,Boolean(i),b),style:N||g?{...N,...g}:void 0,children:[e(P,{}),e("span",{className:`${I} text-(--_mp-accent)`,style:{width:u[v]},children:e(a.RadioItemIndicator,{className:`mp-menu__dot flex items-center justify-center ${f}`,children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e($,{description:o,children:x}),h(r)?e("span",{className:`${I} text-mp-on-surface-variant`,children:r}):null,e(_,{shortcut:s})]})}export function MPMenuGroup({label:l,children:r,className:s,style:o}){const{size:i}=t.useContext(c);return n(a.Group,{className:s,style:o,children:[h(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${k[i]} ${p}`,children:l}):null,r]})}export function MPMenuSeparator({className:n,...t}){return e(a.Separator,{className:["bg-mp-outline-variant my-2 h-px",n??""].filter(Boolean).join(" "),...t})}export function MPMenuSubmenu({label:l,startIcon:s,disabled:i=!1,side:d="right",sideOffset:p=0,children:f,className:x,style:b}){const{size:v,color:N}=t.useContext(c);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:i,className:O(v,!1),children:[e(P,{}),h(s)?e("span",{className:`${I} text-mp-on-surface-variant`,children:s}):null,e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${I} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:o,size:u[v]})})]}),e(a.Portal,{children:e(a.Positioner,{className:g,side:d,sideOffset:p,align:"start",children:e(a.Popup,{className:[y,x??""].filter(Boolean).join(" "),style:{...m(N),...b},children:f})})})]})}export function MPMenu({size:l,color:r,trigger:s,open:o,defaultOpen:i,onOpenChange:d,side:u="bottom",align:p="start",sideOffset:h=4,modal:f,openOnHover:x=!1,loopFocus:b=!0,nativeButton:C=!0,disabled:k=!1,className:j,style:M,children:O}){const P=N(l),I=v(r),$=t.useMemo(()=>({size:P,color:I}),[P,I]);return e(c.Provider,{value:$,children:n(a.Root,{open:o,defaultOpen:i,onOpenChange:e=>d?.(e),modal:f,loopFocus:b,disabled:k,children:[s?e(a.Trigger,{render:s,openOnHover:x,nativeButton:C,disabled:k}):null,e(a.Portal,{children:e(a.Positioner,{className:g,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":P,className:[y,j??""].filter(Boolean).join(" "),style:{...m(I),...M},children:O})})})]})})}export function MPContextMenu({size:a,color:r,content:s,children:o,open:i,defaultOpen:d,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:f,style:x}){const b=N(a),C=v(r),k=t.useMemo(()=>({size:b,color:C}),[b,C]);return e(c.Provider,{value:k,children:n(l.Root,{open:i,defaultOpen:d,onOpenChange:e=>u?.(e),loopFocus:p,disabled:h,children:[e(l.Trigger,{children:o}),e(l.Portal,{children:e(l.Positioner,{className:g,children:e(l.Popup,{"data-mp-size":b,className:[y,f??""].filter(Boolean).join(" "),style:{...m(C),...x},children:s})})})]})})}
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as l}from"@base-ui/react/context-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{CheckIcon as s,ChevronRightIcon as o}from"../../constants/icons.js";import{linkRel as i}from"../../internal/link.js";import{MPMenuContext as c}from"../../internal/menu.js";import{accentSlots as d}from"../../internal/accent.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{CONTROL_ICON as u,META_TEXT as p,hasContent as h}from"../../internal/scale.js";import{DOT_MOTION as f,MARK_MOTION as x}from"../../internal/mark.js";import{FADE as b,PORTAL_LAYER as g}from"../../internal/surface.js";import{useMPColor as v,useMPSize as N}from"../../internal/config.js";const y=/*@__PURE__*/["mp-menu__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container text-mp-on-surface","max-h-[min(24rem,var(--available-height))] min-w-[112px] max-w-[280px]","overflow-y-auto overscroll-contain py-2 outline-none",b].join(" "),C={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},k={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},j={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},M={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};function O(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",C[e],k[e],j[e],M[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function P(){return e(m,{layer:"inset-0 bg-current",className:"group-data-highlighted:opacity-8 group-data-popup-open:opacity-8 group-data-disabled:opacity-0"})}const I="relative flex shrink-0 items-center justify-center";function $({children:t,description:a}){return h(a)?n("span",{className:"relative flex min-w-0 flex-1 flex-col py-1.5 text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`text-mp-on-surface-variant truncate ${p}`,children:a})]}):e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:t})}function _({shortcut:n}){return h(n)?e("span",{className:`text-mp-on-surface-variant relative ms-2 shrink-0 ${p}`,children:n}):null}export function MPMenuItem({onClick:l,href:r,render:s,target:o,rel:d,startIcon:m,endIcon:u,shortcut:p,description:f,color:x,closeOnClick:b=!0,disabled:g=!1,label:v,children:N,className:y,style:C}){const{size:k}=t.useContext(c),j=n(t.Fragment,{children:[e(P,{}),h(m)?e("span",{className:`${I} text-mp-on-surface-variant`,children:m}):null,e($,{description:f,children:N}),h(u)?e("span",{className:`${I} text-mp-on-surface-variant`,children:u}):null,e(_,{shortcut:p})]}),M=x?{"--_mp-accent":`var(--_mp-color-${x})`}:void 0,z=M||C?{...M,...C}:void 0;return void 0===r||g?e(a.Item,{disabled:g,label:v,closeOnClick:b,onClick:l,className:O(k,Boolean(x),y),style:z,children:j}):e(a.LinkItem,{href:r,target:o,rel:i(o,d),render:s,label:v,closeOnClick:b,onClick:l,className:O(k,Boolean(x),y),style:z,children:j})}export function MPMenuCheckboxItem({checked:l,defaultChecked:o,onCheckedChange:i,endIcon:d,shortcut:m,description:p,color:f,closeOnClick:b=!1,disabled:g=!1,label:v,children:N,className:y,style:C}){const{size:k}=t.useContext(c),j=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:o,onCheckedChange:e=>i?.(e),disabled:g,label:v,closeOnClick:b,className:O(k,Boolean(f),y),style:j||C?{...j,...C}:void 0,children:[e(P,{}),e("span",{className:`${I} text-(--_mp-accent)`,style:{width:u[k]},children:e(a.CheckboxItemIndicator,{className:`mp-menu__mark flex items-center justify-center ${x}`,children:e(r,{icon:s,size:u[k]})})}),e($,{description:p,children:N}),h(d)?e("span",{className:`${I} text-mp-on-surface-variant`,children:d}):null,e(_,{shortcut:m})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:s,className:o,style:i}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:o,style:i,children:s})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:s,description:o,color:i,closeOnClick:d=!1,disabled:m=!1,label:p,children:x,className:b,style:g}){const{size:v}=t.useContext(c),N=i?{"--_mp-accent":`var(--_mp-color-${i})`}:void 0;return n(a.RadioItem,{value:l,disabled:m,label:p,closeOnClick:d,className:O(v,Boolean(i),b),style:N||g?{...N,...g}:void 0,children:[e(P,{}),e("span",{className:`${I} text-(--_mp-accent)`,style:{width:u[v]},children:e(a.RadioItemIndicator,{className:`mp-menu__dot flex items-center justify-center ${f}`,children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e($,{description:o,children:x}),h(r)?e("span",{className:`${I} text-mp-on-surface-variant`,children:r}):null,e(_,{shortcut:s})]})}export function MPMenuGroup({label:l,children:r,className:s,style:o}){const{size:i}=t.useContext(c);return n(a.Group,{className:s,style:o,children:[h(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${k[i]} ${p}`,children:l}):null,r]})}export function MPMenuSeparator({className:n,...t}){return e(a.Separator,{className:["bg-mp-outline-variant my-2 h-px",n??""].filter(Boolean).join(" "),...t})}export function MPMenuSubmenu({label:l,startIcon:s,disabled:i=!1,side:m="right",sideOffset:p=0,children:f,className:x,style:b}){const{size:v,color:N}=t.useContext(c);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:i,className:O(v,!1),children:[e(P,{}),h(s)?e("span",{className:`${I} text-mp-on-surface-variant`,children:s}):null,e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${I} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:o,size:u[v]})})]}),e(a.Portal,{children:e(a.Positioner,{className:g,side:m,sideOffset:p,align:"start",children:e(a.Popup,{className:[y,x??""].filter(Boolean).join(" "),style:{...d(N),...b},children:f})})})]})}export function MPMenu({size:l,color:r,trigger:s,open:o,defaultOpen:i,onOpenChange:m,side:u="bottom",align:p="start",sideOffset:h=4,modal:f,openOnHover:x=!1,loopFocus:b=!0,nativeButton:C=!0,disabled:k=!1,className:j,style:M,children:O}){const P=N(l),I=v(r),$=t.useMemo(()=>({size:P,color:I}),[P,I]);return e(c.Provider,{value:$,children:n(a.Root,{open:o,defaultOpen:i,onOpenChange:e=>m?.(e),modal:f,loopFocus:b,disabled:k,children:[s?e(a.Trigger,{render:s,openOnHover:x,nativeButton:C,disabled:k}):null,e(a.Portal,{children:e(a.Positioner,{className:g,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":P,className:[y,j??""].filter(Boolean).join(" "),style:{...d(I),...M},children:O})})})]})})}export function MPContextMenu({size:a,color:r,content:s,children:o,open:i,defaultOpen:m,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:f,style:x}){const b=N(a),C=v(r),k=t.useMemo(()=>({size:b,color:C}),[b,C]);return e(c.Provider,{value:k,children:n(l.Root,{open:i,defaultOpen:m,onOpenChange:e=>u?.(e),loopFocus:p,disabled:h,children:[e(l.Trigger,{children:o}),e(l.Portal,{children:e(l.Positioner,{className:g,children:e(l.Popup,{"data-mp-size":b,className:[y,f??""].filter(Boolean).join(" "),style:{...d(C),...x},children:s})})})]})})}

package/dist/components/meter/MPMeter.d.ts

@@ -30,6 +30,11 @@ export interface MPMeterProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      * what a range nobody described reads as, not what the reader came for.
      */
     format?: Intl.NumberFormatOptions;
+    /**
+     * The locale `format` writes the value in. Defaults to the nearest
+     * `MPLocaleProvider`, then to the runtime's own.
+     */
+    locale?: string;
     /**
      * Where the bar changes colour, smallest `from` first. The family of the last
      * threshold the value has reached wins; below all of them `color` stands.

package/dist/components/meter/MPMeter.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Meter as t}from"@base-ui/react/meter";import{accentSlots as n}from"../../internal/accent.js";import{META_TEXT as o,STACK_GAP as s}from"../../internal/scale.js";import{BAR_THICKNESS as l,progressFraction as i}from"../../internal/progress.js";import{useMPColor as m,useMPSize as c}from"../../internal/config.js";import{thresholdColor as u}from"../../internal/threshold.js";export const MPMeter=/*@__PURE__*/a.forwardRef(function({value:a,min:f=0,max:d=100,label:p,showValue:h=!1,format:j,thresholds:b,size:x,color:w,className:v,style:N,..._},g){const y=c(x),k=m(w),M=i(a,f,d),z=u(a,k,b),R=void 0!==j;return r(t.Root,{ref:g,value:a,min:f,max:d,format:j,"data-mp-size":y,className:["mp-meter flex w-full flex-col",s[y],v??""].filter(Boolean).join(" "),style:{...n(z),...N},..._,children:[p||h?r("div",{className:["mp-meter__header flex items-baseline gap-2",p?"justify-between":"justify-end",o].join(" "),children:[p?e(t.Label,{className:"text-mp-on-surface min-w-0 truncate",children:p}):null,h?e(t.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>R?e:`${Math.round(100*(M??0))}%`}):null]}):null,e(t.Track,{className:["mp-meter__track rounded-mp-full bg-mp-on-surface/12 relative w-full overflow-hidden",l[y]].join(" "),children:e(t.Indicator,{className:["mp-meter__bar rounded-mp-full absolute inset-y-0 start-0 bg-(--_mp-accent)","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none"].join(" ")})})]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Meter as t}from"@base-ui/react/meter";import{accentSlots as o}from"../../internal/accent.js";import{META_TEXT as n,STACK_GAP as l}from"../../internal/scale.js";import{BAR_THICKNESS as s,progressFraction as i}from"../../internal/progress.js";import{useMPColor as m,useMPSize as c}from"../../internal/config.js";import{useMPLocale as f}from"../../internal/locale.js";import{checkServerLocale as u,intlLocale as d}from"../../internal/intl.js";import{thresholdColor as p}from"../../internal/threshold.js";export const MPMeter=/*@__PURE__*/a.forwardRef(function({value:a,min:h=0,max:j=100,label:b,showValue:x=!1,format:w,locale:v,thresholds:N,size:_,color:g,className:y,style:k,...M},z){const R=c(_),V=m(g),B=i(a,h,j),I=p(a,V,N),L=void 0!==w,P=f(v);return L&&u(P),r(t.Root,{ref:z,value:a,min:h,max:j,format:w,locale:d(P),"data-mp-size":R,className:["mp-meter flex w-full flex-col",l[R],y??""].filter(Boolean).join(" "),style:{...o(I),...k},...M,children:[b||x?r("div",{className:["mp-meter__header flex items-baseline gap-2",b?"justify-between":"justify-end",n].join(" "),children:[b?e(t.Label,{className:"text-mp-on-surface min-w-0 truncate",children:b}):null,x?e(t.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>L?e:`${Math.round(100*(B??0))}%`}):null]}):null,e(t.Track,{className:["mp-meter__track rounded-mp-full bg-mp-on-surface/12 relative w-full overflow-hidden",s[R]].join(" "),children:e(t.Indicator,{className:["mp-meter__bar rounded-mp-full absolute inset-y-0 start-0 bg-(--_mp-accent)","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none"].join(" ")})})]})});

package/dist/components/mockup/MPMockup.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as i from"react";import{cssLength as o}from"../../internal/length.js";import{FINISHES as s,HARDWARE as h,MockupCutout as r,RESOLUTIONS as n,defaultNotch as a,mockupChrome as d,mockupMetrics as l,resolveOs as c}from"../../internal/mockup.js";import{useMPSize as m}from"../../internal/config.js";export const MPMockup=/*@__PURE__*/i.forwardRef(function({device:p,os:u,hardware:f="monitor",size:g,resolution:w,orientation:v="portrait",bezel:b="standard",finish:k="graphite",notch:y,systemUi:x=!0,width:_,height:$,className:R,style:N,children:j,...z},B){const H=m(g),M=c(p,u),O=y??a(p,M),W=l({device:p,bezel:b,hardware:f,orientation:v,resolution:w??n[p][H]}),{screen:C,body:P,frame:E,shell:F,screenRadius:S,stand:T,laptop:U}=W,q=x?d({os:M,width:C.width,notch:O}):null,A=i.useRef(null),[D,G]=i.useState(null);i.useEffect(()=>{const e=A.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=()=>{const t=e.getBoundingClientRect();t.width<=0||t.height<=0||G(Math.min(t.width/E.width,t.height/E.height))};t();const i=new ResizeObserver(t);return i.observe(e),()=>i.disconnect()},[E.width,E.height]);const I=i.useCallback(e=>{A.current=e,"function"==typeof B?B(e):B&&(B.current=e)},[B]);return e("div",{ref:I,"data-mp-size":H,"data-mp-device":p,"data-mp-os":M,className:["mp-mockup relative",R??""].filter(Boolean).join(" "),style:{...s[k],width:o(_)??(void 0===$?"100%":"auto"),height:o($),aspectRatio:`${E.width} / ${E.height}`,...N},...z,children:t("div",{className:"mp-mockup__frame absolute top-1/2 left-1/2 flex flex-col items-center",style:{width:E.width,height:E.height,transform:`translate(-50%, -50%) scale(${D??1})`,transformOrigin:"center",visibility:null===D?"hidden":void 0},children:[e("div",{className:`mp-mockup__body relative shrink-0 ${h}`,style:{width:P.width,height:P.height,borderRadius:F.radius,padding:`${F.top}px ${F.side}px ${F.bottom}px`},children:t("div",{className:"mp-mockup__screen bg-mp-surface text-mp-on-surface relative flex size-full flex-col overflow-hidden",style:{borderRadius:S},children:[q?.top,e("div",{className:"mp-mockup__content relative min-h-0 overflow-hidden",style:{width:C.width,height:C.height-(q?.insetTop??0)-(q?.insetBottom??0)},children:j}),q?.bottom,e(r,{notch:O,width:C.width})]})}),T?t(i.Fragment,{children:[e("div",{className:`mp-mockup__neck shrink-0 ${h}`,style:{width:T.neckWidth,height:T.neckHeight}}),e("div",{className:`mp-mockup__foot shrink-0 ${h}`,style:{width:T.footWidth,height:T.footHeight,borderRadius:T.footHeight}})]}):null,U?e("div",{className:`mp-mockup__base relative shrink-0 ${h}`,style:{width:U.width,height:U.height,clipPath:"polygon(2% 0, 98% 0, 100% 100%, 0 100%)",borderRadius:`0 0 ${.5*U.height}px ${.5*U.height}px`},children:e("span",{className:"bg-(--_mp-device-edge) absolute top-0 left-1/2 -translate-x-1/2 rounded-b-full",style:{width:U.lipWidth,height:.28*U.height}})}):null]})})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as i from"react";import{cssLength as o}from"../../internal/length.js";import{FINISHES as h,HARDWARE as n,MockupCutout as r,RESOLUTIONS as s,defaultNotch as d,mockupChrome as a,mockupMetrics as l,resolveOs as c}from"../../internal/mockup.js";import{useMPSize as m}from"../../internal/config.js";export const MPMockup=/*@__PURE__*/i.forwardRef(function({device:p,os:u,hardware:f="monitor",size:g,resolution:w,orientation:v="portrait",bezel:b="standard",finish:y="graphite",notch:k,systemUi:x=!0,width:_,height:$,className:R,style:N,children:j,...z},M){const B=m(g),H=c(p,u),O=k??d(p,H),W=l({device:p,bezel:b,hardware:f,orientation:v,resolution:w??s[p][B]}),{screen:C,body:P,frame:E,shell:F,screenRadius:L,stand:S,laptop:T}=W,U=x?a({os:H,width:C.width,notch:O}):null,q=i.useRef(null),[A,D]=i.useState(null),G="number"==typeof _&&"number"==typeof $?Math.min(_/E.width,$/E.height):"number"==typeof _&&void 0===$?_/E.width:"number"==typeof $&&void 0===_?$/E.height:null,I=A??G;i.useLayoutEffect(()=>{const e=q.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=()=>{const t=e.getBoundingClientRect();t.width<=0||t.height<=0||D(Math.min(t.width/E.width,t.height/E.height))};t();const i=new ResizeObserver(t);return i.observe(e),()=>i.disconnect()},[E.width,E.height]);const J=i.useCallback(e=>{q.current=e,"function"==typeof M?M(e):M&&(M.current=e)},[M]);return e("div",{ref:J,"data-mp-size":B,"data-mp-device":p,"data-mp-os":H,className:["mp-mockup relative",R??""].filter(Boolean).join(" "),style:{...h[y],width:o(_)??(void 0===$?"100%":"auto"),height:o($),aspectRatio:`${E.width} / ${E.height}`,...N},...z,children:t("div",{className:"mp-mockup__frame absolute top-1/2 left-1/2 flex flex-col items-center",style:{width:E.width,height:E.height,transform:`translate(-50%, -50%) scale(${I??1})`,transformOrigin:"center",visibility:null===I?"hidden":void 0},children:[e("div",{className:`mp-mockup__body relative shrink-0 ${n}`,style:{width:P.width,height:P.height,borderRadius:F.radius,padding:`${F.top}px ${F.side}px ${F.bottom}px`},children:t("div",{className:"mp-mockup__screen bg-mp-surface text-mp-on-surface relative flex size-full flex-col overflow-hidden",style:{borderRadius:L},children:[U?.top,e("div",{className:"mp-mockup__content relative min-h-0 overflow-hidden",style:{width:C.width,height:C.height-(U?.insetTop??0)-(U?.insetBottom??0)},children:j}),U?.bottom,e(r,{notch:O,width:C.width})]})}),S?t(i.Fragment,{children:[e("div",{className:`mp-mockup__neck shrink-0 ${n}`,style:{width:S.neckWidth,height:S.neckHeight}}),e("div",{className:`mp-mockup__foot shrink-0 ${n}`,style:{width:S.footWidth,height:S.footHeight,borderRadius:S.footHeight}})]}):null,T?e("div",{className:`mp-mockup__base relative shrink-0 ${n}`,style:{width:T.width,height:T.height,clipPath:"polygon(2% 0, 98% 0, 100% 100%, 0 100%)",borderRadius:`0 0 ${.5*T.height}px ${.5*T.height}px`},children:e("span",{className:"bg-(--_mp-device-edge) absolute top-0 left-1/2 -translate-x-1/2 rounded-b-full",style:{width:T.lipWidth,height:.28*T.height}})}):null]})})});

package/dist/components/navigation-menu/MPNavigationMenu.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { NavigationMenu } from '@base-ui/react/navigation-menu';
 import type { MPColor, MPOrientation, MPSize } from '../../types.js';
 export interface MPNavigationMenuProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'defaultValue' | 'onChange'> {
     /**
@@ -35,6 +36,17 @@ export interface MPNavigationMenuProps extends Omit<React.ComponentPropsWithoutR
      * @default 'primary'
      */
     color?: MPColor;
+    /**
+     * Keeps every panel's links in the page while the panels are closed: in the
+     * server's markup, hidden, and in the document from then on.
+     *
+     * Off by default, which leaves a closed panel out of the page entirely — so
+     * the links inside it are not in the HTML a crawler reads and not on the
+     * page a crawler renders. Turn it on when the panels hold destinations the
+     * site wants found.
+     * @default false
+     */
+    keepMounted?: boolean;
     /**
      * The name the `<nav>` is announced by, through `aria-label` in the rest
      * props.
@@ -73,6 +85,13 @@ export interface MPNavigationMenuItemProps {
      * also needs `nofollow` should say `rel="noopener noreferrer nofollow"`.
      */
     rel?: string;
+    /**
+     * Renders the destination'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?: NavigationMenu.Link.Props['render'];
     /** A glyph before the label. */
     startIcon?: React.ReactNode;
     /**
@@ -106,6 +125,13 @@ export interface MPNavigationMenuLinkProps extends Omit<React.ComponentPropsWith
     description?: React.ReactNode;
     /** A glyph before the title. */
     startIcon?: React.ReactNode;
+    /**
+     * 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?: NavigationMenu.Link.Props['render'];
 }
 /**
  * One row inside a panel: where it goes, what it is called, and a line saying
@@ -124,7 +150,7 @@ export declare const MPNavigationMenuLink: React.ForwardRefExoticComponent<MPNav
  * is a link — and the difference is not cosmetic. The second is announced as a
  * destination and the first as something that expands.
  */
-export declare function MPNavigationMenuItem({ label, href, target, rel, startIcon, value, disabled, columns, children, className, style }: MPNavigationMenuItemProps): React.JSX.Element;
+export declare function MPNavigationMenuItem({ label, href, target, rel, render, startIcon, value, disabled, columns, children, className, style }: MPNavigationMenuItemProps): React.JSX.Element;
 /**
  * A site's navigation: a row of destinations, some of which open a panel of more
  * of them.

package/dist/components/navigation-menu/MPNavigationMenu.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as p,CONTROL_ICON as d,CONTROL_PAD_X as u,CONTROL_TEXT as f,hasContent as h,META_TEXT as g}from"../../internal/scale.js";import{PORTAL_LAYER as x}from"../../internal/surface.js";import{useMPColor as v,useMPSize as N}from"../../internal/config.js";const y=/*@__PURE__*/a.createContext({size:"md"}),j=/*@__PURE__*/["mp-navigation-menu__popup rounded-mp-xs shadow-mp-2","bg-mp-surface-container text-mp-on-surface box-border overflow-hidden outline-none","transition-[opacity,width,height] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),b={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const MPNavigationMenuLink=/*@__PURE__*/a.forwardRef(function({href:t,title:r,description:o,startIcon:s,target:p,rel:d,className:x,children:v,...N},j){const{size:b}=a.useContext(y);return n(i.Link,{ref:j,href:t,target:p,rel:l(p,d),className:["mp-navigation-menu__link group text-mp-on-surface rounded-mp-xs relative flex","min-w-0 cursor-pointer items-start bg-transparent py-2 no-underline outline-none",m[b],u[b],x??""].filter(Boolean).join(" "),...N,children:[e(c,{}),h(s)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"relative flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${f[b]}`,children:r}),h(o)?e("span",{className:`text-mp-on-surface-variant ${g}`,children:o}):null,v]})]})});export function MPNavigationMenuItem({label:s,href:g,target:x,rel:v,startIcon:N,value:j,disabled:w=!1,columns:M=1,children:P,className:_,style:z}){const{size:k}=a.useContext(y),C=void 0!==g&&!h(P),I=Number.isFinite(M)?Math.max(1,Math.round(M)):1,L=["mp-navigation-menu__item group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-full cursor-pointer items-center justify-center bg-transparent","appearance-none border-0 font-[inherit] whitespace-nowrap no-underline select-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",p[k],f[k],m[k],u[k],_??""].filter(Boolean).join(" ");return e(i.Item,{value:j,children:C?n(i.Link,{href:g,target:x,rel:l(x,v),className:L,style:z,children:[e(c,{}),h(N)?e("span",{className:"relative flex",children:N}):null,e("span",{className:"relative",children:s})]}):n(t,{children:[n(i.Trigger,{disabled:w,className:L,style:z,children:[w?null:e(c,{className:"group-data-popup-open:opacity-8"}),h(N)?e("span",{className:"relative flex",children:N}):null,e("span",{className:"relative",children:s}),e(i.Icon,{className:["relative flex items-center transition-transform","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:o,size:d[k]})})]}),e(i.Content,{className:`mp-navigation-menu__panel grid gap-1 ${b[k]}`,style:I>1?{gridTemplateColumns:`repeat(${I}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const MPNavigationMenu=/*@__PURE__*/a.forwardRef(function({orientation:t="horizontal",value:r,defaultValue:o,onValueChange:l,delay:c,closeDelay:p,sideOffset:d=8,size:u,color:f,className:h,style:g,children:b,...w},M){const P=N(u),_=v(f),z=a.useMemo(()=>({size:P}),[P]);return e(y.Provider,{value:z,children:n(i.Root,{ref:M,orientation:t,value:r,defaultValue:o,onValueChange:e=>l?.(e),delay:c,closeDelay:p,"data-mp-size":P,className:["mp-navigation-menu",h??""].filter(Boolean).join(" "),style:{...s(_),...g},...w,children:[e(i.List,{className:["m-0 flex list-none items-center p-0","vertical"===t?"flex-col items-stretch":"flex-row",m[P]].join(" "),children:b}),e(i.Portal,{children:e(i.Positioner,{className:x,sideOffset:d,collisionPadding:12,style:s(_),children:e(i.Popup,{className:j,children:e(i.Viewport,{})})})})]})})});
+import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as d,CONTROL_ICON as p,CONTROL_PAD_X as u,CONTROL_TEXT as f,hasContent as h,META_TEXT as g}from"../../internal/scale.js";import{PORTAL_LAYER as x}from"../../internal/surface.js";import{useMPColor as v,useMPSize as N}from"../../internal/config.js";const y=/*@__PURE__*/a.createContext({size:"md",keepMounted:!1}),j=/*@__PURE__*/["mp-navigation-menu__popup rounded-mp-xs shadow-mp-2","bg-mp-surface-container text-mp-on-surface box-border overflow-hidden outline-none","transition-[opacity,width,height] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),b={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const MPNavigationMenuLink=/*@__PURE__*/a.forwardRef(function({href:t,title:r,description:o,startIcon:s,target:d,rel:p,className:x,children:v,...N},j){const{size:b}=a.useContext(y);return n(i.Link,{ref:j,href:t,target:d,rel:l(d,p),className:["mp-navigation-menu__link group text-mp-on-surface rounded-mp-xs relative flex","min-w-0 cursor-pointer items-start bg-transparent py-2 no-underline outline-none",m[b],u[b],x??""].filter(Boolean).join(" "),...N,children:[e(c,{}),h(s)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"relative flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${f[b]}`,children:r}),h(o)?e("span",{className:`text-mp-on-surface-variant ${g}`,children:o}):null,v]})]})});export function MPNavigationMenuItem({label:s,href:g,target:x,rel:v,render:N,startIcon:j,value:M,disabled:k=!1,columns:w=1,children:P,className:_,style:z}){const{size:C,keepMounted:I}=a.useContext(y),L=void 0!==g&&!h(P),V=Number.isFinite(w)?Math.max(1,Math.round(w)):1,$=["mp-navigation-menu__item group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-full cursor-pointer items-center justify-center bg-transparent","appearance-none border-0 font-[inherit] whitespace-nowrap no-underline select-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",d[C],f[C],m[C],u[C],_??""].filter(Boolean).join(" ");return e(i.Item,{value:M,children:L?n(i.Link,{href:g,target:x,rel:l(x,v),render:N,className:$,style:z,children:[e(c,{}),h(j)?e("span",{className:"relative flex",children:j}):null,e("span",{className:"relative",children:s})]}):n(t,{children:[n(i.Trigger,{disabled:k,className:$,style:z,children:[k?null:e(c,{className:"group-data-popup-open:opacity-8"}),h(j)?e("span",{className:"relative flex",children:j}):null,e("span",{className:"relative",children:s}),e(i.Icon,{className:["relative flex items-center transition-transform","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:o,size:p[C]})})]}),e(i.Content,{keepMounted:I,className:`mp-navigation-menu__panel grid gap-1 [&[hidden]]:hidden ${b[C]}`,style:V>1?{gridTemplateColumns:`repeat(${V}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const MPNavigationMenu=/*@__PURE__*/a.forwardRef(function({orientation:t="horizontal",value:r,defaultValue:o,onValueChange:l,delay:c,closeDelay:d,sideOffset:p=8,size:u,color:f,keepMounted:h=!1,className:g,style:b,children:M,...k},w){const P=N(u),_=v(f),z=a.useMemo(()=>({size:P,keepMounted:h}),[P,h]);return e(y.Provider,{value:z,children:n(i.Root,{ref:w,orientation:t,value:r,defaultValue:o,onValueChange:e=>l?.(e),delay:c,closeDelay:d,"data-mp-size":P,className:["mp-navigation-menu",g??""].filter(Boolean).join(" "),style:{...s(_),...b},...k,children:[e(i.List,{className:["m-0 flex list-none items-center p-0","vertical"===t?"flex-col items-stretch":"flex-row",m[P]].join(" "),children:M}),e(i.Portal,{keepMounted:h,children:e(i.Positioner,{className:x,sideOffset:p,collisionPadding:12,style:s(_),children:e(i.Popup,{className:j,children:e(i.Viewport,{})})})})]})})});

package/dist/components/number-field/MPNumberField.d.ts

@@ -50,7 +50,8 @@ export interface MPNumberFieldProps extends MPStyleProps, MPControlEventProps<HT
      */
     format?: Intl.NumberFormatOptions;
     /**
-     * Which locale the number is written and parsed in. Defaults to the runtime's.
+     * Which locale the number is written and parsed in. Defaults to the nearest
+     * `MPLocaleProvider`, then to the runtime's own.
      *
      * A plain BCP 47 string also names the language the two steppers are announced
      * in; anything wider falls back to the nearest `MPLocaleProvider`, then to

package/dist/components/number-field/MPNumberField.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as l from"react";import{NumberField as r}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon.js";import{AddIcon as i,RemoveIcon as o}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as p,useFloatingLabel as m}from"../../internal/FieldOutline.js";import{useMPLocale as d,useMPMessages as c}from"../../internal/locale.js";import{NUMBER_FIELD as u}from"../../internal/messages/number-field.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{CONTROL_ICON as x,PROSE_TEXT as g,hasContent as b}from"../../internal/scale.js";import{useMPSize as j}from"../../internal/config.js";const y={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:v,defaultValue:N,onValueChange:w,onValueCommitted:z,onKeyDown:C,onKeyUp:k,onFocus:S,onBlur:M,onClick:V,onDoubleClick:D,onContextMenu:F,min:I,max:q,step:B,largeStep:K,smallStep:L,allowWheelScrub:O=!1,format:P,locale:W,steppers:R="end",incrementLabel:U,decrementLabel:_,label:G,floatingLabel:T=!0,description:$,errorMessage:A,placeholder:E,startIcon:H,size:J,fullWidth:Q=!1,required:X=!1,disabled:Y=!1,readOnly:Z=!1,name:ee,id:ne,className:le,style:re}){const ae=j(J),te=c(u,d("string"==typeof W?W:void 0)),ie=b(A),oe=y[ae],se=l.useId(),pe=ne??se,me="none"!==R&&!Z&&!Y,[de,ce]=l.useState(N??null),ue=void 0===v?de:v,{shrunk:fe,focusProps:he}=m({floating:T&&b(G),filled:null!==ue,pinned:!!H||me&&"split"===R}),xe=/*@__PURE__*/["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none border-0 bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",oe.stepper].join(" "),ge=n(r.Decrement,{"aria-label":_??te.decrease,className:xe,children:[e(f,{}),e(t,{icon:o,size:x[ae]})]}),be=n(r.Increment,{"aria-label":U??te.increase,className:xe,children:[e(f,{}),e(t,{icon:i,size:x[ae]})]});return n(a.Root,{className:["mp-number-field group flex-col align-top",Q?"flex w-full":"inline-flex w-fit",le??""].filter(Boolean).join(" "),style:re,disabled:Y,invalid:ie,"data-mp-size":ae,...he,children:[e(r.Root,{id:pe,name:ee,className:"contents",value:v,defaultValue:N,onValueChange:e=>{ce(e),w?.(e)},onValueCommitted:e=>z?.(e),min:I,max:q,step:B,largeStep:K,smallStep:L,allowWheelScrub:O,format:P,locale:W,disabled:Y,readOnly:Z,required:X,children:n("div",{className:"relative w-full",children:[n(r.Group,{className:["flex w-full items-center gap-2",oe.height,me&&"end"===R?`${oe.padding} pe-1`:me&&"split"===R?"px-1":oe.padding].join(" "),children:[me&&"split"===R?ge:null,H?e("span",{className:["flex shrink-0 items-center",Y?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:H}):null,e(r.Input,{placeholder:fe?E:void 0,onKeyDown:C,onKeyUp:k,onFocus:S,onBlur:M,onClick:V,onDoubleClick:D,onContextMenu:F,className:["w-full min-w-0 flex-1 tabular-nums",g[ae],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",me&&"split"===R?"text-center":""].filter(Boolean).join(" ")}),me&&"end"===R?n("span",{className:"flex shrink-0 items-center",children:[ge,be]}):null,me&&"split"===R?be:null]}),e(p,{label:G,required:X,notched:fe}),b(G)?e(s,{size:ae,label:G,required:X,htmlFor:pe,shrunk:fe}):null]})}),e(h,{description:$,errorMessage:A,className:oe.padding})]})}
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as l from"react";import{NumberField as r}from"@base-ui/react/number-field";import{Field as a}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon.js";import{AddIcon as i,RemoveIcon as o}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as p,useFloatingLabel as m}from"../../internal/FieldOutline.js";import{useMPLocale as d,useMPMessages as c}from"../../internal/locale.js";import{checkServerLocale as u,intlLocale as f}from"../../internal/intl.js";import{NUMBER_FIELD as h}from"../../internal/messages/number-field.js";import{MPStateLayer as g}from"../../internal/StateLayer.js";import{MPSupportingText as x}from"../../internal/SupportingText.js";import{CONTROL_ICON as b,PROSE_TEXT as j,hasContent as y}from"../../internal/scale.js";import{useMPSize as v}from"../../internal/config.js";const N={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:w,defaultValue:z,onValueChange:C,onValueCommitted:k,onKeyDown:S,onKeyUp:M,onFocus:V,onBlur:D,onClick:I,onDoubleClick:q,onContextMenu:B,min:F,max:K,step:L,largeStep:O,smallStep:P,allowWheelScrub:W=!1,format:R,locale:U,steppers:_="end",incrementLabel:G,decrementLabel:T,label:$,floatingLabel:A=!0,description:E,errorMessage:H,placeholder:J,startIcon:Q,size:X,fullWidth:Y=!1,required:Z=!1,disabled:ee=!1,readOnly:ne=!1,name:le,id:re,className:ae,style:te}){const ie=v(X),oe=d("string"==typeof U?U:void 0),se=c(h,oe);void 0===U&&u(oe);const pe=y(H),me=N[ie],de=l.useId(),ce=re??de,ue="none"!==_&&!ne&&!ee,[fe,he]=l.useState(z??null),ge=void 0===w?fe:w,{shrunk:xe,focusProps:be}=m({floating:A&&y($),filled:null!==ge,pinned:!!Q||ue&&"split"===_}),je=/*@__PURE__*/["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none border-0 bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",me.stepper].join(" "),ye=n(r.Decrement,{"aria-label":T??se.decrease,className:je,children:[e(g,{}),e(t,{icon:o,size:b[ie]})]}),ve=n(r.Increment,{"aria-label":G??se.increase,className:je,children:[e(g,{}),e(t,{icon:i,size:b[ie]})]});return n(a.Root,{className:["mp-number-field group flex-col align-top",Y?"flex w-full":"inline-flex w-fit",ae??""].filter(Boolean).join(" "),style:te,disabled:ee,invalid:pe,"data-mp-size":ie,...be,children:[e(r.Root,{id:ce,name:le,className:"contents",value:w,defaultValue:z,onValueChange:e=>{he(e),C?.(e)},onValueCommitted:e=>k?.(e),min:F,max:K,step:L,largeStep:O,smallStep:P,allowWheelScrub:W,format:R,locale:"string"==typeof U?f(U):U??f(oe),disabled:ee,readOnly:ne,required:Z,children:n("div",{className:"relative w-full",children:[n(r.Group,{className:["flex w-full items-center gap-2",me.height,ue&&"end"===_?`${me.padding} pe-1`:ue&&"split"===_?"px-1":me.padding].join(" "),children:[ue&&"split"===_?ye:null,Q?e("span",{className:["flex shrink-0 items-center",ee?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:Q}):null,e(r.Input,{placeholder:xe?J:void 0,onKeyDown:S,onKeyUp:M,onFocus:V,onBlur:D,onClick:I,onDoubleClick:q,onContextMenu:B,className:["w-full min-w-0 flex-1 tabular-nums",j[ie],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",ue&&"split"===_?"text-center":""].filter(Boolean).join(" ")}),ue&&"end"===_?n("span",{className:"flex shrink-0 items-center",children:[ye,ve]}):null,ue&&"split"===_?ve:null]}),e(p,{label:$,required:Z,notched:xe}),y($)?e(s,{size:ie,label:$,required:Z,shrunk:xe}):null]})}),e(x,{description:E,errorMessage:H,className:me.padding})]})}

package/dist/components/otp-field/MPOtpField.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{MPSupportingText as n}from"../../internal/SupportingText.js";import{META_TEXT as l,STACK_GAP as i,hasContent as m}from"../../internal/scale.js";import{useMPSize as s}from"../../internal/config.js";const u={xs:"h-8 w-7",sm:"h-10 w-9",md:"h-14 w-12",lg:"h-16 w-14",xl:"h-18 w-16"},d={xs:"text-mp-body-large",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},p={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},c={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const MPOtpField=/*@__PURE__*/a.forwardRef(function({size:f,fullWidth:h=!1,length:x=6,charset:g="numeric",mask:b=!1,groupSize:v,separator:y="–",value:j,defaultValue:w,onValueChange:M,onComplete:V,onValueInvalid:N,autoSubmit:C=!1,label:F,description:S,errorMessage:z,name:I,required:O=!1,disabled:R=!1,readOnly:$=!1,autoFocus:k=!1,className:q,style:T},A){const B=s(f),L=Math.min(12,Math.max(2,Math.round(x))),P=m(z),W=v&&v>0?Math.round(v):0,D=/*@__PURE__*/["rounded-mp-xs border bg-transparent text-center font-[inherit]",u[B],d[B],"transition-[border-color,color] duration-(--mp-sys-motion-duration-short4)","focus:border-2 focus:border-mp-primary focus:outline-none",R?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":P?"border-mp-error text-mp-on-surface caret-mp-error hover:border-mp-error":$?"border-mp-outline-variant text-mp-on-surface cursor-default":"border-mp-outline text-mp-on-surface caret-mp-primary hover:border-mp-on-surface"].join(" ");return r(t.Root,{disabled:R,invalid:P,"data-mp-size":B,className:["mp-otp-field flex-col align-top",i[B],h?"flex w-full":"inline-flex w-fit",q??""].filter(Boolean).join(" "),style:T,children:[m(F)?r(t.Label,{className:`${l} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 data-invalid:text-mp-error`,children:[F,O?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(o.Root,{ref:A,length:L,validationType:c[g],mask:b,name:I,required:O,disabled:R,readOnly:$,autoSubmit:C,value:j,defaultValue:w,onValueChange:e=>M?.(e),onValueComplete:e=>V?.(e),onValueInvalid:e=>N?.(e),className:`flex items-center ${p[B]}`,children:Array.from({length:L},(t,n)=>r(a.Fragment,{children:[W>0&&n>0&&n%W===0?e("span",{"aria-hidden":"true",className:`text-mp-on-surface-variant px-0.5 select-none ${d[B]}`,children:y}):null,e(o.Input,{className:D,autoFocus:k&&0===n})]},n))}),e(n,{description:S,errorMessage:z})]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{MPSupportingText as n}from"../../internal/SupportingText.js";import{META_TEXT as l,STACK_GAP as i,hasContent as s}from"../../internal/scale.js";import{useMPSize as m}from"../../internal/config.js";const u={xs:"h-8 w-7",sm:"h-10 w-9",md:"h-14 w-12",lg:"h-16 w-14",xl:"h-18 w-16"},d={xs:"text-mp-body-large",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},p={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},c={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const MPOtpField=/*@__PURE__*/a.forwardRef(function({size:f,fullWidth:h=!1,length:x=6,charset:g="numeric",mask:b=!1,groupSize:v,separator:y="–",value:j,defaultValue:w,onValueChange:M,onComplete:V,onValueInvalid:N,autoSubmit:C=!1,label:F,description:S,errorMessage:z,name:I,required:O=!1,disabled:R=!1,readOnly:$=!1,autoFocus:k=!1,className:q,style:T},A){const B=m(f),L=Math.min(12,Math.max(2,Math.round(x))),P=s(z),W=v&&v>0?Math.round(v):0,D=/*@__PURE__*/["rounded-mp-xs border bg-transparent text-center font-[inherit]",u[B],d[B],"transition-[border-color,color] duration-(--mp-sys-motion-duration-short4)","focus:border-mp-primary focus:inset-ring focus:inset-ring-mp-primary focus:outline-none",R?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":P?"border-mp-error text-mp-on-surface caret-mp-error hover:border-mp-error":$?"border-mp-outline-variant text-mp-on-surface cursor-default":"border-mp-outline text-mp-on-surface caret-mp-primary hover:border-mp-on-surface"].join(" ");return r(t.Root,{disabled:R,invalid:P,"data-mp-size":B,className:["mp-otp-field flex-col align-top",i[B],h?"flex w-full":"inline-flex w-fit",q??""].filter(Boolean).join(" "),style:T,children:[s(F)?r(t.Label,{className:`${l} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 data-invalid:text-mp-error`,children:[F,O?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(o.Root,{ref:A,length:L,validationType:c[g],mask:b,name:I,required:O,disabled:R,readOnly:$,autoSubmit:C,value:j,defaultValue:w,onValueChange:e=>M?.(e),onValueComplete:e=>V?.(e),onValueInvalid:e=>N?.(e),className:`flex items-center ${p[B]}`,children:Array.from({length:L},(t,n)=>r(a.Fragment,{children:[W>0&&n>0&&n%W===0?e("span",{"aria-hidden":"true",className:`text-mp-on-surface-variant px-0.5 select-none ${d[B]}`,children:y}):null,e(o.Input,{className:D,autoFocus:k&&0===n})]},n))}),e(n,{description:S,errorMessage:z})]})});

package/dist/components/page-layout/MPPageLayout.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useMPLocale as t,useMPMessages as n}from"../../internal/locale.js";import{LAYOUT as r}from"../../internal/messages/layout.js";import{MPPageLayoutContext as a,MPSidebarSideContext as i}from"../../internal/page-layout.js";import{hasContent as s}from"../../internal/scale.js";import{cssLength as u}from"../../internal/length.js";const p=["header","footer"];export const MPPageLayout=/*@__PURE__*/o.forwardRef(function({header:c,footer:f,sidebar:d,endSidebar:m,headerSpan:h="full",footerSpan:v="full",scroll:y="page",height:x="viewport",collapseBelow:b="expanded",sidebarOpen:g,defaultSidebarOpen:w=!1,onSidebarOpenChange:j,endSidebarOpen:_,defaultEndSidebarOpen:k=!1,onEndSidebarOpenChange:S,skipLink:P=!0,skipLabel:C,mainId:O="main",mainProps:N,locale:B,className:$,style:R,children:z,...E},I){const L=t(B),M=n(r,L),[H,T]=o.useState(w),[q,A]=o.useState(k),D=o.useMemo(()=>({start:g??H,end:_??q}),[g,H,_,q]),F=o.useCallback((e,l)=>{if("start"===e)return void 0===g&&T(l),void j?.(l);void 0===_&&A(l),S?.(l)},[g,_,j,S]),G=o.useRef(null),J=o.useCallback(e=>{G.current=e,"function"==typeof I?I(e):I&&(I.current=e)},[I]),K=o.useRef({header:null,footer:null}),Q=o.useRef(null),U=o.useCallback(()=>{const e=G.current;if(e)for(const l of p){const o=K.current[l],t="header"===l?h:v;if(!o){e.style.setProperty(`--_mp-layout-${l}`,"0px"),e.style.setProperty(`--_mp-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(o).position,r=`${o.offsetHeight}px`,a="sticky"===n||"fixed"===n;e.style.setProperty(`--_mp-layout-${l}`,a&&"full"===t?r:"0px"),e.style.setProperty(`--_mp-layout-${l}-inset`,"fixed"===n?r:"0px")}},[h,v]),V=o.useCallback(()=>{const e=Q.current;if(e){e.disconnect();for(const l of p){const o=K.current[l];o&&e.observe(o)}}U()},[U]);o.useEffect(()=>(Q.current=new ResizeObserver(()=>U()),V(),()=>{Q.current?.disconnect(),Q.current=null}),[U,V]);const W=o.useCallback((e,l)=>{K.current[e]=l,V()},[V]),X=o.useMemo(()=>({present:!0,register:W,collapseBelow:b,open:D,setOpen:F,scroll:y,locale:L}),[W,b,D,F,y,L]),Y="content"===y,Z=u("viewport"===x||"auto"===x?void 0:x),ee=void 0!==Z?"":"auto"===x?Y?"h-full":"min-h-full":Y?"h-dvh":"min-h-dvh",le=s(c)?c:null,oe=s(f)?f:null;return e(a.Provider,{value:X,children:l("div",{ref:J,"data-mp-scroll":y,className:["mp-page-layout relative flex w-full flex-col",Y?"overflow-hidden":"",ee,"full"===h?"[padding-top:var(--_mp-layout-header-inset,0px)]":"","full"===v?"[padding-bottom:var(--_mp-layout-footer-inset,0px)]":"",$??""].filter(Boolean).join(" "),style:void 0===Z?R:{...Y?{height:Z}:{minHeight:Z},...R},...E,children:[P?e("a",{href:`#${O}`,className:["mp-page-layout__skip absolute start-3 top-3 z-50 size-px overflow-hidden","whitespace-nowrap [clip-path:inset(50%)]","focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:bg-mp-primary focus:text-mp-on-primary focus:rounded-mp-full","focus:shadow-mp-2 focus:text-mp-label-large focus:px-4 focus:py-2.5","focus:no-underline focus:outline-none"].join(" "),children:C??M.skipToContent}):null,"full"===h?le:null,l("div",{className:["flex w-full flex-1",Y?"min-h-0":""].filter(Boolean).join(" "),children:[s(d)?e(i.Provider,{value:"start",children:d}):null,l("div",{className:["flex min-w-0 flex-1 flex-col",Y?"min-h-0":"","content"===h?"[padding-top:var(--_mp-layout-header-inset,0px)]":"","content"===v?"[padding-bottom:var(--_mp-layout-footer-inset,0px)]":""].filter(Boolean).join(" "),children:["content"===h?le:null,e("main",{...N,id:O,tabIndex:N?.tabIndex??-1,className:["mp-page-layout__main min-w-0 flex-1",Y?"min-h-0 overflow-y-auto":"",N?.className??""].filter(Boolean).join(" "),children:z}),"content"===v?oe:null]}),s(m)?e(i.Provider,{value:"end",children:m}):null]}),"full"===v?oe:null]})})});
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as o from"react";import{useMPLocale as t,useMPMessages as n}from"../../internal/locale.js";import{LAYOUT as r}from"../../internal/messages/layout.js";import{MPPageLayoutContext as a,MPSidebarSideContext as s}from"../../internal/page-layout.js";import{hasContent as i}from"../../internal/scale.js";import{cssLength as u}from"../../internal/length.js";const p=["header","footer"];export const MPPageLayout=/*@__PURE__*/o.forwardRef(function({header:c,footer:d,sidebar:f,endSidebar:m,headerSpan:h="full",footerSpan:v="full",scroll:y="page",height:x="viewport",collapseBelow:b="expanded",sidebarOpen:g,defaultSidebarOpen:w=!1,onSidebarOpenChange:_,endSidebarOpen:j,defaultEndSidebarOpen:k=!1,onEndSidebarOpenChange:S,skipLink:P=!0,skipLabel:C,mainId:O="main",mainProps:N,locale:B,className:$,style:R,children:z,...E},I){const L=t(B),M=n(r,L),[H,T]=o.useState(w),[q,A]=o.useState(k),D=o.useMemo(()=>({start:g??H,end:j??q}),[g,H,j,q]),F=o.useCallback((e,l)=>{if("start"===e)return void 0===g&&T(l),void _?.(l);void 0===j&&A(l),S?.(l)},[g,j,_,S]),G=o.useRef(null),J=o.useCallback(e=>{G.current=e,"function"==typeof I?I(e):I&&(I.current=e)},[I]),K=o.useRef({header:null,footer:null}),Q=o.useRef(null),U=o.useCallback(()=>{const e=G.current;if(e)for(const l of p){const o=K.current[l],t="header"===l?h:v;if(!o){e.style.setProperty(`--_mp-layout-${l}`,"0px"),e.style.setProperty(`--_mp-layout-${l}-inset`,"0px");continue}const n=getComputedStyle(o).position,r=`${o.offsetHeight}px`,a="sticky"===n||"fixed"===n;e.style.setProperty(`--_mp-layout-${l}`,a&&"full"===t?r:"0px"),e.style.setProperty(`--_mp-layout-${l}-inset`,"fixed"===n?r:"0px")}},[h,v]),V=o.useCallback(()=>{const e=Q.current;if(e){e.disconnect();for(const l of p){const o=K.current[l];o&&e.observe(o)}}U()},[U]);o.useEffect(()=>(Q.current=new ResizeObserver(()=>U()),V(),()=>{Q.current?.disconnect(),Q.current=null}),[U,V]);const W=o.useCallback((e,l)=>{K.current[e]=l,V()},[V]),X=o.useMemo(()=>({present:!0,register:W,collapseBelow:b,open:D,setOpen:F,scroll:y,locale:L}),[W,b,D,F,y,L]),Y="content"===y,Z=u("viewport"===x||"auto"===x?void 0:x),ee=void 0!==Z?"":"auto"===x?Y?"h-full":"min-h-full":Y?"h-dvh":"min-h-dvh",le=i(c)?c:null,oe=i(d)?d:null;return e(a.Provider,{value:X,children:l("div",{ref:J,"data-mp-scroll":y,className:["mp-page-layout relative flex w-full flex-col",Y?"overflow-hidden":"",ee,"full"===h?"[padding-top:var(--_mp-layout-header-inset,var(--_mp-layout-header-seed,0px))]":"","full"===v?"[padding-bottom:var(--_mp-layout-footer-inset,0px)]":"",$??""].filter(Boolean).join(" "),style:void 0===Z?R:{...Y?{height:Z}:{minHeight:Z},...R},...E,children:[P?e("a",{href:`#${O}`,className:["mp-page-layout__skip absolute start-3 top-3 z-50 size-px overflow-hidden","whitespace-nowrap [clip-path:inset(50%)]","focus:size-auto focus:overflow-visible focus:[clip-path:none]","focus:bg-mp-primary focus:text-mp-on-primary focus:rounded-mp-full","focus:shadow-mp-2 focus:text-mp-label-large focus:px-4 focus:py-2.5","focus:no-underline focus:outline-none"].join(" "),children:C??M.skipToContent}):null,"full"===h?le:null,l("div",{className:["flex w-full flex-1",Y?"min-h-0":""].filter(Boolean).join(" "),children:[i(f)?e(s.Provider,{value:"start",children:f}):null,l("div",{className:["flex min-w-0 flex-1 flex-col",Y?"min-h-0":"","content"===h?"[padding-top:var(--_mp-layout-header-inset,var(--_mp-layout-header-seed,0px))]":"","content"===v?"[padding-bottom:var(--_mp-layout-footer-inset,0px)]":""].filter(Boolean).join(" "),children:["content"===h?le:null,e("main",{...N,id:O,tabIndex:N?.tabIndex??-1,className:["mp-page-layout__main min-w-0 flex-1",Y?"min-h-0 overflow-y-auto":"",N?.className??""].filter(Boolean).join(" "),children:z}),"content"===v?oe:null]}),i(m)?e(s.Provider,{value:"end",children:m}):null]}),"full"===v?oe:null]})})});

package/dist/components/pagination/MPPagination.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { useRender } from '@base-ui/react/use-render';
 import { type MPMessages } from '../../internal/i18n.js';
 import type { MPColor, MPStyleProps } from '../../types.js';
 /** The words the row says on its own behalf. */
@@ -61,6 +62,13 @@ export interface MPPaginationProps extends MPStyleProps, Omit<React.ComponentPro
      * client-side router keeps the page it already has.
      */
     getPageHref?: (page: number) => string;
+    /**
+     * Renders each page's link as something else — a router's `Link`, so moving
+     * between pages is a client-side navigation and the next one is prefetched.
+     * The `href` from `getPageHref` still goes through, along with `rel` and the
+     * classes. Only read alongside `getPageHref`; without it there are no links.
+     */
+    renderLink?: useRender.RenderProp;
     /**
      * Which language the row names itself in — a BCP 47 tag such as `ko`, `pt-BR`
      * or `zh-Hant`. Unsupported tags fall back to English.

package/dist/components/pagination/MPPagination.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronLeftIcon as i,ChevronRightIcon as r,ChevronsLeftIcon as l,ChevronsRightIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{fillMessage as m}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{PAGINATION as u}from"../../internal/messages/pagination.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{CONTROL_ICON as d,CONTROL_TEXT as h}from"../../internal/scale.js";import{VISUALLY_HIDDEN as g}from"../../internal/visually-hidden.js";import{useMPColor as x,useMPSize as b}from"../../internal/config.js";const j={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},v={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function y(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=/*@__PURE__*/t.forwardRef(function({count:M,page:w,defaultPage:N=1,onPageChange:P,siblingCount:C=1,boundaryCount:S=1,showEdges:K=!1,showArrows:_=!0,size:k,color:z,fullWidth:$=!1,disabled:A=!1,getPageHref:B,locale:D,labels:E,className:H,style:I,...L},R){const W=b(k),q=x(z),F=c(D),G=p(u,F,E),[J,O]=t.useState(N),Q=void 0!==w,T=Math.min(Math.max(w??J,1),Math.max(M,1));if(M<2)return null;const U=function(e,n,t,a){const i=y(1,Math.min(a,e)),r=y(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),o=Math.min(Math.max(n+t,a+2*t+2),r.length>0?r[0]-2:e-1);return[...i,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...y(l,o),...o<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...r]}(M,T,C,S),V=T<=1,X=T>=M,Y=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||B&&!P||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),M);n!==T&&(Q||O(n),P?.(n))})(n))},Z=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",j[W],h[W],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),ee=(t,a,i,r,l,o,s)=>e("li",{className:"flex",children:!B||i||r?n("button",{type:"button",disabled:i,"aria-label":l,"aria-current":r?"page":void 0,className:Z(r,i),onClick:e=>Y(e,a),children:[i?null:e(f,{}),e("span",{className:"relative",children:o})]}):n("a",{href:B(a),rel:s,"aria-label":l,className:Z(!1,!1),onClick:e=>Y(e,a),children:[e(f,{}),e("span",{className:"relative",children:o})]})},t),ne=n=>e(a,{icon:n,size:d[W],className:"rtl:rotate-180"});return n("nav",{ref:R,"aria-label":G.label,"data-mp-size":W,className:["mp-pagination flex",$?"w-full justify-center":"",H??""].filter(Boolean).join(" "),style:{...s(q),...I},...L,children:[n("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${v[W]}`,children:[K?ee("first",1,A||V,!1,G.first,ne(l)):null,_?ee("previous",T-1,A||V,!1,G.previous,ne(i),"prev"):null,U.map((n,t)=>"number"==typeof n?ee(`slot-${t}`,n,A,n===T,m(G.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",j[W],h[W]].join(" "),children:"…"},`slot-${t}`)),_?ee("next",T+1,A||X,!1,G.next,ne(r),"next"):null,K?ee("last",M,A||X,!1,G.last,ne(o)):null]}),e("span",{className:g,"aria-live":"polite",children:m(G.status,{page:String(T),total:String(M)})})]})});
+import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{RenderedLink as r}from"../../internal/RenderedLink.js";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronLeftIcon as l,ChevronRightIcon as o,ChevronsLeftIcon as s,ChevronsRightIcon as m}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{fillMessage as p}from"../../internal/i18n.js";import{useMPLocale as u,useMPMessages as f}from"../../internal/locale.js";import{PAGINATION as d}from"../../internal/messages/pagination.js";import{MPStateLayer as h}from"../../internal/StateLayer.js";import{CONTROL_ICON as g,CONTROL_TEXT as x}from"../../internal/scale.js";import{VISUALLY_HIDDEN as b}from"../../internal/visually-hidden.js";import{useMPColor as j,useMPSize as v}from"../../internal/config.js";const y={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},M={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function w(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=/*@__PURE__*/a.forwardRef(function({count:N,page:P,defaultPage:k=1,onPageChange:C,siblingCount:S=1,boundaryCount:K=1,showEdges:_=!1,showArrows:z=!0,size:L,color:$,fullWidth:A=!1,disabled:R=!1,getPageHref:B,renderLink:D,locale:E,labels:F,className:H,style:I,...W},q){const G=v(L),J=j($),O=u(E),Q=f(d,O,F),[T,U]=a.useState(k),V=void 0!==P,X=Math.min(Math.max(P??T,1),Math.max(N,1));if(N<2)return null;const Y=function(e,n,t,a){const r=w(1,Math.min(a,e)),i=w(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),o=Math.min(Math.max(n+t,a+2*t+2),i.length>0?i[0]-2:e-1);return[...r,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...w(l,o),...o<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...i]}(N,X,S,K),Z=X<=1,ee=X>=N,ne=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||B&&!C||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),N);n!==X&&(V||U(n),C?.(n))})(n))},te=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",y[G],x[G],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),ae=(a,i,l,o,s,m,c)=>e("li",{className:"flex",children:!B||l||o?t("button",{type:"button",disabled:l,"aria-label":s,"aria-current":o?"page":void 0,className:te(o,l),onClick:e=>ne(e,i),children:[l?null:e(h,{}),e("span",{className:"relative",children:m})]}):e(r,{render:D,props:{href:B(i),rel:c,"aria-label":s,className:te(!1,!1),onClick:e=>ne(e,i),children:t(n,{children:[e(h,{}),e("span",{className:"relative",children:m})]})}})},a),re=n=>e(i,{icon:n,size:g[G],className:"rtl:rotate-180"});return t("nav",{ref:q,"aria-label":Q.label,"data-mp-size":G,className:["mp-pagination flex",A?"w-full justify-center":"",H??""].filter(Boolean).join(" "),style:{...c(J),...I},...W,children:[t("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${M[G]}`,children:[_?ae("first",1,R||Z,!1,Q.first,re(s)):null,z?ae("previous",X-1,R||Z,!1,Q.previous,re(l),"prev"):null,Y.map((n,t)=>"number"==typeof n?ae(`slot-${t}`,n,R,n===X,p(Q.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",y[G],x[G]].join(" "),children:"…"},`slot-${t}`)),z?ae("next",X+1,R||ee,!1,Q.next,re(o),"next"):null,_?ae("last",N,R||ee,!1,Q.last,re(m)):null]}),e("span",{className:b,"aria-live":"polite",children:p(Q.status,{page:String(X),total:String(N)})})]})});

package/dist/components/panes/MPPanes.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent.js";import{pixelsIn as o}from"../../internal/length.js";import{useMPColor as i,useMPSize as a}from"../../internal/config.js";const s=/*@__PURE__*/n.createContext({basis:null,id:null}),l={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},c={xs:4,sm:6,md:8,lg:10,xl:12};function u(e,t,n){if(null!=e)return"number"==typeof e?t*e/100:o(e,t,n)}export const MPPanes=/*@__PURE__*/n.forwardRef(function({orientation:o="horizontal",resizable:d=!0,color:m,size:f,onResize:p,onResizeEnd:h,className:g,style:v,children:x,...y},b){const w=i(m),z=a(f),S=n.Children.toArray(x).filter(n.isValidElement),j=S.length,E=n.useId(),R=n.useRef(null),M=n.useCallback(e=>{R.current=e,"function"==typeof b?b(e):b&&(b.current=e)},[b]),k=n.useRef([]),C=S.map(e=>e.props),[L,P]=n.useState(null),$=L&&L.length===j?L:null,_=n.useRef(null);n.useLayoutEffect(()=>{k.current=C,_.current=$});const B=n.useRef(null);n.useEffect(()=>()=>{null!==B.current&&(document.body.style.userSelect=B.current,B.current=null)},[]);const N="horizontal"===o,A=c[z]*Math.max(0,j-1);function D(e){const t=R.current,n=_.current;if(!d||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(N?r.width:r.height)-A;if(o<=0)return null;const i=k.current[e],a=k.current[e+1],s=n[e]*o,l=s+n[e+1]*o,c=Math.max(u(i?.minSize,o,t)??0,l-(u(a?.maxSize,o,t)??l)),m=Math.min(u(i?.maxSize,o,t)??l,l-(u(a?.minSize,o,t)??0));return m<c?null:{root:t,current:n,lower:c,upper:m,start:s,resize(t){const r=Math.min(m,Math.max(c,s+t)),i=[...n];return i[e]=r/o,i[e+1]=(l-r)/o,P(i),p?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=R.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(N?t.width:t.height)-A;n<=0||P(t=>t&&t.length===j?t:function(e,t,n){const r=e.map(e=>u(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,s=r.map(e=>Math.max(0,e??a)),l=s.reduce((e,t)=>e+t,0);return l<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/l)}(k.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[j,N,A]);const I=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",l[z],"transition-colors duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-0","focus-visible:outline-solid outline-none",d?[N?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:M,"data-mp-size":z,className:["mp-panes flex h-full w-full",N?"flex-row":"flex-col","min-h-0 min-w-0",g??""].filter(Boolean).join(" "),style:{...r(w),...v},...y,children:S.map((r,o)=>t(n.Fragment,{children:[o>0?e("div",{role:"separator","aria-orientation":N?"vertical":"horizontal","aria-valuenow":$?Math.round(100*$[o-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!d||void 0,"aria-controls":`${E}-${o-1}`,tabIndex:d?0:-1,className:I,onPointerDown:e=>{0===e.button&&function(e,t){const n=D(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;B.current=o,document.body.style.userSelect="none";const i=N?t.clientX:t.clientY,a=N&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=N?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,B.current=null,h?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(o-1,e)},onKeyDown:e=>{const t=N?"ArrowLeft":"ArrowUp",n=N?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n){e.preventDefault();const t=N&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1;return void function(e,t){const n=D(e);if(!n)return;const r=n.resize(t);h?.(r.map(e=>100*e))}(o-1,(e.key===n?16:-16)*t)}"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=D(e);if(!n)return;const r=n.resize(n[t]-n.start);h?.(r.map(e=>100*e))}(o-1,"Home"===e.key?"lower":"upper"))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",N?"h-full w-px":"h-px w-full",d?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(s.Provider,{value:{basis:$?`calc((100% - ${A}px) * ${$[o].toFixed(6)})`:null,id:`${E}-${o}`},children:r})]},r.key??o))})});export const MPPane=/*@__PURE__*/n.forwardRef(function({defaultSize:t,minSize:r,maxSize:o,className:i,style:a,children:l,...c},u){const{basis:d,id:m}=n.useContext(s);return e("div",{ref:u,id:m??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",i??""].filter(Boolean).join(" "),style:{flex:d?`0 0 ${d}`:"1 1 0%",...a},...c,children:l})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent.js";import{pixelsIn as o}from"../../internal/length.js";import{useMPColor as i,useMPSize as l}from"../../internal/config.js";const s=/*@__PURE__*/n.createContext({basis:null,seed:null,id:null}),a={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},u={xs:4,sm:6,md:8,lg:10,xl:12};function c(e,t,n){if(null!=e)return"number"==typeof e?t*e/100:o(e,t,n)}const d=/^\s*(-?[\d.]+)\s*%\s*$/,m=/^\s*-?[\d.]+\s*(px|rem|em)\s*$/;export const MPPanes=/*@__PURE__*/n.forwardRef(function({orientation:o="horizontal",resizable:f=!0,color:p,size:h,onResize:g,onResizeEnd:v,className:x,style:y,children:b,...z},w){const S=i(p),$=l(h),j=n.Children.toArray(b).filter(n.isValidElement),E=j.length,M=n.useId(),R=n.useRef(null),k=n.useCallback(e=>{R.current=e,"function"==typeof w?w(e):w&&(w.current=e)},[w]),C=n.useRef([]),L=j.map(e=>e.props),[N,P]=n.useState(null),_=N&&N.length===E?N:null,B=n.useRef(null);n.useLayoutEffect(()=>{C.current=L,B.current=_});const A=n.useRef(null);n.useEffect(()=>()=>{null!==A.current&&(document.body.style.userSelect=A.current,A.current=null)},[]);const D="horizontal"===o,F=u[$]*Math.max(0,E-1),I=_?[]:function(e,t){const n=e.map(({defaultSize:e})=>{if("number"==typeof e)return e;const t="string"==typeof e?d.exec(e):null;return t?Number(t[1]):null}),r=`(100% - ${t}px)`;if(n.every(e=>null!==e&&e>0)){const e=n.reduce((e,t)=>e+(t??0),0);return n.map(t=>`0 0 calc(${r} * ${((t??0)/e).toFixed(6)})`)}return e.map(({defaultSize:e},t)=>{const o=n[t];return null!==o?`0 1 calc(${r} * ${(Math.max(0,o)/100).toFixed(6)})`:"string"==typeof e&&m.test(e)?`0 1 ${e.trim()}`:null})}(L,F);function H(e){const t=R.current,n=B.current;if(!f||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(D?r.width:r.height)-F;if(o<=0)return null;const i=C.current[e],l=C.current[e+1],s=n[e]*o,a=s+n[e+1]*o,u=Math.max(c(i?.minSize,o,t)??0,a-(c(l?.maxSize,o,t)??a)),d=Math.min(c(i?.maxSize,o,t)??a,a-(c(l?.minSize,o,t)??0));return d<u?null:{root:t,current:n,lower:u,upper:d,start:s,resize(t){const r=Math.min(d,Math.max(u,s+t)),i=[...n];return i[e]=r/o,i[e+1]=(a-r)/o,P(i),g?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=R.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(D?t.width:t.height)-F;n<=0||P(t=>t&&t.length===E?t:function(e,t,n){const r=e.map(e=>c(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,l=i>0?Math.max(0,t-o)/i:0,s=r.map(e=>Math.max(0,e??l)),a=s.reduce((e,t)=>e+t,0);return a<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/a)}(C.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[E,D,F]);const T=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",a[$],"transition-colors duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-0","focus-visible:outline-solid outline-none",f?[D?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:k,"data-mp-size":$,className:["mp-panes flex h-full w-full",D?"flex-row":"flex-col","min-h-0 min-w-0",x??""].filter(Boolean).join(" "),style:{...r(S),...y},...z,children:j.map((r,o)=>t(n.Fragment,{children:[o>0?e("div",{role:"separator","aria-orientation":D?"vertical":"horizontal","aria-valuenow":_?Math.round(100*_[o-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!f||void 0,"aria-controls":`${M}-${o-1}`,tabIndex:f?0:-1,className:T,onPointerDown:e=>{0===e.button&&function(e,t){const n=H(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;A.current=o,document.body.style.userSelect="none";const i=D?t.clientX:t.clientY,l=D&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const a=e=>{const t=D?e.clientX:e.clientY;s=n.resize((t-i)*l)},u=()=>{r.removeEventListener("pointermove",a),r.removeEventListener("pointerup",u),r.removeEventListener("pointercancel",u),delete r.dataset.dragging,document.body.style.userSelect=o,A.current=null,v?.(s.map(e=>100*e))};r.addEventListener("pointermove",a),r.addEventListener("pointerup",u),r.addEventListener("pointercancel",u)}(o-1,e)},onKeyDown:e=>{const t=D?"ArrowLeft":"ArrowUp",n=D?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n){e.preventDefault();const t=D&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1;return void function(e,t){const n=H(e);if(!n)return;const r=n.resize(t);v?.(r.map(e=>100*e))}(o-1,(e.key===n?16:-16)*t)}"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=H(e);if(!n)return;const r=n.resize(n[t]-n.start);v?.(r.map(e=>100*e))}(o-1,"Home"===e.key?"lower":"upper"))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",D?"h-full w-px":"h-px w-full",f?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(s.Provider,{value:{basis:_?`calc((100% - ${F}px) * ${_[o].toFixed(6)})`:null,seed:I[o]??null,id:`${M}-${o}`},children:r})]},r.key??o))})});export const MPPane=/*@__PURE__*/n.forwardRef(function({defaultSize:t,minSize:r,maxSize:o,className:i,style:l,children:a,...u},c){const{basis:d,seed:m,id:f}=n.useContext(s);return e("div",{ref:c,id:f??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",i??""].filter(Boolean).join(" "),style:{flex:d?`0 0 ${d}`:m??"1 1 0%",...l},...u,children:a})});

package/dist/components/pie-chart/MPPieChart.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useMPElementSize as n}from"../../hooks/useMPElementSize.js";import{useMPLocale as o,useMPMessages as r}from"../../internal/locale.js";import{useMPSize as a}from"../../internal/config.js";import{numberFormatter as i}from"../../internal/intl.js";import{CHART as s}from"../../internal/messages/chart.js";import{TABLE as m}from"../../internal/messages/table.js";import{ChartLegend as c,ChartShell as h,ChartTable as u,ChartTooltipPanel as p,useVisibility as d}from"../../internal/ChartChrome.js";import{CHART_FONT_SIZE as f,MARK_GAP as v,PLOT_HEIGHT as g,arcPath as y,categoryAt as x,formatCategory as M,formatStatistic as b,polarPoint as j,seriesColor as k,toValues as P}from"../../internal/chart.js";const w={style:"percent",maximumFractionDigits:1};export function MPPieChart({data:I,categories:N,shape:z="pie",startAngle:A=0,hole:B=.62,gap:C=v,center:D,valueLabels:L="none",height:R,format:S,locale:$,label:_,legend:E,tooltip:F,empty:K,labelColor:O="ink",size:U,className:W,style:X,...Y}){const q=a(U),G=o($),H=r(s,G),J=r(m,G),Q=l.useRef(null),T=n(Q),V=l.useId(),Z=l.useMemo(()=>P([{data:I}])[0],[I]),ee=d(l.useMemo(()=>Z.map(()=>({})),[Z])),[te,le]=l.useState(null),ne=l.useCallback(e=>b(e,G,S,!0),[S,G]),oe=l.useMemo(()=>Z.map((e,t)=>M(x(t,N,[Z]),G)),[Z,N,G]),re=l.useMemo(()=>Z.map((e,t)=>e.color??k(t,void 0)),[Z]),ae=Z.map((e,t)=>ee.visible[t]&&null!==e.value&&e.value>0?e.value:0),ie=ae.reduce((e,t)=>e+t,0),se=T.width,me="number"==typeof R?R:void 0===R?g[q]:T.height,ce=f[q],he="semi"===z,ue=se/2,pe=he?me-ce-4:me/2,de=Math.max(0,he?Math.min(se/2,me-ce-8)-2:Math.min(se,me)/2-2),fe="pie"===z?0:de*Math.min(.9,Math.max(0,B)),ve=he?Math.PI:2*Math.PI;let ge=he?-Math.PI/2:A*Math.PI/180;const ye=ae.map(e=>{const t=ge;return ge+=ie>0?e/ie*ve:0,{from:t,to:ge,share:e}}),xe=e=>{const t=ye.map((e,t)=>e.share>0?t:-1).filter(e=>e>=0);if(0===t.length)return;const l=null===te?e>0?-1:0:t.indexOf(te);le(t[(l+e+t.length)%t.length])},Me=e=>ie>0?i(G,w).format(e/ie):"",be=null===te?null:ye[te],je=be&&be.share>0?[{seriesIndex:te,color:re[te],value:be.share,formatted:`${ne(be.share)} · ${Me(be.share)}`,label:Z[te]?.label}]:[],ke=be&&be.share>0?oe[te]:void 0,Pe=be?j(ue,pe,.75*de,(be.from+be.to)/2):null,we=!1===F?{mode:"none"}:!0===F||void 0===F?{}:F,Ie=!1===E?{interactive:!1}:!0===E||void 0===E?{}:E,Ne=!1!==E&&Z.length>1,ze=ie<=0,Ae=[Z];return t(h,{...Y,size:q,className:["mp-pie-chart",W??""].filter(Boolean).join(" "),style:X,plotRef:Q,name:_??H.label,describedBy:ze?void 0:V,interactive:!ze,height:R,legendSide:Ie.side??"bottom",plotProps:{onPointerMove:ze||"none"===we.mode?void 0:e=>le(((e,t)=>{const l=Q.current;if(!l||ie<=0)return null;const n=l.getBoundingClientRect(),o=e-n.left-ue,r=t-n.top-pe,a=Math.hypot(o,r);if(a>de+8||a<fe)return null;const i=Math.atan2(o,-r),s=ye.findIndex(({from:e,to:t,share:l})=>!(l<=0)&&(i-e+4*Math.PI)%(2*Math.PI)<t-e);return-1===s?null:s})(e.clientX,e.clientY)),onPointerLeave:()=>le(null),onKeyDown:ze||"none"===we.mode?void 0:e=>{if("ArrowRight"===e.key||"ArrowDown"===e.key)xe(1);else if("ArrowLeft"===e.key||"ArrowUp"===e.key)xe(-1);else{if("Escape"!==e.key)return;le(null)}e.preventDefault()},onBlur:()=>le(null)},tooltip:Pe&&je.length>0&&"none"!==we.mode?e(p,{heading:ke,items:je,x:Pe.x,y:Pe.y,flip:Pe.x>ue,size:q}):null,legend:Ne?e(c,{names:oe,colors:re,options:Ie,visibility:ee,size:q,colorNames:"series"===O}):null,status:{heading:ke,items:je},table:ze?null:e(u,{id:V,caption:_??H.table,corner:H.category,categories:oe,names:[_??H.table],values:Ae,format:ne,locale:G,empty:J.empty}),children:[ze?e("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:K??J.empty}):se>0&&me>0?e("svg",{width:se,height:me,viewBox:`0 0 ${se} ${me}`,"aria-hidden":"true",className:"block overflow-visible",children:t("g",{className:"mp-pie-chart__slices",children:[ye.map((t,l)=>{if(t.share<=0)return null;return e("path",{d:y(ue,pe,te===l?de+3:de,fe,t.from,t.to),fill:re[l],stroke:"var(--_mp-color-surface)",strokeWidth:Math.max(0,C),strokeLinejoin:"round",opacity:null===ee.hovered||ee.hovered===l?1:.35},l)}),"all"===L?ye.map((t,l)=>{const n=Me(t.share),o=t.to-t.from,r=j(ue,pe,fe>0?(de+fe)/2:.68*de,(t.from+t.to)/2),a=o*(fe>0?(de+fe)/2:.68*de);return t.share<=0||a<n.length*ce*.6+8?null:e("text",{x:r.x,y:r.y,textAnchor:"middle",dominantBaseline:"central",fill:"var(--_mp-color-on-surface)",fontSize:ce,children:n},l)}):null]})}):null,null==D||"pie"===z||ze?null:e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{left:ue-fe,top:pe-fe,width:2*fe,height:he?fe:2*fe},children:D})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useBoxSize as n}from"../../internal/box-size.js";import{useMPLocale as o,useMPMessages as r}from"../../internal/locale.js";import{useMPSize as a}from"../../internal/config.js";import{numberFormatter as i}from"../../internal/intl.js";import{CHART as s}from"../../internal/messages/chart.js";import{TABLE as m}from"../../internal/messages/table.js";import{ChartLegend as h,ChartShell as c,LEGEND_OFF as u,LEGEND_ON as p,ChartTable as d,ChartTooltipPanel as f,useVisibility as v}from"../../internal/ChartChrome.js";import{CHART_FONT_SIZE as g,MARK_GAP as x,PLOT_HEIGHT as y,arcPath as M,categoryAt as b,formatCategory as j,formatStatistic as k,polarPoint as w,seriesColor as P,toValues as I}from"../../internal/chart.js";const N={style:"percent",maximumFractionDigits:1};export function MPPieChart({data:z,categories:A,shape:B="pie",startAngle:C=0,hole:$=.62,gap:D=x,center:L,valueLabels:R="none",height:_,format:S,locale:E,label:F,legend:K,tooltip:O,empty:U,labelColor:W="ink",size:X,className:Y,style:q,...G}){const H=a(X),J=o(E),Q=r(s,J),T=r(m,J),V=l.useRef(null),Z=n(V),ee=l.useId(),te=l.useMemo(()=>I([{data:z}])[0],[z]),le=v(l.useMemo(()=>te.map(()=>({})),[te])),[ne,oe]=l.useState(null),re=l.useCallback(e=>k(e,J,S,!0),[S,J]),ae=l.useMemo(()=>te.map((e,t)=>j(b(t,A,[te]),J)),[te,A,J]),ie=l.useMemo(()=>te.map((e,t)=>e.color??P(t,void 0)),[te]),se=te.map((e,t)=>le.visible[t]&&null!==e.value&&e.value>0?e.value:0),me=se.reduce((e,t)=>e+t,0),he=Z.width,ce="number"==typeof _?_:void 0===_?y[H]:Z.height,ue=g[H],pe="semi"===B,de=he/2,fe=pe?ce-ue-4:ce/2,ve=Math.max(0,pe?Math.min(he/2,ce-ue-8)-2:Math.min(he,ce)/2-2),ge="pie"===B?0:ve*Math.min(.9,Math.max(0,$)),xe=he>0?ge:Math.max(0,pe?ce-ue-10:ce/2-2)*Math.min(.9,Math.max(0,$)),ye=pe?Math.PI:2*Math.PI;let Me=pe?-Math.PI/2:C*Math.PI/180;const be=se.map(e=>{const t=Me;return Me+=me>0?e/me*ye:0,{from:t,to:Me,share:e}}),je=e=>{const t=be.map((e,t)=>e.share>0?t:-1).filter(e=>e>=0);if(0===t.length)return;const l=null===ne?e>0?-1:0:t.indexOf(ne);oe(t[(l+e+t.length)%t.length])},ke=e=>me>0?i(J,N).format(e/me):"",we=null===ne?null:be[ne],Pe=we&&we.share>0?[{seriesIndex:ne,color:ie[ne],value:we.share,formatted:`${re(we.share)} · ${ke(we.share)}`,label:te[ne]?.label}]:[],Ie=we&&we.share>0?ae[ne]:void 0,Ne=we?w(de,fe,.75*ve,(we.from+we.to)/2):null,ze=!1===O?{mode:"none"}:!0===O||void 0===O?{}:O,Ae=!1===K?u:!0===K||void 0===K?p:K,Be=!1!==K&&te.length>1,Ce=me<=0,$e=[te];return t(c,{...G,size:H,className:["mp-pie-chart",Y??""].filter(Boolean).join(" "),style:q,plotRef:V,name:F??Q.label,describedBy:Ce?void 0:ee,interactive:!Ce,height:_,legendSide:Ae.side??"bottom",plotProps:{onPointerMove:Ce||"none"===ze.mode?void 0:e=>oe(((e,t)=>{const l=V.current;if(!l||me<=0)return null;const n=l.getBoundingClientRect(),o=e-n.left-de,r=t-n.top-fe,a=Math.hypot(o,r);if(a>ve+8||a<ge)return null;const i=Math.atan2(o,-r),s=be.findIndex(({from:e,to:t,share:l})=>!(l<=0)&&(i-e+4*Math.PI)%(2*Math.PI)<t-e);return-1===s?null:s})(e.clientX,e.clientY)),onPointerLeave:()=>oe(null),onKeyDown:Ce||"none"===ze.mode?void 0:e=>{if("ArrowRight"===e.key||"ArrowDown"===e.key)je(1);else if("ArrowLeft"===e.key||"ArrowUp"===e.key)je(-1);else{if("Escape"!==e.key)return;oe(null)}e.preventDefault()},onBlur:()=>oe(null)},tooltip:Ne&&Pe.length>0&&"none"!==ze.mode?e(f,{heading:Ie,items:Pe,x:Ne.x,y:Ne.y,flip:Ne.x>de,size:H}):null,legend:Be?e(h,{names:ae,colors:ie,options:Ae,visibility:le,size:H,colorNames:"series"===W}):null,status:{heading:Ie,items:Pe},table:Ce?null:e(d,{id:ee,caption:F??Q.table,corner:Q.category,categories:ae,names:[F??Q.table],values:$e,format:re,locale:J,empty:T.empty}),children:[Ce?e("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:U??T.empty}):he>0&&ce>0?e("svg",{width:he,height:ce,viewBox:`0 0 ${he} ${ce}`,"aria-hidden":"true",className:"block overflow-visible",children:t("g",{className:"mp-pie-chart__slices",children:[be.map((t,l)=>{if(t.share<=0)return null;return e("path",{d:M(de,fe,ne===l?ve+3:ve,ge,t.from,t.to),fill:ie[l],stroke:"var(--_mp-color-surface)",strokeWidth:Math.max(0,D),strokeLinejoin:"round",opacity:null===le.hovered||le.hovered===l?1:.35},l)}),"all"===R?be.map((t,l)=>{const n=ke(t.share),o=t.to-t.from,r=w(de,fe,ge>0?(ve+ge)/2:.68*ve,(t.from+t.to)/2),a=o*(ge>0?(ve+ge)/2:.68*ve);return t.share<=0||a<n.length*ue*.6+8?null:e("text",{x:r.x,y:r.y,textAnchor:"middle",dominantBaseline:"central",fill:"var(--_mp-color-on-surface)",fontSize:ue,children:n},l)}):null]})}):null,null==L||"pie"===B||Ce?null:e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{left:he>0?de-xe:`calc(50% - ${xe}px)`,top:fe-xe,width:2*xe,height:pe?xe:2*xe},children:L})]})}