material-plus-ui 1.6.0 → 1.7.0

package/dist/components/data-table/MPDataTable.d.ts

@@ -0,0 +1,295 @@
+import * as React from 'react';
+import { type MPDataTableSort } from '../../internal/data-table.js';
+import type { MPAlign, MPColor, MPDensity, MPElevation, MPSize, MPSlots, MPVariant } from '../../types.js';
+export type { MPDataTableSort, MPSortDirection } from '../../internal/data-table.js';
+/** How many rows may be chosen at once. */
+export type MPDataTableSelectionMode = 'none' | 'single' | 'multiple';
+/** The parts an `MPDataTable` draws that a `className` cannot reach. */
+export type MPDataTableSlot = 'toolbar' | 'table' | 'head' | 'row' | 'cell' | 'footer';
+/**
+ * A column: its heading, how wide it is, how to get a value out of a row and how
+ * to draw one.
+ *
+ * The split between `value` and `render` is the whole shape of this type. A
+ * `render` decides what a reader sees; a `value` decides what the sort and the
+ * search see. Most columns need neither — the cell is `row[key]`, and that is
+ * what is compared and matched. A column that draws an `MPChip` needs `render`,
+ * and it needs `value` as well the moment it is sortable, because a React
+ * element has no order.
+ */
+export interface MPDataTableColumn<Row> {
+    /**
+     * Identifies the column — to `sort`, to `columnWidths`, and unless `value` or
+     * `render` says otherwise, it names the property to read off each row.
+     */
+    key: string;
+    /** The heading. Defaults to the `key`, which is usually not what you want. */
+    label?: React.ReactNode;
+    /**
+     * How wide, in pixels.
+     *
+     * Pixels rather than any CSS length, because a resize drag does arithmetic on
+     * this number. Columns that do not say are `160`, and see `resizable` for what
+     * turning it on does to the layout.
+     */
+    width?: number;
+    /** How narrow a drag may make it. @default 48 */
+    minWidth?: number;
+    /**
+     * Which edge the cells line up against. Numbers usually want `end` so their
+     * digits line up in a column.
+     * @default 'start'
+     */
+    align?: MPAlign;
+    /** Whether this column can be sorted. Defaults to the table's `sortable`. */
+    sortable?: boolean;
+    /** Whether this column can be dragged wider. Defaults to the table's `resizable`. */
+    resizable?: boolean;
+    /** Whether the search looks in this column. @default true */
+    searchable?: boolean;
+    /**
+     * The value behind the cell: what is sorted, and what the search is matched
+     * against. Defaults to `row[key]`.
+     */
+    value?: (row: Row) => unknown;
+    /**
+     * Orders two rows by this column, for a value the default comparison cannot
+     * rank — a status that goes `draft`, `review`, `live` rather than
+     * alphabetically. Always written ascending; the table reverses it.
+     */
+    compare?: (a: Row, b: Row) => number;
+    /**
+     * Draws the cell. `index` is the row's place in the sorted, searched order and
+     * is counted across every page, so `(row, index) => index + 1` is a running
+     * row number.
+     */
+    render?: (row: Row, index: number) => React.ReactNode;
+    /**
+     * What a download writes for this cell.
+     *
+     * Defaults to `value`, and then to `row[key]`. It is separate from `render` on
+     * purpose: a cell that draws a chip, an avatar or a progress bar has no text
+     * to put in a file, and `render`'s return is a React element rather than
+     * something a spreadsheet can hold.
+     */
+    exportValue?: (row: Row) => unknown;
+    /** Leaves this column out of a download. @default true */
+    exportable?: boolean;
+}
+export interface MPDataTableProps<Row> extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children' | 'onSelect'> {
+    /** The columns, in the order they appear. */
+    headers: readonly MPDataTableColumn<Row>[];
+    /** The rows. */
+    items: readonly Row[];
+    /**
+     * A stable identity per row, and the value `selected` is a list of.
+     *
+     * Defaults to the row's index in `items`, which is enough for a table that
+     * only ever displays. The moment rows can be chosen, sorted or searched it is
+     * required in practice: an index identifies a position, and every one of those
+     * three changes which row is in it.
+     */
+    getRowKey?: (row: Row, index: number) => React.Key;
+    /** Shown above the table, and read out as its accessible name. */
+    caption?: React.ReactNode;
+    /** What to show instead of rows when nothing is left. */
+    empty?: React.ReactNode;
+    /**
+     * Which language the table's own words are in — the ticks' names, the count
+     * under the rows, the download button.
+     *
+     * It is also what the default sort compares strings with. Pass it whenever the
+     * markup is rendered on a server: without it the comparison follows the
+     * runtime's own locale, and a server that disagrees with the browser about
+     * that produces two different row orders for the same table.
+     */
+    locale?: string;
+    /**
+     * Makes every column sortable. A column overrides it either way with its own
+     * `sortable`.
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Whether more than one column can be sorted at a time. With `multiple`, a
+     * Shift-press adds a column to the sort instead of replacing it, and each
+     * sorted heading carries its place in the order.
+     * @default 'single'
+     */
+    sortMode?: 'single' | 'multiple';
+    /** The sort. Use with `onSortChange` for a controlled one. */
+    sort?: readonly MPDataTableSort[];
+    /** What it starts as, for an uncontrolled table. */
+    defaultSort?: readonly MPDataTableSort[];
+    onSortChange?: (sort: MPDataTableSort[]) => void;
+    /** Draws a field above the table that filters the rows. @default false */
+    searchable?: boolean;
+    /** The query. Use with `onSearchChange` for a controlled field. */
+    search?: string;
+    /** What it starts as, for an uncontrolled one. */
+    defaultSearch?: string;
+    onSearchChange?: (search: string) => void;
+    /**
+     * Overrides the word on the field, which is also its accessible name.
+     *
+     * It is a label rather than a placeholder because a placeholder is not a name:
+     * a field whose only word disappears the moment somebody types in it is a
+     * field a screen reader announces as nothing.
+     */
+    searchLabel?: string;
+    /**
+     * A filter of your own, applied after the search. Return `false` to drop a
+     * row. `index` is the row's place in `items`.
+     */
+    filter?: (row: Row, index: number) => boolean;
+    /** Content at the end of the bar the search field sits in. */
+    toolbar?: React.ReactNode;
+    /**
+     * Hands the rows out a page at a time, and puts the pages in the footer.
+     *
+     * Every row is rendered otherwise, and there is no windowing — the same
+     * ceiling `MPTable` states, and this is the answer to it. A few hundred rows
+     * is nothing, a few thousand is a visible pause, and past that a table wants
+     * either this or a narrower list.
+     * @default false
+     */
+    paged?: boolean;
+    /** The current page, 1-based. Use with `onPageChange`. */
+    page?: number;
+    /** @default 1 */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** How many rows a page holds. Use with `onPageSizeChange`. */
+    pageSize?: number;
+    /** @default 25 */
+    defaultPageSize?: number;
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * What the footer's page-size control offers. An empty list drops the control.
+     * @default [10, 25, 50, 100]
+     */
+    pageSizeOptions?: readonly number[];
+    /**
+     * Lets a heading be dragged wider or narrower, and gives the handle between
+     * two columns to the keyboard as well.
+     *
+     * **It also changes how the columns are laid out, and it has to.** Without it
+     * the browser balances the columns against their contents, which is what makes
+     * a plain table read well; but a balanced column springs back from a drag,
+     * because a width in that layout is a hint rather than a measurement. Turning
+     * this on fixes the layout, so `width` becomes exact and a column that has not
+     * said how wide it is takes 160.
+     * @default false
+     */
+    resizable?: boolean;
+    /** The widths, keyed by column. Use with `onColumnWidthsChange`. */
+    columnWidths?: Readonly<Record<string, number>>;
+    /** What they start as, for an uncontrolled table. */
+    defaultColumnWidths?: Readonly<Record<string, number>>;
+    onColumnWidthsChange?: (widths: Record<string, number>) => void;
+    /**
+     * How many rows may be chosen.
+     * @default 'none'
+     */
+    selectionMode?: MPDataTableSelectionMode;
+    /** The chosen rows, as their keys. Use with `onSelectedChange`. */
+    selected?: readonly React.Key[];
+    /** Which start chosen, for an uncontrolled table. */
+    defaultSelected?: readonly React.Key[];
+    /**
+     * The keys, and the rows behind them — including rows the search has hidden
+     * and rows on other pages, which are still chosen and still have to be handed
+     * back.
+     */
+    onSelectedChange?: (selected: React.Key[], rows: Row[]) => void;
+    /**
+     * Adds a column of ticks, and one in the heading that takes the whole page at
+     * once.
+     *
+     * It also decides which of the row and the tick is the keyboard's route into
+     * the row — see the note on the component.
+     * @default false
+     */
+    checkboxes?: boolean;
+    /** Fires on every press of a row, before the selection changes. */
+    onRowClick?: (row: Row, index: number) => void;
+    /**
+     * Adds a button that writes the rows out as a CSV file.
+     *
+     * **Every row the reader is currently looking at, not the page they are on.**
+     * The search and the sort are applied and the paging is not, because a file of
+     * page three is not a file anybody asked for.
+     * @default false
+     */
+    exportable?: boolean;
+    /** What the downloaded file is called. @default 'table.csv' */
+    exportFileName?: string;
+    /**
+     * Takes the CSV instead of downloading it — to post it somewhere, to open it
+     * in a viewer of your own, or to put a sheet around it.
+     */
+    onExport?: (csv: string) => void;
+    /** Tints every other row. @default false */
+    striped?: boolean;
+    /** Lights the row under the pointer. @default false */
+    hoverable?: boolean;
+    /**
+     * Pins the heading while the body scrolls. Only does anything if something
+     * around the table actually constrains its height.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * How much surface the sheet around the table paints.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /** How far off the page the sheet is lifted, on MD3's own scale. */
+    elevation?: MPElevation;
+    /** @default 'md' */
+    size?: MPSize;
+    /**
+     * Which accent family the sort arrow, the ticks and a chosen row read. The
+     * cells themselves stay neutral.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** Takes room out of every cell without changing what it is set in. @default 0 */
+    density?: MPDensity;
+    classNames?: MPSlots<MPDataTableSlot>;
+}
+/**
+ * A grid of data with the four things a reader does to one: put it in order,
+ * cut it down, step through it and take some of it away.
+ *
+ * ```tsx
+ * <MPDataTable headers={columns} items={rows} sortable searchable paged />
+ * ```
+ *
+ * It is a separate component from [MPTable](table) rather than a mode of it.
+ * `MPTable` is the presentational half: it
+ * draws what it is given, in the order it is given, and a page that only shows a
+ * grid should not carry a comparator, a CSV writer and a page clamp to do it.
+ * What the two do share is the geometry — `internal/table.ts` holds the cells'
+ * room and the type they are set in — so a data table never sits a pixel off the
+ * plain table beside it.
+ *
+ * ## What it does to the rows, and in what order
+ *
+ * Search, then `filter`, then sort, then the page. The order is the only one
+ * that makes each step mean what it says: sorting before searching would order
+ * rows nobody is going to see, and paging before either would cut a page out of
+ * a list the reader has not asked for yet. `render`'s `index` counts along the
+ * sorted, searched order across every page, so it is a running row number rather
+ * than a position on the screen.
+ *
+ * ## Who holds the keyboard
+ *
+ * A row that answers a press has to answer a keyboard, and a table of two
+ * hundred rows that each did would be two hundred tab stops. So there is exactly
+ * one route into a row and `checkboxes` is what picks it: with ticks, the tick
+ * is the control and the row is not in the tab order; without them, the row is.
+ * `onRowClick` on its own always puts the row in the tab order, because then
+ * there is nothing else to press.
+ */
+export declare function MPDataTable<Row>({ headers, items, getRowKey, caption, empty, locale: localeProp, sortable, sortMode, sort: sortProp, defaultSort, onSortChange, searchable, search: searchProp, defaultSearch, onSearchChange, searchLabel, filter, toolbar, paged, page: pageProp, defaultPage, onPageChange, pageSize: pageSizeProp, defaultPageSize, onPageSizeChange, pageSizeOptions, resizable, columnWidths: columnWidthsProp, defaultColumnWidths, onColumnWidthsChange, selectionMode, selected: selectedProp, defaultSelected, onSelectedChange, checkboxes, onRowClick, exportable, exportFileName, onExport, striped, hoverable, stickyHeader, variant, elevation, size: sizeProp, color: colorProp, density: densityProp, className, style, classNames, ...props }: MPDataTableProps<Row>): React.JSX.Element;

package/dist/components/data-table/MPDataTable.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{MPButton as n}from"../button/MPButton.js";import{MPCheckbox as r}from"../checkbox/MPCheckbox.js";import{MPIcon as o}from"../icon/MPIcon.js";import{MPPagination as l}from"../pagination/MPPagination.js";import{MPSelect as s}from"../select/MPSelect.js";import{MPTextField as i}from"../text-field/MPTextField.js";import{ArrowDownIcon as c,ArrowUpIcon as d,SearchIcon as m}from"../../constants/icons.js";import{accentSlots as u}from"../../internal/accent.js";import{containerSurface as p}from"../../internal/elevation.js";import{useMPColor as f,useMPDensity as h,useMPSize as y}from"../../internal/config.js";import{useMPLocale as g,useMPMessages as b}from"../../internal/locale.js";import{fillMessage as v}from"../../internal/i18n.js";import{DATA_TABLE as x}from"../../internal/messages/data-table.js";import{TABLE as k}from"../../internal/messages/table.js";import{TRANSFER as w}from"../../internal/messages/transfer.js";import{CONTROL_ICON as S,META_TEXT as N}from"../../internal/scale.js";import{VISUALLY_HIDDEN as j}from"../../internal/visually-hidden.js";import{CELL_TEXT as C,HEAD_TEXT as z,ROW as _,cellPadX as M,cellPadY as P,drawableCell as L}from"../../internal/table.js";import{DEFAULT_COLUMN_WIDTH as D,MIN_COLUMN_WIDTH as E,compareValues as $,downloadText as A,keysBetween as I,nextSort as K,pageBounds as W,searchHaystack as R,searchText as T,sortRows as B,toCsv as V}from"../../internal/data-table.js";function F(e,t){return e.value?e.value(t):t[e.key]}const H={xs:36,sm:40,md:48,lg:52,xl:60},X=/*@__PURE__*/["group/sort -m-1 flex w-full cursor-pointer items-center gap-1 rounded-mp-xs p-1","appearance-none border-0 bg-transparent font-[inherit] text-inherit text-start","transition-[color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","hover:text-mp-on-surface","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),O=/*@__PURE__*/["mp-data-table__resize absolute inset-y-0 end-0 z-10 w-2 translate-x-1/2 rtl:-translate-x-1/2","cursor-col-resize touch-none select-none appearance-none border-0 bg-transparent p-0","after:absolute after:inset-y-1 after:start-1/2 after:w-px after:bg-transparent","after:transition-[background-color] after:duration-(--mp-sys-motion-duration-short4)","hover:after:bg-mp-primary data-dragging:after:bg-mp-primary","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-solid outline-none"].join(" ");export function MPDataTable({headers:q,items:G,getRowKey:J,caption:Q,empty:U,locale:Y,sortable:Z=!1,sortMode:ee="single",sort:te,defaultSort:ae,onSortChange:ne,searchable:re=!1,search:oe,defaultSearch:le,onSearchChange:se,searchLabel:ie,filter:ce,toolbar:de,paged:me=!1,page:ue,defaultPage:pe,onPageChange:fe,pageSize:he,defaultPageSize:ye,onPageSizeChange:ge,pageSizeOptions:be=[10,25,50,100],resizable:ve=!1,columnWidths:xe,defaultColumnWidths:ke,onColumnWidthsChange:we,selectionMode:Se="none",selected:Ne,defaultSelected:je,onSelectedChange:Ce,checkboxes:ze=!1,onRowClick:_e,exportable:Me=!1,exportFileName:Pe="table.csv",onExport:Le,striped:De=!1,hoverable:Ee=!1,stickyHeader:$e=!1,variant:Ae="outlined",elevation:Ie,size:Ke,color:We,density:Re,className:Te,style:Be,classNames:Ve,...Fe}){const He=y(Ke),Xe=f(We),Oe=h(Re),qe=g(Y),Ge=b(x,qe),Je=b(k,qe),Qe=b(w,qe),Ue=M(He,Oe),Ye=P(He,Oe),[Ze,et]=a.useState(()=>[...ae??[]]),tt=te??Ze,[at,nt]=a.useState(le??""),rt=oe??at,[ot,lt]=a.useState(pe??1),st=ue??ot,[it,ct]=a.useState(ye??25),dt=he??it,[mt,ut]=a.useState(()=>({...ke})),pt=xe??mt,[ft,ht]=a.useState(()=>[...je??[]]),yt=Ne??ft,gt=a.useMemo(()=>new Set(yt.map(e=>String(e))),[yt]),bt=a.useRef(null),vt=a.useMemo(()=>G.map((e,t)=>{const a=J?J(e,t):t;return{row:e,identity:a,key:String(a),origin:t}}),[G,J]),xt=a.useMemo(()=>{const e=q.filter(e=>!1!==e.searchable);return vt.map(t=>R(e.map(e=>F(e,t.row))))},[vt,q]),kt=T(rt.trim()),wt=a.useMemo(()=>{const e=""===kt?vt:vt.filter((e,t)=>xt[t].includes(kt));return ce?e.filter(e=>ce(e.row,e.origin)):e},[vt,xt,kt,ce]),St=a.useMemo(()=>new Intl.Collator(qe,{numeric:!0,sensitivity:"base"}),[qe]),Nt=a.useMemo(()=>B(wt,tt,(e,t)=>{const a=q.find(t=>t.key===e);if(!a)return null;const n="desc"===t,r=a.compare;return r?(e,t)=>n?-r(e.row,t.row):r(e.row,t.row):(e,t)=>$(F(a,e.row),F(a,t.row),St,n)}),[wt,tt,q,St]),jt=W(Nt.length,st,dt),Ct=me?Nt.slice(jt.start,jt.end):Nt,zt=e=>{void 0===ue&&lt(e),fe?.(e)},_t=e=>{void 0===xe&&ut(e),we?.(e)},Mt=e=>{const t=new Set(e),a=[],n=[];for(const e of vt)t.has(e.key)&&(n.push(e.identity),a.push(e.row));void 0===Ne&&ht(n),Ce?.(n,a)},Pt="none"!==Se,Lt="multiple"===Se,Dt=ze&&Pt,Et=(e,t,a)=>{if(_e?.(e.row,jt.start+t),Pt){if(!Lt)return Mt(gt.has(e.key)?[]:[e.key]),void(bt.current=e.key);if(a&&null!==bt.current){const t=I(Ct.map(e=>e.key),bt.current,e.key);return void Mt([...new Set([...gt,...t])])}bt.current=e.key,Mt(gt.has(e.key)?[...gt].filter(t=>t!==e.key):[...gt,e.key])}},$t=Ct.map(e=>e.key),At=$t.filter(e=>gt.has(e)).length,It=$t.length>0&&At===$t.length,Kt=e=>pt[e.key]??e.width??D,Wt=a.useRef(null);a.useEffect(()=>()=>{null!==Wt.current&&(document.body.style.userSelect=Wt.current,Wt.current=null)},[]);const Rt=(e,t)=>{const a=Math.max(E,e.minWidth??E);_t({...pt,[e.key]:Math.max(a,Kt(e)+t)})},Tt=e=>{const t={...pt};delete t[e.key],_t(t)},Bt={padding:`${Ye} ${Ue}`},Vt={...Bt,backgroundColor:"var(--_mp-color-surface-container)"},Ft={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"},Ht=q.length+(Dt?1:0),Xt=Boolean(_e)||Pt&&!Dt,Ot=Ee||Pt||Boolean(_e),qt=re||Me||void 0!==de,Gt=me||Pt,Jt=(...e)=>e.filter(Boolean).join(" ");return t("div",{"data-mp-size":He,"data-mp-variant":Ae,className:Jt("mp-data-table rounded-mp-md flex flex-col",p(Ae,Ie),Te),style:{...u(Xe),...Be},...Fe,children:[qt?t("div",{className:Jt("mp-data-table__toolbar flex flex-wrap items-center gap-2",Ve?.toolbar),style:{padding:`${Ye} ${Ue}`},children:[re?e(i,{size:He,value:rt,onChange:e=>{void 0===oe&&nt(e),zt(1),se?.(e)},label:ie??Qe.search,startIcon:e(o,{icon:m,size:S[He]}),className:"mp-data-table__search min-w-0 flex-1"}):e("div",{className:"min-w-0 flex-1"}),de,Me?e(n,{size:He,variant:"text",color:Xe,onClick:()=>{const e=q.filter(e=>!1!==e.exportable),t=e.map(e=>"string"==typeof e.label?e.label:e.key),a=Nt.map(t=>e.map(e=>e.exportValue?e.exportValue(t.row):F(e,t.row))),n=V([t,...a]);Le?Le(n):A(n,Pe,"text/csv;charset=utf-8")},startIcon:e(o,{icon:c,size:S[He]}),children:Ge.download}):null]}):null,e("div",{className:"mp-data-table__scroll min-h-0 flex-1 overflow-auto",children:t("table",{className:Jt("text-mp-on-surface w-full text-start",C[He],Ve?.table),style:{borderCollapse:"collapse",...ve?{tableLayout:"fixed",minWidth:q.reduce((e,t)=>e+Kt(t),Dt?H[He]:0)}:void 0},children:[Q?e("caption",{className:`text-mp-on-surface-variant ${N}`,style:{...Bt,textAlign:"start"},children:Q}):null,t("colgroup",{children:[Dt?e("col",{style:{width:H[He]}}):null,q.map(t=>e("col",{style:ve||void 0!==pt[t.key]||void 0!==t.width?{width:Kt(t)}:void 0},t.key))]}),e("thead",{className:Ve?.head,children:t("tr",{children:[Dt?e("th",{scope:"col",className:Jt("whitespace-nowrap",$e&&"sticky top-0 z-20"),style:Vt,children:e(r,{size:He,color:Xe,checked:It,indeterminate:At>0&&!It,onCheckedChange:()=>{Mt(It?[...gt].filter(e=>!$t.includes(e)):[...new Set([...gt,...$t])])},label:e("span",{className:j,children:Ge.selectAll}),disabled:!Lt||0===$t.length})}):null,q.map(a=>{const n=a.sortable??Z,r=(l=a.key,tt.findIndex(e=>e.key===l));var l;const s=-1===r?void 0:tt[r],i=a.resizable??ve,c=a.align??"start";return t("th",{scope:"col","aria-sort":n?void 0===s?"none":"asc"===s.direction?"ascending":"descending":void 0,className:Jt("text-mp-on-surface-variant relative whitespace-nowrap",z[He],$e&&"sticky top-0 z-10"),style:{...Vt,textAlign:c},children:[n?t("button",{type:"button",className:Jt(X,"end"===c&&"justify-end","center"===c&&"justify-center"),onClick:e=>((e,t)=>{const a=K(tt,e,t&&"multiple"===ee);void 0===te&&et(a),ne?.(a)})(a.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:a.label??a.key}),e(o,{icon:d,size:S[He]-6,className:Jt("shrink-0 transition-[rotate,opacity]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",void 0===s?"opacity-0 group-hover/sort:opacity-38":"text-mp-primary opacity-100","desc"===s?.direction&&"rotate-180")}),tt.length>1&&-1!==r?e("span",{className:"text-mp-primary shrink-0 tabular-nums",children:r+1}):null]}):a.label??a.key,i?e("button",{type:"button","aria-label":Ge.resize,className:O,onPointerDown:e=>((e,t)=>{const a=t.currentTarget;try{a.setPointerCapture(t.pointerId)}catch{}a.dataset.dragging="true";const n=document.body.style.userSelect;Wt.current=n,document.body.style.userSelect="none";const r=t.clientX,o=Kt(e),l="rtl"===getComputedStyle(a).direction?-1:1,s=Math.max(E,e.minWidth??E),i=t=>{_t({...pt,[e.key]:Math.max(s,Math.round(o+(t.clientX-r)*l))})},c=()=>{a.removeEventListener("pointermove",i),a.removeEventListener("pointerup",c),a.removeEventListener("pointercancel",c),delete a.dataset.dragging,null!==Wt.current&&(document.body.style.userSelect=Wt.current,Wt.current=null)};a.addEventListener("pointermove",i),a.addEventListener("pointerup",c),a.addEventListener("pointercancel",c)})(a,e),onDoubleClick:()=>Tt(a),onKeyDown:e=>{const t=e.shiftKey?32:8;"ArrowRight"===e.key?(e.preventDefault(),Rt(a,t)):"ArrowLeft"===e.key?(e.preventDefault(),Rt(a,-t)):"Home"===e.key&&(e.preventDefault(),Tt(a))}}):null]},a.key)})]})}),e("tbody",{children:0===Ct.length?e("tr",{className:_,style:Ft,children:e("td",{colSpan:Ht,className:"text-mp-on-surface-variant",style:{padding:`2rem ${Ue}`,textAlign:"center"},children:U??Je.empty})}):Ct.map((a,n)=>{const o=gt.has(a.key);return t("tr",{"aria-selected":Pt?o:void 0,className:Jt(_,Ve?.row,De&&(jt.start+n)%2==1?"[--_mp-row:var(--_mp-color-surface-container-low)]":"",o?"[--_mp-row:var(--_mp-color-secondary-container)]":"",Ot&&!o?"hover:[--_mp-row:var(--_mp-color-surface-container)]":"",(Pt||_e)&&"cursor-pointer",Xt&&["outline-mp-secondary focus-visible:outline-2","focus-visible:-outline-offset-2 focus-visible:outline-solid outline-none"].join(" ")),style:Ft,tabIndex:Xt?0:void 0,onClick:e=>Et(a,n,e.shiftKey),onKeyDown:Xt?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),Et(a,n,e.shiftKey))}:void 0,children:[Dt?e("td",{style:Bt,children:e(r,{size:He,color:Xe,checked:o,onCheckedChange:()=>Et(a,n,!1),label:e("span",{className:j,children:Ge.selectRow})})}):null,q.map(t=>e("td",{className:Ve?.cell,style:{...Bt,textAlign:t.align??"start"},children:t.render?t.render(a.row,jt.start+n):L(F(t,a.row))},t.key))]},a.key)})})]})}),Gt?t("div",{className:Jt("mp-data-table__footer border-mp-outline-variant flex flex-wrap items-center gap-3","text-mp-on-surface-variant border-t",N,Ve?.footer),style:{padding:`${Ye} ${Ue}`},children:[e("span",{className:"mp-data-table__count",children:v(Ge.total,{total:String(Nt.length)})}),gt.size>0?e("span",{className:"mp-data-table__selected text-mp-primary",children:v(Ge.selected,{count:String(gt.size)})}):null,e("span",{className:"flex-1"}),me&&be.length>0?e(s,{size:"xs",label:Ge.perPage,floatingLabel:!1,value:dt,onValueChange:e=>(e=>{void 0===he&&ct(e),zt(1),ge?.(e)})(Number(e)),items:be.map(e=>({value:e})),className:"mp-data-table__page-size",style:{minWidth:"9.5rem"}}):null,me?e(l,{size:"xs",color:Xe,count:jt.pages,page:jt.page,onPageChange:zt,locale:qe}):null]}):null]})}

package/dist/components/data-table/index.d.ts

@@ -0,0 +1,2 @@
+export { MPDataTable } from './MPDataTable.js';
+export type { MPDataTableColumn, MPDataTableProps, MPDataTableSelectionMode, MPDataTableSlot, MPDataTableSort, MPSortDirection } from './MPDataTable.js';

package/dist/components/data-table/index.js

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Dialog } from '@base-ui/react/dialog';
-import type { MPColor, MPControlEventProps, MPSize } from '../../types.js';
+import type { MPColor, MPControlEventProps, MPSize, MPSlots } from '../../types.js';
 /**
  * A dialog takes `size` and `color` and stops there.
  *
@@ -126,6 +126,14 @@ export interface MPDialogProps extends MPControlEventProps<HTMLElement> {
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
+    /**
+     * A class name for a part `className` cannot reach.
+     *
+     * - `backdrop` — the scrim behind the sheet. It is a sibling of the dialog
+     *   rather than a child, and both render at the end of `<body>`, so nothing
+     *   written against the root reaches it.
+     */
+    classNames?: MPSlots<'backdrop'>;
 }
 export type MPDialogCloseProps = React.ComponentProps<typeof Dialog.Close>;
 /**
@@ -160,4 +168,4 @@ export declare const MPDialogClose: React.ForwardRefExoticComponent<Omit<import(
  * is no `variant`: a dialog that could be told to sit flat on the page would be a
  * dialog that could be told to stop being a dialog.
  */
-export declare function MPDialog({ open, defaultOpen, onOpenChange, trigger, icon, title, description, actions, dividers, showClose, closeLabel, locale: localeProp, width, fullWidth, fullScreen, modal, dismissible, size: sizeProp, color, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, className, style, children }: MPDialogProps): React.JSX.Element;
+export declare function MPDialog({ open, defaultOpen, onOpenChange, trigger, icon, title, description, actions, dividers, showClose, closeLabel, locale: localeProp, width, fullWidth, fullScreen, modal, dismissible, size: sizeProp, color, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, classNames, className, style, children }: MPDialogProps): React.JSX.Element;

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Dialog } from '@base-ui/react/dialog';
-import type { MPSide, MPSize } from '../../types.js';
+import type { MPSide, MPSize, MPSlots } from '../../types.js';
 /**
  * How the panel relates to the page, in MD3's own two words for it.
  *
@@ -123,6 +123,12 @@ export interface MPDrawerProps {
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
+    /**
+     * A class name for a part `className` cannot reach.
+     *
+     * - `backdrop` — the scrim behind the panel, drawn only on a modal drawer.
+     */
+    classNames?: MPSlots<'backdrop'>;
 }
 export type MPDrawerCloseProps = React.ComponentProps<typeof Dialog.Close>;
 /**
@@ -184,4 +190,4 @@ export declare const MPDrawerClose: React.ForwardRefExoticComponent<Omit<import(
  * `SLIDE` gives a reader who asked for less motion the old behaviour exactly:
  * the fade, with nowhere to travel from.
  */
-export declare function MPDrawer({ side, mode, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, locale: localeProp, extent, rounded, dismissible, size: sizeProp, className, style, children }: MPDrawerProps): React.JSX.Element | null;
+export declare function MPDrawer({ side, mode, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, locale: localeProp, extent, rounded, dismissible, size: sizeProp, classNames, className, style, children }: MPDrawerProps): React.JSX.Element | null;

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPSize, MPVariant } from '../../types.js';
+import type { MPSize, MPTransition, MPVariant } from '../../types.js';
 export interface MPEmptyProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
     /**
      * The headline. Defaults to the words for "nothing here" in `locale`; pass
@@ -46,6 +46,15 @@ export interface MPEmptyProps extends Omit<React.ComponentPropsWithoutRef<'div'>
     render?: useRender.RenderProp;
     /** The sentence under the headline: why it is empty, or what to do next. */
     children?: React.ReactNode;
+    /**
+     * An entrance, run once as it mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     */
+    transition?: MPTransition;
 }
 /**
  * What stands where content would have been: a glyph, a headline, a sentence and

package/dist/components/empty/MPEmpty.js

@@ -1,2 +1,2 @@
 "use client";
-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{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{EMPTY as i}from"../../internal/messages/empty.js";import{hasContent as o,PROSE_TEXT as m,SHEET_GAP as c,SHEET_PAD_X as d,SHEET_TITLE as p}from"../../internal/scale.js";import{CONTAINER_SURFACE as f}from"../../internal/surface.js";import{useMPSize as x}from"../../internal/config.js";const u={xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},h={xs:"text-[1.5rem]",sm:"text-[1.75rem]",md:"text-[2.25rem]",lg:"text-[2.75rem]",xl:"text-[3.25rem]"};function v(){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=/*@__PURE__*/n.forwardRef(function({variant:n="text",size:j,title:y,icon:g,action:N,locale:k,render:w,className:z,style:$,children:L,...B},C){const M=x(j),W=a(k),b=l(i,W),E=void 0===y?b.title:y,F=void 0===g?e(v,{}):g,P=o(E),R=["mp-empty flex w-full flex-col items-center justify-center text-center",d[M],u[M],"text"===n?"":"rounded-mp-md",c[M],f[n],"text-mp-on-surface",z??""].filter(Boolean).join(" ");return s({render:w,ref:C,props:{role:"status","data-mp-size":M,"data-mp-variant":n,className:R,style:$,children:t(r,{children:[o(F)?e("span",{className:`text-mp-on-surface-variant flex items-center ${h[M]} [&>svg]:size-[1em]`,children:F}):null,P||o(L)?t("div",{className:`flex max-w-prose flex-col items-center ${c[M]}`,children:[P?e("div",{className:p[M],children:E}):null,o(L)?e("div",{className:`${m[M]} ${P?"text-mp-on-surface-variant":""}`,children:L}):null]}):null,o(N)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:N}):null]}),...B}})});
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import*as s from"react";import{useRender as n}from"@base-ui/react/use-render";import{useMPLocale as a,useMPMessages as i}from"../../internal/locale.js";import{transitionProps as l}from"../../internal/transition.js";import{EMPTY as o}from"../../internal/messages/empty.js";import{hasContent as m,PROSE_TEXT as c,SHEET_GAP as d,SHEET_PAD_X as p,SHEET_TITLE as f}from"../../internal/scale.js";import{CONTAINER_SURFACE as x}from"../../internal/surface.js";import{useMPSize as u}from"../../internal/config.js";const h={xs:"py-5",sm:"py-6",md:"py-8",lg:"py-10",xl:"py-12"},j={xs:"text-[1.5rem]",sm:"text-[1.75rem]",md:"text-[2.25rem]",lg:"text-[2.75rem]",xl:"text-[3.25rem]"};function v(){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=/*@__PURE__*/s.forwardRef(function({variant:s="text",size:y,title:N,icon:g,action:k,locale:$,render:w,transition:z,className:L,style:B,children:C,...M},W){const b=l(z),E=u(y),F=a($),P=i(o,F),R=void 0===N?P.title:N,Z=void 0===g?e(v,{}):g,q=m(R),A=["mp-empty flex w-full flex-col items-center justify-center text-center",p[E],h[E],"text"===s?"":"rounded-mp-md",d[E],x[s],"text-mp-on-surface",L??""].filter(Boolean).join(" ");return n({render:w,ref:W,props:{role:"status","data-mp-size":E,"data-mp-variant":s,className:`${A}${b.className?` ${b.className}`:""}`,style:{...b.style,...B},children:t(r,{children:[m(Z)?e("span",{className:`text-mp-on-surface-variant flex items-center ${j[E]} [&>svg]:size-[1em]`,children:Z}):null,q||m(C)?t("div",{className:`flex max-w-prose flex-col items-center ${d[E]}`,children:[q?e("div",{className:f[E],children:R}):null,m(C)?e("div",{className:`${c[E]} ${q?"text-mp-on-surface-variant":""}`,children:C}):null]}):null,m(k)?e("div",{className:"flex flex-wrap items-center justify-center gap-2",children:k}):null]}),...M}})});

package/dist/components/fieldset/MPFieldset.js

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

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