material-plus-ui 1.7.0 → 1.9.0

package/dist/components/pie-chart/MPPieChart.d.ts

@@ -28,6 +28,28 @@ export interface MPPieChartProps extends ChartBaseProps {
      * @default 0
      */
     startAngle?: number;
+    /**
+     * How much of the radius the hole takes, from `0` to `0.9`.
+     *
+     * Read by `donut` and `semi` only: `pie` is the word for a shape with no hole
+     * in it, and a filled disc with a `hole` would be a donut under another name.
+     *
+     * Thinner than about `0.4` and the ring stops reading as a ring; past `0.8`
+     * the slices are a hairline and their angles stop being comparable at all.
+     * The default leaves a hole wide enough for a figure and a word.
+     * @default 0.62
+     */
+    hole?: number;
+    /**
+     * How much page shows between two slices, in pixels. `0` lets them touch.
+     *
+     * It is drawn as a stroke in the surface's colour rather than by narrowing
+     * each sweep, so every slice keeps the angle its share earned however wide
+     * the gap is set. Past about a tenth of the radius the strokes start eating
+     * the small slices, which is the point at which a pie is the wrong chart.
+     * @default 2
+     */
+    gap?: number;
     /**
      * What goes in the hole. A ring with nothing in the middle is a pie with a
      * bite taken out of it — the total, or the one figure the chart is about, is
@@ -74,4 +96,4 @@ export interface MPPieChartProps extends ChartBaseProps {
  * A chart that is refiltered or resorted keeps every category the colour it had
  * — which is the whole reason a legend is worth reading twice.
  */
-export declare function MPPieChart({ data, categories, shape, startAngle, center, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, className, style, ...rest }: MPPieChartProps): React.JSX.Element;
+export declare function MPPieChart({ data, categories, shape, startAngle, hole, gap, center, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, labelColor, size: sizeProp, className, style, ...rest }: MPPieChartProps): React.JSX.Element;

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

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

package/dist/components/pill/MPPill.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent.js";import{inertProps as r}from"../../internal/inert.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,CONTROL_ICON as l,CONTROL_TEXT as c,hasContent as m,META_TEXT as d,PROSE_TEXT as p,SHEET_PAD_X as u}from"../../internal/scale.js";import{useMPSize as f}from"../../internal/config.js";const h={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},x={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},b={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},w={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=/*@__PURE__*/o.forwardRef(function({startIcon:g,endIcon:v,title:j,description:y,details:N,expanded:k=!1,position:_="static",side:z="top",onClick:B,variant:C="filled",size:I,color:R="secondary",className:$,style:H,children:P,...S},E){const F=f(I),L=o.useRef(null),M=o.useId(),[O,q]=o.useState(0);o.useEffect(()=>{const e=L.current;if(!e)return;const t=new ResizeObserver(()=>q(e.scrollHeight));return t.observe(e),q(e.scrollHeight),()=>t.disconnect()},[N]);const A=Boolean(B),D=u[F],G=t(n,{children:[m(g)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[F],height:l[F]},children:g}):null,m(j)||m(y)||m(P)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",x[F]].join(" "),children:[m(j)?e("span",{className:"max-w-full truncate",children:j}):null,m(y)?e("span",{className:`max-w-full truncate font-normal ${d} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:y}):null,P]}):null]});return t("div",{ref:E,"data-mp-size":F,"data-mp-variant":C,"data-mp-expanded":k||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",k?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",c[F],b[C],w[_][z],$??""].filter(Boolean).join(" "),style:{...i(R),...H},...S,children:[t("div",{className:["flex shrink-0 items-center py-1",h[F],a[F],A?"ps-0":D,m(v)?"pe-1":A?"pe-0":""].filter(Boolean).join(" "),children:[A?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent font-[inherit] text-inherit","rounded-[inherit]",a[F],D,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),"aria-expanded":m(N)?k:void 0,"aria-controls":m(N)?M:void 0,onClick:B,children:[e(s,{}),G]}):G,m(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]}),m(N)?e("div",{id:M,className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:k?O:0},...r(!k),children:e("div",{ref:L,className:`${D} pb-2 whitespace-normal ${p[F]}`,children:N})}):null]})});
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent.js";import{inertProps as r}from"../../internal/inert.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,CONTROL_ICON as l,CONTROL_TEXT as c,hasContent as m,META_TEXT as d,PROSE_TEXT as p,SHEET_PAD_X as u}from"../../internal/scale.js";import{useMPSize as f}from"../../internal/config.js";const x={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},h={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},b={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},w={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=/*@__PURE__*/o.forwardRef(function({startIcon:g,endIcon:v,title:y,description:j,details:_,expanded:k=!1,position:N="static",side:z="top",onClick:B,variant:C="filled",size:I,color:R="secondary",className:$,style:H,children:P,...S},E){const F=f(I),L=o.useRef(null),M=o.useId(),[O,q]=o.useState(0);o.useEffect(()=>{const e=L.current;if(!e)return;const t=new ResizeObserver(()=>q(e.scrollHeight));return t.observe(e),q(e.scrollHeight),()=>t.disconnect()},[_]);const A=Boolean(B),D=u[F],G=t(n,{children:[m(g)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[F],height:l[F]},children:g}):null,m(y)||m(j)||m(P)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",h[F]].join(" "),children:[m(y)?e("span",{className:"max-w-full truncate",children:y}):null,m(j)?e("span",{className:`max-w-full truncate font-normal ${d} supports-[(not_(-webkit-appearance:-apple-pay-button))_or_(contain-intrinsic-size:1px)]:[color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:j}):null,P]}):null]});return t("div",{ref:E,"data-mp-size":F,"data-mp-variant":C,"data-mp-expanded":k||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",k?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",c[F],b[C],w[N][z],$??""].filter(Boolean).join(" "),style:{...i(R),...H},...S,children:[t("div",{className:["flex shrink-0 items-center py-1",x[F],a[F],A?"ps-0":D,m(v)?"pe-1":A?"pe-0":""].filter(Boolean).join(" "),children:[A?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent text-inherit [font:inherit]","rounded-[inherit]",a[F],D,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),"aria-expanded":m(_)?k:void 0,"aria-controls":m(_)?M:void 0,onClick:B,children:[e(s,{}),G]}):G,m(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]}),m(_)?e("div",{id:M,className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:k?O:0},...r(!k),children:e("div",{ref:L,className:`${D} pb-2 whitespace-normal ${p[F]}`,children:_})}):null]})});

package/dist/components/popconfirm/MPPopconfirm.d.ts

@@ -17,7 +17,7 @@ export interface MPPopconfirmProps {
      * Called when the reader says yes.
      *
      * A callback rather than a promise, and that is the whole difference from
-     * [`useMPConfirm`](../feedback/confirm): this one is written where the button
+     * [`useMPConfirm`](../hooks/confirm): this one is written where the button
      * is, so there is already a handler there to put it in.
      */
     onConfirm?: () => void;
@@ -63,7 +63,7 @@ export interface MPPopconfirmProps {
  * They ask the same question and the difference is **where the reader's eye
  * is**, which is a real difference and not a stylistic one:
  *
- * | | `MPPopconfirm` | [`useMPConfirm`](../feedback/confirm) |
+ * | | `MPPopconfirm` | [`useMPConfirm`](../hooks/confirm) |
  * | --- | --- | --- |
  * | Appears | at the control | in the middle of the screen |
  * | The page behind | stays put | goes under a scrim |

package/dist/components/popover/MPPopover.d.ts

@@ -107,6 +107,7 @@ export interface MPPopoverProps {
     style?: React.CSSProperties;
 }
 export type MPPopoverCloseProps = React.ComponentProps<typeof Popover.Close>;
+/** The wedge, at roughly a third of the sheet's corner per step. */
 /**
  * Closes the popover it is inside.
  *

package/dist/components/popover/MPPopover.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Popover as i}from"@base-ui/react/popover";import{MPIcon as s}from"../icon/MPIcon.js";import{CloseIcon as t}from"../../constants/icons.js";import{useMPLocale as r,useMPMessages as a}from"../../internal/locale.js";import{cssLength as l}from"../../internal/length.js";import{COMMON as n}from"../../internal/messages/common.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{hasContent as c,META_TEXT as d,PROSE_TEXT as p,SHEET_GAP as f,SHEET_PAD as u,SHEET_TITLE as h}from"../../internal/scale.js";import{FADE as x,PORTAL_LAYER as g}from"../../internal/surface.js";import{useMPSize as v}from"../../internal/config.js";const b={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},j={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=i.Close;export function MPPopover({trigger:w,title:N,description:O,side:P="bottom",align:y="center",sideOffset:C=8,alignOffset:z=0,arrow:k=!1,open:M,defaultOpen:L,onOpenChange:B,modal:T=!1,dismissible:$=!0,showClose:A=!1,closeLabel:D,locale:I,width:R,size:S,className:W,style:_,children:q}){const E=v(S),F=r(I),G=a(n,F),H=c(N)||c(O),J=j[E];return o(i.Root,{open:M,defaultOpen:L,modal:T,onOpenChange:(e,o)=>{$||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?B?.(e):o.cancel()},children:[w?e(i.Trigger,{render:w}):null,e(i.Portal,{children:e(i.Positioner,{className:g,side:P,align:y,sideOffset:C,alignOffset:z,children:o(i.Popup,{"data-mp-size":E,className:["mp-popover rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",u[E],f[E],p[E],void 0===R?b[E]:"",x,W??""].filter(Boolean).join(" "),style:{...void 0===R?null:{maxWidth:l(R)},..._},children:[k?e(i.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:e("svg",{width:J,height:J/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-color-surface-container)"})})}):null,H||A?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[c(N)?e(i.Title,{className:`m-0 ${h[E]}`,children:N}):null,c(O)?e(i.Description,{className:`text-mp-on-surface-variant m-0 ${d}`,children:O}):null]}),A?o(i.Close,{"aria-label":D??G.close,className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","rounded-mp-full -m-1 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(m,{}),e(s,{icon:t,size:18})]}):null]}):null,c(q)?e("div",{className:"min-w-0",children:q}):null]})})})]})}
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{POPUP_ARROW_SIZE as n,POPUP_ARROW_TURN as r,PopupArrow as s}from"../../internal/PopupArrow.js";import{Popover as l}from"@base-ui/react/popover";import{MPIcon as i}from"../icon/MPIcon.js";import{CloseIcon as a}from"../../constants/icons.js";import{useMPLocale as t,useMPMessages as m}from"../../internal/locale.js";import{cssLength as c}from"../../internal/length.js";import{COMMON as p}from"../../internal/messages/common.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{hasContent as d,META_TEXT as u,PROSE_TEXT as x,SHEET_GAP as h,SHEET_PAD as g,SHEET_TITLE as v}from"../../internal/scale.js";import{FADE as j,PORTAL_LAYER as b}from"../../internal/surface.js";import{useMPSize as w}from"../../internal/config.js";const N={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"};export const MPPopoverClose=l.Close;export function MPPopover({trigger:P,title:O,description:y,side:C="bottom",align:z="center",sideOffset:k=8,alignOffset:M=0,arrow:A=!1,open:L,defaultOpen:T,onOpenChange:$,modal:B=!1,dismissible:D=!0,showClose:I=!1,closeLabel:R,locale:S,width:W,size:_,className:q,style:E,children:F}){const G=w(_),H=t(S),J=m(p,H),K=d(O)||d(y),Q=n[G];return o(l.Root,{open:L,defaultOpen:T,modal:B,onOpenChange:(e,o)=>{D||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?$?.(e):o.cancel()},children:[P?e(l.Trigger,{render:P}):null,e(l.Portal,{children:e(l.Positioner,{className:b,side:C,align:z,sideOffset:k,alignOffset:M,children:o(l.Popup,{"data-mp-size":G,className:["mp-popover rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",g[G],h[G],x[G],void 0===W?N[G]:"",j,q??""].filter(Boolean).join(" "),style:{...void 0===W?null:{maxWidth:c(W)},...E},children:[A?e(l.Arrow,{className:r,children:e(s,{size:Q,fill:"var(--_mp-color-surface-container)"})}):null,K||I?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[d(O)?e(l.Title,{className:`m-0 ${v[G]}`,children:O}):null,d(y)?e(l.Description,{className:`text-mp-on-surface-variant m-0 ${u}`,children:y}):null]}),I?o(l.Close,{"aria-label":R??J.close,className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","rounded-mp-full -m-1 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(f,{}),e(i,{icon:a,size:18})]}):null]}):null,d(F)?e("div",{className:"min-w-0",children:F}):null]})})})]})}

package/dist/components/portal/MPPortal.d.ts

@@ -62,7 +62,7 @@ export interface MPPortalProps {
  *
  * A portal moves an element in the DOM and nothing else. Focus, Escape, an inert
  * background, a scrim and a z-index are the *dialog's* concerns —
- * [MPDialog](./dialog) and [MPDrawer](./drawer) are those, and a hand-built
+ * [MPDialog](../feedback/dialog) and [MPDrawer](./drawer) are those, and a hand-built
  * overlay in a portal has none of it. Reach for them before this.
  *
  * ## Events still bubble through React

package/dist/components/radio-group/MPRadioGroup.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as n}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent.js";import{DOT_MOTION as t}from"../../internal/mark.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{MPSupportingText as d}from"../../internal/SupportingText.js";import{META_TEXT as c,PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const x={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[10px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-3",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},h=/*@__PURE__*/a.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/a.forwardRef(function({value:l,label:o,description:d,disabled:u=!1,id:f,className:g,style:b},z){const j=a.useContext(h),v=x[j.size],y=a.useId(),N=f??y;return e(n.Root,{className:["mp-radio inline-block align-top",g??""].filter(Boolean).join(" "),style:b,disabled:u,"data-mp-value":l,children:r("div",{className:["flex items-start gap-3",m[j.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(i.Root,{ref:z,id:N,value:l,disabled:u,className:["mp-radio__dot group relative inline-flex shrink-0 items-center justify-center","box-border rounded-full border-2 p-0","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color] duration-(--mp-sys-motion-duration-short4)",v.ring,u?"border-mp-on-surface/38 cursor-default":[j.readOnly?"cursor-default":"cursor-pointer",j.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[u?null:e(s,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",v.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["mp-radio__fill rounded-full",v.fill,t,u?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(d)?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(n.Label,{htmlFor:N,className:["leading-[1.4]",u?"text-mp-on-surface/38 cursor-default":j.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(d)?e(n.Description,{className:`${c} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38`,children:d}):null]}):null]})})});export const MPRadioGroup=/*@__PURE__*/a.forwardRef(function({value:i,defaultValue:t,onValueChange:s,label:m,description:x,errorMessage:g,orientation:b="vertical",size:z,color:j,required:v=!1,disabled:y=!1,readOnly:N=!1,name:R,children:_,className:k,style:O},w){const M=f(z),C=u(j),V=p(g),I=V?"error":C,P=a.useId(),S=a.useMemo(()=>({size:M,readOnly:N,invalid:V}),[M,N,V]);return e(h.Provider,{value:S,children:r(n.Root,{className:["mp-radio-group flex flex-col gap-2",k??""].filter(Boolean).join(" "),disabled:y,invalid:V,"data-mp-size":M,"data-mp-orientation":b,style:{...o(I),...O},children:[p(m)?r("span",{id:P,className:[c,y?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[m,v?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{ref:w,"aria-labelledby":p(m)?P:void 0,value:i,defaultValue:t,onValueChange:e=>s?.(String(e??"")),disabled:y,readOnly:N,required:v,name:R,className:["flex","horizontal"===b?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:_}),e(d,{description:x,errorMessage:g})]})})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as n}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent.js";import{DOT_MOTION as t}from"../../internal/mark.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{MPSupportingText as d}from"../../internal/SupportingText.js";import{META_TEXT as c,PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const x={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[10px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-3",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},h=/*@__PURE__*/a.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/a.forwardRef(function({value:l,label:o,description:d,disabled:u=!1,id:f,className:g,style:b},z){const j=a.useContext(h),v=x[j.size],y=a.useId(),N=f??y;return e(n.Root,{className:["mp-radio inline-block max-w-full align-top",g??""].filter(Boolean).join(" "),style:b,disabled:u,"data-mp-value":l,children:r("div",{className:["flex items-start gap-3",m[j.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(i.Root,{ref:z,id:N,value:l,disabled:u,className:["mp-radio__dot group relative inline-flex shrink-0 items-center justify-center","box-border rounded-full border-2 p-0","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color] duration-(--mp-sys-motion-duration-short4)",v.ring,u?"border-mp-on-surface/38 cursor-default":[j.readOnly?"cursor-default":"cursor-pointer",j.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[u?null:e(s,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",v.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["mp-radio__fill rounded-full",v.fill,t,u?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(d)?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(n.Label,{htmlFor:N,className:["leading-[1.4]",u?"text-mp-on-surface/38 cursor-default":j.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(d)?e(n.Description,{className:`${c} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 m-0`,children:d}):null]}):null]})})});export const MPRadioGroup=/*@__PURE__*/a.forwardRef(function({value:i,defaultValue:t,onValueChange:s,label:m,description:x,errorMessage:g,orientation:b="vertical",size:z,color:j,required:v=!1,disabled:y=!1,readOnly:N=!1,name:R,children:_,className:k,style:w},O){const M=f(z),C=u(j),V=p(g),I=V?"error":C,P=a.useId(),S=a.useMemo(()=>({size:M,readOnly:N,invalid:V}),[M,N,V]);return e(h.Provider,{value:S,children:r(n.Root,{className:["mp-radio-group flex flex-col gap-2",k??""].filter(Boolean).join(" "),disabled:y,invalid:V,"data-mp-size":M,"data-mp-orientation":b,style:{...o(I),...w},children:[p(m)?r("span",{id:P,className:[c,y?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[m,v?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{ref:O,"aria-labelledby":p(m)?P:void 0,value:i,defaultValue:t,onValueChange:e=>s?.(String(e??"")),disabled:y,readOnly:N,required:v,name:R,className:["flex","horizontal"===b?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:_}),e(d,{description:x,errorMessage:g})]})})});

package/dist/components/rating/MPRating.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as i}from"../icon/MPIcon.js";import{StarIcon as a}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{fillMessage as o}from"../../internal/i18n.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{RATING as m}from"../../internal/messages/rating.js";import{VISUALLY_HIDDEN as c}from"../../internal/visually-hidden.js";import{useMPColor as d,useMPSize as u}from"../../internal/config.js";const p={xs:16,sm:20,md:24,lg:30,xl:36},h={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const MPRating=/*@__PURE__*/n.forwardRef(function({value:f,defaultValue:g=0,onValueChange:x,count:y=5,precision:v=1,icon:j,emptyIcon:b,clearable:M=!0,readOnly:N=!1,disabled:w=!1,name:P,required:S=!1,size:R,color:_,locale:z,labels:I,structuredData:k=!1,className:q,style:C,onPointerLeave:L,...V},A){const B=u(R),F=d(_),D=s(z),E=l(m,D,I),O=n.useId(),T=P??O,[G,H]=n.useState(g),J=void 0!==f,K=J?f:G,[Q,U]=n.useState(null),W=Math.max(1,Math.floor(y)),X=v>0&&v<=1?v:1,Y=Math.round(1/X),Z=Math.max(0,Math.min(W,Q??K)),$=e=>e<=0?E.empty:o(E.value,{value:String(e),max:String(W)}),ee=e=>{J||H(e),x?.(e)},te=t=>{const n=e(i,{icon:a,size:p[B],className:t?"[&>svg]:fill-current":""});return(t?j:b)??n},ne=Array.from({length:W},(n,i)=>{const a=Math.max(0,Math.min(1,Z-i));return t("span",{className:["mp-rating__star relative inline-flex shrink-0","rounded-mp-xs",N||w?"":["outline-mp-secondary has-[:focus-visible]:outline-2","has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-solid"].join(" ")].filter(Boolean).join(" "),style:{width:p[B],height:p[B]},children:[e("span",{className:["flex items-center justify-center",w?"text-mp-on-surface/38":"text-mp-outline"].join(" "),style:{width:p[B],height:p[B]},children:te(!1)}),e("span",{"aria-hidden":"true",className:["mp-rating__fill pointer-events-none absolute inset-y-0 start-0 overflow-hidden","transition-[width] duration-(--mp-sys-motion-duration-short2) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{width:100*a+"%"},children:e("span",{className:["flex items-center justify-center","transition-colors duration-(--mp-sys-motion-duration-short4)",w?"text-mp-on-surface/38":"text-(--_mp-accent)"].join(" "),style:{width:p[B],height:p[B]},children:te(!0)})}),N?null:Array.from({length:Y},(t,n)=>{const a=Number((i+(n+1)*X).toFixed(4));return e("label",{className:["absolute inset-y-0",w?"":"cursor-pointer"].join(" "),style:{insetInlineStart:100*n/Y+"%",width:100/Y+"%"},onPointerEnter:()=>{w||U(a)},children:e("input",{type:"radio",className:c,name:T,value:a,checked:K===a,disabled:w,required:S,"aria-label":$(a),onChange:()=>ee(a),onClick:()=>{M&&K===a&&ee(0)}})},a)})]},i)}),ie=["mp-rating inline-flex items-center align-middle",h[B],q??""].filter(Boolean).join(" "),ae={...r(F),...C};if(N){const i=Math.max(0,Math.min(W,K));return t("div",{ref:A,role:"img","data-mp-size":B,"aria-label":$(i),itemScope:k||void 0,itemType:k?"https://schema.org/Rating":void 0,className:ie,style:ae,onPointerLeave:L,...V,children:[k?t(n.Fragment,{children:[e("meta",{itemProp:"ratingValue",content:String(i)}),e("meta",{itemProp:"bestRating",content:String(W)}),e("meta",{itemProp:"worstRating",content:"0"})]}):null,ne]})}return e("div",{ref:A,role:"radiogroup","data-mp-size":B,"aria-label":E.label,"aria-disabled":w||void 0,"aria-required":S||void 0,className:ie,style:ae,onPointerLeave:e=>{U(null),L?.(e)},...V,children:ne})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as i}from"../icon/MPIcon.js";import{StarIcon as a}from"../../constants/icons.js";import{accentSlots as o}from"../../internal/accent.js";import{fillMessage as r}from"../../internal/i18n.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{RATING as m}from"../../internal/messages/rating.js";import{VISUALLY_HIDDEN as c}from"../../internal/visually-hidden.js";import{useMPColor as u,useMPSize as d}from"../../internal/config.js";const p={xs:16,sm:20,md:24,lg:30,xl:36},h={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const MPRating=/*@__PURE__*/n.forwardRef(function({value:f,defaultValue:g=0,onValueChange:x,count:y=5,precision:v=1,icon:j,emptyIcon:b,clearable:w=!0,readOnly:M=!1,disabled:N=!1,name:P,required:S=!1,size:_,color:R,locale:z,labels:I,structuredData:k=!1,className:q,style:C,onPointerLeave:L,...V},A){const B=d(_),F=u(R),D=s(z),E=l(m,D,I),O=n.useId(),T=P??O,[G,H]=n.useState(g),J=void 0!==f,K=J?f:G,[Q,U]=n.useState(null),W=Math.max(1,Math.floor(y)),X=v>0&&v<=1?v:1,Y=Math.round(1/X),Z=Math.max(0,Math.min(W,Q??K)),$=e=>e<=0?E.empty:r(E.value,{value:String(e),max:String(W)}),ee=e=>{J||H(e),x?.(e)},te=t=>{const n=e(i,{icon:a,size:p[B],className:t?"[&>svg]:fill-current":""});return(t?j:b)??n},ne=Array.from({length:W},(n,i)=>{const a=Math.max(0,Math.min(1,Z-i));return t("span",{className:["mp-rating__star relative inline-flex shrink-0","rounded-mp-xs",M||N?"":["outline-mp-secondary has-[:focus-visible]:outline-2","has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-solid","supports-[not_selector(:has(*))]:focus-within:outline-2","supports-[not_selector(:has(*))]:focus-within:outline-offset-2","supports-[not_selector(:has(*))]:focus-within:outline-solid"].join(" ")].filter(Boolean).join(" "),style:{width:p[B],height:p[B]},children:[e("span",{className:["flex items-center justify-center",N?"text-mp-on-surface/38":"text-mp-outline"].join(" "),style:{width:p[B],height:p[B]},children:te(!1)}),e("span",{"aria-hidden":"true",className:["mp-rating__fill pointer-events-none absolute inset-y-0 start-0 overflow-hidden","transition-[width] duration-(--mp-sys-motion-duration-short2) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{width:100*a+"%"},children:e("span",{className:["flex items-center justify-center","transition-colors duration-(--mp-sys-motion-duration-short4)",N?"text-mp-on-surface/38":"text-(--_mp-accent)"].join(" "),style:{width:p[B],height:p[B]},children:te(!0)})}),M?null:Array.from({length:Y},(t,n)=>{const a=Number((i+(n+1)*X).toFixed(4));return e("label",{className:["absolute inset-y-0",N?"":"cursor-pointer"].join(" "),style:{insetInlineStart:100*n/Y+"%",width:100/Y+"%"},onPointerEnter:()=>{N||U(a)},children:e("input",{type:"radio",className:c,name:T,value:a,checked:K===a,disabled:N,required:S,"aria-label":$(a),onChange:()=>ee(a),onClick:()=>{w&&K===a&&ee(0)}})},a)})]},i)}),ie=["mp-rating inline-flex items-center align-middle",h[B],q??""].filter(Boolean).join(" "),ae={...o(F),...C};if(M){const i=Math.max(0,Math.min(W,K));return t("div",{ref:A,role:"img","data-mp-size":B,"aria-label":$(i),itemScope:k||void 0,itemType:k?"https://schema.org/Rating":void 0,className:ie,style:ae,onPointerLeave:L,...V,children:[k?t(n.Fragment,{children:[e("meta",{itemProp:"ratingValue",content:String(i)}),e("meta",{itemProp:"bestRating",content:String(W)}),e("meta",{itemProp:"worstRating",content:"0"})]}):null,ne]})}return e("div",{ref:A,role:"radiogroup","data-mp-size":B,"aria-label":E.label,"aria-disabled":N||void 0,"aria-required":S||void 0,className:ie,style:ae,onPointerLeave:e=>{U(null),L?.(e)},...V,children:ne})});

package/dist/components/scatter-chart/MPScatterChart.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { type CartesianChartProps } from '../../internal/ChartFrame.js';
-export interface MPScatterChartProps extends CartesianChartProps {
+/**
+ * No `zoom`: what a drag would cut is a row of category slots, and a scatter
+ * has two value axes and no row. Crop it with `xAxis` and `yAxis` instead.
+ */
+export interface MPScatterChartProps extends Omit<CartesianChartProps, 'zoom'> {
     /**
      * Sizes each mark by its point's `z`, so a third number rides along.
      *

package/dist/components/segmented-button/MPSegmentedButton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Toggle as o}from"@base-ui/react/toggle";import{ToggleGroup as r}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as s}from"../../constants/icons.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as c,CONTROL_ICON as d,CONTROL_PAD_X as m,CONTROL_TEXT as u}from"../../internal/scale.js";import{useMPSize as p}from"../../internal/config.js";export const MPSegmentedButton=/*@__PURE__*/n.forwardRef(function({items:n,value:f,defaultValue:b,onValueChange:h,multiple:g=!1,showCheck:y=!0,size:j,fullWidth:x=!1,disabled:v=!1,"aria-label":w,className:N,style:B},V){const k=p(j);return e(r,{ref:V,"aria-label":w,value:f,defaultValue:b,onValueChange:e=>h?.(e),multiple:g,disabled:v,"data-mp-size":k,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",v?"border-mp-on-surface/12":"border-mp-outline",x?"flex w-full":"inline-flex w-fit",c[k],N??""].filter(Boolean).join(" "),style:B,children:n.map((n,r)=>{const c=v||n.disabled;return t(o,{value:n.value,disabled:n.disabled,className:["mp-segmented-button__segment group relative flex h-full items-center","box-border justify-center bg-transparent font-[inherit] whitespace-nowrap","select-none","appearance-none overflow-hidden outline-none","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",u[k],l[k],m[k],0===r?"":"border-s",c?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":["border-mp-outline cursor-pointer","text-mp-on-surface","data-pressed:bg-mp-secondary-container","data-pressed:text-mp-on-secondary-container"].join(" "),x?"flex-1":""].filter(Boolean).join(" "),children:[c?null:e(i,{}),y||n.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:d[k],height:d[k]},children:[y?e("span",{className:["absolute inset-0 flex items-center justify-center opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-pressed:opacity-100"].join(" "),children:e(a,{icon:s,size:d[k]})}):null,n.icon?e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",y?"group-data-pressed:opacity-0":""].filter(Boolean).join(" "),children:n.icon}):null]}):null,e("span",{className:"truncate",children:n.label})]},`${r}:${n.value}`)})})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{Toggle as o}from"@base-ui/react/toggle";import{ToggleGroup as n}from"@base-ui/react/toggle-group";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as s}from"../../constants/icons.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as d,CONTROL_ICON as c,CONTROL_PAD_X as m,CONTROL_TEXT as u}from"../../internal/scale.js";import{useMPSize as p}from"../../internal/config.js";export const MPSegmentedButton=/*@__PURE__*/r.forwardRef(function({items:r,value:f,defaultValue:b,onValueChange:h,multiple:g=!1,showCheck:y=!0,size:j,fullWidth:x=!1,disabled:v=!1,"aria-label":w,className:N,style:B},V){const k=p(j);return e(n,{ref:V,"aria-label":w,value:f,defaultValue:b,onValueChange:e=>h?.(e),multiple:g,disabled:v,"data-mp-size":k,className:["mp-segmented-button rounded-mp-full box-border items-center align-middle","overflow-hidden border",v?"border-mp-on-surface/12":"border-mp-outline",x?"flex w-full":"inline-flex w-fit",d[k],N??""].filter(Boolean).join(" "),style:B,children:r.map((r,n)=>{const d=v||r.disabled;return t(o,{value:r.value,disabled:r.disabled,className:["mp-segmented-button__segment group relative flex h-full items-center","box-border justify-center bg-transparent font-[inherit] whitespace-nowrap","select-none","appearance-none overflow-hidden outline-none","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",u[k],l[k],m[k],0===n?"border-0":"border-y-0 border-e-0 border-s",d?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":["border-mp-outline cursor-pointer","text-mp-on-surface","data-pressed:bg-mp-secondary-container","data-pressed:text-mp-on-secondary-container"].join(" "),x?"flex-1":""].filter(Boolean).join(" "),children:[d?null:e(i,{}),y||r.icon?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:c[k],height:c[k]},children:[y?e("span",{className:["absolute inset-0 flex items-center justify-center opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard group-data-pressed:opacity-100"].join(" "),children:e(a,{icon:s,size:c[k]})}):null,r.icon?e("span",{className:["absolute inset-0 flex items-center justify-center","transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",y?"group-data-pressed:opacity-0":""].filter(Boolean).join(" "),children:r.icon}):null]}):null,e("span",{className:"truncate",children:r.label})]},`${n}:${r.value}`)})})});

package/dist/components/select/MPSelect.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Select as t}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,ChevronDownIcon as l}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as c,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{MPSupportingText as p}from"../../internal/SupportingText.js";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale.js";import{MARK_MOTION_KEPT as g}from"../../internal/mark.js";import{FADE as x,PORTAL_LAYER as b}from"../../internal/surface.js";import{useMPSize as v}from"../../internal/config.js";const j={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const MPSelect=/*@__PURE__*/n.forwardRef(function({items:y,value:N,defaultValue:k,onValueChange:w,onKeyDown:C,onKeyUp:I,onFocus:M,onBlur:S,onClick:z,onDoubleClick:P,onContextMenu:_,placeholder:B,label:O,floatingLabel:V=!0,description:q,errorMessage:D,startIcon:F,size:K,fullWidth:T=!1,required:L=!1,disabled:R=!1,readOnly:$=!1,name:U,id:W,classNames:A,className:E,style:G},H){const J=v(K),Q=h(D),X=j[J],Y=n.useId(),Z=W??Y,[ee,ae]=n.useState(k??null),[ne,te]=n.useState(!1),re=void 0===N?ee:N,{shrunk:oe,focusProps:ie}=d({floating:V&&h(O),filled:null!==re&&""!==re,pinned:ne||!!F}),le=n.useMemo(()=>y.map(e=>({label:e.label??String(e.value),value:e.value})),[y]);return a(r.Root,{className:["mp-select group flex-col align-top",T?"flex w-full":"inline-flex w-fit",E??""].filter(Boolean).join(" "),style:G,disabled:R,invalid:Q,"data-mp-size":J,...ie,children:[a(t.Root,{id:Z,name:U,items:le,value:N,defaultValue:k,onValueChange:e=>{ae(e??null),w?.(e??null)},onOpenChange:te,disabled:R,readOnly:$,required:L,children:[a("div",{className:"relative w-full",children:[a(t.Trigger,{ref:H,onKeyDown:C,onKeyUp:I,onFocus:M,onBlur:S,onClick:z,onDoubleClick:P,onContextMenu:_,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",X.padding,X.height,f[J],R?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+($?"cursor-default":"cursor-pointer")].join(" "),children:[F?e("span",{className:["flex shrink-0 items-center",R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:F}):null,e(t.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",R?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:oe?B:void 0}),e(t.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(o,{icon:l,size:u[J]})})]}),e(c,{label:O,required:L,notched:oe}),h(O)?e(s,{size:J,label:O,required:L,htmlFor:Z,shrunk:oe}):null]}),e(t.Portal,{children:e(t.Positioner,{className:b,sideOffset:4,alignItemWithTrigger:!1,children:e(t.Popup,{className:["mp-select__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface min-w-[var(--anchor-width)] outline-none",f[J],x,A?.popup??""].filter(Boolean).join(" "),children:e(t.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:y.map((n,r)=>a(t.Item,{value:n.value,disabled:n.disabled,className:["mp-select__item group rounded-mp-xs relative flex cursor-pointer items-center",A?.item??"","gap-3 py-2 pe-3 ps-2 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:text-mp-on-secondary-container","data-selected:bg-mp-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(m,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:e(t.ItemIndicator,{keepMounted:!0,className:`mp-select__mark ${g}`,children:e(o,{icon:i,size:18})})}),e(t.ItemText,{className:"min-w-0 flex-1 truncate",children:n.label??String(n.value)})]},`${r}:${String(n.value)}`))})})})})]}),e(p,{description:q,errorMessage:D,className:X.padding})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Select as t}from"@base-ui/react/select";import{Field as r}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,ChevronDownIcon as l}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as c,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{MPSupportingText as p}from"../../internal/SupportingText.js";import{CONTROL_ICON as u,PROSE_TEXT as f,hasContent as h}from"../../internal/scale.js";import{MARK_MOTION_KEPT as g}from"../../internal/mark.js";import{FADE as x,PORTAL_LAYER as b}from"../../internal/surface.js";import{useMPSize as v}from"../../internal/config.js";const j={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}};export const MPSelect=/*@__PURE__*/n.forwardRef(function({items:y,value:N,defaultValue:k,onValueChange:w,onKeyDown:C,onKeyUp:I,onFocus:M,onBlur:S,onClick:z,onDoubleClick:P,onContextMenu:_,placeholder:B,label:O,floatingLabel:V=!0,description:q,errorMessage:D,startIcon:F,size:K,fullWidth:T=!1,required:L=!1,disabled:R=!1,readOnly:$=!1,name:U,id:W,classNames:A,className:E,style:G},H){const J=v(K),Q=h(D),X=j[J],Y=n.useId(),Z=W??Y,[ee,ae]=n.useState(k??null),[ne,te]=n.useState(!1),re=void 0===N?ee:N,{shrunk:oe,focusProps:ie}=d({floating:V&&h(O),filled:null!==re&&""!==re,pinned:ne||!!F}),le=n.useMemo(()=>y.map(e=>({label:e.label??String(e.value),value:e.value})),[y]);return a(r.Root,{className:["mp-select group flex-col align-top",T?"flex w-full":"inline-flex w-fit",E??""].filter(Boolean).join(" "),style:G,disabled:R,invalid:Q,"data-mp-size":J,...ie,children:[a(t.Root,{id:Z,name:U,items:le,value:N,defaultValue:k,onValueChange:e=>{ae(e??null),w?.(e??null)},onOpenChange:te,disabled:R,readOnly:$,required:L,children:[a("div",{className:"relative w-full",children:[a(t.Trigger,{ref:H,onKeyDown:C,onKeyUp:I,onFocus:M,onBlur:S,onClick:z,onDoubleClick:P,onContextMenu:_,className:["relative flex w-full items-center gap-2 select-none","appearance-none border-0 bg-transparent font-[inherit] outline-none",X.padding,X.height,f[J],R?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+($?"cursor-default":"cursor-pointer")].join(" "),children:[F?e("span",{className:["flex shrink-0 items-center",R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:F}):null,e(t.Value,{className:["min-w-0 flex-1 truncate text-start","data-placeholder:text-mp-on-surface-variant",R?"data-placeholder:text-mp-on-surface/38":""].filter(Boolean).join(" "),placeholder:oe?B:void 0}),e(t.Icon,{className:["flex shrink-0 items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180",R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:e(o,{icon:l,size:u[J]})})]}),e(c,{label:O,required:L,notched:oe}),h(O)?e(s,{size:J,label:O,required:L,htmlFor:Z,shrunk:oe}):null]}),e(t.Portal,{children:e(t.Positioner,{className:b,sideOffset:4,alignItemWithTrigger:!1,children:e(t.Popup,{className:["mp-select__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface min-w-[var(--anchor-width)] outline-none",f[J],x,A?.popup??""].filter(Boolean).join(" "),children:e(t.List,{className:"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",children:y.map((n,r)=>a(t.Item,{value:n.value,disabled:n.disabled,className:["mp-select__item group rounded-mp-xs relative flex cursor-pointer items-center",A?.item??"","gap-3 py-2 pe-3 ps-2 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:text-mp-on-secondary-container","data-selected:bg-mp-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(m,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:e(t.ItemIndicator,{keepMounted:!0,className:`mp-select__mark ${g}`,children:e(o,{icon:i,size:18})})}),e(t.ItemText,{className:"min-w-0 flex-1 truncate",children:n.label??String(n.value)})]},`${r}:${String(n.value)}`))})})})})]}),e(p,{description:q,errorMessage:D,className:X.padding})]})});

package/dist/components/sparkline/MPSparkline.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPChartCurve, MPColor, MPSize } from '../../types.js';
+import type { MPChartCurve, MPChartGaps, MPColor, MPSize } from '../../types.js';
 /** What the series is drawn as. */
 export type MPSparklineShape = 'line' | 'area' | 'bar';
 export interface MPSparklineProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
@@ -12,6 +12,19 @@ export interface MPSparklineProps extends Omit<React.ComponentPropsWithoutRef<'d
     shape?: MPSparklineShape;
     /** How the line between two points is drawn. @default 'linear' */
     curve?: MPChartCurve;
+    /**
+     * What the shape does where the series has no value.
+     *
+     * `break` stops and starts again, `connect` joins the two sides with a dashed
+     * run, and `zero` reads the missing point as a zero and opens the scale to
+     * hold it. The sentence this mark is read out as counts the readings it
+     * actually has, whichever is chosen.
+     *
+     * `bar` has no line to join, so it takes `zero` and reads `connect` as
+     * `break`.
+     * @default 'break'
+     */
+    gaps?: MPChartGaps;
     /**
      * Marks the newest point.
      *

package/dist/components/sparkline/MPSparkline.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{useMPLocale as i,useMPMessages as l}from"../../internal/locale.js";import{useMPSize as o}from"../../internal/config.js";import{fillMessage as a}from"../../internal/i18n.js";import{SPARKLINE as s}from"../../internal/messages/sparkline.js";import{TABLE as m}from"../../internal/messages/table.js";import{cssLength as c}from"../../internal/length.js";import{areaPath as p,barPath as f,extentOf as h,linePath as u,seriesColor as d}from"../../internal/chart.js";const g={xs:16,sm:24,md:32,lg:44,xl:56},b={xs:1.25,sm:1.5,md:2,lg:2.5,xl:3};export const MPSparkline=/*@__PURE__*/n.forwardRef(function({data:k,shape:x="line",curve:y="linear",endDot:j=!0,baseline:v,min:w,max:M,width:N="100%",height:F,color:L,label:$,locale:z,size:B,className:E,style:R,...W},A){const D=o(B),I=i(z),P=l(s,I),S=l(m,I),q=F??g[D],C=b[D],G=d(0,L),H=100,J=q,K="bar"===x?0:C/2,O=h(k,w,M),Q=O.max-O.min,T=e=>J-K-(e-O.min)/Q*(J-2*K),U=k.length>1?H/(k.length-1):0,V=k.map((e,t)=>null!==e&&Number.isFinite(e)?{x:k.length>1?t*U:50,y:T(e)}:null),X=v??O.min,Y=[...V].reverse().find(e=>null!==e)??null,Z=n.useMemo(()=>{if(void 0!==$)return $;const e=k.filter(e=>null!==e&&Number.isFinite(e));if(0===e.length)return S.empty;const t=new Intl.NumberFormat(I);return a(P.summary,{count:t.format(e.length),first:t.format(e[0]),last:t.format(e[e.length-1])})},[$,k,I,P.summary,S.empty]);return e("div",{ref:A,"data-mp-size":D,className:["mp-sparkline block",E??""].filter(Boolean).join(" "),style:{width:c(N),...R},...W,children:r("svg",{role:"img","aria-label":Z,viewBox:`0 0 100 ${J}`,preserveAspectRatio:"none",width:"100%",height:q,style:{display:"block",overflow:"visible"},children:["bar"===x?k.map((t,r)=>{if(null===t||!Number.isFinite(t))return null;const n=H/k.length,i=Math.max(.5,n-2),l=T(X),o=T(t);return e("path",{d:f(r*n+(n-i)/2,Math.min(o,l),i,Math.abs(l-o),i/3,t>=X?"top":"bottom"),fill:G,opacity:j&&r===k.length-1?1:.55},r)}):r(t,{children:["area"===x?e("path",{d:p(V,T(X),y),fill:G,opacity:.16}):null,e("path",{d:u(V,y),fill:"none",stroke:G,strokeWidth:C,strokeLinecap:"round",strokeLinejoin:"round",vectorEffect:"non-scaling-stroke",opacity:.55})]}),j&&Y&&"bar"!==x?e("path",{d:`M${Y.x} ${Y.y}h0`,stroke:G,strokeWidth:2.5*C,strokeLinecap:"round",vectorEffect:"non-scaling-stroke"}):null]})})});
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{numberFormatter as i}from"../../internal/intl.js";import{useMPLocale as l,useMPMessages as o}from"../../internal/locale.js";import{useMPSize as a}from"../../internal/config.js";import{fillMessage as s}from"../../internal/i18n.js";import{SPARKLINE as m}from"../../internal/messages/sparkline.js";import{TABLE as c}from"../../internal/messages/table.js";import{cssLength as p}from"../../internal/length.js";import{BRIDGE_DASH as f,areaPath as h,barPath as u,bridgePath as d,extentOf as g,linePath as k,seriesColor as b,withoutGaps as y}from"../../internal/chart.js";const x={xs:16,sm:24,md:32,lg:44,xl:56},j={xs:1.25,sm:1.5,md:2,lg:2.5,xl:3};export const MPSparkline=/*@__PURE__*/n.forwardRef(function({data:v,shape:w="line",curve:M="linear",gaps:N="break",endDot:F=!0,baseline:$,min:L,max:z,width:E="100%",height:W,color:B,label:D,locale:R,size:A,className:P,style:S,...q},C){const G=a(A),H=l(R),I=o(m,H),J=o(c,H),K=W??x[G],O=j[G],Q=b(0,B),T=100,U=K,V="bar"===w?0:O/2,X="zero"===N?v.map(e=>null!==e&&Number.isFinite(e)?e:0):v,Y=g(X,L,z),Z=Y.max-Y.min,_=e=>U-V-(e-Y.min)/Z*(U-2*V),ee=v.length>1?T/(v.length-1):0,te=X.map((e,t)=>null!==e&&Number.isFinite(e)?{x:v.length>1?t*ee:50,y:_(e)}:null),re="connect"===N&&"bar"!==w,ne=$??Y.min,ie=[...te].reverse().find(e=>null!==e)??null,le=n.useMemo(()=>{if(void 0!==D)return D;const e=v.filter(e=>null!==e&&Number.isFinite(e));if(0===e.length)return J.empty;const t=i(H);return s(I.summary,{count:t.format(e.length),first:t.format(e[0]),last:t.format(e[e.length-1])})},[D,v,H,I.summary,J.empty]);return e("div",{ref:C,"data-mp-size":G,className:["mp-sparkline block",P??""].filter(Boolean).join(" "),style:{width:p(E),...S},...q,children:r("svg",{role:"img","aria-label":le,viewBox:`0 0 100 ${U}`,preserveAspectRatio:"none",width:"100%",height:K,style:{display:"block",overflow:"visible"},children:["bar"===w?X.map((t,r)=>{if(null===t||!Number.isFinite(t))return null;const n=T/v.length,i=Math.max(.5,n-2),l=_(ne),o=_(t);return e("path",{d:u(r*n+(n-i)/2,Math.min(o,l),i,Math.abs(l-o),i/3,t>=ne?"top":"bottom"),fill:Q,opacity:F&&r===v.length-1?1:.55},r)}):r(t,{children:["area"===w?e("path",{d:h(re?y(te):te,_(ne),M),fill:Q,opacity:.16}):null,e("path",{d:k(te,M),fill:"none",stroke:Q,strokeWidth:O,strokeLinecap:"round",strokeLinejoin:"round",vectorEffect:"non-scaling-stroke",opacity:.55}),re?e("path",{d:d(te),fill:"none",stroke:Q,strokeWidth:O,strokeDasharray:`${O*f} ${O*f}`,strokeLinecap:"round",vectorEffect:"non-scaling-stroke",opacity:.55}):null]}),F&&ie&&"bar"!==w?e("path",{d:`M${ie.x} ${ie.y}h0`,stroke:Q,strokeWidth:2.5*O,strokeLinecap:"round",vectorEffect:"non-scaling-stroke"}):null]})})});

package/dist/components/statistic/MPStatistic.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{MPIcon as a}from"../icon/MPIcon.js";import{ArrowDownIcon as l,ArrowUpIcon as n,RemoveIcon as i}from"../../constants/icons.js";import{useMPLocale as s}from"../../internal/locale.js";import{useMPSize as r}from"../../internal/config.js";import{COMPACT_FROM as m,deltaOf as c,formatStatistic as o}from"../../internal/chart.js";import{META_TEXT as p,hasContent as u}from"../../internal/scale.js";const d={xs:"text-mp-title-medium",sm:"text-mp-title-large",md:"text-mp-headline-small",lg:"text-mp-headline-medium",xl:"text-mp-display-small"},x={xs:"text-mp-label-small",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-title-small",xl:"text-mp-title-medium"},f={start:"items-start text-start",center:"items-center text-center",end:"items-end text-end"};export function MPStatistic({label:h,value:b,format:g,compact:N=!0,locale:j,prefix:v,unit:_,previousValue:y,delta:w="percent",betterWhen:D="up",period:F,caption:z,trend:I,align:M="start",size:k,className:B,classNames:P,...Z}){const S=r(k),V=s(j),W="number"==typeof b?o(b,V,g,N):b,$="number"==typeof b&&"number"==typeof y&&"none"!==w?c(b,y,D):null,q=null===$?.percent||null===$?null:new Intl.NumberFormat(V,{style:"percent",maximumFractionDigits:1,signDisplay:"exceptZero"}).format($.percent/100),A=null===$?null:new Intl.NumberFormat(V,{...g??{},signDisplay:"exceptZero",...g?{}:N&&Math.abs($.absolute)>=m?{notation:"compact",maximumFractionDigits:1}:{}}).format($.absolute),C="absolute"===w?A:"both"===w?[A,q].filter(Boolean).join(" · "):q??A,E=(...t)=>t.filter(Boolean).join(" ");return e("div",{"data-mp-size":S,className:E("mp-statistic flex min-w-0 flex-col gap-1",f[M],B),...Z,children:[u(h)?t("span",{className:E("mp-statistic__label text-mp-on-surface-variant",x[S],P?.label),children:h}):null,e("span",{className:E("mp-statistic__value text-mp-on-surface flex items-baseline gap-1 font-medium",d[S],P?.value),children:[u(v)?t("span",{className:"shrink-0",children:v}):null,t("span",{className:"min-w-0 truncate",children:W}),u(_)?t("span",{className:`text-mp-on-surface-variant shrink-0 ${x[S]}`,children:_}):null]}),$&&C?e("span",{className:E("mp-statistic__delta flex items-center gap-0.5",p,0===$.direction?"text-mp-on-surface-variant":$.good?"text-mp-tertiary":"text-mp-error",P?.delta),"data-mp-direction":0===$.direction?"flat":1===$.direction?"up":"down",children:[t(a,{icon:0===$.direction?i:1===$.direction?n:l,size:14}),t("span",{children:C}),u(F)?t("span",{className:"text-mp-on-surface-variant",children:F}):null]}):null,u(z)?t("span",{className:E("mp-statistic__caption text-mp-on-surface-variant",p,P?.caption),children:z}):null,u(I)?t("div",{className:E("mp-statistic__trend w-full",P?.trend),children:I}):null]})}
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{MPIcon as a}from"../icon/MPIcon.js";import{ArrowDownIcon as l,ArrowUpIcon as n,RemoveIcon as i}from"../../constants/icons.js";import{useMPLocale as s}from"../../internal/locale.js";import{useMPSize as r}from"../../internal/config.js";import{COMPACT_FROM as m,deltaOf as c,formatStatistic as o}from"../../internal/chart.js";import{numberFormatter as p}from"../../internal/intl.js";import{META_TEXT as u,hasContent as d}from"../../internal/scale.js";const x={xs:"text-mp-title-medium",sm:"text-mp-title-large",md:"text-mp-headline-small",lg:"text-mp-headline-medium",xl:"text-mp-display-small"},f={xs:"text-mp-label-small",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-title-small",xl:"text-mp-title-medium"},h={style:"percent",maximumFractionDigits:1,signDisplay:"exceptZero"},b={start:"items-start text-start",center:"items-center text-center",end:"items-end text-end"};export function MPStatistic({label:g,value:j,format:N,compact:v=!0,locale:_,prefix:y,unit:w,previousValue:D,delta:z="percent",betterWhen:M="up",period:k,caption:B,trend:F,align:P="start",size:Z,className:I,classNames:S,...V}){const W=r(Z),$=s(_),q="number"==typeof j?o(j,$,N,v):j,A="number"==typeof j&&"number"==typeof D&&"none"!==z?c(j,D,M):null,C=null===A?.percent||null===A?null:p($,h).format(A.percent/100),E=null===A?null:p($,{...N??{},signDisplay:"exceptZero",...N?{}:v&&Math.abs(A.absolute)>=m?{notation:"compact",maximumFractionDigits:1}:{}}).format(A.absolute),G="absolute"===z?E:"both"===z?[E,C].filter(Boolean).join(" · "):C??E,H=(...t)=>t.filter(Boolean).join(" ");return e("div",{"data-mp-size":W,className:H("mp-statistic flex min-w-0 flex-col gap-1",b[P],I),...V,children:[d(g)?t("span",{className:H("mp-statistic__label text-mp-on-surface-variant",f[W],S?.label),children:g}):null,e("span",{className:H("mp-statistic__value text-mp-on-surface flex items-baseline gap-1 font-medium",x[W],S?.value),children:[d(y)?t("span",{className:"shrink-0",children:y}):null,t("span",{className:"min-w-0 truncate",children:q}),d(w)?t("span",{className:`text-mp-on-surface-variant shrink-0 ${f[W]}`,children:w}):null]}),A&&G?e("span",{className:H("mp-statistic__delta flex items-center gap-0.5",u,0===A.direction?"text-mp-on-surface-variant":A.good?"text-mp-tertiary":"text-mp-error",S?.delta),"data-mp-direction":0===A.direction?"flat":1===A.direction?"up":"down",children:[t(a,{icon:0===A.direction?i:1===A.direction?n:l,size:14}),t("span",{children:G}),d(k)?t("span",{className:"text-mp-on-surface-variant",children:k}):null]}):null,d(B)?t("span",{className:H("mp-statistic__caption text-mp-on-surface-variant",u,S?.caption),children:B}):null,d(F)?t("div",{className:H("mp-statistic__trend w-full",S?.trend),children:F}):null]})}

package/dist/components/stepper/MPStepper.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as l from"react";import{MPIcon as n}from"../icon/MPIcon.js";import{CheckIcon as o,ErrorIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{hasContent as s,META_TEXT as c,SHEET_TITLE as p}from"../../internal/scale.js";import{BORDER_STYLE as m,BULLET as u,BULLET_GAP as d,BULLET_SIZE as f,CONNECTOR_COLOR as x,ITEM_GAP as h,ITEM_GAP_X as v,STEP_MOTION as b,TITLE_COLOR as _}from"../../internal/step.js";import{useMPColor as j,useMPSize as N}from"../../internal/config.js";const g=/*@__PURE__*/l.createContext(null),w=/*@__PURE__*/l.createContext(0);export const MPStepper=/*@__PURE__*/l.forwardRef(function({active:r,defaultActive:n=0,onActiveChange:o,linear:a=!0,orientation:s="horizontal",size:c,color:p,className:m,style:u,children:d,...x},h){const v=N(c),b=j(p),[_,z]=l.useState(n),C=r??_,[S,P]=l.useState(C);C>S&&P(C);const $=l.Children.toArray(d).filter(l.isValidElement),k=$.length,M=l.useCallback(e=>{void 0===r&&z(e),o?.(e)},[r,o]),A=l.useMemo(()=>({size:v,color:b,orientation:s,active:C,onSelect:o||void 0===r?M:null,linear:a,count:k,furthest:S}),[v,b,s,C,o,r,M,a,k,S]),B="horizontal"===s;return e(g.Provider,{value:A,children:t("div",{...x,ref:h,"data-mp-size":v,className:["mp-stepper flex flex-col",m??""].filter(Boolean).join(" "),style:{...i(b),...u},children:[e("ol",{className:["mp-stepper__rail flex list-none p-0",B?"flex-row items-start":"flex-col"].join(" "),style:{"--_mp-bullet":f[v]},children:$.map((t,r)=>e(w.Provider,{value:r,children:t},r))}),e(y,{steps:$,active:C})]})})});function y({steps:t,active:r}){const l=t[r],n=l?.props.children;return s(n)?e("div",{className:"mp-stepper__panel mt-4",role:"group","aria-label":void 0,children:n}):null}export const MPStep=/*@__PURE__*/l.forwardRef(function({label:f,description:j,bullet:N,error:y=!1,optional:z,disabled:C=!1,connector:S="solid",color:P,className:$,style:k,children:M,...A},B){const R=l.useContext(g),E=l.useContext(w),F=R?.size??"md",I=R?.orientation??"horizontal",V=R?.active??0,q=R?.count??1,D=R?.furthest??0,G=R?.linear??!0,H=E<V?"complete":E===V?"current":"upcoming",J=P??(y?"error":R?.color??"primary"),K="horizontal"===I,L=E===q-1,O="none"!==S&&!L,Q=!C&&(!G||E<=D),T=null!=R?.onSelect&&Q,U=N??("complete"!==H||y?y?e(n,{icon:a}):E+1:e(n,{icon:o})),W=e("span",{"aria-hidden":"true",className:["mp-stepper__bullet rounded-mp-full relative z-10 flex shrink-0","items-center justify-center","size-(--_mp-bullet) text-[calc(var(--_mp-bullet)*0.5)] leading-none font-medium","tabular-nums [&>svg]:size-[0.6em]",u[H],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" "),children:U}),X=O?e("span",{"aria-hidden":"true",className:["mp-stepper__connector pointer-events-none absolute",K?"start-(--_mp-bullet) top-[calc(var(--_mp-bullet)/2_-_1px)] end-0 border-t-2":"top-(--_mp-bullet) start-[calc(var(--_mp-bullet)/2_-_1px)] bottom-0 border-s-2",m[S],x[H],b].filter(Boolean).join(" ")}):null,Y=t("span",{className:"flex min-w-0 flex-col gap-0.5 text-start "+(K?"mt-2":""),children:[s(f)?e("span",{className:["mp-stepper__label",p[F],y?"text-mp-error":_[H],b].join(" "),children:f}):null,s(z)?e("span",{className:`text-mp-on-surface-variant ${c}`,children:z}):null,s(j)?e("span",{className:`text-mp-on-surface-variant ${c}`,children:j}):null]}),Z=t(r,{children:[X,t("span",{className:`flex min-w-0 ${K?"flex-col items-start":"flex-row"} ${K?"":d[F]}`,children:[W,Y]})]});return e("li",{...A,ref:B,"aria-current":"current"===H?"step":void 0,className:["mp-stepper__step relative min-w-0",K?`flex-1 ${L?"":v[F]}`:L?"":h[F],$??""].filter(Boolean).join(" "),style:{...P||y?i(J):null,...k},children:T?e("button",{type:"button",className:["group relative flex w-full min-w-0 cursor-pointer appearance-none bg-transparent p-0 text-start","outline-mp-secondary rounded-mp-xs focus-visible:outline-2 focus-visible:outline-offset-2","outline-none"].join(" "),onClick:()=>R?.onSelect?.(E),children:Z}):e("span",{className:"relative flex w-full min-w-0","aria-disabled":!(!R?.onSelect||Q)||void 0,children:Z})})});
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{MPIcon as l}from"../icon/MPIcon.js";import{CheckIcon as o,ErrorIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{hasContent as s,META_TEXT as c,SHEET_TITLE as p}from"../../internal/scale.js";import{BORDER_STYLE as m,BULLET as d,BULLET_GAP as u,BULLET_SIZE as f,CONNECTOR_COLOR as h,ITEM_GAP as v,ITEM_GAP_X as x,STEP_MOTION as b,TITLE_COLOR as _}from"../../internal/step.js";import{useMPColor as j,useMPSize as N}from"../../internal/config.js";function g(e,t){return`${e}-label-${t}`}function w(e){return`${e}-panel`}const y=/*@__PURE__*/n.createContext(null),z=/*@__PURE__*/n.createContext(0);export const MPStepper=/*@__PURE__*/n.forwardRef(function({active:r,defaultActive:l=0,onActiveChange:o,linear:a=!0,orientation:c="horizontal",size:p,color:m,className:d,style:u,children:h,...v},x){const b=N(p),_=j(m),[g,w]=n.useState(l),C=r??g,[P,S]=n.useState(C);C>P&&S(C);const $=n.Children.toArray(h).filter(n.isValidElement),k=$.length,M=n.useId(),A=s($[C]?.props.children),I=n.useCallback(e=>{void 0===r&&w(e),o?.(e)},[r,o]),R=n.useMemo(()=>({size:b,color:_,orientation:c,active:C,onSelect:o||void 0===r?I:null,linear:a,count:k,furthest:P,idBase:M,hasPanel:A}),[b,_,c,C,o,r,I,a,k,P,M,A]),E="horizontal"===c;return e(y.Provider,{value:R,children:t("div",{...v,ref:x,"data-mp-size":b,className:["mp-stepper flex flex-col",d??""].filter(Boolean).join(" "),style:{...i(_),...u},children:[e("ol",{className:["mp-stepper__rail m-0 flex list-none p-0",E?"flex-row items-start":"flex-col"].join(" "),style:{"--_mp-bullet":f[b]},children:$.map((t,r)=>e(z.Provider,{value:r,children:t},r))}),e(B,{steps:$,active:C,idBase:M})]})})});function B({steps:t,active:r,idBase:n}){const l=t[r],o=l?.props.children;if(!s(o))return null;const a=s(l?.props.label);return e("div",{id:w(n),role:"group","aria-labelledby":a?g(n,r):void 0,className:"mp-stepper__panel mt-4",children:o})}export const MPStep=/*@__PURE__*/n.forwardRef(function({label:f,description:j,bullet:N,error:B=!1,optional:C,disabled:P=!1,connector:S="solid",color:$,className:k,style:M,children:A,...I},R){const E=n.useContext(y),F=n.useContext(z),V=E?.size??"md",q=E?.orientation??"horizontal",D=E?.active??0,G=E?.count??1,H=E?.furthest??0,J=E?.linear??!0,K=F<D?"complete":F===D?"current":"upcoming",L=$??(B?"error":E?.color??"primary"),O="horizontal"===q,Q=F===G-1,T="none"!==S&&!Q,U=!P&&(!J||F<=H),W=null!=E?.onSelect&&U,X=N??("complete"!==K||B?B?e(l,{icon:a}):F+1:e(l,{icon:o})),Y=e("span",{"aria-hidden":"true",className:["mp-stepper__bullet rounded-mp-full relative z-10 flex shrink-0","items-center justify-center","size-(--_mp-bullet) text-[calc(var(--_mp-bullet)*0.5)] leading-none font-medium","tabular-nums [&>svg]:size-[0.6em]",d[K],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" "),children:X}),Z=T?e("span",{"aria-hidden":"true",className:["mp-stepper__connector pointer-events-none absolute",O?"start-(--_mp-bullet) top-[calc(var(--_mp-bullet)/2_-_1px)] end-0 border-t-2":"top-(--_mp-bullet) start-[calc(var(--_mp-bullet)/2_-_1px)] bottom-0 border-s-2",m[S],h[K],b].filter(Boolean).join(" ")}):null,ee=t("span",{className:"flex min-w-0 flex-col gap-0.5 text-start "+(O?"mt-2":""),children:[s(f)?e("span",{id:E?g(E.idBase,F):void 0,className:["mp-stepper__label",p[V],B?"text-mp-error":_[K],b].join(" "),children:f}):null,s(C)?e("span",{className:`text-mp-on-surface-variant ${c}`,children:C}):null,s(j)?e("span",{className:`text-mp-on-surface-variant ${c}`,children:j}):null]}),te=t(r,{children:[Z,t("span",{className:`flex min-w-0 ${O?"flex-col items-start":"flex-row"} ${O?"":u[V]}`,children:[Y,ee]})]});return e("li",{...I,ref:R,"aria-current":"current"===K?"step":void 0,className:["mp-stepper__step relative min-w-0",O?`flex-1 ${Q?"":x[V]}`:Q?"":v[V],k??""].filter(Boolean).join(" "),style:{...$||B?i(L):null,...M},children:W?e("button",{type:"button","aria-controls":E?.hasPanel?w(E.idBase):void 0,"aria-expanded":E?.hasPanel?"current"===K:void 0,className:["group relative flex w-full min-w-0 cursor-pointer appearance-none border-0 bg-transparent p-0 text-start","outline-mp-secondary rounded-mp-xs focus-visible:outline-2 focus-visible:outline-offset-2","outline-none"].join(" "),onClick:()=>E?.onSelect?.(F),children:te}):e("span",{className:"relative flex w-full min-w-0","aria-disabled":!(!E?.onSelect||U)||void 0,children:te})})});

package/dist/components/table/MPTable.d.ts

@@ -98,7 +98,7 @@ export interface MPTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'
      * A row that answers a press has to answer a keyboard too, so each one joins
      * the tab order and takes Enter and Space. That is the honest minimum for a
      * `<tr>` — a row cannot be wrapped in a `<button>` the way an
-     * [MPListItem](../layout/list) is, because a `<button>` is not something a
+     * [MPListItem](./list) is, because a `<button>` is not something a
      * `<tbody>` may contain.
      *
      * It is also worth knowing what it costs: a table of two hundred rows becomes

package/dist/components/tabs/MPTabs.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{accentSlots as n}from"../../internal/accent.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as r,hasContent as l,SHEET_GAP as s}from"../../internal/scale.js";import{useMPColor as c,useMPSize as u}from"../../internal/config.js";const m=/*@__PURE__*/a.createContext({variant:"primary",size:"md",iconPosition:"top",fullWidth:!1}),d={xs:"h-8",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},p={xs:"h-11",sm:"h-13",md:"h-16",lg:"h-18",xl:"h-20"},f={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},h={xs:"px-3",sm:"px-3.5",md:"px-4",lg:"px-5",xl:"px-6"},b={xs:12,sm:14,md:16,lg:20,xl:24},v={xs:18,sm:20,md:24,lg:24,xl:28};function x(e,t,i,n=""){a.Children.toArray(e).forEach(e=>{if(!a.isValidElement(e))return void(l(e)&&t.push(e));if(e.type===a.Fragment)return void x(e.props.children,t,i,`${n}${String(e.key)}/`);const o=n?a.cloneElement(e,{key:`${n}${String(e.key)}`}):e;e.type===MPTabPanel?i.push(o):t.push(o)})}export const MPTabs=/*@__PURE__*/a.forwardRef(function({variant:o="primary",color:r,size:l,value:d,defaultValue:p,onValueChange:f,iconPosition:h,activateOnFocus:v=!1,loopFocus:y=!0,divider:w=!0,fullWidth:g=!1,className:_,style:j,children:P,"aria-label":k,...N},M){const z=c(r),C=u(l),R=h??("primary"===o?"top":"start"),$=a.useMemo(()=>({variant:o,size:C,iconPosition:R,fullWidth:g}),[o,C,R,g]),S=a.useRef(null),[W,E]=a.useState(null),F=a.useCallback(()=>{const e=S.current;if(!e)return;const t=e.scrollWidth-e.clientWidth,a=Math.abs(e.scrollLeft),i=t-a,n="rtl"===getComputedStyle(e).direction,o=(n?i:a)>1,r=(n?a:i)>1;E(o&&r?"both":o?"left":r?"right":null)},[]);a.useEffect(F),a.useEffect(()=>{const e=S.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(F);return t.observe(e),()=>t.disconnect()},[F]);const T=[],V=[];return x(P,T,V),e(m.Provider,{value:$,children:t(i.Root,{ref:M,value:d,defaultValue:p,onValueChange:e=>f?.(e),"data-mp-size":C,"data-mp-variant":o,className:["mp-tabs flex min-w-0 flex-col",s[C],_??""].filter(Boolean).join(" "),style:{...n(z),"--_mp-tab-inset":`${b[C]}px`,...j},...N,children:[t(i.List,{ref:S,"aria-label":k,activateOnFocus:v,loopFocus:y,"data-mp-overflow":W??void 0,onScroll:F,className:["mp-tabs__list relative flex shrink-0",w?"border-mp-outline-variant border-b":"",g?"w-full":"","overflow-x-auto overflow-y-hidden","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"].filter(Boolean).join(" "),children:[T,e(i.Indicator,{className:["mp-tabs__indicator pointer-events-none absolute bottom-0","bg-(--_mp-accent)","primary"===o?["h-0.75 rounded-t-full","left-[calc(var(--active-tab-left)_+_var(--_mp-tab-inset))]","w-[calc(var(--active-tab-width)_-_2_*_var(--_mp-tab-inset))]"].join(" "):"left-(--active-tab-left) h-0.5 w-(--active-tab-width)","[transition-property:left,width]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" ")})]}),V]})})});export const MPTab=/*@__PURE__*/a.forwardRef(function({value:n,icon:s,disabled:c=!1,className:u,children:b,...x},y){const{variant:w,size:g,iconPosition:_,fullWidth:j}=a.useContext(m),P="top"===_&&l(s);return t(i.Tab,{ref:y,value:n,disabled:c,className:["mp-tabs__tab group relative flex shrink-0 items-center justify-center","box-border appearance-none bg-transparent font-[inherit] whitespace-nowrap select-none","overflow-hidden outline-none","transition-[color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",P?`flex-col gap-1 ${p[g]}`:`flex-row ${d[g]}`,P?"":r[g],f[g],h[g],c?"text-mp-on-surface/38 cursor-default":["text-mp-on-surface-variant cursor-pointer","primary"===w?"data-active:text-(--_mp-accent)":"data-active:text-mp-on-surface"].join(" "),"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid",j?"flex-1":"",u??""].filter(Boolean).join(" "),...x,children:[c?null:e(o,{}),l(s)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:v[g],height:v[g]},children:s}):null,l(b)?e("span",{className:"relative truncate",children:b}):null]})});export const MPTabPanel=/*@__PURE__*/a.forwardRef(function({value:t,keepMounted:a=!1,className:n,children:o,...r},l){return e(i.Panel,{ref:l,value:t,keepMounted:a,className:["mp-tabs__panel text-mp-on-surface min-w-0 flex-1","rounded-mp-xs outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-opacity duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-starting-style:opacity-0",n??""].filter(Boolean).join(" "),...r,children:o})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Tabs as i}from"@base-ui/react/tabs";import{accentSlots as n}from"../../internal/accent.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as r,hasContent as l,SHEET_GAP as s}from"../../internal/scale.js";import{useMPColor as c,useMPSize as u}from"../../internal/config.js";const d=/*@__PURE__*/a.createContext({variant:"primary",size:"md",iconPosition:"top",fullWidth:!1}),m={xs:"h-8",sm:"h-10",md:"h-12",lg:"h-14",xl:"h-16"},p={xs:"h-11",sm:"h-13",md:"h-16",lg:"h-18",xl:"h-20"},f={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"},h={xs:"px-3",sm:"px-3.5",md:"px-4",lg:"px-5",xl:"px-6"},b={xs:12,sm:14,md:16,lg:20,xl:24},v={xs:18,sm:20,md:24,lg:24,xl:28};function x(e,t,i,n=""){a.Children.toArray(e).forEach(e=>{if(!a.isValidElement(e))return void(l(e)&&t.push(e));if(e.type===a.Fragment)return void x(e.props.children,t,i,`${n}${String(e.key)}/`);const o=n?a.cloneElement(e,{key:`${n}${String(e.key)}`}):e;e.type===MPTabPanel?i.push(o):t.push(o)})}export const MPTabs=/*@__PURE__*/a.forwardRef(function({variant:o="primary",color:r,size:l,value:m,defaultValue:p,onValueChange:f,iconPosition:h,activateOnFocus:v=!1,loopFocus:y=!0,divider:w=!0,fullWidth:g=!1,className:_,style:j,children:P,"aria-label":k,...N},M){const z=c(r),C=u(l),R=h??("primary"===o?"top":"start"),$=a.useMemo(()=>({variant:o,size:C,iconPosition:R,fullWidth:g}),[o,C,R,g]),S=a.useRef(null),[W,E]=a.useState(null),F=a.useCallback(()=>{const e=S.current;if(!e)return;const t=e.scrollWidth-e.clientWidth,a=Math.abs(e.scrollLeft),i=t-a,n="rtl"===getComputedStyle(e).direction,o=(n?i:a)>1,r=(n?a:i)>1;E(o&&r?"both":o?"left":r?"right":null)},[]);a.useEffect(F),a.useEffect(()=>{const e=S.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=new ResizeObserver(F);return t.observe(e),()=>t.disconnect()},[F]);const T=[],V=[];return x(P,T,V),e(d.Provider,{value:$,children:t(i.Root,{ref:M,value:m,defaultValue:p,onValueChange:e=>f?.(e),"data-mp-size":C,"data-mp-variant":o,className:["mp-tabs flex min-w-0 flex-col",s[C],_??""].filter(Boolean).join(" "),style:{...n(z),"--_mp-tab-inset":`${b[C]}px`,...j},...N,children:[t(i.List,{ref:S,"aria-label":k,activateOnFocus:v,loopFocus:y,"data-mp-overflow":W??void 0,onScroll:F,className:["mp-tabs__list relative flex shrink-0",w?"border-mp-outline-variant border-b":"",g?"w-full":"","overflow-x-auto overflow-y-hidden","[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"].filter(Boolean).join(" "),children:[T,e(i.Indicator,{className:["mp-tabs__indicator pointer-events-none absolute bottom-0","bg-(--_mp-accent)","primary"===o?["h-0.75 rounded-t-full","left-[calc(var(--active-tab-left)_+_var(--_mp-tab-inset))]","w-[calc(var(--active-tab-width)_-_2_*_var(--_mp-tab-inset))]"].join(" "):"left-(--active-tab-left) h-0.5 w-(--active-tab-width)","[transition-property:left,width]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" ")})]}),V]})})});export const MPTab=/*@__PURE__*/a.forwardRef(function({value:n,icon:s,disabled:c=!1,className:u,children:b,...x},y){const{variant:w,size:g,iconPosition:_,fullWidth:j}=a.useContext(d),P="top"===_&&l(s);return t(i.Tab,{ref:y,value:n,disabled:c,className:["mp-tabs__tab group relative flex shrink-0 items-center justify-center","box-border appearance-none border-0 bg-transparent font-[inherit] whitespace-nowrap select-none","overflow-hidden outline-none","transition-[color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",P?`flex-col gap-1 ${p[g]}`:`flex-row ${m[g]}`,P?"":r[g],f[g],h[g],c?"text-mp-on-surface/38 cursor-default":["text-mp-on-surface-variant cursor-pointer","primary"===w?"data-active:text-(--_mp-accent)":"data-active:text-mp-on-surface"].join(" "),"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid",j?"flex-1":"",u??""].filter(Boolean).join(" "),...x,children:[c?null:e(o,{}),l(s)?e("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:v[g],height:v[g]},children:s}):null,l(b)?e("span",{className:"relative truncate",children:b}):null]})});export const MPTabPanel=/*@__PURE__*/a.forwardRef(function({value:t,keepMounted:a=!1,className:n,children:o,...r},l){return e(i.Panel,{ref:l,value:t,keepMounted:a,className:["mp-tabs__panel text-mp-on-surface min-w-0 flex-1","rounded-mp-xs outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-opacity duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-starting-style:opacity-0",n??""].filter(Boolean).join(" "),...r,children:o})});

package/dist/components/timeline/MPTimeline.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as n}from"../../internal/accent.js";import{hasContent as i,META_TEXT as o,PROSE_TEXT as a,SHEET_TITLE as s}from"../../internal/scale.js";import{useMPColor as c,useMPSize as m}from"../../internal/config.js";import{BORDER_STYLE as u,BULLET as d,BULLET_GAP as p,BULLET_SIZE as f,CONNECTOR_COLOR as x,ITEM_GAP as h,ITEM_GAP_X as v,STEP_MOTION as b,TITLE_COLOR as _}from"../../internal/step.js";const j=/*@__PURE__*/l.createContext(null),N=/*@__PURE__*/l.createContext({index:0,last:!1});export const MPTimelineItem=/*@__PURE__*/l.forwardRef(function({title:r,meta:c,bullet:m,status:g,color:y,connector:z="solid",className:w,style:C,children:$,...M},P){const B=l.useContext(j),{index:k,last:A}=l.useContext(N),R=B?.size??"md",T=B?.orientation??"vertical",I=y??B?.color??"primary",q=B?.active??null,D=g??(null===q?"upcoming":k<q?"complete":k===q?"current":"upcoming"),E="horizontal"===T,F="none"!==z&&!A,G=e("span",{"aria-hidden":"true",className:["mp-timeline__bullet rounded-mp-full relative z-10 flex shrink-0","items-center justify-center","size-(--_mp-bullet) text-[calc(var(--_mp-bullet)*0.5)] leading-none font-medium","tabular-nums [&>svg]:size-[0.6em]",d[D],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" "),children:m}),H=F?e("span",{"aria-hidden":"true",className:["mp-timeline__connector pointer-events-none absolute",E?"start-(--_mp-bullet) top-[calc(var(--_mp-bullet)/2_-_1px)] end-0 border-t-2":"top-(--_mp-bullet) start-[calc(var(--_mp-bullet)/2_-_1px)] bottom-0 border-s-2",u[z],x[D],b].filter(Boolean).join(" ")}):null,J=t("div",{className:"flex min-w-0 flex-col gap-0.5 "+(E?"mt-2":""),children:[i(r)||i(c)?t("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[i(r)?e("span",{className:["mp-timeline__title",s[R],_[D],b].join(" "),children:r}):null,i(c)?e("span",{className:`text-mp-on-surface-variant ${o}`,children:c}):null]}):null,i($)?e("div",{className:`text-mp-on-surface-variant ${a[R]}`,children:$}):null]});return t("li",{ref:P,"aria-current":"current"===D?"step":void 0,"data-status":D,className:["mp-timeline__item relative",E?`flex min-w-0 flex-1 flex-col ${A?"":v[R]}`:`flex ${p[R]} ${A?"":h[R]}`,w??""].filter(Boolean).join(" "),style:{"--_mp-bullet":f[R],...n(I),...C},...M,children:[H,G,J]})});export const MPTimeline=/*@__PURE__*/l.forwardRef(function({active:t,size:n,color:i,orientation:o="vertical",render:a,className:s,style:u,children:d,...p},f){const x=m(n),h=c(i),v=l.Children.toArray(d),b=v.length,_=l.useMemo(()=>({size:x,orientation:o,color:h,active:t??null}),[x,o,h,t]),g=l.useMemo(()=>Array.from({length:b},(e,t)=>({index:t,last:t===b-1})),[b]),y=r({render:a??e("ol",{}),ref:f,props:{role:"list","data-mp-size":x,className:["mp-timeline flex","horizontal"===o?"flex-row":"flex-col",s??""].filter(Boolean).join(" "),style:u,children:v.map((t,l)=>e(N.Provider,{value:g[l],children:t},l)),...p}});return e(j.Provider,{value:_,children:y})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as n}from"../../internal/accent.js";import{hasContent as i,META_TEXT as o,PROSE_TEXT as a,SHEET_TITLE as s}from"../../internal/scale.js";import{useMPColor as c,useMPSize as m}from"../../internal/config.js";import{BORDER_STYLE as u,BULLET as d,BULLET_GAP as p,BULLET_SIZE as f,CONNECTOR_COLOR as x,ITEM_GAP as h,ITEM_GAP_X as v,STEP_MOTION as b,TITLE_COLOR as _}from"../../internal/step.js";const j=/*@__PURE__*/l.createContext(null),N=/*@__PURE__*/l.createContext({index:0,last:!1});export const MPTimelineItem=/*@__PURE__*/l.forwardRef(function({title:r,meta:c,bullet:m,status:g,color:y,connector:z="solid",className:w,style:C,children:$,...M},P){const B=l.useContext(j),{index:k,last:A}=l.useContext(N),R=B?.size??"md",T=B?.orientation??"vertical",I=y??B?.color??"primary",q=B?.active??null,D=g??(null===q?"upcoming":k<q?"complete":k===q?"current":"upcoming"),E="horizontal"===T,F="none"!==z&&!A,G=e("span",{"aria-hidden":"true",className:["mp-timeline__bullet rounded-mp-full relative z-10 flex shrink-0","items-center justify-center","size-(--_mp-bullet) text-[calc(var(--_mp-bullet)*0.5)] leading-none font-medium","tabular-nums [&>svg]:size-[0.6em]",d[D],"transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard"].join(" "),children:m}),H=F?e("span",{"aria-hidden":"true",className:["mp-timeline__connector pointer-events-none absolute",E?"start-(--_mp-bullet) top-[calc(var(--_mp-bullet)/2_-_1px)] end-0 border-t-2":"top-(--_mp-bullet) start-[calc(var(--_mp-bullet)/2_-_1px)] bottom-0 border-s-2",u[z],x[D],b].filter(Boolean).join(" ")}):null,J=t("div",{className:"flex min-w-0 flex-col gap-0.5 "+(E?"mt-2":""),children:[i(r)||i(c)?t("div",{className:"flex flex-wrap items-baseline gap-x-2",children:[i(r)?e("span",{className:["mp-timeline__title",s[R],_[D],b].join(" "),children:r}):null,i(c)?e("span",{className:`text-mp-on-surface-variant ${o}`,children:c}):null]}):null,i($)?e("div",{className:`text-mp-on-surface-variant ${a[R]}`,children:$}):null]});return t("li",{ref:P,"aria-current":"current"===D?"step":void 0,"data-status":D,className:["mp-timeline__item relative",E?`flex min-w-0 flex-1 flex-col ${A?"":v[R]}`:`flex ${p[R]} ${A?"":h[R]}`,w??""].filter(Boolean).join(" "),style:{"--_mp-bullet":f[R],...n(I),...C},...M,children:[H,G,J]})});export const MPTimeline=/*@__PURE__*/l.forwardRef(function({active:t,size:n,color:i,orientation:o="vertical",render:a,className:s,style:u,children:d,...p},f){const x=m(n),h=c(i),v=l.Children.toArray(d),b=v.length,_=l.useMemo(()=>({size:x,orientation:o,color:h,active:t??null}),[x,o,h,t]),g=l.useMemo(()=>Array.from({length:b},(e,t)=>({index:t,last:t===b-1})),[b]),y=r({render:a??e("ol",{}),ref:f,props:{role:"list","data-mp-size":x,className:["mp-timeline m-0 flex list-none p-0","horizontal"===o?"flex-row":"flex-col",s??""].filter(Boolean).join(" "),style:u,children:v.map((t,l)=>e(N.Provider,{value:g[l],children:t},l)),...p}});return e(j.Provider,{value:_,children:y})});

package/dist/components/timeline-chart/MPTimelineChart.d.ts

@@ -1,8 +1,12 @@
 import * as React from 'react';
 import { type ChartBaseProps } from '../../internal/ChartChrome.js';
 import type { MPChartAxis, MPTimelineSeries } from '../../types.js';
-/** No `legend`: the rows are the axis, so there is nothing for one to identify. */
-export interface MPTimelineChartProps extends Omit<ChartBaseProps, 'legend'> {
+/**
+ * No `legend`: the rows are the axis, so there is nothing for one to identify.
+ * No `labelColor` either — with no legend to ink, the only text left is a span's
+ * own label, and that is written **on** the bar rather than beside it.
+ */
+export interface MPTimelineChartProps extends Omit<ChartBaseProps, 'legend' | 'labelColor'> {
     /** The rows, top to bottom. Each carries its own spans. */
     series: readonly MPTimelineSeries[];
     /** The row axis. */

package/dist/components/toggle/MPToggle.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Toggle as r}from"@base-ui/react/toggle";import{accentSlots as o}from"../../internal/accent.js";import{MPButtonGroupContext as a}from"../../internal/button-group.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as i,CONTROL_HEIGHT as c,CONTROL_PAD_X as l,CONTROL_SQUARE as p,CONTROL_TEXT as m,hasContent as d}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={filled:"bg-mp-surface-container-highest text-mp-on-surface-variant",tonal:"bg-mp-surface-container text-mp-on-surface-variant",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline border bg-transparent text-mp-on-surface-variant",text:"bg-transparent text-mp-on-surface-variant"},g={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-(--_mp-accent) border bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",text:"bg-transparent text-(--_mp-accent)"},x={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 border bg-transparent text-mp-on-surface/38",text:"bg-transparent text-mp-on-surface/38"};export const MPToggle=/*@__PURE__*/n.forwardRef(function({variant:v,size:h,color:j,disabled:w,pressed:_,defaultPressed:y,onPressedChange:P,value:z,startIcon:C,endIcon:k,fullWidth:I=!1,className:N,style:B,children:L,...M},R){const S=n.useContext(a),T=v??S?.variant??"outlined",W=f(h??S?.size),$=u(j??S?.color),q=w??S?.disabled??!1,A=!d(L);return t(r,{ref:R,value:z,pressed:_,defaultPressed:y,onPressedChange:e=>P?.(e),disabled:q,"data-mp-size":W,"data-mp-variant":T,className:e=>["mp-toggle group relative inline-flex shrink-0 items-center justify-center","rounded-mp-full box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",c[W],m[W],i[W],A?`${p[W]} px-0`:l[W],q?x[T]:e.pressed?g[T]:b[T],q?"cursor-default":"",I?"w-full":"",N??""].filter(Boolean).join(" "),style:{...o($),...B},...M,children:[q?null:e(s,{}),C,L,k]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Toggle as o}from"@base-ui/react/toggle";import{accentSlots as n}from"../../internal/accent.js";import{MPButtonGroupContext as a}from"../../internal/button-group.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as i,CONTROL_HEIGHT as c,CONTROL_PAD_X as l,CONTROL_SQUARE as d,CONTROL_TEXT as p,hasContent as m}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={filled:"border-0 bg-mp-surface-container-highest text-mp-on-surface-variant",tonal:"border-0 bg-mp-surface-container text-mp-on-surface-variant",elevated:"shadow-mp-1 border-0 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline border bg-transparent text-mp-on-surface-variant",text:"border-0 bg-transparent text-mp-on-surface-variant"},g={filled:"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-(--_mp-accent) border bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",text:"border-0 bg-transparent text-(--_mp-accent)"},x={filled:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 border bg-transparent text-mp-on-surface/38",text:"border-0 bg-transparent text-mp-on-surface/38"};export const MPToggle=/*@__PURE__*/t.forwardRef(function({variant:v,size:h,color:j,disabled:w,pressed:_,defaultPressed:y,onPressedChange:P,value:z,startIcon:C,endIcon:k,fullWidth:I=!1,className:N,style:B,children:L,...M},R){const S=t.useContext(a),T=v??S?.variant??"outlined",W=f(h??S?.size),$=u(j??S?.color),q=w??S?.disabled??!1,A=!m(L);return r(o,{ref:R,value:z,pressed:_,defaultPressed:y,onPressedChange:e=>P?.(e),disabled:q,"data-mp-size":W,"data-mp-variant":T,className:e=>["mp-toggle group relative inline-flex shrink-0 items-center justify-center","rounded-mp-full box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",c[W],p[W],i[W],A?`${d[W]} px-0`:l[W],q?x[T]:e.pressed?g[T]:b[T],q?"cursor-default":"",I?"w-full":"",N??""].filter(Boolean).join(" "),style:{...n($),...B},...M,children:[q?null:e(s,{}),C,L,k]})});

package/dist/components/tooltip/MPTooltip.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t,jsxs as o}from"react/jsx-runtime";import*as e from"react";import{Tooltip as a}from"@base-ui/react/tooltip";import{accentSlots as i}from"../../internal/accent.js";export const MPTooltipProvider=a.Provider;const l={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},s={xs:"px-1.5",sm:"px-2",md:"px-2",lg:"px-3",xl:"px-4"},r={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-small",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},d={xs:6,sm:7,md:8,lg:9,xl:10};export function MPTooltip({content:p,children:n,size:m="sm",color:c,side:x="top",align:y="center",sideOffset:u=6,delay:h,closeDelay:f,arrow:g=!0,open:b,defaultOpen:v,onOpenChange:_,disabled:P=!1,className:j,style:O}){const w=d[m],N=e.useId(),[z,T]=e.useState(v??!1),M=b??z,B={"--_mp-tooltip":c?`var(--_mp-color-${c})`:"var(--_mp-color-inverse-surface)","--_mp-on-tooltip":c?`var(--_mp-color-on-${c})`:"var(--_mp-color-inverse-on-surface)",...c?i(c):null};return o(a.Root,{open:b,defaultOpen:v,onOpenChange:t=>{void 0===b&&T(t),_?.(t)},children:[t(a.Trigger,{render:n,delay:h,closeDelay:f,disabled:P,"aria-describedby":M?N:void 0}),t(a.Portal,{children:t(a.Positioner,{className:"mp-portal z-50 outline-none",side:x,align:y,sideOffset:u,children:o(a.Popup,{id:N,role:"tooltip","data-mp-size":m,className:["mp-tooltip rounded-mp-xs max-w-64 outline-none","bg-(--_mp-tooltip) text-(--_mp-on-tooltip)","transition-opacity duration-(--mp-sys-motion-duration-short4)","data-starting-style:opacity-0 data-ending-style:opacity-0","data-instant:duration-0",s[m],l[m],r[m],j??""].filter(Boolean).join(" "),style:{...B,...O},children:[g?t(a.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:t("svg",{width:w,height:w/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:t("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-tooltip)"})})}):null,p]})})})]})}
+import{jsx as o,jsxs as e}from"react/jsx-runtime";import*as t from"react";import{POPUP_ARROW_TURN as l,PopupArrow as i}from"../../internal/PopupArrow.js";import{Tooltip as r}from"@base-ui/react/tooltip";import{accentSlots as a}from"../../internal/accent.js";export const MPTooltipProvider=r.Provider;const s={xs:"py-0.5",sm:"py-1",md:"py-1",lg:"py-1.5",xl:"py-2"},n={xs:"px-1.5",sm:"px-2",md:"px-2",lg:"px-3",xl:"px-4"},p={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-small",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},m={xs:6,sm:7,md:8,lg:9,xl:10};export function MPTooltip({content:d,children:c,size:x="sm",color:y,side:u="top",align:f="center",sideOffset:g=6,delay:b,closeDelay:v,arrow:h=!0,open:_,defaultOpen:P,onOpenChange:j,disabled:O=!1,className:w,style:z}){const N=m[x],T=t.useId(),[A,C]=t.useState(P??!1),D=_??A,M={"--_mp-tooltip":y?`var(--_mp-color-${y})`:"var(--_mp-color-inverse-surface)","--_mp-on-tooltip":y?`var(--_mp-color-on-${y})`:"var(--_mp-color-inverse-on-surface)",...y?a(y):null};return e(r.Root,{open:_,defaultOpen:P,onOpenChange:o=>{void 0===_&&C(o),j?.(o)},children:[o(r.Trigger,{render:c,delay:b,closeDelay:v,disabled:O,"aria-describedby":D?T:void 0}),o(r.Portal,{children:o(r.Positioner,{className:"mp-portal z-50 outline-none",side:u,align:f,sideOffset:g,children:e(r.Popup,{id:T,role:"tooltip","data-mp-size":x,className:["mp-tooltip rounded-mp-xs max-w-64 outline-none","bg-(--_mp-tooltip) text-(--_mp-on-tooltip)","transition-opacity duration-(--mp-sys-motion-duration-short4)","data-starting-style:opacity-0 data-ending-style:opacity-0","data-instant:duration-0",n[x],s[x],p[x],w??""].filter(Boolean).join(" "),style:{...M,...z},children:[h?o(r.Arrow,{className:l,children:o(i,{size:N,fill:"var(--_mp-tooltip)"})}):null,d]})})})]})}

package/dist/components/tour/MPTour.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Popover as o}from"@base-ui/react/popover";import{MPButton as i}from"../button/MPButton.js";import{MPIcon as s}from"../icon/MPIcon.js";import{CloseIcon as r}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPColor as a,useMPSize as c}from"../../internal/config.js";import{fillMessage as m}from"../../internal/i18n.js";import{useMPLocale as p,useMPMessages as u}from"../../internal/locale.js";import{COMMON as d}from"../../internal/messages/common.js";import{TOUR as f}from"../../internal/messages/tour.js";import{CONTROL_ICON as h,META_TEXT as g,PROSE_TEXT as x,SHEET_GAP as v,SHEET_PAD as b,SHEET_TITLE as j,hasContent as w}from"../../internal/scale.js";import{MPStateLayer as N}from"../../internal/StateLayer.js";import{FADE as y,PORTAL_LAYER as k}from"../../internal/surface.js";const _={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-md"},B={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};function S({spot:t,className:n}){return e("div",null===t?{"aria-hidden":"true",className:["mp-tour__scrim bg-mp-scrim/32 pointer-events-none fixed inset-0 z-40",n??""].filter(Boolean).join(" ")}:{"aria-hidden":"true",className:["mp-tour__scrim rounded-mp-xs pointer-events-none fixed z-40","shadow-[0_0_0_9999px_color-mix(in_oklab,var(--_mp-color-scrim)_32%,transparent)]","transition-[top,left,width,height] duration-(--mp-sys-motion-duration-medium1)","ease-mp-standard motion-reduce:transition-none",n??""].filter(Boolean).join(" "),style:{top:t.top,left:t.left,width:t.width,height:t.height}})}export function MPTour({steps:z,open:C,defaultOpen:M=!1,onOpenChange:P,step:O,defaultStep:$=0,onStepChange:R,onFinish:q,scrim:F=!0,skippable:I=!0,dismissible:T=!0,scrollIntoView:A=!0,locale:D,labels:E,size:H,color:L,className:V,style:W,classNames:G}){const J=c(H),K=a(L),Q=p(D),U=u(f,Q,E),X=u(d,Q),[Y,Z]=n.useState(M),[ee,te]=n.useState($),ne=C??Y,oe=Math.min(O??ee,Math.max(0,z.length-1)),ie=z[oe],[se,re]=n.useState(null),le=e=>{void 0===C&&Z(e),P?.(e)},ae=e=>{void 0===O&&te(e),R?.(e)},ce=ie?.target,me=ie?.padding??6;if(n.useEffect(()=>{if(!ne||!ce)return;const e=document.querySelector(ce);if(!(e instanceof HTMLElement))return;A&&e.scrollIntoView({block:"center",inline:"nearest",behavior:"smooth"});let t=0,n="";const o=()=>{const i=e.getBoundingClientRect(),s=`${i.top} ${i.left} ${i.width} ${i.height}`;s!==n&&(n=s,re({selector:ce,spot:{top:i.top-me,left:i.left-me,width:i.width+2*me,height:i.height+2*me}})),t=requestAnimationFrame(o)};return o(),()=>cancelAnimationFrame(t)},[ne,ce,me,A]),0===z.length)return null;const pe=ne&&ce&&se?.selector===ce?se.spot:null,ue=0===oe,de=oe===z.length-1,fe=B[J],he=w(ie?.title)||w(ie?.content);return t(o.Root,{open:ne,onOpenChange:(e,t)=>{e?le(!0):"outside-press"===t.reason||"focus-out"===t.reason||"escape-key"===t.reason&&!T?t.cancel():le(!1)},children:[ne&&F?e(S,{spot:pe,className:G?.scrim}):null,e(o.Portal,{children:e(o.Positioner,{className:k,side:ie?.side??"bottom",align:ie?.align??"center",sideOffset:ce?10:0,collisionPadding:12,anchor:()=>ce?document.querySelector(ce):{getBoundingClientRect:()=>new DOMRect(window.innerWidth/2,window.innerHeight/2,0,0)},children:t(o.Popup,{"data-mp-size":J,className:["mp-tour rounded-mp-md relative box-border flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-3",b[J],v[J],x[J],_[J],y,V??""].filter(Boolean).join(" "),style:{...l(K),...W},children:[he?t("div",{className:"flex items-start gap-3",children:[t("div",{className:"flex min-w-0 flex-1 flex-col gap-1",children:[w(ie?.title)?e(o.Title,{className:["text-mp-on-surface m-0 font-medium",j[J],G?.title??""].filter(Boolean).join(" "),children:ie?.title}):null,w(ie?.content)?e(o.Description,{className:["text-mp-on-surface-variant m-0 min-w-0",G?.content??""].filter(Boolean).join(" "),children:ie?.content}):null]}),T?t("button",{type:"button","aria-label":X.close,onClick:()=>le(!1),className:["group/close rounded-mp-full text-mp-on-surface-variant relative -me-1 -mt-1","flex size-8 shrink-0 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none",G?.close??""].filter(Boolean).join(" "),children:[e(N,{className:"group-hover/close:opacity-8 group-focus-visible/close:opacity-10"}),e(s,{icon:r,size:h[J]})]}):null]}):null,t("div",{className:["flex items-center gap-2",G?.footer??""].filter(Boolean).join(" "),children:[e("span",{className:`text-mp-on-surface-variant shrink-0 tabular-nums ${g}`,children:m(U.position,{index:String(oe+1),total:String(z.length)})}),t("div",{className:"ms-auto flex items-center gap-1",children:[I&&!de?e(i,{size:fe,variant:"text",color:"secondary",onClick:()=>le(!1),children:U.skip}):null,ue?null:e(i,{size:fe,variant:"outlined",color:K,onClick:()=>ae(oe-1),children:U.previous}),e(i,{size:fe,color:K,onClick:()=>de?(q?.(),void le(!1)):ae(oe+1),children:de?U.done:U.next})]})]})]})})})]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Popover as o}from"@base-ui/react/popover";import{MPButton as i}from"../button/MPButton.js";import{MPIcon as r}from"../icon/MPIcon.js";import{CloseIcon as s}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{useMPColor as a,useMPSize as c}from"../../internal/config.js";import{fillMessage as m}from"../../internal/i18n.js";import{useMPLocale as u,useMPMessages as p}from"../../internal/locale.js";import{COMMON as d}from"../../internal/messages/common.js";import{TOUR as f}from"../../internal/messages/tour.js";import{CONTROL_ICON as h,META_TEXT as g,PROSE_TEXT as x,SHEET_GAP as v,SHEET_PAD as j,SHEET_TITLE as b,hasContent as w}from"../../internal/scale.js";import{MPStateLayer as N}from"../../internal/StateLayer.js";import{FADE as y,PORTAL_LAYER as S}from"../../internal/surface.js";import{VISUALLY_HIDDEN as k}from"../../internal/visually-hidden.js";const _={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-md"},B={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};function z({spot:t,className:n}){return e("div",null===t?{"aria-hidden":"true",className:["mp-tour__scrim bg-mp-scrim/32 pointer-events-none fixed inset-0 z-40",n??""].filter(Boolean).join(" ")}:{"aria-hidden":"true",className:["mp-tour__scrim rounded-mp-xs pointer-events-none fixed z-40","shadow-[0_0_0_9999px_color-mix(in_oklab,var(--_mp-color-scrim)_32%,transparent)]","transition-[top,left,width,height] duration-(--mp-sys-motion-duration-medium1)","ease-mp-standard motion-reduce:transition-none",n??""].filter(Boolean).join(" "),style:{top:t.top,left:t.left,width:t.width,height:t.height}})}export function MPTour({steps:C,open:M,defaultOpen:P=!1,onOpenChange:$,step:O,defaultStep:R=0,onStepChange:q,onFinish:E,scrim:F=!0,skippable:I=!0,dismissible:T=!0,scrollIntoView:A=!0,locale:D,labels:H,size:L,color:V,className:W,style:G,classNames:J}){const K=c(L),Q=a(V),U=u(D),X=p(f,U,H),Y=p(d,U),[Z,ee]=n.useState(P),[te,ne]=n.useState(R),oe=M??Z,ie=Math.min(O??te,Math.max(0,C.length-1)),re=C[ie],[se,le]=n.useState(null),[ae,ce]=n.useState(""),me=n.useRef(ie);n.useEffect(()=>{if(!oe)return me.current=ie,void ce("");if(me.current===ie)return;me.current=ie;const e=m(X.position,{index:String(ie+1),total:String(C.length)}),t=C[ie]?.title;ce("string"==typeof t&&""!==t?`${e}. ${t}`:e)},[oe,ie,C,X.position]);const ue=e=>{void 0===M&&ee(e),$?.(e)},pe=e=>{void 0===O&&ne(e),q?.(e)},de=re?.target,fe=re?.padding??6;if(n.useEffect(()=>{if(!oe||!de)return;const e=document.querySelector(de);if(!(e instanceof HTMLElement))return;A&&e.scrollIntoView({block:"center",inline:"nearest",behavior:"smooth"});let t=0,n="";const o=()=>{const i=e.getBoundingClientRect(),r=`${i.top} ${i.left} ${i.width} ${i.height}`;r!==n&&(n=r,le({selector:de,spot:{top:i.top-fe,left:i.left-fe,width:i.width+2*fe,height:i.height+2*fe}})),t=requestAnimationFrame(o)};return o(),()=>cancelAnimationFrame(t)},[oe,de,fe,A]),0===C.length)return null;const he=oe&&de&&se?.selector===de?se.spot:null,ge=0===ie,xe=ie===C.length-1,ve=B[K],je=w(re?.title)||w(re?.content);return t(o.Root,{open:oe,onOpenChange:(e,t)=>{e?ue(!0):"outside-press"===t.reason||"focus-out"===t.reason||"escape-key"===t.reason&&!T?t.cancel():ue(!1)},children:[oe&&F?e(z,{spot:he,className:J?.scrim}):null,e(o.Portal,{children:e(o.Positioner,{className:S,side:re?.side??"bottom",align:re?.align??"center",sideOffset:de?10:0,collisionPadding:12,anchor:()=>de?document.querySelector(de):{getBoundingClientRect:()=>new DOMRect(window.innerWidth/2,window.innerHeight/2,0,0)},children:t(o.Popup,{"data-mp-size":K,className:["mp-tour rounded-mp-md relative box-border flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-3",j[K],v[K],x[K],_[K],y,W??""].filter(Boolean).join(" "),style:{...l(Q),...G},children:[je?t("div",{className:"flex items-start gap-3",children:[t("div",{className:"flex min-w-0 flex-1 flex-col gap-1",children:[w(re?.title)?e(o.Title,{className:["text-mp-on-surface m-0 font-medium",b[K],J?.title??""].filter(Boolean).join(" "),children:re?.title}):null,w(re?.content)?e(o.Description,{className:["text-mp-on-surface-variant m-0 min-w-0",J?.content??""].filter(Boolean).join(" "),children:re?.content}):null]}),T?t("button",{type:"button","aria-label":Y.close,onClick:()=>ue(!1),className:["group/close rounded-mp-full text-mp-on-surface-variant relative -me-1 -mt-1","flex size-8 shrink-0 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none",J?.close??""].filter(Boolean).join(" "),children:[e(N,{className:"group-hover/close:opacity-8 group-focus-visible/close:opacity-10"}),e(r,{icon:s,size:h[K]})]}):null]}):null,e("span",{className:k,"aria-live":"polite",children:ae}),t("div",{className:["flex items-center gap-2",J?.footer??""].filter(Boolean).join(" "),children:[e("span",{className:`text-mp-on-surface-variant shrink-0 tabular-nums ${g}`,children:m(X.position,{index:String(ie+1),total:String(C.length)})}),t("div",{className:"ms-auto flex items-center gap-1",children:[I&&!xe?e(i,{size:ve,variant:"text",color:"secondary",onClick:()=>ue(!1),children:X.skip}):null,ge?null:e(i,{size:ve,variant:"outlined",color:Q,onClick:()=>pe(ie-1),children:X.previous}),e(i,{size:ve,color:Q,onClick:()=>xe?(E?.(),void ue(!1)):pe(ie+1),children:xe?X.done:X.next})]})]})]})})})]})}