material-plus-ui 1.6.0 → 1.7.0

package/README.md

@@ -23,7 +23,7 @@ It follows the specification directly rather than wrapping somebody's implementa
 - **IME-safe by construction.** Korean, Japanese and Chinese composition survives whatever your `onChange` does with the value.
 - **Bring your own icons.** `MPIcon` takes a component or an element from any set. `lucide-react` ships with the package, gathered in one readable constants file.
 - **Works in a Next.js server component**, and in any bundler: the components carry `"use client"`, the barrel and the data do not, and every specifier in `dist/` names a file — so webpack, Vite, esbuild, Rollup and plain Node all resolve it.
-- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 2.9 kB gzipped and five are 7.4 kB, against 74 kB for all hundred and eleven. `npm run measure` prints those numbers off a real bundler, so they cannot quietly stop being true. The stylesheet splits the same way.
+- **ESM only**, TypeScript declarations included, and tree-shakeable for real: one component is 3.0 kB gzipped and five are 9.0 kB, against 126.8 kB for every export there is. `npm run measure` prints those numbers off a real bundler, so they cannot quietly stop being true. The stylesheet splits the same way.
 - **One runtime dependency.** React 18 or 19, Node.js 22 or later.
 
 ## Documentation
@@ -74,7 +74,7 @@ If Tailwind v4 is already in your project, import the token sheet instead:
 @import 'material-plus-ui/tailwind.css';
 ```
 
-A page that renders a handful of components can take the tokens and a sheet each instead of the whole 113 kB — 4.5 kB gzipped for one component against 16.1 kB for the lot. [The guide](https://material-plus.cdget.com/guide/getting-started#if-you-only-render-a-few-components) has the numbers and where the two paths cross.
+A page that renders a handful of components can take the tokens and a sheet each instead of the whole 144.8 kB — 4.8 kB gzipped for one component against 21.0 kB for the lot. [The guide](https://material-plus.cdget.com/guide/getting-started#if-you-only-render-a-few-components) has the numbers and where the two paths cross.
 
 ```ts
 import 'material-plus-ui/styles/tokens.css';

package/dist/components/accordion/MPAccordion.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPSize, MPVariant } from '../../types.js';
+import type { MPDensity, MPSize, MPElevation, MPVariant } from '../../types.js';
 export interface MPAccordionProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'> {
     /**
      * Whether more than one section may be open at once.
@@ -31,11 +31,31 @@ export interface MPAccordionProps extends Omit<React.ComponentPropsWithoutRef<'d
      * @default 'outlined'
      */
     variant?: MPVariant;
+    /**
+     * How far off the page the sheet is lifted, on MD3's own scale.
+     *
+     * It moves the **tone** as well as the shadow, because Material pairs the two:
+     * a level-2 surface is `surface-container` under a level-2 shadow, and a prop
+     * that only cast a shadow would raise this into a surface the specification
+     * has no name for. Given a level, `variant` is left holding only its hairline.
+     *
+     * Left unset, `variant` decides — and `variant="elevated"` is this at `1`.
+     */
+    elevation?: MPElevation;
     /**
      * The room inside every section, and the type scale of its header and body.
      * @default 'md'
      */
     size?: MPSize;
+    /**
+     * Takes room out of every section's header and body.
+     *
+     * An accordion is a list of rows that happen to open, so it wants density for
+     * the reason a list does: a panel of eight sections that fits on the screen is
+     * a different component from one that has to be scrolled to be understood.
+     * @default 0
+     */
+    density?: MPDensity;
     /**
      * Keeps closed panels in the DOM so the browser's own page search can find and
      * open them. Overrides `keepMounted`.

package/dist/components/accordion/MPAccordion.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Accordion as a}from"@base-ui/react/accordion";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronDownIcon as r}from"../../constants/icons.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as d,META_TEXT as c,PROSE_TEXT as m,SHEET_PAD_X as u,SHEET_PAD_Y as p,SHEET_TITLE as f}from"../../internal/scale.js";import{CONTAINER_SURFACE as h}from"../../internal/surface.js";import{useMPSize as v}from"../../internal/config.js";const x=/*@__PURE__*/n.createContext({size:"md",dividers:!0}),b=/*@__PURE__*/["h-(--accordion-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" ");const g={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPAccordion=/*@__PURE__*/n.forwardRef(function({multiple:t=!1,value:i,defaultValue:r,onValueChange:o,dividers:s=!0,disabled:l=!1,variant:d="outlined",size:c,hiddenUntilFound:m=!1,keepMounted:u=!1,className:p,children:f,...b},g){const j=v(c),N=n.useMemo(()=>({size:j,dividers:s}),[j,s]);return e(x.Provider,{value:N,children:e(a.Root,{ref:g,multiple:t,value:i,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:m,keepMounted:u,"data-mp-size":j,"data-mp-variant":d,className:["mp-accordion rounded-mp-md flex w-full flex-col",h[d],"text-mp-on-surface",s?"overflow-hidden [&>div+div]:border-mp-outline-variant [&>div+div]:border-t":"p-1",p??""].filter(Boolean).join(" "),...b,children:f})})});export const MPAccordionItem=/*@__PURE__*/n.forwardRef(function({value:h,title:v,subtitle:j,startIcon:N,action:w,disabled:y=!1,className:_,children:k,...z},C){const{size:M,dividers:A}=n.useContext(x),P=u[M],B=p[M],I=n.useRef(null),[R,V]=n.useState(!1),F=n.useCallback(e=>{var t;I.current=e,e&&V(e.hasAttribute("data-open")&&!((t=e).hasAttribute("data-starting-style")&&parseFloat(getComputedStyle(t).transitionDuration)>0))},[]);return t(a.Item,{ref:C,value:h,disabled:y,className:["mp-accordion__item flex flex-col",_??""].filter(Boolean).join(" "),...z,children:[t(a.Header,{className:"m-0 flex w-full items-center font-[inherit]",children:[t(a.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",P,B,s[M],A?"":"rounded-mp-sm","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].filter(Boolean).join(" "),children:[e(o,{}),d(N)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:N}):null,t("span",{className:"mp-accordion__text flex min-w-0 flex-1 flex-col",children:[d(v)?e("span",{className:`mp-accordion__title truncate ${f[M]}`,children:v}):null,d(j)?e("span",{className:`mp-accordion__subtitle text-mp-on-surface-variant truncate ${c}`,children:j}):null]}),e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(i,{icon:r,size:l[M]})})]}),d(w)?e("span",{className:`flex shrink-0 items-center ${P}`,children:w}):null]}),e(a.Panel,{ref:F,className:[b,R?"data-open:overflow-visible":""].filter(Boolean).join(" "),onTransitionEnd:e=>{e.target===I.current&&"height"===e.propertyName&&V(I.current.hasAttribute("data-open"))},children:e("div",{className:["min-w-0",m[M],"text-mp-on-surface-variant",P,g[M]].join(" "),children:k})})]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{Accordion as i}from"@base-ui/react/accordion";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronDownIcon as r}from"../../constants/icons.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as d,META_TEXT as c,PROSE_TEXT as m,SHEET_TITLE as u}from"../../internal/scale.js";import{sheetPadX as p,sheetPadY as f}from"../../internal/density.js";import{containerSurface as h}from"../../internal/elevation.js";import{useMPDensity as v,useMPSize as x}from"../../internal/config.js";const b=/*@__PURE__*/n.createContext({size:"md",density:0,dividers:!0}),g=/*@__PURE__*/["h-(--accordion-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" ");const j={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPAccordion=/*@__PURE__*/n.forwardRef(function({multiple:t=!1,value:a,defaultValue:r,onValueChange:o,dividers:s=!0,disabled:l=!1,variant:d="outlined",elevation:c,size:m,density:u,hiddenUntilFound:p=!1,keepMounted:f=!1,className:g,children:j,...N},y){const w=x(m),_=v(u),k=n.useMemo(()=>({size:w,density:_,dividers:s}),[w,_,s]);return e(b.Provider,{value:k,children:e(i.Root,{ref:y,multiple:t,value:a,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:p,keepMounted:f,"data-mp-size":w,"data-mp-variant":d,className:["mp-accordion rounded-mp-md flex w-full flex-col",h(d,c),"text-mp-on-surface",s?"overflow-hidden [&>div+div]:border-mp-outline-variant [&>div+div]:border-t":"p-1",g??""].filter(Boolean).join(" "),...N,children:j})})});export const MPAccordionItem=/*@__PURE__*/n.forwardRef(function({value:h,title:v,subtitle:x,startIcon:N,action:y,disabled:w=!1,className:_,children:k,...z},C){const{size:M,density:A,dividers:P}=n.useContext(b),B=p(M,A),I=f(M,A),R=n.useRef(null),[V,F]=n.useState(!1),S=n.useCallback(e=>{var t;R.current=e,e&&F(e.hasAttribute("data-open")&&!((t=e).hasAttribute("data-starting-style")&&parseFloat(getComputedStyle(t).transitionDuration)>0))},[]);return t(i.Item,{ref:C,value:h,disabled:w,className:["mp-accordion__item flex flex-col",_??""].filter(Boolean).join(" "),...z,children:[t(i.Header,{className:"m-0 flex w-full items-center font-[inherit]",children:[t(i.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",B,I,s[M],P?"":"rounded-mp-sm","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].filter(Boolean).join(" "),children:[e(o,{}),d(N)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:N}):null,t("span",{className:"mp-accordion__text flex min-w-0 flex-1 flex-col",children:[d(v)?e("span",{className:`mp-accordion__title truncate ${u[M]}`,children:v}):null,d(x)?e("span",{className:`mp-accordion__subtitle text-mp-on-surface-variant truncate ${c}`,children:x}):null]}),e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(a,{icon:r,size:l[M]})})]}),d(y)?e("span",{className:`flex shrink-0 items-center ${B}`,children:y}):null]}),e(i.Panel,{ref:S,className:[g,V?"data-open:overflow-visible":""].filter(Boolean).join(" "),onTransitionEnd:e=>{e.target===R.current&&"height"===e.propertyName&&F(R.current.hasAttribute("data-open"))},children:e("div",{className:["min-w-0",m[M],"text-mp-on-surface-variant",B,j[M]].join(" "),children:k})})]})});

package/dist/components/alert/MPAlert.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types.js';
+import type { MPColor, MPDensity, MPSize, MPTransition, MPVariant } from '../../types.js';
 /**
  * How loudly an alert announces itself.
  *
@@ -45,6 +45,16 @@ export interface MPAlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      * @default 'md'
      */
     size?: MPSize;
+    /**
+     * Takes room out of the message without shrinking it.
+     *
+     * The step that matters on an alert is the first one. A page that shows
+     * several at once — a form reporting four invalid fields, a queue of
+     * warnings — stacks a lot of padding, and `-1` gives most of it back while
+     * leaving the text at the size a message has to be read at.
+     * @default 0
+     */
+    density?: MPDensity;
     /**
      * The heading line. With it the alert is two-part — a headline and the detail
      * under it; without it the whole thing is one line.
@@ -76,7 +86,19 @@ export interface MPAlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      * their own.
      */
     live?: MPAlertLive;
-    /** Passing it is what makes the dismiss button appear. */
+    /**
+     * Passing it is what makes the dismiss button appear.
+     *
+     * **It fires when the alert has finished leaving, not when the × is
+     * pressed.** An alert is in the flow of the page, so taking one out moves
+     * everything under it — and the caller owns the mount, which means an alert
+     * whose callback fired on the press had already been unmounted by the time
+     * there was anything to animate. So the press starts the exit and this is the
+     * end of it, roughly 200ms later, which is the moment `{open && <MPAlert/>}`
+     * wants to hear about.
+     *
+     * The event is the press that started it, held rather than re-created.
+     */
     onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * The accessible name of the dismiss button. Defaults to the word for
@@ -90,6 +112,15 @@ export interface MPAlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>
     locale?: string;
     /** The message. */
     children?: React.ReactNode;
+    /**
+     * An entrance, run once as it mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     */
+    transition?: MPTransition;
 }
 /**
  * A message about something that happened, set into the page it is about.

package/dist/components/alert/MPAlert.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{CloseIcon as o,ErrorIcon as i,InfoIcon as l}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{useMPLocale as s,useMPMessages as c}from"../../internal/locale.js";import{ALERT as m}from"../../internal/messages/alert.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{CONTROL_ICON as p,hasContent as d,PROSE_TEXT as u,SHEET_GAP as x,SHEET_PAD as v,SHEET_TITLE as h,STACK_GAP as b}from"../../internal/scale.js";import{useMPColor as j,useMPSize as g}from"../../internal/config.js";const y={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-on-surface",outlined:"border-mp-outline border bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"},N={filled:"",tonal:"",elevated:"text-(--_mp-accent)",outlined:"text-(--_mp-accent)",text:"text-(--_mp-accent)"},_={filled:"",tonal:"",elevated:"text-mp-on-surface-variant",outlined:"text-mp-on-surface-variant",text:"text-mp-on-surface-variant"},w={primary:"polite",secondary:"polite",tertiary:"polite",error:"assertive"},z={assertive:"alert",polite:"status",off:void 0};export const MPAlert=/*@__PURE__*/n.forwardRef(function({variant:n="tonal",color:k,size:B,title:C,icon:L,action:M,live:P,onClose:A,closeLabel:I,locale:R,className:S,style:$,children:q,...D},E){const F=j(k),G=g(B),H=s(R),J=c(m,H),K=N[n],O=d(C),Q=void 0===L?e(r,{icon:"error"===F?i:l,size:p[G]}):L;return t("div",{ref:E,role:z[P??w[F]],"data-mp-size":G,"data-mp-variant":n,className:["mp-alert rounded-mp-md flex w-full items-start","box-border",v[G],x[G],u[G],y[n],S??""].filter(Boolean).join(" "),style:{...a(F),...$},...D,children:[d(Q)?e("span",{className:["flex h-[1lh] shrink-0 items-center",K].filter(Boolean).join(" "),children:Q}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${b[G]}`,children:[O?e("div",{className:[h[G],K].filter(Boolean).join(" "),children:C}):null,d(q)?e("div",{className:O?_[n]:void 0,children:q}):null]}),d(M)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:M}):null,A?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:t("button",{type:"button","aria-label":I??J.dismiss,onClick:A,className:["group rounded-mp-full relative -m-1 flex size-8 cursor-pointer items-center","justify-center bg-transparent text-inherit","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(f,{}),e(r,{icon:o,size:p[G]})]})}):null]})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{CloseIcon as i,ErrorIcon as o,InfoIcon as a}from"../../constants/icons.js";import{accentSlots as l}from"../../internal/accent.js";import{transitionProps as s}from"../../internal/transition.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{ALERT as d}from"../../internal/messages/alert.js";import{inertProps as p}from"../../internal/inert.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{CONTROL_ICON as u,hasContent as x,PROSE_TEXT as v,SHEET_GAP as h,SHEET_TITLE as j,STACK_GAP as b}from"../../internal/scale.js";import{sheetPad as y}from"../../internal/density.js";import{useMPColor as g,useMPDensity as N,useMPSize as w}from"../../internal/config.js";const _={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-on-surface",outlined:"border-mp-outline border bg-transparent text-mp-on-surface",text:"bg-transparent text-mp-on-surface"},z={filled:"",tonal:"",elevated:"text-(--_mp-accent)",outlined:"text-(--_mp-accent)",text:"text-(--_mp-accent)"},k={filled:"",tonal:"",elevated:"text-mp-on-surface-variant",outlined:"text-mp-on-surface-variant",text:"text-mp-on-surface-variant"},C={primary:"polite",secondary:"polite",tertiary:"polite",error:"assertive"},B={assertive:"alert",polite:"status",off:void 0};export const MPAlert=/*@__PURE__*/n.forwardRef(function({variant:L="tonal",color:R,size:S,density:E,title:M,icon:P,action:T,live:A,onClose:D,closeLabel:F,locale:I,transition:$,className:q,style:G,children:H,...J},K){const O=s($),Q=g(R),U=w(S),V=N(E),W=c(I),X=m(d,W),[Y,Z]=n.useState(!1),ee=n.useRef(null),te=n.useRef(null),ne=n.useCallback(()=>{const e=ee.current;ee.current=null,e&&D?.(e)},[D]);n.useLayoutEffect(()=>{const e=te.current;Y&&e&&0===parseFloat(getComputedStyle(e).transitionDuration)&&ne()},[Y,ne]);const re=z[L],ie=x(M),oe=void 0===P?e(r,{icon:"error"===Q?o:a,size:u[U]}):P,ae=t("div",{ref:K,role:B[A??C[Q]],"data-mp-size":U,"data-mp-variant":L,...p(Y),className:["mp-alert rounded-mp-md flex w-full items-start","box-border",y(U,V),h[U],v[U],_[L],O.className,q??""].filter(Boolean).join(" "),style:{...l(Q),...O.style,...G},...J,children:[x(oe)?e("span",{className:["flex h-[1lh] shrink-0 items-center",re].filter(Boolean).join(" "),children:oe}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${b[U]}`,children:[ie?e("div",{className:[j[U],re].filter(Boolean).join(" "),children:M}):null,x(H)?e("div",{className:ie?k[L]:void 0,children:H}):null]}),x(T)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:T}):null,D?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:t("button",{type:"button","aria-label":F??X.dismiss,disabled:Y,onClick:e=>{ee.current=e,Z(!0)},className:["group rounded-mp-full relative -m-1 flex size-8 cursor-pointer items-center","justify-center bg-transparent text-inherit","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(f,{}),e(r,{icon:i,size:u[U]})]})}):null]});return D?e("div",{ref:te,className:["mp-alert__reveal grid transition-[grid-template-rows,opacity]","duration-(--mp-sys-motion-duration-short4)","ease-(--mp-sys-motion-easing-emphasized-accelerate)","motion-reduce:transition-none",Y?"grid-rows-[0fr] opacity-0":"grid-rows-[1fr]"].join(" "),onTransitionEnd:e=>{Y&&"grid-template-rows"===e.propertyName&&e.target===e.currentTarget&&ne()},children:e("div",{className:"min-h-0 "+(Y?"overflow-hidden":""),children:ae})}):ae});

package/dist/components/anchor/MPAnchor.d.ts

@@ -0,0 +1,107 @@
+import * as React from 'react';
+import type { MPColor, MPDensity, MPSize } from '../../types.js';
+/** One heading in the list. */
+export interface MPAnchorItem {
+    /**
+     * The fragment it points at — `#getting-started`. The `id` it names is what
+     * the list watches, so a heading with no `id` cannot be tracked.
+     */
+    href: string;
+    /** What the row says. */
+    label: React.ReactNode;
+    /**
+     * How deep the heading sits, counted from `0`.
+     *
+     * Only the indent depends on it. The list itself stays flat, because a nested
+     * `<ul>` inside a table of contents is announced as a list inside a list, and
+     * a reader who has just been told there are twelve headings does not need to
+     * be told again that four of them are their own list.
+     * @default 0
+     */
+    depth?: number;
+}
+export interface MPAnchorProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'color' | 'children'> {
+    /** The headings, in the order they appear on the page. */
+    items: readonly MPAnchorItem[];
+    /**
+     * Which row is marked, by its `href`. Given, the list stops watching the
+     * scroll and says what it is told.
+     */
+    activeHref?: string | null;
+    /** Called whenever the row the reader is in changes. */
+    onActiveChange?: (href: string | null) => void;
+    /**
+     * How far below the top of the scrollport a heading counts as reached, in
+     * pixels.
+     *
+     * Set it to the height of a sticky header, or the heading under the bar is
+     * never the one marked: it has scrolled past the top of the page and is still
+     * behind the header, so the reader is looking at the section before it.
+     * @default 0
+     */
+    offset?: number;
+    /**
+     * What scrolls, when it is not the document. The element an `MPPageLayout`
+     * with `scroll="content"` puts the page inside, for instance.
+     */
+    container?: React.RefObject<HTMLElement | null>;
+    /**
+     * Draws the rail down the leading edge, with the row the reader is in lit.
+     * @default true
+     */
+    rail?: boolean;
+    /** The size of a row's text, and how far one level of heading is set in. */
+    size?: MPSize;
+    /** Which accent family the marked row reads. @default 'primary' */
+    color?: MPColor;
+    /** Tightens the rows and nothing else. @default 0 */
+    density?: MPDensity;
+    /**
+     * Which language the `<nav>` is named in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** The accessible name of the `<nav>`. Defaults to the wording in `locale`. */
+    label?: string;
+}
+/**
+ * The headings of the page being read, with the one the reader is in marked.
+ *
+ * ```tsx
+ * <MPAnchor
+ *   items={[
+ *     { href: '#install', label: 'Install' },
+ *     { href: '#usage', label: 'Usage' },
+ *     { href: '#options', label: 'Options', depth: 1 }
+ *   ]}
+ * />
+ * ```
+ *
+ * ## It is a `<nav>` of real links
+ *
+ * Which is what makes it work before any of the tracking runs: the rows jump to
+ * their headings with JavaScript turned off, they are in the link list a screen
+ * reader can pull up, and a middle-click opens one in a tab. Watching the scroll
+ * is added on top rather than being what holds it up.
+ *
+ * The marked row carries `aria-current="location"` rather than `"true"`. That
+ * value means "where the reader is within a set of links", which is exactly what
+ * a table of contents reports and is not what `"true"` — the current *page* —
+ * says.
+ *
+ * ## The headings are given, not scraped
+ *
+ * `items` is a list the caller already has. Whatever produced the page — an MDX
+ * pipeline, a CMS, a route's own frontmatter — knows its own headings and their
+ * ids, and a component that went looking for `<h2>`s in the document would be
+ * guessing at which of them were content and which were chrome.
+ *
+ * ## Nothing slides
+ *
+ * The rail's lit segment is a border on the row rather than a marker that
+ * travels between rows. A thing moving under a reader who is already moving is
+ * the one animation a table of contents should not have, and it is also the one
+ * that cannot be got right — the marker and the scroll are answering the same
+ * gesture at two different speeds.
+ */
+export declare const MPAnchor: React.ForwardRefExoticComponent<MPAnchorProps & React.RefAttributes<HTMLElement>>;

package/dist/components/anchor/MPAnchor.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent.js";import{useMPLocale as t,useMPMessages as o}from"../../internal/locale.js";import{ANCHOR as i}from"../../internal/messages/anchor.js";import{CONTROL_TEXT as l}from"../../internal/scale.js";import{useMPColor as s,useMPDensity as a,useMPSize as c}from"../../internal/config.js";const m={xs:"py-1",sm:"py-1",md:"py-1.5",lg:"py-2",xl:"py-2.5"},p={xs:["py-0.5","py-0.5","py-0.5"],sm:["py-0.5","py-0.5","py-0.5"],md:["py-1","py-0.5","py-0.5"],lg:["py-1.5","py-1","py-0.5"],xl:["py-2","py-1.5","py-1"]};function u(e,n){return 0===n?m[e]:p[e][-n-1]}const d={xs:8,sm:10,md:12,lg:14,xl:16};export const MPAnchor=/*@__PURE__*/n.forwardRef(function({items:m,activeHref:p,onActiveChange:f,offset:h=0,container:y,rail:v=!0,size:g,color:x,density:b,locale:w,label:j,className:E,style:B,..._},H){const N=c(g),R=s(x),z=a(b),A=o(i,t(w)),[L,C]=n.useState(null),k=void 0!==p,F=k?p:L,I=n.useRef(f);I.current=f;const S=n.useRef(m);S.current=m;const q=m.map(e=>e.href).join(" ");return n.useEffect(()=>{if(k)return;const e=y?.current??window;let n=0,r=null;const t=()=>{n=0;const e=function(e,n,r){const t=(r?r.getBoundingClientRect().top:0)+n+1;let o=null;for(const n of e){const e=document.getElementById(n.href.replace(/^#/,""));e&&e.getBoundingClientRect().top<=t&&(o=n.href)}return(r?r.scrollTop+r.clientHeight>=r.scrollHeight-2:window.innerHeight+window.scrollY>=document.documentElement.scrollHeight-2)&&e.length>0?e[e.length-1].href:o}(S.current,h,y?.current??null);e!==r&&(r=e,C(e),I.current?.(e))},o=()=>{0===n&&(n=requestAnimationFrame(t))};return t(),e.addEventListener("scroll",o,{passive:!0}),window.addEventListener("resize",o,{passive:!0}),()=>{0!==n&&cancelAnimationFrame(n),e.removeEventListener("scroll",o),window.removeEventListener("resize",o)}},[q,h,y,k]),e("nav",{ref:H,"aria-label":j??A.label,"data-mp-size":N,className:["mp-anchor min-w-0",E??""].filter(Boolean).join(" "),style:{...r(R),...B},..._,children:e("ul",{className:["mp-anchor__list m-0 flex list-none flex-col p-0",v?"border-mp-outline-variant border-s":""].filter(Boolean).join(" "),children:m.map(n=>e("li",{className:v?"-ms-px":void 0,children:e("a",{href:n.href,"aria-current":F===n.href?"location":void 0,className:["mp-anchor__link block min-w-0 truncate no-underline","text-mp-on-surface-variant hover:text-mp-on-surface",l[N],u(N,z),"transition-[color,border-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","aria-[current=location]:text-(--_mp-accent) aria-[current=location]:font-medium",v?"border-s border-transparent ps-3 aria-[current=location]:border-(--_mp-accent)":"","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:rounded-mp-xs focus-visible:outline-solid outline-none"].filter(Boolean).join(" "),style:{marginInlineStart:n.depth?n.depth*d[N]:void 0},children:n.label})},n.href))})})});

package/dist/components/anchor/index.d.ts

@@ -0,0 +1,2 @@
+export { MPAnchor } from './MPAnchor.js';
+export type { MPAnchorItem, MPAnchorProps } from './MPAnchor.js';

package/dist/components/anchor/index.js

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateProps, MPSide } from '../../types.js';
-export interface MPAnimateAppearProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { MPAnimateProps, MPAnimateTimelineProps, MPSide } from '../../types.js';
+export interface MPAnimateAppearProps extends MPAnimateProps, MPAnimateTimelineProps, 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.

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

@@ -1,2 +1,2 @@
 "use client";
-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.js";export const MPAnimateAppear=/*@__PURE__*/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}})});
+import*as e from"react";import{useRender as a}from"@base-ui/react/use-render";import{ANIMATION_CLASS as r,ANIM_BASE as t,isInfinite as n,slideOffsets as i,staggerChildren as s,useAnimationRun as o}from"../../internal/animate.js";export const MPAnimateAppear=/*@__PURE__*/e.forwardRef(function({duration:e,delay:d=0,easing:m,repeat:p=1,alternate:l,paused:c,trigger:f="mount",play:g,once:u=!0,threshold:y=.2,stagger:h=80,from:v="bottom",distance:x="0.75rem",fade:b=!0,reverse:w=!1,timeline:A,range:N,render:$,className:j,style:M,children:P,...R},_){const k=o({trigger:f,play:g,once:u,threshold:y,paused:c,infinite:n(p)}),q="view"===A?c?"paused":"running":k.state,{x:z,y:B}=i(v,x),C=s(P,`${t} ${r.slide}`,{effect:"slide",duration:e,delay:d,easing:m,repeat:p,alternate:l,x:z,y:B,opacity:b?0:1,timeline:A,range:N},{stagger:h,reverse:w});return a({render:$,ref:[_,k.ref],props:{...R,className:j,style:{"--_mp-anim-state":q,...M},...k.handlers,"data-mp-animation":"appear","data-mp-state":q,children:C}})});

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPAnimateProps } from '../../types.js';
-export interface MPAnimateBlinkProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps } from '../../types.js';
+export interface MPAnimateBlinkProps extends MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps, 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.

package/dist/components/animate-blink/MPAnimateBlink.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 MPAnimateBlink=/*@__PURE__*/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 j=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,j.ref],props:{...N,className:[j.className,y].filter(Boolean).join(" "),style:{...j.style,...g},...j.props,children:h}})});
+"use client";
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{isInfinite as t,useAnimateElement as n}from"../../internal/animate.js";export const MPAnimateBlink=/*@__PURE__*/e.forwardRef(function({duration:e,delay:a=0,easing:i,repeat:s="infinite",alternate:o,paused:l,trigger:d="mount",play:p,once:c=!0,threshold:m=.2,stagger:f=0,durationStep:g,reverse:u,timeline:h,range:y,min:N=0,render:b,className:j,style:k,children:v,...B},S){const w=n({effect:"blink",duration:e,delay:a,easing:i,repeat:s,alternate:o,opacity:N,trigger:d,play:p,once:c,threshold:m,paused:l,infinite:t(s),stagger:f,durationStep:g,reverse:u,timeline:h,range:y,children:v});return r({render:b,ref:[S,w.ref],props:{...B,className:[w.className,j].filter(Boolean).join(" "),style:{...w.style,...k},...w.props,children:w.children}})});

package/dist/components/animate-counter/MPAnimateCounter.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { MPAnimateProps, MPAnimateTimelineProps } from '../../types.js';
+export interface MPAnimateCounterProps extends Omit<MPAnimateProps, 'alternate' | 'repeat'>, MPAnimateTimelineProps, Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
+    /** The number it settles on. */
+    value: number;
+    /**
+     * Where it starts.
+     * @default 0
+     */
+    from?: number;
+    /**
+     * How the number is written — anything `Intl.NumberFormat` takes, so a
+     * currency, a percentage or a compact notation is a prop rather than a
+     * template.
+     *
+     * Formatted rather than concatenated because the pieces of a number are not
+     * in the same order everywhere: `1 234,56 €` and `$1,234.56` are the same
+     * value, and a `prefix`/`suffix` pair can only write one of them.
+     */
+    options?: Intl.NumberFormatOptions;
+    /**
+     * Which language it is written in. Falls back to the browser's own, which is
+     * what `Intl` does when nobody says.
+     */
+    locale?: string;
+    /**
+     * The whole formatter, for the numbers `Intl` has no option for — an ordinal,
+     * a score out of ten, a duration. Overrides `options` and `locale`.
+     */
+    format?: (value: number) => string;
+}
+/**
+ * A number counting up to its value.
+ *
+ * The one effect in this set that **cannot** be a keyframe on its own, because
+ * text is not an animatable property: every frame needs a fresh interpolation
+ * put through a formatter.
+ *
+ * ## It is still a CSS animation
+ *
+ * The obvious implementation is a `requestAnimationFrame` loop with its own
+ * clock, its own easing and its own idea of what *paused* means — three things
+ * that have to be kept in step with the rest of the library and will not be.
+ *
+ * So the animation here is a real one, over a registered custom property, and
+ * the frame loop does nothing but **read** it. `duration`, `delay`, the easing
+ * token, `trigger`, `paused`, `timeline="view"` and `prefers-reduced-motion`
+ * are then the same machinery every other effect uses rather than a second
+ * implementation of each. A counter waiting to be scrolled to shows `from`
+ * rather than the answer, for free: a paused animation with `fill-mode: both`
+ * is sitting on its own first frame.
+ *
+ * ## What a screen reader gets
+ *
+ * The final number, once, out of a clipped box — the counting copy is
+ * `aria-hidden`. A live count would be announced sixty times a second, and the
+ * one thing a reader wants from a statistic is the statistic.
+ *
+ * ## In a background tab
+ *
+ * `requestAnimationFrame` does not run in a tab nobody is looking at, so a
+ * counter left in the background sits at `from` and jumps to its value on
+ * return, having been "running" the whole time. That is correct — the reader
+ * sees the number they came back for — and it is worth knowing before it is
+ * reported as a bug.
+ */
+export declare const MPAnimateCounter: React.ForwardRefExoticComponent<MPAnimateCounterProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/animate-counter/MPAnimateCounter.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useAnimateElement as n}from"../../internal/animate.js";import{VISUALLY_HIDDEN as a}from"../../internal/visually-hidden.js";export const MPAnimateCounter=/*@__PURE__*/r.forwardRef(function({value:s,from:i=0,options:o,locale:m,format:l,duration:u,delay:c=0,easing:f,paused:p,trigger:d="mount",play:y,once:g=!0,threshold:h=.2,timeline:N,range:F,className:j,style:A,...b},x){const q=n({effect:"count",effectClass:"mp-anim-count",duration:u,delay:c,easing:f,repeat:1,from:i,to:s,trigger:d,play:y,once:g,threshold:h,paused:p,infinite:!1,timeline:N,range:F}),v=r.useMemo(()=>{if(l)return l;const e=new Intl.NumberFormat(m,o);return t=>e.format(t)},[l,m,o]),w=r.useRef(null),[C,S]=r.useState(i);return r.useEffect(()=>{const e=w.current;if(!e||"undefined"==typeof requestAnimationFrame)return;let t=0,r=!0;const n=()=>{if(!r)return;const a=getComputedStyle(e).getPropertyValue("--mp-count"),s=Number.parseFloat(a);Number.isFinite(s)&&S(s);("view"===N||e.getAnimations().some(e=>"finished"!==e.playState))&&(t=requestAnimationFrame(n))};return t=requestAnimationFrame(n),()=>{r=!1,cancelAnimationFrame(t)}},[q.style,q.props["data-mp-state"],N]),t("span",{ref:e=>{w.current=e,q.ref(e),"function"==typeof x?x(e):x&&(x.current=e)},className:[q.className,j].filter(Boolean).join(" "),style:{...q.style,...A},...q.props,...b,children:[e("span",{className:a,children:v(s)}),e("span",{"aria-hidden":"true",className:"tabular-nums",children:v(C)})]})});

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

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

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

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

package/dist/components/animate-fade/MPAnimateFade.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 MPAnimateFadeProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { MPAnimateMode, MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps } from '../../types.js';
+export interface MPAnimateFadeProps extends MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps, 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.

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

package/dist/components/animate-float/MPAnimateFloat.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAnimateProps, MPAnimateStaggerProps } from '../../types.js';
+export interface MPAnimateFloatProps extends Omit<MPAnimateProps, 'alternate'>, MPAnimateStaggerProps, React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How far it rises at the top of the drift — a number in pixels, or any CSS
+     * length. Small on purpose: this says *not fixed down*, and anything a reader
+     * can measure says *moving* instead.
+     * @default '0.625rem'
+     */
+    distance?: number | string;
+    /**
+     * How far it wanders to either side. Less than `distance`, so the path reads
+     * as a drift rather than as a circle.
+     * @default '0.375rem'
+     */
+    sway?: number | string;
+    /**
+     * How far it leans at the extremes, in degrees. `0` by default — a tilt is
+     * the difference between something floating and something *tumbling*, and
+     * anything with text on it wants none of it.
+     * @default 0
+     */
+    tilt?: number;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * An endless, slow drift.
+ *
+ * The only thing in this set that says **not fixed to the page**. A card that
+ * drifts is a card that is above the sheet rather than printed on it, and no
+ * amount of shadow says that as plainly as half a centimetre of unhurried
+ * travel — a shadow is a claim about depth, and this is depth behaving.
+ *
+ * It has no arrival, which is what keeps it out of the shared effect table: the
+ * six entrances go from a state to the element's own, and this one goes nowhere
+ * and comes back. Its keyframe is its own.
+ *
+ * ## Never on a control
+ *
+ * A button that drifts cannot be pointed at. The pointer arrives where the
+ * button was, the button has moved four pixels, and the reader has to track a
+ * target that is running away from them — which is precisely the failure the
+ * library's rule against transforming controls exists to prevent. This is for
+ * decoration: an illustration, a hero graphic, a badge on a marketing page.
+ *
+ * It is also for one at a time. Six things drifting on their own cycles is a
+ * page that will not sit still to be read, and there is no way to look at any
+ * one of them.
+ */
+export declare const MPAnimateFloat: React.ForwardRefExoticComponent<MPAnimateFloatProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-float/MPAnimateFloat.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 t,lengthValue as a,useAnimateElement as n}from"../../internal/animate.js";export const MPAnimateFloat=/*@__PURE__*/e.forwardRef(function({duration:e=6e3,delay:s=0,easing:i="standard",repeat:o="infinite",paused:l,trigger:d="mount",play:c,once:f=!0,threshold:p=.2,stagger:m=0,durationStep:g,reverse:u,distance:y="0.625rem",sway:h="0.375rem",tilt:N=0,render:j,className:v,style:w,children:x,...S},b){const A=n({effect:"float",effectClass:"mp-anim-float",duration:e,delay:s,easing:i,repeat:o,x:a(h),y:a(y),angle:`${N}deg`,trigger:d,play:c,once:f,threshold:p,paused:l,infinite:t(o),stagger:m,durationStep:g,reverse:u,children:x});return r({render:j,ref:[b,A.ref],props:{...S,className:[A.className,v].filter(Boolean).join(" "),style:{...A.style,...w},...A.props,children:A.children}})});

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

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

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

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

package/dist/components/animate-grow/MPAnimateGrow.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 MPAnimateGrowProps extends MPAnimateProps, React.ComponentPropsWithoutRef<'div'> {
+import type { MPAnimateMode, MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps } from '../../types.js';
+export interface MPAnimateGrowProps extends MPAnimateProps, MPAnimateStaggerProps, MPAnimateTimelineProps, 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

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