material-plus-ui 1.6.0 → 1.8.0

package/dist/components/animate-grow/MPAnimateGrow.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 MPAnimateGrow=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:o,repeat:i=1,alternate:s,paused:l,trigger:d="mount",play:c,once:m=!0,threshold:f=.2,mode:p="in",from:g=.8,origin:u="center",fade:y=!0,render:h,className:w,style:N,children:j,...b},x){const A=t({effect:"grow",duration:e,delay:n,easing:o,repeat:i,alternate:s,mode:p,scale:g,opacity:y?0:1,trigger:d,play:c,once:m,threshold:f,paused:l,infinite:a(i)});return r({render:h,ref:[x,A.ref],props:{...b,className:[A.className,w].filter(Boolean).join(" "),style:{transformOrigin:u,...A.style,...N},...A.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 MPAnimateGrow=/*@__PURE__*/e.forwardRef(function({duration:e,delay:n=0,easing:i,repeat:o=1,alternate:s,paused:l,trigger:d="mount",play:c,once:m=!0,threshold:p=.2,stagger:f=0,durationStep:g,reverse:u,timeline:h,range:y,mode:w="in",from:N=.8,origin:j="center",fade:v=!0,render:S,className:b,style:x,children:A,...B},G){const M=a({effect:"grow",duration:e,delay:n,easing:i,repeat:o,alternate:s,mode:w,scale:N,opacity:v?0:1,trigger:d,play:c,once:m,threshold:p,paused:l,infinite:t(o),stagger:f,durationStep:g,reverse:u,timeline:h,range:y,children:A});return r({render:S,ref:[G,M.ref],props:{...B,className:[M.className,b].filter(Boolean).join(" "),style:{transformOrigin:j,...M.style,...x},...M.props,children:M.children}})});

package/dist/components/animate-lighting/MPAnimateLighting.js

@@ -1 +1,2 @@
+"use client";
 import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as a}from"../../internal/accent.js";import{isInfinite as n,repeatValue as t,useAnimationRun as i}from"../../internal/animate.js";import{useMPColor as m,useMPSize as o}from"../../internal/config.js";const s={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-lg",xl:"rounded-mp-xl"};export const MPAnimateLighting=/*@__PURE__*/e.forwardRef(function({duration:e=3e3,delay:d=0,repeat:l="infinite",alternate:p,paused:c,trigger:g="mount",play:u,once:f=!0,threshold:h=.2,color:_,size:x,spread:y=3,arc:w=50,blur:$=4,reverse:j=!1,render:b,className:v,style:z,children:N,...A},B){const L=m(_),M=o(x),P=i({trigger:g,play:u,once:f,threshold:h,paused:c,infinite:n(l)});return r({render:b,ref:[B,P.ref],props:{...A,"data-mp-size":M,className:["mp-anim-lighting",s[M],v].filter(Boolean).join(" "),style:{...a(L),"--_mp-anim-duration":`${e}ms`,"--_mp-anim-delay":`${d}ms`,"--_mp-anim-repeat":t(l),"--_mp-anim-direction":j?p?"alternate-reverse":"reverse":p?"alternate":"normal","--_mp-anim-state":P.state,"--_mp-anim-glow-width":`${y}px`,"--_mp-anim-glow-arc":`${w}deg`,"--_mp-anim-glow-blur":`${$}px`,...z},...P.handlers,"data-mp-animation":"lighting","data-mp-state":P.state,children:N}})});

package/dist/components/animate-reveal/MPAnimateReveal.d.ts

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAnimateMode, MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps, MPSide } from '../../types.js';
+export interface MPAnimateRevealProps extends MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content is uncovered or covered again. An exit is quicker than
+     * an entrance — MD3's `short4` against `medium4` — unless `duration` says
+     * otherwise.
+     * @default 'in'
+     */
+    mode?: MPAnimateMode;
+    /**
+     * Which edge the wipe opens at. `left` discloses the content from its left
+     * edge rightwards, which is the reading direction of most of the world and
+     * the right default for a line of text.
+     *
+     * Physical, as `MPSide` is everywhere in this library: a title disclosed from
+     * the left of its box is disclosed from the left in every writing direction.
+     * Which edge to name under RTL is a caller's decision, not a translation.
+     * @default 'left'
+     */
+    from?: MPSide;
+    /**
+     * Fades the content in as it is uncovered.
+     *
+     * **Off** by default, and that is the one setting here worth arguing about. A
+     * reveal is not a fade: the whole point is that the ink is final from the
+     * first frame and only the extent of it changes. Doing both gives a weaker
+     * version of each — a wipe that is also translucent reads as neither.
+     * @default false
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content uncovered where it already is.
+ *
+ * The only entrance in this set where **nothing moves and no colour changes**.
+ * The element is at its final position from the first frame and at the ink it
+ * will end at; what changes is how much of it has been disclosed.
+ *
+ * That is what makes it the effect for anything whose *position* is part of
+ * what it is saying. A page title, a rule under a heading, the plot area of a
+ * chart, a table's first row: all of those mean something by being exactly
+ * where they are, and an entrance that travels tells the reader they arrived
+ * from somewhere. [MPAnimateFade](./animate-fade) is the other effect that
+ * leaves position alone, and the two differ in what they are willing to give
+ * up — a fade spends the colour, a reveal spends the extent.
+ *
+ * ## Why `clip-path` and not a mask or an `overflow` box
+ *
+ * A mask needs a gradient per direction and a second one to undo itself, and it
+ * is a second thing that has to agree with the side. A wrapper with
+ * `overflow: hidden` puts an element into the layout that was not there before,
+ * which for something inside a grid or a flex row changes what it is a child of
+ * — the very thing this effect exists to leave alone.
+ *
+ * `inset(0)` is already the spelling of "nothing is clipped", so the to-state
+ * needs no custom property and the resting appearance is the element's own.
+ * Nothing here reflows, so a reveal around a paragraph costs the page nothing.
+ */
+export declare const MPAnimateReveal: React.ForwardRefExoticComponent<MPAnimateRevealProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-reveal/MPAnimateReveal.js

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

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

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

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

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

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,171 @@
+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' | 'target' | 'rel'> {
+    /**
+     * 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;
+    /**
+     * Where that link opens. `rel` follows on its own for `_blank` — see `rel`.
+     *
+     * A logo in a header is usually the way back to the front page and opens in
+     * place, so this is rarely set. The one case it is set for is the lockup that
+     * links to somebody else's site, which is also the case where the `rel`
+     * matters most.
+     */
+    target?: string;
+    /**
+     * Overrides the `rel` a `_blank` lockup would otherwise get, which is
+     * `noopener noreferrer`. Writing one **replaces** it rather than adding to it,
+     * so a logo that also needs `nofollow` spells all three out.
+     */
+    rel?: 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{linkRel as o}from"../../internal/link.js";import{initialsOf as i}from"../../internal/initials.js";import{cssLength as l}from"../../internal/length.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as s,CONTROL_SQUARE as c,hasContent as d}from"../../internal/scale.js";import{VISUALLY_HIDDEN as p}from"../../internal/visually-hidden.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const x={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1.0625rem]",lg:"text-[1.375rem]",xl:"text-[1.625rem]"},g={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1.0625rem]",lg:"text-[1.3125rem]",xl:"text-[1.5625rem]"},h={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},v={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:w,srcSet:j,alt:b,name:_,initials:y,showName:N=!1,shape:k="bare",variant:B="filled",size:z,color:P,padded:S=!0,height:A,href:F,target:L,rel:M,imageProps:R,render:$,className:q,style:C,children:D,...E},G){const H=f(z),I=u(P),J="bare"!==k,K=d(D)?D:w?"image":null,O=J&&S,Q=null===K&&!J,T=N&&!Q&&d(_),U=b??_,V=y??(_?i(_):""),W="image"===K&&!T&&d(U),X=Q||W,Y=!X&&!T&&d(U),Z=l(A),ee=Z?{height:Z,width:J?Z:void 0}:null,te=e("span",{"aria-hidden":!X||void 0,className:["mp-app-logo__mark flex shrink-0 items-center justify-center overflow-hidden","font-semibold tracking-tight whitespace-nowrap",Z?"":s[H],J?[Z?"":c[H],"circle"===k?"rounded-mp-full":h[H],g[H],v[B]].filter(Boolean).join(" "):["text-mp-on-surface w-auto",x[H]].join(" "),"[&_svg]:w-auto [&_svg]:shrink-0",O?"[&_svg]:h-[72%] [&_svg]:max-w-[72%]":"[&_svg]:h-full [&_svg]:max-w-full"].filter(Boolean).join(" "),style:ee??void 0,children:"image"===K?e("img",{src:w,srcSet:j,alt:W?U??"":"",className:["w-auto object-contain",O?"h-[72%] max-w-[72%]":"h-full max-w-full"].join(" "),decoding:"async",...R}):K??(Q?_:V)});return r({render:$??e(F?"a":"span",{}),ref:G,props:{href:F,target:L,rel:o(L,M),"data-mp-size":H,"data-mp-variant":B,className:["mp-app-logo inline-flex max-w-full min-w-0 items-center align-middle","text-mp-on-surface no-underline select-none",m[H],F?"rounded-mp-xs cursor-pointer":"",F?"outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid outline-none":"",q??""].filter(Boolean).join(" "),style:{...a(I),...C},children:t(n.Fragment,{children:[te,T?e("span",{className:`mp-app-logo__name min-w-0 truncate font-semibold ${x[H]}`,children:_}):null,Y?e("span",{className:p,children:U}):null]}),...E}})});

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";