material-plus-ui 1.5.0 → 1.7.0

package/dist/components/snackbar/MPSnackbar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{MPIcon as i}from"../icon/MPIcon.js";import{CloseIcon as n}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{cssLength as p}from"../../internal/length.js";import{PORTAL_LAYER as d}from"../../internal/surface.js";const u={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},f=/*@__PURE__*/["transition-[opacity,translate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),x={top:"motion-safe:data-starting-style:-translate-y-full motion-safe:data-ending-style:-translate-y-full",bottom:"motion-safe:data-starting-style:translate-y-full motion-safe:data-ending-style:translate-y-full"},b={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"},y={xs:"min-h-9 gap-1.5 py-1.5 ps-3 pe-1.5",sm:"min-h-10 gap-2 py-2 ps-3.5 pe-2",md:"min-h-12 gap-2 py-2.5 ps-4 pe-2",lg:"min-h-14 gap-3 py-3 ps-5 pe-2.5",xl:"min-h-16 gap-3 py-3.5 pe-3 ps-6"},h={xs:16,sm:18,md:20,lg:22,xl:24};function g(e){const{color:t,icon:o,message:s,actionLabel:i,onAction:n,...r}=e;return{...r,title:s,data:{color:t,icon:o},actionProps:void 0===i?void 0:{children:i,onClick:n}}}export function useMPSnackbar(){const e=s.useToastManager();return o.useMemo(()=>({add:t=>e.add(g(t)),close:t=>e.close(t),update:(t,o)=>e.update(t,g(o)),promise:(t,o)=>e.promise(t,{loading:g(o.loading),success:e=>g("function"==typeof o.success?o.success(e):o.success),error:e=>g("function"==typeof o.error?o.error(e):o.error)}),snackbars:e.toasts}),[e])}function v({toast:o,color:a,size:l,showClose:m,closeLabel:p,swipeDirection:d,edge:u}){const g=o.data?.color??a,v=o.data?.icon,j={"--_mp-plate":g?`var(--_mp-color-${g}-container)`:"var(--_mp-color-inverse-surface)","--_mp-on-plate":g?`var(--_mp-color-on-${g}-container)`:"var(--_mp-color-inverse-on-surface)","--_mp-plate-action":g?`var(--_mp-color-${g})`:"var(--_mp-color-inverse-primary)",...g?r(g):null};return t(s.Root,{toast:o,swipeDirection:d,"data-mp-size":l,className:["mp-snackbar rounded-mp-xs shadow-mp-3 pointer-events-auto flex w-full items-center","bg-(--_mp-plate) text-(--_mp-on-plate) outline-none",y[l],b[l],f,x[u],"data-limited:hidden"].join(" "),style:j,children:[v?e("span",{className:"flex shrink-0 items-center",children:v}):null,e(s.Title,{render:e("span",{}),className:"min-w-0 flex-1 py-0.5 ps-1 [min-inline-size:min(280px,100%)]"}),e(s.Action,{className:["text-mp-label-large flex shrink-0 cursor-pointer items-center","rounded-mp-full h-8 px-3 text-(--_mp-plate-action)","transition-colors duration-(--mp-sys-motion-duration-short4)","hover:bg-(--_mp-plate-action)/8 focus-visible:bg-(--_mp-plate-action)/10","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ")}),m?t(s.Close,{"aria-label":p,className:["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer","items-center justify-center text-(--_mp-on-plate)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(c,{}),e(i,{icon:n,size:h[l]})]}):null]})}function j({position:t,width:o,...i}){const{toasts:n}=s.useToastManager(),r=t.startsWith("top")?"top":"bottom",a=["top"===r?"up":"down","left","right"];return e(s.Portal,{children:e(s.Viewport,{className:[d,"pointer-events-none fixed inset-x-0 flex flex-col gap-2 p-4",u[t]].join(" "),children:n.map(t=>e("div",{className:"w-full",style:{maxWidth:p(o)},children:e(v,{toast:t,swipeDirection:a,edge:r,...i})},t.id))})})}export function MPSnackbarProvider({color:o,position:i="bottom-start",timeout:n=5e3,limit:r=3,width:c=600,size:p="md",showClose:d=!0,closeLabel:u,locale:f,children:x}){const b=a(f),y=l(m,b);return t(s.Provider,{timeout:n,limit:r,children:[x,e(j,{position:i,width:c,color:o,size:p,showClose:d,closeLabel:u??y.close})]})}
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{Toast as s}from"@base-ui/react/toast";import{MPIcon as i}from"../icon/MPIcon.js";import{CloseIcon as n}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{useMPLocale as r,useMPMessages as l}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{cssLength as p}from"../../internal/length.js";import{PORTAL_LAYER as d}from"../../internal/surface.js";import{useMPSize as u}from"../../internal/config.js";const f={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},b=/*@__PURE__*/["transition-[opacity,translate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),x={top:"motion-safe:data-starting-style:-translate-y-full motion-safe:data-ending-style:-translate-y-full",bottom:"motion-safe:data-starting-style:translate-y-full motion-safe:data-ending-style:translate-y-full"},y={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"},h={xs:"min-h-9 gap-1.5 py-1.5 ps-3 pe-1.5",sm:"min-h-10 gap-2 py-2 ps-3.5 pe-2",md:"min-h-12 gap-2 py-2.5 ps-4 pe-2",lg:"min-h-14 gap-3 py-3 ps-5 pe-2.5",xl:"min-h-16 gap-3 py-3.5 pe-3 ps-6"},g={xs:16,sm:18,md:20,lg:22,xl:24};function v(t){const{color:e,icon:o,position:s,className:i,message:n,actionLabel:a,onAction:r,...l}=t;return{...l,title:n,data:{color:e,icon:o,position:s,className:i},actionProps:void 0===a?void 0:{children:a,onClick:r}}}export function useMPSnackbar(){const t=s.useToastManager();return o.useMemo(()=>({add:e=>t.add(v(e)),close:e=>t.close(e),update:(e,o)=>t.update(e,v(o)),promise:(e,o)=>t.promise(e,{loading:v(o.loading),success:t=>v("function"==typeof o.success?o.success(t):o.success),error:t=>v("function"==typeof o.error?o.error(t):o.error)}),snackbars:t.toasts}),[t])}function j({toast:o,color:r,size:l,showClose:m,closeLabel:p,swipeDirection:d,edge:u}){const f=o.data?.color??r,v=o.data?.icon,j={"--_mp-plate":f?`var(--_mp-color-${f}-container)`:"var(--_mp-color-inverse-surface)","--_mp-on-plate":f?`var(--_mp-color-on-${f}-container)`:"var(--_mp-color-inverse-on-surface)","--_mp-plate-action":f?`var(--_mp-color-${f})`:"var(--_mp-color-inverse-primary)",...f?a(f):null};return e(s.Root,{toast:o,swipeDirection:d,"data-mp-size":l,className:["mp-snackbar rounded-mp-xs shadow-mp-3 pointer-events-auto flex w-full items-center","bg-(--_mp-plate) text-(--_mp-on-plate) outline-none",h[l],y[l],b,x[u],"data-limited:hidden",o.data?.className??""].filter(Boolean).join(" "),style:j,children:[v?t("span",{className:"flex shrink-0 items-center",children:v}):null,t(s.Title,{render:t("span",{}),className:"min-w-0 flex-1 py-0.5 ps-1 [min-inline-size:min(280px,100%)]"}),t(s.Action,{className:["text-mp-label-large flex shrink-0 cursor-pointer items-center","rounded-mp-full h-8 px-3 text-(--_mp-plate-action)","transition-colors duration-(--mp-sys-motion-duration-short4)","hover:bg-(--_mp-plate-action)/8 focus-visible:bg-(--_mp-plate-action)/10","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ")}),m?e(s.Close,{"aria-label":p,className:["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer","items-center justify-center text-(--_mp-on-plate)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[t(c,{}),t(i,{icon:n,size:g[l]})]}):null]})}const w=["top-start","top-center","top-end","bottom-start","bottom-center","bottom-end"];function _({position:e,fallback:o,width:i,...n}){const{toasts:a}=s.useToastManager(),r=a.filter(t=>(t.data?.position??o)===e),l=e.startsWith("top")?"top":"bottom",m=["top"===l?"up":"down","left","right"];return t(s.Portal,{children:t(s.Viewport,{className:[d,"pointer-events-none fixed inset-x-0 flex flex-col gap-2 p-4",f[e]].join(" "),children:r.map(e=>t("div",{className:"w-full",style:{maxWidth:p(i)},children:t(j,{toast:e,swipeDirection:m,edge:l,...n})},e.id))})})}export function MPSnackbarProvider({color:o,position:i="bottom-start",timeout:n=5e3,limit:a=3,width:c=600,size:p,showClose:d=!0,closeLabel:f,locale:b,children:x}){const y=u(p),h=r(b),g=l(m,h);return e(s.Provider,{timeout:n,limit:a,children:[x,w.map(e=>t(_,{position:e,fallback:i,width:c,color:o,size:y,showClose:d,closeLabel:f??g.close},e))]})}

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

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import type { MPChartCurve, 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'> {
+    /**
+     * The series, oldest first. A `null` is a gap — a point nothing was measured
+     * at — and it breaks the line rather than being joined across.
+     */
+    data: readonly (number | null)[];
+    /** @default 'line' */
+    shape?: MPSparklineShape;
+    /** How the line between two points is drawn. @default 'linear' */
+    curve?: MPChartCurve;
+    /**
+     * Marks the newest point.
+     *
+     * On by default, and it is most of what makes a sparkline readable: the whole
+     * shape is context for the last value, and without the dot a reader has to
+     * work out which end is now.
+     * @default true
+     */
+    endDot?: boolean;
+    /** The value the area or the bars are measured from. @default the series' floor */
+    baseline?: number;
+    /** Pins the bottom of the scale, so two sparklines can be compared. */
+    min?: number;
+    /** And the top. */
+    max?: number;
+    /** How wide. A number is pixels; a string is any CSS length. @default '100%' */
+    width?: number | string;
+    /** How tall. Defaults to the `size` ladder. */
+    height?: number;
+    /**
+     * Which accent family the mark reads, or any CSS colour. Left out, it takes
+     * the first slot of the chart palette.
+     */
+    color?: MPColor | (string & {});
+    /**
+     * What the shape says, for a reader who cannot see it.
+     *
+     * Left out, the component writes one from the numbers — how many points, the
+     * range they cover, and which way it ended. See the note on the component for
+     * why that is the whole of its accessibility rather than a hover layer.
+     */
+    label?: string;
+    /** Which language the generated label is written in. */
+    locale?: string;
+    /** @default 'md' */
+    size?: MPSize;
+}
+/**
+ * A series as a mark, with no axes and nothing to read a value against.
+ *
+ * ```tsx
+ * <MPSparkline data={[12, 15, 14, 19, 22, 21, 27]} />
+ * ```
+ *
+ * It answers one question — which way has this been going — and it answers it in
+ * the space of a word. That is the whole of its job: put it beside the number it
+ * is the history of, in a table cell, in a list row, in an
+ * [MPStatistic](statistic)'s `trend`.
+ *
+ * ## It has no hover layer, on purpose
+ *
+ * Every other chart in this library ships one, because a chart is something a
+ * reader interrogates. A sparkline is not. It is thirty pixels tall, it has no
+ * axis to read a value against, and a floating card over a mark that size covers
+ * the mark. A reader who needs the numbers needs [MPLineChart](line-chart), and
+ * a reader who needs one number has it in the figure this is sitting under.
+ *
+ * What it does have is a **sentence**. The accessible name says the shape in
+ * words — how many points, the range, and which way it ended — so the thing a
+ * sighted reader gets from the outline is a thing every reader gets. That is the
+ * relief channel, and it is a better one than a tooltip nobody can hover on a
+ * phone.
+ *
+ * ## The line is quiet and the end is not
+ *
+ * The stroke takes a faded step of its colour and the end dot takes the whole
+ * of it. The history is context; the last value is the point. Drawn at one
+ * weight throughout, a sparkline is a shape with no emphasis in it, and the eye
+ * has to find the end for itself.
+ */
+export declare const MPSparkline: React.ForwardRefExoticComponent<MPSparklineProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/sparkline/MPSparkline.js

@@ -0,0 +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]})})});

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

@@ -0,0 +1,2 @@
+export { MPSparkline } from './MPSparkline.js';
+export type { MPSparklineProps, MPSparklineShape } from './MPSparkline.js';

package/dist/components/sparkline/index.js

@@ -0,0 +1 @@
+export{MPSparkline}from"./MPSparkline.js";

package/dist/components/spoiler/MPSpoiler.d.ts

@@ -102,5 +102,17 @@ export interface MPSpoilerProps extends Omit<React.ComponentPropsWithoutRef<'div
  * three matter: a spoiler that can be defeated by Ctrl-A is not a spoiler, and
  * `aria-hidden` alone would leave a keyboard reader tabbing into a link their
  * screen reader has been told is not there.
+ *
+ * ## The box holds still
+ *
+ * Two separate things were moving it, and both of them are the same mistake in
+ * different clothes: something that is drawn in one state and not in the other,
+ * without the state that lacks it paying for the space.
+ *
+ * A `reversible` sheet's way back out is **reserved** rather than mounted on
+ * reveal, so pressing the button does not push the rest of the page down by the
+ * height of the row that replaces it. And the cover is a **grid item** rather
+ * than an `absolute` box, so a cover taller than what it covers makes the sheet
+ * taller instead of being cut off by it.
  */
 export declare const MPSpoiler: React.ForwardRefExoticComponent<MPSpoilerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/spoiler/MPSpoiler.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{MPButton as o}from"../button/MPButton.js";import{inertProps as i}from"../../internal/inert.js";import{useMPLocale as n,useMPMessages as t}from"../../internal/locale.js";import{SPOILER as l}from"../../internal/messages/spoiler.js";import{hasContent as s,META_TEXT as d,SHEET_PAD as c,SHEET_PAD_X as m,SHEET_PAD_Y as p}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";const u="[background-color:color-mix(in_oklab,var(--_mp-color-surface)_55%,transparent)]";export const MPSpoiler=/*@__PURE__*/a.forwardRef(function({revealed:v,defaultRevealed:x=!1,onRevealedChange:h,locale:j,label:b,hideLabel:g,description:N,action:y,reversible:z=!1,maxHeight:k,blur:w=10,padded:B=!0,variant:C="outlined",size:R="md",color:_="primary",className:H,children:M,...P},S){const $=n(j),I=t(l,$),L=a.useId(),[q,A]=a.useState(x),D=v??q,E=e=>{void 0===v&&A(e),h?.(e)},F=!1===N?null:N??I.notice;return r("div",{ref:S,"data-mp-size":R,"data-mp-variant":C,"data-mp-revealed":D||void 0,className:["mp-spoiler rounded-mp-md relative isolate overflow-hidden","box-border",f[C],"text-mp-on-surface",H??""].filter(Boolean).join(" "),...P,children:[e("div",{id:L,className:["min-w-0",B?c[R]:"","transition-[filter] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",D?"":"select-none"].filter(Boolean).join(" "),style:{filter:D?void 0:`blur(${w}px)`,maxHeight:D?void 0:k,overflow:D?void 0:"hidden"},...i(!D),children:M}),D?null:r("div",{className:["absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 text-center",c[R],u].join(" "),children:[s(F)?e("p",{className:`text-mp-on-surface-variant m-0 ${d}`,children:F}):null,y??e(o,{variant:"tonal",size:R,color:_,onClick:()=>E(!0),"aria-expanded":!1,"aria-controls":L,children:b??I.reveal})]}),D&&z?e("div",{className:["flex justify-end",m[R],p[R],"pt-0"].join(" "),children:e(o,{variant:"text",size:R,color:_,onClick:()=>E(!1),"aria-expanded":!0,"aria-controls":L,children:g??I.hide})}):null]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{MPButton as a}from"../button/MPButton.js";import{inertProps as i}from"../../internal/inert.js";import{useMPLocale as t,useMPMessages as n}from"../../internal/locale.js";import{SPOILER as l}from"../../internal/messages/spoiler.js";import{hasContent as s,META_TEXT as d,SHEET_PAD as c,SHEET_PAD_X as m,SHEET_PAD_Y as p}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";import{useMPColor as u,useMPSize as v}from"../../internal/config.js";const x="[background-color:color-mix(in_oklab,var(--_mp-color-surface)_55%,transparent)]";export const MPSpoiler=/*@__PURE__*/o.forwardRef(function({revealed:h,defaultRevealed:j=!1,onRevealedChange:b,locale:g,label:w,hideLabel:N,description:z,action:k,reversible:y=!1,maxHeight:B,blur:_=10,padded:C=!0,variant:R="outlined",size:H,color:M,className:P,children:S,...$},I){const L=v(H),q=u(M),A=t(g),D=n(l,A),E=o.useId(),[F,G]=o.useState(j),J=h??F,K=e=>{void 0===h&&G(e),b?.(e)},O=!1===z?null:z??D.notice;return r("div",{ref:I,"data-mp-size":L,"data-mp-variant":R,"data-mp-revealed":J||void 0,className:["mp-spoiler rounded-mp-md relative isolate overflow-hidden","box-border","grid grid-cols-1",y?"grid-rows-[auto_auto]":"grid-rows-[auto]",f[R],"text-mp-on-surface",P??""].filter(Boolean).join(" "),...$,children:[e("div",{id:E,className:["col-start-1 row-start-1 min-w-0",C?c[L]:"","transition-[filter] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",J?"":"select-none"].filter(Boolean).join(" "),style:{filter:J?void 0:`blur(${_}px)`,maxHeight:J?void 0:B,overflow:J?void 0:"hidden"},...i(!J),children:S}),J?null:r("div",{className:["col-span-full row-span-full z-10","flex flex-col items-center justify-center gap-2 text-center",c[L],x].join(" "),children:[s(O)?e("p",{className:`text-mp-on-surface-variant m-0 ${d}`,children:O}):null,k??e(a,{variant:"tonal",size:L,color:q,onClick:()=>K(!0),"aria-expanded":!1,"aria-controls":E,children:w??D.reveal})]}),y?e("div",{className:["col-start-1 row-start-2 flex justify-end",m[L],p[L],"pt-0",J?"":"invisible"].filter(Boolean).join(" "),...i(!J),children:e(a,{variant:"text",size:L,color:q,onClick:()=>K(!1),"aria-expanded":!0,"aria-controls":E,children:N??D.hide})}):null]})});

package/dist/components/stack/MPStack.d.ts

@@ -0,0 +1,198 @@
+import * as React from 'react';
+import type { MPAnimateTimeline, MPAnimateTrigger, MPAnimation, MPEasing, MPSize } from '../../types.js';
+/**
+ * Which way the pile grows.
+ *
+ * `diagonal` is a **horizontal** flow with a per-item vertical offset, not a
+ * flow of its own: see the note on `drop` for why the second axis cannot be
+ * left to the layout.
+ */
+export type MPStackDirection = 'horizontal' | 'vertical' | 'diagonal';
+/** Which end of the pile is nearest the reader. */
+export type MPStackFront = 'first' | 'last';
+export interface MPStackProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which way the pile grows.
+     * @default 'horizontal'
+     */
+    direction?: MPStackDirection;
+    /**
+     * How far each item sits under the one before it, along the axis the pile
+     * flows on — a number in pixels, or any CSS length. Left out it is a fraction
+     * of `size`.
+     */
+    overlap?: number | string;
+    /**
+     * How far each item sits below the one before it on `diagonal`, which is the
+     * axis the flow is **not** on. Defaults to `overlap`, which is a shallow fan.
+     *
+     * It is a prop rather than an angle because a true 45° would need the items'
+     * own width, and a library does not have it: the horizontal advance is
+     * `width − overlap`, and `width` is whatever the caller put in. Nothing here
+     * pretends otherwise.
+     */
+    drop?: number | string;
+    /**
+     * Sets the default `overlap`, and nothing else. It is not passed to the
+     * items — a `Stack` does not know what they are.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** How many items are drawn before the rest become an `overflow`. */
+    max?: number;
+    /**
+     * How many there are altogether, when the stack was handed only the first few.
+     * Without it the count is worked out from the children, which is right only
+     * when all of them were passed.
+     */
+    total?: number;
+    /**
+     * The last item in the pile, built from the number that did not fit.
+     *
+     * A **function** rather than a node, because the count is the whole of what
+     * that item has to say: `(hidden) => <MPAvatar initials={`+${hidden}`} />`.
+     * Left out, nothing is drawn for the remainder.
+     */
+    overflow?: (hidden: number) => React.ReactNode;
+    /**
+     * Which end of the pile is nearest the reader.
+     * @default 'first'
+     */
+    front?: MPStackFront;
+    /**
+     * What each item is scaled by relative to the one in front of it. `1` is no
+     * change; `0.94` puts the fifth card at about three quarters.
+     *
+     * It changes what is drawn and not what is measured, so the spacing of the
+     * pile is the same either way — a scaled card does not pull the ones behind
+     * it closer.
+     * @default 1
+     */
+    scaleStep?: number;
+    /**
+     * The same, for opacity. `0.85` fades a deck into the page behind it.
+     * @default 1
+     */
+    opacityStep?: number;
+    /**
+     * Draws a hairline of the page's own `surface` around each item, so two
+     * shapes of similar tone have an edge between them.
+     *
+     * On the **item** rather than on the wrapper around it, because a ring has to
+     * follow the shape it is tracing and a square ring around a circular avatar
+     * is worse than none. That is a fixed-depth selector, so it reaches a child
+     * this stack put there and not one wrapped in something else — see the
+     * component's documentation.
+     * @default false
+     */
+    ring?: boolean;
+    /**
+     * An entrance for each item, from the same six the `MPAnimate*` components
+     * run. Left out, nothing is animated.
+     */
+    transition?: MPAnimation;
+    /** How long one item's entrance takes, in milliseconds. */
+    duration?: number;
+    /** How long before the first one starts, in milliseconds. */
+    delay?: number;
+    /** Which Material easing curve the entrance runs on. */
+    easing?: MPEasing;
+    /**
+     * How long after one item the next one starts, in milliseconds.
+     * @default 60
+     */
+    stagger?: number;
+    /** How much longer each item takes than the one before it, in milliseconds. */
+    durationStep?: number;
+    /** Deals the pile from the back. */
+    reverse?: boolean;
+    /**
+     * What starts the entrance.
+     * @default 'mount'
+     */
+    trigger?: MPAnimateTrigger;
+    /** Runs it, when `trigger` is `manual`. */
+    play?: boolean;
+    /**
+     * With `trigger="visible"`, whether it runs only the first time.
+     * @default true
+     */
+    once?: boolean;
+    /**
+     * With `trigger="visible"`, how much has to be on screen to count.
+     * @default 0.2
+     */
+    threshold?: number;
+    /** Holds the entrance where it is. */
+    paused?: boolean;
+    /** Hands the entrance to the reader's scrolling. */
+    timeline?: MPAnimateTimeline;
+    /** Which part of the travel through the scrollport the entrance covers. */
+    range?: string;
+    /** The things in the pile. */
+    children?: React.ReactNode;
+}
+/**
+ * Things laid over each other in a pile.
+ *
+ * A stack of avatars, a deck of cards, a heap of documents, a run of overlapped
+ * thumbnails: one component, because "several of these, overlapping" is one
+ * idea and the things being overlapped are not this component's business.
+ *
+ * ## Why the overlap is a margin and not a `translate`
+ *
+ * This is the detail nearly every implementation of this gets wrong. Move the
+ * items with `translate` and each one still **occupies its full width**: the
+ * box stays the size of one item plus the full width of all the others, the
+ * pile is drawn outside it, and everything after the stack on the page is laid
+ * out against a measurement that is wrong. It cannot go in a sentence.
+ *
+ * A negative margin takes the space back, so the box is exactly the size of
+ * what is drawn. At 32px items with a 10px overlap, five of them come to
+ * 120×32 horizontally, 32×120 vertically and 120×72 on the diagonal — the box
+ * fits the content in all three.
+ *
+ * The margin is **logical**, so a horizontal pile overlaps the other way under
+ * RTL without being asked to.
+ *
+ * ## Why `diagonal` is a horizontal flow
+ *
+ * Because a flow only overlaps items on the axis it flows along. The other axis
+ * has to be written per item, as a margin multiplied by the item's index — a
+ * fixed `margin-block-start` in a row does not accumulate, it puts every item
+ * at the same offset and the fan does not happen.
+ *
+ * ## What it does not do
+ *
+ * It does not know what the items **are**, which is the price of being general.
+ * There is no `variant`, no `color` and no `shape` to set once for the pile:
+ * `size` here picks the default overlap and is not passed on. Set the ones your
+ * items share on [MPConfigProvider](../../guide/config), and the rest per item.
+ *
+ * ## Two layers per item, and why
+ *
+ * Each item is wrapped twice. The outer span carries the offset, the `z-index`
+ * and the entrance; the inner one carries the static `scale` and `opacity` that
+ * make depth. They are separate because the `grow` and `zoom` keyframes
+ * animate the individual `scale` property — an animation and a resting depth on
+ * the same element means the keyframe wins and the depth is gone the moment
+ * something is animated.
+ *
+ * The wrappers are also what keeps this off the children. Cloning them to add a
+ * `className` would require every child to accept one, and a face wrapped in a
+ * router's link or a tooltip trigger has no obligation to.
+ *
+ * `ring` is the one exception, and it is honest about the cost: it is a
+ * fixed-depth descendant selector, so it lands on the element this stack
+ * wrapped. A child that is itself a wrapper gets the ring on the wrapper.
+ *
+ * ## What `transition` costs
+ *
+ * 2.1 kB gzipped against the 0.9 kB the layout alone would come to, because it
+ * reads the same effect tables `MPAnimateFade` does. It is here rather than
+ * composed from outside because the items are inside wrappers this component
+ * builds and nothing outside can reach them — but a stack of four faces with no
+ * `transition` is paying for six effects it will never run, and that is written
+ * into the documentation rather than left to be found.
+ */
+export declare const MPStack: React.ForwardRefExoticComponent<MPStackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/stack/MPStack.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{ANIMATION_CLASS as a,ANIM_BASE as r,animationSlots as i,useAnimationRun as n}from"../../internal/animate.js";import{lengthValue as l}from"../../internal/animate.js";import{useMPSize as o}from"../../internal/config.js";const s={xs:"0.625rem",sm:"0.75rem",md:"1.125rem",lg:"1.25rem",xl:"1.5rem"};export const MPStack=/*@__PURE__*/t.forwardRef(function({direction:c="horizontal",overlap:m,drop:d,size:p,max:f,total:g,overflow:h,front:u="first",scaleStep:v=1,opacityStep:y=1,ring:x=!1,transition:S,duration:k,delay:j=0,easing:$,stagger:w=60,durationStep:z=0,reverse:N=!1,trigger:B="mount",play:M,once:_=!0,threshold:I=.2,paused:b,timeline:A,range:C,className:E,style:O,children:P,...R},V){const q=o(p),D=n({trigger:B,play:M,once:_,threshold:I,paused:b,infinite:!1}),F="view"===A?b?"paused":"running":D.state,G=t.Children.toArray(P),H=void 0===f?G:G.slice(0,Math.max(0,f)),J=g??G.length,K=Math.max(0,J-H.length),L=h&&K>0?h(K):null,Q=null===L?H:[...H,L],T=void 0===m?s[q]:l(m),U=void 0===d?T:l(d),W="vertical"===c?"flex-col":"flex-row",X=S?`${r} ${a[S]}`:"";return e("div",{ref:e=>{D.ref(e),"function"==typeof V?V(e):V&&(V.current=e)},"data-mp-size":q,"data-mp-direction":c,className:["mp-stack isolate inline-flex align-middle",W,"diagonal"===c?"items-start":"items-center",x?"ring-mp-surface [&>*>*>*]:ring-2":"",E??""].filter(Boolean).join(" "),style:{"--_mp-anim-state":F,...O},...D.handlers,...R,children:Q.map((a,r)=>{const n=N?Q.length-1-r:r,l="first"===u?r:Q.length-1-r;return e("span",{className:X,style:{zIndex:"first"===u?Q.length-r:r+1,...r>0&&"vertical"===c?{marginBlockStart:`calc(${T} * -1)`}:{},...r>0&&"vertical"!==c?{marginInlineStart:`calc(${T} * -1)`}:{},..."diagonal"===c?{marginBlockStart:`calc(${U} * ${r})`}:{},...S?i({effect:S,duration:k,delay:j+n*w,easing:$,repeat:1,durationOffset:n*z,timeline:A,range:C}):{}},children:e("span",{className:"mp-stack__item block",style:{scale:1===v?void 0:String(v**l),opacity:1===y?void 0:y**l},children:a})},t.isValidElement(a)?a.key??r:r)})})});

package/dist/components/stack/index.d.ts

@@ -0,0 +1,2 @@
+export { MPStack } from './MPStack.js';
+export type { MPStackDirection, MPStackFront, MPStackProps } from './MPStack.js';

package/dist/components/stack/index.js

@@ -0,0 +1 @@
+export{MPStack}from"./MPStack.js";

package/dist/components/statistic/MPStatistic.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import type { MPAlign, MPSize, MPSlots } from '../../types.js';
+/** How the move from `previousValue` is written. */
+export type MPStatisticDeltaFormat = 'percent' | 'absolute' | 'both' | 'none';
+/** The parts an `MPStatistic` draws that a `className` cannot reach. */
+export type MPStatisticSlot = 'label' | 'value' | 'delta' | 'caption' | 'trend';
+export interface MPStatisticProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'prefix' | 'color'> {
+    /** What the figure is. Sentence case, and no trailing colon. */
+    label?: React.ReactNode;
+    /**
+     * The figure.
+     *
+     * A number is written by `locale` and `format`; anything else is drawn as it
+     * is, for a value that is already a string — `"2h 14m"`, `"A+"` — or a piece
+     * of markup.
+     */
+    value: React.ReactNode;
+    /**
+     * How a numeric `value` is written. An `Intl.NumberFormat` options object, and
+     * giving one turns `compact` off: a caller who has asked for a currency has
+     * said what they want.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Shortens a number of five digits or more — `12.9K`, `4.2M`.
+     *
+     * Four digits stay: `1,284` is a figure anybody takes in at a glance, and
+     * `1.3K` has thrown away two of them to save two characters.
+     * @default true
+     */
+    compact?: boolean;
+    /** Which language the figure and the move are written in. */
+    locale?: string;
+    /** Placed before the figure, on the same line — a currency mark, an icon. */
+    prefix?: React.ReactNode;
+    /** Placed after it, one step smaller — a unit, a denominator. */
+    unit?: React.ReactNode;
+    /** What the figure was, so the move from it can be drawn. */
+    previousValue?: number;
+    /**
+     * How that move is written.
+     * @default 'percent'
+     */
+    delta?: MPStatisticDeltaFormat;
+    /**
+     * Which direction is the good one.
+     *
+     * It is a prop and not an assumption because half the figures on a dashboard
+     * are the other way round: churn, latency, cost and error rate are all better
+     * when they fall, and a component that painted every fall red would be lying
+     * about four tiles in eight.
+     * @default 'up'
+     */
+    betterWhen?: 'up' | 'down';
+    /** What the move is measured against — "vs last week". Read out with it. */
+    period?: React.ReactNode;
+    /** A line under the figure, for the thing that does not fit anywhere else. */
+    caption?: React.ReactNode;
+    /**
+     * Room under the figure for a picture of it — a sparkline, usually.
+     *
+     * A slot rather than a chart of its own: a statistic that owned a sparkline
+     * would be a statistic that had opinions about a second component's data
+     * shape, and the two are separable.
+     */
+    trend?: React.ReactNode;
+    /** @default 'start' */
+    align?: MPAlign;
+    /** @default 'md' */
+    size?: MPSize;
+    classNames?: MPSlots<MPStatisticSlot>;
+}
+/**
+ * One figure, said once and read from across a desk.
+ *
+ * ```tsx
+ * <MPStatistic label="Active installs" value={128400} previousValue={119200} />
+ * ```
+ *
+ * It is the chart you draw when there is nothing to plot. A single number has no
+ * shape, no order and no second dimension, and putting it on a pair of axes to
+ * make it look like data is the most common way a dashboard wastes a panel. What
+ * a reader wants from one figure is the figure, what it is, and whether it is
+ * going the right way.
+ *
+ * ## The direction is the caller's to say
+ *
+ * `betterWhen` exists because half the figures on any dashboard are the other
+ * way round — churn, latency, cost and error rate are all better when they fall.
+ * A component that painted every fall red would be wrong about four tiles in
+ * eight, and it would be wrong *confidently*, in the one colour a reader trusts
+ * without checking.
+ *
+ * Flat is a third state rather than a quiet "up". It takes the muted ink and a
+ * dash, because a figure that has not moved has not done anything good either.
+ *
+ * ## The figure does not wear the direction's colour
+ *
+ * Only the move does. The number itself is `on-surface` at every size, in every
+ * state: it is the thing being reported, and a reported value that changes
+ * colour with its own trend is a value the reader has to decode before they can
+ * read it.
+ */
+export declare function MPStatistic({ label, value, format, compact, locale: localeProp, prefix, unit, previousValue, delta, betterWhen, period, caption, trend, align, size: sizeProp, className, classNames, ...props }: MPStatisticProps): React.JSX.Element;

package/dist/components/statistic/MPStatistic.js

@@ -0,0 +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]})}

package/dist/components/statistic/index.d.ts

@@ -0,0 +1,2 @@
+export { MPStatistic } from './MPStatistic.js';
+export type { MPStatisticDeltaFormat, MPStatisticProps, MPStatisticSlot } from './MPStatistic.js';

package/dist/components/statistic/index.js

@@ -0,0 +1 @@
+export{MPStatistic}from"./MPStatistic.js";