material-plus-ui 1.5.0 → 1.7.0

package/dist/components/animate-rotate/MPAnimateRotate.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateMode, MPAnimateProps } from '../../types.js';
-export interface MPAnimateRotateProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { MPAnimateMode, MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps } from '../../types.js';
+export interface MPAnimateRotateProps extends MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content turns into place or out of it.
      * @default 'in'

package/dist/components/animate-rotate/MPAnimateRotate.js

@@ -1 +1,2 @@
-import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";export const MPAnimateRotate=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:o,repeat:i=1,alternate:s,paused:l,trigger:d="mount",play:m,once:c=!0,threshold:f=.2,mode:p="in",from:g=-180,to:u=0,origin:y="center",fade:h=!0,render:N,className:j,style:R,children:$,...b},w){const x=a({effect:"rotate",duration:e,delay:n,easing:o,repeat:i,alternate:s,mode:p,angle:`${g}deg`,angleTo:`${u}deg`,opacity:h?0:1,trigger:d,play:m,once:c,threshold:f,paused:l,infinite:t(i)});return r({render:N,ref:[w,x.ref],props:{...b,className:[x.className,j].filter(Boolean).join(" "),style:{transformOrigin:y,...x.style,...R},...x.props,children:$}})});
+"use client";
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";export const MPAnimateRotate=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:i,repeat:o=1,alternate:s,paused:l,trigger:d="mount",play:g,once:m=!0,threshold:c=.2,stagger:p=0,durationStep:f,reverse:u,timeline:h,range:y,mode:N="in",from:j=-180,to:v=0,origin:R="center",fade:S=!0,render:$,className:b,style:w,children:x,...A},B){const M=a({effect:"rotate",duration:e,delay:n,easing:i,repeat:o,alternate:s,mode:N,angle:`${j}deg`,angleTo:`${v}deg`,opacity:S?0:1,trigger:d,play:g,once:m,threshold:c,paused:l,infinite:t(o),stagger:p,durationStep:f,reverse:u,timeline:h,range:y,children:x});return r({render:$,ref:[B,M.ref],props:{...A,className:[M.className,b].filter(Boolean).join(" "),style:{transformOrigin:R,...M.style,...w},...M.props,children:M.children}})});

package/dist/components/animate-scramble/MPAnimateScramble.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import type { MPAnimateProps } from '../../types.js';
+export interface MPAnimateScrambleProps extends Omit<MPAnimateProps, 'alternate' | 'easing'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** The text, when it is easier to pass than to nest. Overrides `children`. */
+    text?: string;
+    /**
+     * How long the whole line takes to settle, in milliseconds.
+     * @default 1200
+     */
+    duration?: number;
+    /**
+     * How much of that each character spends unsettled, as a fraction of the
+     * whole. At `1` the last character is still noise when the first has been
+     * still for the entire run; low values make the line resolve almost at once.
+     * @default 0.4
+     */
+    spread?: number;
+    /**
+     * How often an unsettled character is replaced, in milliseconds. Below about
+     * 30 the noise stops reading as characters and starts reading as flicker.
+     * @default 50
+     */
+    tick?: number;
+    /** The alphabet the noise is drawn from. */
+    characters?: string;
+    /** Which language the text is in, for deciding where a character ends. */
+    locale?: string;
+    /** The text to settle. Only text is settled — see below. */
+    children?: React.ReactNode;
+}
+/**
+ * Text settling out of noise.
+ *
+ * `MPAnimateTyping`'s sibling, and the difference is what the box does. A
+ * typewriter's line grows a character at a time, so everything after it on the
+ * page moves while it runs; this one is **its finished length from the first
+ * frame** and only the characters inside it change. That is why it is the one
+ * to reach for in a heading, a table cell or anything else with something
+ * beside it.
+ *
+ * ## Written in JavaScript, and paused like everything else
+ *
+ * There is no keyframe for this: replacing a character with a random one is not
+ * an interpolation, so the frame loop is real. What it borrows is the trigger,
+ * the play state and the rewind — so `trigger="visible"`, `paused` and a
+ * `manual` replay behave exactly as they do on the six declared effects.
+ *
+ * Before it is triggered it shows its own **first frame**, which for this
+ * effect is the line fully scrambled. Not the answer: a heading that has
+ * already resolved while it waits to be scrolled to has given away the thing it
+ * was about to do. The waiting noise is fixed rather than churning, because
+ * motion that starts before the trigger is not the effect, it is a distraction
+ * beside it.
+ *
+ * ## What a screen reader gets
+ *
+ * The finished line, once, out of a clipped box; the settling copy is
+ * `aria-hidden`. Noise read out character by character is not text, and
+ * find-on-page still matches the real words.
+ *
+ * Under `prefers-reduced-motion` the line is simply there, finished, from the
+ * first frame — the state rather than the animation, because an effect switched
+ * off at the wrong end would leave a heading permanently unreadable.
+ */
+export declare const MPAnimateScramble: React.ForwardRefExoticComponent<MPAnimateScrambleProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-scramble/MPAnimateScramble.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{isInfinite as r,useAnimationRun as n,usePrefersReducedMotion as s}from"../../internal/animate.js";import{graphemesOf as i,textOf as o}from"../../internal/text.js";import{VISUALLY_HIDDEN as m}from"../../internal/visually-hidden.js";export const MPAnimateScramble=/*@__PURE__*/a.forwardRef(function({text:c,duration:l=1200,spread:u=.4,tick:d=50,characters:h="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$?!",locale:p,delay:f=0,repeat:g=1,paused:x,trigger:M="mount",play:j,once:y=!0,threshold:A=.2,className:N,style:b,children:v,...F},w){const S=s(),q=n({trigger:M,play:j,once:y,threshold:A,paused:x,infinite:r(g)}),E=c??o(v),P=a.useMemo(()=>i(E,p),[E,p]),[R,k]=a.useState(0),B="running"===q.state&&!S;a.useEffect(()=>{if(S)return void k(1);if(!B)return void k(0);let e=0,t=0;const a=r=>{0===t&&(t=r);const n=r-t-f,s=l>0?Math.min(1,Math.max(0,n/l)):1;k(s),s<1&&(e=requestAnimationFrame(a))};return e=requestAnimationFrame(a),()=>cancelAnimationFrame(e)},[B,S,l,f,q.started]);const C=S?E:P.map((e,t)=>(e=>{const t=P.length>1?e/(P.length-1):0;return R>=t*u+(1-u)})(t)?e:(e=>{const t=(2654435761*e+40503*Math.floor(R*l/Math.max(1,d)))%h.length;return h[Math.abs(t)]??h[0]})(t)).join("");return t("div",{ref:e=>{q.ref(e),"function"==typeof w?w(e):w&&(w.current=e)},className:N,style:b,"data-mp-animation":"scramble","data-mp-state":q.state,...q.handlers,...F,children:[e("span",{className:m,children:E}),e("span",{"aria-hidden":"true",className:"tabular-nums whitespace-pre-wrap",children:C})]})});

package/dist/components/animate-scramble/index.d.ts

@@ -0,0 +1,2 @@
+export { MPAnimateScramble } from './MPAnimateScramble.js';
+export type { MPAnimateScrambleProps } from './MPAnimateScramble.js';

package/dist/components/animate-scramble/index.js

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

package/dist/components/animate-shake/MPAnimateShake.d.ts

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAnimateProps } from '../../types.js';
+export interface MPAnimateShakeProps extends Omit<MPAnimateProps, 'alternate' | 'repeat' | 'once' | 'threshold'>, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How far it travels at the widest point of the first swing — a number in
+     * pixels, or any CSS length.
+     * @default '0.5rem'
+     */
+    distance?: number | string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * The answer to something that did not work.
+ *
+ * A wrong code, a rejected card, a form submitted with a field still empty. It
+ * is over in four hundred milliseconds and it says *that was refused* more
+ * plainly than any colour does — a red border is a **state** the field is now
+ * in, and this is a reply to what the reader just did.
+ *
+ * ## Why this is allowed, when a control never moves
+ *
+ * The library's rule is that controls do not transform, and it holds without
+ * exception — but the rule is about a control's **resting states**: hover,
+ * press, on, off. Movement there is a stand-in for something colour says
+ * better, and it makes a target that the pointer has to chase.
+ *
+ * A shake is not a state. It is not a thing the control *is*, it is a thing
+ * that just happened, and it is finished before a reader could try to point at
+ * it. That is the whole of the exception, and it is the only one.
+ *
+ * ## What keeps it from becoming decoration
+ *
+ * `trigger` defaults to **`manual`**, so nothing shakes on mount. A shake that
+ * runs when a page loads is decoration, and readers learn to ignore moving
+ * decoration — which costs the effect exactly the meaning it is here for.
+ *
+ * There is no `repeat`. A refusal is said once.
+ *
+ * The keyframe is home at both ends, so an interrupted shake leaves the element
+ * where the page put it, and its second half is smaller than its first — a
+ * shake that ends as hard as it starts reads as a loop that was cut off.
+ *
+ * ## Shaking again
+ *
+ * Set `play` back to `false` and then to `true`. The animation is rewound
+ * without unmounting anything, so the field keeps its value and its focus and
+ * the second wrong answer moves exactly as much as the first did.
+ *
+ * ```tsx
+ * const [wrong, setWrong] = React.useState(false);
+ *
+ * function reject() {
+ *   setWrong(false);
+ *   requestAnimationFrame(() => setWrong(true));
+ * }
+ *
+ * <MPAnimateShake play={wrong}>
+ *   <MPOtpField />
+ * </MPAnimateShake>;
+ * ```
+ */
+export declare const MPAnimateShake: React.ForwardRefExoticComponent<MPAnimateShakeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-shake/MPAnimateShake.js

@@ -0,0 +1,2 @@
+"use client";
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{lengthValue as a,useAnimateElement as n}from"../../internal/animate.js";export const MPAnimateShake=/*@__PURE__*/e.forwardRef(function({duration:e=400,delay:s=0,easing:t="standard",paused:i,trigger:l="manual",play:o,distance:d="0.5rem",render:c,className:m,style:f,children:p,...h},u){const y=n({effect:"shake",effectClass:"mp-anim-shake",duration:e,delay:s,easing:t,repeat:1,x:a(d),trigger:l,play:o,once:!0,threshold:.2,paused:i,infinite:!1,children:p});return r({render:c,ref:[u,y.ref],props:{...h,className:[y.className,m].filter(Boolean).join(" "),style:{...y.style,...f},...y.props,children:y.children}})});

package/dist/components/animate-shake/index.d.ts

@@ -0,0 +1,2 @@
+export { MPAnimateShake } from './MPAnimateShake.js';
+export type { MPAnimateShakeProps } from './MPAnimateShake.js';

package/dist/components/animate-shake/index.js

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

package/dist/components/animate-slide/MPAnimateSlide.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateMode, MPAnimateProps, MPSide } from '../../types.js';
-export interface MPAnimateSlideProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { MPAnimateMode, MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps, MPSide } from '../../types.js';
+export interface MPAnimateSlideProps extends MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content slides in or slides away. `out` leaves by the same edge
      * it would have come from, and is quicker — MD3's `short4` against `medium4`.

package/dist/components/animate-slide/MPAnimateSlide.js

@@ -1 +1,2 @@
-import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";export const MPAnimateSlide=/*@__PURE__*/e.forwardRef(function({duration:e,delay:o=0,easing:i,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:f=.2,mode:y="in",from:u="bottom",distance:g="100%",fade:h=!0,render:x,className:N,style:b,children:j,...w},A){const{x:B,y:M}=a(u,g),P=n({effect:"slide",duration:e,delay:o,easing:i,repeat:s,alternate:l,mode:y,x:B,y:M,opacity:h?0:1,trigger:m,play:c,once:p,threshold:f,paused:d,infinite:t(s)});return r({render:x,ref:[A,P.ref],props:{...w,className:[P.className,N].filter(Boolean).join(" "),style:{...P.style,...b},...P.props,children:j}})});
+"use client";
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,slideOffsets as a,useAnimateElement as n}from"../../internal/animate.js";export const MPAnimateSlide=/*@__PURE__*/e.forwardRef(function({duration:e,delay:i=0,easing:o,repeat:s=1,alternate:l,paused:d,trigger:m="mount",play:c,once:p=!0,threshold:f=.2,stagger:g=0,durationStep:u,reverse:y,timeline:h,range:x,mode:N="in",from:S="bottom",distance:b="100%",fade:j=!0,render:v,className:w,style:A,children:B,...M},P){const{x:R,y:k}=a(S,b),q=n({effect:"slide",duration:e,delay:i,easing:o,repeat:s,alternate:l,mode:N,x:R,y:k,opacity:j?0:1,trigger:m,play:c,once:p,threshold:f,paused:d,infinite:t(s),stagger:g,durationStep:u,reverse:y,timeline:h,range:x,children:B});return r({render:v,ref:[P,q.ref],props:{...M,className:[q.className,w].filter(Boolean).join(" "),style:{...q.style,...A},...q.props,children:q.children}})});

package/dist/components/animate-split/MPAnimateSplit.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import type { MPAnimateProps, MPAnimateTimelineProps, MPSide } from '../../types.js';
+/** What a line is cut into before it is animated. */
+export type MPAnimateSplitBy = 'word' | 'character';
+export interface MPAnimateSplitProps extends MPAnimateProps, MPAnimateTimelineProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** The text, when it is easier to pass than to nest. Overrides `children`. */
+    text?: string;
+    /**
+     * Whether each piece is a word or a character.
+     * @default 'word'
+     */
+    by?: MPAnimateSplitBy;
+    /**
+     * How long after one piece the next one starts, in milliseconds. This is the
+     * whole effect.
+     *
+     * The default is right for words. Characters want a good deal less — there
+     * are five or six times as many of them, and the same step turns a sentence
+     * into something that takes four seconds to finish arriving.
+     * @default 40
+     */
+    stagger?: number;
+    /**
+     * How much longer each piece takes than the one before it, in milliseconds.
+     * Negative shortens instead, clamped at zero.
+     * @default 0
+     */
+    durationStep?: number;
+    /** Runs the line from the last piece to the first. */
+    reverse?: boolean;
+    /**
+     * Which edge each piece drifts in from.
+     * @default 'bottom'
+     */
+    from?: MPSide;
+    /**
+     * How far each piece travels. Short on purpose — a long travel over forty
+     * pieces is a paragraph that is moving rather than a paragraph arriving.
+     * @default '0.5rem'
+     */
+    distance?: number | string;
+    /**
+     * Fades each piece in as it settles.
+     * @default true
+     */
+    fade?: boolean;
+    /**
+     * Which language the text is in, for deciding where a word ends. Only worth
+     * setting where the answer is genuinely ambiguous; `Intl.Segmenter` reads the
+     * script itself for most of them.
+     */
+    locale?: string;
+    /** The text to split. Only text is split — see below. */
+    children?: React.ReactNode;
+}
+export declare const MPAnimateSplit: React.ForwardRefExoticComponent<MPAnimateSplitProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-split/MPAnimateSplit.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{ANIMATION_CLASS as r,ANIM_BASE as n,animationSlots as i,isInfinite as s,slideOffsets as l,useAnimationRun as o}from"../../internal/animate.js";import{graphemesOf as m,textOf as d,wordsOf as c}from"../../internal/text.js";import{VISUALLY_HIDDEN as p}from"../../internal/visually-hidden.js";export const MPAnimateSplit=/*@__PURE__*/t.forwardRef(function({text:t,by:f="word",duration:u,delay:h=0,easing:y,repeat:g=1,alternate:x,paused:j,trigger:N="mount",play:b,once:v=!0,threshold:w=.2,timeline:k,range:S,stagger:$=40,durationStep:A=0,reverse:M=!1,from:O="bottom",distance:P="0.5rem",fade:R=!0,locale:_,className:q,style:z,children:B,...C},D){const E=o({trigger:N,play:b,once:v,threshold:w,paused:j,infinite:s(g)}),F="view"===k?j?"paused":"running":E.state,G=t??d(B),{x:H,y:I}=l(O,P),J=c(G,_),K="character"===f?J.map(e=>m(e,_)):J.map(e=>[e]),L=`${n} ${r.slide} inline-block`,Q=K.reduce((e,a)=>e+a.length,0);let T=-1;return a("div",{ref:e=>{E.ref(e),"function"==typeof D?D(e):D&&(D.current=e)},className:q,style:{"--_mp-anim-state":F,...z},"data-mp-animation":"split","data-mp-state":F,...E.handlers,...C,children:[e("span",{className:p,children:G}),e("span",{"aria-hidden":"true",children:K.map((a,t)=>e("span",{className:"inline-block whitespace-pre",children:a.map((a,t)=>{T+=1;const r=M?Q-1-T:T;return e("span",{className:L,style:i({effect:"slide",duration:u,delay:h+r*$,easing:y,repeat:g,alternate:x,durationOffset:r*A,timeline:k,range:S,x:H,y:I,opacity:R?0:1}),children:a},t)})},t))})]})});

package/dist/components/animate-split/index.d.ts

@@ -0,0 +1,2 @@
+export { MPAnimateSplit } from './MPAnimateSplit.js';
+export type { MPAnimateSplitBy, MPAnimateSplitProps } from './MPAnimateSplit.js';

package/dist/components/animate-split/index.js

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

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

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateMode, MPAnimateProps } from '../../types.js';
-export interface MPAnimateZoomProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { MPAnimateMode, MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps } from '../../types.js';
+export interface MPAnimateZoomProps extends MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
     /**
      * Whether the content comes forward or falls away. An exit is quicker than an
      * entrance — MD3's `short4` against `medium4` — unless `duration` says

package/dist/components/animate-zoom/MPAnimateZoom.js

@@ -1 +1,2 @@
-import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as a,useAnimateElement as t}from"../../internal/animate.js";export const MPAnimateZoom=/*@__PURE__*/e.forwardRef(function({duration:e,delay:o=0,easing:n,repeat:i=1,alternate:s,paused:l,trigger:m="mount",play:d,once:c=!0,threshold:f=.2,mode:p="in",from:u=.4,fade:y=!0,render:g,className:h,style:N,children:j,...b},w){const x=t({effect:"zoom",duration:e,delay:o,easing:n,repeat:i,alternate:s,mode:p,scale:u,opacity:y?0:1,trigger:m,play:d,once:c,threshold:f,paused:l,infinite:a(i)});return r({render:g,ref:[w,x.ref],props:{...b,className:[x.className,h].filter(Boolean).join(" "),style:{transformOrigin:"center",...x.style,...N},...x.props,children:j}})});
+"use client";
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as a}from"../../internal/animate.js";export const MPAnimateZoom=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:o,repeat:i=1,alternate:s,paused:l,trigger:d="mount",play:m,once:c=!0,threshold:p=.2,stagger:f=0,durationStep:g,reverse:u,timeline:h,range:y,mode:N="in",from:j=.4,fade:v=!0,render:S,className:b,style:w,children:x,...z},A){const B=a({effect:"zoom",duration:e,delay:n,easing:o,repeat:i,alternate:s,mode:N,scale:j,opacity:v?0:1,trigger:d,play:m,once:c,threshold:p,paused:l,infinite:t(i),stagger:f,durationStep:g,reverse:u,timeline:h,range:y,children:x});return r({render:S,ref:[A,B.ref],props:{...z,className:[B.className,b].filter(Boolean).join(" "),style:{transformOrigin:"center",...B.style,...w},...B.props,children:B.children}})});

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

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPColor, MPSize, MPVariant } from '../../types.js';
+/**
+ * How the artwork is **framed**, which is the one question this component
+ * exists to answer.
+ *
+ * - `bare` — drawn as it was given, at the height `size` asks for and whatever
+ *   width that comes to. No tile, no crop, no inset. The default, and the only
+ *   one that is right for a logo drawn with its own background, its own margin,
+ *   or the product's name set into it.
+ * - `app` — an app icon: a filled tile with the artwork inset in it and the
+ *   corners cut off. What a mark drawn as a bare glyph needs before it can sit
+ *   beside anything else.
+ * - `circle` — the same tile, round, for the products whose icon is a disc.
+ *
+ * There is no `square`. A tile with the corners left on is the one shape MD3
+ * does not draw, and an `app` icon at `xs` is already close enough to a square
+ * that a fourth value would be one nobody could see.
+ */
+export type MPAppLogoShape = 'bare' | 'app' | 'circle';
+export interface MPAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color' | 'href'> {
+    /**
+     * The artwork, as an image. Beaten by `children`, so a project that inlines
+     * its SVG and a project that links a PNG use the same component.
+     */
+    src?: string;
+    /** Candidate images at other resolutions, as on any `<img>`. */
+    srcSet?: string;
+    /**
+     * What the artwork says for a reader who cannot see it. Defaults to `name`,
+     * which is almost always right: a logo means the product.
+     */
+    alt?: string;
+    /**
+     * The product's name.
+     *
+     * One prop doing three jobs, as on `MPAvatar`: it names the artwork, its
+     * initials are what a tile falls back to, and it is drawn as the logotype
+     * when there is no artwork at all. That last one is what makes
+     * `<MPAppLogo name="Acme" />` — no file, no glyph, no markup — still a logo.
+     */
+    name?: string;
+    /** The initials on a tile, written out, for when the rule derived the wrong ones. */
+    initials?: string;
+    /**
+     * Draws the name beside the artwork, as the words half of a lockup.
+     *
+     * Off by default, because the common case is a file that already says the
+     * name. Turn it on for a bare mark — the icon in a header with the product
+     * beside it — and the name stops being read out twice: what is drawn *is* the
+     * accessible name from then on.
+     *
+     * Ignored when the name is already the whole logo, which is what a `bare`
+     * logo with no artwork is.
+     * @default false
+     */
+    showName?: boolean;
+    /** @default 'bare' */
+    shape?: MPAppLogoShape;
+    /**
+     * How much surface the tile paints. Nothing at all on `bare`, which draws no
+     * tile.
+     * @default 'filled'
+     */
+    variant?: MPVariant;
+    /**
+     * How tall the mark is — the control heights, so a logo and the button beside
+     * it in a header line up. On `bare` only the height is set and the width is
+     * whatever the artwork's proportions come to; on a tile both are, because a
+     * tile is square.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** @default 'primary' */
+    color?: MPColor;
+    /**
+     * Insets the artwork from the tile's edge, the way an app icon's glyph is
+     * held off its own corners. Turn it off for a mark drawn to fill the tile — a
+     * favicon, a photograph.
+     *
+     * No effect on `bare`, which has no tile to be inset from, and none on a tile
+     * showing initials, which are sized by their own type scale.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * An exact height for the mark, overriding `size`. A number is pixels.
+     *
+     * The one escape hatch this component needs. A brand's artwork is drawn at a
+     * height somebody chose, and rounding it to the nearest rung of a ladder is
+     * how a logo ends up half a pixel off the type beside it.
+     */
+    height?: number | string;
+    /**
+     * Makes the whole lockup a link. A logo in a header is nearly always the way
+     * back to the front page, and a `<span>` inside an `<a>` the caller wrote is
+     * the same thing with one more element in it.
+     */
+    href?: string;
+    /** Anything else the `<img>` needs — `loading`, `decoding`, `crossOrigin`. */
+    imageProps?: Omit<React.ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'alt'>;
+    /**
+     * Renders something other than a `<span>`, or than the `<a>` an `href` makes
+     * it. `render={<Link to="/" />}` for a router's own link, `render={<h1 />}`
+     * for the one page where the product's name is the page's heading.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * The artwork, as markup. An inline `<svg>` is the usual one, and it is worth
+     * preferring to `src`: a mark that is part of the document takes the page's
+     * own colours, needs no second request, and cannot arrive late.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * A product's mark, at a known size, that is never an empty box.
+ *
+ * ```tsx
+ * <MPAppLogo name="Acme" shape="app" href="/" showName />
+ * ```
+ *
+ * Four things can be the mark and exactly one of them is at a time: markup
+ * handed to `children`, an image at `src`, the initials of `name` on a tile, or
+ * — with no tile to put them on — the name itself, set as the logotype. The
+ * last of those is the point of the component: a product that has not drawn a
+ * logo yet still has one, and swapping it for the real file later is one prop.
+ *
+ * ## What it adds over an `<img>`
+ *
+ * The framing. A mark drawn as a bare glyph and a mark drawn with its own
+ * background need opposite treatment, and which of the two a given file is
+ * cannot be worked out from the file. So `shape` is a decision the caller makes
+ * once and everything else follows: `bare` keeps the artwork's own proportions
+ * and draws nothing behind it, `app` and `circle` inset it into a tile of the
+ * page's own colour.
+ *
+ * ## The name is in the document exactly once
+ *
+ * Which element carries it depends on what the mark turned out to be. A
+ * logotype *is* the name; an image can carry it as `alt`; a glyph and a pair of
+ * initials say nothing at all, so those are the cases a clipped copy is for.
+ * And whenever the words are drawn beside the mark, the mark becomes decoration
+ * rather than a second reading of the same thing — "AC" read out is two
+ * letters, not a product.
+ *
+ * ## What it does not carry
+ *
+ * No tagline, no version, no elevation. A logo with a line of text under it is
+ * a logo next to an `MPTypography`, and a second spelling for that would give
+ * the library two. Elevation is left out for a sharper reason: the prop moves
+ * tone as well as shadow everywhere else it appears, and a logo tile's tone is
+ * the accent — there is nothing for it to move to. An app icon is a sticker on
+ * the page rather than a thing hovering over it.
+ */
+export declare const MPAppLogo: React.ForwardRefExoticComponent<MPAppLogoProps & React.RefAttributes<HTMLElement>>;

package/dist/components/app-logo/MPAppLogo.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as a}from"../../internal/accent.js";import{initialsOf as o}from"../../internal/initials.js";import{cssLength as i}from"../../internal/length.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as s,CONTROL_SQUARE as m,hasContent as c}from"../../internal/scale.js";import{VISUALLY_HIDDEN as d}from"../../internal/visually-hidden.js";import{useMPColor as p,useMPSize as u}from"../../internal/config.js";const f={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1.0625rem]",lg:"text-[1.375rem]",xl:"text-[1.625rem]"},x={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1.0625rem]",lg:"text-[1.3125rem]",xl:"text-[1.5625rem]"},g={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},h={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};export const MPAppLogo=/*@__PURE__*/n.forwardRef(function({src:v,srcSet:w,alt:b,name:j,initials:_,showName:y=!1,shape:N="bare",variant:k="filled",size:B,color:z,padded:P=!0,height:S,href:A,imageProps:F,render:L,className:M,style:R,children:$,...q},C){const D=u(B),E=p(z),G="bare"!==N,H=c($)?$:v?"image":null,I=G&&P,J=null===H&&!G,K=y&&!J&&c(j),O=b??j,Q=_??(j?o(j):""),T="image"===H&&!K&&c(O),U=J||T,V=!U&&!K&&c(O),W=i(S),X=W?{height:W,width:G?W:void 0}:null,Y=e("span",{"aria-hidden":!U||void 0,className:["mp-app-logo__mark flex shrink-0 items-center justify-center overflow-hidden","font-semibold tracking-tight whitespace-nowrap",W?"":s[D],G?[W?"":m[D],"circle"===N?"rounded-mp-full":g[D],x[D],h[k]].filter(Boolean).join(" "):["text-mp-on-surface w-auto",f[D]].join(" "),"[&_svg]:w-auto [&_svg]:shrink-0",I?"[&_svg]:h-[72%] [&_svg]:max-w-[72%]":"[&_svg]:h-full [&_svg]:max-w-full"].filter(Boolean).join(" "),style:X??void 0,children:"image"===H?e("img",{src:v,srcSet:w,alt:T?O??"":"",className:["w-auto object-contain",I?"h-[72%] max-w-[72%]":"h-full max-w-full"].join(" "),decoding:"async",...F}):H??(J?j:Q)});return r({render:L??e(A?"a":"span",{}),ref:C,props:{href:A,"data-mp-size":D,"data-mp-variant":k,className:["mp-app-logo inline-flex max-w-full min-w-0 items-center align-middle","text-mp-on-surface no-underline select-none",l[D],A?"rounded-mp-xs cursor-pointer":"",A?"outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid outline-none":"",M??""].filter(Boolean).join(" "),style:{...a(E),...R},children:t(n.Fragment,{children:[Y,K?e("span",{className:`mp-app-logo__name min-w-0 truncate font-semibold ${f[D]}`,children:j}):null,V?e("span",{className:d,children:O}):null]}),...q}})});

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

@@ -0,0 +1,2 @@
+export { MPAppLogo } from './MPAppLogo.js';
+export type { MPAppLogoProps, MPAppLogoShape } from './MPAppLogo.js';

package/dist/components/app-logo/index.js

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

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

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/ChartFrame.js';
+import type { MPChartCurve, MPChartValueLabels } from '../../types.js';
+export interface MPAreaChartProps extends CartesianChartProps {
+    /**
+     * How the edge of the band gets from one point to the next.
+     * @default 'linear'
+     */
+    curve?: MPChartCurve;
+    /**
+     * Stacks the series on each other, so the top edge is the total and each
+     * band is one part's share of it.
+     *
+     * The value axis then measures totals, and the question the chart answers
+     * changes with it: unstacked areas are read against the axis one at a time,
+     * and a stack is read as a composition. Only the bottom band and the total
+     * are easy to read in a stack, which is the trade it makes.
+     * @default false
+     */
+    stacked?: boolean;
+    /**
+     * The dots on the joins. `auto` draws them on an unstacked chart with room
+     * for them and never on a stack, where a vertex belongs to a boundary rather
+     * than to a line.
+     * @default 'auto'
+     */
+    markers?: boolean | 'auto';
+    /**
+     * Which values are written onto the top edge.
+     * @default 'none'
+     */
+    valueLabels?: MPChartValueLabels;
+}
+/**
+ * A quantity over an ordered axis, with the room under it filled in.
+ *
+ * ```tsx
+ * <MPAreaChart
+ *   categories={['Jan', 'Feb', 'Mar', 'Apr']}
+ *   series={[{ name: 'Storage', data: [12, 19, 24, 31] }]}
+ * />
+ * ```
+ *
+ * It is a line chart that has been asked a second question. A line says where a
+ * number was; filling underneath says how much there is of it — so this is the
+ * shape for a volume, a total, a stock of something, and `stacked` is the shape
+ * for how that total is made up.
+ *
+ * ## The axis starts at zero, and on a line chart it does not
+ *
+ * That is the whole difference between the two, and it is not a preference. A
+ * filled area's **size** encodes the quantity, so the fill is only proportional
+ * to the value from a zero baseline; cropping the scale makes a band twice the
+ * height of another that is nowhere near twice its value.
+ *
+ * A line encodes **position** and claims nothing about proportion, which is why
+ * [MPLineChart](line-chart) is free to crop and this is not. If your data wants
+ * a cropped axis, it wants a line.
+ *
+ * ## Stacked bands are separated by surface, and the gap comes from above
+ *
+ * Two touching fills read as one shape, so a stack leaves two pixels of the
+ * page between neighbours. That gap is taken entirely from the band **above**
+ * the boundary: every band's top edge stays exactly where its cumulative total
+ * puts it, because that edge is the data and moving it to make room would be
+ * reporting a number the series does not have.
+ *
+ * Positives stack up and negatives stack down, so a category holding both is
+ * drawn as two runs from the baseline rather than as one band that has crossed
+ * itself.
+ *
+ * ## Only visible series are in the stack
+ *
+ * Turning a series off with the legend re-stacks the survivors rather than
+ * leaving a hole where it was. The colours do not move with them: a slot comes
+ * from a series' place in the `series` array, so what changes is the height of
+ * the stack and never which band is which.
+ */
+export declare function MPAreaChart({ curve, stacked, markers, valueLabels, ...frame }: MPAreaChartProps): React.JSX.Element;

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

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

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

@@ -0,0 +1,2 @@
+export { MPAreaChart } from './MPAreaChart.js';
+export type { MPAreaChartProps } from './MPAreaChart.js';

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

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

package/dist/components/aspect-ratio/MPAspectRatio.js

@@ -1 +1,2 @@
-import*as e from"react";import{useRender as o}from"@base-ui/react/use-render";const i={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-xl"},t=/*@__PURE__*/["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),r={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const MPAspectRatio=/*@__PURE__*/e.forwardRef(function({ratio:e=1,fit:c="cover",rounded:l=!1,size:n="md",render:s,className:d,style:m,children:a,...u},f){const p=["mp-aspect-ratio relative block w-full overflow-hidden",t,r[c],l?i[n]:"",d??""].filter(Boolean).join(" ");return o({render:s,ref:f,props:{"data-mp-size":n,className:p,style:{aspectRatio:e,...m},children:a,...u}})});
+"use client";
+import*as e from"react";import{useRender as o}from"@base-ui/react/use-render";import{useMPSize as i}from"../../internal/config.js";const r={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-xl"},t=/*@__PURE__*/["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),c={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const MPAspectRatio=/*@__PURE__*/e.forwardRef(function({ratio:e=1,fit:n="cover",rounded:l=!1,size:s,render:m,className:d,style:a,children:f,...u},p){const j=i(s),b=["mp-aspect-ratio relative block w-full overflow-hidden",t,c[n],l?r[j]:"",d??""].filter(Boolean).join(" ");return o({render:m,ref:p,props:{"data-mp-size":j,className:b,style:{aspectRatio:e,...a},children:f,...u}})});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types.js';
+import type { MPColor, MPSize, MPTransition, MPVariant } from '../../types.js';
 /** What Base UI reports about the picture as it loads. */
 export type MPAvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 /**
@@ -86,6 +86,15 @@ export interface MPAvatarProps extends Omit<React.ComponentPropsWithoutRef<'span
      * it.
      */
     children?: React.ReactNode;
+    /**
+     * An entrance, run once as it mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     */
+    transition?: MPTransition;
 }
 /**
  * A picture of a person or a thing, at a known size, that is never an empty box.