material-plus-ui 0.0.1 → 1.1.0

package/README.md

@@ -1,3 +1,9 @@
+<!-- An absolute URL, not `docs/public/logo-large.png`: this file is the package
+     page on npm as well as the front page on GitHub, `.npmignore` keeps `docs/`
+     out of the tarball, and npm resolves a relative image against the published
+     package before it falls back to anything else. -->
+<img src="https://raw.githubusercontent.com/jooy2/material-plus/main/docs/public/logo-large.png" alt="Material Plus" width="96" height="96">
+
 # Material Plus
 
 [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/jooy2/material-plus/blob/main/LICENSE) ![Programming Language Usage](https://img.shields.io/github/languages/top/jooy2/material-plus) [![npm downloads](https://img.shields.io/npm/dm/material-plus-ui.svg)](https://www.npmjs.com/package/material-plus-ui) [![npm latest package](https://img.shields.io/npm/v/material-plus-ui/latest.svg)](https://www.npmjs.com/package/material-plus-ui) ![npm bundle size](https://img.shields.io/bundlephobia/min/material-plus-ui)
@@ -8,11 +14,12 @@ Live previews and full props for every component. This README is just the quick
 
 ---
 
-**Material Plus is a React component library that extends Material UI.** It is the pile of components you end up writing in every MUI project — the field that handles IME composition properly, the icon wrapper that agrees with your set — extracted, documented and tested.
+**Material Plus is a React component library implementing Material Design 3.** It is the pile of components you end up writing in every Material project — the field that handles IME composition properly, the icon wrapper that agrees with your set — extracted, documented and tested.
 
-It is not a replacement for `@mui/material` and does not try to be one. Every component is built out of MUI, reads your `ThemeProvider`, and sits at the same height as the MUI control next to it in the same form.
+It follows the specification directly rather than wrapping somebody's implementation of it, so its colour roles, type scale and shapes are the ones the spec names.
 
-- **MUI is a peer, not a copy.** `@mui/material` and Emotion stay your dependencies, so there is never a second MUI in the bundle or a second theme in the tree.
+- **Themed in one line.** Set `--mp-source-color` and every colour role follows, the way Material generates a scheme from a source colour. No provider, no theme object, no re-render.
+- **It coexists.** Nothing here is page-level — no reset, no provider, no global styling — and it reads the `--md-sys-color-*` tokens your page already has if they are there. A project already running Material keeps its own setup.
 - **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.
 - **ESM only**, TypeScript declarations included, tree-shakeable — every component compiles to its own module.
@@ -42,15 +49,12 @@ pnpm add material-plus-ui
 
 ### Peer dependencies
 
-You already have all of these in an MUI project:
-
-| Package                             | Versions     |
-| ----------------------------------- | ------------ |
-| `@mui/material`                     | 6, 7, 8 or 9 |
-| `@emotion/react`, `@emotion/styled` | 11           |
-| `react`, `react-dom`                | 18 or 19     |
+| Package              | Versions |
+| -------------------- | -------- |
+| `@base-ui/react`     | 1        |
+| `react`, `react-dom` | 18 or 19 |
 
-Only MUI 9 is exercised in CI, though the components use APIs stable since MUI 5.
+`@base-ui/react` is a peer rather than a dependency because it carries React context: a `Form` of yours has to be able to see a field of ours, and that only works with one copy in the tree.
 
 ### Setup
 
@@ -60,7 +64,7 @@ Add one line to your app's CSS entry point:
 @import 'material-plus-ui/styles.css';
 ```
 
-This is finished CSS — no PostCSS plugin, no `@source`, no build-side configuration. It deliberately contains **no reset**: `CssBaseline` from `@mui/material` is already one, and Tailwind's Preflight would restyle every MUI component on your page rather than only the ones from here.
+This is finished CSS — no PostCSS plugin, no `@source`, no build-side configuration. It deliberately contains **no reset**, and no page-level styling of any kind: a component resets what it owns on the element it owns, so whatever your page already does stays in charge.
 
 If Tailwind v4 is already in your project, import the token sheet instead:
 
@@ -71,39 +75,46 @@ If Tailwind v4 is already in your project, import the token sheet instead:
 
 ## Usage
 
-Material Plus components go anywhere an MUI component goes, inside the same provider.
+There is no provider. Import a component and render it.
 
 ```tsx
 import { useState } from 'react';
-import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { MPTextField, MPIcon, ICONS } from 'material-plus-ui';
 
-const theme = createTheme({ palette: { mode: 'light' } });
-
 export default function App() {
   const [email, setEmail] = useState('');
 
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <MPTextField
-        label="Email"
-        type="email"
-        value={email}
-        onChange={setEmail}
-        startIcon={<MPIcon icon={ICONS.search} size={18} />}
-      />
-    </ThemeProvider>
+    <MPTextField
+      label="Email"
+      type="email"
+      value={email}
+      onChange={setEmail}
+      startIcon={<MPIcon icon={ICONS.search} size={18} />}
+    />
   );
 }
 ```
 
+## Theming
+
+Material generates a whole scheme from one source colour, and so does this.
+
+```css
+:root {
+  --mp-source-color: #7c3aed;
+}
+```
+
+Dark mode follows `prefers-color-scheme` on its own; `data-mp-scheme="dark"` or `.dark` on any element drives it yourself. To disagree with one generated colour, set that role — `--mp-sys-color-outline` — and to follow tokens your page already defines, do nothing: `--md-sys-color-*` is read where it is present.
+
+Full details, including scoped and runtime theming, are in [the theming guide](https://material-plus.cdget.com/guide/getting-started#theming).
+
 ## Components
 
 | Component | What it is |
 | --- | --- |
-| [`MPTextField`](https://material-plus.cdget.com/components/inputs/text-field) | A text field that survives an IME, with the label, helper text, adornments and password toggle already assembled. |
+| [`MPTextField`](https://material-plus.cdget.com/components/inputs/text-field) | An outlined text field that survives an IME, with the label, supporting text, adornments and password toggle already assembled. |
 | [`MPIcon`](https://material-plus.cdget.com/components/display/icon) | A glyph at a known size in a known colour, from whichever icon set you use. |
 
 ### Why `MPTextField` exists

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

@@ -0,0 +1,115 @@
+import * as React from 'react';
+import type { MPSize, MPVariant } from '../../types';
+export interface MPAccordionProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'> {
+    /**
+     * Whether more than one section may be open at once.
+     *
+     * `false` by default, which is the whole reason an accordion is not just a
+     * stack of [collapsibles](./collapsible): closing the last one as the next
+     * opens is what keeps the page from growing under the reader.
+     * @default false
+     */
+    multiple?: boolean;
+    /** Which sections are open. Use with `onValueChange` for a controlled accordion. */
+    value?: (string | number)[];
+    /** Which start open, for an uncontrolled one. */
+    defaultValue?: (string | number)[];
+    onValueChange?: (value: (string | number)[]) => void;
+    /**
+     * Separates the sections with a hairline rather than with space.
+     *
+     * On by default, which is the other way round from `MPList`. A list of tiles
+     * is a list; an accordion of tiles is a stack of cards that happen to fold,
+     * and the rule is what says the sections are parts of one thing.
+     * @default true
+     */
+    dividers?: boolean;
+    /** Unavailable. Every section stops answering. */
+    disabled?: boolean;
+    /**
+     * How much surface the sheet paints.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * The room inside every section, and the type scale of its header and body.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Keeps closed panels in the DOM so the browser's own page search can find and
+     * open them. Overrides `keepMounted`.
+     * @default false
+     */
+    hiddenUntilFound?: boolean;
+    /**
+     * Keeps closed panels in the DOM. For content that is expensive to build, or
+     * that holds form state which should survive being folded away.
+     * @default false
+     */
+    keepMounted?: boolean;
+    /** The `MPAccordionItem`s. */
+    children?: React.ReactNode;
+}
+export interface MPAccordionItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'onChange'> {
+    /**
+     * Identifies the section to `value` / `defaultValue`. Base UI generates one
+     * when it is left out, which is enough for an accordion nobody drives from
+     * code.
+     */
+    value?: string | number;
+    /** The heading on the fold. */
+    title?: React.ReactNode;
+    /** A second line under it, one step down the type scale and muted. */
+    subtitle?: React.ReactNode;
+    /** Content before the title — a glyph, a status dot, a count. */
+    startIcon?: React.ReactNode;
+    /**
+     * A control pinned to the end of the header, **outside** the trigger.
+     *
+     * Deliberately outside it: a header that both folds and holds a switch has two
+     * things to press, and a `<button>` inside a `<button>` is markup the browser
+     * rewrites on parse. The same shape `MPCollapsible` and `MPListItem` use.
+     */
+    action?: React.ReactNode;
+    /** Unavailable. This section stops folding; the rest keep working. */
+    disabled?: boolean;
+    /** The body. */
+    children?: React.ReactNode;
+}
+/**
+ * A stack of sections, one of which is open.
+ *
+ * Base UI owns the parts that are genuinely hard: the `<button>`/`region`
+ * pairing and the `aria-controls` / `aria-expanded` wiring between them, the set
+ * of open values, and measuring each panel so it has a height to animate from.
+ * What is here is the surface, the ladders and Material's state layer.
+ *
+ * ## Why this is not a stack of collapsibles
+ *
+ * Because of `multiple`. A [collapsible](./collapsible) has an `open` of its
+ * own and answers to nobody; an accordion owns the *set*, and closing the last
+ * section as the next one opens is the whole reason the component exists — it is
+ * what keeps the page from growing under the reader. Sections that are genuinely
+ * unrelated should be collapsibles, and a component that closed one because the
+ * other opened would be inventing a relationship the page does not have.
+ *
+ * ## The surface stays neutral
+ *
+ * Even on `filled`, which here is `surface-container-highest` — MD3's own filled
+ * card — rather than the accent. An accordion is a box holding somebody else's
+ * content, and dyeing the box dyes their content's background. That is also why
+ * there is no `color`: nothing would read it.
+ */
+export declare const MPAccordion: React.ForwardRefExoticComponent<MPAccordionProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * One section.
+ *
+ * The header is always a row, and what is inside it is a real `<button>`
+ * covering the title and the chevron, with `action` sitting outside that button
+ * as a control of its own. The same shape `MPChip` and `MPListItem` use, for the
+ * same two reasons: a `<div>` carrying a click handler is invisible to a
+ * keyboard, and a `<button>` inside a `<button>` is markup the browser rewrites
+ * on parse.
+ */
+export declare const MPAccordionItem: React.ForwardRefExoticComponent<MPAccordionItemProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/accordion/MPAccordion.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Accordion as i}from"@base-ui/react/accordion";import{MPIcon as a}from"../icon/MPIcon";import{ChevronDownIcon as r}from"../../constants/icons";import{MPStateLayer as o}from"../../internal/StateLayer";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 f,SHEET_TITLE as p}from"../../internal/scale";import{CONTAINER_SURFACE as h}from"../../internal/surface";const x=t.createContext({size:"md",dividers:!0}),v=["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(" "),b={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPAccordion=t.forwardRef(function({multiple:n=!1,value:a,defaultValue:r,onValueChange:o,dividers:s=!0,disabled:l=!1,variant:d="outlined",size:c="md",hiddenUntilFound:m=!1,keepMounted:u=!1,className:f,children:p,...v},b){const N=t.useMemo(()=>({size:c,dividers:s}),[c,s]);return e(x.Provider,{value:N,children:e(i.Root,{ref:b,multiple:n,value:a,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:m,keepMounted:u,"data-mp-size":c,"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",f??""].filter(Boolean).join(" "),...v,children:p})})});export const MPAccordionItem=t.forwardRef(function({value:h,title:N,subtitle:g,startIcon:j,action:w,disabled:y=!1,className:z,children:M,...k},P){const{size:C,dividers:I}=t.useContext(x),V=u[C],B=f[C];return n(i.Item,{ref:P,value:h,disabled:y,className:["mp-accordion__item flex flex-col",z??""].filter(Boolean).join(" "),...k,children:[n(i.Header,{className:"m-0 flex w-full items-center font-[inherit]",children:[n(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",V,B,s[C],I?"":"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(j)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:j}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[d(N)?e("span",{className:`truncate ${p[C]}`,children:N}):null,d(g)?e("span",{className:`text-mp-on-surface-variant truncate ${c}`,children:g}):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[C]})})]}),d(w)?e("span",{className:`flex shrink-0 items-center ${V}`,children:w}):null]}),e(i.Panel,{className:v,children:e("div",{className:["min-w-0",m[C],"text-mp-on-surface-variant",V,b[C]].join(" "),children:M})})]})});

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

@@ -0,0 +1,2 @@
+export { MPAccordion, MPAccordionItem } from './MPAccordion';
+export type { MPAccordionItemProps, MPAccordionProps } from './MPAccordion';

package/dist/components/accordion/index.js

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

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

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+export interface MPAlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * How much surface the alert paints.
+     *
+     * `tonal` rather than `filled`, which is the one place this component's default
+     * differs from a button's. A container tone is MD3's own answer for a message
+     * set into a page — it separates itself from the surface without competing
+     * with the primary action that is usually sitting right beside it, and a page
+     * with three saturated alerts on it has no emphasis left to spend.
+     * @default 'tonal'
+     */
+    variant?: MPVariant;
+    /**
+     * Which accent family it reads.
+     *
+     * Four roles, not a severity ladder — there is no `info`, `success` or
+     * `warning` here, because [the specification's colour
+     * system](../design/color) has no way to derive them and a library that
+     * invented three more families would be promising tokens the sheet cannot
+     * produce. `error` is the one severity Material does name, and the rest is an
+     * emphasis decision: `primary` for a notice, `secondary` or `tertiary` for one
+     * that should sit further back.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * The room inside, and the type scale of the text in it.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * 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.
+     */
+    title?: React.ReactNode;
+    /**
+     * The glyph at the start.
+     *
+     * Defaults to the one that goes with `color`; pass `false` to drop it, or a
+     * node to replace it. Only two defaults exist because only two are honest: the
+     * error family gets the error glyph and everything else gets the informational
+     * one. An alert that means "this worked" should say so with an `icon` of its
+     * own rather than by having the library guess from a colour.
+     */
+    icon?: React.ReactNode | false;
+    /**
+     * Content pinned to the end of the row — a "Retry" button, a link. Kept out of
+     * `children` so it stays on the first line while the message wraps.
+     */
+    action?: React.ReactNode;
+    /** Passing it is what makes the dismiss button appear. */
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The accessible name of the dismiss button. Defaults to the word for
+     * "dismiss" in `locale`.
+     */
+    closeLabel?: string;
+    /**
+     * Which language the dismiss button's default name is written in. Falls back
+     * to the nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** The message. */
+    children?: React.ReactNode;
+}
+/**
+ * A message about something that happened, set into the page it is about.
+ *
+ * The three shapes people mean by "an alert" are one component with different
+ * slots filled rather than three components: a bare line (`<MPAlert icon={false}>`),
+ * a line with a glyph (the default), and a glyph with a headline and the detail
+ * under it (`title` plus `children`). Nothing about the surface changes between
+ * them — only how much of it is used.
+ *
+ * There is no Base UI primitive under this, and there should not be: an alert has
+ * no interaction to delegate. It is a live region with a layout, and the only
+ * interactive parts it can grow — the action and the dismiss button — are real
+ * buttons that the caller either passes in or gets by passing `onClose`.
+ *
+ * ## Why this is not a snackbar
+ *
+ * An alert belongs to the flow of the page it interrupts; a snackbar floats over
+ * it and leaves on a timer. That is not a styling difference: a message the
+ * reader has to act on must not be able to disappear before it has been read,
+ * and a message about the page's *current* state has to still be there when they
+ * look back at it. If it can be missed without consequence, it is
+ * [MPSnackbar](../feedback/snackbar).
+ */
+export declare const MPAlert: React.ForwardRefExoticComponent<MPAlertProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/alert/MPAlert.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as r}from"../icon/MPIcon";import{CloseIcon as a,ErrorIcon as l,InfoIcon as o}from"../../constants/icons";import{accentSlots as i}from"../../internal/accent";import{useMPLocale as s,useMPMessages as c}from"../../internal/locale";import{MPStateLayer as m}from"../../internal/StateLayer";import{CONTROL_ICON as d,hasContent as f,PROSE_TEXT as p,SHEET_GAP as u,SHEET_PAD as x,SHEET_TITLE as h,STACK_GAP as v}from"../../internal/scale";const b={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"},y={filled:"",tonal:"",elevated:"text-(--_mp-accent)",outlined:"text-(--_mp-accent)",text:"text-(--_mp-accent)"},N={filled:"",tonal:"",elevated:"text-mp-on-surface-variant",outlined:"text-mp-on-surface-variant",text:"text-mp-on-surface-variant"},j={primary:"status",secondary:"status",tertiary:"status",error:"alert"};export const MPAlert=n.forwardRef(function({variant:n="tonal",color:g="primary",size:_="md",title:w,icon:z,action:k,onClose:B,closeLabel:C,locale:L,className:M,style:P,children:A,...I},R){const S=s(L),$=c("alert",S),q=y[n],D=f(w),E=void 0===z?e(r,{icon:"error"===g?l:o,size:d[_]}):z;return t("div",{ref:R,role:j[g],"data-mp-size":_,"data-mp-variant":n,className:["mp-alert rounded-mp-md flex w-full items-start","box-border",x[_],u[_],p[_],b[n],M??""].filter(Boolean).join(" "),style:{...i(g),...P},...I,children:[f(E)?e("span",{className:["flex h-[1lh] shrink-0 items-center",q].filter(Boolean).join(" "),children:E}):null,t("div",{className:`flex min-w-0 flex-1 flex-col ${v[_]}`,children:[D?e("div",{className:[h[_],q].filter(Boolean).join(" "),children:w}):null,f(A)?e("div",{className:D?N[n]:void 0,children:A}):null]}),f(k)?e("div",{className:"flex h-[1lh] shrink-0 items-center",children:k}):null,B?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:t("button",{type:"button","aria-label":C??$.dismiss,onClick:B,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(m,{}),e(r,{icon:a,size:d[_]})]})}):null]})});

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

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

package/dist/components/alert/index.js

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

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