material-plus-ui 1.3.1 → 1.4.0

package/dist/components/combobox/MPCombobox.d.ts

@@ -28,7 +28,21 @@ type Selection<Multiple extends boolean | undefined> = Multiple extends true ? M
 export interface MPComboboxProps<Multiple extends boolean | undefined = false> extends MPStyleProps {
     /**
      * The options, as data — the same shape `MPSelect` takes, and for the same
-     * reason: what a caller has is almost always an array already.
+     * reason: what a caller has is almost always an array already.   *
+     * ## How long a list this holds
+     *
+     * Every row is rendered, and there is no windowing. That is the right default
+     * — windowing costs a measured container, a scroll listener and a row height
+     * the component would have to decide for the caller — and it has a ceiling: a
+     * few hundred rows is nothing, a few thousand is a visible pause when the list
+     * opens, and past that the answer is a narrower list rather than a faster one.
+     *
+     * A list somebody has to scroll ten thousand rows of is a list that wanted a
+     * filter. Where it genuinely is that long, window it yourself and pass the
+     * slice.
+     *
+     * `limit` is the lighter tool here: it caps what the *popup* draws while
+     * leaving the filter to search everything.
      */
     items: readonly MPComboboxOption[];
     /**
@@ -54,7 +68,11 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
      * @default true
      */
     allowCustom?: boolean;
-    /** What that row says. Receives the trimmed query. */
+    /**
+     * What that row says. Receives the trimmed query.
+     *
+     * Left out, it is the wording in `locale` with the query set into it.
+     */
     customLabel?: (query: string) => React.ReactNode;
     /**
      * Shows a × that empties the field. Off by default — a field that can be
@@ -63,8 +81,8 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
      */
     clearable?: boolean;
     /**
-     * Shown in the popup when nothing matches and no value may be added.
-     * @default 'No matches'
+     * Shown in the popup when nothing matches and no value may be added. Defaults
+     * to the wording in `locale`.
      */
     emptyMessage?: React.ReactNode;
     /** The most rows the list will show at once. `-1` is all of them. @default -1 */

package/dist/components/combobox/MPCombobox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as i}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip.js";import{MPIcon as r}from"../icon/MPIcon.js";import{AddIcon as o,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons.js";import{MPFieldLabel as d,MPFieldOutline as u,useFloatingLabel as p}from"../../internal/FieldOutline.js";import{fillMessage as h}from"../../internal/i18n.js";import{useMPLocale as f,useMPMessages as g}from"../../internal/locale.js";import{COMMON as b}from"../../internal/messages/common.js";import{MPStateLayer as x}from"../../internal/StateLayer.js";import{MPSupportingText as v}from"../../internal/SupportingText.js";import{CONTROL_ICON as y,PROSE_TEXT as j,hasContent as N}from"../../internal/scale.js";import{FADE as w,PORTAL_LAYER as C}from"../../internal/surface.js";const L={xs:{padding:"ps-2 pe-1",height:"h-8"},sm:{padding:"ps-3 pe-1.5",height:"h-10"},md:{padding:"ps-4 pe-2",height:"h-14"},lg:{padding:"ps-4 pe-2",height:"h-16"},xl:{padding:"ps-5 pe-2.5",height:"h-18"}},I={xs:"min-h-8 py-1",sm:"min-h-10 py-1.5",md:"min-h-14 py-3",lg:"min-h-16 py-3",xl:"min-h-18 py-3"},S={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"};function z(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:M,multiple:O,value:V,defaultValue:k,onValueChange:P,onInputValueChange:q,allowCustom:A=!0,customLabel:T,clearable:$=!1,emptyMessage:R="No matches",limit:_,placeholder:F,label:E,floatingLabel:B=!0,description:G,errorMessage:H,startIcon:W,size:D="md",fullWidth:J=!1,required:K=!1,disabled:Q=!1,readOnly:U=!1,name:X,open:Y,defaultOpen:Z,onOpenChange:ee,clearLabel:ae,openLabel:le,locale:ie,removeLabel:ne,inputRef:te,id:re,className:oe,style:se}){const me=f(ie),ce=g(b,me),de=N(H),ue=!0===O,pe=L[D],he=l.useId(),fe=re??he,ge=l.useMemo(()=>M.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[M]),[be,xe]=l.useState(()=>z(k)),ve=void 0===V?be:z(V),[ye,je]=l.useState(""),{shrunk:Ne,focusProps:we}=p({floating:B&&N(E),filled:ve.length>0||""!==ye,pinned:!!W}),Ce=l.useCallback(e=>ge.find(a=>a.value===e)??{value:e,label:String(e),custom:!0},[ge]),Le=ye.trim(),Ie=Le.toLocaleLowerCase(),Se=""===Le||ge.some(e=>e.label.toLocaleLowerCase()===Ie||String(e.value).toLocaleLowerCase()===Ie)||ve.some(e=>String(e).toLocaleLowerCase()===Ie),ze=!A||U||Q||Se?null:Le,Me=l.useMemo(()=>null===ze?ge:[...ge,{value:ze,label:ze,custom:!0}],[ge,ze]),Oe=ue?ve.map(Ce):ve.length>0?Ce(ve[0]):null;const Ve=/*@__PURE__*/["min-w-0 flex-1 self-stretch bg-transparent font-[inherit] text-inherit outline-none","placeholder:text-mp-on-surface-variant",Q?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),ke=/*@__PURE__*/["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer items-center justify-center","text-mp-on-surface-variant","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),Pe=a=>e(i.Input,{ref:te,id:fe,placeholder:Ne?F:void 0,className:ue?`${Ve} min-w-16 ${a?"ms-1.5":""}`:Ve});return a(n.Root,{disabled:Q,invalid:de,"data-mp-size":D,className:["mp-combobox group flex-col align-top",J?"flex w-full":"inline-flex w-fit",oe??""].filter(Boolean).join(" "),style:se,...we,children:[a(i.Root,{name:X,items:Me,multiple:ue,value:Oe,onValueChange:e=>{!function(e){void 0===V&&xe(e),P?.(ue?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{je(e),q?.(e)},open:Y,defaultOpen:Z,onOpenChange:e=>ee?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:_,disabled:Q,readOnly:U,required:K,children:[a("div",{className:"relative w-full",children:[a(i.InputGroup,{className:["relative flex w-full items-center gap-2",pe.padding,ue?I[D]:pe.height,j[D],Q?"cursor-default":"cursor-text"].join(" "),children:[W?e("span",{className:["flex shrink-0 items-center",Q?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:W}):null,ue?e(i.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(i.Value,{children:n=>a(l.Fragment,{children:[n.map(a=>e(i.Chip,{render:e(t,{variant:de?"outlined":"tonal",color:de?"error":"primary",size:S[D],disabled:Q,endIcon:U||Q?null:e(i.ChipRemove,{"aria-label":ne?ne(a.label):h(ce.removeNamed,{label:a.label}),className:"flex cursor-pointer items-center opacity-70 hover:opacity-100",children:e(r,{icon:c,size:16})})}),children:a.label},String(a.value))),Pe(n.length>0)]})})}):Pe(!1),$&&!U?a(i.Clear,{"aria-label":ae??ce.clear,className:ke,children:[e(x,{}),e(r,{icon:c,size:y[D]})]}):null,a(i.Trigger,{"aria-label":le??ce.open,className:ke,children:[e(x,{}),e(i.Icon,{className:["relative flex items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:m,size:y[D]})})]})]}),e(u,{label:E,required:K,notched:Ne}),N(E)?e(d,{size:D,label:E,required:K,htmlFor:fe,shrunk:Ne}):null]}),e(i.Portal,{children:e(i.Positioner,{className:C,sideOffset:4,children:a(i.Popup,{className:["mp-combobox__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface w-[var(--anchor-width)] outline-none","max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",j[D],w].join(" "),children:[e(i.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:R}),e(i.List,{children:l=>a(i.Item,{value:l,disabled:l.disabled,className:["mp-combobox__item group rounded-mp-xs relative flex cursor-pointer","items-center gap-3 py-2 ps-2 pe-3 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:bg-mp-secondary-container","data-selected:text-mp-on-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(x,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:l.custom?e(r,{icon:o,size:18}):e(i.ItemIndicator,{children:e(r,{icon:s,size:18})})}),e("span",{className:"min-w-0 flex-1 truncate",children:l.custom?T?T(l.label):`Add “${l.label}”`:l.label})]},`${l.custom?"custom:":""}${String(l.value)}`)})]})})})]}),e(v,{description:G,errorMessage:H,className:pe.padding})]})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as i}from"@base-ui/react/combobox";import{Field as n}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip.js";import{MPIcon as o}from"../icon/MPIcon.js";import{AddIcon as r,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons.js";import{MPFieldLabel as d,MPFieldOutline as p,useFloatingLabel as u}from"../../internal/FieldOutline.js";import{fillMessage as h}from"../../internal/i18n.js";import{useMPLocale as f,useMPMessages as g}from"../../internal/locale.js";import{COMBOBOX as b}from"../../internal/messages/combobox.js";import{COMMON as x}from"../../internal/messages/common.js";import{MPStateLayer as v}from"../../internal/StateLayer.js";import{MPSupportingText as y}from"../../internal/SupportingText.js";import{CONTROL_ICON as j,PROSE_TEXT as w,hasContent as N}from"../../internal/scale.js";import{FADE as C,PORTAL_LAYER as L}from"../../internal/surface.js";const S={xs:{padding:"ps-2 pe-1",height:"h-8"},sm:{padding:"ps-3 pe-1.5",height:"h-10"},md:{padding:"ps-4 pe-2",height:"h-14"},lg:{padding:"ps-4 pe-2",height:"h-16"},xl:{padding:"ps-5 pe-2.5",height:"h-18"}},I={xs:"min-h-8 py-1",sm:"min-h-10 py-1.5",md:"min-h-14 py-3",lg:"min-h-16 py-3",xl:"min-h-18 py-3"},z={xs:"xs",sm:"xs",md:"sm",lg:"md",xl:"md"};function M(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:O,multiple:V,value:k,defaultValue:P,onValueChange:$,onInputValueChange:q,allowCustom:T=!0,customLabel:A,clearable:R=!1,emptyMessage:_,limit:F,placeholder:E,label:B,floatingLabel:G=!0,description:H,errorMessage:W,startIcon:D,size:J="md",fullWidth:K=!1,required:Q=!1,disabled:U=!1,readOnly:X=!1,name:Y,open:Z,defaultOpen:ee,onOpenChange:ae,clearLabel:le,openLabel:ie,locale:ne,removeLabel:te,inputRef:oe,id:re,className:se,style:me}){const ce=f(ne),de=g(x,ce),pe=g(b,ce),ue=N(W),he=!0===V,fe=S[J],ge=l.useId(),be=re??ge,xe=l.useMemo(()=>O.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[O]),[ve,ye]=l.useState(()=>M(P)),je=void 0===k?ve:M(k),[we,Ne]=l.useState(""),{shrunk:Ce,focusProps:Le}=u({floating:G&&N(B),filled:je.length>0||""!==we,pinned:!!D}),Se=l.useMemo(()=>new Map(xe.map(e=>[e.value,e])),[xe]),Ie=l.useMemo(()=>{const e=new Set;for(const a of xe)e.add(a.label.toLocaleLowerCase()),e.add(String(a.value).toLocaleLowerCase());return e},[xe]),ze=l.useCallback(e=>Se.get(e)??{value:e,label:String(e),custom:!0},[Se]),Me=we.trim(),Oe=Me.toLocaleLowerCase(),Ve=""===Me||Ie.has(Oe)||je.some(e=>String(e).toLocaleLowerCase()===Oe),ke=!T||X||U||Ve?null:Me,Pe=l.useMemo(()=>null===ke?xe:[...xe,{value:ke,label:ke,custom:!0}],[xe,ke]),$e=he?je.map(ze):je.length>0?ze(je[0]):null;const qe=/*@__PURE__*/["min-w-0 flex-1 self-stretch bg-transparent font-[inherit] text-inherit outline-none","placeholder:text-mp-on-surface-variant",U?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Te=/*@__PURE__*/["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer items-center justify-center","text-mp-on-surface-variant","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),Ae=a=>e(i.Input,{ref:oe,id:be,placeholder:Ce?E:void 0,className:he?`${qe} min-w-16 ${a?"ms-1.5":""}`:qe});return a(n.Root,{disabled:U,invalid:ue,"data-mp-size":J,className:["mp-combobox group flex-col align-top",K?"flex w-full":"inline-flex w-fit",se??""].filter(Boolean).join(" "),style:me,...Le,children:[a(i.Root,{name:Y,items:Pe,multiple:he,value:$e,onValueChange:e=>{!function(e){void 0===k&&ye(e),$?.(he?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Ne(e),q?.(e)},open:Z,defaultOpen:ee,onOpenChange:e=>ae?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:F,disabled:U,readOnly:X,required:Q,children:[a("div",{className:"relative w-full",children:[a(i.InputGroup,{className:["relative flex w-full items-center gap-2",fe.padding,he?I[J]:fe.height,w[J],U?"cursor-default":"cursor-text"].join(" "),children:[D?e("span",{className:["flex shrink-0 items-center",U?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:D}):null,he?e(i.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(i.Value,{children:n=>a(l.Fragment,{children:[n.map((a,l)=>e(i.Chip,{render:e(t,{variant:ue?"outlined":"tonal",color:ue?"error":"primary",size:z[J],disabled:U,endIcon:X||U?null:e(i.ChipRemove,{"aria-label":te?te(a.label):h(de.removeNamed,{label:a.label}),className:"flex cursor-pointer items-center opacity-70 hover:opacity-100",children:e(o,{icon:c,size:16})})}),children:a.label},`${l}:${String(a.value)}`)),Ae(n.length>0)]})})}):Ae(!1),R&&!X?a(i.Clear,{"aria-label":le??de.clear,className:Te,children:[e(v,{}),e(o,{icon:c,size:j[J]})]}):null,a(i.Trigger,{"aria-label":ie??de.open,className:Te,children:[e(v,{}),e(i.Icon,{className:["relative flex items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180"].join(" "),children:e(o,{icon:m,size:j[J]})})]})]}),e(p,{label:B,required:Q,notched:Ce}),N(B)?e(d,{size:J,label:B,required:Q,htmlFor:be,shrunk:Ce}):null]}),e(i.Portal,{children:e(i.Positioner,{className:L,sideOffset:4,children:a(i.Popup,{className:["mp-combobox__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container p-2","text-mp-on-surface w-[var(--anchor-width)] outline-none","max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain",w[J],C].join(" "),children:[e(i.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:_??pe.empty}),e(i.List,{children:(l,n)=>a(i.Item,{value:l,disabled:l.disabled,className:["mp-combobox__item group rounded-mp-xs relative flex cursor-pointer","items-center gap-3 py-2 ps-2 pe-3 select-none outline-none","transition-[background-color,color]","duration-(--mp-sys-motion-duration-short4)","data-selected:bg-mp-secondary-container","data-selected:text-mp-on-secondary-container","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default"].join(" "),children:[e(v,{className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),e("span",{className:"flex size-5 shrink-0 items-center justify-center",children:l.custom?e(o,{icon:r,size:18}):e(i.ItemIndicator,{children:e(o,{icon:s,size:18})})}),e("span",{className:"min-w-0 flex-1 truncate",children:l.custom?A?A(l.label):h(pe.add,{label:l.label}):l.label})]},`${n}:${l.custom?"custom:":""}${String(l.value)}`)})]})})})]}),e(y,{description:H,errorMessage:W,className:fe.padding})]})}

package/dist/components/command-palette/MPCommandPalette.d.ts

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import type { MPColor, MPSize } from '../../types.js';
+/** One thing the palette can do. */
+export interface MPCommand {
+    /** What identifies the command. */
+    value: string;
+    /** What the row says, and what the query is matched against. */
+    label: string;
+    /** A second line under it — where the command goes, or what it changes. */
+    description?: React.ReactNode;
+    /** A glyph before the label. */
+    icon?: React.ReactNode;
+    /**
+     * The keystroke that does the same thing, set at the end of the row.
+     *
+     * Written the way [MPShortcut](../display/shortcut) writes them, so `Mod`
+     * resolves per platform. The palette **does not bind it** — the application
+     * does, and this is the label for the binding it already has.
+     */
+    shortcut?: string;
+    /**
+     * The heading this command sits under.
+     *
+     * Commands are drawn in the order they are given and a heading appears each
+     * time the group changes, so a group's commands have to be listed together.
+     */
+    group?: string;
+    /**
+     * Extra words the query is matched against but that are never drawn — the name
+     * somebody else's product gives the same command, an abbreviation, the word
+     * the reader would have searched for.
+     */
+    keywords?: readonly string[];
+    /** In the list but not runnable. */
+    disabled?: boolean;
+    /** What running it does. */
+    onSelect?: () => void;
+}
+export interface MPCommandPaletteProps {
+    /** Everything the palette can do. */
+    items: readonly MPCommand[];
+    /** Whether the palette is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /**
+     * Whether it starts open, for an uncontrolled one.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Called when a command is run, after its own `onSelect`. The palette closes
+     * either way.
+     */
+    onSelect?: (item: MPCommand) => void;
+    /**
+     * The keystroke that opens the palette, bound on the window.
+     *
+     * Written the way [MPShortcut](../display/shortcut) writes them, so `Mod` is
+     * Command on a Mac and Control everywhere else — the same vocabulary the rows
+     * *draw*, because a shortcut a component displays and one it binds have to be
+     * spelled the same way or the label is a claim nobody checked. `false` binds
+     * nothing.
+     * @default 'Mod+K'
+     */
+    shortcut?: string | false;
+    /** How wide the sheet may get. A number in pixels, or any CSS length. */
+    width?: number | string;
+    /**
+     * How tall the list may get before it scrolls.
+     * @default 320
+     */
+    maxHeight?: number | string;
+    /**
+     * The row height and type scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the highlighted row and the caret read.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * Which language the placeholder, the empty line and the dialog's own name are
+     * written in. Falls back to the nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** The placeholder in the field. Defaults to the wording in `locale`. */
+    placeholder?: string;
+    /** The line where the rows would be, when nothing matched. */
+    emptyMessage?: React.ReactNode;
+    /** The accessible name of the dialog, which has no visible title. */
+    label?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Everything an application can do, behind one field.
+ *
+ * The shape a keyboard-first product takes once it has more actions than a menu
+ * bar can hold: the reader types what they want instead of remembering where it
+ * was put.
+ *
+ * ## What it is not
+ *
+ * Not an [MPMenu](./menu). A menu is a short list in one place, and every row is
+ * visible before you go looking for it — that is the whole of what a menu is
+ * good at, and it is why a menu of sixty rows is not a menu.
+ *
+ * Not an [MPCombobox](./combobox) either, and this one is worth being precise
+ * about: what comes back from a combobox is a **value**, which the caller then
+ * does something with. What comes back from here is *something happening*. The
+ * row is the action, `onSelect` runs it, and the sheet closes because there is
+ * nothing left to decide.
+ *
+ * ## The surface is MD3's search view
+ *
+ * `surface-container-high` at `corner-extra-large` under elevation 3 — which is
+ * MD3's own docked search view, and happens to be the same three decisions
+ * [MPDialog](../feedback/dialog) makes. That is not a coincidence worth hiding:
+ * a sheet that has taken the page over a scrim is one object in this system,
+ * whether it is asking a question or taking a search.
+ *
+ * ## Where the behaviour comes from
+ *
+ * Base UI's `Autocomplete` owns the list — the highlight the pointer and the
+ * arrow keys **share**, `aria-activedescendant`, Enter running the highlighted
+ * row — and its `Dialog` owns the sheet, the scrim, the focus trap and putting
+ * the focus back wherever the reader was. What is left here is the surface, the
+ * matching, and the key that opens it.
+ */
+export declare function MPCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, size, color, locale: localeProp, placeholder, emptyMessage, label, className, style }: MPCommandPaletteProps): React.JSX.Element;

package/dist/components/command-palette/MPCommandPalette.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as n}from"@base-ui/react/autocomplete";import{Dialog as r}from"@base-ui/react/dialog";import{MPShortcut as l}from"../shortcut/MPShortcut.js";import{accentSlots as o}from"../../internal/accent.js";import{cssLength as s}from"../../internal/length.js";import{matchesShortcut as i,useDetectedOS as m}from"../../internal/keys.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{COMMAND as d}from"../../internal/messages/command.js";import{MPStateLayer as u}from"../../internal/StateLayer.js";import{hasContent as f,META_TEXT as h,PROSE_TEXT as x}from"../../internal/scale.js";import{FADE as g,PORTAL_LAYER as y,SCRIM as v,SHEET_MOTION as w}from"../../internal/surface.js";const b={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},j={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-16",xl:"h-18"},N={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},$={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"};function k(e){return[e.label,e.group??"",...e.keywords??[]].join("\n").toLowerCase()}export function MPCommandPalette({items:C,open:S,defaultOpen:_=!1,onOpenChange:L,onSelect:M,shortcut:P="Mod+K",width:E,maxHeight:z=320,size:O="md",color:V="primary",locale:B,placeholder:F,emptyMessage:H,label:I,className:R,style:D}){const K=c(B),T=p(d,K),W=m(),[q,A]=a.useState(_),[G,J]=a.useState(""),Q=S??q,U=a.useCallback(e=>{e||J(""),void 0===S&&A(e),L?.(e)},[S,L]);a.useEffect(()=>{if(!1===P)return;const e=e=>{i(e,P,W)&&(e.preventDefault(),U(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[P,W,U]);const X=a.useMemo(()=>C.map(k),[C]),Y=a.useMemo(()=>{if(""===G)return C;const e=G.toLowerCase();return C.filter((t,a)=>X[a].includes(e))},[C,X,G]),Z=s(E),ee=s(z);return e(r.Root,{open:Q,onOpenChange:U,children:t(r.Portal,{children:[e(r.Backdrop,{className:`${y} fixed inset-0 ${g} ${v}`}),e(r.Viewport,{className:`${y} fixed inset-0 flex justify-center p-4 pt-[12vh]`,children:e(r.Popup,{"aria-label":I??T.label,"data-mp-size":O,className:["mp-command-palette relative flex w-full flex-col self-start overflow-hidden","bg-mp-surface-container-high text-mp-on-surface shadow-mp-3 rounded-mp-xl","outline-none",x[O],void 0===Z?b[O]:"",`transition-[opacity,scale] ${w}`,"motion-safe:data-starting-style:scale-95 motion-safe:data-ending-style:scale-95",R??""].filter(Boolean).join(" "),style:{...o(V),...void 0===Z?null:{maxWidth:Z},...D},children:t(n.Root,{open:!0,mode:"list",items:Y,filter:null,value:G,onValueChange:e=>J(e),itemToStringValue:e=>e.label,children:[e("div",{className:`border-mp-outline-variant flex shrink-0 items-center border-b ${N[O]}`,children:e(n.Input,{autoFocus:!0,placeholder:F??T.search,className:["mp-command-palette__input min-w-0 flex-1 bg-transparent font-[inherit]","text-inherit outline-none","placeholder:text-mp-on-surface-variant caret-(--_mp-accent)",j[O]].join(" ")})}),e(n.List,{className:"mp-command-palette__list min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:ee},children:(r,o)=>t(a.Fragment,{children:[r.group&&r.group!==Y[o-1]?.group?e("div",{role:"presentation",className:`text-mp-on-surface-variant pt-2 pb-1 font-medium ${N[O]} ${h}`,children:r.group}):null,t(n.Item,{index:o,value:r,disabled:r.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),M?.(e),U(!1))})(r),className:["mp-command-palette__row group rounded-mp-xs relative flex cursor-pointer","items-center gap-3 select-none outline-none","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",N[O],$[O]].join(" "),children:[e(u,{layer:"inset-0 rounded-[inherit] bg-current",className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),f(r.icon)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:r.icon}):null,t("span",{className:"relative flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:r.label}),f(r.description)?e("span",{className:`text-mp-on-surface-variant truncate ${h}`,children:r.description}):null]}),r.shortcut?e(l,{size:"xs",keys:r.shortcut,className:"relative shrink-0"}):null]})]},`${o}:${r.value}`)}),e(n.Empty,{className:`text-mp-on-surface-variant py-6 text-center ${N[O]} ${h}`,children:H??T.empty})]})})})]})})}

package/dist/components/command-palette/index.d.ts

@@ -0,0 +1,2 @@
+export { MPCommandPalette } from './MPCommandPalette.js';
+export type { MPCommand, MPCommandPaletteProps } from './MPCommandPalette.js';

package/dist/components/command-palette/index.js

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

package/dist/components/container/MPContainer.js

@@ -1 +1 @@
-import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{SHEET_PAD_X as m}from"../../internal/scale.js";const a={xs:"max-w-[30rem]",sm:"max-w-[37.5rem]",md:"max-w-[52.5rem]",lg:"max-w-[75rem]",xl:"max-w-[100rem]"};export const MPContainer=/*@__PURE__*/e.forwardRef(function({maxWidth:e="none",padded:n=!0,size:o="md",centered:t=!0,render:s,className:d,children:i,...c},l){return r({render:s,ref:l,props:{"data-mp-size":o,className:["mp-container block w-full","box-border","none"===e?"":a[e],t?"mx-auto":"",n?m[o]:"",d??""].filter(Boolean).join(" "),children:i,...c}})});
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{MEASURE as n,SHEET_PAD_X as o}from"../../internal/scale.js";export const MPContainer=/*@__PURE__*/e.forwardRef(function({maxWidth:e="none",padded:a=!0,size:t="md",centered:i=!0,render:d,className:m,children:s,...c},l){return r({render:d,ref:l,props:{"data-mp-size":t,className:["mp-container block w-full","box-border","none"===e?"":n[e],i?"mx-auto":"",a?o[t]:"",m??""].filter(Boolean).join(" "),children:s,...c}})});

package/dist/components/date-time-picker/MPDateTimePicker.d.ts

@@ -40,6 +40,11 @@ export interface MPDateTimePickerProps extends MPPickerShellProps {
     /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
     hour12?: boolean;
     showSeconds?: boolean;
+    /**
+     * How far apart the rows of each clock column are. Rounded, and held between 1
+     * and the column's own span — see [MPTimePicker](./time-picker).
+     * @default 1
+     */
     hourStep?: number;
     minuteStep?: number;
     secondStep?: number;

package/dist/components/dialog/MPDialog.js

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

package/dist/components/divider/MPDivider.js

@@ -1,2 +1,2 @@
 "use client";
-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.js";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=/*@__PURE__*/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}`})]})});
+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.js";import{cssLength as i}from"../../internal/length.js";const o="[border-color:var(--_mp-line)]",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=/*@__PURE__*/t.forwardRef(function({orientation:t="horizontal",color:d,size:p="md",length:c,thickness:f,textAlign:h="center",className:x,style:u,children:v,...b},w){const g="vertical"===t,_=a(v),j={"--_mp-line":d?`var(--_mp-color-${d})`:"var(--_mp-color-outline-variant)","--_mp-rule":i(f)??"1px"},$=i(c),k={...j,...void 0===$?null:g?{height:$}:{width:$},...u};if(!_)return e(l,{ref:w,orientation:t,"data-mp-size":p,className:["mp-divider",g?"w-0 border-l [border-left-width:var(--_mp-rule)] "+(void 0===$?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--_mp-rule)]",o,x??""].filter(Boolean).join(" "),style:k,...b});const[N,z]=n[t][h],y=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":p,className:["mp-divider flex items-center",g?"w-auto flex-col "+(void 0===$?"self-stretch":""):"w-full",m[p],x??""].filter(Boolean).join(" "),style:k,...b,children:[e("span",{"aria-hidden":"true",className:`${y} ${N} ${o}`}),e("span",{className:["text-mp-on-surface-variant shrink-0 whitespace-nowrap",s[p],g?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:v}),e("span",{"aria-hidden":"true",className:`${y} ${z} ${o}`})]})});

package/dist/components/drawer/MPDrawer.js

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

package/dist/components/fieldset/MPFieldset.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import type { MPSize } from '../../types.js';
+export interface MPFieldsetProps extends Omit<React.ComponentPropsWithoutRef<'fieldset'>, 'color'> {
+    /**
+     * What the group is called.
+     *
+     * It becomes part of the accessible name of every control inside, so it has to
+     * be a phrase that still reads correctly in front of each of them — "Billing
+     * address", not "Where should we send it?".
+     */
+    legend?: React.ReactNode;
+    /** A line under the legend. */
+    description?: React.ReactNode;
+    /**
+     * Disables every control inside at once, the way a `<fieldset>` always has.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The legend's type scale and the gap the controls stand at.
+     * @default 'md'
+     */
+    size?: MPSize;
+    children?: React.ReactNode;
+}
+/**
+ * A group of controls that answer one question together, with a name on it.
+ *
+ * ## Why it draws no surface
+ *
+ * Because a group of fields is a **grouping** and not a sheet, and the sheet
+ * already exists: put this inside an [MPCard](../layout/card) or an
+ * [MPBox](../layout/box) when one is wanted. A fieldset that painted its own
+ * would be a second sheet inside the first the moment anybody did.
+ *
+ * What it owns instead is the legend, the gap the controls stand at, and the one
+ * thing only a real `<fieldset>` can do: **`disabled` reaches every control
+ * inside it**, including ones a component three levels down rendered and never
+ * heard of it. That is not something a context could promise.
+ *
+ * ## Why the legend is not a `<legend>`
+ *
+ * It is a `<div>` pointed at by `aria-labelledby` — Base UI's decision, and the
+ * one that makes the group a normal flex container. A real rendered `<legend>`
+ * is lifted out of its fieldset's content box by every browser, so a `gap` would
+ * put no space at all under it and the first control would sit against the name
+ * of the group.
+ *
+ * The accessible name is the same either way, which is the only part that had to
+ * survive.
+ */
+export declare const MPFieldset: React.ForwardRefExoticComponent<MPFieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/components/fieldset/MPFieldset.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as s}from"react/jsx-runtime";import*as l from"react";import{Fieldset as a}from"@base-ui/react/fieldset";import{hasContent as r,META_TEXT as n,SHEET_GAP as i,SHEET_TITLE as t,STACK_GAP as o}from"../../internal/scale.js";export const MPFieldset=/*@__PURE__*/l.forwardRef(function({legend:l,description:m,disabled:c=!1,size:d="md",className:f,children:p,...x},u){const h=r(l)||r(m);return s(a.Root,{ref:u,disabled:c,"data-mp-size":d,className:["mp-fieldset flex min-w-0 flex-col","m-0 border-0 p-0",i[d],f??""].filter(Boolean).join(" "),...x,children:[h?s(a.Legend,{className:`mp-fieldset__legend flex min-w-0 flex-col p-0 ${o[d]}`,children:[r(l)?e("span",{className:`text-mp-on-surface ${t[d]}`,children:l}):null,r(m)?e("span",{className:`text-mp-on-surface-variant ${n}`,children:m}):null]}):null,p]})});

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

@@ -0,0 +1,2 @@
+export { MPFieldset } from './MPFieldset.js';
+export type { MPFieldsetProps } from './MPFieldset.js';

package/dist/components/fieldset/index.js

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

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

@@ -52,7 +52,7 @@ export interface MPFilePickerProps extends MPStyleProps {
     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' */
+    /** The line inside the box. Defaults to the wording in `locale`. */
     title?: React.ReactNode;
     /** The line under it — what is accepted, how big, how many. */
     hint?: React.ReactNode;
@@ -68,8 +68,9 @@ export interface MPFilePickerProps extends MPStyleProps {
      */
     removeLabel?: (name: string) => string;
     /**
-     * Which language the remove buttons' default names are written in. Falls back
-     * to the nearest `MPLocaleProvider`, then to English.
+     * Which language the box's own words are written in — the prompt inside it and
+     * the remove buttons' names. Falls back to the nearest `MPLocaleProvider`,
+     * then to English.
      */
     locale?: string;
     /** Marks the field required. */

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

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{MPIcon as t}from"../icon/MPIcon.js";import{CloseIcon as a,UploadIcon as i}from"../../constants/icons.js";import{fillMessage as o}from"../../internal/i18n.js";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{CONTROL_ICON as m,META_TEXT as u,PROSE_TEXT as d,STACK_GAP as f,hasContent as h}from"../../internal/scale.js";const x={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 b(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=/*@__PURE__*/n.forwardRef(function({accept:v,multiple:g=!1,maxSize:j,maxFiles:y,value:N,defaultValue:k,onFilesChange:w,onReject:z,label:C,description:I,errorMessage:B,title:D,hint:F,icon:L,showList:M=!0,removeLabel:S,locale:$,size:T="md",fullWidth:W=!0,required:_=!1,disabled:P=!1,readOnly:R=!1,name:E,id:O},q){const A=l($),V=s(c,A),G=n.useRef(null);n.useImperativeHandle(q,()=>G.current,[]);const[H,Y]=n.useState(()=>[...k??[]]),J=N?[...N]:H,K=n.useRef(0),[Q,U]=n.useState(!1),X=h(B),Z=P||R,ee=n.useId(),re=n.useId(),ne=n.useCallback(e=>{N||Y(e),w?.(e)},[w,N]),te=n.useCallback(e=>{const r=[],n=[],t=g?y??Number.POSITIVE_INFINITY:1,a=g?J.length:0;for(const i of e)v&&!b(i,v)?n.push({file:i,reason:"type"}):void 0!==j&&i.size>j?n.push({file:i,reason:"size"}):a+r.length>=t?n.push({file:i,reason:"count"}):r.push(i);return{kept:r,rejections:n}},[v,J.length,y,j,g]),ae=n.useCallback(e=>{const{kept:r,rejections:n}=te(e);n.length>0&&z?.(n),r.length>0&&ne(g?[...J,...r]:r)},[te,ne,J,g,z]);return r("div",{className:["mp-file-picker flex-col align-top",f[T],W?"flex w-full":"inline-flex"].join(" "),"data-mp-size":T,"data-disabled":P||void 0,"data-invalid":X||void 0,children:[h(C)?r("span",{id:re,className:[u,P?"text-mp-on-surface/38":X?"text-mp-error":"text-mp-on-surface-variant"].join(" "),children:[C,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,r("div",{className:"flex w-full flex-col",onDragEnter:e=>{Z||(e.preventDefault(),K.current+=1,U(!0))},onDragOver:e=>{Z||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{Z||(K.current=Math.max(0,K.current-1),0===K.current&&U(!1))},onDrop:e=>{Z||(e.preventDefault(),K.current=0,U(!1),ae(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:O,disabled:P,"aria-describedby":h(I)||X?ee:void 0,"aria-invalid":X||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)",x[T],d[T],P?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":[R?"cursor-default":"cursor-pointer",X?"border-mp-error":"border-mp-outline-variant","text-mp-on-surface",Q?"border-mp-primary bg-mp-primary/8":""].filter(Boolean).join(" ")].filter(Boolean).join(" "),onClick:()=>{!Z&&G.current&&(G.current.value="",G.current.click())},children:[Z?null:e(p,{layer:"inset-0 rounded-[inherit] bg-mp-primary"}),void 0===L?e(t,{icon:i,size:1.6*m[T],className:P?"":"text-mp-primary"}):h(L)?e("span",{className:P?"":"text-mp-primary",children:L}):null,e("span",{className:"font-medium",children:D??"Drop files here, or click to browse"}),h(F)?e("span",{className:[u,P?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:F}):null]}),e("input",{ref:G,type:"file",name:E,accept:v,multiple:g,required:_&&0===J.length,disabled:Z,tabIndex:-1,"aria-labelledby":h(C)?re:void 0,"aria-describedby":h(I)||X?ee:void 0,className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>ae(Array.from(e.target.files??[]))})]}),M&&J.length>0?e("ul",{className:["mp-file-picker__list m-0 flex w-full list-none flex-col p-0",f[T]].join(" "),children:J.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",d[T],P?"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:[u,"shrink-0 tabular-nums",P?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:formatFileSize(n.size)}),Z?null:r("button",{type:"button","aria-label":S?S(n.name):o(V.removeNamed,{label: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:()=>ne(J.filter((e,r)=>r!==i)),children:[e(p,{}),e(t,{icon:a,size:18})]})]},`${n.name}-${n.size}-${n.lastModified}-${i}`))}):null,X?e("span",{id:ee,className:[u,"text-mp-error"].join(" "),children:B}):h(I)?e("span",{id:ee,className:[u,P?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:I}):null]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as n from"react";import{MPIcon as t}from"../icon/MPIcon.js";import{CloseIcon as a,UploadIcon as i}from"../../constants/icons.js";import{fillMessage as o}from"../../internal/i18n.js";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FILE_PICKER as m}from"../../internal/messages/file-picker.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{CONTROL_ICON as u,META_TEXT as d,PROSE_TEXT as f,STACK_GAP as h,hasContent as x}from"../../internal/scale.js";const b={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 v(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=/*@__PURE__*/n.forwardRef(function({accept:g,multiple:j=!1,maxSize:y,maxFiles:N,value:k,defaultValue:z,onFilesChange:w,onReject:C,label:I,description:B,errorMessage:D,title:F,hint:L,icon:M,showList:S=!0,removeLabel:$,locale:T,size:W="md",fullWidth:_=!0,required:P=!1,disabled:R=!1,readOnly:E=!1,name:O,id:q},A){const V=l(T),G=s(c,V),H=s(m,V),Y=n.useRef(null);n.useImperativeHandle(A,()=>Y.current,[]);const[J,K]=n.useState(()=>[...z??[]]),Q=k?[...k]:J,U=n.useRef(0),[X,Z]=n.useState(!1),ee=x(D),re=R||E,ne=n.useId(),te=n.useId(),ae=n.useCallback(e=>{k||K(e),w?.(e)},[w,k]),ie=n.useCallback(e=>{const r=[],n=[],t=j?N??Number.POSITIVE_INFINITY:1,a=j?Q.length:0;for(const i of e)g&&!v(i,g)?n.push({file:i,reason:"type"}):void 0!==y&&i.size>y?n.push({file:i,reason:"size"}):a+r.length>=t?n.push({file:i,reason:"count"}):r.push(i);return{kept:r,rejections:n}},[g,Q.length,N,y,j]),oe=n.useCallback(e=>{const{kept:r,rejections:n}=ie(e);n.length>0&&C?.(n),r.length>0&&ae(j?[...Q,...r]:r)},[ie,ae,Q,j,C]);return r("div",{className:["mp-file-picker flex-col align-top",h[W],_?"flex w-full":"inline-flex"].join(" "),"data-mp-size":W,"data-disabled":R||void 0,"data-invalid":ee||void 0,children:[x(I)?r("span",{id:te,className:[d,R?"text-mp-on-surface/38":ee?"text-mp-error":"text-mp-on-surface-variant"].join(" "),children:[I,P?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,r("div",{className:"relative flex w-full flex-col",onDragEnter:e=>{re||(e.preventDefault(),U.current+=1,Z(!0))},onDragOver:e=>{re||(e.preventDefault(),e.dataTransfer.dropEffect="copy")},onDragLeave:()=>{re||(U.current=Math.max(0,U.current-1),0===U.current&&Z(!1))},onDrop:e=>{re||(e.preventDefault(),U.current=0,Z(!1),oe(Array.from(e.dataTransfer.files)))},children:[r("button",{type:"button",id:q,disabled:R,"aria-describedby":x(B)||ee?ne:void 0,"aria-invalid":ee||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)",b[W],f[W],R?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":[E?"cursor-default":"cursor-pointer",ee?"border-mp-error":"border-mp-outline-variant","text-mp-on-surface",X?"border-mp-primary bg-mp-primary/8":""].filter(Boolean).join(" ")].filter(Boolean).join(" "),onClick:()=>{!re&&Y.current&&(Y.current.value="",Y.current.click())},children:[re?null:e(p,{layer:"inset-0 rounded-[inherit] bg-mp-primary"}),void 0===M?e(t,{icon:i,size:1.6*u[W],className:R?"":"text-mp-primary"}):x(M)?e("span",{className:R?"":"text-mp-primary",children:M}):null,e("span",{className:"font-medium",children:F??H.prompt}),x(L)?e("span",{className:[d,R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:L}):null]}),e("input",{ref:Y,type:"file",name:O,accept:g,multiple:j,required:P&&0===Q.length,disabled:re,tabIndex:-1,"aria-labelledby":x(I)?te:void 0,"aria-describedby":x(B)||ee?ne:void 0,className:"absolute size-px overflow-hidden opacity-0 [clip-path:inset(50%)]",onChange:e=>oe(Array.from(e.target.files??[]))})]}),S&&Q.length>0?e("ul",{className:["mp-file-picker__list m-0 flex w-full list-none flex-col p-0",h[W]].join(" "),children:Q.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",f[W],R?"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:[d,"shrink-0 tabular-nums",R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:formatFileSize(n.size)}),re?null:r("button",{type:"button","aria-label":$?$(n.name):o(G.removeNamed,{label: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:()=>ae(Q.filter((e,r)=>r!==i)),children:[e(p,{}),e(t,{icon:a,size:18})]})]},`${n.name}-${n.size}-${n.lastModified}-${i}`))}):null,ee?e("span",{id:ne,className:[d,"text-mp-error"].join(" "),children:D}):x(B)?e("span",{id:ne,className:[d,R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:B}):null]})});

package/dist/components/floating-action-button/MPFloatingActionButton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Button as o}from"@base-ui/react/button";import{accentSlots as n}from"../../internal/accent.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{hasContent as s}from"../../internal/scale.js";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"bg-mp-surface-container-high text-(--_mp-accent)"},m={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},l={xs:"min-w-10 gap-0 px-0",sm:"min-w-12 gap-0 px-0",md:"min-w-14 gap-0 px-0",lg:"min-w-18 gap-0 px-0",xl:"min-w-24 gap-0 px-0"},p={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},d={xs:24,sm:24,md:24,lg:30,xl:36},f={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"},c={xs:"min-w-16 gap-1.5 px-3",sm:"min-w-18 gap-2 px-4",md:"min-w-20 gap-2 px-4",lg:"min-w-24 gap-2.5 px-5",xl:"min-w-28 gap-3 px-6"},x={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},u={"top-start":"top-(--_mp-fab-offset) start-(--_mp-fab-offset)","top-end":"top-(--_mp-fab-offset) end-(--_mp-fab-offset)","bottom-start":"bottom-(--_mp-fab-offset) start-(--_mp-fab-offset)","bottom-end":"bottom-(--_mp-fab-offset) end-(--_mp-fab-offset)"};export const MPFloatingActionButton=/*@__PURE__*/a.forwardRef(function({icon:a,label:b,extended:g=!1,variant:h="tonal",color:w="primary",size:y="md",position:_="fixed",corner:j="bottom-end",offset:v=16,disabled:k=!1,type:z="button",className:N,style:$,...B},A){return e(o,{ref:A,type:z,disabled:k,"aria-label":b,"data-mp-size":y,"data-mp-variant":h,className:["mp-fab group inline-flex shrink-0 items-center justify-center","box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,box-shadow,color,min-width,padding,gap]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",p[y],m[y],f[y],g?c[y]:l[y],k?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${r[h]} shadow-mp-3`,"static"===_?"relative":`${x[_]} ${u[j]}`,N??""].filter(Boolean).join(" "),style:{...n(w),"--_mp-fab-offset":"number"==typeof v?`${v}px`:v,...$},...B,children:[k?null:t(i,{}),s(a)?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:d[y],height:d[y]},children:a}):null,t("span",{className:["relative grid transition-[grid-template-columns]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",g?"grid-cols-[1fr]":"grid-cols-[0fr]"].join(" "),children:t("span",{className:"min-w-0 truncate",children:b})})]})});
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"@base-ui/react/button";import{accentSlots as o}from"../../internal/accent.js";import{cssLength as i}from"../../internal/length.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{hasContent as r}from"../../internal/scale.js";const m={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"bg-mp-surface-container-high text-(--_mp-accent)"},l={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},p={xs:"min-w-10 gap-0 px-0",sm:"min-w-12 gap-0 px-0",md:"min-w-14 gap-0 px-0",lg:"min-w-18 gap-0 px-0",xl:"min-w-24 gap-0 px-0"},d={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},f={xs:24,sm:24,md:24,lg:30,xl:36},c={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"},x={xs:"min-w-16 gap-1.5 px-3",sm:"min-w-18 gap-2 px-4",md:"min-w-20 gap-2 px-4",lg:"min-w-24 gap-2.5 px-5",xl:"min-w-28 gap-3 px-6"},u={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},b={"top-start":"top-(--_mp-fab-offset) start-(--_mp-fab-offset)","top-end":"top-(--_mp-fab-offset) end-(--_mp-fab-offset)","bottom-start":"bottom-(--_mp-fab-offset) start-(--_mp-fab-offset)","bottom-end":"bottom-(--_mp-fab-offset) end-(--_mp-fab-offset)"};export const MPFloatingActionButton=/*@__PURE__*/a.forwardRef(function({icon:a,label:g,extended:h=!1,variant:w="tonal",color:y="primary",size:_="md",position:j="fixed",corner:v="bottom-end",offset:k=16,disabled:z=!1,type:N="button",className:B,style:$,...A},F){return e(n,{ref:F,type:N,disabled:z,"aria-label":g,"data-mp-size":_,"data-mp-variant":w,className:["mp-fab group inline-flex shrink-0 items-center justify-center","box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,box-shadow,color,min-width,padding,gap]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",d[_],l[_],c[_],h?x[_]:p[_],z?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${m[w]} shadow-mp-3`,"static"===j?"relative":`${u[j]} ${b[v]}`,B??""].filter(Boolean).join(" "),style:{...o(y),"--_mp-fab-offset":i(k),...$},...A,children:[z?null:t(s,{}),r(a)?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:f[_],height:f[_]},children:a}):null,t("span",{className:["relative grid transition-[grid-template-columns]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",h?"grid-cols-[1fr]":"grid-cols-[0fr]"].join(" "),children:t("span",{className:"min-w-0 truncate",children:g})})]})});

package/dist/components/footer/MPFooter.d.ts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPPosition, MPSize, MPVariant } from '../../types.js';
+export interface MPFooterProps extends Omit<React.ComponentPropsWithoutRef<'footer'>, 'title'> {
+    /**
+     * How the sheet sits in the page's scroll.
+     *
+     * `static` — the default, and the opposite of [MPHeader](./header)'s — is what
+     * a footer *is*: the thing at the end of the document, reached by scrolling to
+     * it. `sticky` and `fixed` are for the bar that has to stay in reach — a
+     * form's save row, a cookie notice — and an [MPPageLayout](./page-layout)
+     * reserves the height a `fixed` one takes out of the flow.
+     * @default 'static'
+     */
+    position?: MPPosition;
+    /**
+     * How much surface the sheet paints, on the **container** ladder — a footer is
+     * never dyed, because what sits on it arrives with colours of its own.
+     *
+     * `outlined` is the default here and `tonal` is [MPHeader](./header)'s,
+     * because the two sit against different things. A header is over content that
+     * is passing underneath it and needs a tone of its own to stay legible; a
+     * footer has the end of the document above it and nothing below, so the
+     * hairline is the whole of what says the document ended.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * The sheet's scale — its gutter and the air above and below its content. As
+     * on [MPBox](./box), `size` here is the size of the *sheet*: it sets no height
+     * and no type scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Holds the content to a measure and centres it while the sheet itself still
+     * spans the window. The same ladder [MPContainer](./container)'s `maxWidth`
+     * uses.
+     * @default 'none'
+     */
+    maxWidth?: MPSize | 'none';
+    /**
+     * The gutter, and the air above and below.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * The name the region is announced by. Worth writing when a page has more than
+     * one `<footer>` in it — an article's own and the site's.
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<footer>`. Base UI's own escape hatch, and
+     * rarely what you want: at the top level of a document that tag is the
+     * `contentinfo` landmark, and it is what says "this is the site's own
+     * information" rather than "this is more of the article".
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Everything in it.
+     *
+     * A footer's content is four columns of links on one site and a single line on
+     * the next, all of it the caller's — which is why this component has slots for
+     * nothing and room for anything.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The sheet at the end of a page.
+ *
+ * A real `<footer>`, which is the whole reason it is a component rather than a
+ * div: at the top level of a document that tag is the `contentinfo` landmark —
+ * the region a screen reader offers as "the site's own information", and the one
+ * a search engine reads the copyright, the address and the site map out of.
+ *
+ * ## Why it has no slots, and [MPHeader](./header) does
+ *
+ * Because a header's three regions are a fixed arrangement worth writing once,
+ * and a footer's content is not an arrangement at all. Four columns of links on
+ * one site, a copyright line on the next, a language picker and a row of logos
+ * on the third. A component that guessed would be a component every second site
+ * had to fight.
+ *
+ * What it decides instead is the **sheet**: the surface, the gutter, the measure,
+ * and whether it stays in reach. Everything above that is an
+ * [MPGrid](./grid) or an [MPContainer](./container) the caller puts inside it.
+ *
+ * ## Inside a layout, and outside one
+ *
+ * Inside an [MPPageLayout](./page-layout) it registers itself, so a `fixed`
+ * footer's height is reserved rather than sitting on top of the last paragraph.
+ * Outside one it is simply a sheet.
+ */
+export declare const MPFooter: React.ForwardRefExoticComponent<MPFooterProps & React.RefAttributes<HTMLElement>>;

package/dist/components/footer/MPFooter.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as o}from"@base-ui/react/use-render";import{BAR_SURFACE as r,MPPageLayoutContext as a}from"../../internal/page-layout.js";import{MEASURE as i,SHEET_PAD_X as n,SHEET_PAD_Y as s}from"../../internal/scale.js";const l={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPFooter=/*@__PURE__*/t.forwardRef(function({position:m="static",variant:c="outlined",size:d="md",maxWidth:f="none",padded:u=!0,label:p,render:b,className:x,children:j,...z},h){const{register:v}=t.useContext(a),w=t.useCallback(e=>{v("footer",e),"function"==typeof h?h(e):h&&(h.current=e)},[v,h]);return o({render:b??e("footer",{}),ref:w,props:{"aria-label":p,"data-mp-size":d,"data-mp-variant":c,className:["mp-footer text-mp-on-surface box-border w-full min-w-0",r[c],"outlined"===c?"border-mp-outline-variant border-t":"",l[m],x??""].filter(Boolean).join(" "),children:e("div",{className:["mp-footer__inner w-full",u?`${n[d]} ${s[d]}`:"","none"===f?"":`${i[f]} mx-auto`].filter(Boolean).join(" "),children:j}),...z}})});

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

@@ -0,0 +1,2 @@
+export { MPFooter } from './MPFooter.js';
+export type { MPFooterProps } from './MPFooter.js';

package/dist/components/footer/index.js

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