material-plus-ui 1.8.0 → 1.10.0

package/dist/a2ui/extended/api.js

@@ -0,0 +1 @@
+import{z as e}from"zod";import{DataBindingSchema as t,FunctionCallSchema as a,DynamicStringSchema as o}from"@a2ui/web_core/v0_9";const i=(o,i)=>e.union([e.array(o),t,a]).describe(i),r=e.enum(["primary","secondary","tertiary","error"]).describe("Which accent role this reads, out of the page's own colour scheme. Omit it to take the next slot of the chart palette, which is what keeps a set of series distinguishable."),s={accessibility:e.object({label:o.optional().describe("A short name used by assistive technologies."),description:o.optional().describe("Additional detail about the element.")}).strict().optional(),weight:e.number().describe("The relative weight of this component within a Row or Column, like CSS 'flex-grow'. Only meaningful as a direct child of one.").optional()},n=e.object({key:e.string().describe("The property this column reads from each row. Also the column's own id."),label:o.optional().describe("The column heading. Defaults to the key itself."),align:e.enum(["start","center","end"]).describe("Where the cell's contents sit. Use 'end' for a column of numbers.").optional(),sortable:e.boolean().describe("Whether the reader may sort by this column. Defaults to true.").optional(),searchable:e.boolean().describe("Whether the search box looks in this column. Defaults to true.").optional(),width:e.number().describe("The column's width in pixels. Omit to share the room.").optional()}).strict();export const DataTableApi={name:"DataTable",schema:e.object({...s,columns:e.array(n).min(1).describe("The columns, in the order they are drawn."),rows:i(e.record(e.any()),"The rows: an array of objects keyed by the columns above, or a path to one in the data model. Bind a path when the data arrives separately from the table."),rowKey:e.string().describe("The column key whose value identifies a row, used for selection. Defaults to the row's position, which is only stable while the rows are.").optional(),caption:o.optional().describe("A description of the table, read out before its contents. Use it to say what the rows are, since column headings rarely say that on their own."),searchable:e.boolean().describe("Puts a search box above the table. Defaults to false.").optional(),sortable:e.boolean().describe("Lets the reader sort by any sortable column. Defaults to true.").optional(),paged:e.boolean().describe("Splits the rows into pages. Worth it past about twenty rows.").optional(),pageSize:e.number().int().positive().describe("Rows per page. Defaults to 10.").optional(),selection:e.enum(["none","single","multiple"]).describe("Whether the reader may pick rows, and how many. 'multiple' draws a column of checkboxes and 'single' picks the row that is pressed. Bind 'selectedKeys' to read the choice back.").optional(),selectedKeys:e.union([e.array(e.string()),t]).describe("The keys of the selected rows. Bind this to a path to be told what the reader picked.").optional(),striped:e.boolean().describe("Shades alternate rows, which helps a wide table be read across.").optional()}).strict().describe("A table of rows and columns, with sorting, searching, paging and selection. Prefer this to a Row-and-Column layout whenever the data is tabular: it is announced as a table, it can be sorted, and it stays readable on a narrow screen.")};const h=e.object({name:e.string().describe("The name of this series, in the legend and the hover panel.").optional(),data:e.array(e.number().nullable()).describe("Its values, one per category, in category order. `null` is a gap, not a zero."),color:r.optional()}).strict(),l={...s,series:i(h,"The series, in the order their colours are handed out. A literal array, or a path to one in the data model."),categories:e.union([e.array(e.string()),t]).describe("The category axis' labels, one per value in each series.").optional(),label:o.optional().describe("What the chart is of, read out before it. A chart with no label is a picture assistive technology cannot describe."),xAxisLabel:o.optional().describe("A name for what the category axis counts."),yAxisLabel:o.optional().describe("A name for what the value axis measures."),height:e.number().describe("The plot height in pixels. Defaults to a size that suits the chart.").optional(),legend:e.boolean().describe("Whether to draw the legend. Defaults to on past one series.").optional()};export const BarChartApi={name:"BarChart",schema:e.object({...l,stacked:e.boolean().describe("Stacks the series into one bar per category instead of drawing them side by side.").optional(),horizontal:e.boolean().describe("Turns the bars sideways, which is what long category names need.").optional()}).strict().describe("A bar chart, for comparing a value across categories.")};export const LineChartApi={name:"LineChart",schema:e.object({...l,curve:e.enum(["linear","smooth","step"]).describe("How a line gets from one point to the next. 'step' is for a value that holds and then changes, such as a price.").optional(),markers:e.boolean().describe("Draws a dot at each point. Defaults to on while the points are few enough.").optional()}).strict().describe("A line chart, for a value that moves over a sequence — usually time.")};export const PieChartApi={name:"PieChart",schema:e.object({...s,data:i(e.number().nullable(),"One value per slice, in the order of `categories`. A literal array, or a path to one in the data model."),categories:e.union([e.array(e.string()),t]).describe("Each slice's name, in the legend and the hover panel.").optional(),shape:e.enum(["pie","donut","semi"]).describe("The shape it is drawn as. 'donut' leaves room in the middle.").optional(),label:o.optional().describe("What the chart is of, read out before it."),height:e.number().describe("The plot height in pixels.").optional(),legend:e.boolean().describe("Whether to draw the legend. Defaults to on.").optional()}).strict().describe("A pie or donut chart, for parts of one whole. Use it only when the parts add up to something — a bar chart is easier to read for anything else, and far easier past about six slices.")};export const StatisticApi={name:"Statistic",schema:e.object({...s,value:e.union([e.string(),e.number(),t,a]).describe("The figure itself. A number is formatted in the reader's locale; a string is drawn as it is."),label:o.optional().describe("What the figure is of, drawn above it."),previousValue:e.number().describe("What the figure was, which is what turns `delta` into a change.").optional(),delta:e.enum(["percent","absolute","both","none"]).describe("How the change from `previousValue` is written. Defaults to a percentage when there is a previous value.").optional(),betterWhen:e.enum(["up","down"]).describe("Which direction is good news, which decides the colour of the change. Set it on a figure where down is better, such as a cost or a bounce rate — the default assumes up.").optional(),unit:o.optional().describe("A unit after the figure, such as `ms` or `kg`."),prefix:o.optional().describe("A symbol before the figure, such as `$`."),period:o.optional().describe("What the change is measured over, such as `vs last week`."),caption:o.optional().describe("A line under the figure."),compact:e.boolean().describe("Whether a number of five digits or more is written short: 12.4K rather than 12,400. On by default, because that is what a headline figure wants; pass false for one that has to be read exactly.").optional(),align:e.enum(["start","center","end"]).describe("Where the block sits. Defaults to the start.").optional()}).strict().describe("One figure, with what it is and how it has changed. The component to reach for when the answer is a number — a chart of one point is not a chart.")};

package/dist/a2ui/extended/chart.d.ts

@@ -0,0 +1,26 @@
+/**
+ * What the three charts share, and why any of it needs checking.
+ *
+ * **A bound list is not a validated list.** The SDK's binder checks a payload
+ * against the schema, and a `series` the agent wrote out literally is therefore
+ * known to be series-shaped. A `series` bound to a path is not: the schema
+ * approved the *binding*, and what comes back is whatever the data model holds at
+ * that moment — half-written by an earlier message, replaced by a later one, or
+ * simply not what the agent intended. A chart handed `{ data: 'later' }` where it
+ * expected numbers renders nothing and throws inside the scale.
+ *
+ * So the resolved value is read rather than trusted: a list becomes a list, a
+ * number stays a number, and anything else becomes a gap. What that buys is a
+ * chart that draws what arrived and keeps drawing as the rest of it does.
+ */
+import type { MPChartDatum, MPChartSeries } from '../../types.js';
+/** A list of values, from whatever the binding resolved to. */
+export declare const toData: (value: unknown) => MPChartDatum[];
+/** The series, from whatever the binding resolved to. */
+export declare const toSeries: (value: unknown) => MPChartSeries[];
+/** The category labels, which are strings or nothing. */
+export declare const toCategories: (value: unknown) => string[] | undefined;
+/** An axis, only when there is something to name it. */
+export declare const toAxis: (label?: string) => {
+    label: string;
+} | undefined;

package/dist/a2ui/extended/chart.js

@@ -0,0 +1 @@
+import{asText as o}from"../internal/common.js";const r=o=>"number"==typeof o&&Number.isFinite(o)?o:null;export const toData=o=>Array.isArray(o)?o.map(r):[];export const toSeries=r=>Array.isArray(r)?r.map(r=>{const t=r??{};return{name:o(t.name),data:toData(t.data),color:o(t.color)}}):[];export const toCategories=r=>Array.isArray(r)?r.map(r=>o(r)??""):void 0;export const toAxis=o=>o?{label:o}:void 0;

package/dist/a2ui/index.d.ts

@@ -0,0 +1,103 @@
+/**
+ * A2UI's basic catalog, drawn as Material Design 3.
+ *
+ * [A2UI](https://a2ui.org) is a protocol for an agent to describe an interface
+ * rather than write one: the agent sends JSON naming components from a *catalog*,
+ * and a renderer on the client draws them. The catalog is the contract — which
+ * components exist, what props each takes — and this module is an implementation
+ * of the protocol's own basic catalog, so an agent that already targets it gets
+ * Material Plus on the other end with nothing changed at its end.
+ *
+ * ```tsx
+ * import { A2uiSurface } from '@a2ui/react/v0_9';
+ * import { MessageProcessor } from '@a2ui/web_core/v0_9';
+ * import { mpA2uiCatalog } from 'material-plus-ui/a2ui';
+ * import 'material-plus-ui/styles.css';
+ *
+ * const processor = new MessageProcessor([mpA2uiCatalog]);
+ *
+ * processor.processMessages(messagesFromTheAgent);
+ *
+ * const surfaces = Array.from(processor.model.surfacesMap.values());
+ *
+ * surfaces.map((surface) => <A2uiSurface key={surface.id} surface={surface} />);
+ * ```
+ *
+ * ## The two packages this needs, and why they are optional
+ *
+ * `@a2ui/react` and `@a2ui/web_core` are **optional peer dependencies**: install
+ * them and this subpath works, leave them out and nothing else in the library
+ * notices. That is not tidiness. The protocol SDK brings Lit, signals, Zod, a
+ * date library and a Markdown parser with it, and the rest of this package
+ * promises two runtime dependencies — so the SDK stays behind an import that only
+ * a project rendering agent interfaces ever writes. Nothing in `src/` outside this
+ * directory imports either package, and this module is not in the main barrel.
+ *
+ * ## No stylesheet of its own
+ *
+ * Everything here draws with components from this library, which means the
+ * ordinary `material-plus-ui/styles.css` is all a surface needs, and the split
+ * per-component sheets keep working as they always did. That is also why nothing
+ * in this directory writes a utility class: a class used only here would be a rule
+ * in the whole stylesheet and in none of the split ones. Where a declaration is
+ * genuinely needed it is written inline, off the `--mp-sys-*` tokens, so a page
+ * that set `data-mp-shape` or a source colour reaches an agent's surface too.
+ *
+ * ## What the agent can and cannot do
+ *
+ * A surface is JSON from a language model, so the boundary matters:
+ *
+ * - **The catalog is the allowlist.** A component name that is not one of the
+ *   eighteen does not resolve, and there is no path from a payload to a component
+ *   of your own unless you registered it with `createMPA2uiCatalog`.
+ * - **Props are validated against the schemas** by the SDK's binder before they
+ *   reach anything here, which is why these implementations do not re-check types.
+ * - **Text is text.** Markdown is rendered only when the application has
+ *   configured a renderer through `@a2ui/react`'s Markdown context, whose contract
+ *   requires it to sanitize; with none configured, an agent's string is drawn as
+ *   the characters it contains. See `components/MPA2uiText.tsx`.
+ * - **URLs are the agent's.** `Image`, `Video` and `AudioPlayer` load what the
+ *   payload names them, so a surface from an agent you do not control belongs
+ *   behind a Content Security Policy that says where media may come from.
+ *
+ * ## Two catalogs, and where they stop
+ *
+ * `mpA2uiCatalog` is the eighteen, under the basic catalog's id. `mpA2uiExtendedCatalog`
+ * is those plus five of this library's own — a data table, a bar, line and pie
+ * chart, and a statistic — under an id of ours, because five components the basic
+ * vocabulary cannot express are a different contract and must not claim to be that
+ * one. Their schemas are `extended/api.ts` and are published, generated from those
+ * schemas, at the id itself.
+ *
+ * Twenty-three of a hundred and thirty, then. The rest — the command palette, the
+ * calendar, the tour, the animations — are not reachable from a payload, and a
+ * component only becomes reachable by being given a schema an agent can fill in
+ * from JSON alone. `createMPA2uiCatalog` is how a project adds its own.
+ */
+export { A2UI_BASIC_CATALOG_ID, MP_A2UI_CATALOG_ID, MP_A2UI_COMPONENTS, MP_A2UI_EXTENDED_COMPONENTS, createMPA2uiCatalog, mpA2uiCatalog, mpA2uiExtendedCatalog } from './catalog.js';
+export { MPA2uiAudioPlayer } from './components/MPA2uiAudioPlayer.js';
+export { MPA2uiButton } from './components/MPA2uiButton.js';
+export { MPA2uiCard } from './components/MPA2uiCard.js';
+export { MPA2uiCheckBox } from './components/MPA2uiCheckBox.js';
+export { MPA2uiChoicePicker } from './components/MPA2uiChoicePicker.js';
+export { MPA2uiColumn } from './components/MPA2uiColumn.js';
+export { MPA2uiDateTimeInput } from './components/MPA2uiDateTimeInput.js';
+export { MPA2uiDivider } from './components/MPA2uiDivider.js';
+export { MPA2uiIcon } from './components/MPA2uiIcon.js';
+export { MPA2uiImage } from './components/MPA2uiImage.js';
+export { MPA2uiList } from './components/MPA2uiList.js';
+export { MPA2uiModal } from './components/MPA2uiModal.js';
+export { MPA2uiRow } from './components/MPA2uiRow.js';
+export { MPA2uiSlider } from './components/MPA2uiSlider.js';
+export { MPA2uiTabs } from './components/MPA2uiTabs.js';
+export { MPA2uiText } from './components/MPA2uiText.js';
+export { MPA2uiTextField } from './components/MPA2uiTextField.js';
+export { MPA2uiVideo } from './components/MPA2uiVideo.js';
+export { MPA2uiBarChart } from './extended/MPA2uiBarChart.js';
+export { MPA2uiDataTable } from './extended/MPA2uiDataTable.js';
+export { MPA2uiLineChart } from './extended/MPA2uiLineChart.js';
+export { MPA2uiPieChart } from './extended/MPA2uiPieChart.js';
+export { MPA2uiStatistic } from './extended/MPA2uiStatistic.js';
+export { BarChartApi, DataTableApi, LineChartApi, PieChartApi, StatisticApi } from './extended/api.js';
+export { A2UI_ICONS } from './internal/icons.js';
+export type { MPA2uiAccessibility } from './internal/common.js';

package/dist/a2ui/index.js

@@ -0,0 +1 @@
+export{A2UI_BASIC_CATALOG_ID,MP_A2UI_CATALOG_ID,MP_A2UI_COMPONENTS,MP_A2UI_EXTENDED_COMPONENTS,createMPA2uiCatalog,mpA2uiCatalog,mpA2uiExtendedCatalog}from"./catalog.js";export{MPA2uiAudioPlayer}from"./components/MPA2uiAudioPlayer.js";export{MPA2uiButton}from"./components/MPA2uiButton.js";export{MPA2uiCard}from"./components/MPA2uiCard.js";export{MPA2uiCheckBox}from"./components/MPA2uiCheckBox.js";export{MPA2uiChoicePicker}from"./components/MPA2uiChoicePicker.js";export{MPA2uiColumn}from"./components/MPA2uiColumn.js";export{MPA2uiDateTimeInput}from"./components/MPA2uiDateTimeInput.js";export{MPA2uiDivider}from"./components/MPA2uiDivider.js";export{MPA2uiIcon}from"./components/MPA2uiIcon.js";export{MPA2uiImage}from"./components/MPA2uiImage.js";export{MPA2uiList}from"./components/MPA2uiList.js";export{MPA2uiModal}from"./components/MPA2uiModal.js";export{MPA2uiRow}from"./components/MPA2uiRow.js";export{MPA2uiSlider}from"./components/MPA2uiSlider.js";export{MPA2uiTabs}from"./components/MPA2uiTabs.js";export{MPA2uiText}from"./components/MPA2uiText.js";export{MPA2uiTextField}from"./components/MPA2uiTextField.js";export{MPA2uiVideo}from"./components/MPA2uiVideo.js";export{MPA2uiBarChart}from"./extended/MPA2uiBarChart.js";export{MPA2uiDataTable}from"./extended/MPA2uiDataTable.js";export{MPA2uiLineChart}from"./extended/MPA2uiLineChart.js";export{MPA2uiPieChart}from"./extended/MPA2uiPieChart.js";export{MPA2uiStatistic}from"./extended/MPA2uiStatistic.js";export{BarChartApi,DataTableApi,LineChartApi,PieChartApi,StatisticApi}from"./extended/api.js";export{A2UI_ICONS}from"./internal/icons.js";

package/dist/a2ui/internal/children.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A `children` list, as nodes with keys.
+ *
+ * A2UI never nests components. A layout's `children` is a list of ids, and the
+ * renderer resolves each id against the surface — which is what `buildChild`
+ * does. The list arrives in one of two shapes, and both mean "these children, in
+ * this order":
+ *
+ * - a plain id, for a fixed child the agent wrote down;
+ * - an id with a `basePath`, for a child generated from a data list. The path is
+ *   the row that child reads, so the same component definition draws once per
+ *   row and each copy binds to its own.
+ *
+ * The key has to carry the path for the second shape. One template over five
+ * rows is five children of the same id, and keying on the id alone would make
+ * them one child that React re-mounts as the data moves.
+ */
+import type { ResolvedChildRef } from '@a2ui/web_core/v0_9';
+import type * as React from 'react';
+/** What a component implementation is handed to resolve an id with. */
+export type MPA2uiBuildChild = (id: string, basePath?: string) => React.ReactNode;
+/** One resolved child, ready to be placed. */
+export interface MPA2uiChild {
+    key: string;
+    node: React.ReactNode;
+}
+/** The list a layout was given, resolved in order. */
+export declare const childNodes: (children: readonly (string | ResolvedChildRef)[] | undefined, buildChild: MPA2uiBuildChild) => MPA2uiChild[];

package/dist/a2ui/internal/children.js

@@ -0,0 +1 @@
+export const childNodes=(e,a)=>Array.isArray(e)?e.map((e,d)=>"string"==typeof e?{key:`${e}-${d}`,node:a(e)}:{key:`${e.id}-${e.basePath}`,node:a(e.id,e.basePath)}):[];

package/dist/a2ui/internal/common.d.ts

@@ -0,0 +1,113 @@
+/**
+ * The three things the protocol asks of every component here, and the
+ * conversions that follow from them.
+ *
+ * A2UI's props are not React props. They arrive from an agent as JSON, the
+ * renderer's binder resolves them — a data binding becomes the value it points
+ * at, an action becomes a closure — and what reaches a component is that
+ * resolved object. Two of its entries are on *every* component in the basic
+ * catalog and correspond to nothing a Material Plus component takes:
+ *
+ * - `weight` is a flex share, meaningful only inside a Row or a Column. It is a
+ *   number in the payload and a `style` here, because no component in this
+ *   library has a prop for how much of a parent's main axis it should claim —
+ *   `MPFlex` distributes, and the claim belongs to the child.
+ * - `accessibility` carries a label and a description for assistive technology.
+ *
+ * The rest of this file is the vocabulary gap. A2UI writes `spaceBetween` where
+ * `MPFlex` writes `space-between`, and its date and time values are ISO 8601
+ * strings where every picker in this library works in `Date`.
+ */
+import type * as React from 'react';
+import type { MPGridAlign, MPGridJustify } from '../../components/grid/MPGrid.js';
+/**
+ * What an agent can say about a component to a screen reader.
+ *
+ * `unknown` rather than `string`, and that is the SDK's type rather than a
+ * looseness of ours. Its binder resolves a data binding wherever one appears,
+ * however deeply — so both of these are strings by the time a component runs —
+ * but the *type* it publishes only resolves the props at the top level. Anything
+ * one object further in keeps the `string | DataBinding | FunctionCall` union the
+ * schema declared, so what a component receives is wider than what it gets.
+ *
+ * `asText` is the one place that difference is handled.
+ */
+export interface MPA2uiAccessibility {
+    /** The accessible name. */
+    label?: unknown;
+    /** The longer form, for what the name cannot carry. */
+    description?: unknown;
+}
+/**
+ * A resolved dynamic value, as the string it is.
+ *
+ * For the nested props described above: a `title`, an option's `label`, the two
+ * `accessibility` entries. Anything that is not a string is dropped rather than
+ * coerced, because the alternative is `String({ path: 'user.name' })` — the words
+ * `[object Object]` drawn in an interface, which is worse than the missing label
+ * it would be standing in for.
+ */
+export declare const asText: (value: unknown) => string | undefined;
+/**
+ * `weight` as the declaration a flex child needs.
+ *
+ * `minWidth` and `minHeight` go with it. A flex item's automatic minimum size is
+ * its content, so a weighted child holding a long word or a wide image refuses
+ * to shrink below it and the row overflows instead of dividing as asked.
+ */
+export declare const weightStyle: (weight?: number) => React.CSSProperties | undefined;
+/**
+ * `accessibility` as attributes an element takes.
+ *
+ * The description becomes `title` rather than `aria-description`, which is still
+ * a draft attribute no browser maps to anything. `title` is announced by every
+ * screen reader in use and shows as a tooltip besides, which is the closer
+ * reading of what an agent means by a description.
+ *
+ * Spread onto the element a component owns. It is *not* spread onto a labelled
+ * control — a text field, a checkbox, a slider — because those carry a `label`
+ * of their own from the payload, and an `aria-label` beside it replaces the
+ * label the reader can see with one they cannot.
+ */
+export declare const accessibilityAttributes: (accessibility?: MPA2uiAccessibility) => {
+    'aria-label': string | undefined;
+    title: string | undefined;
+};
+/**
+ * A2UI's main-axis words, in `MPFlex`'s spelling.
+ *
+ * `stretch` has no main-axis meaning in flexbox and is dropped to `start`, the
+ * same reading a browser gives `justify-content: stretch` on a flex container.
+ * The cross axis is where stretching happens, and that is `align` below.
+ */
+export declare const FLEX_JUSTIFY: Record<string, MPGridJustify>;
+/** A2UI's cross-axis words, which are `MPFlex`'s own. */
+export declare const FLEX_ALIGN: Record<string, MPGridAlign>;
+/**
+ * An ISO 8601 date, time, or date and time, as a local `Date`.
+ *
+ * Parsed by hand rather than handed to `new Date(value)`, because the two
+ * shapes an agent sends most are the two the constructor reads as UTC:
+ * `2026-03-01` is midnight in Greenwich, which is the 28th of February
+ * anywhere west of it, and a calendar that opens on the wrong day is the bug
+ * this avoids. A local `Date` is what the pickers here work in, so the value is
+ * read as the wall clock it plainly is.
+ *
+ * A value carrying its own offset — `...Z`, `...+09:00` — is unambiguous and
+ * goes to the constructor, which converts it to this machine's clock.
+ */
+export declare const parseIsoValue: (value?: string) => Date | null;
+/**
+ * A `Date` as the ISO 8601 string the payload holds, in the precision that was
+ * asked for.
+ *
+ * Local parts, never `toISOString()`: that prints UTC, and a Seoul afternoon
+ * written back as the previous day's UTC evening would move the value every
+ * time the agent read it back. The shapes are the ones an HTML date, time and
+ * `datetime-local` input produce, which is what the protocol's own renderer
+ * writes and therefore what an agent is most likely to parse.
+ */
+export declare const formatIsoValue: (date: Date | null, { withDate, withTime }: {
+    withDate: boolean;
+    withTime: boolean;
+}) => string;

package/dist/a2ui/internal/common.js

@@ -0,0 +1 @@
+export const asText=e=>"string"==typeof e?e:void 0;export const weightStyle=e=>{if("number"==typeof e)return{flex:String(e),minWidth:0,minHeight:0}};export const accessibilityAttributes=e=>({"aria-label":asText(e?.label),title:asText(e?.description)});export const FLEX_JUSTIFY={start:"start",center:"center",end:"end",spaceBetween:"space-between",spaceAround:"space-around",spaceEvenly:"space-evenly",stretch:"start"};export const FLEX_ALIGN={start:"start",center:"center",end:"end",stretch:"stretch"};const e=/^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2}))?)?/,t=/^(\d{2}):(\d{2})(?::(\d{2}(?:\.\d+)?))?$/;export const parseIsoValue=r=>{if(!r)return null;const n=t.exec(r);if(n){const e=new Date;return new Date(e.getFullYear(),e.getMonth(),e.getDate(),Number(n[1]),Number(n[2]),Number(n[3]??0))}if(/[Z+]|\d-\d{2}:\d{2}$/.test(r.slice(10))){const e=new Date(r);return Number.isNaN(e.getTime())?null:e}const s=e.exec(r);return s?new Date(Number(s[1]),Number(s[2])-1,Number(s[3]),Number(s[4]??0),Number(s[5]??0),Number(s[6]??0)):null};const r=e=>String(e).padStart(2,"0");export const formatIsoValue=(e,{withDate:t,withTime:n})=>{if(!e||Number.isNaN(e.getTime()))return"";const s=`${e.getFullYear()}-${r(e.getMonth()+1)}-${r(e.getDate())}`,a=`${r(e.getHours())}:${r(e.getMinutes())}`;return t&&n?`${s}T${a}`:n?a:s};

package/dist/a2ui/internal/icons.d.ts

@@ -0,0 +1,3 @@
+import type { MPIconGlyph } from '../../types.js';
+/** Every name the `Icon` component accepts, and what it draws. */
+export declare const A2UI_ICONS: Record<string, MPIconGlyph>;

package/dist/a2ui/internal/icons.js

@@ -0,0 +1 @@
+import{ArrowLeft as e,ArrowRight as o,Bell as r,BellOff as a,Calendar as i,CalendarDays as t,Camera as n,Check as l,CircleAlert as s,CircleQuestionMark as c,CircleUser as f,CreditCard as p,Download as d,Ellipsis as m,EllipsisVertical as u,Eye as h,EyeOff as v,FastForward as w,Folder as O,Heart as k,HeartOff as y,House as g,Image as C,Info as F,Lock as b,LockOpen as x,Mail as H,MapPin as I,Menu as N,Paperclip as U,Pause as z,Pencil as A,Phone as B,Play as D,Plus as M,Printer as P,RefreshCw as S,Rewind as T,Search as V,Send as _,Settings as j,Share2 as q,ShoppingCart as E,SkipBack as G,SkipForward as J,Smartphone as K,Square as L,Star as Q,StarHalf as R,StarOff as W,Trash2 as X,TriangleAlert as Y,Upload as Z,User as $,Volume1 as ee,Volume2 as oe,VolumeOff as re,VolumeX as ae,X as ie}from"lucide-react";export const A2UI_ICONS={accountCircle:f,add:M,arrowBack:e,arrowForward:o,attachFile:U,calendarToday:t,call:B,camera:n,check:l,close:ie,delete:X,download:d,edit:A,event:i,error:s,fastForward:w,favorite:k,favoriteOff:y,folder:O,help:c,home:g,info:F,locationOn:I,lock:b,lockOpen:x,mail:H,menu:N,moreVert:u,moreHoriz:m,notificationsOff:a,notifications:r,pause:z,payment:p,person:$,phone:K,photo:C,play:D,print:P,refresh:S,rewind:T,search:V,send:_,settings:j,share:q,shoppingCart:E,skipNext:J,skipPrevious:G,star:Q,starHalf:R,starOff:W,stop:L,upload:Z,visibility:h,visibilityOff:v,volumeDown:ee,volumeMute:ae,volumeOff:re,volumeUp:oe,warning:Y};

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

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import type { MPDensity, MPSize, MPElevation, MPVariant } from '../../types.js';
+/** The heading level each section's title is written at. */
+export type MPAccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export interface MPAccordionProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'> {
     /**
      * Whether more than one section may be open at once.
@@ -68,6 +70,17 @@ export interface MPAccordionProps extends Omit<React.ComponentPropsWithoutRef<'d
      * @default false
      */
     keepMounted?: boolean;
+    /**
+     * The heading level each section's title is written at.
+     *
+     * Each title is a heading, because a section of a page is what it names, and
+     * the level is the page's to decide: an accordion of questions under an `h2`
+     * is a run of `h3`s, and the same accordion under an `h3` is a run of `h4`s.
+     * A level that skips one breaks the outline a screen reader navigates by and a
+     * search engine reads the page's structure from.
+     * @default 3
+     */
+    headingLevel?: MPAccordionHeadingLevel;
     /** The `MPAccordionItem`s. */
     children?: React.ReactNode;
 }

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 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})})]})});
+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,headingLevel:3}),g={1:e("h1",{}),2:e("h2",{}),3:e("h3",{}),4:e("h4",{}),5:e("h5",{}),6:e("h6",{})},j=/*@__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 N={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,headingLevel:g=3,className:j,children:N,...y},w){const _=x(m),k=v(u),z=n.useMemo(()=>({size:_,density:k,dividers:s,headingLevel:g}),[_,k,s,g]);return e(b.Provider,{value:z,children:e(i.Root,{ref:w,multiple:t,value:a,defaultValue:r,onValueChange:e=>o?.(e),disabled:l,hiddenUntilFound:p,keepMounted:f,"data-mp-size":_,"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",j??""].filter(Boolean).join(" "),...y,children:N})})});export const MPAccordionItem=/*@__PURE__*/n.forwardRef(function({value:h,title:v,subtitle:x,startIcon:y,action:w,disabled:_=!1,className:k,children:z,...C},M){const{size:A,density:L,dividers:P,headingLevel:B}=n.useContext(b),I=p(A,L),R=f(A,L),V=n.useRef(null),[F,S]=n.useState(!1),$=n.useCallback(e=>{var t;V.current=e,e&&S(e.hasAttribute("data-open")&&!((t=e).hasAttribute("data-starting-style")&&parseFloat(getComputedStyle(t).transitionDuration)>0))},[]);return t(i.Item,{ref:M,value:h,disabled:_,className:["mp-accordion__item flex flex-col",k??""].filter(Boolean).join(" "),...C,children:[t(i.Header,{render:g[B]??g[3],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",I,R,s[A],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(y)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:y}):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[A]}`,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[A]})})]}),d(w)?e("span",{className:`flex shrink-0 items-center ${I}`,children:w}):null]}),e(i.Panel,{ref:$,className:[j,F?"data-open:overflow-visible":""].filter(Boolean).join(" "),onTransitionEnd:e=>{e.target===V.current&&"height"===e.propertyName&&S(V.current.hasAttribute("data-open"))},children:e("div",{className:["min-w-0",m[A],"text-mp-on-surface-variant",I,N[A]].join(" "),children:z})})]})});

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

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

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

@@ -118,7 +118,7 @@ export interface MPAlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      * `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.
+     * [MPAnimateFade](../transitions/animate-fade) and its siblings.
      */
     transition?: MPTransition;
 }

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

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

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

@@ -38,7 +38,7 @@ export interface MPAnimateGrowProps extends MPAnimateProps, MPAnimateStaggerProp
  * 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).
+ * whole difference between this and [MPAnimateZoom](../transitions/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

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { MPAnimateProps } from '../../types.js';
 export interface MPAnimateHeadlineProps extends Omit<MPAnimateProps, 'alternate'>, React.ComponentPropsWithoutRef<'div'> {
     /**
@@ -34,6 +35,13 @@ export interface MPAnimateHeadlineProps extends Omit<MPAnimateProps, 'alternate'
     rise?: number | string;
     /** The lines, in the order they should be read. */
     children?: React.ReactNode;
+    /**
+     * Renders something other than a `<div>` — a `<span>` to sit inside a
+     * paragraph, where a `<div>` would end the paragraph in the server's markup
+     * and leave the browser's tree disagreeing with React's. Base UI's own escape
+     * hatch, as on `MPAnimateFade`.
+     */
+    render?: useRender.RenderProp;
 }
 /**
  * One line replacing the one above it, on a timer.

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

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

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

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

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

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

package/dist/components/animate-scramble/MPAnimateScramble.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { MPAnimateProps } from '../../types.js';
 export interface MPAnimateScrambleProps extends Omit<MPAnimateProps, 'alternate' | 'easing'>, Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
     /** The text, when it is easier to pass than to nest. Overrides `children`. */
@@ -27,6 +28,13 @@ export interface MPAnimateScrambleProps extends Omit<MPAnimateProps, 'alternate'
     locale?: string;
     /** The text to settle. Only text is settled — see below. */
     children?: React.ReactNode;
+    /**
+     * Renders something other than a `<div>` — a `<span>` to sit inside a
+     * paragraph, where a `<div>` would end the paragraph in the server's markup
+     * and leave the browser's tree disagreeing with React's. Base UI's own escape
+     * hatch, as on `MPAnimateFade`.
+     */
+    render?: useRender.RenderProp;
 }
 /**
  * Text settling out of noise.

package/dist/components/animate-scramble/MPAnimateScramble.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{isInfinite as r,useAnimationRun as n,usePrefersReducedMotion as s}from"../../internal/animate.js";import{graphemesOf as i,textOf as o}from"../../internal/text.js";import{VISUALLY_HIDDEN as m}from"../../internal/visually-hidden.js";export const MPAnimateScramble=/*@__PURE__*/a.forwardRef(function({text:c,duration:l=1200,spread:u=.4,tick:d=50,characters:h="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$?!",locale:p,delay:f=0,repeat:g=1,paused:x,trigger:M="mount",play:j,once:y=!0,threshold:A=.2,className:N,style:b,children:v,...F},w){const S=s(),q=n({trigger:M,play:j,once:y,threshold:A,paused:x,infinite:r(g)}),E=c??o(v),P=a.useMemo(()=>i(E,p),[E,p]),[R,k]=a.useState(0),B="running"===q.state&&!S;a.useEffect(()=>{if(S)return void k(1);if(!B)return void k(0);let e=0,t=0;const a=r=>{0===t&&(t=r);const n=r-t-f,s=l>0?Math.min(1,Math.max(0,n/l)):1;k(s),s<1&&(e=requestAnimationFrame(a))};return e=requestAnimationFrame(a),()=>cancelAnimationFrame(e)},[B,S,l,f,q.started]);const C=S?E:P.map((e,t)=>(e=>{const t=P.length>1?e/(P.length-1):0;return R>=t*u+(1-u)})(t)?e:(e=>{const t=(2654435761*e+40503*Math.floor(R*l/Math.max(1,d)))%h.length;return h[Math.abs(t)]??h[0]})(t)).join("");return t("div",{ref:e=>{q.ref(e),"function"==typeof w?w(e):w&&(w.current=e)},className:N,style:b,"data-mp-animation":"scramble","data-mp-state":q.state,...q.handlers,...F,children:[e("span",{className:m,children:E}),e("span",{"aria-hidden":"true",className:"tabular-nums whitespace-pre-wrap",children:C})]})});
+import{jsx as e,Fragment as t,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{useRender as n}from"@base-ui/react/use-render";import{isInfinite as s,useAnimationRun as i,usePrefersReducedMotion as o}from"../../internal/animate.js";import{graphemesOf as m,textOf as l}from"../../internal/text.js";import{VISUALLY_HIDDEN as c}from"../../internal/visually-hidden.js";export const MPAnimateScramble=/*@__PURE__*/a.forwardRef(function({text:d,duration:u=1200,spread:p=.4,tick:h=50,characters:f="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#%&@$?!",locale:g,delay:x=0,repeat:M=1,paused:j,trigger:y="mount",play:b,once:A=!0,threshold:F=.2,render:N,className:v,style:w,children:S,...q},E){const P=o(),R=i({trigger:y,play:b,once:A,threshold:F,paused:j,infinite:s(M)}),k=d??l(S),B=a.useMemo(()=>m(k,g),[k,g]),[C,D]=a.useState(0),G="running"===R.state&&!P;a.useEffect(()=>{if(P)return void D(1);if(!G)return void D(0);let e=0,t=0;const r=a=>{0===t&&(t=a);const n=a-t-x,s=u>0?Math.min(1,Math.max(0,n/u)):1;D(s),s<1&&(e=requestAnimationFrame(r))};return e=requestAnimationFrame(r),()=>cancelAnimationFrame(e)},[G,P,u,x,R.started]);const H=P?k:B.map((e,t)=>(e=>{const t=B.length>1?e/(B.length-1):0;return C>=t*p+(1-p)})(t)?e:(e=>{const t=(2654435761*e+40503*Math.floor(C*u/Math.max(1,h)))%f.length;return f[Math.abs(t)]??f[0]})(t)).join("");return n({render:N,ref:[E,R.ref],props:{className:v,style:w,"data-mp-animation":"scramble","data-mp-state":R.state,...R.handlers,...q,children:r(t,{children:[e("span",{className:c,children:k}),e("span",{"aria-hidden":"true",className:"tabular-nums whitespace-pre-wrap",children:H})]})}})});

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

@@ -48,6 +48,6 @@ export interface MPAnimateSlideProps extends MPAnimateProps, MPAnimateStaggerPro
  * 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).
+ * [MPAnimateAppear](../transitions/animate-appear).
  */
 export declare const MPAnimateSlide: React.ForwardRefExoticComponent<MPAnimateSlideProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-split/MPAnimateSplit.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { MPAnimateProps, MPAnimateTimelineProps, MPSide } from '../../types.js';
 /** What a line is cut into before it is animated. */
 export type MPAnimateSplitBy = 'word' | 'character';
@@ -52,5 +53,12 @@ export interface MPAnimateSplitProps extends MPAnimateProps, MPAnimateTimelinePr
     locale?: string;
     /** The text to split. Only text is split — see below. */
     children?: React.ReactNode;
+    /**
+     * Renders something other than a `<div>` — a `<span>` to sit inside a
+     * paragraph, where a `<div>` would end the paragraph in the server's markup
+     * and leave the browser's tree disagreeing with React's. Base UI's own escape
+     * hatch, as on `MPAnimateFade`.
+     */
+    render?: useRender.RenderProp;
 }
 export declare const MPAnimateSplit: React.ForwardRefExoticComponent<MPAnimateSplitProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/animate-split/MPAnimateSplit.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{ANIMATION_CLASS as r,ANIM_BASE as n,animationSlots as i,isInfinite as s,slideOffsets as l,useAnimationRun as o}from"../../internal/animate.js";import{graphemesOf as m,textOf as d,wordsOf as c}from"../../internal/text.js";import{VISUALLY_HIDDEN as p}from"../../internal/visually-hidden.js";export const MPAnimateSplit=/*@__PURE__*/t.forwardRef(function({text:t,by:f="word",duration:u,delay:h=0,easing:y,repeat:g=1,alternate:x,paused:j,trigger:N="mount",play:b,once:v=!0,threshold:w=.2,timeline:k,range:S,stagger:$=40,durationStep:A=0,reverse:M=!1,from:O="bottom",distance:P="0.5rem",fade:R=!0,locale:_,className:q,style:z,children:B,...C},D){const E=o({trigger:N,play:b,once:v,threshold:w,paused:j,infinite:s(g)}),F="view"===k?j?"paused":"running":E.state,G=t??d(B),{x:H,y:I}=l(O,P),J=c(G,_),K="character"===f?J.map(e=>m(e,_)):J.map(e=>[e]),L=`${n} ${r.slide} inline-block`,Q=K.reduce((e,a)=>e+a.length,0);let T=-1;return a("div",{ref:e=>{E.ref(e),"function"==typeof D?D(e):D&&(D.current=e)},className:q,style:{"--_mp-anim-state":F,...z},"data-mp-animation":"split","data-mp-state":F,...E.handlers,...C,children:[e("span",{className:p,children:G}),e("span",{"aria-hidden":"true",children:K.map((a,t)=>e("span",{className:"inline-block whitespace-pre",children:a.map((a,t)=>{T+=1;const r=M?Q-1-T:T;return e("span",{className:L,style:i({effect:"slide",duration:u,delay:h+r*$,easing:y,repeat:g,alternate:x,durationOffset:r*A,timeline:k,range:S,x:H,y:I,opacity:R?0:1}),children:a},t)})},t))})]})});
+import{jsx as e,Fragment as a,jsxs as t}from"react/jsx-runtime";import*as r from"react";import{useRender as n}from"@base-ui/react/use-render";import{ANIMATION_CLASS as i,ANIM_BASE as s,animationSlots as l,isInfinite as m,slideOffsets as o,useAnimationRun as d}from"../../internal/animate.js";import{graphemesOf as p,textOf as c,wordsOf as u}from"../../internal/text.js";import{VISUALLY_HIDDEN as f}from"../../internal/visually-hidden.js";export const MPAnimateSplit=/*@__PURE__*/r.forwardRef(function({text:r,by:h="word",duration:y,delay:g=0,easing:x,repeat:j=1,alternate:b,paused:N,trigger:w="mount",play:_,once:v=!0,threshold:$=.2,timeline:k,range:S,stagger:A=40,durationStep:F=0,reverse:M=!1,from:O="bottom",distance:P="0.5rem",fade:R=!0,locale:q,render:z,className:B,style:C,children:D,...E},G){const H=d({trigger:w,play:_,once:v,threshold:$,paused:N,infinite:m(j)}),I="view"===k?N?"paused":"running":H.state,J=r??c(D),{x:K,y:L}=o(O,P),Q=u(J,q),T="character"===h?Q.map(e=>p(e,q)):Q.map(e=>[e]),U=`${s} ${i.slide} inline-block`,V=T.reduce((e,a)=>e+a.length,0);let W=-1;const X={effect:"slide",duration:y,delay:g,easing:x,repeat:j,alternate:b,timeline:k,range:S,x:K,y:L,opacity:R?0:1};return n({render:z,ref:[G,H.ref],props:{className:B,style:{"--_mp-anim-state":I,...C},"data-mp-animation":"split","data-mp-state":I,...H.handlers,...E,children:t(a,{children:[e("span",{className:f,children:J}),e("span",{"aria-hidden":"true",style:l(X),children:T.map((a,t)=>e("span",{className:"inline-block whitespace-pre",children:a.map((a,t)=>{W+=1;const r=M?V-1-W:W;return e("span",{className:U,style:{"--_mp-anim-delay":`${g+r*A}ms`,...0===F?null:{"--_mp-anim-duration":l({...X,durationOffset:r*F})["--_mp-anim-duration"]}},children:a},t)})},t))})]})}})});

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
 import type { MPAnimateProps } from '../../types.js';
 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`. */
@@ -37,6 +38,13 @@ export interface MPAnimateTypingProps extends Omit<MPAnimateProps, 'alternate' |
     caretChar?: React.ReactNode;
     /** The text to type. Only text is typed — see below. */
     children?: React.ReactNode;
+    /**
+     * Renders something other than a `<div>` — a `<span>` to sit inside a
+     * paragraph, where a `<div>` would end the paragraph in the server's markup
+     * and leave the browser's tree disagreeing with React's. Base UI's own escape
+     * hatch, as on `MPAnimateFade`.
+     */
+    render?: useRender.RenderProp;
 }
 /**
  * Text appearing one character at a time.
@@ -53,7 +61,7 @@ export interface MPAnimateTypingProps extends Omit<MPAnimateProps, 'alternate' |
  * 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.
+ * children gives its text and drops its markup, because there is no honest way
+ * to reveal half of a link.
  */
 export declare const MPAnimateTyping: React.ForwardRefExoticComponent<MPAnimateTypingProps & React.RefAttributes<HTMLDivElement>>;