material-plus-ui 0.0.1 → 1.0.0

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

@@ -0,0 +1,145 @@
+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.
+     * @default 'Close'
+     */
+    closeLabel?: 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, 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{MPStateLayer as s}from"../../internal/StateLayer";import{SHEET_GAP as r,hasContent as a}from"../../internal/scale";import{FADE as m,PORTAL_LAYER as c,SCRIM as p}from"../../internal/surface";const d={xs:"max-w-[320px]",sm:"max-w-[400px]",md:"max-w-[560px]",lg:"max-w-[720px]",xl:"max-w-[960px]"},x={xs:"p-3",sm:"p-4",md:"p-6",lg:"p-7",xl:"p-8"},f={xs:"px-3",sm:"px-4",md:"px-6",lg:"px-7",xl:"px-8"},u={xs:"py-3",sm:"py-4",md:"py-6",lg:"py-7",xl:"py-8"},h={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"},g={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"},y={xs:20,sm:22,md:24,lg:28,xl:32};export const MPDialogClose=i.Close;export function MPDialog({open:v,defaultOpen:b,onOpenChange:w,trigger:j,icon:N,title:$,description:C,actions:k,dividers:P=!1,showClose:B,closeLabel:z="Close",width:D,fullWidth:O=!0,fullScreen:M=!1,modal:L=!0,dismissible:S=!0,size:T="md",color:W="secondary",className:I,style:R,children:V}){const _=B??M,q=a(N),A=a($)||a(C)||q,E=a(k),F=P?x[T]:f[T],G="border-mp-outline-variant border-t";return l(i.Root,{open:v,defaultOpen:b,modal:L,disablePointerDismissal:!S,onOpenChange:(e,l)=>{S||e||"escape-key"!==l.reason?w?.(e):l.cancel()},children:[j?e(i.Trigger,{render:j}):null,l(i.Portal,{children:[e(i.Backdrop,{className:`${c} fixed inset-0 ${m} ${p}`}),e(i.Viewport,{className:[c,"fixed inset-0 flex justify-center",M?"items-stretch":"items-center p-4"].join(" "),children:l(i.Popup,{"data-mp-size":T,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",M?"h-full max-w-none rounded-none":`rounded-mp-xl max-h-full ${void 0===D?d[T]:""}`,M||O?"":"w-auto",P?"":`${u[T]} ${r[T]}`,m,I??""].filter(Boolean).join(" "),style:{...o(W),...void 0===D||M?null:{maxWidth:"number"==typeof D?`${D}px`:D},...R},children:[A||_?l("div",{className:["flex shrink-0 items-start gap-3",F,q&&!_?"flex-col items-center text-center":""].filter(Boolean).join(" "),children:[q?e("span",{className:"flex shrink-0 items-center justify-center text-(--_mp-accent)",children:N}):null,l("div",{className:`flex min-w-0 flex-1 flex-col ${r[T]}`,children:[a($)?e(i.Title,{className:`m-0 ${h[T]}`,children:$}):null,a(C)?e(i.Description,{className:`text-mp-on-surface-variant m-0 ${g[T]}`,children:C}):null]}),_?l(i.Close,{"aria-label":z,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(s,{}),e(t,{icon:n,size:y[T]})]}):null]}):null,a(V)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",g[T],F,P&&(A||_)?G:""].filter(Boolean).join(" "),children:V}):null,E?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",F,P?G:""].filter(Boolean).join(" "),children:k}):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,163 @@
+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.
+     * @default 'Close'
+     */
+    closeLabel?: 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, 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{Dialog as r}from"@base-ui/react/dialog";import{MPIcon as i}from"../icon/MPIcon";import{CloseIcon as t}from"../../constants/icons";import{MPStateLayer as n}from"../../internal/StateLayer";import{hasContent as a,META_TEXT as s,PROSE_TEXT as d,SHEET_GAP as m,SHEET_PAD_X as c,SHEET_PAD_Y as f,SHEET_TITLE as p}from"../../internal/scale";import{FADE as u,PORTAL_LAYER as h,SCRIM as x}from"../../internal/surface";const b={xs:"w-60",sm:"w-72",md:"w-90",lg:"w-104",xl:"w-120"},g={left:"rounded-r-mp-lg",right:"rounded-l-mp-lg",top:"rounded-b-mp-xl",bottom:"rounded-t-mp-xl"},v={left:"border-r",right:"border-l",top:"border-b",bottom:"border-t"},w={left:"flex-row justify-start",right:"flex-row justify-end",top:"flex-col justify-start",bottom:"flex-col justify-end"},y="border-mp-outline-variant border-t";export const MPDrawerClose=r.Close;export function MPDrawer({side:$="left",mode:j="modal",open:N,defaultOpen:C,onOpenChange:k,trigger:z,title:P,description:B,actions:D,dividers:O=!1,showClose:M,closeLabel:L="Close",extent:T,rounded:F=!0,dismissible:I=!0,size:R="md",className:S,style:V,children:q}){const A="modal"===j,E="left"===$||"right"===$,G=M??A,H=c[R],J=f[R],K=O?`${H} ${J}`:H,Q=a(P)||a(B),U=a(D),W=void 0===T?null:{[E?"width":"height"]:"number"==typeof T?`${T}px`:T},X=["mp-drawer relative flex flex-col overflow-hidden box-border","border-mp-outline-variant outline-none",A?"bg-mp-surface-container-low shadow-mp-1":"bg-mp-surface","text-mp-on-surface",d[R],v[$],F?g[$]:"",A?u:"",E?`h-full max-w-full ${void 0===T?b[R]:""}`:"w-full "+(void 0===T?"max-h-[85%]":""),O?"":`${J} ${m[R]}`,S??""].filter(Boolean).join(" "),Y=A?r.Title:"h2",Z=A?r.Description:"p",_=["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(" "),ee=l(o,{children:[Q||G?l("div",{className:`flex shrink-0 items-start gap-3 ${K}`,children:[l("div",{className:"flex min-w-0 flex-1 flex-col",children:[a(P)?e(Y,{className:`m-0 ${p[R]}`,children:P}):null,a(B)?e(Z,{className:`text-mp-on-surface-variant m-0 ${s}`,children:B}):null]}),G?A?l(r.Close,{"aria-label":L,className:_,children:[e(n,{}),e(i,{icon:t,size:20})]}):l("button",{type:"button","aria-label":L,className:_,onClick:()=>k?.(!1),children:[e(n,{}),e(i,{icon:t,size:20})]}):null]}):null,a(q)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",K,O&&(Q||G)?y:"",O?"":"-my-1 py-1"].filter(Boolean).join(" "),children:q}):null,U?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",K,O?y:""].filter(Boolean).join(" "),children:D}):null]});return A?l(r.Root,{open:N,defaultOpen:C,disablePointerDismissal:!I,onOpenChange:(e,l)=>{I||e||"escape-key"!==l.reason?k?.(e):l.cancel()},children:[z?e(r.Trigger,{render:z}):null,l(r.Portal,{children:[e(r.Backdrop,{className:`${h} fixed inset-0 ${u} ${x}`}),e(r.Viewport,{className:`${h} fixed inset-0 flex ${w[$]}`,children:e(r.Popup,{"data-mp-size":R,"data-mp-side":$,"data-mp-mode":j,className:X,style:{...W,...V},children:ee})})]})]}):N??C??1?e("div",{"data-mp-size":R,"data-mp-side":$,"data-mp-mode":j,className:X,style:{...W,...V},children:ee}):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,64 @@
+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 `Nothing here`; pass `false` for a state that is a
+     * glyph and a sentence with no heading over them.
+     */
+    title?: React.ReactNode | false;
+    /**
+     * 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 s}from"@base-ui/react/use-render";import{hasContent as a,PROSE_TEXT as l,SHEET_GAP as i,SHEET_PAD_X as o,SHEET_TITLE as m}from"../../internal/scale";import{CONTAINER_SURFACE as c}from"../../internal/surface";const d={xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},p={xs:"text-[1.5rem]",sm:"text-[1.75rem]",md:"text-[2.25rem]",lg:"text-[2.75rem]",xl:"text-[3.25rem]"};function x(){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:u="md",title:f,icon:h,action:v,render:y,className:N,style:j,children:g,...k},w){const z=void 0===f?"Nothing here":f,$=void 0===h?e(x,{}):h,L=a(z),B=["mp-empty flex w-full flex-col items-center justify-center text-center",o[u],d[u],"text"===n?"":"rounded-mp-md",i[u],c[n],"text-mp-on-surface",N??""].filter(Boolean).join(" ");return s({render:y,ref:w,props:{role:"status","data-mp-size":u,"data-mp-variant":n,className:B,style:j,children:t(r,{children:[a($)?e("span",{className:`text-mp-on-surface-variant flex items-center ${p[u]} [&>svg]:size-[1em]`,children:$}):null,L||a(g)?t("div",{className:`flex max-w-prose flex-col items-center ${i[u]}`,children:[L?e("div",{className:m[u],children:z}):null,a(g)?e("div",{className:`${l[u]} ${L?"text-mp-on-surface-variant":""}`,children:g}):null]}):null,a(v)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:v}):null]}),...k}})});

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,103 @@
+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. */
+    removeLabel?: (name: string) => 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>>;

package/dist/components/file-picker/MPFilePicker.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{MPIcon as t}from"../icon/MPIcon";import{CloseIcon as a,UploadIcon as i}from"../../constants/icons";import{MPStateLayer as o}from"../../internal/StateLayer";import{CONTROL_ICON as l,META_TEXT as s,PROSE_TEXT as c,STACK_GAP as p,hasContent as u}from"../../internal/scale";const m={xs:"p-4",sm:"p-5",md:"p-6",lg:"p-8",xl:"p-10"};export function formatFileSize(e){if(e<1e3)return`${e} B`;const r=["kB","MB","GB","TB"];let n=e/1e3,t=0;for(;n>=1e3&&t<r.length-1;)n/=1e3,t+=1;return`${n<10?n.toFixed(1):Math.round(n)} ${r[t]}`}function d(e,r){const n=e.name.toLowerCase(),t=e.type.toLowerCase();return r.split(",").map(e=>e.trim().toLowerCase()).filter(Boolean).some(e=>e.startsWith(".")?n.endsWith(e):e.endsWith("/*")?t.startsWith(e.slice(0,-1)):t===e)}export const MPFilePicker=n.forwardRef(function({accept:f,multiple:h=!1,maxSize:x,maxFiles:b,value:v,defaultValue:g,onFilesChange:y,onReject:j,label:N,description:k,errorMessage:w,title:z,hint:C,icon:I,showList:B=!0,removeLabel:D=e=>`Remove ${e}`,size:$="md",fullWidth:F=!0,required:L=!1,disabled:M=!1,readOnly:S=!1,name:R,id:T},W){const _=n.useRef(null);n.useImperativeHandle(W,()=>_.current);const[P,E]=n.useState(()=>[...g??[]]),O=v?[...v]:P,q=n.useRef(0),[A,V]=n.useState(!1),G=u(w),H=M||S,Y=n.useId(),J=n.useCallback(e=>{v||E(e),y?.(e)},[y,v]),K=n.useCallback(e=>{const r=[],n=[],t=h?b??Number.POSITIVE_INFINITY:1,a=h?O.length:0;for(const i of e)f&&!d(i,f)?n.push({file:i,reason:"type"}):void 0!==x&&i.size>x?n.push({file:i,reason:"size"}):a+r.length>=t?n.push({file:i,reason:"count"}):r.push(i);return{kept:r,rejections:n}},[f,O.length,b,x,h]),Q=n.useCallback(e=>{const{kept:r,rejections:n}=K(e);n.length>0&&j?.(n),r.length>0&&J(h?[...O,...r]:r)},[K,J,O,h,j]);return r("div",{className:["mp-file-picker flex-col align-top",p[$],F?"flex w-full":"inline-flex"].join(" "),"data-mp-size":$,"data-disabled":M||void 0,"data-invalid":G||void 0,children:[u(N)?r("span",{className:[s,M?"text-mp-on-surface/38":G?"text-mp-error":"text-mp-on-surface-variant"].join(" "),children:[N,L?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{H||(e.preventDefault(),q.current+=1,V(!0))},onDragOver:e=>{H||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{H||(q.current=Math.max(0,q.current-1),0===q.current&&V(!1))},onDrop:e=>{H||(e.preventDefault(),q.current=0,V(!1),Q(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:T,disabled:M,"aria-describedby":u(k)||G?Y:void 0,"aria-invalid":G||void 0,className:["mp-file-picker__zone group relative flex w-full flex-col items-center","justify-center gap-2 text-center","rounded-mp-md box-border border-2 border-dashed","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color,background-color] duration-(--mp-sys-motion-duration-short4)",m[$],c[$],M?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":[S?"cursor-default":"cursor-pointer",G?"border-mp-error":"border-mp-outline-variant","text-mp-on-surface",A?"border-mp-primary bg-mp-primary/8":""].filter(Boolean).join(" ")].filter(Boolean).join(" "),onClick:()=>{!H&&_.current&&(_.current.value="",_.current.click())},children:[H?null:e(o,{layer:"inset-0 rounded-[inherit] bg-mp-primary"}),void 0===I?e(t,{icon:i,size:1.6*l[$],className:M?"":"text-mp-primary"}):u(I)?e("span",{className:M?"":"text-mp-primary",children:I}):null,e("span",{className:"font-medium",children:z??"Drop files here, or click to browse"}),u(C)?e("span",{className:[s,M?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:C}):null]}),e("input",{ref:_,type:"file",name:R,accept:f,multiple:h,required:L&&0===O.length,disabled:H,tabIndex:-1,"aria-hidden":"true",className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>Q(Array.from(e.target.files??[]))})]}),B&&O.length>0?e("ul",{className:["mp-file-picker__list m-0 flex w-full list-none flex-col p-0",p[$]].join(" "),children:O.map((n,i)=>r("li",{className:["rounded-mp-xs bg-mp-surface-container-low flex w-full items-center gap-3","px-3 py-2",c[$],M?"text-mp-on-surface/38":"text-mp-on-surface"].join(" "),children:[e("span",{className:"min-w-0 flex-1 truncate",children:n.name}),e("span",{className:[s,"shrink-0 tabular-nums",M?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:formatFileSize(n.size)}),H?null:r("button",{type:"button","aria-label":D(n.name),className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","cursor-pointer appearance-none items-center justify-center rounded-full","bg-transparent p-0 font-[inherit] outline-none"].join(" "),onClick:()=>J(O.filter((e,r)=>r!==i)),children:[e(o,{}),e(t,{icon:a,size:18})]})]},`${n.name}-${n.size}-${n.lastModified}-${i}`))}):null,G?e("span",{id:Y,className:[s,"text-mp-error"].join(" "),children:w}):u(k)?e("span",{id:Y,className:[s,M?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:k}):null]})});

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

@@ -0,0 +1,2 @@
+export { MPFilePicker, formatFileSize } from './MPFilePicker';
+export type { MPFilePickerProps, MPFileRejection, MPFileRejectionReason } from './MPFilePicker';

package/dist/components/file-picker/index.js

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