material-plus-ui 0.0.1 → 1.1.0

package/dist/components/shortcut/MPShortcut.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+/**
+ * Which keyboard the shortcut is being read on.
+ *
+ * `auto` asks the browser, which is right for a shortcut a reader is about to
+ * press. The three explicit values are for documentation that has to name a
+ * platform rather than the reader's own — a support page describing the Windows
+ * build, a table comparing the two.
+ */
+export type MPShortcutOS = 'auto' | 'mac' | 'windows' | 'linux';
+export interface MPShortcutProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color' | 'children'> {
+    /**
+     * The keys, innermost punctuation and all.
+     *
+     * A string is split on `+` — `'Mod+Shift+P'` — which covers everything except
+     * a shortcut whose key *is* a plus. For that one, pass the array form:
+     * `keys={['Ctrl', '+']}`.
+     */
+    keys: string | string[];
+    /**
+     * Which keyboard to name the modifiers for.
+     * @default 'auto'
+     */
+    os?: MPShortcutOS;
+    /**
+     * What goes between two keys. Omit it for the platform's own convention: a `+`
+     * on Windows and Linux, and nothing at all on macOS, where a shortcut is
+     * written as a run of symbols — `⇧⌘P`, never `⇧+⌘+P`.
+     */
+    separator?: React.ReactNode;
+    /**
+     * How much surface a key cap paints.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * @default 'secondary'
+     */
+    color?: MPColor;
+}
+/**
+ * A keyboard key, or a combination of them.
+ *
+ * Two things make this more than a styled `<kbd>`, and both are about the label
+ * rather than the box around it.
+ *
+ * The first is `Mod`. A shortcut written as `Ctrl+K` is wrong for every Mac
+ * reader and one written as `⌘K` is wrong for everybody else, so the token that
+ * means "the modifier shortcuts are built on" resolves per platform — and `os`
+ * is there for the pages that have to name a platform rather than the reader's.
+ *
+ * The second is that `⌘` is not a word. A screen reader reads it as "place of
+ * interest sign", so every key drawn as a glyph carries its name beside it in a
+ * clipped box. What is announced is "Command K", which is what the shortcut is
+ * called.
+ *
+ * The keys are real `<kbd>` elements; the wrapper around them is a `<span>`.
+ * Nesting `<kbd>` inside `<kbd>` is allowed and would also be defensible, but a
+ * `kbd` wrapper is a second box for a host stylesheet to reach into for no gain
+ * — the semantics are carried by the keys themselves either way.
+ */
+export declare const MPShortcut: React.ForwardRefExoticComponent<MPShortcutProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/shortcut/MPShortcut.js

@@ -0,0 +1 @@
+import{jsx as e,Fragment as n,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{accentSlots as o}from"../../internal/accent";import{VISUALLY_HIDDEN as r}from"../../internal/visually-hidden";const m=e=>({symbol:e,name:e}),l={mod:{mac:{symbol:"⌘",name:"Command"},windows:m("Ctrl"),linux:m("Ctrl")},meta:{mac:{symbol:"⌘",name:"Command"},windows:m("Win"),linux:m("Super")},ctrl:{mac:{symbol:"⌃",name:"Control"},windows:m("Ctrl"),linux:m("Ctrl")},alt:{mac:{symbol:"⌥",name:"Option"},windows:m("Alt"),linux:m("Alt")},shift:{mac:{symbol:"⇧",name:"Shift"},windows:m("Shift"),linux:m("Shift")},enter:{mac:{symbol:"↩",name:"Enter"},windows:m("Enter"),linux:m("Enter")},tab:{mac:{symbol:"⇥",name:"Tab"},windows:m("Tab"),linux:m("Tab")},escape:{mac:{symbol:"⎋",name:"Escape"},windows:m("Esc"),linux:m("Esc")},backspace:{mac:{symbol:"⌫",name:"Backspace"},windows:m("Backspace"),linux:m("Backspace")},delete:{mac:{symbol:"⌦",name:"Delete"},windows:m("Del"),linux:m("Del")},capslock:{mac:{symbol:"⇪",name:"Caps Lock"},windows:m("Caps Lock"),linux:m("Caps Lock")}},s={cmdorctrl:"mod",commandorcontrol:"mod",cmd:"meta",command:"meta",super:"meta",win:"meta",windows:"meta",control:"ctrl",option:"alt",opt:"alt",return:"enter",esc:"escape",del:"delete",caps:"capslock"},i={up:{symbol:"↑",name:"Arrow up"},down:{symbol:"↓",name:"Arrow down"},left:{symbol:"←",name:"Arrow left"},right:{symbol:"→",name:"Arrow right"},arrowup:{symbol:"↑",name:"Arrow up"},arrowdown:{symbol:"↓",name:"Arrow down"},arrowleft:{symbol:"←",name:"Arrow left"},arrowright:{symbol:"→",name:"Arrow right"}};function c(){if("undefined"==typeof navigator)return"windows";const e=navigator.userAgentData,n=`${e?.platform??""} ${navigator.platform??""} ${navigator.userAgent??""}`;return/mac|iphone|ipad|ipod/i.test(n)?"mac":/win/i.test(n)?"windows":"linux"}function d(){return()=>{}}function p(){return"windows"}const u={xs:"h-5",sm:"h-6",md:"h-8",lg:"h-10",xl:"h-12"},w={xs:"min-w-5",sm:"min-w-6",md:"min-w-8",lg:"min-w-10",xl:"min-w-12"},x={xs:"text-mp-label-small",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-label-large",xl:"text-mp-title-medium"},f={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"},b={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},y={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline-variant text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant bg-mp-surface-container"};export const MPShortcut=t.forwardRef(function({variant:h="outlined",size:g="md",color:v="secondary",keys:A,os:k="auto",separator:C,className:E,style:S,...j},B){const N=t.useSyncExternalStore(d,c,p),_="auto"===k?N:k,D=function(e){return Array.isArray(e)?e.map(e=>e.trim()).filter(Boolean):e.split("+").map(e=>e.trim()).filter(Boolean)}(A),L=D.map(e=>function(e,n){const a=e.toLowerCase().replace(/[\s_-]/g,""),t=s[a]??a,o=i[t];if(o)return o;const r=l[t];return r?r[n]:m(1===e.length?e.toUpperCase():e)}(e,_)),T=void 0===C?"mac"===_?null:"+":C,$=["inline-flex shrink-0 items-center justify-center","font-mono leading-none whitespace-nowrap tabular-nums",u[g],w[g],x[g],f[g],b[g],y[h]].join(" ");return e("span",{ref:B,"data-mp-size":g,"data-mp-variant":h,className:["mp-shortcut inline-flex max-w-full items-center gap-1 align-middle",E??""].filter(Boolean).join(" "),style:{...o(v),...S},...j,children:L.map((o,m)=>a(t.Fragment,{children:[m>0&&null!==T?e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant",children:T}):null,e("kbd",{className:$,children:o.symbol===o.name?o.symbol:a(n,{children:[e("span",{"aria-hidden":"true",children:o.symbol}),e("span",{className:r,children:o.name})]})})]},m))})});

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

@@ -0,0 +1,2 @@
+export { MPShortcut } from './MPShortcut';
+export type { MPShortcutOS, MPShortcutProps } from './MPShortcut';

package/dist/components/shortcut/index.js

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

package/dist/components/skeleton/MPSkeleton.d.ts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPColor, MPSize } from '../../types';
+/**
+ * What the placeholder is standing in for.
+ *
+ * - `line` — a run of text. Sized off the type scale, so a `md` line is exactly
+ *   as tall as the `md` type it will be replaced by.
+ * - `rect` — a block: an image, a chart, a card, a map.
+ * - `circle` — an avatar, or anything else round.
+ */
+export type MPSkeletonShape = 'line' | 'rect' | 'circle';
+export interface MPSkeletonProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /** @default 'line' */
+    shape?: MPSkeletonShape;
+    /**
+     * How many lines to draw, for `shape="line"`. The last one is drawn short, the
+     * way the last line of a paragraph is, so a block of them reads as prose
+     * rather than as a barcode. Ignored by the other two shapes.
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * The scale of the thing being stood in for: the type scale for a `line`, the
+     * diameter for a `circle`, the default block height for a `rect`.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family tints the placeholder.
+     *
+     * Like `MPDivider` this has **no default**, and for a related reason: a
+     * placeholder is not a thing yet, so it has no meaning to carry. Left unset it
+     * is `surface-container-highest` — MD3's role for a container with nothing in
+     * it, which is precisely what this is. Setting it swaps in the family's
+     * container tone, for the rare page where the wait itself is branded.
+     */
+    color?: MPColor;
+    /** An explicit width. Numbers are pixels. */
+    width?: number | string;
+    /** An explicit height. Numbers are pixels. */
+    height?: number | string;
+    /**
+     * The pulse. Turn it off for a page holding dozens of them, or where the wait
+     * is expected to be long enough that motion becomes noise.
+     *
+     * This is not the accessibility switch — a reduced-motion preference stops the
+     * animation without being asked, below.
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * What a screen reader is told, if anything.
+     *
+     * Unset — the default — the placeholder is `aria-hidden`, because a dozen
+     * boxes each announcing themselves is worse than silence. Give the *one*
+     * skeleton that stands for the whole region a label and it becomes a live
+     * `status` instead.
+     */
+    label?: string;
+    /** Renders something other than a `<div>`. Base UI's own escape hatch. */
+    render?: useRender.RenderProp;
+}
+/**
+ * The shape of something that has not loaded yet.
+ *
+ * It reserves the space the real thing will take, which is the whole job: a card
+ * that grows by 200px when its image arrives has moved everything below it while
+ * somebody was reading it. A spinner cannot do that.
+ *
+ * The three shapes are the three things a layout is made of — a run of text, a
+ * block and a circle — and each is sized off the ladder the real component uses,
+ * so a `md` line is as tall as `md` type and a `md` circle is exactly an
+ * `MPAvatar` at `md`.
+ */
+export declare const MPSkeleton: React.ForwardRefExoticComponent<MPSkeletonProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/skeleton/MPSkeleton.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import*as r from"react";import{useRender as l}from"@base-ui/react/use-render";import{CONTROL_SQUARE as o}from"../../internal/scale";const a={xs:"h-3",sm:"h-3.5",md:"h-4",lg:"h-4",xl:"h-5.5"},n={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-1.5"},i={xs:"h-12",sm:"h-16",md:"h-20",lg:"h-28",xl:"h-36"},t="overflow-hidden bg-(--_mp-placeholder)";function s(e){if(void 0!==e)return"number"==typeof e?`${e}px`:e}export const MPSkeleton=r.forwardRef(function({shape:r="line",lines:m=1,size:d="md",color:p,width:c,height:h,animated:f=!0,label:u,render:x,className:g,style:w,...v},b){const y=f?"animate-pulse motion-reduce:animate-none":"",$="circle"===r?`rounded-mp-full shrink-0 ${o[d]}`:"rect"===r?`rounded-mp-md w-full ${void 0===h?i[d]:""}`:`rounded-mp-xs w-full ${a[d]}`,j=u?{role:"status","aria-busy":!0,"aria-label":u}:{"aria-hidden":!0},k="line"===r&&m>1;return l({render:x,ref:b,props:{"data-mp-size":d,className:(k?["mp-skeleton flex w-full flex-col",n[d],g??""]:["mp-skeleton",t,y,$,g??""]).filter(Boolean).join(" "),style:{"--_mp-placeholder":p?`var(--_mp-color-${p}-container)`:"var(--_mp-color-surface-container-highest)",width:s(c),height:k?void 0:s(h),...w},...j,...k?{children:Array.from({length:m},(r,l)=>e("div",{className:[t,y,"rounded-mp-xs",a[d],l===m-1?"w-3/5":"w-full"].filter(Boolean).join(" ")},l))}:null,...v}})});

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

@@ -0,0 +1,2 @@
+export { MPSkeleton } from './MPSkeleton';
+export type { MPSkeletonProps, MPSkeletonShape } from './MPSkeleton';

package/dist/components/skeleton/index.js

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

package/dist/components/slider/MPSlider.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPSize } from '../../types';
+export interface MPSliderProps {
+    /**
+     * The value, or the values. An array is what makes it a range slider — there is
+     * no separate `range` prop, because the shape of the value already says which
+     * one this is.
+     */
+    value?: number | readonly number[];
+    /** The starting value, for an uncontrolled slider. */
+    defaultValue?: number | readonly number[];
+    /** Called on every move, with the same shape `value` takes. */
+    onValueChange?: (value: number | number[]) => void;
+    /** Called once the drag ends, which is where an expensive update belongs. */
+    onValueCommitted?: (value: number | number[]) => void;
+    /** The bottom of the range. @default 0 */
+    min?: number;
+    /** The top of the range. @default 100 */
+    max?: number;
+    /** How far one arrow key, or one notch of the drag, moves. @default 1 */
+    step?: number;
+    /** The label above the track. */
+    label?: React.ReactNode;
+    /** The line under the track. */
+    description?: React.ReactNode;
+    /**
+     * Shows the current value beside the label. A slider with no readout is a
+     * control whose value can only be estimated, which is fine for a volume dial
+     * and wrong for anything with units.
+     * @default false
+     */
+    showValue?: boolean;
+    /** How the readout is written. Passed to `Intl.NumberFormat`. */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Which way the slider runs. A vertical slider has no length of its own, so
+     * give it a height — the default is a starting point, not a rule.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /**
+     * The rail's thickness and the handle's size.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the active track and handle take.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** Greys the slider out and stops it taking input. */
+    disabled?: boolean;
+    /** Name of the form control. */
+    name?: string;
+    /** The accessible name, for a slider with no visible `label`. */
+    'aria-label'?: string;
+}
+/**
+ * A Material Design slider.
+ *
+ * The active part of the track is the accent family and the rest is
+ * `surface-container-highest`, which is MD3's own pairing and the reason the
+ * inactive half reads as a groove rather than as a second value.
+ *
+ * Base UI owns everything that makes a slider hard: the pointer maths, the
+ * keyboard steps, `aria-valuenow` and friends, the thumbs of a range slider
+ * refusing to cross, and the hidden input that submits with a form.
+ *
+ * ## The handle is a circle, not a bar
+ *
+ * Material's 2025 revision draws the handle as a tall thin bar with a gap either
+ * side of it. This is the earlier one, deliberately: the gap has to be punched
+ * out of the track with a colour that matches whatever the slider is sitting on,
+ * and a component library does not know what that is. A handle that assumes the
+ * page is `surface` leaves a pale notch in the track on every screen that is not.
+ */
+export declare const MPSlider: React.ForwardRefExoticComponent<MPSliderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/slider/MPSlider.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as r from"react";import{Slider as a}from"@base-ui/react/slider";import{accentSlots as l}from"../../internal/accent";import{MPStateLayer as t}from"../../internal/StateLayer";import{META_TEXT as n,hasContent as i}from"../../internal/scale";const o={xs:{thickness:"h-0.5",cross:"w-0.5",handle:"size-3.5",strip:"h-8",stripCross:"w-8"},sm:{thickness:"h-[3px]",cross:"w-[3px]",handle:"size-4",strip:"h-9",stripCross:"w-9"},md:{thickness:"h-1",cross:"w-1",handle:"size-5",strip:"h-10",stripCross:"w-10"},lg:{thickness:"h-1.5",cross:"w-1.5",handle:"size-6",strip:"h-11",stripCross:"w-11"},xl:{thickness:"h-2",cross:"w-2",handle:"size-7",strip:"h-12",stripCross:"w-12"}},c={xs:"size-8",sm:"size-9",md:"size-10",lg:"size-11",xl:"size-12"};export const MPSlider=r.forwardRef(function({value:r,defaultValue:m,onValueChange:u,onValueCommitted:p,min:d=0,max:f=100,step:h=1,label:x,description:g,showValue:b=!1,format:w,orientation:j="horizontal",size:z="md",color:v="primary",disabled:C=!1,name:y,"aria-label":N},_){const k="vertical"===j,V=o[z],$=r??m,A=Array.isArray($)?$.length:1;return s(a.Root,{ref:_,value:r,defaultValue:m,onValueChange:e=>u?.(e),onValueCommitted:e=>p?.(e),min:d,max:f,step:h,disabled:C,orientation:j,format:w,name:y,"data-mp-size":z,className:["mp-slider flex",k?"w-fit flex-col items-center gap-2":"w-full flex-col gap-1",C?"cursor-default":""].filter(Boolean).join(" "),style:l(v),children:[i(x)||b?s("div",{className:["flex w-full items-baseline gap-2",n].join(" "),children:[i(x)?e(a.Label,{className:C?"text-mp-on-surface/38":"text-mp-on-surface-variant",children:x}):null,b?e(a.Value,{className:["ms-auto tabular-nums",C?"text-mp-on-surface/38":"text-mp-on-surface"].join(" ")}):null]}):null,e(a.Control,{className:["mp-slider__control flex touch-none items-center justify-center select-none",k?`${V.stripCross} h-40 flex-col`:`w-full ${V.strip}`,C?"":"cursor-pointer"].filter(Boolean).join(" "),children:s(a.Track,{className:["mp-slider__track rounded-mp-full relative",k?`${V.cross} h-full`:`${V.thickness} w-full`,C?"bg-mp-on-surface/12":"bg-mp-surface-container-highest"].join(" "),children:[e(a.Indicator,{className:["rounded-mp-full",C?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")}),Array.from({length:A},(s,r)=>e(a.Thumb,{index:r,"aria-label":i(x)?void 0:N,className:["mp-slider__handle group rounded-mp-full relative outline-none",V.handle,C?"bg-mp-on-surface/38 cursor-default":"bg-(--_mp-accent) cursor-grab active:cursor-grabbing"].join(" "),children:C?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",c[z],"bg-(--_mp-accent)"].join(" "),className:"group-data-dragging:opacity-16"})},r))]})}),i(g)?e("div",{className:[n,C?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:g}):null]})});

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

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

package/dist/components/slider/index.js

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

package/dist/components/snackbar/MPSnackbar.d.ts

@@ -0,0 +1,175 @@
+import * as React from 'react';
+import type { MPAlign, MPColor, MPSize } from '../../types';
+/**
+ * Where the stack sits.
+ *
+ * Written as two words rather than as a `side` plus an `align`, because they are
+ * not independent: a snackbar stack is always pinned to the top or the bottom,
+ * never to a side, and offering `left`/`right` as a "side" would invite a column
+ * down the middle of the screen that no layout survives. The second half is
+ * `MPAlign`, the same word every other component uses.
+ */
+export type MPSnackbarPosition = `top-${MPAlign}` | `bottom-${MPAlign}`;
+/**
+ * The per-snackbar overrides, carried in Base UI's own `data` slot.
+ *
+ * `data` is the field Base UI reserves for exactly this. Shadowing the manager's
+ * own option names instead is how a library ends up with two `type` props that
+ * mean different things.
+ */
+export interface MPSnackbarData {
+    color?: MPColor;
+    icon?: React.ReactNode | false;
+}
+export interface MPSnackbarOptions extends MPSnackbarData {
+    /**
+     * Reusing an id updates that snackbar in place and restarts its timer, which
+     * is what "uploading… / uploaded" wants: one message that changed its mind,
+     * not two stacked on each other.
+     */
+    id?: string;
+    /**
+     * What it says.
+     *
+     * One slot, not a title and a body — MD3's snackbar has a single run of
+     * supporting text, up to two lines, and nothing else. A message that needs a
+     * heading is not a snackbar; it is a dialog the reader has not been shown yet.
+     */
+    message?: React.ReactNode;
+    /**
+     * How long before it dismisses itself, in milliseconds. `0` keeps it up until
+     * it is closed — which is the right answer for anything the reader has to act
+     * on, because a snackbar that leaves before it is read said nothing.
+     */
+    timeout?: number;
+    /**
+     * `high` interrupts a screen reader; `low` waits for a pause. An error is worth
+     * interrupting for and a save confirmation is not.
+     * @default 'low'
+     */
+    priority?: 'low' | 'high';
+    /** The label of the action. Passing it is what makes the action appear. */
+    actionLabel?: React.ReactNode;
+    onAction?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Called when it closes, however it closed. */
+    onClose?: () => void;
+    /** Called once it has finished animating out and left the DOM. */
+    onRemove?: () => void;
+}
+export interface MPSnackbarProviderProps {
+    /**
+     * Which family every snackbar's plate is painted in.
+     *
+     * **No default**, and it is the same decision `MPTooltip` makes for the same
+     * reason. MD3's snackbar is `inverse-surface` under `inverse-on-surface`: the
+     * neutral palette read at the *other* end of the scheme, so the plate is dark
+     * on a light page and light on a dark one. That is what makes it legible over
+     * whatever the reader happened to be looking at, which is the only content a
+     * snackbar ever appears over.
+     *
+     * Setting it swaps in an accent container. Worth doing for an application whose
+     * messages are all one kind; wrong as a way of saying "this one is an error",
+     * because a snackbar is not where an error belongs.
+     */
+    color?: MPColor;
+    /**
+     * Where the stack is pinned.
+     *
+     * `bottom-start` is MD3's own placement — the snackbar sits above the reading
+     * flow's end corner, out of the way of everything except a floating action
+     * button, which is the one thing the specification asks it to move.
+     * @default 'bottom-start'
+     */
+    position?: MPSnackbarPosition;
+    /**
+     * How long a snackbar lasts by default, in milliseconds. `0` keeps every one of
+     * them up until it is closed.
+     * @default 5000
+     */
+    timeout?: number;
+    /**
+     * How many are shown at once. The rest are kept and revealed as the stack
+     * drains rather than being thrown away.
+     * @default 3
+     */
+    limit?: number;
+    /**
+     * How wide a snackbar may get. Numbers are pixels. MD3's own maximum is 600dp
+     * and its minimum is 344dp, which is what the two ends of the plate are set to.
+     * @default 600
+     */
+    width?: number | string;
+    /**
+     * The type scale the plate is drawn at.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Shows the × on every snackbar.
+     *
+     * On by default. MD3 treats the close affordance as optional, but a snackbar
+     * with `timeout: 0` and no action would otherwise have no way out at all —
+     * and the stack is what decides that, not the call site.
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Accessible name of every snackbar's × button. Defaults to the word for
+     * "close" in `locale`.
+     */
+    closeLabel?: string;
+    /**
+     * Which language the × button's default name is written in. Falls back to the
+     * nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Raises snackbars from anywhere under an `MPSnackbarProvider`.
+ *
+ * A hook rather than a component, because what a caller has at the moment a
+ * message is warranted is a click handler, not a place in the tree — and an
+ * `<MPSnackbar open={…}/>` they would have to keep mounted, with a piece of state
+ * per message, is the shape this component exists to avoid.
+ */
+export declare function useMPSnackbar(): {
+    /** Raises a snackbar and returns its id. */
+    add: (options: MPSnackbarOptions) => string;
+    /** Closes one snackbar, or every one of them when called with nothing. */
+    close: (id?: string) => void;
+    /** Changes a snackbar already on screen. */
+    update: (id: string, options: MPSnackbarOptions) => void;
+    /**
+     * One snackbar that follows a promise: the waiting message while it runs,
+     * then the success or the failure. Base UI applies `timeout: 0` to the
+     * waiting state, so a slow request cannot dismiss its own message.
+     */
+    promise: <Value>(promise: Promise<Value>, options: {
+        loading: MPSnackbarOptions;
+        success: MPSnackbarOptions | ((value: Value) => MPSnackbarOptions);
+        error: MPSnackbarOptions | ((error: unknown) => MPSnackbarOptions);
+    }) => Promise<Value>;
+    /** Every snackbar currently in the stack, newest first. */
+    snackbars: import("@base-ui/react").ToastObject<MPSnackbarData>[];
+};
+/**
+ * Puts the snackbar stack on the page and lets anything under it raise a message.
+ *
+ * Wrap the application once. Everything about how a snackbar *looks* is decided
+ * here — where the stack sits, how wide it is, how long it lasts — so the call
+ * site stays the one thing it should be: what happened.
+ *
+ * Base UI owns the parts that are genuinely hard and invisible when they work:
+ * the timers and their pausing on hover and on window blur, the limit, the swipe,
+ * the F6 focus hotkey, and the live region that makes a message which appeared
+ * out of nowhere reach a screen reader at all.
+ *
+ * ## Why this is not called Toast
+ *
+ * Material has a name for this component and it is snackbar. "Toast" is Android's
+ * older, non-interactive notification — it has no action, cannot be dismissed and
+ * is not part of Material Design 3 — so a `Toast` here would be a different
+ * component wearing the name of one the specification still ships.
+ */
+export declare function MPSnackbarProvider({ color, position, timeout, limit, width, size, showClose, closeLabel, locale: localeProp, children }: MPSnackbarProviderProps): React.JSX.Element;

package/dist/components/snackbar/MPSnackbar.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{Toast as i}from"@base-ui/react/toast";import{MPIcon as s}from"../icon/MPIcon";import{CloseIcon as n}from"../../constants/icons";import{accentSlots as r}from"../../internal/accent";import{useMPLocale as l,useMPMessages as a}from"../../internal/locale";import{MPStateLayer as c}from"../../internal/StateLayer";import{FADE as m,PORTAL_LAYER as p}from"../../internal/surface";const u={"top-start":"top-0 items-start","top-center":"top-0 items-center","top-end":"top-0 items-end","bottom-start":"bottom-0 flex-col-reverse items-start","bottom-center":"bottom-0 flex-col-reverse items-center","bottom-end":"bottom-0 flex-col-reverse items-end"},d={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"},f={xs:"min-h-9 gap-1.5 py-1.5 ps-3 pe-1.5",sm:"min-h-10 gap-2 py-2 ps-3.5 pe-2",md:"min-h-12 gap-2 py-2.5 ps-4 pe-2",lg:"min-h-14 gap-3 py-3 ps-5 pe-2.5",xl:"min-h-16 gap-3 py-3.5 pe-3 ps-6"},x={xs:16,sm:18,md:20,lg:22,xl:24};function b(e){const{color:o,icon:t,message:i,actionLabel:s,onAction:n,...r}=e;return{...r,title:i,data:{color:o,icon:t},actionProps:void 0===s?void 0:{children:s,onClick:n}}}export function useMPSnackbar(){const e=i.useToastManager();return t.useMemo(()=>({add:o=>e.add(b(o)),close:o=>e.close(o),update:(o,t)=>e.update(o,b(t)),promise:(o,t)=>e.promise(o,{loading:b(t.loading),success:e=>b("function"==typeof t.success?t.success(e):t.success),error:e=>b("function"==typeof t.error?t.error(e):t.error)}),snackbars:e.toasts}),[e])}function h({toast:t,color:l,size:a,showClose:p,closeLabel:u,swipeDirection:b}){const h=t.data?.color??l,v=t.data?.icon,y={"--_mp-plate":h?`var(--_mp-color-${h}-container)`:"var(--_mp-color-inverse-surface)","--_mp-on-plate":h?`var(--_mp-color-on-${h}-container)`:"var(--_mp-color-inverse-on-surface)","--_mp-plate-action":h?`var(--_mp-color-${h})`:"var(--_mp-color-inverse-primary)",...h?r(h):null};return o(i.Root,{toast:t,swipeDirection:b,"data-mp-size":a,className:["mp-snackbar rounded-mp-xs shadow-mp-3 pointer-events-auto flex w-full items-center","bg-(--_mp-plate) text-(--_mp-on-plate) outline-none",f[a],d[a],m,"data-limited:hidden"].join(" "),style:y,children:[v?e("span",{className:"flex shrink-0 items-center",children:v}):null,e(i.Title,{render:e("span",{}),className:"min-w-0 flex-1 py-0.5 ps-1 [min-inline-size:min(280px,100%)]"}),e(i.Action,{className:["text-mp-label-large flex shrink-0 cursor-pointer items-center","rounded-mp-full h-8 px-3 text-(--_mp-plate-action)","transition-colors duration-(--mp-sys-motion-duration-short4)","hover:bg-(--_mp-plate-action)/8 focus-visible:bg-(--_mp-plate-action)/10","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ")}),p?o(i.Close,{"aria-label":u,className:["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer","items-center justify-center text-(--_mp-on-plate)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(c,{}),e(s,{icon:n,size:x[a]})]}):null]})}function v({position:o,width:t,...s}){const{toasts:n}=i.useToastManager(),r=[o.startsWith("top")?"up":"down","left","right"];return e(i.Portal,{children:e(i.Viewport,{className:[p,"pointer-events-none fixed inset-x-0 flex flex-col gap-2 p-4",u[o]].join(" "),children:n.map(o=>e("div",{className:"w-full",style:{maxWidth:"number"==typeof t?`${t}px`:t},children:e(h,{toast:o,swipeDirection:r,...s})},o.id))})})}export function MPSnackbarProvider({color:t,position:s="bottom-start",timeout:n=5e3,limit:r=3,width:c=600,size:m="md",showClose:p=!0,closeLabel:u,locale:d,children:f}){const x=l(d),b=a("common",x);return o(i.Provider,{timeout:n,limit:r,children:[f,e(v,{position:s,width:c,color:t,size:m,showClose:p,closeLabel:u??b.close})]})}

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

@@ -0,0 +1,2 @@
+export { MPSnackbarProvider, useMPSnackbar } from './MPSnackbar';
+export type { MPSnackbarData, MPSnackbarOptions, MPSnackbarPosition, MPSnackbarProviderProps } from './MPSnackbar';

package/dist/components/snackbar/index.js

@@ -0,0 +1 @@
+export{MPSnackbarProvider,useMPSnackbar}from"./MPSnackbar";

package/dist/components/spoiler/MPSpoiler.d.ts

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+export interface MPSpoilerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'onChange'> {
+    /** Whether the content is uncovered. Use with `onRevealedChange` to control it. */
+    revealed?: boolean;
+    /**
+     * Where an uncontrolled spoiler starts.
+     * @default false
+     */
+    defaultRevealed?: boolean;
+    /** Called when the reveal or hide button is pressed. */
+    onRevealedChange?: (revealed: boolean) => void;
+    /**
+     * Which language the cover is written in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     *
+     * Both strings can be written out instead, in `label` and `description`; this
+     * is for the far more common case where the page already knows its language
+     * and nobody should have to translate a button that says "Reveal".
+     */
+    locale?: string;
+    /** The reveal button's label. Defaults to the `locale`'s word for it. */
+    label?: React.ReactNode;
+    /** The hide button's label, when `reversible` is on. */
+    hideLabel?: React.ReactNode;
+    /**
+     * The line above the button, saying why the content is covered. Defaults to
+     * the `locale`'s wording; pass `false` for a cover with nothing written on it.
+     */
+    description?: React.ReactNode | false;
+    /**
+     * Replaces the default reveal button entirely.
+     *
+     * The replacement is yours to wire up: pass `revealed` and `onRevealedChange`
+     * and drive it from your own control. `label` is the prop for the far commoner
+     * case of wanting different words on the button that is already there.
+     */
+    action?: React.ReactNode;
+    /**
+     * Keeps the content coverable: once revealed, a hide button appears under it.
+     * @default false
+     */
+    reversible?: boolean;
+    /**
+     * Clamps the covered box to this height — a CSS length, or a number in pixels.
+     * Revealing releases it and the content takes whatever height it needs.
+     *
+     * Left out, the box is exactly as tall as what it holds, which is right for a
+     * paragraph or a picture. Set it for something long enough that a page of
+     * blurred content would be a page of nothing.
+     */
+    maxHeight?: number | string;
+    /**
+     * How hard the content is blurred, in pixels.
+     * @default 10
+     */
+    blur?: number;
+    /**
+     * Inner padding around the content. Turn it off for something that should
+     * reach the edges — a picture, a video.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * How much surface the sheet paints. `text` draws no box at all, which is what
+     * a spoiler sitting inside running prose usually wants.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * The room inside, and the size of the button on the cover.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the reveal button reads. The sheet stays neutral, as
+     * every container in this library does.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** What is being covered. */
+    children?: React.ReactNode;
+}
+/**
+ * Content that is covered until somebody asks for it.
+ *
+ * MD3 does not describe this, and it is the library's own for the reason
+ * [MPProgressBox](../feedback/progress-box) is: a real thing, drawn out of the
+ * specification's own parts. There is no primitive under it either, and there
+ * should not be — a spoiler has no keyboard contract of its own beyond the
+ * button on its cover, which is a real [MPButton](../inputs/button).
+ *
+ * The cover is a **blur** rather than a `display: none`, which is the whole
+ * point: a reader can see that there is something there, roughly how much of it
+ * there is, and — with `maxHeight` — that it has been clamped. What they cannot
+ * do is read it by accident, which is the one thing a spoiler is for.
+ *
+ * ## What `inert` buys, and why `aria-hidden` would not
+ *
+ * While it is covered the content is `inert`, so it is not tabbable, not
+ * readable by a screen reader, and not selectable by a drag across the page. All
+ * three matter: a spoiler that can be defeated by Ctrl-A is not a spoiler, and
+ * `aria-hidden` alone would leave a keyboard reader tabbing into a link their
+ * screen reader has been told is not there.
+ */
+export declare const MPSpoiler: React.ForwardRefExoticComponent<MPSpoilerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/spoiler/MPSpoiler.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{MPButton as o}from"../button/MPButton";import{inertProps as i}from"../../internal/inert";import{useMPLocale as n,useMPMessages as t}from"../../internal/locale";import{hasContent as l,META_TEXT as d,SHEET_PAD as s,SHEET_PAD_X as c,SHEET_PAD_Y as m}from"../../internal/scale";import{CONTAINER_SURFACE as p}from"../../internal/surface";const f="[background-color:color-mix(in_oklab,var(--_mp-color-surface)_55%,transparent)]";export const MPSpoiler=a.forwardRef(function({revealed:u,defaultRevealed:v=!1,onRevealedChange:x,locale:h,label:b,hideLabel:j,description:N,action:g,reversible:y=!1,maxHeight:z,blur:k=10,padded:w=!0,variant:B="outlined",size:C="md",color:R="primary",className:_,children:H,...M},P){const S=n(h),$=t("spoiler",S),I=a.useId(),[L,q]=a.useState(v),A=u??L,D=e=>{void 0===u&&q(e),x?.(e)},E=!1===N?null:N??$.notice;return r("div",{ref:P,"data-mp-size":C,"data-mp-variant":B,"data-mp-revealed":A||void 0,className:["mp-spoiler rounded-mp-md relative isolate overflow-hidden","box-border",p[B],"text-mp-on-surface",_??""].filter(Boolean).join(" "),...M,children:[e("div",{id:I,className:["min-w-0",w?s[C]:"","transition-[filter] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",A?"":"select-none"].filter(Boolean).join(" "),style:{filter:A?void 0:`blur(${k}px)`,maxHeight:A?void 0:z,overflow:A?void 0:"hidden"},...i(!A),children:H}),A?null:r("div",{className:["absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 text-center",s[C],f].join(" "),children:[l(E)?e("p",{className:`text-mp-on-surface-variant m-0 ${d}`,children:E}):null,g??e(o,{variant:"tonal",size:C,color:R,onClick:()=>D(!0),"aria-expanded":!1,"aria-controls":I,children:b??$.reveal})]}),A&&y?e("div",{className:["flex justify-end",c[C],m[C],"pt-0"].join(" "),children:e(o,{variant:"text",size:C,color:R,onClick:()=>D(!1),"aria-expanded":!0,"aria-controls":I,children:j??$.hide})}):null]})});

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

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

package/dist/components/spoiler/index.js

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