material-plus-ui 1.6.0 → 1.8.0

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 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 m-0 min-w-0 px-2 pt-0",t?"-top-[5px]":"","text-start","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"].filter(Boolean).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: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(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)}}}}

package/dist/internal/Picker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Field as r}from"@base-ui/react/field";import{Popover as i}from"@base-ui/react/popover";import{MPIcon as t}from"../components/icon/MPIcon.js";import{CloseIcon as l}from"../constants/icons.js";import{accentSlots as s}from"./accent.js";import{MPFieldLabel as a,MPFieldOutline as p,useFloatingLabel as c}from"./FieldOutline.js";import{MPStateLayer as u}from"./StateLayer.js";import{MPSupportingText as m}from"./SupportingText.js";import{MPWidthSizer as d}from"./WidthSizer.js";import{displaySamples as f}from"./date.js";import{CONTROL_ICON as h,hasContent as x,PROSE_TEXT as g}from"./scale.js";import{FADE as b,PORTAL_LAYER as y}from"./surface.js";export function useDisplaySamples(e,n){const r=`${e??""} ${JSON.stringify(n)}`;return o.useMemo(()=>f(e,n),[r])}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 POPUP_PAD={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function MPPickerShell({slug:f,size:v="md",color:P="primary",fullWidth:N=!1,label:k,floatingLabel:w=!0,description:C,errorMessage:O,startIcon:M,required:D=!1,disabled:F=!1,readOnly:S=!1,id:z,className:B,style:_,onKeyDown:I,onKeyUp:K,onFocus:R,onBlur:U,onClick:$,onDoubleClick:q,onContextMenu:T,display:A,samples:E,empty:L,clearable:W=!1,onClear:J,open:V,onOpenChange:Z,labels:G,hiddenValues:H,children:Q,triggerRef:X}){const Y=x(O),ee=j[v],ne=o.useId(),oe=z??ne,re=W&&!L&&!(F||S),{shrunk:ie,focusProps:te}=c({floating:w&&x(k),filled:!L,pinned:V||x(M)});return n(r.Root,{disabled:F,invalid:Y,"data-mp-size":v,className:[`mp-${f} group flex-col align-top`,N?"flex w-full":"inline-flex w-fit",B??""].filter(Boolean).join(" "),style:{...s(P),..._},...te,children:[n(i.Root,{open:V,onOpenChange:Z,children:[n("div",{className:"relative w-full",children:[n(i.Trigger,{id:oe,ref:X,disabled:F,nativeButton:!0,onKeyDown:I,onKeyUp:K,onFocus:R,onBlur:U,onClick:$,onDoubleClick:q,onContextMenu:T,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",ee.padding,re?"pe-10":"",ee.height,g[v],F?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(S?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[M?e("span",{className:["flex shrink-0 items-center",F?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:M}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:["w-full truncate text-start",L&&!F?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:L&&!ie?null:A}),e(d,{samples:E??[]})]})]}),re?n("button",{type:"button","aria-label":G.clear,onClick:J,className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 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"].join(" "),children:[e(u,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(t,{icon:l,size:h[v]})]}):null,e(p,{label:k,required:D,notched:ie}),x(k)?e(a,{size:v,label:k,required:D,htmlFor:oe,shrunk:ie}):null]}),e(i.Portal,{children:e(i.Positioner,{className:y,sideOffset:4,align:"start",children:e(i.Popup,{initialFocus:!1,style:s(P),className:[`mp-${f}__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container`,"text-mp-on-surface outline-none",POPUP_PAD[v],g[v],b].join(" "),children:Q})})})]}),e(m,{description:C,errorMessage:O,className:ee.padding}),H?.map((n,o)=>e("input",{type:"hidden",name:n.name,value:n.value},o))]})}export function MPPickerFooter({children:n}){return e("div",{className:"border-mp-outline-variant flex items-center justify-end gap-1 border-t pt-1.5",children:n})}export function MPPickerDivider(){return e("div",{"aria-hidden":"true",className:"bg-mp-outline-variant w-px self-stretch"})}export const FOOTER_SIZE={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{Field as r}from"@base-ui/react/field";import{Popover as i}from"@base-ui/react/popover";import{MPIcon as t}from"../components/icon/MPIcon.js";import{CloseIcon as l}from"../constants/icons.js";import{accentSlots as s}from"./accent.js";import{MPFieldLabel as a,MPFieldOutline as p,useFloatingLabel as c}from"./FieldOutline.js";import{MPStateLayer as u}from"./StateLayer.js";import{MPSupportingText as m}from"./SupportingText.js";import{MPWidthSizer as d}from"./WidthSizer.js";import{displaySamples as f}from"./date.js";import{CONTROL_ICON as h,hasContent as x,PROSE_TEXT as g}from"./scale.js";import{FADE as b,PORTAL_LAYER as y}from"./surface.js";export function useDisplaySamples(e,n){const r=`${e??""} ${JSON.stringify(n)}`;return o.useMemo(()=>f(e,n),[r])}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 POPUP_PAD={xs:"p-1.5",sm:"p-2",md:"p-2.5",lg:"p-3",xl:"p-3.5"};export function MPPickerShell({slug:f,size:v="md",color:P="primary",fullWidth:N=!1,label:k,floatingLabel:w=!0,description:C,errorMessage:O,startIcon:M,required:D=!1,disabled:F=!1,readOnly:S=!1,id:z,className:B,style:_,onKeyDown:I,onKeyUp:K,onFocus:R,onBlur:U,onClick:$,onDoubleClick:q,onContextMenu:T,display:A,samples:E,empty:L,clearable:W=!1,onClear:J,open:V,onOpenChange:Z,labels:G,hiddenValues:H,children:Q,triggerRef:X}){const Y=x(O),ee=j[v],ne=o.useId(),oe=z??ne,re=W&&!L&&!(F||S),{shrunk:ie,focusProps:te}=c({floating:w&&x(k),filled:!L,pinned:V||x(M)});return n(r.Root,{disabled:F,invalid:Y,"data-mp-size":v,className:[`mp-${f} group flex-col align-top`,N?"flex w-full":"inline-flex w-fit",B??""].filter(Boolean).join(" "),style:{...s(P),..._},...te,children:[n(i.Root,{open:V,onOpenChange:Z,children:[n("div",{className:"relative w-full",children:[n(i.Trigger,{id:oe,ref:X,disabled:F,nativeButton:!0,onKeyDown:I,onKeyUp:K,onFocus:R,onBlur:U,onClick:$,onDoubleClick:q,onContextMenu:T,className:["relative flex w-full items-center gap-2 select-none","appearance-none border-0 bg-transparent font-[inherit] outline-none",ee.padding,re?"pe-10":"",ee.height,g[v],F?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(S?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[M?e("span",{className:["flex shrink-0 items-center",F?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:M}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[e("span",{className:["w-full truncate text-start",L&&!F?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:L&&!ie?null:A}),e(d,{samples:E??[]})]})]}),re?n("button",{type:"button","aria-label":G.clear,onClick:J,className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0 font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(u,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(t,{icon:l,size:h[v]})]}):null,e(p,{label:k,required:D,notched:ie}),x(k)?e(a,{size:v,label:k,required:D,htmlFor:oe,shrunk:ie}):null]}),e(i.Portal,{children:e(i.Positioner,{className:y,sideOffset:4,align:"start",children:e(i.Popup,{initialFocus:!1,style:s(P),className:[`mp-${f}__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container`,"text-mp-on-surface outline-none",POPUP_PAD[v],g[v],b].join(" "),children:Q})})})]}),e(m,{description:C,errorMessage:O,className:ee.padding}),H?.map((n,o)=>e("input",{type:"hidden",name:n.name,value:n.value},o))]})}export function MPPickerFooter({children:n}){return e("div",{className:"border-mp-outline-variant flex items-center justify-end gap-1 border-t pt-1.5",children:n})}export function MPPickerDivider(){return e("div",{"aria-hidden":"true",className:"bg-mp-outline-variant w-px self-stretch"})}export const FOOTER_SIZE={xs:"xs",sm:"xs",md:"sm",lg:"sm",xl:"md"};

package/dist/internal/PopupArrow.d.ts

@@ -0,0 +1,60 @@
+/**
+ * The wedge that points a floating sheet back at what opened it.
+ *
+ * Three components draw one — `MPTooltip`, `MPPopover` and `MPHoverCard` — and
+ * all three drew it themselves: the same four turn classes, the same viewBox,
+ * the same path, the same `aria-hidden`. Only the fill ever differed, and only
+ * because a tooltip is drawn on its own ink rather than on a container tone.
+ *
+ * Three copies of one shape is three chances for one of them to be edited alone,
+ * and the failure would be quiet — a wedge one pixel out of line with the sheet
+ * above it is not something anybody reports.
+ *
+ * The positioning stays with the caller. Each of the three has its own `Arrow`
+ * part from Base UI, which is what measures the collision and reports the side,
+ * and none of them can be swapped for another. So this takes the **className**
+ * that goes on that part and the drawing that goes inside it, and the caller
+ * spells the two lines that say which part it is.
+ *
+ * Nothing here is exported from `src/index.ts`. It is the library talking to
+ * itself, in the sense `internal/` always means.
+ */
+import * as React from 'react';
+/**
+ * Which way the wedge is turned, by the side Base UI says it landed on.
+ *
+ * Drawn pointing down once and rotated to match, which is a rotation of a glyph
+ * — the one allowance the rule against moving a surface makes. The one-pixel
+ * overlap on each side is what closes the hairline a fractional position would
+ * otherwise leave between the wedge and the sheet it belongs to.
+ */
+export declare const POPUP_ARROW_TURN: string;
+/**
+ * The drawing itself, twice as wide as it is tall.
+ *
+ * `aria-hidden`, because the wedge says nothing a reader has not already been
+ * told: the sheet it hangs off is announced by the thing that opened it, and an
+ * arrow announced separately would be a second object in the tree that is really
+ * a corner of the first.
+ *
+ * @param size the wedge's width in pixels. It is half that tall.
+ * @param fill the surface the sheet is drawn on, as a custom property.
+ */
+export declare function PopupArrow({ size, fill }: {
+    size: number;
+    fill: string;
+}): React.JSX.Element;
+/**
+ * How wide the wedge is at each rung.
+ *
+ * `MPPopover` and `MPHoverCard` share this one; `MPTooltip` keeps its own, two
+ * pixels narrower throughout, because a tooltip is a strip of text rather than a
+ * sheet and a wedge sized for a card reads as a spike coming off it.
+ */
+export declare const POPUP_ARROW_SIZE: {
+    readonly xs: 8;
+    readonly sm: 9;
+    readonly md: 10;
+    readonly lg: 11;
+    readonly xl: 12;
+};

package/dist/internal/PopupArrow.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as t}from"react/jsx-runtime";export const POPUP_ARROW_TURN=/*@__PURE__*/["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(" ");export function PopupArrow({size:e,fill:a}){return t("svg",{width:e,height:e/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:t("path",{d:"M0 0h10L5 5z",fill:a})})}export const POPUP_ARROW_SIZE={xs:8,sm:9,md:10,lg:11,xl:12};

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 m=n(s)?"error":n(o)?"description":"none",c=r.useRef(null),p=r.useRef(m);r.useLayoutEffect(()=>{const e=c.current,r=p.current;p.current=m,e&&m!==r&&"none"!==m&&(e.dataset.mpReveal="none"===r?"open":"swap",e.style.animationName="none",e.offsetWidth,e.style.animationName="")},[m]);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:c,className:"mp-supporting-text__reveal",children:e(t.Error,{match:!0,className:`${l} text-mp-error`,children:s})}):n(o)?e("div",{ref:c,className:"mp-supporting-text__reveal",children:e(t.Description,{className:`${l} text-mp-on-surface-variant m-0`,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.

package/dist/internal/animate.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";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"};const n={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"}},t={fade:"emphasized-decelerate",grow:"emphasized-decelerate",slide:"emphasized-decelerate",zoom:"emphasized-decelerate",rotate:"emphasized-decelerate",blink:"standard"};export function easingValue(e){return`var(--mp-sys-motion-easing-${e})`}function i(e,t,i="in"){return void 0!==e?`${e}ms`:`var(--mp-sys-motion-duration-${n[t][i]})`}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 a(e,n){return"out"===e?n?"alternate-reverse":"reverse":n?"alternate":"normal"}export function animationSlots(e){const n=e.mode??"in",r={"--_mp-anim-duration":i(e.duration,e.effect,n),"--_mp-anim-delay":`${e.delay}ms`,"--_mp-anim-ease":easingValue(e.easing??t[e.effect]),"--_mp-anim-repeat":repeatValue(e.repeat),"--_mp-anim-direction":a(n,e.alternate)};return 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),r}export function slideOffsets(e,n){const t=lengthValue(n),i="number"==typeof n?-n+"px":`calc(-1 * ${t})`;switch(e){case"top":return{x:"0px",y:i};case"bottom":return{x:"0px",y:t};case"left":return{x:i,y:"0px"};default:return{x:t,y:"0px"}}}const r="(prefers-reduced-motion: reduce)";function o(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const n=window.matchMedia(r);return n.addEventListener("change",e),()=>n.removeEventListener("change",e)}function s(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia(r).matches}function m(){return!1}export function usePrefersReducedMotion(){return e.useSyncExternalStore(o,s,m)}export function useAnimationRun({trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o}){const s=e.useRef(null),[m,u]=e.useState("mount"===n),[c,d]=e.useState(0),l=e.useCallback(()=>{u(!0),d(e=>e+1)},[]);e.useLayoutEffect(()=>{const e=s.current;if(!e||0===c)return;const n=[e,...e.querySelectorAll(".mp-anim, .mp-marquee-track")];for(const e of n)e.style.animationName="none";e.offsetWidth;for(const e of n)e.style.animationName=""},[c]),e.useEffect(()=>{if("visible"!==n)return;const e=s.current;if(!e||"undefined"==typeof IntersectionObserver)return void u(!0);const t=new IntersectionObserver(([e])=>{e.isIntersecting?(l(),i&&t.disconnect()):i||u(!1)},{threshold:a});return t.observe(e),()=>t.disconnect()},[n,i,a,l]),e.useEffect(()=>{"manual"===n&&(t?l():u(!1))},[n,t,l]);const p=e.useCallback(()=>{o&&u(!1)},[o]),f="hover"===n?{onPointerEnter:l,onFocus:l,onPointerLeave:p,onBlur:p}:{};return{ref:e.useCallback(e=>{s.current=e},[]),state:m&&!r?"running":"paused",started:m,handlers:f}}export function useAnimateElement(e){const{trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o,...s}=e,m=useAnimationRun({trigger:n,play:t,once:i,threshold:a,paused:r,infinite:o});return{ref:m.ref,className:`mp-anim ${ANIMATION_CLASS[s.effect]}`,style:{...animationSlots(s),"--_mp-anim-state":m.state},props:{...m.handlers,"data-mp-animation":s.effect,"data-mp-state":m.state}}}
+import{ANIM_BASE as e,ANIMATION_CLASS as t,animationSlots as n,easingValue as r,isInfinite as a,lengthValue as s,repeatValue as o,revealClip as i,slideOffsets as c}from"./animate-core.js";export{e as ANIM_BASE,t as ANIMATION_CLASS,n as animationSlots,r as easingValue,a as isInfinite,s as lengthValue,o as repeatValue,i as revealClip,c as slideOffsets};import*as u from"react";export function staggerChildren(e,t,r,{stagger:a,durationStep:s=0,reverse:o=!1}){const i=u.Children.toArray(e);return i.map((e,c)=>{const d=o?i.length-1-c:c,f=n({...r,delay:r.delay+d*a,durationOffset:(r.durationOffset??0)+d*s});if(!u.isValidElement(e))return u.createElement("span",{key:c,className:t,style:f},e);const l=e.props;return u.cloneElement(e,{className:[t,l.className].filter(Boolean).join(" "),style:{...f,...l.style}})})}const d="(prefers-reduced-motion: reduce)";function f(e){if("undefined"==typeof window||!window.matchMedia)return()=>{};const t=window.matchMedia(d);return t.addEventListener("change",e),()=>t.removeEventListener("change",e)}function l(){return!("undefined"==typeof window||!window.matchMedia)&&window.matchMedia(d).matches}function m(){return!1}export function usePrefersReducedMotion(){return u.useSyncExternalStore(f,l,m)}export function useAnimationRun({trigger:e,play:t,once:n,threshold:r,paused:a,infinite:s}){const o=u.useRef(null),[i,c]=u.useState("mount"===e),[d,f]=u.useState(0),l=u.useCallback(()=>{c(!0),f(e=>e+1)},[]);u.useLayoutEffect(()=>{const e=o.current;if(!e||0===d)return;const t=[e,...e.querySelectorAll(".mp-anim, .mp-marquee-track")];for(const e of t)e.style.animationName="none";e.offsetWidth;for(const e of t)e.style.animationName=""},[d]),u.useEffect(()=>{if("visible"!==e)return;const t=o.current;if(!t||"undefined"==typeof IntersectionObserver)return void c(!0);const a=new IntersectionObserver(([e])=>{e.isIntersecting?(l(),n&&a.disconnect()):n||c(!1)},{threshold:r});return a.observe(t),()=>a.disconnect()},[e,n,r,l]),u.useEffect(()=>{"manual"===e&&(t?l():c(!1))},[e,t,l]);const m=u.useCallback(()=>{s&&c(!1)},[s]),p="hover"===e?{onPointerEnter:l,onFocus:l,onPointerLeave:m,onBlur:m}:{};return{ref:u.useCallback(e=>{o.current=e},[]),state:i&&!a?"running":"paused",started:i,handlers:p}}export function useAnimateElement(r){const{trigger:a,play:s,once:o,threshold:i,paused:c,infinite:u,stagger:d=0,durationStep:f,reverse:l,effectClass:m,children:p,...h}=r,g=useAnimationRun({trigger:a,play:s,once:o,threshold:i,paused:c,infinite:u}),y=`${e} ${m??t[h.effect]}`,v=function(e,t,n){return"view"!==t?e:n?"paused":"running"}(g.state,h.timeline,c);return d>0?{ref:g.ref,className:"",style:{"--_mp-anim-state":v},props:{...g.handlers,"data-mp-animation":h.effect,"data-mp-state":v},children:staggerChildren(p,y,h,{stagger:d,durationStep:f,reverse:l})}:{ref:g.ref,className:y,style:{...n(h),"--_mp-anim-state":v},props:{...g.handlers,"data-mp-animation":h.effect,"data-mp-state":v},children:p}}

package/dist/internal/bottom-navigation.d.ts

@@ -0,0 +1,58 @@
+/**
+ * What the two navigation bars share, which is everything except the sheet.
+ *
+ * `MPBottomNavigation` is the bar held against the bottom edge of the window;
+ * `MPFloatingBottomNavigation` is the same row of destinations lifted clear of
+ * it. They differ in shape, in where they sit and in how wide they are — and in
+ * nothing a destination can see. So the context an `MPBottomNavigationItem`
+ * reads lives here rather than inside either of them, and an item works in
+ * both without knowing which it is in.
+ *
+ * A file of its own rather than one bar importing the other, because that
+ * import would run the wrong way: an item belongs to whichever bar it was put
+ * in, and a floating bar that had to pull in the full-width bar's height table
+ * and position map to reach a context would carry both sheets' CSS into every
+ * page that rendered either.
+ *
+ * There are no class strings in here, which is why it costs nothing to be
+ * shared — see the note at the top of `internal/density.ts` for what happens
+ * when there are.
+ */
+import * as React from 'react';
+import type { MPSize } from '../types.js';
+/** A destination's value. The same restraint `MPTabs` puts on a tab's. */
+export type MPBottomNavigationValue = string | number;
+/**
+ * Which names are drawn.
+ *
+ * MD3's three label behaviours, and the order they lose information in:
+ *
+ * - `all` — every destination is named. The only one that works for a reader
+ *   who has not used the application before.
+ * - `selected` — only the destination the reader is on.
+ * - `none` — glyphs only.
+ *
+ * Undrawn is never unsaid: in both of the last two the names stay in the
+ * document for a screen reader, because a glyph on its own has no accessible
+ * name at all.
+ */
+export type MPBottomNavigationLabels = 'all' | 'selected' | 'none';
+/** What an `MPBottomNavigationItem` inherits from whichever bar it is in. */
+export interface MPBottomNavigationContextValue {
+    value: MPBottomNavigationValue | null;
+    change: (value: MPBottomNavigationValue) => void;
+    size: MPSize;
+    labels: MPBottomNavigationLabels;
+    disabled: boolean;
+    /**
+     * Whether the bar is the floating one.
+     *
+     * The one thing a destination does need to know, and it is about width rather
+     * than about looks: a full-width bar divides its own width between its
+     * destinations, so each is `flex-1`; a floating one is only as wide as what is
+     * in it, so each is as wide as its own contents. Stretched inside a lozenge
+     * they would each take a fifth of nothing.
+     */
+    floating: boolean;
+}
+export declare const MPBottomNavigationContext: React.Context<MPBottomNavigationContextValue>;

package/dist/internal/bottom-navigation.js

@@ -0,0 +1,2 @@
+"use client";
+import*as t from"react";export const MPBottomNavigationContext=/*@__PURE__*/t.createContext({value:null,change:()=>{},size:"md",labels:"all",disabled:!1,floating:!1});