material-plus-ui 0.0.1 → 1.1.0

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

package/dist/components/animate-typing/MPAnimateTyping.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import type { MPAnimateProps } from '../../types';
+export interface MPAnimateTypingProps 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 fast it is typed, in characters per second.
+     * @default 24
+     */
+    speed?: number;
+    /**
+     * How long the finished text is held before it repeats, in milliseconds.
+     * @default 1400
+     */
+    hold?: number;
+    /**
+     * Deletes the text again before repeating, rather than clearing it in one
+     * frame. Only means anything when `repeat` is more than once.
+     * @default false
+     */
+    erase?: boolean;
+    /**
+     * How fast it is deleted, in characters per second. Deleting is usually about
+     * twice as fast as typing, which is what a person actually does.
+     * @default twice `speed`
+     */
+    eraseSpeed?: number;
+    /**
+     * The block after the text.
+     * @default true
+     */
+    caret?: boolean;
+    /**
+     * What the caret is drawn as.
+     * @default '|'
+     */
+    caretChar?: React.ReactNode;
+    /** The text to type. Only text is typed — see below. */
+    children?: React.ReactNode;
+}
+/**
+ * Text appearing one character at a time.
+ *
+ * The whole string is in the document from the first frame — in a clipped box
+ * for a screen reader, which reads it once and is not made to sit through the
+ * performance — and what animates is a visible copy that is `aria-hidden`. So
+ * the effect costs a reader who cannot see it nothing, and costs a reader who
+ * can nothing either: the box is not laid out from the characters that have
+ * arrived, so the text around it does not reflow on every frame.
+ *
+ * `repeat`, `hold` and `erase` are what make it a loop: type, hold, delete,
+ * type again. Without `erase` a repeat clears in one frame, which is right for
+ * a line that is being replaced rather than rewritten.
+ *
+ * Only **text** is typed. Pass a string, or strings; an element among the
+ * children contributes its text and nothing about its markup, because there is
+ * no honest way to reveal half of a link.
+ */
+export declare const MPAnimateTyping: React.ForwardRefExoticComponent<MPAnimateTypingProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+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";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden";function u(e){return"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(u).join(""):""}export const MPAnimateTyping=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:v,once:j=!0,threshold:M=.2,className:N,style:S,children:w,...A},I){const E=a({trigger:T,play:v,once:j,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]})]})});

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

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

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

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

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAnimateMode, MPAnimateProps } from '../../types';
+export interface MPAnimateZoomProps extends MPAnimateProps, 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
+     * otherwise.
+     * @default 'in'
+     */
+    mode?: MPAnimateMode;
+    /**
+     * The scale it starts from, as a multiple of its final size. Above `1` it
+     * arrives oversized and settles back, which reads as coming *towards* the
+     * reader rather than up out of the page.
+     * @default 0.4
+     */
+    from?: number;
+    /**
+     * Fades in as it zooms.
+     * @default true
+     */
+    fade?: boolean;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * Content arriving from the middle of where it will end up.
+ *
+ * The same arithmetic as [MPAnimateGrow](../motion/animate-grow) at more than
+ * twice the distance, and always about the centre — which is the whole
+ * difference. A grow unfolds *from* somewhere; a zoom comes at the reader.
+ *
+ * Use it for the one thing on a screen that is meant to interrupt: a
+ * confirmation, a result, a number that has just landed. Use it once. An
+ * interruption that happens three times on one screen is a layout, and the
+ * effect that belongs to a set of things rather than to one is
+ * [MPAnimateAppear](../motion/animate-appear).
+ *
+ * There is no `origin`, on purpose. A zoom anchored to a corner is a grow, and
+ * the library does not offer two spellings of one idea.
+ */
+export declare const MPAnimateZoom: React.ForwardRefExoticComponent<MPAnimateZoomProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-zoom/MPAnimateZoom.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 MPAnimateZoom=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:b,...j},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:{...j,className:[x.className,h].filter(Boolean).join(" "),style:{transformOrigin:"center",...x.style,...N},...x.props,children:b}})});

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

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

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

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

package/dist/components/aspect-ratio/MPAspectRatio.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPSize } from '../../types';
+/**
+ * How the media inside is fitted to the box, spelled the way CSS spells it.
+ *
+ * These are `object-fit`'s own values rather than a nicer set of words, and for
+ * the same reason `MPSide` keeps `top`/`right`/`bottom`/`left`: inventing
+ * `fill-the-box` would only make a reader look up which CSS it maps to.
+ */
+export type MPAspectFit = 'cover' | 'contain' | 'fill' | 'none';
+export interface MPAspectRatioProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The proportion the box holds, written the way CSS writes it — a number
+     * (`1.5`) or a ratio (`'16 / 9'`). Both reach `aspect-ratio` untouched.
+     * @default 1
+     */
+    ratio?: number | string;
+    /**
+     * How a single piece of media inside is fitted.
+     *
+     * Applies to an `img`, a `video`, a `canvas`, an `svg`, a `picture` or an
+     * `iframe` that is a *direct* child; those are stretched to the full box and
+     * then fitted. Anything else is laid out normally and this prop does not reach
+     * it.
+     * @default 'cover'
+     */
+    fit?: MPAspectFit;
+    /**
+     * Rounds the corners to the `size` rung.
+     *
+     * Off by default. A layout component draws nothing, and a photograph with its
+     * corners cut is a decision about the photograph — but it is such a common one
+     * that making the caller reach for a `className` would be perverse.
+     * @default false
+     */
+    rounded?: boolean;
+    /**
+     * Which corner `rounded` uses. There is no height and no type scale on a box
+     * whose whole job is a proportion, so this is the one axis `size` has here.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Renders something other than a `<div>`: `render={<figure />}`,
+     * `render={<a href="…" />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A box that keeps a proportion whatever width it is given.
+ *
+ * It draws nothing — no surface, no border, no shadow, no colour — which is what
+ * makes it layout rather than a component in the Material sense. What it does is
+ * *reserve* the space: a card whose image arrives late does not reflow the page
+ * around it, and a row of thumbnails is a row of one shape.
+ *
+ * That is worth more than it sounds. Material's layout guidance is built on a
+ * grid whose rows line up, and the single most common way a real page stops
+ * lining up is media of unknown height arriving after the text around it has
+ * already been laid out.
+ *
+ * The proportion is CSS's own `aspect-ratio`, so a caller who already knows
+ * `16 / 9` has nothing to translate. `fit` is the one convenience on top: the
+ * media inside is stretched to the box and then fitted, which is the pair of
+ * declarations every use of this component would otherwise start with.
+ */
+export declare const MPAspectRatio: React.ForwardRefExoticComponent<MPAspectRatioProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+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=["[&>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=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}})});

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1,2 @@
+export { MPAspectRatio } from './MPAspectRatio';
+export type { MPAspectFit, MPAspectRatioProps } from './MPAspectRatio';

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

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