material-plus-ui 1.0.0 → 1.2.0

package/dist/components/animate-appear/MPAnimateAppear.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAnimateProps, MPSide } from '../../types';
+export interface MPAnimateAppearProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How long after one child the next one starts, in milliseconds. This is the
+     * whole effect — everything else is what a single child does.
+     * @default 80
+     */
+    stagger?: number;
+    /**
+     * Which edge each child drifts in from.
+     * @default 'bottom'
+     */
+    from?: MPSide;
+    /**
+     * How far each child travels. Short on purpose: this is a settling, not an
+     * entrance from off screen, and a long travel over a list of eight turns the
+     * whole block into something moving.
+     * @default '0.75rem'
+     */
+    distance?: number | string;
+    /**
+     * Fades each child in as it settles.
+     * @default true
+     */
+    fade?: boolean;
+    /**
+     * Runs the list from the last child to the first.
+     * @default false
+     */
+    reverse?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    /** The things that appear, one after another. */
+    children?: React.ReactNode;
+}
+/**
+ * A list of things settling into place one after another.
+ *
+ * Each child gets the same short fade and drift, held back by its position — so
+ * the effect belongs to the **set** rather than to any one item, and a reader's
+ * eye is walked down the list in the order it should be read. That is what MD3
+ * means by a list being introduced rather than merely drawn.
+ *
+ * The animation is written onto the children themselves rather than onto
+ * wrappers around them. A row of `<li>`s stays a row of `<li>`s, a grid's cells
+ * stay its direct children, and nothing about the layout changes because the
+ * list is being animated. Only a bare string has no element to write onto, so
+ * that one is wrapped in a `<span>`.
+ *
+ * The stagger is per **child**, which means what you pass matters: eight
+ * children are eight steps, and one child holding eight things is one step.
+ * That is also how to opt part of a list out — group it.
+ */
+export declare const MPAnimateAppear: React.ForwardRefExoticComponent<MPAnimateAppearProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-appear/MPAnimateAppear.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import*as a from"react";import{useRender as t}from"@base-ui/react/use-render";import{ANIMATION_CLASS as r,ANIM_BASE as s,animationSlots as n,isInfinite as i,slideOffsets as o,useAnimationRun as l}from"../../internal/animate";export const MPAnimateAppear=a.forwardRef(function({duration:m,delay:p=0,easing:d,repeat:c=1,alternate:f,paused:y,trigger:u="mount",play:h,once:g=!0,threshold:x=.2,stagger:N=80,from:j="bottom",distance:A="0.75rem",fade:b=!0,reverse:E=!1,render:$,className:v,style:w,children:B,...C},M){const P=l({trigger:u,play:h,once:g,threshold:x,paused:y,infinite:i(c)}),{x:R,y:V}=o(j,A),_=a.Children.toArray(B),k=`${s} ${r.slide}`,q=_.map((t,r)=>{const s=E?_.length-1-r:r,i=n({effect:"slide",duration:m,delay:p+s*N,easing:d,repeat:c,alternate:f,x:R,y:V,opacity:b?0:1});if(!a.isValidElement(t))return e("span",{className:k,style:i,children:t},r);const o=t.props;return a.cloneElement(t,{className:[k,o.className].filter(Boolean).join(" "),style:{...i,...o.style}})});return t({render:$,ref:[M,P.ref],props:{...C,className:v,style:{"--_mp-anim-state":P.state,...w},...P.handlers,"data-mp-animation":"appear","data-mp-state":P.state,children:q}})});

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

@@ -0,0 +1,2 @@
+export { MPAnimateAppear } from './MPAnimateAppear';
+export type { MPAnimateAppearProps } from './MPAnimateAppear';

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

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

package/dist/components/animate-blink/MPAnimateBlink.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAnimateProps } from '../../types';
+export interface MPAnimateBlinkProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How faint it gets at the bottom of the cycle, between `0` and `1`. Raise it
+     * for something that has to stay readable while it pulses.
+     * @default 0
+     */
+    min?: number;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content pulsing between full opacity and a floor.
+ *
+ * The cycle is symmetric — full, faint, full — so however many times it runs it
+ * ends where it started. A blink that finished halfway would leave the element
+ * permanently half drawn, which reads as a rendering fault rather than as an
+ * effect that has ended.
+ *
+ * It repeats forever unless told otherwise, because a single blink is a flicker
+ * and nobody asks for a flicker. `standard` rather than the emphasized curve
+ * every other effect takes, for the same reason: a pulse has no destination to
+ * decelerate into, and easing into a frame it immediately leaves reads as a
+ * stutter.
+ *
+ * ## Two things worth saying before using it
+ *
+ * Something that never stops moving in the corner of a page being read is the
+ * one kind of motion this library otherwise refuses, and a reader with a
+ * reduced-motion preference will see none of it. So `min` is a **dimming**,
+ * never the only thing carrying the message: if it is urgent, say so in words
+ * as well.
+ *
+ * For a placeholder that pulses because content has not arrived yet, this is
+ * the wrong component — [MPSkeleton](../feedback/skeleton) reserves the space
+ * the real thing will take, which is the part that was doing the work.
+ */
+export declare const MPAnimateBlink: React.ForwardRefExoticComponent<MPAnimateBlinkProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-blink/MPAnimateBlink.js

@@ -0,0 +1 @@
+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";export const MPAnimateBlink=e.forwardRef(function({duration:e,delay:n=0,easing:i,repeat:o="infinite",alternate:s,paused:l,trigger:p="mount",play:c,once:d=!0,threshold:f=.2,min:m=0,render:u,className:y,style:g,children:h,...N},b){const k=a({effect:"blink",duration:e,delay:n,easing:i,repeat:o,alternate:s,opacity:m,trigger:p,play:c,once:d,threshold:f,paused:l,infinite:t(o)});return r({render:u,ref:[b,k.ref],props:{...N,className:[k.className,y].filter(Boolean).join(" "),style:{...k.style,...g},...k.props,children:h}})});

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

@@ -0,0 +1,2 @@
+export { MPAnimateBlink } from './MPAnimateBlink';
+export type { MPAnimateBlinkProps } from './MPAnimateBlink';

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

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

package/dist/components/animate-fade/MPAnimateFade.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAnimateMode, MPAnimateProps } from '../../types';
+export interface MPAnimateFadeProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content arrives or leaves. An exit is quicker than an entrance
+     * — MD3's `short4` against `medium2` — unless `duration` says otherwise.
+     * @default 'in'
+     */
+    mode?: MPAnimateMode;
+    /**
+     * The opacity it starts from, between `0` and `1`. Raise it for content that
+     * should never be completely gone.
+     * @default 0
+     */
+    from?: number;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content arriving or leaving on opacity alone.
+ *
+ * The plainest effect in the set, and the one to reach for first: nothing
+ * moves, so nothing reflows and nothing is resampled. A fade is the only
+ * entrance that is safe on a block of text at any size — everything else in
+ * this group either scales it or travels it, and both resample glyphs.
+ *
+ * It is also the effect MD3 names in two of its four standard patterns. **Fade
+ * through** — one thing out, then the next in — is what this is when two of
+ * them are sequenced with a `delay`; **fade** is what a thing entering or
+ * leaving a screen does on its own, which is the default here.
+ *
+ * `mode="out"` is the same animation run backwards, and it is *held* at the
+ * end: a faded-out element stays faded out rather than snapping back into view
+ * the moment the animation finishes.
+ */
+export declare const MPAnimateFade: React.ForwardRefExoticComponent<MPAnimateFadeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-fade/MPAnimateFade.js

@@ -0,0 +1 @@
+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";export const MPAnimateFade=e.forwardRef(function({duration:e,delay:n=0,easing:o,repeat:i=1,alternate:s,paused:l,trigger:d="mount",play:m,once:p=!0,threshold:c=.2,mode:f="in",from:u=0,render:y,className:g,style:h,children:N,...b},j){const w=t({effect:"fade",duration:e,delay:n,easing:o,repeat:i,alternate:s,mode:f,opacity:u,trigger:d,play:m,once:p,threshold:c,paused:l,infinite:a(i)});return r({render:y,ref:[j,w.ref],props:{...b,className:[w.className,g].filter(Boolean).join(" "),style:{...w.style,...h},...w.props,children:N}})});

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

@@ -0,0 +1,2 @@
+export { MPAnimateFade } from './MPAnimateFade';
+export type { MPAnimateFadeProps } from './MPAnimateFade';

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

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

package/dist/components/animate-grow/MPAnimateGrow.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAnimateMode, MPAnimateProps } from '../../types';
+export interface MPAnimateGrowProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content unfolds or folds away. An exit is quicker than an
+     * entrance — MD3's `short4` against `medium4` — unless `duration` says
+     * otherwise.
+     * @default 'in'
+     */
+    mode?: MPAnimateMode;
+    /**
+     * The scale it starts from, as a multiple of its final size. Above `1` it
+     * settles down onto the page instead of up out of it.
+     * @default 0.8
+     */
+    from?: number;
+    /**
+     * Which point stays put while the rest moves — any CSS `transform-origin`.
+     * `'top'` unfolds downwards, `'bottom left'` out of a corner.
+     * @default 'center'
+     */
+    origin?: string;
+    /**
+     * Fades in as it grows. Turn it off for something already on the page that is
+     * only changing size.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content unfolding from a point.
+ *
+ * This is the container transform MD3 describes, at the one scale a component
+ * library can offer it: something opens out of the place it belongs to. A panel
+ * out of a toolbar, a card out of the row it sits in, a sheet out of the button
+ * that summoned it — `origin` is what anchors it to that place, and it is the
+ * whole difference between this and [MPAnimateZoom](../motion/animate-zoom).
+ *
+ * A Grow starts close to its final size, so the travel is short and the content
+ * inside is legible for most of the animation. A Zoom starts at less than half
+ * and always about the middle: it comes at the reader rather than out of
+ * anything.
+ *
+ * `transform-origin` governs the standalone `scale` property as well as the
+ * `transform` shorthand, which is what lets this effect stay off the shorthand
+ * entirely — a caller's own transform on the same element survives.
+ */
+export declare const MPAnimateGrow: React.ForwardRefExoticComponent<MPAnimateGrowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-grow/MPAnimateGrow.js

@@ -0,0 +1 @@
+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";export const MPAnimateGrow=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:b,...j},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:{...j,className:[A.className,w].filter(Boolean).join(" "),style:{transformOrigin:u,...A.style,...N},...A.props,children:b}})});

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

@@ -0,0 +1,2 @@
+export { MPAnimateGrow } from './MPAnimateGrow';
+export type { MPAnimateGrowProps } from './MPAnimateGrow';

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

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

package/dist/components/animate-headline/MPAnimateHeadline.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import type { MPAnimateProps } from '../../types';
+export interface MPAnimateHeadlineProps extends Omit<MPAnimateProps, 'alternate'>, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How long each line is held before the next one comes up, in milliseconds.
+     * Counted from the moment a line arrives, so it is reading time rather than a
+     * cycle length.
+     * @default 2600
+     */
+    interval?: number;
+    /**
+     * Which line is showing. Pass it to drive the reel yourself — from a step in
+     * a form, a tab, or a timer of your own.
+     */
+    index?: number;
+    /**
+     * Where an uncontrolled reel starts.
+     * @default 0
+     */
+    defaultIndex?: number;
+    /** Called with the line that has just come up. */
+    onIndexChange?: (index: number) => void;
+    /**
+     * Starts again after the last line. Off, the reel stops on the last one and
+     * stays there.
+     * @default true
+     */
+    loop?: boolean;
+    /**
+     * How far a line travels as it comes up or leaves — a CSS length, or a number
+     * in pixels. `'100%'` is one line's own height.
+     * @default '100%'
+     */
+    rise?: number | string;
+    /** The lines, in the order they should be read. */
+    children?: React.ReactNode;
+}
+/**
+ * One line replacing the one above it, on a timer.
+ *
+ * Every line sits in the same grid cell, so the box is as tall as the longest
+ * of them from the first frame and never resizes as the reel turns — which is
+ * the whole difficulty with this effect, and the reason the lines that are not
+ * showing keep their space with `visibility` rather than being taken out of the
+ * layout.
+ *
+ * It is deliberately **not a ticker**. A line comes up, it stops, and it is
+ * held long enough to read; `interval` is counted from the moment it arrives
+ * rather than from the start of the cycle, so raising `duration` does not
+ * quietly eat the reading time.
+ *
+ * The swap is the one place in this library where both halves of MD3's
+ * emphasized curve are written out: the line arriving decelerates into place
+ * while the line leaving accelerates away. Everywhere else an exit is a
+ * reversed entrance, but here the two genuinely are two animations on two
+ * elements at the same moment.
+ *
+ * Use it for a set of phrases where any one of them would have done — three
+ * ways of saying what a product is, a rotating set of customer names. What it
+ * is not for is content a reader has to see, because there is no guarantee they
+ * are looking during the two seconds it is up.
+ */
+export declare const MPAnimateHeadline: React.ForwardRefExoticComponent<MPAnimateHeadlineProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-headline/MPAnimateHeadline.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{easingValue as n,isInfinite as a,lengthValue as r,useAnimationRun as i,usePrefersReducedMotion as s}from"../../internal/animate";export const MPAnimateHeadline=t.forwardRef(function({duration:o,delay:l=0,easing:m,repeat:u="infinite",paused:c,trigger:d="mount",play:f,once:p=!0,threshold:h=.2,interval:v=2600,index:g,defaultIndex:y=0,onIndexChange:x,loop:E=!0,rise:N="100%",className:j,style:T,children:_,...C},M){const R=i({trigger:d,play:f,once:p,threshold:h,paused:c,infinite:a(u)}),k=s(),A=t.Children.toArray(_),B=A.length,[I,S]=t.useState(y),b=Math.min(g??I,Math.max(B-1,0)),[w,H]=t.useState(null),P=t.useRef(b);t.useEffect(()=>{P.current!==b&&(H(P.current),P.current=b)},[b]);const V=o??500;t.useEffect(()=>{if(null===w)return;const e=setTimeout(()=>H(null),V);return()=>clearTimeout(e)},[w,V]);const $=t.useCallback(()=>{const e=b+1;if(e>=B){if(!E)return;return void 0===g&&S(0),void x?.(0)}void 0===g&&S(e),x?.(e)},[b,B,E,g,x]),q=t.useRef(!1);return t.useEffect(()=>{if(void 0!==g||B<2||"running"!==R.state)return;if(!E&&b===B-1)return;const e=setTimeout(()=>{q.current=!0,$()},v+(q.current?0:l));return()=>clearTimeout(e)},[g,B,R.state,v,l,$,E,b]),e("div",{ref:e=>{R.ref(e),"function"==typeof M?M(e):M&&(M.current=e)},className:["mp-headline",j??""].filter(Boolean).join(" "),style:{...void 0===o?{}:{"--_mp-anim-duration":`${o}ms`},"--_mp-anim-rise":r(N),...m?{"--_mp-anim-ease":n(m)}:{},"--_mp-anim-state":R.state,...T},"data-mp-animation":"headline","data-mp-state":R.state,...R.handlers,...C,children:A.map((n,a)=>{const r=a===b?"active":a!==w||k?void 0:"leaving";if(!t.isValidElement(n))return e("span",{className:"mp-headline-item","data-mp-state":r,children:n},a);const i=n.props;return t.cloneElement(n,{key:a,className:["mp-headline-item",i.className].filter(Boolean).join(" "),"data-mp-state":r})})})});

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

@@ -0,0 +1,2 @@
+export { MPAnimateHeadline } from './MPAnimateHeadline';
+export type { MPAnimateHeadlineProps } from './MPAnimateHeadline';

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

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

package/dist/components/animate-lighting/MPAnimateLighting.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAnimateProps, MPColor, MPSize } from '../../types';
+export interface MPAnimateLightingProps extends Omit<MPAnimateProps, 'easing'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which accent family the light is drawn in. Not an arbitrary colour, for the
+     * reason no component in this library takes one: to change what `primary`
+     * *is*, set the token.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * The radius the light follows, on the shared corner ladder. It has to match
+     * what is inside, or the glow will cut a corner the content has rounded off.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * How far past the content the light reaches, in pixels.
+     * @default 3
+     */
+    spread?: number;
+    /**
+     * How much of the outline is lit at once, in degrees. Small is a travelling
+     * spark; large is a sweep.
+     * @default 50
+     */
+    arc?: number;
+    /**
+     * How soft the light is, in pixels. At `0` it is a hard-edged wedge, which
+     * reads as a graphic rather than as light.
+     * @default 4
+     */
+    blur?: number;
+    /**
+     * Runs the light the other way round.
+     * @default false
+     */
+    reverse?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A light travelling around the outside of something.
+ *
+ * The light is **behind** the content rather than on it, so what a reader sees
+ * is a glow escaping from under the edges — which is why it works around a
+ * [card](../layout/card) or a [button](../inputs/button) without touching
+ * anything about how they are drawn. Nothing inside is altered, nothing is
+ * overlaid, and the content stays exactly as legible as it was.
+ *
+ * Use it to mark the one thing on a screen that is currently live: the row that
+ * is processing, the field being checked, the plan being recommended. It draws
+ * attention with light rather than by moving anything, which is the only way
+ * this library has of saying "here" without also saying "and it moved".
+ *
+ * ## Two things it needs from the caller
+ *
+ * `size` has to agree with the radius of what is inside it. The glow follows
+ * the wrapper's own corners, so an `xl` card in an `md` Lighting will show
+ * light poking out of four corners the card has already rounded away.
+ *
+ * And the arc is decoration. Under `prefers-reduced-motion` it stops travelling
+ * and becomes an even glow — still a mark, no longer a motion — so whatever it
+ * was pointing at has to be sayable without it.
+ */
+export declare const MPAnimateLighting: React.ForwardRefExoticComponent<MPAnimateLightingProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,2 @@
+export { MPAnimateLighting } from './MPAnimateLighting';
+export type { MPAnimateLightingProps } from './MPAnimateLighting';

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

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

package/dist/components/animate-marquee/MPAnimateMarquee.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import type { MPAnimateProps, MPOrientation } from '../../types';
+export interface MPAnimateMarqueeProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which way the strip runs.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /**
+     * Runs it the other way — left to right, or bottom to top.
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * How fast the content travels, in pixels per second. A speed rather than a
+     * duration, so a strip of four logos and a strip of forty move at the same
+     * pace instead of the long one becoming a blur.
+     * @default 60
+     */
+    speed?: number;
+    /**
+     * The gap between items, and between the last item and the first of the next
+     * pass — a CSS length, or a number in pixels.
+     * @default '2rem'
+     */
+    gap?: number | string;
+    /**
+     * How many copies of the content are laid end to end. Two is enough for
+     * anything at least as wide as its container; raise it when the content is
+     * short enough to leave a hole behind itself.
+     * @default 2
+     */
+    copies?: number;
+    /**
+     * Stops while the pointer is on it, so something scrolling past can actually
+     * be read or clicked.
+     * @default true
+     */
+    pauseOnHover?: boolean;
+    /** The things that scroll past. */
+    children?: React.ReactNode;
+}
+/**
+ * Content scrolling steadily past, forever.
+ *
+ * The content is laid down twice, and each copy travels exactly its own length
+ * plus the gap — so the moment the first copy has left, the second is standing
+ * precisely where it began. There is no seam, no jump and no frame where the
+ * strip is empty, and none of that depends on measuring anything: a percentage
+ * `translate` resolves against the element's own box.
+ *
+ * What **is** measured is only the speed. A duration would mean a strip of four
+ * logos and a strip of forty crossing the same box in the same time, with the
+ * long one becoming unreadable; `speed` is pixels per second, so both move at
+ * the pace of a reader instead. The strip is re-measured whenever it changes
+ * size.
+ *
+ * `pauseOnHover` is on by default and is not decoration: content moving past a
+ * pointer cannot be clicked reliably, and a link inside a marquee that never
+ * stops is a link nobody can follow.
+ *
+ * Only the first copy is read out. The rest carry `aria-hidden`, or a screen
+ * reader would announce everything on the strip as many times as it was laid
+ * down.
+ */
+export declare const MPAnimateMarquee: React.ForwardRefExoticComponent<MPAnimateMarqueeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-marquee/MPAnimateMarquee.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{easingValue as t,isInfinite as a,lengthValue as n,repeatValue as i,useAnimationRun as o}from"../../internal/animate";export const MPAnimateMarquee=r.forwardRef(function({duration:s,delay:m=0,easing:p,repeat:u="infinite",alternate:l,paused:c,trigger:d="mount",play:f,once:h=!0,threshold:v=.2,orientation:g="horizontal",reverse:y=!1,speed:_=60,gap:q="2rem",copies:R=2,pauseOnHover:b=!0,className:x,style:M,children:j,...w},z){const N=o({trigger:d,play:f,once:h,threshold:v,paused:c,infinite:a(u)}),O=r.useRef(null),A=r.useRef(null),[G,H]=r.useState(0),S="vertical"===g;r.useEffect(()=>{const e=O.current,r=A.current;if(!e||!r)return;const t=()=>{const t=getComputedStyle(e),a=parseFloat(S?t.rowGap:t.columnGap)||0,n=S?r.offsetHeight:r.offsetWidth;H(n+a)};if(t(),"undefined"==typeof ResizeObserver)return;const a=new ResizeObserver(t);return a.observe(r),a.observe(e),()=>a.disconnect()},[S,j]);const $=s??(G>0?G/_*1e3:12e3);return e("div",{ref:e=>{O.current=e,N.ref(e),"function"==typeof z?z(e):z&&(z.current=e)},className:["mp-marquee",S?"mp-marquee-vertical":"",x??""].filter(Boolean).join(" "),style:{"--_mp-anim-gap":n(q),...p?{"--_mp-anim-ease":t(p)}:{},"--_mp-anim-duration":`${Math.round($)}ms`,"--_mp-anim-delay":`${m}ms`,"--_mp-anim-repeat":i(u),"--_mp-anim-direction":y?l?"alternate-reverse":"reverse":l?"alternate":"normal","--_mp-anim-state":N.state,...M},"data-mp-animation":"marquee","data-mp-state":N.state,"data-mp-pause-on-hover":b?"":void 0,...N.handlers,...w,children:Array.from({length:Math.max(1,R)},(r,t)=>(r=>e("div",{ref:0===r?A:void 0,className:"mp-marquee-track","aria-hidden":0===r?void 0:"true",children:j},r))(t))})});

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

@@ -0,0 +1,2 @@
+export { MPAnimateMarquee } from './MPAnimateMarquee';
+export type { MPAnimateMarqueeProps } from './MPAnimateMarquee';

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

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

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAnimateMode, MPAnimateProps } from '../../types';
+export interface MPAnimateRotateProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Whether the content turns into place or out of it.
+     * @default 'in'
+     */
+    mode?: MPAnimateMode;
+    /**
+     * The angle it starts at, in degrees. Negative is anticlockwise.
+     * @default -180
+     */
+    from?: number;
+    /**
+     * The angle it ends at, in degrees. Together with `from` this is what makes
+     * one component cover both a quarter turn into place and an endless spin:
+     * `from={0} to={360} repeat="infinite" easing="linear"`.
+     * @default 0
+     */
+    to?: number;
+    /**
+     * Which point it turns about — any CSS `transform-origin`.
+     * @default 'center'
+     */
+    origin?: string;
+    /**
+     * Fades in as it turns. Turn it off for a continuous spin, where a repeating
+     * fade would read as flickering.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content turning about a point.
+ *
+ * Two angles rather than one, which is what lets this be both of the effects a
+ * rotation is ever used for. `from` alone is an **arrival** — something
+ * swinging into place and stopping. `from` and `to` together with
+ * `repeat="infinite"` and `easing="linear"` is a **spin** that never lands,
+ * which is what a decorative mark or a badge wants.
+ *
+ * Rotation is the one movement this library allows on a glyph without argument:
+ * a chevron is turned rather than redrawn all over the components, because a
+ * turned arrow is still the same arrow. What it is emphatically not for is
+ * text. A rotated word is resampled along its whole length, and at any angle
+ * that is not a multiple of 90° every stem in it lands between pixels.
+ *
+ * If what you want is a spinner, this is not it — an indeterminate indicator
+ * has to say what it is waiting on, which is
+ * [MPProgressCircular](../feedback/progress-circular).
+ */
+export declare const MPAnimateRotate: React.ForwardRefExoticComponent<MPAnimateRotateProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+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";export const MPAnimateRotate=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:R,style:$,children:b,...j},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:{...j,className:[x.className,R].filter(Boolean).join(" "),style:{transformOrigin:y,...x.style,...$},...x.props,children:b}})});

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

@@ -0,0 +1,2 @@
+export { MPAnimateRotate } from './MPAnimateRotate';
+export type { MPAnimateRotateProps } from './MPAnimateRotate';

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

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

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAnimateMode, MPAnimateProps, MPSide } from '../../types';
+export interface MPAnimateSlideProps extends MPAnimateProps, 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`.
+     * @default 'in'
+     */
+    mode?: MPAnimateMode;
+    /**
+     * Which edge it travels from. Physical, as `MPSide` is everywhere in this
+     * library: a panel sliding down from the top comes from the top in every
+     * writing direction.
+     * @default 'bottom'
+     */
+    from?: MPSide;
+    /**
+     * How far it travels — a CSS length, or a number in pixels. `'100%'` is the
+     * element's own width or height, which is what makes it appear from behind
+     * its own edge.
+     * @default '100%'
+     */
+    distance?: number | string;
+    /**
+     * Fades in as it slides.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content travelling in from one edge.
+ *
+ * This is MD3's **shared axis** transition, at the scale one wrapper can offer
+ * it: things that are related move along the same line, so a reader reads the
+ * direction as a relationship. A step forward comes from the end edge and a
+ * step back from the start one; a panel belonging to the bar above it comes
+ * down from the top.
+ *
+ * The default distance is the element's own size, so it starts exactly out of
+ * frame and is never half drawn somewhere it does not belong. Put it in a box
+ * with `overflow: hidden` and the effect is a panel appearing from behind that
+ * box's edge.
+ *
+ * A slide moves the element and not the layout: this is a `translate`, so
+ * nothing on the page reflows while it runs. For a much shorter travel over a
+ * list of things, one after another, use
+ * [MPAnimateAppear](../motion/animate-appear).
+ */
+export declare const MPAnimateSlide: React.ForwardRefExoticComponent<MPAnimateSlideProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+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";export const MPAnimateSlide=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}})});

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

@@ -0,0 +1,2 @@
+export { MPAnimateSlide } from './MPAnimateSlide';
+export type { MPAnimateSlideProps } from './MPAnimateSlide';

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

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