material-plus-ui 1.6.0 → 1.7.0

package/dist/internal/ChartChrome.js

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

package/dist/internal/ChartFrame.d.ts

@@ -0,0 +1,197 @@
+import * as React from 'react';
+import { type ChartBaseProps } from './ChartChrome.js';
+import { BandScale, ChartValue, PlotBox, ValueScale } from './chart.js';
+import type { MPChartAxis, MPChartCategory, MPChartSeries, MPChartTooltipItem, MPSize } from '../types.js';
+/**
+ * The frame a chart with two axes is drawn in.
+ *
+ * The plot box once the axes have taken their bands, the value scale, the band
+ * scale, the grid and the crosshair — everything that is identical on a line
+ * chart and a bar chart. What is left for a chart to do is its marks, and it is
+ * handed **pixels** to draw them at: a component that had to know which way
+ * round the axes run is a component that gets it wrong when somebody turns it
+ * sideways.
+ *
+ * The parts a chart with no axes also needs — the legend, the hover panel, the
+ * spoken readout, the table and the arrangement holding them — are in
+ * `ChartChrome.tsx`, so a pie chart can have them without carrying any of this.
+ */
+/** What a chart with two axes adds. */
+export interface CartesianChartProps extends ChartBaseProps {
+    /** The series, in the order their colours are handed out. */
+    series: readonly MPChartSeries[];
+    /** The category axis' labels. Points may carry their own `x` instead. */
+    categories?: readonly MPChartCategory[];
+    /** The category axis. */
+    xAxis?: MPChartAxis;
+    /** The value axis. */
+    yAxis?: MPChartAxis;
+}
+/**
+ * One mark on a plot whose marks are not arranged in columns.
+ *
+ * A scatter has no shared categories, so there is no column for a pointer to be
+ * inside and nothing for a crosshair to be dropped through — the only question
+ * a reader can be asking is "which of these dots". A chart that says so hands
+ * the frame its marks and gets the nearest-mark search, the arrow keys and the
+ * panel's anchoring for free.
+ */
+export interface ChartMark {
+    /** Its series' place in the array as it was passed — where its colour is from. */
+    series: number;
+    /** Its own place within that series. */
+    index: number;
+    /** Its centre, in pixels from the chart's top-left. */
+    x: number;
+    y: number;
+    /** How big it is. Widens the hit target, so a bubble is easier to hit than a dot. */
+    r: number;
+    /**
+     * Its half-width and half-height, where the mark is a box rather than a disc.
+     *
+     * A span on a timeline is two hundred pixels of bar whose centre a pointer may
+     * never go near, so measuring to that centre would hand the row's short bar a
+     * hover the reader is plainly not making. Given these, the pointer is tested
+     * against the mark's **body**.
+     */
+    rx?: number;
+    ry?: number;
+}
+/**
+ * Where everything goes — the half of the context settled before the pointer is
+ * consulted.
+ *
+ * Split out because the marks are built from it: a chart hands the frame a
+ * builder, the frame runs it on the layout, and only then is there a list for
+ * the pointer to be nearest to. A builder that could read what is active would
+ * be reading a value that does not exist yet.
+ */
+export interface CartesianLayout {
+    plot: PlotBox;
+    /** Every series unpacked, in the order it was passed. */
+    values: readonly (readonly ChartValue[])[];
+    /** Which of them are drawn. */
+    visible: readonly boolean[];
+    /** And what colour each one is, by its original index. */
+    colors: readonly string[];
+    scale: ValueScale;
+    band: BandScale;
+    /** Bars run along the category axis rather than across it. */
+    horizontal: boolean;
+    /** Where a value sits along the value axis, in pixels from the chart's edge. */
+    valuePx: (value: number) => number;
+    /** Where a category's centre sits along the category axis, as an offset along it. */
+    categoryPx: (index: number) => number;
+    /** The two combined, whichever way round the chart runs. */
+    point: (index: number, value: number) => {
+        x: number;
+        y: number;
+    };
+    /**
+     * The scale the **category** axis runs on, where `xScale` made it a second
+     * value axis. `null` on every chart whose categories are columns.
+     */
+    categoryScale: ValueScale | null;
+    /**
+     * Where a value sits along the category axis, in pixels from the chart's
+     * edge — the same absolute reckoning `valuePx` uses, and deliberately not
+     * `categoryPx`'s offset-along-the-axis. Only meaningful with `xScale="value"`.
+     */
+    categoryValuePx: (value: number) => number;
+    /** Where the baseline sits along the value axis. */
+    zeroPx: number;
+    categories: readonly MPChartCategory[];
+    format: (value: number) => string;
+    size: MPSize;
+}
+/** The layout, plus everything the pointer decides. */
+export interface CartesianContext extends CartesianLayout {
+    /** The series the legend is being hovered over, if any. */
+    hovered: number | null;
+    /** The category under the pointer, if any. */
+    activeIndex: number | null;
+    /** Every mark, where the chart supplied a builder. Empty otherwise. */
+    marks: readonly ChartMark[];
+    /** The one the pointer is on, or the one the arrow keys walked to. */
+    activeMark: ChartMark | null;
+}
+interface CartesianFrameProps extends CartesianChartProps {
+    /**
+     * Makes the category axis a second **value** axis instead of a row of
+     * columns. What a scatter needs and what nothing else does.
+     * @default 'band'
+     */
+    xScale?: 'band' | 'value';
+    /**
+     * Builds every mark on the plot, which swaps the frame's column hit-testing
+     * for a nearest-mark search and makes the arrow keys walk this list. The
+     * result comes back on the context, so the marks are laid out once and drawn
+     * from the same array they are tested against.
+     */
+    marks?: (layout: CartesianLayout) => readonly ChartMark[];
+    /**
+     * How far off a mark the pointer still counts as on it, in pixels, added to
+     * the mark's own radius. An 8px dot is not a hit target.
+     * @default 24
+     */
+    markRadius?: number;
+    /** The legend's swatch, where a chart's marks are not all the same shape. */
+    swatch?: (index: number, color: string) => React.ReactNode;
+    /**
+     * The value axis' scale, already worked out.
+     *
+     * For an axis that is not a count. `valueScale` rounds to 1-2-5-10, which is
+     * the family a reader does arithmetic in and exactly the wrong one for an
+     * instant — sixty, twenty-four, seven, twelve. A chart whose axis has its own
+     * arithmetic builds the scale itself and hands it over.
+     */
+    scale?: ValueScale;
+    /**
+     * The table behind the picture, for a chart whose data are not a grid of
+     * series against categories.
+     *
+     * The default one is right wherever the marks *are* that grid, and useless
+     * where they are not: a timeline's rows are the category axis and its marks
+     * are spans within them, so the frame has no cell to look an answer up in.
+     */
+    table?: (id: string) => React.ReactNode;
+    /** What the panel says about a mark whose value is not a cell of the grid. */
+    markTooltip?: (mark: ChartMark) => {
+        heading: React.ReactNode;
+        items: readonly MPChartTooltipItem[];
+    } | null;
+    /** Bars, and only bars, run the other way. */
+    horizontal?: boolean;
+    /** The value axis measures totals rather than parts. */
+    stacked?: boolean;
+    /** A line chart may leave zero out; a bar chart may not. */
+    includeZero?: boolean;
+    /** How much of a band the marks take. Bars need room reserved; lines do not. */
+    bandRatio?: number;
+    /**
+     * Lines and areas sit **on** the category ticks; bars sit **between** them.
+     * The difference is one half-step, and getting it wrong is what leaves a line
+     * chart's first point floating a centimetre off the axis.
+     */
+    inset?: boolean;
+    /**
+     * Extra room at the **far end of the value axis**, for labels that ride the
+     * marks. The top of the plot on an upright chart and its right-hand edge on a
+     * horizontal one — a value label sits past the end of the mark, and which
+     * edge that is turns with the chart.
+     */
+    headroom?: number;
+    /**
+     * Room on **every** side, for marks drawn from their centre. `headroom` is
+     * not enough for those: a dot at the largest x hangs over the right edge and
+     * one at the smallest hangs over the value axis' own labels.
+     */
+    markInset?: number;
+    /** Draws the marks. */
+    children: (context: CartesianContext) => React.ReactNode;
+}
+/**
+ * The frame: two axes, a grid, a crosshair, a legend, a panel and the table.
+ */
+export declare function CartesianFrame({ series, categories, xAxis, yAxis, horizontal, stacked, includeZero, bandRatio, inset, headroom, markInset, xScale, marks, markRadius, swatch, scale: givenScale, table: givenTable, markTooltip, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, className, style, children, ...rest }: CartesianFrameProps): React.JSX.Element;
+export {};

package/dist/internal/ChartFrame.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useMPElementSize as i}from"../hooks/useMPElementSize.js";import{useMPLocale as a,useMPMessages as n}from"./locale.js";import{useMPSize as o}from"./config.js";import{CHART as r}from"./messages/chart.js";import{TABLE as s}from"./messages/table.js";import{ChartLegend as h,ChartShell as c,ChartTable as d,ChartTooltipPanel as u,useVisibility as m}from"./ChartChrome.js";import{CHART_FONT_SIZE as x,MARKER_RADIUS as f,PLOT_HEIGHT as p,bandScale as g,categoryAt as y,categoryCount as v,categoryExtent as k,fitsLast as b,formatCategory as M,formatStatistic as w,seriesColor as z,seriesExtent as S,showsTick as P,textWidth as A,tickStride as C,toValues as j,truncate as B,valueScale as $}from"./chart.js";const R=[],W="var(--_mp-color-outline-variant)",F="var(--_mp-color-outline)",N="var(--_mp-color-on-surface-variant)";function T({plot:l,scale:i,horizontal:a,categoryPx:n,categoryScale:o,categoryValuePx:r,valuePx:s,tickTexts:h,categoryTexts:c,valueAxis:d,categoryAxis:u,fontSize:m,zeroPx:x}){const f=!1!==d?.grid&&!d?.hidden,p=!u?.hidden&&(u?.grid??null!==o),g=e=>o?r(o.ticks[e]):(a?l.top:l.left)+n(e),y=C(c.length,a?l.height:l.width,a?1.8*m:Math.max(...c.map(e=>A(e,m)),1)+12),v=C(i.ticks.length,a?l.width:l.height,a?Math.max(...h.map(e=>A(e,m)),1)+16:2*m),k=c.length>1?Math.abs(g(1)-g(0)):l.width,M=i.ticks.length>1?Math.abs(s(i.ticks[1])-s(i.ticks[0])):l.height,w=b(c.length,y,k,a?1.8*m:A(c[c.length-1]??"",m)),z=b(i.ticks.length,v,M,a?A(h[h.length-1]??"",m):1.6*m);return t("g",{className:"mp-chart__axes",children:[i.ticks.map((n,o)=>{const r=s(n),c=Math.abs(n)<1e-9&&i.min<0,u=!d?.hidden&&P(o,i.ticks.length,v,z);return t("g",{children:[f?e("line",a?{x1:r,x2:r,y1:l.top,y2:l.top+l.height,stroke:c?F:W,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:r,y2:r,stroke:c?F:W,strokeWidth:1}):null,u?e("text",{x:a?r:l.left-8,y:a?l.top+l.height+m+6:r,textAnchor:a?"middle":"end",dominantBaseline:a?"auto":"central",fill:N,fontSize:m,children:h[o]}):null]},`v${o}`)}),c.map((i,n)=>{const o=g(n),r=!u?.hidden&&P(n,c.length,y,w);return t("g",{children:[p?e("line",a?{x1:l.left,x2:l.left+l.width,y1:o,y2:o,stroke:W,strokeWidth:1}:{x1:o,x2:o,y1:l.top,y2:l.top+l.height,stroke:W,strokeWidth:1}):null,r?e("text",{x:a?l.left-8:o,y:a?o:l.top+l.height+m+6,textAnchor:a?"end":"middle",dominantBaseline:a?"central":"auto",fill:N,fontSize:m,children:i}):null]},`c${n}`)}),e("line",a?{x1:x,x2:x,y1:l.top,y2:l.top+l.height,stroke:F,strokeWidth:1}:{x1:l.left,x2:l.left+l.width,y1:x,y2:x,stroke:F,strokeWidth:1}),d?.label&&!d.hidden?e("text",{x:a?l.left+l.width/2:m,y:a?l.top+l.height+2*m+12:l.top+l.height/2,textAnchor:"middle",dominantBaseline:a?"auto":"central",fill:N,fontSize:m,transform:a?void 0:`rotate(-90 ${m} ${l.top+l.height/2})`,children:d.label}):null,u?.label&&!u.hidden?e("text",{x:a?m:l.left+l.width/2,y:a?l.top+l.height/2:l.top+l.height+2*m+12,textAnchor:"middle",dominantBaseline:a?"central":"auto",fill:N,fontSize:m,transform:a?`rotate(-90 ${m} ${l.top+l.height/2})`:void 0,children:u.label}):null]})}export function CartesianFrame({series:b,categories:P,xAxis:C,yAxis:W,horizontal:N=!1,stacked:_=!1,includeZero:E=!0,bandRatio:I=1,inset:V=!1,headroom:D=0,markInset:X=0,xScale:Y="band",marks:Z,markRadius:L=24,swatch:H,scale:K,table:U,markTooltip:q,height:G,format:J,locale:O,label:Q,legend:ee,tooltip:te,empty:le,size:ie,className:ae,style:ne,children:oe,...re}){const se=o(ie),he=a(O),ce=n(r,he),de=n(s,he),ue=l.useRef(null),me=i(ue),xe=me.width,fe=l.useId(),pe=m(b),[ge,ye]=l.useState(null),[ve,ke]=l.useState(null),[be,Me]=l.useState(null),we=l.useCallback(e=>w(e,he,J,!0),[J,he]),ze=l.useMemo(()=>j(b),[b]),Se=l.useMemo(()=>b.map((e,t)=>z(t,e.color)),[b]),Pe=l.useMemo(()=>b.map(e=>e.name),[b]),Ae=v(b),Ce=l.useMemo(()=>Array.from({length:Ae},(e,t)=>y(t,P,ze)),[Ae,P,ze]),je=ze.filter((e,t)=>pe.visible[t]),Be=S(je,_),$e=x[se],Re=W,We=C,Fe=K??$(Be,{min:Re?.min,max:Re?.max,tickCount:Re?.tickCount,includeZero:E}),Ne="value"===Y?k(je,P):null,Te="value"===Y?$(Ne,{min:We?.min,max:We?.max,tickCount:We?.tickCount,includeZero:!1}):null,_e=Fe.ticks.map((e,t)=>Re?.tickFormat?String(Re.tickFormat(e,t)):we(e)),Ee=Te?Te.ticks.map((e,t)=>We?.tickFormat?String(We.tickFormat(e,t)):w(e,he,void 0,!0)):Ce.map((e,t)=>We?.tickFormat?String(We.tickFormat(e,t)):M(e,he)),Ie=_e.reduce((e,t)=>Math.max(e,A(t,$e)),0),Ve=$e+6,De=Re?.hidden?0:Ie+10+(Re?.label?Ve:0),Xe=(xe-(N?0:De)-16)/Math.max(1,Ae),Ye=Te?Ee:N||Xe-6>=2.4*$e?Ee.map(e=>B(e,N?150:Xe-6,$e)):Ee,Ze=Ye.reduce((e,t)=>Math.max(e,A(t,$e)),0),Le=N?We?.hidden?0:Ze+10+(We?.label?Ve:0):De,He=N?Re?.hidden?0:$e+12+(Re?.label?Ve:0):We?.hidden?0:$e+12+(We?.label?Ve:0),Ke=(N?We:Re)?.thickness??Le,Ue=(N?Re:We)?.thickness??He,qe=(N?12+D:Math.max(8,Ze/2))+X,Ge=f[se]+4+(N?0:D)+X,Je="number"==typeof G?G:void 0===G?p[se]:me.height,Oe={left:Ke+X,top:Ge,width:Math.max(0,xe-Ke-X-qe),height:Math.max(0,Je-Ge-Ue-X)},Qe=N?Oe.height:Oe.width,et=g(V?Math.max(1,Ae-1):Ae,Qe,I),tt=l.useCallback(e=>V?Ae<=1?Qe/2:Qe*e/(Ae-1):et.centre(e),[V,Ae,Qe,et]),lt=l.useCallback(e=>N?Oe.left+Fe.fraction(e)*Oe.width:Oe.top+(1-Fe.fraction(e))*Oe.height,[N,Oe.left,Oe.top,Oe.width,Oe.height,Fe]),it=l.useCallback(e=>N?Oe.top+(1-(Te?.fraction(e)??0))*Oe.height:Oe.left+(Te?.fraction(e)??0)*Oe.width,[N,Oe.left,Oe.top,Oe.width,Oe.height,Te]),at=l.useCallback((e,t)=>N?{x:lt(t),y:Oe.top+tt(e)}:{x:Oe.left+tt(e),y:lt(t)},[N,lt,tt,Oe.left,Oe.top]),nt=lt(Math.min(Math.max(0,Fe.min),Fe.max)),ot={plot:Oe,values:ze,visible:pe.visible,colors:Se,scale:Fe,band:et,horizontal:N,valuePx:lt,categoryPx:tt,point:at,categoryScale:Te,categoryValuePx:it,zeroPx:nt,categories:Ce,format:we,size:se},rt=Z?Z(ot):R,st=!1===te?{mode:"none"}:!0===te||void 0===te?{}:te,ht=st.mode??(Z?"item":"index"),ct=null===ve?null:rt[ve]??null,dt=Z?ct?ct.index:null:ge,ut=Z?rt.length:Ae,mt=()=>{ye(null),ke(null),Me(null)},xt=e=>{const t=null===e?null:Math.min(ut-1,Math.max(0,e));Z?ke(t):ye(t)},ft=e=>{Me(null);xt(((Z?ve:ge)??(e>0?-1:ut))+e)},pt=null===dt?[]:b.flatMap((e,t)=>{if(!pe.visible[t]||ct&&ct.series!==t)return[];const l=ze[t]?.[dt];return l&&null!==l.value?[{seriesIndex:t,name:e.name,color:l.color??Se[t],value:l.value,formatted:we(l.value),label:l.label}]:[]}),gt=ct&&q?q(ct):null,yt=gt?gt.items:"item"===ht&&pt.length>1&&null!==be?[pt.reduce((e,t)=>Math.abs(lt(t.value??0)-be)<Math.abs(lt(e.value??0)-be)?t:e)]:pt,vt=gt?gt.heading:ct?M(ze[ct.series]?.[ct.index]?.x??P?.[ct.index]??ct.index,he):null===dt?void 0:M(Ce[dt]??dt,he),kt=ct?ct.x:N?lt(yt[0]?.value??0):Oe.left+tt(dt??0),bt=ct?ct.y:N?Oe.top+tt(dt??0):Oe.top+Oe.height/2,Mt=ct?(ct.x-Oe.left)/Math.max(1,Oe.width)>.6:(N?Fe.fraction(yt[0]?.value??0):tt(dt??0)/Math.max(1,Qe))>.6,wt=!1===ee?{interactive:!1}:!0===ee||void 0===ee?{}:ee,zt=!0===ee||!1!==ee&&b.length>1,St=wt.side??"bottom",Pt={...ot,hovered:pe.hovered,activeIndex:dt,marks:rt,activeMark:ct},At=0===Ae||null===Be||"value"===Y&&null===Ne;return e(c,{...re,size:se,className:ae,style:ne,plotRef:ue,name:Q??ce.label,describedBy:At?void 0:fe,interactive:!At,height:G,legendSide:St,plotProps:{onPointerMove:At||"none"===ht?void 0:e=>{Z?ke(((e,t)=>{const l=ue.current;if(!l||0===rt.length)return null;const i=l.getBoundingClientRect(),a=e-i.left,n=t-i.top;let o=null,r=1/0,s=1/0;return rt.forEach((e,t)=>{const l=Math.hypot(e.x-a,e.y-n),i=void 0===e.rx?Math.max(0,l-e.r):Math.hypot(Math.max(0,Math.abs(e.x-a)-e.rx),Math.max(0,Math.abs(e.y-n)-(e.ry??e.rx)));i<=L&&(i<r||i===r&&l<s)&&(r=i,s=l,o=t)}),o})(e.clientX,e.clientY)):ye(((e,t)=>{const l=ue.current;if(!l||0===Ae)return null;const i=l.getBoundingClientRect(),a=N?t-i.top-Oe.top:e-i.left-Oe.left;if(a<-et.step||a>Qe+et.step)return null;const n=V?Ae<=1?0:Math.round(a/Qe*(Ae-1)):Math.floor(a/et.step);return Math.min(Ae-1,Math.max(0,n))})(e.clientX,e.clientY)),"item"===ht&&Me(((e,t)=>{const l=ue.current;if(!l)return null;const i=l.getBoundingClientRect();return N?e-i.left:t-i.top})(e.clientX,e.clientY))},onPointerLeave:mt,onKeyDown:At||"none"===ht?void 0:e=>{const t=N?"ArrowDown":"ArrowRight",l=N?"ArrowUp":"ArrowLeft";if(e.key===t)ft(1);else if(e.key===l)ft(-1);else if("Home"===e.key)xt(0);else if("End"===e.key)xt(ut-1);else{if("Escape"!==e.key)return;mt()}e.preventDefault()},onBlur:mt},tooltip:null!==dt&&yt.length>0&&"none"!==ht?st.render?e("div",{"aria-hidden":"true",className:"pointer-events-none absolute z-10",style:{left:kt,top:bt,transform:`translate(${Mt?"calc(-100% - 12px)":"12px"}, -50%)`},children:st.render({index:dt,category:Ce[dt]??dt,items:yt})}):e(u,{heading:vt,items:yt,x:kt,y:bt,flip:Mt,size:se}):null,legend:zt?e(h,{names:Pe,colors:Se,options:wt,visibility:pe,size:se,swatch:H,values:wt.showValue&&null!==dt?b.map((e,t)=>{const l=ze[t]?.[dt]?.value;return null==l?void 0:we(l)}):void 0}):null,status:{heading:vt,items:yt},table:At?null:U?.(fe)??e(d,{id:fe,caption:Q??ce.table,corner:We?.label??ce.category,categories:Ce,names:Pe,values:ze,format:we,locale:he,empty:de.empty}),children:At?e("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:le??de.empty}):xe>0&&Je>0?t("svg",{width:xe,height:Je,viewBox:`0 0 ${xe} ${Je}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(T,{plot:Oe,scale:Fe,horizontal:N,categoryPx:tt,categoryScale:Te,categoryValuePx:it,valuePx:lt,tickTexts:_e,categoryTexts:Ye,valueAxis:Re,categoryAxis:We,fontSize:$e,zeroPx:nt}),null===dt||Z||"index"!==ht||!1===st.crosshair?null:(()=>{const t=tt(dt);return e("line",N?{x1:Oe.left,x2:Oe.left+Oe.width,y1:Oe.top+t,y2:Oe.top+t,stroke:F,strokeWidth:1}:{x1:Oe.left+t,x2:Oe.left+t,y1:Oe.top,y2:Oe.top+Oe.height,stroke:F,strokeWidth:1})})(),oe(Pt)]}):null})}

package/dist/internal/FieldOutline.d.ts

@@ -55,11 +55,20 @@ export interface MPFieldLabelProps extends MPFieldOutlineProps {
  * outline is `pointer-events-none` so that clicks land on the control
  * underneath, and a label inside it would stop being clickable.
  *
- * Resting, it is `pointer-events-none` instead — it is lying over the text the
- * caret goes into, and a click on it has to reach the control so the caret
- * lands where the pointer did. A `<label for>` would only have focused the
- * control, which puts the caret at the end of the text rather than under the
- * pointer.
+ * It is `pointer-events-none` in both states, and for a different reason in
+ * each. Resting, it is lying over the text the caret goes into, and a click on
+ * it has to reach the control so the caret lands where the pointer did. A
+ * `<label for>` would only have focused the control, which puts the caret at the
+ * end of the text rather than under the pointer.
+ *
+ * Shrunk, it is out of the way and could safely take a click. What it cannot do
+ * is take one *halfway*. The press focuses the control, the focus is what starts
+ * the label rising, and the label arrives under the pointer before the button
+ * comes back up: the press goes down on the control and up on the label, and a
+ * press whose two ends disagree is delivered to their nearest common ancestor
+ * rather than to either. The control never sees the click. That is what made a
+ * picker asked for without its glyph — `startIcon={null}`, which is the whole
+ * point of `floatingLabel` on a picker — impossible to open with a mouse.
  */
 export declare function MPFieldLabel({ size, label, required, htmlFor, shrunk, multiline }: MPFieldLabelProps): React.JSX.Element;
 export interface MPFloatingLabel {

package/dist/internal/FieldOutline.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r,Fragment as t,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{Field as a}from"@base-ui/react/field";import{PROSE_TEXT as n}from"./scale.js";const i={xs:"start-1",sm:"start-2",md:"start-3",lg:"start-3",xl:"start-4"},s={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function d(o,a){return e(t,{children:[o,a?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:t,required:e=!1,notched:o=!0}){return r("fieldset",{"aria-hidden":"true",className:["pointer-events-none absolute inset-0 -top-[5px] m-0 min-w-0 px-2 pt-0","rounded-mp-xs border border-mp-outline","transition-[border-color] duration-(--mp-sys-motion-duration-short4)","group-hover:border-mp-on-surface","group-focus-within:border-2 group-focus-within:border-mp-primary","group-data-focused:border-2 group-data-focused:border-mp-primary","group-data-invalid:border-mp-error","group-data-disabled:border-mp-on-surface/12"].join(" "),children:t?r("legend",{className:["text-mp-body-small invisible float-none block h-[11px] w-auto overflow-hidden p-0","leading-none","ease-mp-standard transition-[max-width,padding]","duration-(--mp-sys-motion-duration-short4)",o?"max-w-full px-1":"max-w-0 px-0"].join(" "),children:d(t,e)}):null})}export function MPFieldLabel({size:t,label:e,required:o=!1,htmlFor:p,shrunk:u=!0,multiline:l=!1}){return r(a.Label,{htmlFor:p,"data-mp-shrunk":u?"":void 0,className:["text-mp-on-surface-variant","ease-mp-standard transition-[color,top,font-size,max-width]","duration-(--mp-sys-motion-duration-short4)","absolute -translate-y-1/2 px-1 leading-none",i[t],u?"text-mp-body-small pointer-events-auto top-0 max-w-none":[n[t],"pointer-events-none max-w-[calc(100%-2rem)] truncate",l?s[t]:"top-1/2"].join(" "),"group-focus-within:text-mp-primary","group-data-focused:text-mp-primary","group-data-invalid:text-mp-error","group-data-disabled:text-mp-on-surface/38"].join(" "),children:d(e,o)})}export function useFloatingLabel({floating:r,filled:t,pinned:e=!1}){const[a,n]=o.useState(!1);return{shrunk:!r||t||a||e,focusProps:{onFocusCapture:()=>n(!0),onBlurCapture:r=>{r.currentTarget.contains(r.relatedTarget)||n(!1)}}}}
+import{jsx as r,Fragment as t,jsxs as o}from"react/jsx-runtime";import*as e from"react";import{Field as a}from"@base-ui/react/field";import{PROSE_TEXT as n}from"./scale.js";const i={xs:"start-1",sm:"start-2",md:"start-3",lg:"start-3",xl:"start-4"},s={xs:"top-[18px]",sm:"top-[18px]",md:"top-5",lg:"top-5",xl:"top-5"};function d(e,a){return o(t,{children:[e,a?r("span",{"aria-hidden":"true",children:" *"}):null]})}export function MPFieldOutline({label:t,required:o=!1,notched:e=!0}){return r("fieldset",{"aria-hidden":"true",className:["pointer-events-none absolute inset-0 -top-[5px] m-0 min-w-0 px-2 pt-0","rounded-mp-xs border border-mp-outline","transition-[border-color] duration-(--mp-sys-motion-duration-short4)","group-hover:border-mp-on-surface","group-focus-within:border-2 group-focus-within:border-mp-primary","group-data-focused:border-2 group-data-focused:border-mp-primary","group-data-invalid:border-mp-error","group-data-disabled:border-mp-on-surface/12"].join(" "),children:t?r("legend",{className:["text-mp-body-small invisible float-none block h-[11px] w-auto overflow-hidden p-0","leading-none","ease-mp-standard transition-[max-width,padding]","duration-(--mp-sys-motion-duration-short4)",e?"max-w-full px-1":"max-w-0 px-0"].join(" "),children:d(t,o)}):null})}export function MPFieldLabel({size:t,label:o,required:e=!1,htmlFor:p,shrunk:l=!0,multiline:u=!1}){return r(a.Label,{htmlFor:p,"data-mp-shrunk":l?"":void 0,className:["text-mp-on-surface-variant","ease-mp-standard transition-[color,top,font-size,max-width]","duration-(--mp-sys-motion-duration-short4)","pointer-events-none absolute -translate-y-1/2 px-1 leading-none",i[t],l?"text-mp-body-small top-0 max-w-none":[n[t],"max-w-[calc(100%-2rem)] truncate",u?s[t]:"top-1/2"].join(" "),"group-focus-within:text-mp-primary","group-data-focused:text-mp-primary","group-data-invalid:text-mp-error","group-data-disabled:text-mp-on-surface/38"].join(" "),children:d(o,e)})}export function useFloatingLabel({floating:r,filled:t,pinned:o=!1}){const[a,n]=e.useState(!1);return{shrunk:!r||t||a||o,focusProps:{onFocusCapture:()=>n(!0),onBlurCapture:r=>{r.currentTarget.contains(r.relatedTarget)||n(!1)}}}}

package/dist/internal/SupportingText.d.ts

@@ -14,6 +14,30 @@ import * as React from 'react';
  * validity state; here the message's presence *is* the state, which is the same
  * bargain `MPTextField.errorMessage` makes — there is no way to render a control
  * that is visibly wrong with no explanation of why.
+ *
+ * ## The line arrives rather than appearing
+ *
+ * A field that turned invalid grew by a line of text between one frame and the
+ * next, and everything under it on the page moved down by that much. On a form
+ * validated on blur that is the whole page stepping as the reader tabs through
+ * it.
+ *
+ * So the space opens. `mp-supporting-text__reveal` in `styles.css` has the
+ * argument for the row it opens as and for why swapping a description for an
+ * error is a different animation from having something to say at all.
+ *
+ * What is worth knowing on this side is that the animation is **switched on by
+ * an attribute this component sets**, rather than by a class that is simply
+ * always there. A page load is not a change: a server-rendered form would
+ * otherwise grow six description lines out of nothing the moment it hydrated,
+ * which is a page assembling itself in front of a reader who asked for a form.
+ * The effect below only ever runs when it has watched the message change.
+ *
+ * The wrapper is drawn only when there is a message, and that is not a detail
+ * to lose either: every control that shows one puts it in a flex column with a
+ * `gap`, so an element that was always there would be a gap that was always
+ * there — two pixels under every checkbox in the library that has nothing to
+ * say.
  */
 export declare function MPSupportingText({ description, errorMessage, className }: {
     description?: React.ReactNode;

package/dist/internal/SupportingText.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import{Field as e}from"@base-ui/react/field";import{META_TEXT as t,hasContent as o}from"./scale.js";export function MPSupportingText({description:a,errorMessage:s,className:i}){const c=["mp-supporting-text block",t,"data-disabled:text-mp-on-surface/38",i??""].filter(Boolean).join(" ");return o(s)?r(e.Error,{match:!0,className:`${c} text-mp-error`,children:s}):o(a)?r(e.Description,{className:`${c} text-mp-on-surface-variant`,children:a}):r(e.Error,{className:`${c} text-mp-error`})}
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{Field as t}from"@base-ui/react/field";import{META_TEXT as a,hasContent as n}from"./scale.js";export function MPSupportingText({description:o,errorMessage:s,className:i}){const c=n(s)?"error":n(o)?"description":"none",m=r.useRef(null),p=r.useRef(c);r.useLayoutEffect(()=>{const e=m.current,r=p.current;p.current=c,e&&c!==r&&"none"!==c&&(e.dataset.mpReveal="none"===r?"open":"swap",e.style.animationName="none",e.offsetWidth,e.style.animationName="")},[c]);const l=["mp-supporting-text block min-h-0",a,"data-disabled:text-mp-on-surface/38",i??""].filter(Boolean).join(" ");return n(s)?e("div",{ref:m,className:"mp-supporting-text__reveal",children:e(t.Error,{match:!0,className:`${l} text-mp-error`,children:s})}):n(o)?e("div",{ref:m,className:"mp-supporting-text__reveal",children:e(t.Description,{className:`${l} text-mp-on-surface-variant`,children:o})}):e(t.Error,{className:`${l} text-mp-error`})}

package/dist/internal/animate-core.d.ts

@@ -0,0 +1,121 @@
+/**
+ * The values an animation comes to, and nothing that runs one.
+ *
+ * Split from `animate.ts` for the reason `density.ts` is split from `scale.ts`,
+ * with a sharper edge: the split stylesheet is cut along the import graph a file
+ * at a time, and `animate.ts` names the marquee's own class in a query selector.
+ * A component reaching in here for a single entrance was coming out with the
+ * marquee's rules and its two keyframes attached.
+ *
+ * Which is also a rule about writing in this file. A hand-written rule is
+ * attributed by looking for its class names in a component's files, and a
+ * comment is one of those files — so naming another component's class here, even
+ * in prose, would put that component's CSS into every sheet this module reaches.
+ *
+ * So this half is the tables and the arithmetic — what a duration, a curve, a
+ * repeat and an offset resolve to — and the other half is the machinery that
+ * watches a trigger and drives them. `transition.ts` reads this one; the
+ * `MPAnimate*` components read both, through the re-export next door.
+ */
+import * as React from 'react';
+import type { MPAnimateMode, MPAnimateRepeat, MPAnimateTimeline, MPAnimation, MPEasing, MPSide } from '../types.js';
+/** The class that reads the slots. Always paired with one of the below. */
+export declare const ANIM_BASE = "mp-anim";
+/**
+ * Which keyframe an effect runs.
+ *
+ * `grow` and `zoom` share one: they are the same arithmetic at two strengths,
+ * and a second identical `@keyframes` would only be a second place to fix a
+ * bug. What separates them is their defaults and their origin, which is a
+ * property rather than a keyframe.
+ */
+export declare const ANIMATION_CLASS: Record<MPAnimation, string>;
+/**
+ * The name an effect goes by, which is wider than the shared union.
+ *
+ * `float` and `shake` are not entrances and are not in `MPAnimation` — see
+ * `effectClass` below for why a shared lookup table is a thing to keep small.
+ * They still need a *name*, because `data-mp-animation` is how a test and a
+ * page's own CSS find one, and because the tables above are read by name.
+ *
+ * Neither of them reads those tables: an effect that brings its own keyframe
+ * brings its own duration and curve with it, since a six-second drift and a
+ * four-hundred-millisecond refusal are not on any Material ladder. The
+ * fallbacks in the two lookups below exist so the types do not have to lie
+ * about that, not because anything relies on them.
+ */
+export type AnimationEffect = MPAnimation | 'float' | 'shake' | 'count';
+/** A curve, as the stylesheet spells it. */
+export declare function easingValue(easing: MPEasing): string;
+/** A number is pixels; a string is already a CSS length. */
+export declare function lengthValue(value: number | string): string;
+/** `'infinite'` reaches CSS as the word; a count reaches it as the number. */
+export declare function repeatValue(repeat: MPAnimateRepeat): string;
+export declare function isInfinite(repeat: MPAnimateRepeat | undefined): boolean;
+export interface AnimationSlotOptions {
+    /** Which effect's tokens to fall back to, and which keyframe to run. */
+    effect: AnimationEffect;
+    /** Milliseconds. Unset takes the effect's Material duration token. */
+    duration?: number;
+    /** Milliseconds. */
+    delay: number;
+    /** Unset takes the effect's Material easing token. */
+    easing?: MPEasing;
+    repeat: MPAnimateRepeat;
+    alternate?: boolean;
+    mode?: MPAnimateMode;
+    /** Milliseconds added to the duration, clamped at zero. See `durationValue`. */
+    durationOffset?: number;
+    /** `view` hands the animation to the reader's scrolling instead of a clock. */
+    timeline?: MPAnimateTimeline;
+    /** Any CSS `animation-range`. Only read on `timeline: 'view'`. */
+    range?: string;
+    /** Where the animated properties start. Only the ones an effect reads. */
+    opacity?: number;
+    scale?: number;
+    x?: string;
+    y?: string;
+    angle?: string;
+    angleTo?: string;
+    clip?: string;
+    /** The two ends of a counted value. Only `MPAnimateCounter` fills these. */
+    from?: number;
+    to?: number;
+}
+/**
+ * The `--_mp-anim-*` slots, as an inline style object.
+ *
+ * Inline rather than utilities for the reason the accent slots are: these are
+ * per-instance numbers, and Tailwind cannot generate a class for a duration it
+ * has never seen written down.
+ */
+export declare function animationSlots(options: AnimationSlotOptions): React.CSSProperties;
+/**
+ * Which way a slide starts, given the edge it comes from.
+ *
+ * `MPSide` is physical everywhere in this library, and it stays physical here:
+ * something sliding in from the top of the window comes from the top in every
+ * writing direction.
+ */
+export declare function slideOffsets(from: MPSide, distance: number | string): {
+    x: string;
+    y: string;
+};
+/**
+ * The `inset()` a wipe starts from, given the edge it opens at.
+ *
+ * A reveal is one rectangle shrinking to nothing: `inset(0 100% 0 0)` is the
+ * whole element clipped away from the right, so the content is disclosed
+ * left-to-right as the inset returns to `inset(0)`. Naming the *edge it opens
+ * at* rather than the direction it travels is the same choice `MPAnimateSlide`
+ * makes, and for the same reason — a caller is pointing at a place.
+ *
+ * `inset(0)` is the to-state and needs no slot, which is the argument for a
+ * clip-path over a mask: "nothing is clipped" already has a spelling, where a
+ * gradient mask would need a second gradient per direction to say it.
+ *
+ * Physical, like `MPSide` everywhere else here. A title disclosed from the left
+ * of its box is disclosed from the left in every writing direction; what changes
+ * under RTL is which edge a caller names, and that is theirs to decide.
+ */
+export declare function revealClip(from: MPSide): string;

package/dist/internal/animate-core.js

@@ -0,0 +1 @@
+export const ANIM_BASE="mp-anim";export const ANIMATION_CLASS={fade:"mp-anim-fade",grow:"mp-anim-scale",slide:"mp-anim-slide",zoom:"mp-anim-scale",rotate:"mp-anim-rotate",blink:"mp-anim-blink",reveal:"mp-anim-reveal"};const e={fade:{in:"medium2",out:"short4"},grow:{in:"medium4",out:"short4"},slide:{in:"medium4",out:"short4"},zoom:{in:"medium4",out:"short4"},rotate:{in:"long2",out:"medium2"},blink:{in:"extra-long4",out:"extra-long4"},reveal:{in:"medium4",out:"short4"}},t={fade:"emphasized-decelerate",grow:"emphasized-decelerate",slide:"emphasized-decelerate",zoom:"emphasized-decelerate",rotate:"emphasized-decelerate",blink:"standard",reveal:"emphasized-decelerate"};export function easingValue(e){return`var(--mp-sys-motion-easing-${e})`}function n(t,n,i="in",a=0){const r=void 0!==t?`${t}ms`:`var(--mp-sys-motion-duration-${(e[n]??e.fade)[i]})`;return 0===a?r:void 0!==t?`${Math.max(0,t+a)}ms`:`max(0ms, calc(${r} + ${a}ms))`}export function lengthValue(e){return"number"==typeof e?`${e}px`:e}export function repeatValue(e){return"infinite"===e?"infinite":String(e)}export function isInfinite(e){return"infinite"===e}function i(e,t){return"out"===e?t?"alternate-reverse":"reverse":t?"alternate":"normal"}export function animationSlots(e){const a=e.mode??"in",r={"--_mp-anim-duration":n(e.duration,e.effect,a,e.durationOffset),"--_mp-anim-delay":`${e.delay}ms`,"--_mp-anim-ease":easingValue(e.easing??t[e.effect]??t.fade),"--_mp-anim-repeat":repeatValue(e.repeat),"--_mp-anim-direction":i(a,e.alternate)};return"view"===e.timeline&&(r["--_mp-anim-timeline"]="view()",r["--_mp-anim-range"]=e.range??"entry 0% cover 45%"),void 0!==e.opacity&&(r["--_mp-anim-opacity"]=String(e.opacity)),void 0!==e.scale&&(r["--_mp-anim-scale"]=String(e.scale)),void 0!==e.x&&(r["--_mp-anim-x"]=e.x),void 0!==e.y&&(r["--_mp-anim-y"]=e.y),void 0!==e.angle&&(r["--_mp-anim-angle"]=e.angle),void 0!==e.angleTo&&(r["--_mp-anim-angle-to"]=e.angleTo),void 0!==e.clip&&(r["--_mp-anim-clip"]=e.clip),void 0!==e.from&&(r["--_mp-anim-from"]=String(e.from)),void 0!==e.to&&(r["--_mp-anim-to"]=String(e.to)),r}export function slideOffsets(e,t){const n=lengthValue(t),i="number"==typeof t?-t+"px":`calc(-1 * ${n})`;switch(e){case"top":return{x:"0px",y:i};case"bottom":return{x:"0px",y:n};case"left":return{x:i,y:"0px"};default:return{x:n,y:"0px"}}}export function revealClip(e){switch(e){case"top":return"inset(0 0 100% 0)";case"bottom":return"inset(100% 0 0 0)";case"right":return"inset(0 0 0 100%)";default:return"inset(0 100% 0 0)"}}

package/dist/internal/animate.d.ts

@@ -30,72 +30,66 @@
  * this library: the value a caller does not name is the *token*, so a theme can
  * still reach it.
  *
+ * ## One effect, or one effect per child
+ *
+ * `stagger` is the same six effects written onto the children instead of onto
+ * the box, and it is three props rather than an `MPAnimateStagger` component:
+ * a list settling in is not a different effect from a fade, it is the same fade
+ * told when to start. The per-child half is `staggerChildren`, which
+ * `MPAnimateAppear` was built out of first and now shares — two copies would be
+ * two answers to which child is the third one.
+ *
  * ## What is deliberately not here
  *
  * An animation that has to know what its children *are* — a marquee that
  * duplicates them, a headline that swaps between them, a typewriter that counts
  * characters — cannot be a class name and a few numbers. Those are components,
- * and their logic stays in their own files.
+ * and their logic stays in their own files. They are also the ones that cannot
+ * take a `stagger`, and for the same reason.
  */
+import { ANIM_BASE, ANIMATION_CLASS, animationSlots, easingValue, isInfinite, lengthValue, repeatValue, revealClip, slideOffsets, type AnimationEffect, type AnimationSlotOptions } from './animate-core.js';
+export { ANIM_BASE, ANIMATION_CLASS, animationSlots, easingValue, isInfinite, lengthValue, repeatValue, revealClip, slideOffsets };
+export type { AnimationEffect, AnimationSlotOptions };
 import * as React from 'react';
-import type { MPAnimateMode, MPAnimateRepeat, MPAnimateTrigger, MPAnimation, MPEasing, MPSide } from '../types.js';
-/** The class that reads the slots. Always paired with one of the below. */
-export declare const ANIM_BASE = "mp-anim";
-/**
- * Which keyframe an effect runs.
- *
- * `grow` and `zoom` share one: they are the same arithmetic at two strengths,
- * and a second identical `@keyframes` would only be a second place to fix a
- * bug. What separates them is their defaults and their origin, which is a
- * property rather than a keyframe.
- */
-export declare const ANIMATION_CLASS: Record<MPAnimation, string>;
-/** A curve, as the stylesheet spells it. */
-export declare function easingValue(easing: MPEasing): string;
-/** A number is pixels; a string is already a CSS length. */
-export declare function lengthValue(value: number | string): string;
-/** `'infinite'` reaches CSS as the word; a count reaches it as the number. */
-export declare function repeatValue(repeat: MPAnimateRepeat): string;
-export declare function isInfinite(repeat: MPAnimateRepeat | undefined): boolean;
-export interface AnimationSlotOptions {
-    /** Which effect's tokens to fall back to, and which keyframe to run. */
-    effect: MPAnimation;
-    /** Milliseconds. Unset takes the effect's Material duration token. */
-    duration?: number;
-    /** Milliseconds. */
-    delay: number;
-    /** Unset takes the effect's Material easing token. */
-    easing?: MPEasing;
-    repeat: MPAnimateRepeat;
-    alternate?: boolean;
-    mode?: MPAnimateMode;
-    /** Where the animated properties start. Only the ones an effect reads. */
-    opacity?: number;
-    scale?: number;
-    x?: string;
-    y?: string;
-    angle?: string;
-    angleTo?: string;
+import type { MPAnimateTrigger } from '../types.js';
+/** What differs between one child and the next. */
+export interface StaggerOptions {
+    /**
+     * Milliseconds added to each child's delay. The whole of the effect: at 0
+     * there is nothing per-child to do and the box animates instead.
+     */
+    stagger: number;
+    /** Milliseconds added to each child's duration. Negative is allowed. */
+    durationStep?: number;
+    /** Runs the set from the last child to the first. */
+    reverse?: boolean;
 }
 /**
- * The `--_mp-anim-*` slots, as an inline style object.
+ * The same animation on every child, held back by its position.
  *
- * Inline rather than utilities for the reason the accent slots are: these are
- * per-instance numbers, and Tailwind cannot generate a class for a duration it
- * has never seen written down.
- */
-export declare function animationSlots(options: AnimationSlotOptions): React.CSSProperties;
-/**
- * Which way a slide starts, given the edge it comes from.
+ * One implementation for all of it. `MPAnimateAppear` had this and the six
+ * single-keyframe effects did not, and writing it a second time would have left
+ * the library with two answers to "which child is the third one" — which is the
+ * kind of disagreement nobody finds until a list is reversed inside a fragment.
+ *
+ * ## The animation goes on the children, not on wrappers
+ *
+ * A row of `<li>`s stays a row of `<li>`s and a grid's cells stay its direct
+ * children, so nothing about the layout changes because the set is being
+ * animated. The cost is real and worth naming: a child has to accept
+ * `className` and `style`, which every host element and every component in this
+ * library does, and a caller's own component need not. Only a bare string has
+ * no element to write onto, and that one is wrapped in a `<span>`.
+ *
+ * ## The step is per child, which makes the grouping the caller's dial
+ *
+ * Eight children are eight steps and one child holding eight things is one
+ * step. That is also how to opt part of a set out of the sequence — group it.
  *
- * `MPSide` is physical everywhere in this library, and it stays physical here:
- * something sliding in from the top of the window comes from the top in every
- * writing direction.
+ * The caller's own `style` wins over the slots, deliberately: the slots are
+ * this library's answer and the attribute is the caller's.
  */
-export declare function slideOffsets(from: MPSide, distance: number | string): {
-    x: string;
-    y: string;
-};
+export declare function staggerChildren(children: React.ReactNode, className: string, slots: AnimationSlotOptions, { stagger, durationStep, reverse }: StaggerOptions): React.ReactNode[];
 export declare function usePrefersReducedMotion(): boolean;
 export interface AnimationRunOptions {
     trigger: MPAnimateTrigger;
@@ -136,7 +130,31 @@ export interface AnimationRun {
  * and leaves everything inside it alone.
  */
 export declare function useAnimationRun({ trigger, play, once, threshold, paused, infinite }: AnimationRunOptions): AnimationRun;
-export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions {
+export interface AnimateElementParams extends AnimationSlotOptions, AnimationRunOptions, Partial<StaggerOptions> {
+    /**
+     * A keyframe class the effect brings itself, instead of the one its `effect`
+     * names.
+     *
+     * `MPAnimation` and the three tables behind it are what everything with an
+     * entrance shares, and a shared lookup table is a tax on everything that
+     * imports it: a `Record<Effect, string>` is not tree-shaken key by key, so
+     * every component reading one pays for the rows it will never use. The
+     * question to ask before adding a value is whether a component that will
+     * never use it has any business paying for it.
+     *
+     * `float` and `shake` do not: neither is an arrival. A drift with no
+     * destination and a four-hundred-millisecond answer to a rejection have
+     * nothing in common with a fade beyond the machinery below, so they keep
+     * their keyframes in their own files and borrow everything else — the
+     * trigger, the rewind, the slots, the stagger.
+     *
+     * `effect` is still named, because the durations and the curves are per
+     * effect and the data attribute is how a test finds one. What this replaces
+     * is only which `@keyframes` runs.
+     */
+    effectClass?: string;
+    /** Only read when the effect is being spread across them. */
+    children?: React.ReactNode;
 }
 export interface AnimateElement {
     ref: React.RefCallback<HTMLElement>;
@@ -144,6 +162,8 @@ export interface AnimateElement {
     style: React.CSSProperties;
     /** The hover handlers and the two data attributes, ready to be spread. */
     props: React.HTMLAttributes<HTMLElement> & Record<string, unknown>;
+    /** The children, wrapped when there is a `stagger` and untouched otherwise. */
+    children: React.ReactNode;
 }
 /**
  * Everything an `MPAnimate*` root needs, in one call.