material-plus-ui 0.0.1 → 1.1.0

package/dist/components/dialog/MPDialog.d.ts

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+import type { MPColor, MPSize } from '../../types';
+/**
+ * A dialog takes `size` and `color` and stops there.
+ *
+ * There is no `variant`: the five weights answer "how much of a surface does this
+ * paint against the page around it", and a modal has already taken the page.
+ * There is no `elevation` prop either — see the note on the sheet below.
+ */
+export interface MPDialogProps {
+    /** The dialog is shown. Use with `onOpenChange` for a controlled dialog. */
+    open?: boolean;
+    /** Whether the dialog starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The element that opens the dialog, wired up by Base UI. Optional — a
+     * controlled dialog opened from elsewhere in the application needs no trigger
+     * at all, and passing one here is a convenience for the common case.
+     */
+    trigger?: React.ReactElement;
+    /**
+     * A glyph above the headline.
+     *
+     * MD3's own hero icon, and passing one is what centres the header: a dialog
+     * with an icon is announcing something, and a dialog without one is asking
+     * something. Both are correct; they are two different dialogs.
+     */
+    icon?: React.ReactNode;
+    /** The headline. Rendered as the `<h2>` that names the dialog. */
+    title?: React.ReactNode;
+    /** The supporting text under it, and the dialog's accessible description. */
+    description?: React.ReactNode;
+    /**
+     * The bottom row. Laid out end-aligned, so a pair of buttons needs no wrapper
+     * of its own — and `MPDialogClose` is what makes one of them dismiss.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Draws a hairline between the header, the body and the actions instead of
+     * separating them with space. Worth turning on the moment the body scrolls: the
+     * lines are what say the header stayed put.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Shows the × in the corner.
+     *
+     * Defaults to whatever `fullScreen` is, which is MD3's own split: a basic
+     * dialog is answered by its actions and has no ×, while a full-screen dialog
+     * carries one at the start of its top bar because there is no scrim left to
+     * click. Set it explicitly to disagree with either.
+     */
+    showClose?: boolean;
+    /**
+     * Accessible name of the × 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;
+    /**
+     * A hard cap on the sheet's width, overriding the one `size` implies. Numbers
+     * are pixels. For the dialog whose *content* decides its width — a wide table,
+     * a narrow confirmation — rather than for tuning the scale, which is `size`.
+     */
+    width?: number | string;
+    /**
+     * The sheet takes the full width its `size` allows.
+     *
+     * On by default, which is the other way round from every other component in the
+     * library. Elsewhere `fullWidth` means "fill the container"; a dialog's
+     * container is the viewport, and a dialog that shrank to fit two words would be
+     * a tooltip.
+     * @default true
+     */
+    fullWidth?: boolean;
+    /** Fills the viewport edge to edge. For a phone-sized screen, or an editor. */
+    fullScreen?: boolean;
+    /**
+     * Whether the page behind is taken away. `'trap-focus'` keeps the page
+     * scrollable and clickable while still holding focus inside.
+     * @default true
+     */
+    modal?: boolean | 'trap-focus';
+    /**
+     * Whether Escape or a click outside closes the dialog. Turn it off for the
+     * dialog that has to be answered — and then give it actions that answer it,
+     * because there will be no other way out.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * The type scale the sheet is drawn at, and how wide it is allowed to get.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the hero icon reads.
+     *
+     * The sheet itself stays neutral, exactly as MD3's does — a dialog is already
+     * the only thing on the screen, and painting it in an accent would be shouting
+     * at a reader who is not looking anywhere else. The icon is the one part that
+     * carries a family, and `secondary` is the spec's own choice for it.
+     * @default 'secondary'
+     */
+    color?: MPColor;
+    /** The body. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export type MPDialogCloseProps = React.ComponentProps<typeof Dialog.Close>;
+/**
+ * Closes the dialog it is inside.
+ *
+ * Exported because an uncontrolled dialog has no `setOpen` for its Cancel button
+ * to call, and the alternative — making every dialog controlled — is a piece of
+ * state per dialog that exists only to answer a button.
+ *
+ * `render` is Base UI's own escape hatch, so a real Material Plus button
+ * dismisses: `<MPDialogClose render={<MPButton variant="text">Cancel</MPButton>} />`.
+ */
+export declare const MPDialogClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A sheet that takes the page away until it is answered.
+ *
+ * The sections are props rather than compound sub-components: the arrangement of
+ * a dialog is fixed — icon, headline, supporting text, body, actions — and what a
+ * caller wants to decide is what goes in each slot, not what order they come in.
+ *
+ * Base UI owns everything hard about it: the focus trap, the scroll lock, the
+ * `aria-labelledby` / `aria-describedby` wiring, restoring focus to the trigger,
+ * and the inert page behind. What is left here is the surface, the width ladder
+ * and the scroll behaviour — the header and the actions stay put while only the
+ * body scrolls, which is why `dividers` matters more here than on a list.
+ *
+ * ## The sheet
+ *
+ * `surface-container-high` at `corner-extra-large`, elevation 3 — MD3's own three
+ * choices for a dialog, and the only surface in this library that carries the
+ * third elevation level. There is no `elevation` prop for the same reason there
+ * is no `variant`: a dialog that could be told to sit flat on the page would be a
+ * dialog that could be told to stop being a dialog.
+ */
+export declare function MPDialog({ open, defaultOpen, onOpenChange, trigger, icon, title, description, actions, dividers, showClose, closeLabel, locale: localeProp, width, fullWidth, fullScreen, modal, dismissible, size, color, className, style, children }: MPDialogProps): React.JSX.Element;

package/dist/components/dialog/MPDialog.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{Dialog as i}from"@base-ui/react/dialog";import{MPIcon as t}from"../icon/MPIcon";import{CloseIcon as n}from"../../constants/icons";import{accentSlots as o}from"../../internal/accent";import{useMPLocale as s,useMPMessages as r}from"../../internal/locale";import{MPStateLayer as a}from"../../internal/StateLayer";import{SHEET_GAP as m,hasContent as c}from"../../internal/scale";import{FADE as p,PORTAL_LAYER as d,SCRIM as x}from"../../internal/surface";const f={xs:"max-w-[320px]",sm:"max-w-[400px]",md:"max-w-[560px]",lg:"max-w-[720px]",xl:"max-w-[960px]"},u={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-7",xl:"p-8"},h={xs:"px-3",sm:"px-4",md:"px-6",lg:"px-7",xl:"px-8"},g={xs:"py-3",sm:"py-4",md:"py-6",lg:"py-7",xl:"py-8"},y={xs:"text-mp-title-medium",sm:"text-mp-title-large",md:"text-mp-headline-small",lg:"text-mp-headline-medium",xl:"text-mp-headline-large"},v={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-large",xl:"text-mp-body-large"},b={xs:20,sm:22,md:24,lg:28,xl:32};export const MPDialogClose=i.Close;export function MPDialog({open:w,defaultOpen:j,onOpenChange:N,trigger:$,icon:k,title:C,description:P,actions:B,dividers:z=!1,showClose:D,closeLabel:O,locale:M,width:L,fullWidth:S=!0,fullScreen:T=!1,modal:W=!0,dismissible:I=!0,size:R="md",color:V="secondary",className:_,style:q,children:A}){const E=s(M),F=r("common",E),G=D??T,H=c(k),J=c(C)||c(P)||H,K=c(B),Q=z?u[R]:h[R],U="border-mp-outline-variant border-t";return l(i.Root,{open:w,defaultOpen:j,modal:W,disablePointerDismissal:!I,onOpenChange:(e,l)=>{I||e||"escape-key"!==l.reason?N?.(e):l.cancel()},children:[$?e(i.Trigger,{render:$}):null,l(i.Portal,{children:[e(i.Backdrop,{className:`${d} fixed inset-0 ${p} ${x}`}),e(i.Viewport,{className:[d,"fixed inset-0 flex justify-center",T?"items-stretch":"items-center p-4"].join(" "),children:l(i.Popup,{"data-mp-size":R,className:["mp-dialog relative flex w-full flex-col overflow-hidden","bg-mp-surface-container-high text-mp-on-surface shadow-mp-3 outline-none",T?"h-full max-w-none rounded-none":`rounded-mp-xl max-h-full ${void 0===L?f[R]:""}`,T||S?"":"w-auto",z?"":`${g[R]} ${m[R]}`,p,_??""].filter(Boolean).join(" "),style:{...o(V),...void 0===L||T?null:{maxWidth:"number"==typeof L?`${L}px`:L},...q},children:[J||G?l("div",{className:["flex shrink-0 items-start gap-3",Q,H&&!G?"flex-col items-center text-center":""].filter(Boolean).join(" "),children:[H?e("span",{className:"flex shrink-0 items-center justify-center text-(--_mp-accent)",children:k}):null,l("div",{className:`flex min-w-0 flex-1 flex-col ${m[R]}`,children:[c(C)?e(i.Title,{className:`m-0 ${y[R]}`,children:C}):null,c(P)?e(i.Description,{className:`text-mp-on-surface-variant m-0 ${v[R]}`,children:P}):null]}),G?l(i.Close,{"aria-label":O??F.close,className:["group text-mp-on-surface-variant relative flex size-10 shrink-0","rounded-mp-full cursor-pointer items-center justify-center","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(a,{}),e(t,{icon:n,size:b[R]})]}):null]}):null,c(A)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",v[R],Q,z&&(J||G)?U:""].filter(Boolean).join(" "),children:A}):null,K?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",Q,z?U:""].filter(Boolean).join(" "),children:B}):null]})})]})]})}

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

@@ -0,0 +1,2 @@
+export { MPDialog, MPDialogClose } from './MPDialog';
+export type { MPDialogCloseProps, MPDialogProps } from './MPDialog';

package/dist/components/dialog/index.js

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

package/dist/components/divider/MPDivider.d.ts

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import type { MPAlign, MPColor, MPOrientation, MPSize } from '../../types';
+/** Where the label sits along a labelled divider. Ignored without a label. */
+export type MPDividerTextAlign = MPAlign;
+export interface MPDividerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * Which way the line runs. A vertical divider has no height of its own — it
+     * stretches to its flex parent, the way a rule between two toolbar groups
+     * should.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /**
+     * Which accent family the rule is drawn in.
+     *
+     * **This is the one component in the library whose `color` has no default**,
+     * and the reason is the specification: MD3 gives a divider exactly one colour,
+     * `outline-variant`, and it is not an accent at all. It is the quietest line
+     * in the token sheet — quieter than `outline`, which is the edge of a control
+     * — because a divider's job is to separate two things without becoming a
+     * third.
+     *
+     * So left unset the rule is `outline-variant`, which is the Material divider.
+     * Setting it tints the rule with an accent, for the case a divider is carrying
+     * meaning rather than structure — the line under a failed section.
+     */
+    color?: MPColor;
+    /** Type scale of the label. Nothing else on a divider has a size. */
+    size?: MPSize;
+    /**
+     * How far the rule runs — the width of a horizontal divider, the height of a
+     * vertical one. A number is pixels; a string is any CSS length, so `'50%'`
+     * and `'12rem'` both work.
+     *
+     * `length` rather than `width`, because a divider is the one component whose
+     * long axis turns with `orientation`: a `width` that meant height half the
+     * time would be a worse name than a longer one.
+     *
+     * Left out, a horizontal divider is the full width of its container and a
+     * vertical one stretches to the height of the flex row it is in — which is
+     * what a rule between two things should do by default.
+     */
+    length?: number | string;
+    /**
+     * How thick the rule is. A number is pixels; a string is any CSS length.
+     *
+     * MD3's divider is 1dp and there is no second thickness in the specification.
+     * This exists for the hairline that has to survive a display where 1px is
+     * half a device pixel, not as a weight to design with.
+     * @default 1
+     */
+    thickness?: number | string;
+    /** A label set into the line — "OR" between two sign-in options. */
+    children?: React.ReactNode;
+    /**
+     * Where the label sits. `center` splits the line in half; `start` and `end`
+     * leave a short stub on the near side so the label still reads as set *into*
+     * the rule rather than floating above it.
+     * @default 'center'
+     */
+    textAlign?: MPDividerTextAlign;
+}
+/**
+ * A rule between two things.
+ *
+ * With no children it is Base UI's `Separator` and nothing else — a real
+ * `role="separator"` with the right `aria-orientation`. With children the line
+ * breaks around the label.
+ *
+ * `separator` is not a name-from-content role, so the visible label does *not*
+ * become the accessible name on its own: a screen reader would announce a bare
+ * "separator" and the word "OR" would be read as loose text somewhere nearby. A
+ * string label is therefore copied into `aria-label`. Anything richer is left
+ * alone — only the caller knows which part of it is the name.
+ *
+ * There is no `variant` and no elevation. A divider is not a surface: it has no
+ * container to paint, so four of the five variants would have nothing to say and
+ * the fifth would be the line it already is.
+ */
+export declare const MPDivider: React.ForwardRefExoticComponent<MPDividerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/divider/MPDivider.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as l}from"@base-ui/react/separator";import{hasContent as a}from"../../internal/scale";const i="[border-color:var(--_mp-line)]";function o(e){return"number"==typeof e?`${e}px`:e}const n={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},s={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-medium",lg:"text-mp-label-large",xl:"text-mp-label-large"},m={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const MPDivider=t.forwardRef(function({orientation:t="horizontal",color:p,size:d="md",length:c,thickness:f,textAlign:h="center",className:x,style:u,children:v,...b},w){const g="vertical"===t,_=a(v),$={"--_mp-line":p?`var(--_mp-color-${p})`:"var(--_mp-color-outline-variant)","--_mp-rule":o(f)??"1px"},j=o(c),k={...$,...void 0===j?null:g?{height:j}:{width:j},...u};if(!_)return e(l,{ref:w,orientation:t,"data-mp-size":d,className:["mp-divider",g?"w-0 border-l [border-left-width:var(--_mp-rule)] "+(void 0===j?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--_mp-rule)]",i,x??""].filter(Boolean).join(" "),style:k,...b});const[N,y]=n[t][h],z=g?"w-0 border-l [border-left-width:var(--_mp-rule)]":"h-0 border-t [border-top-width:var(--_mp-rule)]";return r(l,{ref:w,orientation:t,"aria-label":"string"==typeof v?v:void 0,"data-mp-size":d,className:["mp-divider flex items-center",g?"w-auto flex-col "+(void 0===j?"self-stretch":""):"w-full",m[d],x??""].filter(Boolean).join(" "),style:k,...b,children:[e("span",{"aria-hidden":"true",className:`${z} ${N} ${i}`}),e("span",{className:["text-mp-on-surface-variant shrink-0 whitespace-nowrap",s[d],g?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:v}),e("span",{"aria-hidden":"true",className:`${z} ${y} ${i}`})]})});

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

@@ -0,0 +1,2 @@
+export { MPDivider } from './MPDivider';
+export type { MPDividerProps, MPDividerTextAlign } from './MPDivider';

package/dist/components/divider/index.js

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

package/dist/components/drawer/MPDrawer.d.ts

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+import type { MPSide, MPSize } from '../../types';
+/**
+ * How the panel relates to the page, in MD3's own two words for it.
+ *
+ * - `modal` — it is opened, it floats over the page on a scrim, it holds the
+ *   focus, and it is dismissed. The navigation drawer behind a hamburger, the
+ *   filter panel beside a table, the bottom sheet a phone raises.
+ * - `standard` — it is part of the layout and the page is laid out around it.
+ *   No scrim, no portal, no focus trap, nothing to dismiss. The sidebar that is
+ *   simply there.
+ *
+ * A separate axis from `variant`, which is why this component has no `variant`:
+ * the five weights answer "how much does this surface assert itself against the
+ * page", and a panel that has taken an edge of the window has answered it.
+ */
+export type MPDrawerMode = 'modal' | 'standard';
+/**
+ * A drawer takes `side`, `mode` and `size`, and stops there.
+ *
+ * There is no `variant`, for [MPDialog](../feedback/dialog)'s reason. There is
+ * no `color` either: MD3's navigation drawer is `surface-container-low` under
+ * neutral ink, and what carries an accent inside one is the *selected row*,
+ * which belongs to whatever list the caller puts in it.
+ */
+export interface MPDrawerProps {
+    /**
+     * Which edge the panel is attached to.
+     *
+     * Physical rather than logical, the way `MPSide` is everywhere in this
+     * library: a drawer along the top of the window is along the top in every
+     * writing direction.
+     * @default 'left'
+     */
+    side?: MPSide;
+    /** @default 'modal' */
+    mode?: MPDrawerMode;
+    /** The drawer is shown. Use with `onOpenChange` for a controlled drawer. */
+    open?: boolean;
+    /**
+     * Whether the drawer starts open, for an uncontrolled one.
+     *
+     * Defaults to `false` in `modal` mode and `true` in `standard` mode, because a
+     * fixed sidebar that had to be opened before it appeared would not be a fixed
+     * sidebar.
+     */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The element that opens the drawer, wired up by Base UI.
+     *
+     * `modal` only. A `standard` drawer is not opened — it is in the layout — so a
+     * trigger there would have nothing to do and is not rendered.
+     */
+    trigger?: React.ReactElement;
+    /** The heading. Rendered as the element that names the drawer. */
+    title?: React.ReactNode;
+    /** A line under it, and the drawer's accessible description. */
+    description?: React.ReactNode;
+    /**
+     * The bottom row, held against the foot of the panel while the body scrolls.
+     * Laid out end-aligned, so a pair of buttons needs no wrapper of its own — and
+     * `MPDrawerClose` is what makes one of them dismiss.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Draws a hairline between the header, the body and the actions instead of
+     * separating them with space. Worth turning on the moment the body scrolls:
+     * the lines are what say the header stayed put.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Shows the × in the corner.
+     *
+     * On in `modal` mode, where the panel has taken the page and the way out
+     * should not have to be remembered; off in `standard` mode, where a × that
+     * closes a fixed sidebar with nothing to reopen it is a one-way door.
+     */
+    showClose?: boolean;
+    /**
+     * Accessible name of the × 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;
+    /**
+     * How far the panel reaches in from its edge: a **width** for `left` and
+     * `right`, a **height** for `top` and `bottom`. Numbers are pixels.
+     *
+     * Left alone, a side panel takes the width its `size` implies and a top or
+     * bottom panel is as tall as what is in it, up to 85% of the window.
+     */
+    extent?: number | string;
+    /**
+     * Rounds the corners on the edge that faces the page — the top and bottom of a
+     * side panel, the inner pair of a top or bottom one.
+     *
+     * The corners against the window edge are always square, because a corner cut
+     * off something that has no visible end is a corner cut off nothing.
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Whether pressing Escape or clicking the scrim closes the drawer. Turn it off
+     * for the drawer that has to be answered — and then give it actions that
+     * answer it, because there will be no other way out. `modal` only.
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * How far the panel reaches in by default, and the type scale inside it.
+     * `md` is MD3's own 360dp navigation drawer.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** The body. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export type MPDrawerCloseProps = React.ComponentProps<typeof Dialog.Close>;
+/**
+ * Closes the drawer it is inside.
+ *
+ * Exported for `MPDialogClose`'s reason: an uncontrolled drawer has no `setOpen`
+ * for its Cancel button to call, and making every drawer controlled is a piece
+ * of state per drawer that exists only to answer a button.
+ *
+ * It is a `modal` drawer's button — a `standard` one is not a Base UI dialog and
+ * has nothing for this to talk to. `render` is Base UI's own escape hatch, so a
+ * real Material Plus button dismisses:
+ * `<MPDrawerClose render={<MPButton variant="text">Cancel</MPButton>} />`.
+ */
+export declare const MPDrawerClose: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AlertDialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * A panel attached to one edge of the window.
+ *
+ * Two things in one component, because they are the same panel: `modal` is the
+ * drawer you open — a scrim, a focus trap, Escape — and `standard` is the drawer
+ * that is simply part of the page. MD3 names both of them, and the reason they
+ * are not two components is that a sidebar becoming a hamburger at a breakpoint
+ * is one line rather than a swap.
+ *
+ * The sections are props rather than compound sub-components, as on
+ * [MPCard](../layout/card) and [MPDialog](../feedback/dialog): the arrangement
+ * is fixed — heading, description, body, actions — and the body is the only part
+ * that scrolls, so the heading and the actions stay put.
+ *
+ * In `modal` mode Base UI owns everything hard about it: the focus trap, the
+ * scroll lock, the `aria-labelledby` / `aria-describedby` wiring, restoring
+ * focus to the trigger, and the inert page behind.
+ *
+ * ## The surface, and why it does not slide
+ *
+ * `surface-container-low` at elevation 1 for the modal panel and `surface` flat
+ * for the standard one — MD3's own two answers. The transition is opacity only,
+ * exactly as on the dialog: a drawer is nothing but text and controls, and a
+ * panel that slid would drag its own sentences across the screen for the length
+ * of the animation. What says the panel came from an edge is that it is
+ * *attached* to one: square against the window, cut on the free side.
+ */
+export declare function MPDrawer({ side, mode, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, locale: localeProp, extent, rounded, dismissible, size, className, style, children }: MPDrawerProps): React.JSX.Element | null;

package/dist/components/drawer/MPDrawer.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import*as r from"react";import{Dialog as t}from"@base-ui/react/dialog";import{MPIcon as i}from"../icon/MPIcon";import{CloseIcon as n}from"../../constants/icons";import{useMPLocale as a,useMPMessages as s}from"../../internal/locale";import{MPStateLayer as d}from"../../internal/StateLayer";import{hasContent as m,META_TEXT as c,PROSE_TEXT as f,SHEET_GAP as p,SHEET_PAD_X as u,SHEET_PAD_Y as h,SHEET_TITLE as x}from"../../internal/scale";import{FADE as b,PORTAL_LAYER as g,SCRIM as v}from"../../internal/surface";const w={xs:"w-60",sm:"w-72",md:"w-90",lg:"w-104",xl:"w-120"},y={left:"rounded-r-mp-lg",right:"rounded-l-mp-lg",top:"rounded-b-mp-xl",bottom:"rounded-t-mp-xl"},$={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},j={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},N="border-mp-outline-variant border-t";export const MPDrawerClose=t.Close;export function MPDrawer({side:C="left",mode:k="modal",open:z,defaultOpen:P,onOpenChange:B,trigger:D,title:O,description:M,actions:L,dividers:S=!1,showClose:T,closeLabel:F,locale:I,extent:R,rounded:V=!0,dismissible:q=!0,size:A="md",className:E,style:G,children:H}){const J=a(I),K=s("common",J),Q="modal"===k,U="left"===C||"right"===C,W=T??Q,X=F??K.close,[Y,Z]=r.useState(P??!0),_=z??Y,ee=u[A],le=h[A],oe=S?`${ee} ${le}`:ee,re=m(O)||m(M),te=m(L),ie=void 0===R?null:{[U?"width":"height"]:"number"==typeof R?`${R}px`:R},ne=["mp-drawer relative flex flex-col overflow-hidden box-border","border-mp-outline-variant outline-none",Q?"bg-mp-surface-container-low shadow-mp-1":"bg-mp-surface","text-mp-on-surface",f[A],$[C],V?y[C]:"",Q?b:"",U?`h-full max-w-full ${void 0===R?w[A]:""}`:"w-full "+(void 0===R?"max-h-[85%]":""),S?"":`${le} ${p[A]}`,E??""].filter(Boolean).join(" "),ae=Q?t.Title:"h2",se=Q?t.Description:"p",de=["group text-mp-on-surface-variant relative flex size-10 shrink-0","rounded-mp-full cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),me=l(o,{children:[re||W?l("div",{className:`flex shrink-0 items-start gap-3 ${oe}`,children:[l("div",{className:"flex min-w-0 flex-1 flex-col",children:[m(O)?e(ae,{className:`m-0 ${x[A]}`,children:O}):null,m(M)?e(se,{className:`text-mp-on-surface-variant m-0 ${c}`,children:M}):null]}),W?Q?l(t.Close,{"aria-label":X,className:de,children:[e(d,{}),e(i,{icon:n,size:20})]}):l("button",{type:"button","aria-label":X,className:de,onClick:()=>{void 0===z&&Z(!1),B?.(!1)},children:[e(d,{}),e(i,{icon:n,size:20})]}):null]}):null,m(H)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",oe,S&&(re||W)?N:"",S?"":"-my-1 py-1"].filter(Boolean).join(" "),children:H}):null,te?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",oe,S?N:""].filter(Boolean).join(" "),children:L}):null]});return Q?l(t.Root,{open:z,defaultOpen:P,disablePointerDismissal:!q,onOpenChange:(e,l)=>{q||e||"escape-key"!==l.reason?B?.(e):l.cancel()},children:[D?e(t.Trigger,{render:D}):null,l(t.Portal,{children:[e(t.Backdrop,{className:`${g} fixed inset-0 ${b} ${v}`}),e(t.Viewport,{className:`${g} fixed inset-0 flex ${j[C]}`,children:e(t.Popup,{"data-mp-size":A,"data-mp-side":C,"data-mp-mode":k,className:ne,style:{...ie,...G},children:me})})]})]}):_?e("div",{"data-mp-size":A,"data-mp-side":C,"data-mp-mode":k,className:ne,style:{...ie,...G},children:me}):null}

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

@@ -0,0 +1,2 @@
+export { MPDrawer, MPDrawerClose } from './MPDrawer';
+export type { MPDrawerCloseProps, MPDrawerMode, MPDrawerProps } from './MPDrawer';

package/dist/components/drawer/index.js

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

package/dist/components/empty/MPEmpty.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPSize, MPVariant } from '../../types';
+export interface MPEmptyProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
+    /**
+     * The headline. Defaults to the words for "nothing here" in `locale`; pass
+     * `false` for a state that is a glyph and a sentence with no heading over
+     * them.
+     */
+    title?: React.ReactNode | false;
+    /**
+     * Which language that default headline is written in. Falls back to the
+     * nearest `MPLocaleProvider`, then to English.
+     *
+     * It matters more here than anywhere else in the library: this is the one
+     * invented string that is **drawn** rather than only read out, so a page in
+     * Korean with an empty list used to say "Nothing here" in the middle of it.
+     */
+    locale?: string;
+    /**
+     * The glyph above the headline. Defaults to the empty tray; pass `false` to
+     * drop it, or a node — an illustration, a brand mark, an icon from any set —
+     * to replace it.
+     */
+    icon?: React.ReactNode | false;
+    /**
+     * What to do about it, under the text: a "Create the first one" button, a
+     * "Clear filters" link. Several of them sit in a row and wrap together.
+     */
+    action?: React.ReactNode;
+    /**
+     * How much surface the state paints.
+     *
+     * `text` is the default here and on nothing else in the library. An empty
+     * state is nearly always already inside something — a card's body, a table
+     * below its header, a panel — and a second rectangle drawn inside the first is
+     * one rectangle too many. The other four are for the case where it is not.
+     * @default 'text'
+     */
+    variant?: MPVariant;
+    /**
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** Renders something other than a `<div>`: `render={<td colSpan={5} />}`. */
+    render?: useRender.RenderProp;
+    /** The sentence under the headline: why it is empty, or what to do next. */
+    children?: React.ReactNode;
+}
+/**
+ * What stands where content would have been: a glyph, a headline, a sentence and
+ * a way out.
+ *
+ * It is the other half of `MPSkeleton`. A skeleton is the shape of something on
+ * its way; this is the shape of something that is not coming — a search with no
+ * matches, an inbox nobody has written to, a folder before the first file. The
+ * two are never both right at once, and a list that shows neither has a blank
+ * rectangle where its answer should be.
+ *
+ * The headline is the only text in the library a component invents at full size,
+ * and it is defaulted rather than required for one reason: the version that says
+ * nothing useful is the version that gets shipped. `Nothing here` is a floor, and
+ * every slot above it — the glyph, the sentence, the action — is there to be
+ * filled with what is actually missing.
+ *
+ * ## No `color`
+ *
+ * Deliberately absent, where nearly every other component here has one. An empty
+ * state in the accent colour is making a claim about content that does not
+ * exist; the surface roles it reads are the neutral ones, and the way to say
+ * "this is a problem" is a `color="error"` button in `action` — which is the
+ * thing that can actually be pressed about it.
+ */
+export declare const MPEmpty: React.ForwardRefExoticComponent<MPEmptyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/empty/MPEmpty.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as n from"react";import{useRender as a}from"@base-ui/react/use-render";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale";import{hasContent as i,PROSE_TEXT as o,SHEET_GAP as m,SHEET_PAD_X as c,SHEET_TITLE as d}from"../../internal/scale";import{CONTAINER_SURFACE as p}from"../../internal/surface";const x={xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},f={xs:"text-[1.5rem]",sm:"text-[1.75rem]",md:"text-[2.25rem]",lg:"text-[2.75rem]",xl:"text-[3.25rem]"};function u(){return t("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[1em]",children:[e("path",{d:"M1.75 9.75h3l.9 1.6h4.7l.9-1.6h3",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"m1.75 9.75 2.1-6a1.5 1.5 0 0 1 1.42-1h5.46a1.5 1.5 0 0 1 1.42 1l2.1 6v2a1.5 1.5 0 0 1-1.5 1.5h-9.5a1.5 1.5 0 0 1-1.5-1.5Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"})]})}export const MPEmpty=n.forwardRef(function({variant:n="text",size:h="md",title:v,icon:y,action:j,locale:N,render:k,className:g,style:w,children:z,...$},L){const B=l(N),C=s("empty",B),M=void 0===v?C.title:v,W=void 0===y?e(u,{}):y,b=i(M),E=["mp-empty flex w-full flex-col items-center justify-center text-center",c[h],x[h],"text"===n?"":"rounded-mp-md",m[h],p[n],"text-mp-on-surface",g??""].filter(Boolean).join(" ");return a({render:k,ref:L,props:{role:"status","data-mp-size":h,"data-mp-variant":n,className:E,style:w,children:t(r,{children:[i(W)?e("span",{className:`text-mp-on-surface-variant flex items-center ${f[h]} [&>svg]:size-[1em]`,children:W}):null,b||i(z)?t("div",{className:`flex max-w-prose flex-col items-center ${m[h]}`,children:[b?e("div",{className:d[h],children:M}):null,i(z)?e("div",{className:`${o[h]} ${b?"text-mp-on-surface-variant":""}`,children:z}):null]}):null,i(j)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:j}):null]}),...$}})});

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

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

package/dist/components/empty/index.js

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

package/dist/components/file-picker/MPFilePicker.d.ts

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import type { MPStyleProps } from '../../types';
+/** Why a file was turned away. One reason per file, in the order they are checked. */
+export type MPFileRejectionReason = 'type' | 'size' | 'count';
+export interface MPFileRejection {
+    file: File;
+    reason: MPFileRejectionReason;
+}
+/**
+ * `1.4 MB`, in the units the reader's own file browser uses.
+ *
+ * Base 1000 and `MB` rather than base 1024 and `MiB`: it is the number every
+ * desktop file manager shows, and a picker that disagrees with the Finder about
+ * how big a file is has picked a fight it cannot win.
+ *
+ * Exported because a caller writing their own `hint` — "up to 5 MB" — needs the
+ * same spelling the list underneath will use, and two spellings of one number in
+ * one component is the version of this that looks like a bug.
+ */
+export declare function formatFileSize(bytes: number): string;
+export interface MPFilePickerProps extends MPStyleProps {
+    /**
+     * Which files the browser's own dialog offers, in the `accept` grammar —
+     * `'image/*,.pdf'`. Dropped files are checked against it too, which the
+     * attribute alone does not do.
+     */
+    accept?: string;
+    /** Whether more than one file may be chosen. @default false */
+    multiple?: boolean;
+    /** The largest a single file may be, in bytes. */
+    maxSize?: number;
+    /**
+     * How many files may be held at once. Checked against what is already chosen
+     * rather than against one drop, which is the difference between "you may drop
+     * five files" and "you may end up with five files" — only the second is what
+     * this means.
+     */
+    maxFiles?: number;
+    /** The chosen files. Use with `onFilesChange` for a controlled picker. */
+    value?: readonly File[];
+    /** The files chosen at the start, for an uncontrolled picker. */
+    defaultValue?: readonly File[];
+    onFilesChange?: (files: File[]) => void;
+    /**
+     * Called with everything that was turned away, and why. Without it a rejected
+     * file disappears in silence, which is the single worst thing a dropzone does.
+     */
+    onReject?: (rejections: MPFileRejection[]) => void;
+    /** Label above the box. */
+    label?: React.ReactNode;
+    /** The line under the box. Replaced by `errorMessage` when there is one. */
+    description?: React.ReactNode;
+    /** The message under the box, which also turns the picker over. */
+    errorMessage?: React.ReactNode;
+    /** The line inside the box. @default 'Drop files here, or click to browse' */
+    title?: React.ReactNode;
+    /** The line under it — what is accepted, how big, how many. */
+    hint?: React.ReactNode;
+    /** The glyph above the title. Pass `null` for a box with no picture in it. */
+    icon?: React.ReactNode;
+    /** Lists the chosen files under the box, each with a way to remove it. @default true */
+    showList?: boolean;
+    /**
+     * The accessible name of a file's remove button. Receives the file's name.
+     *
+     * Left out, each button is still named for its own file — in `locale`'s own
+     * word order — rather than being one of five buttons all called "Remove".
+     */
+    removeLabel?: (name: string) => string;
+    /**
+     * Which language the remove buttons' default names are written in. Falls back
+     * to the nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** Marks the field required. */
+    required?: boolean;
+    /** Greys the picker out and stops it taking files. */
+    disabled?: boolean;
+    /** Shows what was chosen without allowing it to be added to or removed from. */
+    readOnly?: boolean;
+    /** Name of the form control. */
+    name?: string;
+    /** The id put on the browse button. */
+    id?: string;
+}
+/**
+ * A box you drop files on, or click to open the file dialog.
+ *
+ * There is no Material component for this and no Base UI primitive under it, and
+ * both absences are fine: a dropzone is a `<div>` listening for four drag events
+ * plus an `<input type="file">` it clicks for you. There is no popup to position,
+ * no focus to trap, no roving anything. What it borrows from Material is the part
+ * that is a *surface* — the corner size, the `outline-variant` edge, the state
+ * layers, the supporting text — so it sits in a form with the rest of these
+ * components rather than beside them.
+ *
+ * The edge is dashed, which is the one place this library draws a line that is
+ * not solid. It is not decoration: a dashed rectangle is the established sign for
+ * "this area takes a drop", and a dropzone that looks like a card is a card
+ * nobody tries to drop on.
+ *
+ * ## The two things a hand-rolled dropzone gets wrong
+ *
+ * **The drag counter.** `dragenter` and `dragleave` both fire as the pointer
+ * crosses a *child* of the zone, so a zone that toggles a boolean flickers the
+ * entire time a file is being dragged across its own contents. Counting the
+ * events instead is the only version that survives having anything inside the
+ * box.
+ *
+ * **`accept`.** The browser enforces it on its own dialog and never on a drop.
+ * See `matchesAccept` above.
+ */
+export declare const MPFilePicker: React.ForwardRefExoticComponent<MPFilePickerProps & React.RefAttributes<HTMLInputElement>>;