material-plus-ui 1.8.0 → 1.10.0

package/dist/components/animate-typing/MPAnimateTyping.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{isInfinite as a,useAnimationRun as i,usePrefersReducedMotion as n}from"../../internal/animate.js";import{graphemesOf as s,textOf as o}from"../../internal/text.js";import{VISUALLY_HIDDEN as u}from"../../internal/visually-hidden.js";export const MPAnimateTyping=/*@__PURE__*/r.forwardRef(function({text:c,speed:m=24,hold:l=1400,erase:d=!1,eraseSpeed:f,caret:p=!0,caretChar:h="|",duration:y,delay:x=0,repeat:g=1,paused:T,trigger:j="mount",play:v,once:M=!0,threshold:N=.2,className:w,style:E,children:R,...S},A){const C=i({trigger:j,play:v,once:M,threshold:N,paused:T,infinite:a(g)}),P=n(),b=c??o(R),k=r.useMemo(()=>s(b),[b]),q=k.length,[z,B]=r.useState(0),D=r.useRef(0),F=y&&q>0?y/q:1e3/Math.max(m,1),G=1e3/Math.max(f??2*m,1);return r.useEffect(()=>{D.current=0},[q]),r.useEffect(()=>{if(P||0===q)return void B(q);if(!C.started)return D.current=0,void B(0);if(T)return;let e,t=!1,r=D.current,a=1,i=!1;const n="infinite"===g?1/0:Math.max(1,g);if(r>=q&&1===n)return;const s=()=>{if(!t){if(i)return r-=1,D.current=r,B(r),r<=0&&(i=!1,a+=1),void(e=setTimeout(s,i?G:F));if(r+=1,D.current=r,B(r),r<q)e=setTimeout(s,F);else if(!(a>=n)){if(d)return i=!0,void(e=setTimeout(s,l));a+=1,e=setTimeout(()=>{t||(r=0,D.current=0,B(0),e=setTimeout(s,F))},l)}}};return B(r),e=setTimeout(s,0===r?x:F),()=>{t=!0,clearTimeout(e)}},[C.started,T,P,q,F,G,x,l,d,g]),t("div",{ref:e=>{C.ref(e),"function"==typeof A?A(e):A&&(A.current=e)},className:w,style:E,"data-mp-animation":"typing","data-mp-state":C.state,...C.handlers,...S,children:[e("span",{className:u,children:b}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:[k.slice(0,z).join(""),p?e("span",{className:"mp-typing-caret",children:h}):null]})]})});
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as a from"react";import{useRender as i}from"@base-ui/react/use-render";import{isInfinite as n,useAnimationRun as s,usePrefersReducedMotion as o}from"../../internal/animate.js";import{graphemesOf as m,textOf as u}from"../../internal/text.js";import{VISUALLY_HIDDEN as c}from"../../internal/visually-hidden.js";export const MPAnimateTyping=/*@__PURE__*/a.forwardRef(function({text:d,speed:l=24,hold:p=1400,erase:f=!1,eraseSpeed:h,caret:g=!0,caretChar:x="|",duration:y,delay:T=0,repeat:j=1,paused:v,trigger:M="mount",play:N,once:w=!0,threshold:E=.2,render:R,className:S,style:b,children:A,...C},F){const P=s({trigger:M,play:N,once:w,threshold:E,paused:v,infinite:n(j)}),k=o(),q=d??u(A),z=a.useMemo(()=>m(q),[q]),B=z.length,[D,G]=a.useState(0),H=a.useRef(0),I=y&&B>0?y/B:1e3/Math.max(l,1),J=1e3/Math.max(h??2*l,1);return a.useEffect(()=>{H.current=0},[B]),a.useEffect(()=>{if(k||0===B)return void G(B);if(!P.started)return H.current=0,void G(0);if(v)return;let e,t=!1,r=H.current,a=1,i=!1;const n="infinite"===j?1/0:Math.max(1,j);if(r>=B&&1===n)return;const s=()=>{if(!t){if(i)return r-=1,H.current=r,G(r),r<=0&&(i=!1,a+=1),void(e=setTimeout(s,i?J:I));if(r+=1,H.current=r,G(r),r<B)e=setTimeout(s,I);else if(!(a>=n)){if(f)return i=!0,void(e=setTimeout(s,p));a+=1,e=setTimeout(()=>{t||(r=0,H.current=0,G(0),e=setTimeout(s,I))},p)}}};return G(r),e=setTimeout(s,0===r?T:I),()=>{t=!0,clearTimeout(e)}},[P.started,v,k,B,I,J,T,p,f,j]),i({render:R,ref:[F,P.ref],props:{className:S,style:b,"data-mp-animation":"typing","data-mp-state":P.state,...P.handlers,...C,children:t(r,{children:[e("span",{className:c,children:q}),t("span",{"aria-hidden":"true",className:"whitespace-pre-wrap",children:[z.slice(0,D).join(""),g?e("span",{className:"mp-typing-caret",children:x}):null]})]})}})});

package/dist/components/animate-zoom/MPAnimateZoom.d.ts

@@ -28,7 +28,7 @@ export interface MPAnimateZoomProps extends MPAnimateProps, MPAnimateStaggerProp
 /**
  * Content arriving from the middle of where it will end up.
  *
- * The same arithmetic as [MPAnimateGrow](../motion/animate-grow) at more than
+ * The same arithmetic as [MPAnimateGrow](../transitions/animate-grow) at more than
  * twice the distance, and always about the centre — which is the whole
  * difference. A grow unfolds *from* somewhere; a zoom comes at the reader.
  *
@@ -36,7 +36,7 @@ export interface MPAnimateZoomProps extends MPAnimateProps, MPAnimateStaggerProp
  * confirmation, a result, a number that has just landed. Use it once. An
  * interruption that happens three times on one screen is a layout, and the
  * effect that belongs to a set of things rather than to one is
- * [MPAnimateAppear](../motion/animate-appear).
+ * [MPAnimateAppear](../transitions/animate-appear).
  *
  * There is no `origin`, on purpose. A zoom anchored to a corner is a grow, and
  * the library does not offer two spellings of one idea.

package/dist/components/app-logo/MPAppLogo.d.ts

@@ -113,7 +113,12 @@ export interface MPAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'a'>
      * so a logo that also needs `nofollow` spells all three out.
      */
     rel?: string;
-    /** Anything else the `<img>` needs — `loading`, `decoding`, `crossOrigin`. */
+    /**
+     * Anything else the `<img>` needs — `loading`, `decoding`, `crossOrigin`.
+     * On `bare`, the file's own `width` and `height` too: they reserve the mark's
+     * width from their ratio, so the name beside it does not move when the file
+     * arrives.
+     */
     imageProps?: Omit<React.ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'alt'>;
     /**
      * Renders something other than a `<span>`, or than the `<a>` an `href` makes

package/dist/components/area-chart/MPAreaChart.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type CartesianChartProps } from '../../internal/ChartFrame.js';
-import type { MPChartCurve, MPChartValueLabels } from '../../types.js';
+import type { MPChartCurve, MPChartGaps, MPChartStack, MPChartValueLabels } from '../../types.js';
 export interface MPAreaChartProps extends CartesianChartProps {
     /**
      * How the edge of the band gets from one point to the next.
@@ -15,9 +15,13 @@ export interface MPAreaChartProps extends CartesianChartProps {
      * changes with it: unstacked areas are read against the axis one at a time,
      * and a stack is read as a composition. Only the bottom band and the total
      * are easy to read in a stack, which is the trade it makes.
+     *
+     * `'percent'` fills the plot, so the top edge is flat and what is left is the
+     * composition alone — the shape a share-of-traffic chart wants. A negative
+     * has no share of a whole and is left out of one.
      * @default false
      */
-    stacked?: boolean;
+    stacked?: MPChartStack;
     /**
      * The dots on the joins. `auto` draws them on an unstacked chart with room
      * for them and never on a stack, where a vertex belongs to a boundary rather
@@ -25,6 +29,17 @@ export interface MPAreaChartProps extends CartesianChartProps {
      * @default 'auto'
      */
     markers?: boolean | 'auto';
+    /**
+     * What the band does where a series has no value.
+     *
+     * `break` leaves a hole in the fill as well as in the edge, `connect` closes
+     * the fill across it and draws the joining edge dashed, and `zero` draws the
+     * missing reading at zero — which on a band standing on the axis pinches it
+     * shut. The hover panel and the table still report a gap as a gap in all
+     * three.
+     * @default 'break'
+     */
+    gaps?: MPChartGaps;
     /**
      * Which values are written onto the top edge.
      * @default 'none'
@@ -76,4 +91,4 @@ export interface MPAreaChartProps extends CartesianChartProps {
  * from a series' place in the `series` array, so what changes is the height of
  * the stack and never which band is which.
  */
-export declare function MPAreaChart({ curve, stacked, markers, valueLabels, ...frame }: MPAreaChartProps): React.JSX.Element;
+export declare function MPAreaChart({ curve, stacked, markers, gaps, valueLabels, ...frame }: MPAreaChartProps): React.JSX.Element;

package/dist/components/area-chart/MPAreaChart.js

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

package/dist/components/avatar/MPAvatar.d.ts

@@ -80,6 +80,22 @@ export interface MPAvatarProps extends Omit<React.ComponentPropsWithoutRef<'span
     imageProps?: Omit<React.ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'alt' | 'className'>;
     /** Called as the picture moves between `idle`, `loading`, `loaded` and `error`. */
     onLoadingStatusChange?: (status: MPAvatarLoadingStatus) => void;
+    /**
+     * Draws the `<img>` in the markup and lets it load in place, instead of
+     * fetching the picture in script and drawing it once it has arrived.
+     *
+     * By default the picture is fetched from a script after the page has
+     * hydrated, so it is in no server's markup, the browser's preload scanner
+     * never sees it, and `loading="lazy"` in `imageProps` is ignored — a list of
+     * fifty avatars downloads all fifty the moment the page hydrates, while the
+     * page's own largest picture is still loading. With `keepMounted` each is an
+     * `<img>` from the start, fetched by the browser on its own terms and lazily
+     * when asked to be; the initials show under it until it has loaded.
+     *
+     * Needs `@base-ui/react` 1.8 or later.
+     * @default false
+     */
+    keepMounted?: boolean;
     /**
      * The fallback, drawn instead of the initials. An icon, a logo, a single emoji
      * — whatever stands in for this particular thing when there is no picture of
@@ -92,7 +108,7 @@ export interface MPAvatarProps extends Omit<React.ComponentPropsWithoutRef<'span
      * `transition="fade"` is the whole of what most callers want; the object form
      * takes a duration, an edge to come from, or a scale to start at. Anything
      * that has to run again — on scroll, on hover, under your own control — is an
-     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     * [MPAnimateFade](../transitions/animate-fade) and its siblings.
      */
     transition?: MPTransition;
 }

package/dist/components/avatar/MPAvatar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Avatar as n}from"@base-ui/react/avatar";import{accentSlots as r}from"../../internal/accent.js";import{transitionProps as i}from"../../internal/transition.js";import{CONTROL_SQUARE as s,hasContent as l}from"../../internal/scale.js";import{initialsOf as o}from"../../internal/initials.js";import{VISUALLY_HIDDEN as m}from"../../internal/visually-hidden.js";import{useMPColor as c,useMPSize as d}from"../../internal/config.js";const p={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},u={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},f={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};function x(){return t("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",className:"size-[60%]",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const MPAvatar=/*@__PURE__*/a.forwardRef(function({src:a,srcSet:h,alt:g,name:v,initials:j,shape:y,variant:b,size:N,color:w,delay:_,imageProps:z,onLoadingStatusChange:S,transition:B,className:C,style:M,children:$,...k},A){const L=i(B),P=y??"circle",R=b??"tonal",Z=d(N),F=c(w),I=v?o(v):"",q=g??v,D=l($)?$:(j??I)||e(x,{}),E=l($)||Boolean(j??I),G=["mp-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden","align-middle leading-none font-medium whitespace-nowrap select-none",s[Z],p[Z],"circle"===P?"rounded-mp-full":u[Z],f[R],C??""].filter(Boolean).join(" ");return t(n.Root,{ref:A,"data-mp-size":Z,"data-mp-variant":R,className:`${G}${L.className?` ${L.className}`:""}`,style:{...r(F),...L.style,...M},...k,children:[a?e(n.Image,{src:a,srcSet:h,alt:q??"",onLoadingStatusChange:S,...z,className:["size-full object-cover","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" ")}):null,t(n.Fallback,{delay:a?_:void 0,className:"flex size-full items-center justify-center",children:[q&&E?e("span",{className:m,children:q}):null,e("span",{"aria-hidden":!(!q||!E)||void 0,className:"contents",children:D})]})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Avatar as n}from"@base-ui/react/avatar";import{accentSlots as r}from"../../internal/accent.js";import{transitionProps as i}from"../../internal/transition.js";import{CONTROL_SQUARE as l,hasContent as o}from"../../internal/scale.js";import{initialsOf as s}from"../../internal/initials.js";import{VISUALLY_HIDDEN as m}from"../../internal/visually-hidden.js";import{useMPColor as c,useMPSize as d}from"../../internal/config.js";const p={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},u={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},f={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};function x(){return t("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",className:"size-[60%]",children:[e("path",{d:"M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z"}),e("path",{d:"M12 14.25c-4.28 0-7.75 2.42-7.75 5.4 0 .75.6 1.35 1.35 1.35h12.8c.75 0 1.35-.6 1.35-1.35 0-2.98-3.47-5.4-7.75-5.4Z"})]})}export const MPAvatar=/*@__PURE__*/a.forwardRef(function({src:a,srcSet:g,alt:h,name:v,initials:y,shape:b,variant:j,size:N,color:w,delay:_,imageProps:z,onLoadingStatusChange:M,keepMounted:k=!1,transition:B,className:S,style:C,children:$,...A},L){const P=i(B),R=b??"circle",Z=j??"tonal",F=d(N),I=c(w),q=v?s(v):"",D=h??v,E=o($)?$:(y??q)||e(x,{}),G=o($)||Boolean(y??q),H=["mp-avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden","align-middle leading-none font-medium whitespace-nowrap select-none",l[F],p[F],"circle"===R?"rounded-mp-full":u[F],f[Z],S??""].filter(Boolean).join(" ");return t(n.Root,{ref:L,"data-mp-size":F,"data-mp-variant":Z,className:`${H}${P.className?` ${P.className}`:""}`,style:{...r(I),...P.style,...C},...A,children:[a?e(n.Image,{src:a,srcSet:g,alt:D??"",onLoadingStatusChange:M,...k?{keepMounted:!0}:null,...z,className:["size-full object-cover","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0",k?"absolute inset-0 data-error:invisible data-loading:opacity-0":""].filter(Boolean).join(" ")}):null,t(n.Fallback,{delay:a?_:void 0,className:"flex size-full items-center justify-center",children:[D&&G?e("span",{className:m,children:D}):null,e("span",{"aria-hidden":!(!D||!G)||void 0,className:"contents",children:E})]})]})});

package/dist/components/bar-chart/MPBarChart.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type CartesianChartProps } from '../../internal/ChartFrame.js';
-import type { MPChartValueLabels } from '../../types.js';
+import type { MPChartStack, MPChartValueLabels } from '../../types.js';
 export interface MPBarChartProps extends CartesianChartProps {
     /**
      * Stacks the series into one bar per category instead of standing them side
@@ -10,9 +10,13 @@ export interface MPBarChartProps extends CartesianChartProps {
      * shows what makes them up. Both cannot be true at once, and picking the
      * wrong one is the most common way a bar chart answers a question nobody
      * asked.
+     *
+     * `'percent'` fills every bar, so what is compared is the composition and the
+     * totals leave the picture entirely. A negative has no share of a whole and
+     * is left out of one, the way `MPPieChart` leaves it out.
      * @default false
      */
-    stacked?: boolean;
+    stacked?: MPChartStack;
     /**
      * Turns the chart on its side, so the bars run left to right.
      *
@@ -67,8 +71,14 @@ export interface MPBarChartProps extends CartesianChartProps {
  * ## Turn it sideways for long names
  *
  * `horizontal` gives every category a row of its own, which is what a set of
- * names like "Onboarding flow" needs. The alternative is labels cut to a slot
- * the width of one bar, or an axis of words rotated forty-five degrees, which
- * is unreadable at a glance and takes a band of the plot to be unreadable in.
+ * names like "Onboarding flow" wants: a name in a row reads left to right at
+ * full size, and the bars beside it are still lengths being compared.
+ *
+ * Upright, the axis turns the names instead — 45° while that fits and upright
+ * past it — rather than cutting them to a slot the width of one bar. It is the
+ * better of the two answers a vertical chart has, and it is still the worse of
+ * the two on this page: a turned name is read slower than a level one. Reach
+ * for `horizontal` when every name is long, and let `xAxis.tickLabels` handle
+ * the chart where one of them is.
  */
 export declare function MPBarChart({ stacked, horizontal, valueLabels, ...frame }: MPBarChartProps): React.JSX.Element;

package/dist/components/bar-chart/MPBarChart.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as l from"react";import{CartesianFrame as r}from"../../internal/ChartFrame.js";import{useMPLocale as n}from"../../internal/locale.js";import{useMPSize as a}from"../../internal/config.js";import{BAR_BAND_RATIO as o,BAR_MAX_THICKNESS as i,BAR_RADIUS as u,CHART_FONT_SIZE as s,MARK_GAP as m,barPath as c,formatStatistic as h,textWidth as f,toValues as d}from"../../internal/chart.js";export function MPBarChart({stacked:x=!1,horizontal:p=!1,valueLabels:v="none",...b}){const y=a(b.size),M=n(b.locale),g=l.useMemo(()=>{const t=s[y];if("none"===v||x)return 0;if(!p)return t+8;return d(b.series).flat().reduce((e,l)=>null===l.value?e:Math.max(e,f(String(l.label??h(l.value,M,b.format,!0)),t)),0)+10},[v,x,p,y,M,b.series,b.format]);return t(r,{...b,inset:!1,stacked:x,horizontal:p,bandRatio:o,includeZero:!0,headroom:g,children:({plot:l,values:r,visible:n,colors:a,band:o,valuePx:h,categoryPx:f,zeroPx:d,hovered:b,activeIndex:M,format:g})=>{const j=r.reduce((t,e)=>Math.max(t,e.length),0),k=r.map((t,e)=>e).filter(t=>n[t]),z=x?o.band:o.band/Math.max(1,k.length),_=Math.max(1,Math.min(z-(x?0:m),i[y]));return e("g",{className:"mp-bar-chart__marks",children:[r.map((i,d)=>{if(!n[d])return null;const w=a[d],P=null!==b&&b!==d,A=k.indexOf(d);return e("g",{opacity:P?.25:1,children:[Array.from({length:j},(e,n)=>{const a=i[n]?.value??null;if(null===a)return null;let s=0,v=d;if(x){let t=0,e=0;for(const l of k){const o=r[l][n]?.value??null;null!==o&&(l===d&&(s=o>=0?t:e),o>=0?t+=o:e+=o,o>=0==a>=0&&(v=l))}}const b=h(s),y=h(a+(x?s:0)),g=x&&0!==s?b+(y>b?m:-m):b,j=Math.abs(y-g);if(j<=0||y>b!=y>g)return null;const P=(p?l.top:l.left)+f(n)-o.band/2+(x?0:A*z)+(z-_)/2,B=d!==v?"none":p?a>=0?"right":"left":a>=0?"top":"bottom",C=p?{x:Math.min(g,y),y:P,w:j,h:_}:{x:P,y:Math.min(g,y),w:_,h:j},S=M===n;return t("path",{d:c(C.x,C.y,C.w,C.h,u,B),fill:w,opacity:null===M||S?1:.55},n)}),"none"===v||x?null:i.map((e,r)=>{if(null===e.value)return null;const n=i.map(t=>t.value).filter(t=>null!==t);if(!("all"===v||"last"===v&&r===j-1||"extremes"===v&&(e.value===Math.min(...n)||e.value===Math.max(...n))))return null;const a=h(e.value),u=(p?l.top:l.left)+f(r)-o.band/2+A*z+z/2,m=e.value>=0?-6:6;return t("text",{x:p?a-m:u,y:p?u:a+m,textAnchor:p?e.value>=0?"start":"end":"middle",dominantBaseline:p?"central":"auto",fill:"var(--_mp-color-on-surface)",fontSize:s[y]-1,children:e.label??g(e.value)},r)})]},d)}),t("line",p?{x1:d,x2:d,y1:l.top,y2:l.top+l.height,stroke:"var(--_mp-color-outline)",strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:d,y2:d,stroke:"var(--_mp-color-outline)",strokeWidth:1})]})}})}
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as n from"react";import{CartesianFrame as r}from"../../internal/ChartFrame.js";import{useMPLocale as l}from"../../internal/locale.js";import{useMPSize as a}from"../../internal/config.js";import{BAR_BAND_RATIO as o,BAR_MAX_THICKNESS as i,BAR_RADIUS as u,CHART_FONT_SIZE as s,MARK_GAP as c,barPath as m,formatStatistic as h,textWidth as f,toValues as d,valueLabelTest as p}from"../../internal/chart.js";export function MPBarChart({stacked:x=!1,horizontal:v=!1,valueLabels:b="none",...y}){const g=a(y.size),M=l(y.locale),k=n.useMemo(()=>{const t=s[g];if("none"===b||x)return 0;if(!v)return t+8;return d(y.series).flat().reduce((e,n)=>null===n.value?e:Math.max(e,f(String(n.label??h(n.value,M,y.format,!0)),t)),0)+10},[b,x,v,g,M,y.series,y.format]);return t(r,{...y,inset:!1,stacked:x,horizontal:v,bandRatio:o,includeZero:!0,headroom:k,children:({plot:n,values:r,visible:l,colors:a,labelInk:o,band:h,valuePx:f,categoryPx:d,zeroPx:y,hovered:M,activeIndex:k,format:j})=>{const z=r.reduce((t,e)=>Math.max(t,e.length),0),w=r.map((t,e)=>e).filter(t=>l[t]),P="percent"===x?Array.from({length:z},(t,e)=>w.reduce((t,n)=>{const l=r[n][e]?.value??0;return t+(l>0?l:0)},0)):null,_=(t,e)=>{const n=r[t][e]?.value??null;return null===n||null===P?n:n>=0&&P[e]>0?n/P[e]:null},A=x?h.band:h.band/Math.max(1,w.length),B=Math.max(1,Math.min(A-(x?0:c),i[g]));return e("g",{className:"mp-bar-chart__marks",children:[r.map((r,i)=>{if(!l[i])return null;const y=a[i],P=null!==M&&M!==i,C=p(r,b,z-1),I=w.indexOf(i);return e("g",{opacity:P?.25:1,children:[Array.from({length:z},(e,r)=>{const l=_(i,r);if(null===l)return null;let a=0,o=i;if(x){let t=0,e=0;for(const n of w){const u=_(n,r);null!==u&&(n===i&&(a=u>=0?t:e),u>=0?t+=u:e+=u,u>=0==l>=0&&(o=n))}}const s=f(a),p=f(l+(x?a:0)),b=x&&0!==a?s+(p>s?c:-c):s,g=Math.abs(p-b);if(g<=0||p>s!=p>b)return null;const M=(v?n.top:n.left)+d(r)-h.band/2+(x?0:I*A)+(A-B)/2,j=i!==o?"none":v?l>=0?"right":"left":l>=0?"top":"bottom",z=v?{x:Math.min(b,p),y:M,w:g,h:B}:{x:M,y:Math.min(b,p),w:B,h:g},P=k===r;return t("path",{d:m(z.x,z.y,z.w,z.h,u,j),fill:y,opacity:null===k||P?1:.55},r)}),"none"===b||x?null:r.map((e,r)=>{if(null===e.value)return null;if(!C(r))return null;const l=f(e.value),a=(v?n.top:n.left)+d(r)-h.band/2+I*A+A/2,u=e.value>=0?-6:6;return t("text",{x:v?l-u:a,y:v?a:l+u,textAnchor:v?e.value>=0?"start":"end":"middle",dominantBaseline:v?"central":"auto",fill:o(i),fontSize:s[g]-1,children:e.label??j(e.value)},r)})]},i)}),t("line",v?{x1:y,x2:y,y1:n.top,y2:n.top+n.height,stroke:"var(--_mp-color-outline)",strokeWidth:1}:{x1:n.left,x2:n.left+n.width,y1:y,y2:y,stroke:"var(--_mp-color-outline)",strokeWidth:1})]})}})}

package/dist/components/blockquote/MPBlockquote.d.ts

@@ -54,7 +54,7 @@ export interface MPBlockquoteProps extends Omit<React.ComponentPropsWithoutRef<'
      * `transition="fade"` is the whole of what most callers want; the object form
      * takes a duration, an edge to come from, or a scale to start at. Anything
      * that has to run again — on scroll, on hover, under your own control — is an
-     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     * [MPAnimateFade](../transitions/animate-fade) and its siblings.
      */
     transition?: MPTransition;
 }

package/dist/components/box/MPBox.d.ts

@@ -54,7 +54,7 @@ export interface MPBoxProps extends React.ComponentPropsWithoutRef<'div'> {
      * `transition="fade"` is the whole of what most callers want; the object form
      * takes a duration, an edge to come from, or a scale to start at. Anything
      * that has to run again — on scroll, on hover, under your own control — is an
-     * [MPAnimateFade](../motion/animate-fade) and its siblings, and wrapping is
+     * [MPAnimateFade](../transitions/animate-fade) and its siblings, and wrapping is
      * the right answer there.
      */
     transition?: MPTransition;

package/dist/components/breadcrumb/MPBreadcrumb.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { useRender } from '@base-ui/react/use-render';
 import type { MPColor, MPSize } from '../../types.js';
 /**
  * What is drawn between two steps of the trail.
@@ -88,6 +89,13 @@ export interface MPBreadcrumbProps extends Omit<React.ComponentPropsWithoutRef<'
 export interface MPBreadcrumbItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
     /** Renders the step as a link. */
     href?: string;
+    /**
+     * Renders the step's `<a>` as something else — a router's `Link`, so a press is a
+     * client-side navigation and the page is prefetched. `href` and the classes
+     * still go through, so `render={<NextLink />}` needs the URL written once.
+     * Ignored where there is no link to replace.
+     */
+    render?: useRender.RenderProp;
     /** Fires when the step is pressed. Renders it as a button when there is no `href`. */
     onClick?: React.MouseEventHandler<HTMLElement>;
     /** Content before the label — a home glyph, a repository avatar. */

package/dist/components/breadcrumb/MPBreadcrumb.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as r from"react";import{MPIcon as o}from"../icon/MPIcon.js";import{ArrowRightIcon as i,ChevronRightIcon as a,MoreIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{BREADCRUMB as d}from"../../internal/messages/breadcrumb.js";import{CONTROL_GAP as u,hasContent as p,PROSE_TEXT as f}from"../../internal/scale.js";import{useMPColor as h,useMPSize as x}from"../../internal/config.js";const b=/*@__PURE__*/r.createContext({size:"md",last:!1,position:null}),v={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},g={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const N=["chevron","arrow","slash","dot"];export const MPBreadcrumb=/*@__PURE__*/r.forwardRef(function({size:t,color:u,separator:p="chevron",maxItems:g,itemsBeforeCollapse:j=1,itemsAfterCollapse:y=1,expandable:k=!0,label:z,expandLabel:B,locale:C,structuredData:w=!1,className:P,style:M,children:I,...L},S){const _=x(t),A=h(u),E=m(d,c(C)),[F,R]=r.useState(!1),T=r.Children.toArray(I).filter(r.isValidElement),D=T.length,V=T.some(e=>!0===e.props.current),$=!F&&!w&&void 0!==g&&D>Math.max(g,1)&&D-j-y>1?[...T.slice(0,Math.max(0,j)),null,...T.slice(D-Math.max(0,y))]:T,q="string"==typeof(G=p)&&N.includes(G)?function(n){switch(n){case"chevron":return e(o,{icon:a,size:"1.1em",className:"rtl:rotate-180"});case"arrow":return e(o,{icon:i,size:"1em",className:"rtl:rotate-180"});case"slash":return e("span",{"aria-hidden":"true",children:"/"});case"dot":return e("span",{"aria-hidden":"true",children:"·"});default:return null}}(p):p;var G;const H=r.useMemo(()=>Array.from({length:$.length},(e,n)=>({size:_,last:!V&&n===$.length-1,position:w?n+1:null})),[_,V,$.length,w]),J=["rounded-mp-xs text-mp-on-surface-variant inline-flex items-center px-0.5","appearance-none border-0 bg-transparent font-[inherit]","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",k?["cursor-pointer hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" ");return e("nav",{ref:S,"aria-label":z??E.label,"data-mp-size":_,className:["mp-breadcrumb flex",f[_],P??""].filter(Boolean).join(" "),style:{...l(A),...M},...L,children:e("ol",{role:"list",itemScope:w||void 0,itemType:w?"https://schema.org/BreadcrumbList":void 0,className:`m-0 flex list-none flex-wrap items-center p-0 ${v[_]}`,children:$.map((t,i)=>n(r.Fragment,{children:[i>0?e("li",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center select-none",children:q}):null,t?e(b.Provider,{value:H[i],children:t}):e("li",{className:"flex shrink-0 items-center",children:k?e("button",{type:"button",className:J,"aria-label":B??E.expand,onClick:()=>R(!0),children:e(o,{icon:s,size:"1.1em"})}):e("span",{className:J,"aria-hidden":"true",children:e(o,{icon:s,size:"1.1em"})})})]},t?t.key??i:"fold"))})})});export const MPBreadcrumbItem=/*@__PURE__*/r.forwardRef(function({href:o,onClick:i,startIcon:a,endIcon:s,current:l,disabled:c=!1,className:m,children:d,...f},h){const{size:x,last:v,position:N}=r.useContext(b),j=l??v,y=Boolean(o||i)&&!j&&!c,k=null!==N,z=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",u[x],g[x],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",c?"text-mp-on-surface/38 cursor-default":j?"text-mp-on-surface font-medium":y?["text-mp-on-surface-variant cursor-pointer","hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):"text-mp-on-surface-variant"].filter(Boolean).join(" "),B=n(t,{children:[p(a)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a}):null,e("span",{className:"truncate",itemProp:k?"name":void 0,children:d}),p(s)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:s}):null]});return n("li",{ref:h,itemProp:k?"itemListElement":void 0,itemScope:k||void 0,itemType:k?"https://schema.org/ListItem":void 0,className:["flex min-w-0 items-center",m??""].filter(Boolean).join(" "),...f,children:[k?e("meta",{itemProp:"position",content:String(N)}):null,y&&o?e("a",{href:o,itemProp:k?"item":void 0,className:z,onClick:i,children:B}):y?e("button",{type:"button",className:z,onClick:i,children:B}):e("span",{className:z,"aria-current":j?"page":void 0,"aria-disabled":c||void 0,children:B})]})});
+import{jsx as e,jsxs as n,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{RenderedLink as o}from"../../internal/RenderedLink.js";import{MPIcon as i}from"../icon/MPIcon.js";import{ArrowRightIcon as a,ChevronRightIcon as s,MoreIcon as l}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{useMPLocale as m,useMPMessages as d}from"../../internal/locale.js";import{BREADCRUMB as p}from"../../internal/messages/breadcrumb.js";import{CONTROL_GAP as u,hasContent as h,PROSE_TEXT as f}from"../../internal/scale.js";import{useMPColor as x,useMPSize as b}from"../../internal/config.js";const v=/*@__PURE__*/t.createContext({size:"md",last:!1,position:null,folded:!1}),g={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},j={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-xs",lg:"rounded-mp-sm",xl:"rounded-mp-sm"};const N=["chevron","arrow","slash","dot"];export const MPBreadcrumb=/*@__PURE__*/t.forwardRef(function({size:r,color:o,separator:u="chevron",maxItems:h,itemsBeforeCollapse:j=1,itemsAfterCollapse:y=1,expandable:k=!0,label:z,expandLabel:B,locale:C,structuredData:w=!1,className:P,style:M,children:I,...L},S){const _=b(r),A=x(o),R=d(p,m(C)),[E,F]=t.useState(!1),T=t.Children.toArray(I).filter(t.isValidElement),D=T.length,V=T.some(e=>!0===e.props.current),$=!E&&!w&&void 0!==h&&D>Math.max(h,1)&&D-j-y>1,q=Math.max(0,j),G=D-Math.max(0,y),H=$?[...T.slice(0,q),null,...T.slice(q,G),...T.slice(G)]:T,J=$?q+1:-1,K=$?G+1:-1,O="string"==typeof(Q=u)&&N.includes(Q)?function(n){switch(n){case"chevron":return e(i,{icon:s,size:"1.1em",className:"rtl:rotate-180"});case"arrow":return e(i,{icon:a,size:"1em",className:"rtl:rotate-180"});case"slash":return e("span",{"aria-hidden":"true",children:"/"});case"dot":return e("span",{"aria-hidden":"true",children:"·"});default:return null}}(u):u;var Q;const U=t.useMemo(()=>Array.from({length:H.length},(e,n)=>{const r=n>=J&&n<K;return{size:_,last:!V&&!r&&n===H.length-1,position:w?n+1:null,folded:r}}),[_,V,H.length,w,J,K]),W=["rounded-mp-xs text-mp-on-surface-variant inline-flex items-center px-0.5","appearance-none border-0 bg-transparent font-[inherit]","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",k?["cursor-pointer hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):""].filter(Boolean).join(" ");return e("nav",{ref:S,"aria-label":z??R.label,"data-mp-size":_,className:["mp-breadcrumb flex",f[_],P??""].filter(Boolean).join(" "),style:{...c(A),...M},...L,children:e("ol",{role:"list",itemScope:w||void 0,itemType:w?"https://schema.org/BreadcrumbList":void 0,className:`m-0 flex list-none flex-wrap items-center p-0 ${g[_]}`,children:H.map((r,o)=>n(t.Fragment,{children:[o>0?e("li",{"aria-hidden":"true",hidden:U[o].folded||void 0,className:"text-mp-on-surface-variant flex shrink-0 items-center select-none [&[hidden]]:hidden",children:O}):null,r?e(v.Provider,{value:U[o],children:r}):e("li",{className:"flex shrink-0 items-center",children:k?e("button",{type:"button",className:W,"aria-label":B??R.expand,onClick:()=>F(!0),children:e(i,{icon:l,size:"1.1em"})}):e("span",{className:W,"aria-hidden":"true",children:e(i,{icon:l,size:"1.1em"})})})]},r?r.key??o:"fold"))})})});export const MPBreadcrumbItem=/*@__PURE__*/t.forwardRef(function({href:i,onClick:a,render:s,startIcon:l,endIcon:c,current:m,disabled:d=!1,className:p,children:f,...x},b){const{size:g,last:N,position:y,folded:k}=t.useContext(v),z=m??N,B=Boolean(i||a)&&!z&&!d,C=null!==y,w=["inline-flex min-w-0 items-center px-1 no-underline","appearance-none border-0 bg-transparent font-[inherit] text-[inherit]",u[g],j[g],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",d?"text-mp-on-surface/38 cursor-default":z?"text-mp-on-surface font-medium":B?["text-mp-on-surface-variant cursor-pointer","hover:bg-(--_mp-accent-container) hover:text-(--_mp-on-accent-container)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "):"text-mp-on-surface-variant"].filter(Boolean).join(" "),P=n(r,{children:[h(l)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:l}):null,e("span",{className:"truncate",itemProp:C?"name":void 0,children:f}),h(c)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:c}):null]});return n("li",{ref:b,itemProp:C?"itemListElement":void 0,itemScope:C||void 0,itemType:C?"https://schema.org/ListItem":void 0,hidden:k||void 0,className:["flex min-w-0 items-center [&[hidden]]:hidden",p??""].filter(Boolean).join(" "),...x,children:[C?e("meta",{itemProp:"position",content:String(y)}):null,B&&i?e(o,{render:s,props:{href:i,itemProp:C?"item":void 0,className:w,onClick:a,children:P}}):B?e("button",{type:"button",className:w,onClick:a,children:P}):e("span",{className:w,"aria-current":z?"page":void 0,"aria-disabled":d||void 0,children:P})]})});

package/dist/components/carousel/MPCarousel.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{MPIconButton as n}from"../icon-button/MPIconButton.js";import{MPIcon as o}from"../icon/MPIcon.js";import{ChevronLeftIcon as a,ChevronRightIcon as i}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{fillMessage as l}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as u}from"../../internal/locale.js";import{CAROUSEL as d}from"../../internal/messages/carousel.js";import{CONTROL_ICON as m}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";import{VISUALLY_HIDDEN as p}from"../../internal/visually-hidden.js";import{useMPColor as b,useMPSize as h}from"../../internal/config.js";const v=/*@__PURE__*/["pointer-events-auto","not-disabled:bg-(--_mp-accent)/85","not-disabled:hover:bg-(--_mp-accent)","not-disabled:focus-visible:bg-(--_mp-accent)","not-disabled:active:bg-(--_mp-accent)","transition-[background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none"].join(" "),g={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},w={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const MPCarousel=/*@__PURE__*/t.forwardRef(function({value:x,defaultValue:j=0,onValueChange:N,loop:y=!0,autoPlay:M=!1,interval:k=5e3,arrows:R=!0,indicators:C=!0,variant:z="outlined",size:I,color:P,label:S,previousLabel:L,nextLabel:_,slideLabel:E,locale:T,className:$,style:A,children:B,...F},V){const W=h(I),q=b(P),D=u(d,c(T)),G=S??D.label,H=E??((e,r)=>l(D.slide,{index:String(e),total:String(r)})),J=t.Children.toArray(B),K=J.length,[O,Q]=t.useState(j),U=Math.min(Math.max(x??O,0),Math.max(K-1,0)),X=t.useRef(null),Y=t.useRef([]),Z=t.useRef(!1),ee=t.useRef(!1),re=t.useRef(!1),[te,ne]=t.useState(!1),[oe,ae]=t.useState(!1),ie=te||oe,se=t.useRef(U),le=t.useRef(N);se.current=U,le.current=N;const ce=t.useCallback((e,r=!1)=>{if(0===K)return;const t=y?(e%K+K)%K:Math.min(Math.max(e,0),K-1);Z.current=r,void 0===x&&Q(t),t!==se.current&&le.current?.(t)},[K,y,x]);t.useEffect(()=>{if(Z.current)return void(Z.current=!1);if(!ee.current)return void(ee.current=!0);Y.current[U]?.scrollIntoView({block:"nearest",inline:"start"}),re.current=!0;const e=window.setTimeout(()=>{re.current=!1},700);return()=>window.clearTimeout(e)},[U]),t.useEffect(()=>{if(!M||ie||K<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{document.hidden||ce(se.current+1)},k);return()=>window.clearInterval(e)},[M,ie,K,k,ce]);const ue=t.useRef(0);t.useEffect(()=>()=>cancelAnimationFrame(ue.current),[]);const de=U<=0,me=U>=K-1;return r("div",{ref:V,role:"region","aria-roledescription":"carousel","aria-label":G,"data-mp-size":W,"data-mp-variant":z,className:["mp-carousel flex w-full flex-col",$??""].filter(Boolean).join(" "),style:{...s(q),...A},onPointerEnter:()=>ne(!0),onPointerLeave:()=>ne(!1),onFocus:()=>ae(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||ae(!1)},...F,children:[r("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",f[z],"text-mp-on-surface"].join(" "),children:[e("div",{ref:X,tabIndex:0,role:"group","aria-label":G,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onScroll:()=>{ue.current||(ue.current=requestAnimationFrame(()=>{ue.current=0;const e=X.current;if(!e||0===e.clientWidth||re.current)return;const r=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);r!==se.current&&r>=0&&r<K&&ce(r,!0)}))},children:J.map((r,t)=>e("div",{ref:e=>{Y.current[t]=e,Y.current.length=K},role:"group","aria-roledescription":"slide","aria-label":H(t+1,K),className:"w-full shrink-0 grow-0 basis-full snap-start",children:r},t))}),R&&K>1?r("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${g[W]}`,children:[e(n,{variant:"filled",size:W,color:q,label:L??D.previous,disabled:!y&&de,className:v,icon:e(o,{icon:a,size:m[W],className:"rtl:rotate-180"}),onClick:()=>ce(U-1)}),e("span",{className:"flex-1"}),e(n,{variant:"filled",size:W,color:q,label:_??D.next,disabled:!y&&me,className:v,icon:e(o,{icon:i,size:m[W],className:"rtl:rotate-180"}),onClick:()=>ce(U+1)})]}):null]}),C&&K>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${w[W].gap}`,children:J.map((r,t)=>e("button",{type:"button","aria-label":H(t+1,K),"aria-current":t===U?"true":void 0,className:["rounded-mp-full cursor-pointer appearance-none border-0 p-0","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",t===U?`${w[W].current} bg-(--_mp-accent)`:`${w[W].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>ce(t)},t))}):null,e("span",{className:p,"aria-live":M?"off":"polite",children:K>0?H(U+1,K):""})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{watchIntersection as n}from"../../internal/intersection.js";import{MPIconButton as o}from"../icon-button/MPIconButton.js";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronLeftIcon as a,ChevronRightIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{fillMessage as c}from"../../internal/i18n.js";import{useMPLocale as u,useMPMessages as d}from"../../internal/locale.js";import{CAROUSEL as m}from"../../internal/messages/carousel.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{CONTAINER_SURFACE as p}from"../../internal/surface.js";import{VISUALLY_HIDDEN as h}from"../../internal/visually-hidden.js";import{useMPColor as b,useMPSize as v}from"../../internal/config.js";const g=/*@__PURE__*/["pointer-events-auto","not-disabled:bg-(--_mp-accent)/85","not-disabled:hover:bg-(--_mp-accent)","not-disabled:focus-visible:bg-(--_mp-accent)","not-disabled:active:bg-(--_mp-accent)","transition-[background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none"].join(" "),w={xs:"start-1 end-1",sm:"start-1.5 end-1.5",md:"start-2 end-2",lg:"start-3 end-3",xl:"start-4 end-4"},x={xs:{rest:"h-1 w-1",current:"h-1 w-3",gap:"gap-1"},sm:{rest:"h-1 w-1",current:"h-1 w-3.5",gap:"gap-1"},md:{rest:"h-1.5 w-1.5",current:"h-1.5 w-4",gap:"gap-1.5"},lg:{rest:"h-1.5 w-1.5",current:"h-1.5 w-5",gap:"gap-2"},xl:{rest:"h-2 w-2",current:"h-2 w-6",gap:"gap-2"}};export const MPCarousel=/*@__PURE__*/r.forwardRef(function({value:j,defaultValue:y=0,onValueChange:N,loop:M=!0,autoPlay:R=!1,interval:k=5e3,arrows:C=!0,indicators:I=!0,variant:S="outlined",size:z,color:P,label:T,previousLabel:E,nextLabel:L,slideLabel:_,locale:B,className:W,style:$,children:A,...F},V){const q=v(z),H=b(P),O=d(m,u(B)),D=T??O.label,G=_??((e,t)=>c(O.slide,{index:String(e),total:String(t)})),J=r.Children.toArray(A),K=J.length,[Q,U]=r.useState(y),X=Math.min(Math.max(j??Q,0),Math.max(K-1,0)),Y=r.useRef(null),Z=r.useRef([]),ee=r.useRef(!1),te=r.useRef(!1),re=r.useRef(!1),[ne,oe]=r.useState(!1),[ie,ae]=r.useState(!1),se=ne||ie,le=r.useRef(X),ce=r.useRef(N);le.current=X,ce.current=N;const ue=r.useCallback((e,t=!1)=>{if(0===K)return;const r=M?(e%K+K)%K:Math.min(Math.max(e,0),K-1);ee.current=t,void 0===j&&U(r),r!==le.current&&ce.current?.(r)},[K,M,j]);r.useEffect(()=>{if(ee.current)return void(ee.current=!1);const e=Y.current;if(!e)return;const t=("rtl"===getComputedStyle(e).direction?-1:1)*X*e.clientWidth;if(!te.current)return te.current=!0,void(0!==X&&e.scrollTo({left:t,behavior:"instant"}));const r=e.getBoundingClientRect(),n=r.bottom<=0||r.right<=0||r.top>=window.innerHeight||r.left>=window.innerWidth;e.scrollTo(n?{left:t,behavior:"instant"}:{left:t}),re.current=!0;const o=window.setTimeout(()=>{re.current=!1},700);return()=>window.clearTimeout(o)},[X]);const de=r.useRef(!0);r.useEffect(()=>{const e=Y.current;if(!R||!e||"undefined"==typeof IntersectionObserver)return;de.current=!1;const t=n(e,e=>{de.current=e.isIntersecting});return()=>{t(),de.current=!0}},[R]),r.useEffect(()=>{if(!R||se||K<2)return;if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const e=window.setInterval(()=>{!document.hidden&&de.current&&ue(le.current+1)},k);return()=>window.clearInterval(e)},[R,se,K,k,ue]);const me=r.useRef(0);r.useEffect(()=>()=>cancelAnimationFrame(me.current),[]);const fe=X<=0,pe=X>=K-1;return t("div",{ref:V,role:"region","aria-roledescription":"carousel","aria-label":D,"data-mp-size":q,"data-mp-variant":S,className:["mp-carousel flex w-full flex-col",W??""].filter(Boolean).join(" "),style:{...l(H),...$},onPointerEnter:()=>oe(!0),onPointerLeave:()=>oe(!1),onFocus:()=>ae(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||ae(!1)},...F,children:[t("div",{className:["relative min-w-0 overflow-hidden","rounded-mp-md box-border",p[S],"text-mp-on-surface"].join(" "),children:[e("div",{ref:Y,tabIndex:0,role:"group","aria-label":D,className:["flex min-w-0 snap-x snap-mandatory overflow-x-auto scroll-smooth","motion-reduce:scroll-auto","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),onScroll:()=>{me.current||(me.current=requestAnimationFrame(()=>{me.current=0;const e=Y.current;if(!e||0===e.clientWidth||re.current)return;const t=Math.round(Math.abs(e.scrollLeft)/e.clientWidth);t!==le.current&&t>=0&&t<K&&ue(t,!0)}))},children:J.map((t,r)=>e("div",{ref:e=>{Z.current[r]=e,Z.current.length=K},role:"group","aria-roledescription":"slide","aria-label":G(r+1,K),className:"w-full shrink-0 grow-0 basis-full snap-start",children:t},r))}),C&&K>1?t("div",{className:`pointer-events-none absolute inset-y-0 flex items-center ${w[q]}`,children:[e(o,{variant:"filled",size:q,color:H,label:E??O.previous,disabled:!M&&fe,className:g,icon:e(i,{icon:a,size:f[q],className:"rtl:rotate-180"}),onClick:()=>ue(X-1)}),e("span",{className:"flex-1"}),e(o,{variant:"filled",size:q,color:H,label:L??O.next,disabled:!M&&pe,className:g,icon:e(i,{icon:s,size:f[q],className:"rtl:rotate-180"}),onClick:()=>ue(X+1)})]}):null]}),I&&K>1?e("div",{className:`flex shrink-0 items-center justify-center pt-2 ${x[q].gap}`,children:J.map((t,r)=>e("button",{type:"button","aria-label":G(r+1,K),"aria-current":r===X?"true":void 0,className:["rounded-mp-full cursor-pointer appearance-none border-0 p-0","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",r===X?`${x[q].current} bg-(--_mp-accent)`:`${x[q].rest} bg-mp-outline-variant hover:bg-mp-outline`].join(" "),onClick:()=>ue(r)},r))}):null,e("span",{className:h,"aria-live":R?"off":"polite",children:K>0?G(X+1,K):""})]})});

package/dist/components/checkbox/MPCheckbox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{MARK_MOTION as l}from"../../internal/mark.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as m}from"../../internal/SupportingText.js";import{PROSE_TEXT as p,hasContent as h}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=/*@__PURE__*/a.forwardRef(function({checked:x,defaultChecked:g,onCheckedChange:k,indeterminate:j=!1,label:y,description:z,errorMessage:N,size:_,color:v,required:C=!1,disabled:M=!1,readOnly:w=!1,name:I,value:R,id:q,className:L,style:O},P){const S=f(_),B=u(v),F=h(N),T=F?"error":B,W=b[S],$=a.useId(),A=q??$;return e(n.Root,{className:["mp-checkbox inline-block max-w-full align-top",L??""].filter(Boolean).join(" "),disabled:M,invalid:F,"data-mp-size":S,style:{...c(T),...O},children:r("div",{className:["flex items-start gap-3",p[S]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(t.Root,{ref:P,id:A,name:I,value:R,checked:x,defaultChecked:g,indeterminate:j,required:C,disabled:M,readOnly:w,onCheckedChange:e=>k?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",W.box,M?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[w?"cursor-default":"cursor-pointer",F?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_mp-on-accent)"].join(" ")].join(" "),children:[M?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",W.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(t.Indicator,{className:`flex items-center justify-center ${l}`,children:e(o,{icon:j?s:i,size:W.glyph,strokeWidth:3})})]})}),h(y)||h(z)||F?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[h(y)?r(n.Label,{htmlFor:A,className:["leading-[1.4]",M?"text-mp-on-surface/38 cursor-default":w?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[y,C?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(m,{description:z,errorMessage:N})]}):null]})})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Checkbox as n}from"@base-ui/react/checkbox";import{Field as t}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{MARK_MOTION as l}from"../../internal/mark.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as m}from"../../internal/SupportingText.js";import{PROSE_TEXT as p,hasContent as h}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=/*@__PURE__*/a.forwardRef(function({checked:x,defaultChecked:g,onCheckedChange:k,indeterminate:j=!1,label:y,description:z,errorMessage:N,size:_,color:v,required:C=!1,disabled:M=!1,readOnly:w=!1,name:I,value:R,id:q,className:L,style:O},P){const S=f(_),B=u(v),T=h(N),W=T?"error":B,$=b[S],A=a.useId(),D=q??A;return e(t.Root,{className:["mp-checkbox inline-block max-w-full align-top",L??""].filter(Boolean).join(" "),disabled:M,invalid:T,"data-mp-size":S,style:{...c(W),...O},children:r("div",{className:["flex items-start gap-3",p[S]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(n.Root,{ref:P,id:D,name:I,value:R,checked:x,defaultChecked:g,indeterminate:j,required:C,disabled:M,readOnly:w,onCheckedChange:e=>k?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",$.box,M?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[w?"cursor-default":"cursor-pointer",T?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_mp-on-accent)"].join(" ")].join(" "),children:[M?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",$.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(n.Indicator,{className:`flex items-center justify-center ${l}`,children:e(o,{icon:j?s:i,size:$.glyph,strokeWidth:3})})]})}),h(y)||h(z)||T?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[h(y)?r(t.Label,{className:["leading-[1.4]",M?"text-mp-on-surface/38 cursor-default":w?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[y,C?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(m,{description:z,errorMessage:N})]}):null]})})});

package/dist/components/chip/MPChip.d.ts

@@ -63,7 +63,7 @@ export interface MPChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>
      * `transition="fade"` is the whole of what most callers want; the object form
      * takes a duration, an edge to come from, or a scale to start at. Anything
      * that has to run again — on scroll, on hover, under your own control — is an
-     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     * [MPAnimateFade](../transitions/animate-fade) and its siblings.
      */
     transition?: MPTransition;
 }

package/dist/components/code-block/MPCodeBlock.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{MPIcon as n}from"../icon/MPIcon.js";import{CheckIcon as r,CodeIcon as i,CopyIcon as l}from"../../constants/icons.js";import{canonicalLanguage as a,highlightCode as s,plainLines as c}from"../../internal/highlight.js";import{cssLength as m}from"../../internal/length.js";import{useMPLocale as d,useMPMessages as p}from"../../internal/locale.js";import{CODE as u}from"../../internal/messages/code.js";import{META_TEXT as f,hasContent as g}from"../../internal/scale.js";import{VISUALLY_HIDDEN as x}from"../../internal/visually-hidden.js";import{useMPDensity as h,useMPSize as b}from"../../internal/config.js";export{registerMPLanguage}from"../../internal/highlight.js";const y={xs:"text-[0.6875rem]/[1.55]",sm:"text-[0.75rem]/[1.6]",md:"text-[0.8125rem]/[1.65]",lg:"text-[0.875rem]/[1.7]",xl:"text-[1rem]/[1.7]"},v={xs:8,sm:12,md:14,lg:16,xl:20},w={xs:8,sm:12,md:14,lg:16,xl:20},j={xs:4,sm:4,md:6,lg:8,xl:8};function N(e,t,o){return Math.max(o,e+2*t)}export const MPCodeBlock=/*@__PURE__*/o.forwardRef(function({code:k,language:_,theme:M="auto",size:S,density:$,highlight:L=!0,toolbar:T=!0,title:z,showLanguage:C=!0,copyable:F=!0,rawToggle:R=!1,markLines:A,lineNumbers:H=!1,startLine:K=1,prompt:B,wrap:E=!1,maxHeight:P,fontFamily:D,fontSize:I,lineHeight:q,locale:G,copyLabel:J,copiedLabel:O,rawLabel:Q,onCopy:U,className:V,style:W,...X},Y){const Z=b(S),ee=h($),te=p(u,d(G)),oe=o.useMemo(()=>k.replace(/\r\n?/g,"\n").replace(/\s+$/,""),[k]),ne=a(_),[re,ie]=o.useState(!1),[le,ae]=o.useState(null),[se,ce]=o.useState(null),me=L&&!re&&null!==ne;o.useEffect(()=>{if(!me||!ne)return void ce(null);let e=!1;return s(oe,ne).then(t=>{e||ce(t)},()=>{e||ce(null)}),()=>{e=!0}},[oe,ne,me]);const de=o.useMemo(()=>me&&se?se:c(oe),[me,se,oe]),pe=o.useMemo(()=>function(e){const t=new Set;if(void 0===e)return t;for(const o of Array.isArray(e)?e:[e])if("number"!=typeof o)for(const e of o.split(",")){const o=/^\s*(\d+)\s*(?:-\s*(\d+)\s*)?$/.exec(e);if(!o)continue;const n=Number(o[1]),r=void 0===o[2]?n:Number(o[2]);for(let e=Math.min(n,r);e<=Math.max(n,r);e+=1)t.add(e)}else Number.isFinite(o)&&t.add(Math.trunc(o));return t}(A),[A]),ue=o.useRef(void 0);o.useEffect(()=>()=>clearTimeout(ue.current),[]);const fe=o.useRef(null),ge=J??te.copy,xe=O??te.copied,he=Q??te.raw,be=/*@__PURE__*/["mp-code__button inline-flex shrink-0 cursor-pointer items-center gap-1 border-0","rounded-mp-xs bg-transparent px-1.5 py-1","text-(--mp-code-dim) hover:text-(--mp-code-fg) hover:bg-(--mp-code-hover)",f,"transition-[color,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-(--mp-code-fg) focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),ye=g(z)?"string"==typeof z?z:void 0:ne??te.label,ve=T&&(C||F||R||g(z));return t("div",{ref:Y,"data-mp-size":Z,"data-mp-code-theme":M,"data-mp-code-wrap":E?"true":void 0,className:["mp-code rounded-mp-md flex min-w-0 flex-col overflow-hidden","border-(--mp-code-rule) bg-(--mp-code-bg) text-(--mp-code-fg) border",V??""].filter(Boolean).join(" "),style:{"--mp-code-gutter":`${String(K+Math.max(de.length-1,0)).length}ch`,"--mp-code-pad-x":`${N(w[Z],ee,6)}px`,"--mp-code-pad-y":`${N(v[Z],ee,4)}px`,"--mp-code-bar-pad-y":`${N(j[Z],ee,2)}px`,...D?{fontFamily:D}:null,...void 0===I?null:{fontSize:m(I)},...void 0===q?null:{lineHeight:q},...W},...X,children:[ve?t("div",{className:["mp-code__bar border-(--mp-code-rule) flex min-w-0 items-center gap-1 border-b","px-[calc(var(--mp-code-pad-x)+2px)] py-(--mp-code-bar-pad-y)"].join(" "),children:[g(z)?e("span",{className:`mp-code__title min-w-0 truncate font-mono ${f}`,children:z}):null,C&&ne?e("span",{className:["mp-code__language text-(--mp-code-dim) min-w-0 truncate font-mono","tracking-wide uppercase select-none",f].join(" "),children:ne}):null,e("span",{className:"flex-1"}),R&&L?e("button",{type:"button","aria-pressed":re,"aria-label":he,title:he,onClick:()=>ie(e=>!e),className:[be,re?"bg-(--mp-code-hover) text-(--mp-code-fg)":""].filter(Boolean).join(" "),children:e(n,{icon:i,size:"1.15em"})}):null,F?t("button",{type:"button",onClick:async()=>{const e=await async function(e){try{if(navigator.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.cssText="position:fixed;top:0;left:0;opacity:0;pointer-events:none",document.body.append(t),t.select();const o=document.execCommand("copy");return t.remove(),o}catch{return!1}}(oe);clearTimeout(ue.current),ae(e),ue.current=setTimeout(()=>ae(null),2e3),e&&U?.(oe)},className:be,children:[e(n,{icon:le?r:l,size:"1.15em"}),e("span",{children:null===le?ge:le?xe:te.copyFailed})]}):null]}):null,e("div",{className:`mp-code__body flex min-h-0 flex-col ${y[Z]}`,children:e("div",{role:"region","aria-label":ye,tabIndex:0,onKeyDown:e=>{if("a"!==e.key&&"A"!==e.key)return;if(!e.metaKey&&!e.ctrlKey||e.altKey)return;const t=fe.current,o="undefined"==typeof window?null:window.getSelection();if(!t||!o)return;e.preventDefault();const n=document.createRange();n.selectNodeContents(t),o.removeAllRanges(),o.addRange(n)},className:["mp-code__scroller box-border min-h-0 overflow-auto py-(--mp-code-pad-y)","outline-(--mp-code-fg) focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),style:void 0===P?void 0:{maxHeight:m(P)},children:e("pre",{ref:fe,className:["m-0 bg-transparent p-0 font-mono",E?"w-full":"w-max min-w-full"].join(" "),children:de.map((t,n)=>{const r=K+n;return e("div",{className:"mp-code-line px-(--mp-code-pad-x)","data-line":H?r:void 0,"data-mark":pe.has(r)?"":void 0,"data-prompt":B&&t.length>0?B:void 0,children:e("code",{children:t.map((t,n)=>t.token?e("span",{className:t.token,children:t.text},n):e(o.Fragment,{children:t.text},n))})},n)})})})}),e("span",{"aria-live":"polite",className:x,children:null===le?"":le?xe:te.copyFailed})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{MPIcon as n}from"../icon/MPIcon.js";import{CheckIcon as r,CodeIcon as i,CopyIcon as l}from"../../constants/icons.js";import{canonicalLanguage as a,highlightCode as s,plainLines as c}from"../../internal/highlight.js";import{watchIntersection as m}from"../../internal/intersection.js";import{cssLength as d}from"../../internal/length.js";import{useMPLocale as p,useMPMessages as u}from"../../internal/locale.js";import{CODE as f}from"../../internal/messages/code.js";import{META_TEXT as g,hasContent as x}from"../../internal/scale.js";import{VISUALLY_HIDDEN as h}from"../../internal/visually-hidden.js";import{useMPDensity as b,useMPSize as y}from"../../internal/config.js";export{registerMPLanguage}from"../../internal/highlight.js";const v={xs:"text-[0.6875rem]/[1.55]",sm:"text-[0.75rem]/[1.6]",md:"text-[0.8125rem]/[1.65]",lg:"text-[0.875rem]/[1.7]",xl:"text-[1rem]/[1.7]"},w={xs:8,sm:12,md:14,lg:16,xl:20},j={xs:8,sm:12,md:14,lg:16,xl:20},N={xs:4,sm:4,md:6,lg:8,xl:8};function k(e,t,o){return Math.max(o,e+2*t)}export const MPCodeBlock=/*@__PURE__*/o.forwardRef(function({code:M,language:_,theme:S="auto",size:T,density:$,highlight:L=!0,toolbar:z=!0,title:C,showLanguage:F=!0,copyable:R=!0,rawToggle:A=!1,markLines:E,lineNumbers:H=!1,startLine:I=1,prompt:K,wrap:B=!1,maxHeight:P,fontFamily:D,fontSize:O,lineHeight:q,locale:G,copyLabel:J,copiedLabel:Q,rawLabel:U,onCopy:V,className:W,style:X,...Y},Z){const ee=y(T),te=b($),oe=u(f,p(G)),ne=o.useMemo(()=>M.replace(/\r\n?/g,"\n").replace(/\s+$/,""),[M]),re=a(_),[ie,le]=o.useState(!1),[ae,se]=o.useState(null),[ce,me]=o.useState(null),[de,pe]=o.useState(!1),ue=L&&!ie&&null!==re;o.useEffect(()=>{if(!ue||!re)return void me(null);if(!de)return;let e=!1;return s(ne,re).then(t=>{e||o.startTransition(()=>me(t))},()=>{e||me(null)}),()=>{e=!0}},[ne,re,ue,de]);const fe=o.useMemo(()=>ue&&ce?ce:c(ne),[ue,ce,ne]),ge=o.useMemo(()=>function(e){const t=new Set;if(void 0===e)return t;for(const o of Array.isArray(e)?e:[e])if("number"!=typeof o)for(const e of o.split(",")){const o=/^\s*(\d+)\s*(?:-\s*(\d+)\s*)?$/.exec(e);if(!o)continue;const n=Number(o[1]),r=void 0===o[2]?n:Number(o[2]);for(let e=Math.min(n,r);e<=Math.max(n,r);e+=1)t.add(e)}else Number.isFinite(o)&&t.add(Math.trunc(o));return t}(E),[E]),xe=o.useRef(void 0);o.useEffect(()=>()=>clearTimeout(xe.current),[]);const he=o.useRef(null);o.useEffect(()=>{const e=he.current;if(!de){if(e&&"undefined"!=typeof IntersectionObserver)return m(e,e=>{e.isIntersecting&&pe(!0)},{rootMargin:"100% 0px"});pe(!0)}},[de]);const be=J??oe.copy,ye=Q??oe.copied,ve=U??oe.raw,we=/*@__PURE__*/["mp-code__button inline-flex shrink-0 cursor-pointer items-center gap-1 border-0","rounded-mp-xs bg-transparent px-1.5 py-1","text-(--mp-code-dim) hover:text-(--mp-code-fg) hover:bg-(--mp-code-hover)",g,"transition-[color,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-(--mp-code-fg) focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),je=x(C)?"string"==typeof C?C:void 0:re??oe.label,Ne=z&&(F||R||A||x(C));return t("div",{ref:Z,"data-mp-size":ee,"data-mp-code-theme":S,"data-mp-code-wrap":B?"true":void 0,className:["mp-code rounded-mp-md flex min-w-0 flex-col overflow-hidden","border-(--mp-code-rule) bg-(--mp-code-bg) text-(--mp-code-fg) border",W??""].filter(Boolean).join(" "),style:{"--mp-code-gutter":`${String(I+Math.max(fe.length-1,0)).length}ch`,"--mp-code-pad-x":`${k(j[ee],te,6)}px`,"--mp-code-pad-y":`${k(w[ee],te,4)}px`,"--mp-code-bar-pad-y":`${k(N[ee],te,2)}px`,...D?{fontFamily:D}:null,...void 0===O?null:{fontSize:d(O)},...void 0===q?null:{lineHeight:q},...X},...Y,children:[Ne?t("div",{className:["mp-code__bar border-(--mp-code-rule) flex min-w-0 items-center gap-1 border-b","px-[calc(var(--mp-code-pad-x)+2px)] py-(--mp-code-bar-pad-y)"].join(" "),children:[x(C)?e("span",{className:`mp-code__title min-w-0 truncate font-mono ${g}`,children:C}):null,F&&re?e("span",{className:["mp-code__language text-(--mp-code-dim) min-w-0 truncate font-mono","tracking-wide uppercase select-none",g].join(" "),children:re}):null,e("span",{className:"flex-1"}),A&&L?e("button",{type:"button","aria-pressed":ie,"aria-label":ve,title:ve,onClick:()=>le(e=>!e),className:[we,ie?"bg-(--mp-code-hover) text-(--mp-code-fg)":""].filter(Boolean).join(" "),children:e(n,{icon:i,size:"1.15em"})}):null,R?t("button",{type:"button",onClick:async()=>{const e=await async function(e){try{if(navigator.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.cssText="position:fixed;top:0;left:0;opacity:0;pointer-events:none",document.body.append(t),t.select();const o=document.execCommand("copy");return t.remove(),o}catch{return!1}}(ne);clearTimeout(xe.current),se(e),xe.current=setTimeout(()=>se(null),2e3),e&&V?.(ne)},className:we,children:[e(n,{icon:ae?r:l,size:"1.15em"}),e("span",{children:null===ae?be:ae?ye:oe.copyFailed})]}):null]}):null,e("div",{className:`mp-code__body flex min-h-0 flex-col ${v[ee]}`,children:e("div",{role:"region","aria-label":je,tabIndex:0,onKeyDown:e=>{if("a"!==e.key&&"A"!==e.key)return;if(!e.metaKey&&!e.ctrlKey||e.altKey)return;const t=he.current,o="undefined"==typeof window?null:window.getSelection();if(!t||!o)return;e.preventDefault();const n=document.createRange();n.selectNodeContents(t),o.removeAllRanges(),o.addRange(n)},className:["mp-code__scroller box-border min-h-0 overflow-auto py-(--mp-code-pad-y)","outline-(--mp-code-fg) focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),style:void 0===P?void 0:{maxHeight:d(P)},children:e("pre",{ref:he,className:["m-0 bg-transparent p-0 font-mono",B?"w-full":"w-max min-w-full"].join(" "),children:fe.map((t,n)=>{const r=I+n;return e("div",{className:"mp-code-line px-(--mp-code-pad-x)","data-line":H?r:void 0,"data-mark":ge.has(r)?"":void 0,"data-prompt":K&&t.length>0?K:void 0,children:e("code",{children:t.map((t,n)=>t.token?e("span",{className:t.token,children:t.text},n):e(o.Fragment,{children:t.text},n))})},n)})})})}),e("span",{"aria-live":"polite",className:h,children:null===ae?"":ae?ye:oe.copyFailed})]})});

package/dist/components/combobox/MPCombobox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Combobox as o}from"@base-ui/react/combobox";import{Field as l}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip.js";import{MPIcon as r}from"../icon/MPIcon.js";import{AddIcon as i,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons.js";import{MPFieldLabel as p,MPFieldOutline as u,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{fillMessage as h}from"../../internal/i18n.js";import{useMPLocale as f,useMPMessages as b}from"../../internal/locale.js";import{COMBOBOX as g}from"../../internal/messages/combobox.js";import{COMMON as x}from"../../internal/messages/common.js";import{MPStateLayer as v}from"../../internal/StateLayer.js";import{MPSupportingText as y}from"../../internal/SupportingText.js";import{CONTROL_ICON as j,PROSE_TEXT as C,hasContent as w}from"../../internal/scale.js";import{MARK_MOTION_KEPT as N}from"../../internal/mark.js";import{FADE as L,PORTAL_LAYER as M}from"../../internal/surface.js";import{useMPSize as k}from"../../internal/config.js";const S={xs:{padding:"ps-2 pe-1",height:"h-8"},sm:{padding:"ps-3 pe-1.5",height:"h-10"},md:{padding:"ps-4 pe-2",height:"h-14"},lg:{padding:"ps-4 pe-2",height:"h-16"},xl:{padding:"ps-5 pe-2.5",height:"h-18"}},I={xs:"min-h-8 py-1",sm:"min-h-10 py-1.5",md:"min-h-14 py-3",lg:"min-h-16 py-3",xl:"min-h-18 py-3"},z={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"};function V(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:O,multiple:$,value:P,defaultValue:_,onValueChange:q,onInputValueChange:F,onKeyDown:T,onKeyUp:A,onFocus:D,onBlur:K,onClick:R,onDoubleClick:B,onContextMenu:E,allowCustom:U=!0,customLabel:G,clearable:H=!1,emptyMessage:W,limit:J,filter:Q,chipVariant:X,chipColor:Y,placeholder:Z,label:ee,floatingLabel:ae=!0,description:ne,errorMessage:oe,startIcon:le,size:te,fullWidth:re=!1,required:ie=!1,disabled:se=!1,readOnly:me=!1,name:ce,open:pe,defaultOpen:ue,onOpenChange:de,clearLabel:he,openLabel:fe,locale:be,removeLabel:ge,inputRef:xe,id:ve,classNames:ye,className:je,style:Ce}){const we=k(te),Ne=f(be),Le=b(x,Ne),Me=b(g,Ne),ke=w(oe),Se=!0===$,Ie=S[we],ze=n.useId(),Ve=ve??ze,Oe=n.useMemo(()=>O.map(e=>({value:e.value,label:e.label??String(e.value),content:e.content,disabled:e.disabled})),[O]),[$e,Pe]=n.useState(()=>V(_)),_e=void 0===P?$e:V(P),[qe,Fe]=n.useState(""),{shrunk:Te,focusProps:Ae}=d({floating:ae&&w(ee),filled:_e.length>0||""!==qe,pinned:!!le}),De=n.useMemo(()=>new Map(Oe.map(e=>[e.value,e])),[Oe]),Ke=n.useMemo(()=>{const e=new Set;for(const a of Oe)e.add(a.label.toLocaleLowerCase()),e.add(String(a.value).toLocaleLowerCase());return e},[Oe]),Re=n.useCallback(e=>De.get(e)??{value:e,label:String(e),custom:!0},[De]),Be=qe.trim(),Ee=Be.toLocaleLowerCase(),Ue=""===Be||Ke.has(Ee)||_e.some(e=>String(e).toLocaleLowerCase()===Ee),Ge=!U||me||se||Ue?null:Be,He=n.useMemo(()=>null==Q?Q:(e,a)=>!0===e.custom||Q(e,a),[Q]),We=n.useMemo(()=>null===Ge?Oe:[...Oe,{value:Ge,label:Ge,custom:!0}],[Oe,Ge]),Je=Se?_e.map(Re):_e.length>0?Re(_e[0]):null;const Qe=/*@__PURE__*/["min-w-0 flex-1 self-stretch border-0 bg-transparent text-inherit [font:inherit] outline-none","placeholder:text-mp-on-surface-variant",se?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Xe=/*@__PURE__*/["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0","text-mp-on-surface-variant","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),Ye=a=>e(o.Input,{ref:xe,id:Ve,placeholder:Te?Z:void 0,onKeyDown:T,onKeyUp:A,onFocus:D,onBlur:K,onClick:R,onDoubleClick:B,onContextMenu:E,className:Se?`${Qe} min-w-16 ${a?"ms-1.5":""}`:Qe});return a(l.Root,{disabled:se,invalid:ke,"data-mp-size":we,className:["mp-combobox group flex-col align-top",re?"flex w-full":"inline-flex w-fit",je??""].filter(Boolean).join(" "),style:Ce,...Ae,children:[a(o.Root,{name:ce,items:We,multiple:Se,value:Je,onValueChange:e=>{!function(e){void 0===P&&Pe(e),q?.(Se?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Fe(e),F?.(e)},open:pe,defaultOpen:ue,onOpenChange:e=>de?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:J,filter:He,disabled:se,readOnly:me,required:ie,children:[a("div",{className:"relative w-full",children:[a(o.InputGroup,{className:["relative flex w-full items-center gap-2",Ie.padding,Se?I[we]:Ie.height,C[we],se?"cursor-default":"cursor-text"].join(" "),children:[le?e("span",{className:["flex shrink-0 items-center",se?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:le}):null,Se?e(o.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(o.Value,{children:l=>a(n.Fragment,{children:[l.map((a,n)=>e(o.Chip,{render:e(t,{variant:X??(ke?"outlined":"tonal"),color:Y??(ke?"error":"primary"),size:z[we],disabled:se,endIcon:me||se?null:e(o.ChipRemove,{"aria-label":ge?ge(a.label):h(Le.removeNamed,{label:a.label}),className:"flex cursor-pointer appearance-none items-center border-0 bg-transparent p-0 text-inherit opacity-70 hover:opacity-100",children:e(r,{icon:c,size:16})})}),children:a.label},`${n}:${String(a.value)}`)),Ye(l.length>0)]})})}):Ye(!1),H&&!me?a(o.Clear,{"aria-label":he??Le.clear,className:Xe,children:[e(v,{}),e(r,{icon:c,size:j[we]})]}):null,a(o.Trigger,{"aria-label":fe??Le.open,className:Xe,children:[e(v,{}),e(o.Icon,{className:["relative flex items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:m,size:j[we]})})]})]}),e(u,{label:ee,required:ie,notched:Te}),w(ee)?e(p,{size:we,label:ee,required:ie,htmlFor:Ve,shrunk:Te}):null]}),e(o.Portal,{children:e(o.Positioner,{className:M,sideOffset:4,children:a(o.Popup,{className:["mp-combobox__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface w-[var(--anchor-width)] outline-none","max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",C[we],L].join(" "),children:[e(o.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:W??Me.empty}),e(o.List,{children:(n,l)=>a(o.Item,{value:n,disabled:n.disabled,className:["mp-combobox__item group rounded-mp-xs relative flex cursor-pointer",ye?.item??"","items-center gap-3 py-2 ps-2 pe-3 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:bg-mp-secondary-container","data-selected:text-mp-on-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(v,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:n.custom?e(r,{icon:i,size:18}):e(o.ItemIndicator,{keepMounted:!0,className:`mp-combobox__mark ${N}`,children:e(r,{icon:s,size:18})})}),e("span",{className:w(n.content)?"min-w-0 flex-1":"min-w-0 flex-1 truncate",children:n.custom?G?G(n.label):h(Me.add,{label:n.label}):n.content??n.label})]},`${l}:${n.custom?"custom:":""}${String(n.value)}`)})]})})})]}),e(y,{description:ne,errorMessage:oe,className:Ie.padding})]})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Combobox as o}from"@base-ui/react/combobox";import{Field as l}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip.js";import{MPIcon as r}from"../icon/MPIcon.js";import{AddIcon as i,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons.js";import{MPFieldLabel as p,MPFieldOutline as u,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{fillMessage as h}from"../../internal/i18n.js";import{useMPLocale as f,useMPMessages as b}from"../../internal/locale.js";import{COMBOBOX as g}from"../../internal/messages/combobox.js";import{COMMON as x}from"../../internal/messages/common.js";import{MPStateLayer as v}from"../../internal/StateLayer.js";import{MPSupportingText as y}from"../../internal/SupportingText.js";import{CONTROL_ICON as j,PROSE_TEXT as C,hasContent as w}from"../../internal/scale.js";import{MARK_MOTION_KEPT as N}from"../../internal/mark.js";import{FADE as L,PORTAL_LAYER as M}from"../../internal/surface.js";import{useMPSize as k}from"../../internal/config.js";import{occurrenceKeys as I}from"../../internal/occurrence.js";const S={xs:{padding:"ps-2 pe-1",height:"h-8"},sm:{padding:"ps-3 pe-1.5",height:"h-10"},md:{padding:"ps-4 pe-2",height:"h-14"},lg:{padding:"ps-4 pe-2",height:"h-16"},xl:{padding:"ps-5 pe-2.5",height:"h-18"}},z={xs:"min-h-8 py-1",sm:"min-h-10 py-1.5",md:"min-h-14 py-3",lg:"min-h-16 py-3",xl:"min-h-18 py-3"},V={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"};function O(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:P,multiple:_,value:q,defaultValue:F,onValueChange:T,onInputValueChange:$,onKeyDown:A,onKeyUp:D,onFocus:K,onBlur:R,onClick:B,onDoubleClick:E,onContextMenu:U,allowCustom:G=!0,customLabel:H,clearable:W=!1,emptyMessage:J,limit:Q,filter:X,chipVariant:Y,chipColor:Z,placeholder:ee,label:ae,floatingLabel:ne=!0,description:oe,errorMessage:le,startIcon:te,size:re,fullWidth:ie=!1,required:se=!1,disabled:me=!1,readOnly:ce=!1,name:pe,open:ue,defaultOpen:de,onOpenChange:he,clearLabel:fe,openLabel:be,locale:ge,removeLabel:xe,inputRef:ve,id:ye,classNames:je,className:Ce,style:we}){const Ne=k(re),Le=f(ge),Me=b(x,Le),ke=b(g,Le),Ie=w(le),Se=!0===_,ze=S[Ne],Ve=n.useId(),Oe=ye??Ve,Pe=n.useMemo(()=>P.map(e=>({value:e.value,label:e.label??String(e.value),content:e.content,disabled:e.disabled})),[P]),[_e,qe]=n.useState(()=>O(F)),Fe=void 0===q?_e:O(q),[Te,$e]=n.useState(""),{shrunk:Ae,focusProps:De}=d({floating:ne&&w(ae),filled:Fe.length>0||""!==Te,pinned:!!te}),Ke=n.useMemo(()=>new Map(Pe.map(e=>[e.value,e])),[Pe]),Re=n.useMemo(()=>{const e=new Set;for(const a of Pe)e.add(a.label.toLocaleLowerCase()),e.add(String(a.value).toLocaleLowerCase());return e},[Pe]),Be=n.useCallback(e=>Ke.get(e)??{value:e,label:String(e),custom:!0},[Ke]),Ee=Te.trim(),Ue=Ee.toLocaleLowerCase(),Ge=""===Ee||Re.has(Ue)||Fe.some(e=>String(e).toLocaleLowerCase()===Ue),He=!G||ce||me||Ge?null:Ee,We=n.useMemo(()=>null==X?X:(e,a)=>!0===e.custom||X(e,a),[X]),Je=n.useMemo(()=>null===He?Pe:[...Pe,{value:He,label:He,custom:!0}],[Pe,He]),Qe=n.useMemo(()=>I(Je,e=>`${e.custom?"custom:":""}${String(e.value)}`),[Je]),Xe=Se?Fe.map(Be):Fe.length>0?Be(Fe[0]):null;const Ye=/*@__PURE__*/["min-w-0 flex-1 self-stretch border-0 bg-transparent text-inherit [font:inherit] outline-none","placeholder:text-mp-on-surface-variant",me?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Ze=/*@__PURE__*/["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0","text-mp-on-surface-variant","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),ea=a=>e(o.Input,{ref:ve,id:Oe,placeholder:Ae?ee:void 0,onKeyDown:A,onKeyUp:D,onFocus:K,onBlur:R,onClick:B,onDoubleClick:E,onContextMenu:U,className:Se?`${Ye} min-w-16 ${a?"ms-1.5":""}`:Ye});return a(l.Root,{disabled:me,invalid:Ie,"data-mp-size":Ne,className:["mp-combobox group flex-col align-top",ie?"flex w-full":"inline-flex w-fit",Ce??""].filter(Boolean).join(" "),style:we,...De,children:[a(o.Root,{name:pe,items:Je,multiple:Se,value:Xe,onValueChange:e=>{!function(e){void 0===q&&qe(e),T?.(Se?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{$e(e),$?.(e)},open:ue,defaultOpen:de,onOpenChange:e=>he?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:Q,filter:We,disabled:me,readOnly:ce,required:se,children:[a("div",{className:"relative w-full",children:[a(o.InputGroup,{className:["relative flex w-full items-center gap-2",ze.padding,Se?z[Ne]:ze.height,C[Ne],me?"cursor-default":"cursor-text"].join(" "),children:[te?e("span",{className:["flex shrink-0 items-center",me?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:te}):null,Se?e(o.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(o.Value,{children:l=>{const i=I(l,e=>e.value);return a(n.Fragment,{children:[l.map((a,n)=>e(o.Chip,{render:e(t,{variant:Y??(Ie?"outlined":"tonal"),color:Z??(Ie?"error":"primary"),size:V[Ne],disabled:me,endIcon:ce||me?null:e(o.ChipRemove,{"aria-label":xe?xe(a.label):h(Me.removeNamed,{label:a.label}),className:"flex cursor-pointer appearance-none items-center border-0 bg-transparent p-0 text-inherit opacity-70 hover:opacity-100",children:e(r,{icon:c,size:16})})}),children:a.label},i.get(a)??n)),ea(l.length>0)]})}})}):ea(!1),W&&!ce?a(o.Clear,{"aria-label":fe??Me.clear,className:Ze,children:[e(v,{}),e(r,{icon:c,size:j[Ne]})]}):null,a(o.Trigger,{"aria-label":be??Me.open,className:Ze,children:[e(v,{}),e(o.Icon,{className:["relative flex items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:m,size:j[Ne]})})]})]}),e(u,{label:ae,required:se,notched:Ae}),w(ae)?e(p,{size:Ne,label:ae,required:se,htmlFor:Oe,shrunk:Ae}):null]}),e(o.Portal,{children:e(o.Positioner,{className:M,sideOffset:4,children:a(o.Popup,{className:["mp-combobox__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface w-[var(--anchor-width)] outline-none","max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",C[Ne],L].join(" "),children:[e(o.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:J??ke.empty}),e(o.List,{children:(n,l)=>a(o.Item,{value:n,disabled:n.disabled,className:["mp-combobox__item group rounded-mp-xs relative flex cursor-pointer",je?.item??"","items-center gap-3 py-2 ps-2 pe-3 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:bg-mp-secondary-container","data-selected:text-mp-on-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(v,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:n.custom?e(r,{icon:i,size:18}):e(o.ItemIndicator,{keepMounted:!0,className:`mp-combobox__mark ${N}`,children:e(r,{icon:s,size:18})})}),e("span",{className:w(n.content)?"min-w-0 flex-1":"min-w-0 flex-1 truncate",children:n.custom?H?H(n.label):h(ke.add,{label:n.label}):n.content??n.label})]},Qe.get(n)??l)})]})})})]}),e(y,{description:oe,errorMessage:le,className:ze.padding})]})}

package/dist/components/command-palette/MPCommandPalette.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as n}from"@base-ui/react/autocomplete";import{Dialog as l}from"@base-ui/react/dialog";import{MPShortcut as r}from"../shortcut/MPShortcut.js";import{accentSlots as o}from"../../internal/accent.js";import{cssLength as s}from"../../internal/length.js";import{matchesShortcut as i,useDetectedOS as m}from"../../internal/keys.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{COMMAND as d}from"../../internal/messages/command.js";import{MPStateLayer as u}from"../../internal/StateLayer.js";import{hasContent as f,META_TEXT as h,PROSE_TEXT as x}from"../../internal/scale.js";import{FADE as g,PORTAL_LAYER as v,SCRIM as y,SHEET_MOTION as w}from"../../internal/surface.js";import{useMPColor as b,useMPSize as j}from"../../internal/config.js";const N={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},k={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-16",xl:"h-18"},$={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},C={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"};function S(e){return[e.label,e.group??"",...e.keywords??[]].join("\n").toLowerCase()}export function MPCommandPalette({items:_,open:L,defaultOpen:M=!1,onOpenChange:P,onSelect:E,shortcut:z="Mod+K",width:B,maxHeight:O=320,size:V,color:F,locale:H,placeholder:I,emptyMessage:R,label:D,classNames:K,className:T,style:W}){const q=j(V),A=b(F),G=c(H),J=p(d,G),Q=m(),[U,X]=a.useState(M),[Y,Z]=a.useState(""),ee=L??U,te=a.useCallback(e=>{e||Z(""),void 0===L&&X(e),P?.(e)},[L,P]);a.useEffect(()=>{if(!1===z)return;const e=e=>{i(e,z,Q)&&(e.preventDefault(),te(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[z,Q,te]);const ae=a.useMemo(()=>_.map(S),[_]),ne=a.useMemo(()=>{if(""===Y)return _;const e=Y.toLowerCase();return _.filter((t,a)=>ae[a].includes(e))},[_,ae,Y]),le=s(B),re=s(O);return e(l.Root,{open:ee,onOpenChange:te,children:t(l.Portal,{children:[e(l.Backdrop,{className:[`${v} fixed inset-0`,g,y,K?.backdrop??""].filter(Boolean).join(" ")}),e(l.Viewport,{className:`${v} fixed inset-0 flex justify-center p-4 pt-[12vh]`,children:e(l.Popup,{"aria-label":D??J.label,"data-mp-size":q,className:["mp-command-palette relative flex w-full flex-col self-start overflow-hidden","bg-mp-surface-container-high text-mp-on-surface shadow-mp-3 rounded-mp-xl","outline-none",x[q],void 0===le?N[q]:"",`transition-[opacity,scale] ${w}`,"motion-safe:data-starting-style:scale-95 motion-safe:data-ending-style:scale-95",T??""].filter(Boolean).join(" "),style:{...o(A),...void 0===le?null:{maxWidth:le},...W},children:t(n.Root,{open:!0,mode:"list",items:ne,filter:null,value:Y,onValueChange:e=>Z(e),itemToStringValue:e=>e.label,children:[e("div",{className:`border-mp-outline-variant flex shrink-0 items-center border-b ${$[q]}`,children:e(n.Input,{autoFocus:!0,placeholder:I??J.search,className:["mp-command-palette__input min-w-0 flex-1 bg-transparent font-[inherit]",K?.input??"","text-inherit outline-none","placeholder:text-mp-on-surface-variant caret-(--_mp-accent)",k[q]].join(" ")})}),e(n.List,{className:"mp-command-palette__list min-h-0 flex-1 overflow-y-auto overscroll-contain p-1"+(K?.list?` ${K.list}`:""),style:{maxHeight:re},children:(l,o)=>t(a.Fragment,{children:[l.group&&l.group!==ne[o-1]?.group?e("div",{role:"presentation",className:`text-mp-on-surface-variant pt-2 pb-1 font-medium ${$[q]} ${h}`,children:l.group}):null,t(n.Item,{index:o,value:l,disabled:l.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),E?.(e),te(!1))})(l),className:["mp-command-palette__row group rounded-mp-xs relative flex cursor-pointer",K?.row??"","items-center gap-3 select-none outline-none","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",$[q],C[q]].join(" "),children:[e(u,{layer:"inset-0 rounded-[inherit] bg-current",className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),f(l.icon)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:l.icon}):null,t("span",{className:"relative flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:l.label}),f(l.description)?e("span",{className:`text-mp-on-surface-variant truncate ${h}`,children:l.description}):null]}),l.shortcut?e(r,{size:"xs",keys:l.shortcut,className:"relative shrink-0"}):null]})]},`${o}:${l.value}`)}),e(n.Empty,{className:`text-mp-on-surface-variant py-6 text-center ${$[q]} ${h}`,children:R??J.empty})]})})})]})})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as n}from"@base-ui/react/autocomplete";import{Dialog as r}from"@base-ui/react/dialog";import{MPShortcut as l}from"../shortcut/MPShortcut.js";import{accentSlots as o}from"../../internal/accent.js";import{cssLength as s}from"../../internal/length.js";import{matchesShortcut as i,useDetectedOS as m}from"../../internal/keys.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{COMMAND as d}from"../../internal/messages/command.js";import{MPStateLayer as u}from"../../internal/StateLayer.js";import{hasContent as f,META_TEXT as h,PROSE_TEXT as x}from"../../internal/scale.js";import{FADE as g,PORTAL_LAYER as v,SCRIM as y,SHEET_MOTION as w}from"../../internal/surface.js";import{useMPColor as b,useMPSize as j}from"../../internal/config.js";import{occurrenceKeys as N}from"../../internal/occurrence.js";const k={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},$={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-16",xl:"h-18"},C={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},M={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"};function S(e){return[e.label,e.group??"",...e.keywords??[]].join("\n").toLowerCase()}export function MPCommandPalette({items:_,open:L,defaultOpen:P=!1,onOpenChange:E,onSelect:z,shortcut:B="Mod+K",width:O,maxHeight:V=320,size:F,color:H,locale:I,placeholder:R,emptyMessage:D,label:K,classNames:T,className:W,style:q}){const A=j(F),G=b(H),J=c(I),Q=p(d,J),U=m(),[X,Y]=a.useState(P),[Z,ee]=a.useState(""),te=L??X,ae=a.useCallback(e=>{e||ee(""),void 0===L&&Y(e),E?.(e)},[L,E]);a.useEffect(()=>{if(!1===B)return;const e=e=>{i(e,B,U)&&(e.preventDefault(),ae(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[B,U,ae]);const ne=a.useMemo(()=>_.map(S),[_]),re=a.useMemo(()=>N(_,e=>e.value),[_]),le=a.useMemo(()=>{if(""===Z)return _;const e=Z.toLowerCase();return _.filter((t,a)=>ne[a].includes(e))},[_,ne,Z]),oe=s(O),se=s(V);return e(r.Root,{open:te,onOpenChange:ae,children:t(r.Portal,{children:[e(r.Backdrop,{className:[`${v} fixed inset-0`,g,y,T?.backdrop??""].filter(Boolean).join(" ")}),e(r.Viewport,{className:`${v} fixed inset-0 flex justify-center p-4 pt-[12vh]`,children:e(r.Popup,{"aria-label":K??Q.label,"data-mp-size":A,className:["mp-command-palette relative flex w-full flex-col self-start overflow-hidden","bg-mp-surface-container-high text-mp-on-surface shadow-mp-3 rounded-mp-xl","outline-none",x[A],void 0===oe?k[A]:"",`transition-[opacity,scale] ${w}`,"motion-safe:data-starting-style:scale-95 motion-safe:data-ending-style:scale-95",W??""].filter(Boolean).join(" "),style:{...o(G),...void 0===oe?null:{maxWidth:oe},...q},children:t(n.Root,{open:!0,mode:"list",items:le,filter:null,value:Z,onValueChange:e=>ee(e),itemToStringValue:e=>e.label,children:[e("div",{className:`border-mp-outline-variant flex shrink-0 items-center border-b ${C[A]}`,children:e(n.Input,{autoFocus:!0,placeholder:R??Q.search,className:["mp-command-palette__input min-w-0 flex-1 bg-transparent font-[inherit]",T?.input??"","text-inherit outline-none","placeholder:text-mp-on-surface-variant caret-(--_mp-accent)",$[A]].join(" ")})}),e(n.List,{className:"mp-command-palette__list min-h-0 flex-1 overflow-y-auto overscroll-contain p-1"+(T?.list?` ${T.list}`:""),style:{maxHeight:se},children:(r,o)=>t(a.Fragment,{children:[r.group&&r.group!==le[o-1]?.group?e("div",{role:"presentation",className:`text-mp-on-surface-variant pt-2 pb-1 font-medium ${C[A]} ${h}`,children:r.group}):null,t(n.Item,{index:o,value:r,disabled:r.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),z?.(e),ae(!1))})(r),className:["mp-command-palette__row group rounded-mp-xs relative flex cursor-pointer",T?.row??"","items-center gap-3 select-none outline-none","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",C[A],M[A]].join(" "),children:[e(u,{layer:"inset-0 rounded-[inherit] bg-current",className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),f(r.icon)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:r.icon}):null,t("span",{className:"relative flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:r.label}),f(r.description)?e("span",{className:`text-mp-on-surface-variant truncate ${h}`,children:r.description}):null]}),r.shortcut?e(l,{size:"xs",keys:r.shortcut,className:"relative shrink-0"}):null]})]},re.get(r)??o)}),e(n.Empty,{className:`text-mp-on-surface-variant py-6 text-center ${C[A]} ${h}`,children:D??Q.empty})]})})})]})})}

package/dist/components/config/MPConfigProvider.d.ts

@@ -86,6 +86,22 @@ export interface MPConfigProviderProps {
      * gets the CSS half and not the other one.
      */
     dir?: 'ltr' | 'rtl';
+    /**
+     * Keeps a line under every field for its description or its error, whether
+     * or not there is one yet.
+     *
+     * By default the line is opened when there is something to put in it, and
+     * that moves everything below the field down by a line. Right after the
+     * reader typed, that is fine — a page that moves in answer to the reader is
+     * not a page that jumped. An error that arrives later is not: a server's
+     * answer to a submit, a check that waited for the reader to stop typing, or
+     * `MPForm`'s `errors` filled in from a response all push the page down with
+     * nothing the reader did to explain it, which is the shift Cumulative Layout
+     * Shift counts. With this the line is there from the start, and a message
+     * fills it in place.
+     * @default false
+     */
+    reserveSupportingText?: boolean;
     children?: React.ReactNode;
 }
 /**
@@ -149,7 +165,7 @@ export interface MPConfigProviderProps {
  * </MPConfigProvider>
  * ```
  */
-export declare function MPConfigProvider({ size, color, density, breakpoints, locale, dir, children }: MPConfigProviderProps): React.JSX.Element;
+export declare function MPConfigProvider({ size, color, density, breakpoints, locale, dir, reserveSupportingText, children }: MPConfigProviderProps): React.JSX.Element;
 /**
  * The configuration in force at this point in the tree.
  *

package/dist/components/config/MPConfigProvider.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import*as i from"react";import{DirectionProvider as o}from"@base-ui/react/direction-provider";import{MPConfigContext as e,useMPConfig as n}from"../../internal/config.js";import{MPLocaleContext as t,useMPLocale as s}from"../../internal/locale.js";import{WINDOW_CLASSES as a}from"../../internal/window-class.js";export function MPConfigProvider({size:c,color:d,density:l,breakpoints:p,locale:m,dir:f,children:v}){const u=n(),b=s(),j=a.map(r=>p?.[r]??u.breakpoints?.[r]??"").join(","),y=i.useMemo(()=>({size:c??u.size,color:d??u.color,density:l??u.density,breakpoints:p||u.breakpoints?{...u.breakpoints,...p}:void 0}),[c,d,l,u.size,u.color,u.density,j]),h=m??b,k=r(e.Provider,{value:y,children:r(t.Provider,{value:h,children:v})});return f?r(o,{direction:f,children:r("div",{dir:f,style:{display:"contents"},children:k})}):k}export{n as useMPConfig};
+import{jsx as r}from"react/jsx-runtime";import*as e from"react";import{DirectionProvider as i}from"@base-ui/react/direction-provider";import{MPConfigContext as o,useMPConfig as t}from"../../internal/config.js";import{MPLocaleContext as n,useMPLocale as s}from"../../internal/locale.js";import{WINDOW_CLASSES as p}from"../../internal/window-class.js";export function MPConfigProvider({size:a,color:c,density:d,breakpoints:l,locale:m,dir:v,reserveSupportingText:u,children:f}){const x=t(),b=s(),g=p.map(r=>l?.[r]??x.breakpoints?.[r]??"").join(","),j=e.useMemo(()=>({size:a??x.size,color:c??x.color,density:d??x.density,breakpoints:l||x.breakpoints?{...x.breakpoints,...l}:void 0,reserveSupportingText:u??x.reserveSupportingText}),[a,c,d,u,x.size,x.color,x.density,x.reserveSupportingText,g]),y=m??b,h=r(o.Provider,{value:j,children:r(n.Provider,{value:y,children:f})});return v?r(i,{direction:v,children:r("div",{dir:v,style:{display:"contents"},children:h})}):h}export{t as useMPConfig};