material-plus-ui 1.7.0 → 1.9.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/alert/MPAlert.d.ts

@@ -32,7 +32,7 @@ export interface MPAlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      *
      * 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
+     * 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
@@ -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/alert/MPAlert.js

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

package/dist/components/anchor/MPAnchor.js

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

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

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-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-zoom/MPAnimateZoom.d.ts

@@ -28,7 +28,7 @@ export interface MPAnimateZoomProps extends MPAnimateProps, MPAnimateStaggerProp
 /**
  * Content arriving from the middle of where it will end up.
  *
- * The same arithmetic as [MPAnimateGrow](../motion/animate-grow) at more than
+ * The same arithmetic as [MPAnimateGrow](../transitions/animate-grow) at more than
  * twice the distance, and always about the centre — which is the whole
  * difference. A grow unfolds *from* somewhere; a zoom comes at the reader.
  *
@@ -36,7 +36,7 @@ export interface MPAnimateZoomProps extends MPAnimateProps, MPAnimateStaggerProp
  * confirmation, a result, a number that has just landed. Use it once. An
  * interruption that happens three times on one screen is a layout, and the
  * effect that belongs to a set of things rather than to one is
- * [MPAnimateAppear](../motion/animate-appear).
+ * [MPAnimateAppear](../transitions/animate-appear).
  *
  * There is no `origin`, on purpose. A zoom anchored to a corner is a grow, and
  * the library does not offer two spellings of one idea.

package/dist/components/app-logo/MPAppLogo.d.ts

@@ -19,7 +19,7 @@ import type { MPColor, MPSize, MPVariant } from '../../types.js';
  * that a fourth value would be one nobody could see.
  */
 export type MPAppLogoShape = 'bare' | 'app' | 'circle';
-export interface MPAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color' | 'href'> {
+export interface MPAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'a'>, 'color' | 'href' | 'target' | 'rel'> {
     /**
      * The artwork, as an image. Beaten by `children`, so a project that inlines
      * its SVG and a project that links a PNG use the same component.
@@ -98,6 +98,21 @@ export interface MPAppLogoProps extends Omit<React.ComponentPropsWithoutRef<'a'>
      * the same thing with one more element in it.
      */
     href?: string;
+    /**
+     * Where that link opens. `rel` follows on its own for `_blank` — see `rel`.
+     *
+     * A logo in a header is usually the way back to the front page and opens in
+     * place, so this is rarely set. The one case it is set for is the lockup that
+     * links to somebody else's site, which is also the case where the `rel`
+     * matters most.
+     */
+    target?: string;
+    /**
+     * Overrides the `rel` a `_blank` lockup would otherwise get, which is
+     * `noopener noreferrer`. Writing one **replaces** it rather than adding to it,
+     * so a logo that also needs `nofollow` spells all three out.
+     */
+    rel?: string;
     /** Anything else the `<img>` needs — `loading`, `decoding`, `crossOrigin`. */
     imageProps?: Omit<React.ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'alt'>;
     /**

package/dist/components/app-logo/MPAppLogo.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as a}from"../../internal/accent.js";import{initialsOf as o}from"../../internal/initials.js";import{cssLength as i}from"../../internal/length.js";import{CONTROL_GAP as l,CONTROL_HEIGHT as s,CONTROL_SQUARE as m,hasContent as c}from"../../internal/scale.js";import{VISUALLY_HIDDEN as d}from"../../internal/visually-hidden.js";import{useMPColor as p,useMPSize as u}from"../../internal/config.js";const f={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1.0625rem]",lg:"text-[1.375rem]",xl:"text-[1.625rem]"},x={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1.0625rem]",lg:"text-[1.3125rem]",xl:"text-[1.5625rem]"},g={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},h={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-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};export const MPAppLogo=/*@__PURE__*/n.forwardRef(function({src:v,srcSet:w,alt:b,name:j,initials:_,showName:y=!1,shape:N="bare",variant:k="filled",size:B,color:z,padded:P=!0,height:S,href:A,imageProps:F,render:L,className:M,style:R,children:$,...q},C){const D=u(B),E=p(z),G="bare"!==N,H=c($)?$:v?"image":null,I=G&&P,J=null===H&&!G,K=y&&!J&&c(j),O=b??j,Q=_??(j?o(j):""),T="image"===H&&!K&&c(O),U=J||T,V=!U&&!K&&c(O),W=i(S),X=W?{height:W,width:G?W:void 0}:null,Y=e("span",{"aria-hidden":!U||void 0,className:["mp-app-logo__mark flex shrink-0 items-center justify-center overflow-hidden","font-semibold tracking-tight whitespace-nowrap",W?"":s[D],G?[W?"":m[D],"circle"===N?"rounded-mp-full":g[D],x[D],h[k]].filter(Boolean).join(" "):["text-mp-on-surface w-auto",f[D]].join(" "),"[&_svg]:w-auto [&_svg]:shrink-0",I?"[&_svg]:h-[72%] [&_svg]:max-w-[72%]":"[&_svg]:h-full [&_svg]:max-w-full"].filter(Boolean).join(" "),style:X??void 0,children:"image"===H?e("img",{src:v,srcSet:w,alt:T?O??"":"",className:["w-auto object-contain",I?"h-[72%] max-w-[72%]":"h-full max-w-full"].join(" "),decoding:"async",...F}):H??(J?j:Q)});return r({render:L??e(A?"a":"span",{}),ref:C,props:{href:A,"data-mp-size":D,"data-mp-variant":k,className:["mp-app-logo inline-flex max-w-full min-w-0 items-center align-middle","text-mp-on-surface no-underline select-none",l[D],A?"rounded-mp-xs cursor-pointer":"",A?"outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid outline-none":"",M??""].filter(Boolean).join(" "),style:{...a(E),...R},children:t(n.Fragment,{children:[Y,K?e("span",{className:`mp-app-logo__name min-w-0 truncate font-semibold ${f[D]}`,children:j}):null,V?e("span",{className:d,children:O}):null]}),...q}})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{useRender as r}from"@base-ui/react/use-render";import{accentSlots as a}from"../../internal/accent.js";import{linkRel as o}from"../../internal/link.js";import{initialsOf as i}from"../../internal/initials.js";import{cssLength as l}from"../../internal/length.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as s,CONTROL_SQUARE as c,hasContent as d}from"../../internal/scale.js";import{VISUALLY_HIDDEN as p}from"../../internal/visually-hidden.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const x={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1.0625rem]",lg:"text-[1.375rem]",xl:"text-[1.625rem]"},g={xs:"text-[0.75rem]",sm:"text-[0.875rem]",md:"text-[1.0625rem]",lg:"text-[1.3125rem]",xl:"text-[1.5625rem]"},h={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-md"},v={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-accent)",outlined:"border-mp-outline border bg-transparent text-(--_mp-accent)",text:"text-mp-on-surface-variant bg-transparent"};export const MPAppLogo=/*@__PURE__*/n.forwardRef(function({src:w,srcSet:j,alt:b,name:_,initials:y,showName:N=!1,shape:k="bare",variant:B="filled",size:z,color:P,padded:S=!0,height:A,href:F,target:L,rel:M,imageProps:R,render:$,className:q,style:C,children:D,...E},G){const H=f(z),I=u(P),J="bare"!==k,K=d(D)?D:w?"image":null,O=J&&S,Q=null===K&&!J,T=N&&!Q&&d(_),U=b??_,V=y??(_?i(_):""),W="image"===K&&!T&&d(U),X=Q||W,Y=!X&&!T&&d(U),Z=l(A),ee=Z?{height:Z,width:J?Z:void 0}:null,te=e("span",{"aria-hidden":!X||void 0,className:["mp-app-logo__mark flex shrink-0 items-center justify-center overflow-hidden","font-semibold tracking-tight whitespace-nowrap",Z?"":s[H],J?[Z?"":c[H],"circle"===k?"rounded-mp-full":h[H],g[H],v[B]].filter(Boolean).join(" "):["text-mp-on-surface w-auto",x[H]].join(" "),"[&_svg]:w-auto [&_svg]:shrink-0",O?"[&_svg]:h-[72%] [&_svg]:max-w-[72%]":"[&_svg]:h-full [&_svg]:max-w-full"].filter(Boolean).join(" "),style:ee??void 0,children:"image"===K?e("img",{src:w,srcSet:j,alt:W?U??"":"",className:["w-auto object-contain",O?"h-[72%] max-w-[72%]":"h-full max-w-full"].join(" "),decoding:"async",...R}):K??(Q?_:V)});return r({render:$??e(F?"a":"span",{}),ref:G,props:{href:F,target:L,rel:o(L,M),"data-mp-size":H,"data-mp-variant":B,className:["mp-app-logo inline-flex max-w-full min-w-0 items-center align-middle","text-mp-on-surface no-underline select-none",m[H],F?"rounded-mp-xs cursor-pointer":"",F?"outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid outline-none":"",q??""].filter(Boolean).join(" "),style:{...a(I),...C},children:t(n.Fragment,{children:[te,T?e("span",{className:`mp-app-logo__name min-w-0 truncate font-semibold ${x[H]}`,children:_}):null,Y?e("span",{className:p,children:U}):null]}),...E}})});

package/dist/components/area-chart/MPAreaChart.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type CartesianChartProps } from '../../internal/ChartFrame.js';
-import type { MPChartCurve, MPChartValueLabels } from '../../types.js';
+import type { MPChartCurve, MPChartGaps, MPChartStack, MPChartValueLabels } from '../../types.js';
 export interface MPAreaChartProps extends CartesianChartProps {
     /**
      * How the edge of the band gets from one point to the next.
@@ -15,9 +15,13 @@ export interface MPAreaChartProps extends CartesianChartProps {
      * changes with it: unstacked areas are read against the axis one at a time,
      * and a stack is read as a composition. Only the bottom band and the total
      * are easy to read in a stack, which is the trade it makes.
+     *
+     * `'percent'` fills the plot, so the top edge is flat and what is left is the
+     * composition alone — the shape a share-of-traffic chart wants. A negative
+     * has no share of a whole and is left out of one.
      * @default false
      */
-    stacked?: boolean;
+    stacked?: MPChartStack;
     /**
      * The dots on the joins. `auto` draws them on an unstacked chart with room
      * for them and never on a stack, where a vertex belongs to a boundary rather
@@ -25,6 +29,17 @@ export interface MPAreaChartProps extends CartesianChartProps {
      * @default 'auto'
      */
     markers?: boolean | 'auto';
+    /**
+     * What the band does where a series has no value.
+     *
+     * `break` leaves a hole in the fill as well as in the edge, `connect` closes
+     * the fill across it and draws the joining edge dashed, and `zero` draws the
+     * missing reading at zero — which on a band standing on the axis pinches it
+     * shut. The hover panel and the table still report a gap as a gap in all
+     * three.
+     * @default 'break'
+     */
+    gaps?: MPChartGaps;
     /**
      * Which values are written onto the top edge.
      * @default 'none'
@@ -76,4 +91,4 @@ export interface MPAreaChartProps extends CartesianChartProps {
  * from a series' place in the `series` array, so what changes is the height of
  * the stack and never which band is which.
  */
-export declare function MPAreaChart({ curve, stacked, markers, valueLabels, ...frame }: MPAreaChartProps): React.JSX.Element;
+export declare function MPAreaChart({ curve, stacked, markers, gaps, valueLabels, ...frame }: MPAreaChartProps): React.JSX.Element;

package/dist/components/area-chart/MPAreaChart.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{CartesianFrame as r}from"../../internal/ChartFrame.js";import{LINE_WIDTH as l,MARKER_RADIUS as n,MARK_GAP as a,bandPath as o,linePath as s}from"../../internal/chart.js";export function MPAreaChart({curve:u="linear",stacked:i=!1,markers:c="auto",valueLabels:h="none",...p}){return e(r,{...p,inset:!0,stacked:i,includeZero:!0,headroom:"none"===h?0:14,children:({plot:r,values:p,visible:m,colors:d,point:f,zeroPx:x,size:v,hovered:k,activeIndex:y,format:b})=>{const j=l[v],g=n[v],M=p.reduce((e,t)=>Math.max(e,t.length),0),_=M>1?r.width/(M-1):r.width,w="auto"===c?!i&&_>=6*g:c,z=p.map(()=>({top:[],base:[]}));for(let e=0;e<M;e+=1){let t=0,r=0;p.forEach((l,n)=>{const o=l[e]?.value??null;if(!m[n]||null===o)return z[n].top.push(null),void z[n].base.push(null);if(!i){const t=f(e,o);return z[n].top.push(t),void z[n].base.push({x:t.x,y:x})}const s=o>=0?t:r,u=s+o;o>=0?t=u:r=u;const c=f(e,u),h=f(e,s);z[n].top.push(c),z[n].base.push({x:h.x,y:0===s?h.y:h.y-Math.sign(o||1)*a})})}return e("g",{className:"mp-area-chart__marks",children:p.map((l,n)=>{if(!m[n])return null;const{top:a,base:c}=z[n],p=d[n];return t("g",{opacity:null!==k&&k!==n?.25:1,children:[e("path",{d:o(a,c,u),fill:p,fillOpacity:i?.85:.18,stroke:"none"}),e("path",{d:s(a,u),fill:"none",stroke:p,strokeWidth:j,strokeLinecap:"round",strokeLinejoin:"round"}),a.map((t,r)=>{if(!t)return null;const l=y===r;return w||l?e("circle",{cx:t.x,cy:t.y,r:l?g+1:g,fill:p,stroke:"var(--_mp-color-surface)",strokeWidth:2},r):null}),"none"===h?null:l.map((t,n)=>{const o=a[n];if(!o||null===t.value)return null;const s=l.filter(e=>null!==e.value),u=s.map(e=>e.value);if(!("all"===h||"last"===h&&t===s[s.length-1]||"extremes"===h&&(t.value===Math.min(...u)||t.value===Math.max(...u))))return null;const i=o.x>r.left+r.width-24?"end":o.x<r.left+24?"start":"middle";return e("text",{x:o.x,y:o.y-g-5,textAnchor:i,fill:"var(--_mp-color-on-surface)",fontSize:"xs"===v||"sm"===v?10:11,children:t.label??b(t.value)},n)})]},n)})})}})}
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{CartesianFrame as t}from"../../internal/ChartFrame.js";import{BRIDGE_DASH as n,LINE_WIDTH as r,MARKER_RADIUS as a,MARK_GAP as o,bandPath as s,bridgePath as u,linePath as i,withoutGaps as c}from"../../internal/chart.js";export function MPAreaChart({curve:h="linear",stacked:p=!1,markers:d="auto",gaps:m="break",valueLabels:f="none",...x}){return e(t,{...x,inset:!0,stacked:p,includeZero:!0,headroom:"none"===f?0:14,children:({plot:t,values:x,visible:v,colors:k,labelInk:y,point:b,zeroPx:g,size:j,hovered:M,activeIndex:z,format:L,share:w})=>{const A=r[j],W=a[j],_=x.reduce((e,l)=>Math.max(e,l.length),0),C=_>1?t.width/(_-1):t.width,I="auto"===d?!p&&C>=6*W:d,P=x.map(()=>({top:[],base:[]})),$="percent"===p?Array.from({length:_},(e,l)=>x.reduce((e,t,n)=>{const r=v[n]?t[l]?.value??0:0;return e+(r>0?r:0)},0)):null,D=(e,l)=>null===$?e:e>=0&&$[l]>0?e/$[l]:null;for(let e=0;e<_;e+=1){let l=0,t=0;x.forEach((n,r)=>{const a=n[e]?.value??null,s=null===a&&"zero"===m?0:a,u=null===s?null:D(s,e);if(!v[r]||null===u)return P[r].top.push(null),void P[r].base.push(null);if(!p){const l=b(e,u);return P[r].top.push(l),void P[r].base.push({x:l.x,y:g})}const i=u>=0?l:t,c=i+u;u>=0?l=c:t=c;const h=b(e,c),d=b(e,i);P[r].top.push(h),P[r].base.push({x:d.x,y:0===i?d.y:d.y-Math.sign(u||1)*o})})}return e("g",{className:"mp-area-chart__marks",children:x.map((r,a)=>{if(!v[a])return null;const{top:o,base:d}=P[a],x=k[a];return l("g",{opacity:null!==M&&M!==a?.25:1,children:[e("path",{d:"connect"===m?s(c(o),c(d),h):s(o,d,h),fill:x,fillOpacity:p?.85:.18,stroke:"none"}),e("path",{d:i(o,h),fill:"none",stroke:x,strokeWidth:A,strokeLinecap:"round",strokeLinejoin:"round"}),"connect"===m?e("path",{d:u(o),fill:"none",stroke:x,strokeWidth:A,strokeDasharray:`${A*n} ${A*n}`,strokeLinecap:"round"}):null,o.map((l,t)=>{if(!l)return null;const n=z===t;return I||n?e("circle",{cx:l.x,cy:l.y,r:n?W+1:W,fill:x,stroke:"var(--_mp-color-surface)",strokeWidth:2},t):null}),"none"===f?null:r.map((l,n)=>{const s=o[n];if(!s||null===l.value)return null;const u=r.filter(e=>null!==e.value),i=u.map(e=>e.value);if(!("all"===f||"last"===f&&l===u[u.length-1]||"extremes"===f&&(l.value===Math.min(...i)||l.value===Math.max(...i))))return null;const c=s.x>t.left+t.width-24?"end":s.x<t.left+24?"start":"middle";return e("text",{x:s.x,y:s.y-W-5,textAnchor:c,fill:y(a),fontSize:"xs"===j||"sm"===j?10:11,children:l.label??(null===$?L(l.value):w(D(l.value,n)??0))},n)})]},a)})})}})}

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

@@ -8,7 +8,7 @@ import type { MPSize } from '../../types.js';
  * the same reason `MPSide` keeps `top`/`right`/`bottom`/`left`: inventing
  * `fill-the-box` would only make a reader look up which CSS it maps to.
  */
-export type MPAspectFit = 'cover' | 'contain' | 'fill' | 'none';
+export type MPAspectFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 export interface MPAspectRatioProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * The proportion the box holds, written the way CSS writes it — a number

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

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";import{useRender as o}from"@base-ui/react/use-render";import{useMPSize as i}from"../../internal/config.js";const r={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-xl"},t=/*@__PURE__*/["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),c={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none"};export const MPAspectRatio=/*@__PURE__*/e.forwardRef(function({ratio:e=1,fit:n="cover",rounded:l=!1,size:s,render:m,className:d,style:a,children:f,...u},p){const j=i(s),b=["mp-aspect-ratio relative block w-full overflow-hidden",t,c[n],l?r[j]:"",d??""].filter(Boolean).join(" ");return o({render:m,ref:p,props:{"data-mp-size":j,className:b,style:{aspectRatio:e,...a},children:f,...u}})});
+import*as e from"react";import{useRender as o}from"@base-ui/react/use-render";import{useMPSize as i}from"../../internal/config.js";const c={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-md",lg:"rounded-mp-md",xl:"rounded-mp-xl"},t=/*@__PURE__*/["[&>img]:size-full","[&>video]:size-full","[&>canvas]:size-full","[&>svg]:size-full","[&>iframe]:size-full","[&>picture]:size-full","[&>picture>img]:size-full"].join(" "),r={cover:"[&>img]:object-cover [&>video]:object-cover [&>picture>img]:object-cover",contain:"[&>img]:object-contain [&>video]:object-contain [&>picture>img]:object-contain",fill:"[&>img]:object-fill [&>video]:object-fill [&>picture>img]:object-fill",none:"[&>img]:object-none [&>video]:object-none [&>picture>img]:object-none","scale-down":"[&>img]:object-scale-down [&>video]:object-scale-down [&>picture>img]:object-scale-down"};export const MPAspectRatio=/*@__PURE__*/e.forwardRef(function({ratio:e=1,fit:n="cover",rounded:l=!1,size:s,render:d,className:m,style:a,children:u,...f},p){const j=i(s),b=["mp-aspect-ratio relative block w-full overflow-hidden",t,r[n],l?c[j]:"",m??""].filter(Boolean).join(" ");return o({render:d,ref:p,props:{"data-mp-size":j,className:b,style:{aspectRatio:e,...a},children:u,...f}})});

package/dist/components/avatar/MPAvatar.d.ts

@@ -92,7 +92,7 @@ export interface MPAvatarProps extends Omit<React.ComponentPropsWithoutRef<'span
      * `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;
 }