material-plus-ui 1.7.0 → 1.8.0

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 n}from"@base-ui/react/combobox";import{Field as o}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip.js";import{MPIcon as i}from"../icon/MPIcon.js";import{AddIcon as r,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons.js";import{MPFieldLabel as u,MPFieldOutline as p,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{fillMessage as h}from"../../internal/i18n.js";import{useMPLocale as f,useMPMessages as b}from"../../internal/locale.js";import{COMBOBOX as g}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 C,hasContent as w}from"../../internal/scale.js";import{MARK_MOTION_KEPT as N}from"../../internal/mark.js";import{FADE as L,PORTAL_LAYER as M}from"../../internal/surface.js";import{useMPSize as k}from"../../internal/config.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 V(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:O,multiple:$,value:P,defaultValue:_,onValueChange:q,onInputValueChange:F,onKeyDown:T,onKeyUp:A,onFocus:D,onBlur:K,onClick:R,onDoubleClick:B,onContextMenu:E,allowCustom:U=!0,customLabel:G,clearable:H=!1,emptyMessage:W,limit:J,filter:Q,chipVariant:X,chipColor:Y,placeholder:Z,label:ee,floatingLabel:ae=!0,description:le,errorMessage:ne,startIcon:oe,size:te,fullWidth:ie=!1,required:re=!1,disabled:se=!1,readOnly:me=!1,name:ce,open:ue,defaultOpen:pe,onOpenChange:de,clearLabel:he,openLabel:fe,locale:be,removeLabel:ge,inputRef:xe,id:ve,classNames:ye,className:je,style:Ce}){const we=k(te),Ne=f(be),Le=b(x,Ne),Me=b(g,Ne),ke=w(ne),Se=!0===$,Ie=S[we],ze=l.useId(),Ve=ve??ze,Oe=l.useMemo(()=>O.map(e=>({value:e.value,label:e.label??String(e.value),content:e.content,disabled:e.disabled})),[O]),[$e,Pe]=l.useState(()=>V(_)),_e=void 0===P?$e:V(P),[qe,Fe]=l.useState(""),{shrunk:Te,focusProps:Ae}=d({floating:ae&&w(ee),filled:_e.length>0||""!==qe,pinned:!!oe}),De=l.useMemo(()=>new Map(Oe.map(e=>[e.value,e])),[Oe]),Ke=l.useMemo(()=>{const e=new Set;for(const a of Oe)e.add(a.label.toLocaleLowerCase()),e.add(String(a.value).toLocaleLowerCase());return e},[Oe]),Re=l.useCallback(e=>De.get(e)??{value:e,label:String(e),custom:!0},[De]),Be=qe.trim(),Ee=Be.toLocaleLowerCase(),Ue=""===Be||Ke.has(Ee)||_e.some(e=>String(e).toLocaleLowerCase()===Ee),Ge=!U||me||se||Ue?null:Be,He=l.useMemo(()=>null==Q?Q:(e,a)=>!0===e.custom||Q(e,a),[Q]),We=l.useMemo(()=>null===Ge?Oe:[...Oe,{value:Ge,label:Ge,custom:!0}],[Oe,Ge]),Je=Se?_e.map(Re):_e.length>0?Re(_e[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",se?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Xe=/*@__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(" "),Ye=a=>e(n.Input,{ref:xe,id:Ve,placeholder:Te?Z:void 0,onKeyDown:T,onKeyUp:A,onFocus:D,onBlur:K,onClick:R,onDoubleClick:B,onContextMenu:E,className:Se?`${Qe} min-w-16 ${a?"ms-1.5":""}`:Qe});return a(o.Root,{disabled:se,invalid:ke,"data-mp-size":we,className:["mp-combobox group flex-col align-top",ie?"flex w-full":"inline-flex w-fit",je??""].filter(Boolean).join(" "),style:Ce,...Ae,children:[a(n.Root,{name:ce,items:We,multiple:Se,value:Je,onValueChange:e=>{!function(e){void 0===P&&Pe(e),q?.(Se?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Fe(e),F?.(e)},open:ue,defaultOpen:pe,onOpenChange:e=>de?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:J,filter:He,disabled:se,readOnly:me,required:re,children:[a("div",{className:"relative w-full",children:[a(n.InputGroup,{className:["relative flex w-full items-center gap-2",Ie.padding,Se?I[we]:Ie.height,C[we],se?"cursor-default":"cursor-text"].join(" "),children:[oe?e("span",{className:["flex shrink-0 items-center",se?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:oe}):null,Se?e(n.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(n.Value,{children:o=>a(l.Fragment,{children:[o.map((a,l)=>e(n.Chip,{render:e(t,{variant:X??(ke?"outlined":"tonal"),color:Y??(ke?"error":"primary"),size:z[we],disabled:se,endIcon:me||se?null:e(n.ChipRemove,{"aria-label":ge?ge(a.label):h(Le.removeNamed,{label:a.label}),className:"flex cursor-pointer items-center opacity-70 hover:opacity-100",children:e(i,{icon:c,size:16})})}),children:a.label},`${l}:${String(a.value)}`)),Ye(o.length>0)]})})}):Ye(!1),H&&!me?a(n.Clear,{"aria-label":he??Le.clear,className:Xe,children:[e(v,{}),e(i,{icon:c,size:j[we]})]}):null,a(n.Trigger,{"aria-label":fe??Le.open,className:Xe,children:[e(v,{}),e(n.Icon,{className:["relative flex items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180"].join(" "),children:e(i,{icon:m,size:j[we]})})]})]}),e(p,{label:ee,required:re,notched:Te}),w(ee)?e(u,{size:we,label:ee,required:re,htmlFor:Ve,shrunk:Te}):null]}),e(n.Portal,{children:e(n.Positioner,{className:M,sideOffset:4,children:a(n.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",C[we],L].join(" "),children:[e(n.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:W??Me.empty}),e(n.List,{children:(l,o)=>a(n.Item,{value:l,disabled:l.disabled,className:["mp-combobox__item group rounded-mp-xs relative flex cursor-pointer",ye?.item??"","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(i,{icon:r,size:18}):e(n.ItemIndicator,{keepMounted:!0,className:`mp-combobox__mark ${N}`,children:e(i,{icon:s,size:18})})}),e("span",{className:w(l.content)?"min-w-0 flex-1":"min-w-0 flex-1 truncate",children:l.custom?G?G(l.label):h(Me.add,{label:l.label}):l.content??l.label})]},`${o}:${l.custom?"custom:":""}${String(l.value)}`)})]})})})]}),e(y,{description:le,errorMessage:ne,className:Ie.padding})]})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Combobox as o}from"@base-ui/react/combobox";import{Field as l}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip.js";import{MPIcon as r}from"../icon/MPIcon.js";import{AddIcon as i,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons.js";import{MPFieldLabel as p,MPFieldOutline as u,useFloatingLabel as d}from"../../internal/FieldOutline.js";import{fillMessage as h}from"../../internal/i18n.js";import{useMPLocale as f,useMPMessages as b}from"../../internal/locale.js";import{COMBOBOX as g}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 C,hasContent as w}from"../../internal/scale.js";import{MARK_MOTION_KEPT as N}from"../../internal/mark.js";import{FADE as L,PORTAL_LAYER as M}from"../../internal/surface.js";import{useMPSize as k}from"../../internal/config.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 V(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function MPCombobox({items:O,multiple:$,value:P,defaultValue:_,onValueChange:q,onInputValueChange:F,onKeyDown:T,onKeyUp:A,onFocus:D,onBlur:K,onClick:R,onDoubleClick:B,onContextMenu:E,allowCustom:U=!0,customLabel:G,clearable:H=!1,emptyMessage:W,limit:J,filter:Q,chipVariant:X,chipColor:Y,placeholder:Z,label:ee,floatingLabel:ae=!0,description:ne,errorMessage:oe,startIcon:le,size:te,fullWidth:re=!1,required:ie=!1,disabled:se=!1,readOnly:me=!1,name:ce,open:pe,defaultOpen:ue,onOpenChange:de,clearLabel:he,openLabel:fe,locale:be,removeLabel:ge,inputRef:xe,id:ve,classNames:ye,className:je,style:Ce}){const we=k(te),Ne=f(be),Le=b(x,Ne),Me=b(g,Ne),ke=w(oe),Se=!0===$,Ie=S[we],ze=n.useId(),Ve=ve??ze,Oe=n.useMemo(()=>O.map(e=>({value:e.value,label:e.label??String(e.value),content:e.content,disabled:e.disabled})),[O]),[$e,Pe]=n.useState(()=>V(_)),_e=void 0===P?$e:V(P),[qe,Fe]=n.useState(""),{shrunk:Te,focusProps:Ae}=d({floating:ae&&w(ee),filled:_e.length>0||""!==qe,pinned:!!le}),De=n.useMemo(()=>new Map(Oe.map(e=>[e.value,e])),[Oe]),Ke=n.useMemo(()=>{const e=new Set;for(const a of Oe)e.add(a.label.toLocaleLowerCase()),e.add(String(a.value).toLocaleLowerCase());return e},[Oe]),Re=n.useCallback(e=>De.get(e)??{value:e,label:String(e),custom:!0},[De]),Be=qe.trim(),Ee=Be.toLocaleLowerCase(),Ue=""===Be||Ke.has(Ee)||_e.some(e=>String(e).toLocaleLowerCase()===Ee),Ge=!U||me||se||Ue?null:Be,He=n.useMemo(()=>null==Q?Q:(e,a)=>!0===e.custom||Q(e,a),[Q]),We=n.useMemo(()=>null===Ge?Oe:[...Oe,{value:Ge,label:Ge,custom:!0}],[Oe,Ge]),Je=Se?_e.map(Re):_e.length>0?Re(_e[0]):null;const Qe=/*@__PURE__*/["min-w-0 flex-1 self-stretch border-0 bg-transparent text-inherit [font:inherit] outline-none","placeholder:text-mp-on-surface-variant",se?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Xe=/*@__PURE__*/["group rounded-mp-full relative flex size-8 shrink-0 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0","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(" "),Ye=a=>e(o.Input,{ref:xe,id:Ve,placeholder:Te?Z:void 0,onKeyDown:T,onKeyUp:A,onFocus:D,onBlur:K,onClick:R,onDoubleClick:B,onContextMenu:E,className:Se?`${Qe} min-w-16 ${a?"ms-1.5":""}`:Qe});return a(l.Root,{disabled:se,invalid:ke,"data-mp-size":we,className:["mp-combobox group flex-col align-top",re?"flex w-full":"inline-flex w-fit",je??""].filter(Boolean).join(" "),style:Ce,...Ae,children:[a(o.Root,{name:ce,items:We,multiple:Se,value:Je,onValueChange:e=>{!function(e){void 0===P&&Pe(e),q?.(Se?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{Fe(e),F?.(e)},open:pe,defaultOpen:ue,onOpenChange:e=>de?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:J,filter:He,disabled:se,readOnly:me,required:ie,children:[a("div",{className:"relative w-full",children:[a(o.InputGroup,{className:["relative flex w-full items-center gap-2",Ie.padding,Se?I[we]:Ie.height,C[we],se?"cursor-default":"cursor-text"].join(" "),children:[le?e("span",{className:["flex shrink-0 items-center",se?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:le}):null,Se?e(o.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(o.Value,{children:l=>a(n.Fragment,{children:[l.map((a,n)=>e(o.Chip,{render:e(t,{variant:X??(ke?"outlined":"tonal"),color:Y??(ke?"error":"primary"),size:z[we],disabled:se,endIcon:me||se?null:e(o.ChipRemove,{"aria-label":ge?ge(a.label):h(Le.removeNamed,{label:a.label}),className:"flex cursor-pointer appearance-none items-center border-0 bg-transparent p-0 text-inherit opacity-70 hover:opacity-100",children:e(r,{icon:c,size:16})})}),children:a.label},`${n}:${String(a.value)}`)),Ye(l.length>0)]})})}):Ye(!1),H&&!me?a(o.Clear,{"aria-label":he??Le.clear,className:Xe,children:[e(v,{}),e(r,{icon:c,size:j[we]})]}):null,a(o.Trigger,{"aria-label":fe??Le.open,className:Xe,children:[e(v,{}),e(o.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:j[we]})})]})]}),e(u,{label:ee,required:ie,notched:Te}),w(ee)?e(p,{size:we,label:ee,required:ie,htmlFor:Ve,shrunk:Te}):null]}),e(o.Portal,{children:e(o.Positioner,{className:M,sideOffset:4,children:a(o.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",C[we],L].join(" "),children:[e(o.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:W??Me.empty}),e(o.List,{children:(n,l)=>a(o.Item,{value:n,disabled:n.disabled,className:["mp-combobox__item group rounded-mp-xs relative flex cursor-pointer",ye?.item??"","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:n.custom?e(r,{icon:i,size:18}):e(o.ItemIndicator,{keepMounted:!0,className:`mp-combobox__mark ${N}`,children:e(r,{icon:s,size:18})})}),e("span",{className:w(n.content)?"min-w-0 flex-1":"min-w-0 flex-1 truncate",children:n.custom?G?G(n.label):h(Me.add,{label:n.label}):n.content??n.label})]},`${l}:${n.custom?"custom:":""}${String(n.value)}`)})]})})})]}),e(y,{description:ne,errorMessage:oe,className:Ie.padding})]})}

package/dist/components/confirm/MPConfirmProvider.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{MPButton as i}from"../button/MPButton.js";import{MPDialog as t}from"../dialog/MPDialog.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{CONFIRM as a}from"../../internal/messages/confirm.js";const s=/*@__PURE__*/o.createContext(null);export function MPConfirmProvider({defaults:m,children:u}){const[d,f]=o.useState(null),p=c(a,l()),h=o.useRef(null),C=o.useCallback((e,r)=>new Promise(n=>{h.current?.(!1),h.current=n,f({...m,...e,acknowledge:r})}),[m]),P=o.useMemo(()=>({confirm:e=>C(e,!1),alert:e=>C(e,!0).then(()=>{})}),[C]),x=e=>{h.current?.(e),h.current=null,f(null)},g=d?.acknowledge??!1;return n(s.Provider,{value:P,children:[u,e(t,{open:null!==d,onOpenChange:e=>{e||x(g)},icon:d?.icon,title:d?.title,description:d?.description,size:d?.size??"md",color:d?.color??"primary",dismissible:d?.dismissible??!0,actions:n(r,{children:[g?null:e(i,{variant:"text",onClick:()=>x(!1),children:d?.cancelLabel??p.cancel}),e(i,{variant:"text",color:d?.color??"primary",onClick:()=>x(!0),children:d?.confirmLabel??(g?p.ok:p.confirm)})]}),children:d?.children})]})}export function useMPConfirm(){const e=o.useContext(s);if(!e)throw new Error("useMPConfirm was called outside an <MPConfirmProvider>. Wrap the application in one — the provider is what holds the dialog every confirm() is drawn in.");return e}
+import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{MPButton as i}from"../button/MPButton.js";import{MPDialog as t}from"../dialog/MPDialog.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{CONFIRM as s}from"../../internal/messages/confirm.js";const a=/*@__PURE__*/o.createContext(null);export function MPConfirmProvider({defaults:u,children:m}){const[d,f]=o.useState(null),p=c(s,l()),h=o.useRef(null),C=o.useCallback((e,r)=>new Promise(n=>{h.current?.(!1),h.current=n,f({...u,...e,acknowledge:r})}),[u]),P=o.useMemo(()=>({confirm:e=>C(e,!1),alert:e=>C(e,!0).then(()=>{})}),[C]),x=e=>{h.current?.(e),h.current=null,f(null)},g=o.useRef(null);d&&(g.current=d);const v=d??g.current,w=v?.acknowledge??!1;return n(a.Provider,{value:P,children:[m,e(t,{open:null!==d,onOpenChange:e=>{e||x(w)},icon:v?.icon,title:v?.title,description:v?.description,size:v?.size??"md",color:v?.color??"primary",dismissible:v?.dismissible??!0,actions:n(r,{children:[w?null:e(i,{variant:"text",onClick:()=>x(!1),children:v?.cancelLabel??p.cancel}),e(i,{variant:"text",color:v?.color??"primary",onClick:()=>x(!0),children:v?.confirmLabel??(w?p.ok:p.confirm)})]}),children:v?.children})]})}export function useMPConfirm(){const e=o.useContext(a);if(!e)throw new Error("useMPConfirm was called outside an <MPConfirmProvider>. Wrap the application in one — the provider is what holds the dialog every confirm() is drawn in.");return e}

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

@@ -224,6 +224,25 @@ export interface MPDataTableProps<Row> extends Omit<React.ComponentPropsWithoutR
     exportable?: boolean;
     /** What the downloaded file is called. @default 'table.csv' */
     exportFileName?: string;
+    /**
+     * Puts an apostrophe in front of a cell a spreadsheet would otherwise run as a
+     * formula — one beginning `=`, `+`, `-` or `@`.
+     *
+     * On by default. A data table shows rows other people filled in, and the file
+     * it writes is going to be opened in a spreadsheet: those two together are
+     * what turn a cell reading `=HYPERLINK("https://…"&A1)` into one click that
+     * posts the row beside it to somebody else's server. It is the reader's own
+     * spreadsheet that runs it, so the file is the only place to stop it.
+     *
+     * A number keeps its sign: `-5` and `+82 2 555 0100` are not formulas and are
+     * left alone.
+     *
+     * Turn it off for a file going to a parser rather than to a person — a
+     * database loader has no apostrophe rule and would take it as part of the
+     * value.
+     * @default true
+     */
+    exportEscapeFormulas?: boolean;
     /**
      * 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.
@@ -292,4 +311,4 @@ export interface MPDataTableProps<Row> extends Omit<React.ComponentPropsWithoutR
  * `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;
+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, exportEscapeFormulas, 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

@@ -1,2 +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]})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{MPButton as r}from"../button/MPButton.js";import{MPCheckbox as n}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 E}from"../../internal/table.js";import{DEFAULT_COLUMN_WIDTH as L,MIN_COLUMN_WIDTH as D,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 F}from"../../internal/data-table.js";function V(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 text-inherit text-start [font:inherit]","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:re,searchable:ne=!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",exportEscapeFormulas:Ee=!0,onExport:Le,striped:De=!1,hoverable:$e=!1,stickyHeader:Ae=!1,variant:Ie="outlined",elevation:Ke,size:We,color:Re,density:Te,className:Be,style:Fe,classNames:Ve,...He}){const Xe=y(We),Oe=f(Re),qe=h(Te),Ge=g(Y),Je=b(x,Ge),Qe=b(k,Ge),Ue=b(w,Ge),Ye=M(Xe,qe),Ze=P(Xe,qe),[et,tt]=a.useState(()=>[...ae??[]]),at=te??et,[rt,nt]=a.useState(le??""),ot=oe??rt,[lt,st]=a.useState(pe??1),it=ue??lt,[ct,dt]=a.useState(ye??25),mt=he??ct,[ut,pt]=a.useState(()=>({...ke})),ft=xe??ut,[ht,yt]=a.useState(()=>[...je??[]]),gt=Ne??ht,bt=a.useMemo(()=>new Set(gt.map(e=>String(e))),[gt]),vt=a.useRef(null),xt=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]),kt=a.useMemo(()=>{const e=q.filter(e=>!1!==e.searchable);return xt.map(t=>R(e.map(e=>V(e,t.row))))},[xt,q]),wt=T(ot.trim()),St=a.useMemo(()=>{const e=""===wt?xt:xt.filter((e,t)=>kt[t].includes(wt));return ce?e.filter(e=>ce(e.row,e.origin)):e},[xt,kt,wt,ce]),Nt=a.useMemo(()=>new Intl.Collator(Ge,{numeric:!0,sensitivity:"base"}),[Ge]),jt=a.useMemo(()=>B(St,at,(e,t)=>{const a=q.find(t=>t.key===e);if(!a)return null;const r="desc"===t,n=a.compare;return n?(e,t)=>r?-n(e.row,t.row):n(e.row,t.row):(e,t)=>$(V(a,e.row),V(a,t.row),Nt,r)}),[St,at,q,Nt]),Ct=W(jt.length,it,mt),zt=me?jt.slice(Ct.start,Ct.end):jt,_t=e=>{void 0===ue&&st(e),fe?.(e)},Mt=e=>{void 0===xe&&pt(e),we?.(e)},Pt=e=>{const t=new Set(e),a=[],r=[];for(const e of xt)t.has(e.key)&&(r.push(e.identity),a.push(e.row));void 0===Ne&&yt(r),Ce?.(r,a)},Et="none"!==Se,Lt="multiple"===Se,Dt=ze&&Et,$t=(e,t,a)=>{if(_e?.(e.row,Ct.start+t),Et){if(!Lt)return Pt(bt.has(e.key)?[]:[e.key]),void(vt.current=e.key);if(a&&null!==vt.current){const t=I(zt.map(e=>e.key),vt.current,e.key);return void Pt([...new Set([...bt,...t])])}vt.current=e.key,Pt(bt.has(e.key)?[...bt].filter(t=>t!==e.key):[...bt,e.key])}},At=zt.map(e=>e.key),It=At.filter(e=>bt.has(e)).length,Kt=At.length>0&&It===At.length,Wt=e=>ft[e.key]??e.width??L,Rt=a.useRef(null);a.useEffect(()=>()=>{null!==Rt.current&&(document.body.style.userSelect=Rt.current,Rt.current=null)},[]);const Tt=(e,t)=>{const a=Math.max(D,e.minWidth??D);Mt({...ft,[e.key]:Math.max(a,Wt(e)+t)})},Bt=e=>{const t={...ft};delete t[e.key],Mt(t)},Ft={padding:`${Ze} ${Ye}`},Vt={...Ft,backgroundColor:"var(--_mp-color-surface-container)"},Ht={borderTop:"1px solid var(--_mp-color-outline-variant)",backgroundColor:"var(--_mp-row)"},Xt=q.length+(Dt?1:0),Ot=Boolean(_e)||Et&&!Dt,qt=$e||Et||Boolean(_e),Gt=ne||Me||void 0!==de,Jt=me||Et,Qt=(...e)=>e.filter(Boolean).join(" ");return t("div",{"data-mp-size":Xe,"data-mp-variant":Ie,className:Qt("mp-data-table rounded-mp-md flex flex-col",p(Ie,Ke),Be),style:{...u(Oe),...Fe},...He,children:[Gt?t("div",{className:Qt("mp-data-table__toolbar flex flex-wrap items-center gap-2",Ve?.toolbar),style:{padding:`${Ze} ${Ye}`},children:[ne?e(i,{size:Xe,value:ot,onChange:e=>{void 0===oe&&nt(e),_t(1),se?.(e)},label:ie??Ue.search,startIcon:e(o,{icon:m,size:S[Xe]}),className:"mp-data-table__search min-w-0 flex-1"}):e("div",{className:"min-w-0 flex-1"}),de,Me?e(r,{size:Xe,variant:"text",color:Oe,onClick:()=>{const e=q.filter(e=>!1!==e.exportable),t=e.map(e=>"string"==typeof e.label?e.label:e.key),a=jt.map(t=>e.map(e=>e.exportValue?e.exportValue(t.row):V(e,t.row))),r=F([t,...a],{escapeFormulas:Ee});Le?Le(r):A(r,Pe,"text/csv;charset=utf-8")},startIcon:e(o,{icon:c,size:S[Xe]}),children:Je.download}):null]}):null,e("div",{className:"mp-data-table__scroll min-h-0 flex-1 overflow-auto",children:t("table",{className:Qt("text-mp-on-surface w-full text-start",C[Xe],Ve?.table),style:{borderCollapse:"collapse",...ve?{tableLayout:"fixed",minWidth:q.reduce((e,t)=>e+Wt(t),Dt?H[Xe]:0)}:void 0},children:[Q?e("caption",{className:`text-mp-on-surface-variant ${N}`,style:{...Ft,textAlign:"start"},children:Q}):null,t("colgroup",{children:[Dt?e("col",{style:{width:H[Xe]}}):null,q.map(t=>e("col",{style:ve||void 0!==ft[t.key]||void 0!==t.width?{width:Wt(t)}:void 0},t.key))]}),e("thead",{className:Ve?.head,children:t("tr",{children:[Dt?e("th",{scope:"col",className:Qt("whitespace-nowrap",Ae&&"sticky top-0 z-20"),style:Vt,children:e(n,{size:Xe,color:Oe,checked:Kt,indeterminate:It>0&&!Kt,onCheckedChange:()=>{Pt(Kt?[...bt].filter(e=>!At.includes(e)):[...new Set([...bt,...At])])},label:e("span",{className:j,children:Je.selectAll}),disabled:!Lt||0===At.length})}):null,q.map(a=>{const r=a.sortable??Z,n=(l=a.key,at.findIndex(e=>e.key===l));var l;const s=-1===n?void 0:at[n],i=a.resizable??ve,c=a.align??"start";return t("th",{scope:"col","aria-sort":r?void 0===s?"none":"asc"===s.direction?"ascending":"descending":void 0,className:Qt("text-mp-on-surface-variant relative whitespace-nowrap",z[Xe],Ae&&"sticky top-0 z-10"),style:{...Vt,textAlign:c},children:[r?t("button",{type:"button",className:Qt(X,"end"===c&&"justify-end","center"===c&&"justify-center"),onClick:e=>((e,t)=>{const a=K(at,e,t&&"multiple"===ee);void 0===te&&tt(a),re?.(a)})(a.key,e.shiftKey),children:[e("span",{className:"min-w-0 truncate",children:a.label??a.key}),e(o,{icon:d,size:S[Xe]-6,className:Qt("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")}),at.length>1&&-1!==n?e("span",{className:"text-mp-primary shrink-0 tabular-nums",children:n+1}):null]}):a.label??a.key,i?e("button",{type:"button","aria-label":Je.resize,className:O,onPointerDown:e=>((e,t)=>{const a=t.currentTarget;try{a.setPointerCapture(t.pointerId)}catch{}a.dataset.dragging="true";const r=document.body.style.userSelect;Rt.current=r,document.body.style.userSelect="none";const n=t.clientX,o=Wt(e),l="rtl"===getComputedStyle(a).direction?-1:1,s=Math.max(D,e.minWidth??D),i=t=>{Mt({...ft,[e.key]:Math.max(s,Math.round(o+(t.clientX-n)*l))})},c=()=>{a.removeEventListener("pointermove",i),a.removeEventListener("pointerup",c),a.removeEventListener("pointercancel",c),delete a.dataset.dragging,null!==Rt.current&&(document.body.style.userSelect=Rt.current,Rt.current=null)};a.addEventListener("pointermove",i),a.addEventListener("pointerup",c),a.addEventListener("pointercancel",c)})(a,e),onDoubleClick:()=>Bt(a),onKeyDown:e=>{const t=e.shiftKey?32:8;"ArrowRight"===e.key?(e.preventDefault(),Tt(a,t)):"ArrowLeft"===e.key?(e.preventDefault(),Tt(a,-t)):"Home"===e.key&&(e.preventDefault(),Bt(a))}}):null]},a.key)})]})}),e("tbody",{children:0===zt.length?e("tr",{className:_,style:Ht,children:e("td",{colSpan:Xt,className:"text-mp-on-surface-variant",style:{padding:`2rem ${Ye}`,textAlign:"center"},children:U??Qe.empty})}):zt.map((a,r)=>{const o=bt.has(a.key);return t("tr",{"aria-selected":Et?o:void 0,className:Qt(_,Ve?.row,De&&(Ct.start+r)%2==1?"[--_mp-row:var(--_mp-color-surface-container-low)]":"",o?"[--_mp-row:var(--_mp-color-secondary-container)]":"",qt&&!o?"hover:[--_mp-row:var(--_mp-color-surface-container)]":"",(Et||_e)&&"cursor-pointer",Ot&&["outline-mp-secondary focus-visible:outline-2","focus-visible:-outline-offset-2 focus-visible:outline-solid outline-none"].join(" ")),style:Ht,tabIndex:Ot?0:void 0,onClick:e=>$t(a,r,e.shiftKey),onKeyDown:Ot?e=>{"Enter"!==e.key&&" "!==e.key||e.target===e.currentTarget&&(e.preventDefault(),$t(a,r,e.shiftKey))}:void 0,children:[Dt?e("td",{style:Ft,children:e(n,{size:Xe,color:Oe,checked:o,onCheckedChange:()=>$t(a,r,!1),label:e("span",{className:j,children:Je.selectRow})})}):null,q.map(t=>e("td",{className:Ve?.cell,style:{...Ft,textAlign:t.align??"start"},children:t.render?t.render(a.row,Ct.start+r):E(V(t,a.row))},t.key))]},a.key)})})]})}),Jt?t("div",{className:Qt("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:`${Ze} ${Ye}`},children:[e("span",{className:"mp-data-table__count",children:v(Je.total,{total:String(jt.length)})}),bt.size>0?e("span",{className:"mp-data-table__selected text-mp-primary",children:v(Je.selected,{count:String(bt.size)})}):null,e("span",{className:"flex-1"}),me&&be.length>0?e(s,{size:"xs",label:Je.perPage,floatingLabel:!1,value:mt,onValueChange:e=>(e=>{void 0===he&&dt(e),_t(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:Oe,count:Ct.pages,page:Ct.page,onPageChange:_t,locale:Ge}):null]}):null]})}

package/dist/components/date-picker/MPDatePicker.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as o from"react";import{MPButton as t}from"../button/MPButton.js";import{MPIcon as n}from"../icon/MPIcon.js";import{CalendarIcon as l}from"../../constants/icons.js";import{Calendar as r}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as s,MPPickerShell as c,useDisplaySamples as m}from"../../internal/Picker.js";import{useMPLocale as d,useMPMessages as u}from"../../internal/locale.js";import{PICKER as p}from"../../internal/messages/picker.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{formatDate as h,isUnitOutside as y,isValidDate as j,localeWeekStart as b,mergeDateAndTime as g,startOfMonth as v,startOfUnit as x,toISODate as D,toISOMonth as k,toISOYear as C,today as O,withPlaceholder as S}from"../../internal/date.js";import{useMPColor as z,useMPSize as M}from"../../internal/config.js";const P={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}},w={day:D,month:k,year:C};export const MPDatePicker=/*@__PURE__*/o.forwardRef(function({value:D,defaultValue:k,onValueChange:C,open:I,defaultOpen:V,onOpenChange:B,precision:R="day",defaultMonth:E,minDate:F,maxDate:N,shouldDisableDate:T,locale:Y,weekStartsOn:q,format:A,placeholder:G,clearable:H=!1,showTodayButton:J=!0,closeOnSelect:K=!0,labels:L,name:Q,size:U,color:W,readOnly:X=!1,disabled:Z=!1,startIcon:$,..._},ee){const ae=M(U),oe=z(W),te=d(Y),ne=u(p,te,L),le=q??b(te),re=A??P[R],[ie,se]=o.useState(k??null),ce=void 0!==D?D:ie,[me,de]=o.useState(V??!1),ue=I??me,[pe,fe]=o.useState(()=>v(j(ce)?ce:E??O()));o.useEffect(()=>{ue&&fe(v(j(ce)?ce:E??O()))},[ue]);const he=e=>{e&&(X||Z)||(void 0===I&&de(e),B?.(e))},ye=e=>{void 0===D&&se(e),C?.(e)},je=e=>{const a=x(e,R),o=j(ce)?g(a,ce):a;ye(o),fe(v(o)),K&&he(!1)},be=O(),ge=y(be,R,F,N)||"day"===R&&(T?.(be)??!1),ve="year"===R?ne.thisYear:"month"===R?ne.thisMonth:ne.today,xe=J||H,De=S(m(te,re),G);return e(c,{..._,slug:"date-picker",size:ae,color:oe,readOnly:X,disabled:Z,triggerRef:ee,startIcon:void 0===$?e(n,{icon:l,size:f[ae]}):$,display:j(ce)?h(ce,te,re):G??"",samples:De,empty:!j(ce),clearable:H,onClear:()=>ye(null),open:ue,onOpenChange:he,labels:ne,hiddenValues:Q?[{name:Q,value:j(ce)?w[R](ce):""}]:void 0,children:a("div",{className:"flex flex-col "+(xe?"gap-1.5":""),children:[e(r,{size:ae,color:oe,locale:te,weekStartsOn:le,month:pe,onMonthChange:fe,selected:[ce],onSelect:je,minDate:F,maxDate:N,shouldDisableDate:T,precision:R,labels:ne,autoFocus:!0}),xe?a(s,{children:[H?e(t,{variant:"text",size:i[ae],color:oe,onClick:()=>{ye(null),he(!1)},children:ne.clear}):null,J?e(t,{variant:"text",size:i[ae],color:oe,disabled:ge,onClick:()=>je(be),children:ve}):null]}):null]})})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as o from"react";import{MPButton as t}from"../button/MPButton.js";import{MPIcon as n}from"../icon/MPIcon.js";import{CalendarIcon as l}from"../../constants/icons.js";import{Calendar as r}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerFooter as s,MPPickerShell as c,useDisplaySamples as m}from"../../internal/Picker.js";import{useMPLocale as d,useMPMessages as u}from"../../internal/locale.js";import{PICKER as p}from"../../internal/messages/picker.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{formatDate as h,isUnitOutside as y,TO_ISO as j,isValidDate as b,localeWeekStart as g,mergeDateAndTime as v,startOfMonth as x,startOfUnit as D,today as k,withPlaceholder as C}from"../../internal/date.js";import{useMPColor as O,useMPSize as S}from"../../internal/config.js";const z={day:{dateStyle:"medium"},month:{year:"numeric",month:"long"},year:{year:"numeric"}};export const MPDatePicker=/*@__PURE__*/o.forwardRef(function({value:M,defaultValue:P,onValueChange:w,open:I,defaultOpen:V,onOpenChange:B,precision:R="day",defaultMonth:E,minDate:F,maxDate:N,shouldDisableDate:T,locale:Y,weekStartsOn:q,format:A,placeholder:G,clearable:H=!1,showTodayButton:J=!0,closeOnSelect:K=!0,labels:L,name:Q,size:U,color:W,readOnly:X=!1,disabled:Z=!1,startIcon:$,..._},ee){const ae=S(U),oe=O(W),te=d(Y),ne=u(p,te,L),le=q??g(te),re=A??z[R],[ie,se]=o.useState(P??null),ce=void 0!==M?M:ie,[me,de]=o.useState(V??!1),ue=I??me,[pe,fe]=o.useState(()=>x(b(ce)?ce:E??k()));o.useEffect(()=>{ue&&fe(x(b(ce)?ce:E??k()))},[ue]);const he=e=>{e&&(X||Z)||(void 0===I&&de(e),B?.(e))},ye=e=>{void 0===M&&se(e),w?.(e)},je=e=>{const a=D(e,R),o=b(ce)?v(a,ce):a;ye(o),fe(x(o)),K&&he(!1)},be=k(),ge=y(be,R,F,N)||"day"===R&&(T?.(be)??!1),ve="year"===R?ne.thisYear:"month"===R?ne.thisMonth:ne.today,xe=J||H,De=C(m(te,re),G);return e(c,{..._,slug:"date-picker",size:ae,color:oe,readOnly:X,disabled:Z,triggerRef:ee,startIcon:void 0===$?e(n,{icon:l,size:f[ae]}):$,display:b(ce)?h(ce,te,re):G??"",samples:De,empty:!b(ce),clearable:H,onClear:()=>ye(null),open:ue,onOpenChange:he,labels:ne,hiddenValues:Q?[{name:Q,value:b(ce)?j[R](ce):""}]:void 0,children:a("div",{className:"flex flex-col "+(xe?"gap-1.5":""),children:[e(r,{size:ae,color:oe,locale:te,weekStartsOn:le,month:pe,onMonthChange:fe,selected:[ce],onSelect:je,minDate:F,maxDate:N,shouldDisableDate:T,precision:R,labels:ne,autoFocus:!0}),xe?a(s,{children:[H?e(t,{variant:"text",size:i[ae],color:oe,onClick:()=>{ye(null),he(!1)},children:ne.clear}):null,J?e(t,{variant:"text",size:i[ae],color:oe,disabled:ge,onClick:()=>je(be),children:ve}):null]}):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 n from"react";import{Button as o}from"@base-ui/react/button";import{accentSlots as a}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";import{useMPColor as m,useMPSize as l}from"../../internal/config.js";const p={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)"},d={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},f={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"},c={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},x={xs:24,sm:24,md:24,lg:30,xl:36},u={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"},g={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"},b={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},h={"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__*/n.forwardRef(function({icon:n,label:w,extended:_=!1,variant:y="tonal",color:j,size:v,position:k="fixed",corner:z="bottom-end",offset:N=16,disabled:B=!1,type:$="button",className:A,style:F,...L},M){const P=m(j),R=l(v);return e(o,{ref:M,type:$,disabled:B,"aria-label":w,"data-mp-size":R,"data-mp-variant":y,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",c[R],d[R],u[R],_?g[R]:f[R],B?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${p[y]} shadow-mp-3`,"static"===k?"relative":`${b[k]} ${h[z]}`,A??""].filter(Boolean).join(" "),style:{...a(P),"--_mp-fab-offset":i(N),...F},...L,children:[B?null:t(s,{}),r(n)?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:x[R],height:x[R]},children:n}):null,t("span",{className:["relative grid transition-[grid-template-columns]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",_?"grid-cols-[1fr]":"grid-cols-[0fr]"].join(" "),children:t("span",{className:"min-w-0 truncate",children:w})})]})});
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{Button as n}from"@base-ui/react/button";import{accentSlots as a}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";import{useMPColor as m,useMPSize as l}from"../../internal/config.js";const p={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)"},d={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},f={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"},c={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},x={xs:24,sm:24,md:24,lg:30,xl:36},u={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"},b={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"},g={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},h={"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__*/o.forwardRef(function({icon:o,label:w,extended:_=!1,variant:y="tonal",color:j,size:v,position:k="fixed",corner:z="bottom-end",offset:N=16,disabled:B=!1,type:$="button",className:A,style:F,...L},M){const P=m(j),R=l(v);return e(n,{ref:M,type:$,disabled:B,"aria-label":w,"data-mp-size":R,"data-mp-variant":y,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 border-0 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",c[R],d[R],u[R],_?b[R]:f[R],B?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${p[y]} shadow-mp-3`,"static"===k?"relative":`${g[k]} ${h[z]}`,A??""].filter(Boolean).join(" "),style:{...a(P),"--_mp-fab-offset":i(N),...F},...L,children:[B?null:t(s,{}),r(o)?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:x[R],height:x[R]},children:o}):null,t("span",{className:["relative grid transition-[grid-template-columns]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",_?"grid-cols-[1fr]":"grid-cols-[0fr]"].join(" "),children:t("span",{className:"min-w-0 truncate",children:w})})]})});

package/dist/components/grid/MPGrid.d.ts

@@ -15,19 +15,28 @@ export type MPGridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 /** The same, for one item overriding the row it is in. */
 export type MPGridAlignSelf = MPGridAlign | 'auto';
 /**
- * How wide one item is: a number of the grid's columns, or `'grow'`.
+ * How wide one item is: a number of the grid's columns, `'grow'` or `'auto'`.
  *
- * `'grow'` is the one value that is not a measurement. It is "whatever the row
- * has left after everybody else has taken theirs", which is the width a
- * thumbnail's neighbour wants and the one thing a twelve-column arithmetic
- * cannot express — the remainder is only known once the other items in *that*
- * row have been laid out, and no `span` a caller writes down knows what else is
- * in the row.
+ * Neither word is a measurement, and they are the two ends of the same question
+ * a column count cannot answer. `'grow'` is "whatever the row has left after
+ * everybody else has taken theirs" — the width a thumbnail's neighbour wants,
+ * and one the arithmetic cannot reach because the remainder is only known once
+ * the other items in *that* row have been laid out. `'auto'` is "exactly what is
+ * inside me", which the arithmetic cannot reach either: what is inside an item
+ * is measured by the browser, and a share of twelve columns has to be written
+ * down in advance.
+ *
+ * They pair. A control bar whose left half is a set of transport buttons and
+ * whose right half is however many icon buttons the page turned out to need is
+ * `span="grow"` and `span="auto"`, and neither side has a number in it — which
+ * matters because the number would be wrong: four 32px buttons in `span={2}` of
+ * a 768px bar is 128px against 128px, and the pixel that sub-pixel rounding
+ * takes off wraps the last button onto a second row.
  *
  * Two growing items in a row split the remainder equally rather than by their
  * contents, which is the useful half of what makes it predictable.
  */
-export type MPGridSpan = number | 'grow';
+export type MPGridSpan = number | 'grow' | 'auto';
 export interface MPGridProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How many columns a row is divided into. Every `span` and every `offset`
@@ -96,6 +105,14 @@ export interface MPGridItemProps extends React.ComponentPropsWithoutRef<'div'> {
      * when the picture's column count changes. It is responsive like any other
      * value: `span={{ compact: 12, medium: 'grow' }}` stacks on a phone and fills
      * the rest of the row from 600dp.
+     *
+     * `span="auto"` is the other end of that: exactly the width of what is inside
+     * the item, however much that turns out to be. It is the span for a group
+     * whose size is a runtime question — a row of icon buttons where how many
+     * there are depends on what the page can do — and it pairs with `'grow'`, one
+     * item taking what it needs and the other taking the rest. An `'auto'` item
+     * does not shrink, so contents wider than the row overflow rather than
+     * squeezing what is beside them.
      * @default the grid's full width
      */
     span?: MPResponsive<MPGridSpan>;

package/dist/components/grid/MPGrid.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";import{classMap as n,responsiveSlots as r,withBaseline as s}from"../../internal/responsive.js";import{WINDOW_CLASSES as a}from"../../internal/window-class.js";function o(e){return String(Math.max(1,Math.round(e)))}function c(e){return String(Math.max(1,Math.round(e)))}function i(e){const t=n(e),r=Object.values(t).some(e=>"grow"===e),s={};for(const e of a){const n=t[e];void 0!==n&&("grow"!==n&&(s[`--_mp-span-${e}`]=c(n)),r&&(s[`--_mp-grow-${e}`]="grow"===n?"1":"0"))}return s}function l(e){return String(Math.max(0,Math.round(e)))}function f(e){const t=.25*Math.max(0,e);return`${Number(t.toFixed(5))}rem`}const p={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},u={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},m={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"},d={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};export const MPGrid=/*@__PURE__*/e.forwardRef(function({columns:e,spacing:n,rowSpacing:a,columnSpacing:c,justifyContent:i,alignItems:l,alignContent:d,wrap:g=!0,render:y,className:h,style:w,children:x,...j},b){return t({render:y,ref:b,props:{className:["mp-grid flex",g?"flex-wrap":"flex-nowrap","gap-x-(--_mp-gap-x) gap-y-(--_mp-gap-y)",i?p[i]:"",l?u[l]:"",d?m[d]:"",h??""].filter(Boolean).join(" "),style:{...r("cols",s(e,12),o),...r("gap-x",s(c??n,4),f),...r("gap-y",s(a??n,4),f),...w},children:x,...j}})});export const MPGridItem=/*@__PURE__*/e.forwardRef(function({span:e,offset:n,alignSelf:s,render:a,className:o,style:c,children:f,...p},u){return t({render:a,ref:u,props:{className:["mp-grid-item",s?d[s]:"",o??""].filter(Boolean).join(" "),"data-mp-offset":null==n?void 0:"",style:{...i(e),...r("offset",n,l),...c},children:f,...p}})});
+import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";import{classMap as n,responsiveSlots as r,withBaseline as s}from"../../internal/responsive.js";import{WINDOW_CLASSES as a}from"../../internal/window-class.js";function o(e){return String(Math.max(1,Math.round(e)))}function c(e){return String(Math.max(1,Math.round(e)))}function i(e){const t=n(e),r=Object.values(t),s=r.some(e=>"grow"===e),o=r.some(e=>"auto"===e),i={};for(const e of a){const n=t[e];void 0!==n&&("grow"!==n&&"auto"!==n&&(i[`--_mp-span-${e}`]=c(n)),s&&(i[`--_mp-grow-${e}`]="grow"===n?"1":"0"),o&&(i[`--_mp-width-${e}`]="auto"===n?"auto":"var(--_mp-span-width)"))}return i}function l(e){return String(Math.max(0,Math.round(e)))}function f(e){const t=.25*Math.max(0,e);return`${Number(t.toFixed(5))}rem`}const p={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},u={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},m={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"},d={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};export const MPGrid=/*@__PURE__*/e.forwardRef(function({columns:e,spacing:n,rowSpacing:a,columnSpacing:c,justifyContent:i,alignItems:l,alignContent:d,wrap:g=!0,render:h,className:w,style:y,children:x,...j},b){return t({render:h,ref:b,props:{className:["mp-grid flex",g?"flex-wrap":"flex-nowrap","gap-x-(--_mp-gap-x) gap-y-(--_mp-gap-y)",i?p[i]:"",l?u[l]:"",d?m[d]:"",w??""].filter(Boolean).join(" "),style:{...r("cols",s(e,12),o),...r("gap-x",s(c??n,4),f),...r("gap-y",s(a??n,4),f),...y},children:x,...j}})});export const MPGridItem=/*@__PURE__*/e.forwardRef(function({span:e,offset:n,alignSelf:s,render:a,className:o,style:c,children:f,...p},u){return t({render:a,ref:u,props:{className:["mp-grid-item",s?d[s]:"",o??""].filter(Boolean).join(" "),"data-mp-offset":null==n?void 0:"",style:{...i(e),...r("offset",n,l),...c},children:f,...p}})});

package/dist/components/hover-card/MPHoverCard.d.ts

@@ -68,6 +68,7 @@ export interface MPHoverCardProps extends Omit<React.ComponentPropsWithoutRef<'d
     /** Takes room out of that padding, two pixels a face per step. @default 0 */
     density?: MPDensity;
 }
+/** The wedge, at roughly a third of the sheet's corner per step. */
 /**
  * A card that opens when the pointer rests on something, holding a preview of
  * what is on the other side of it.

package/dist/components/hover-card/MPHoverCard.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as i from"react";import{PreviewCard as t}from"@base-ui/react/preview-card";import{cssLength as r}from"../../internal/length.js";import{sheetPad as l}from"../../internal/density.js";import{hasContent as o,META_TEXT as n,PROSE_TEXT as s,SHEET_GAP as d,SHEET_TITLE as m}from"../../internal/scale.js";import{FADE as c,PORTAL_LAYER as p}from"../../internal/surface.js";import{useMPDensity as f,useMPSize as h}from"../../internal/config.js";const x={xs:"max-w-64",sm:"max-w-72",md:"max-w-96",lg:"max-w-md",xl:"max-w-xl"},u={xs:8,sm:9,md:10,lg:11,xl:12};export function MPHoverCard({trigger:g,title:v,description:w,children:b,side:j="bottom",align:y="center",sideOffset:N=8,alignOffset:O=0,arrow:_=!1,open:P,defaultOpen:$,onOpenChange:z,delay:C,closeDelay:B,width:D,size:M,density:k,className:A,style:H,...I}){const L=h(M),R=f(k),T=o(v)||o(w),W=u[L],q=i.useId(),E=`${q}-title`,F=`${q}-description`;return a(t.Root,{open:P,defaultOpen:$,onOpenChange:e=>z?.(e),children:[e(t.Trigger,{render:g,delay:C,closeDelay:B}),e(t.Portal,{children:e(t.Positioner,{className:p,side:j,align:y,sideOffset:N,alignOffset:O,children:a(t.Popup,{"data-mp-size":L,"aria-labelledby":o(v)?E:void 0,"aria-describedby":o(w)?F:void 0,className:["mp-hover-card rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",l(L,R),d[L],s[L],void 0===D?x[L]:"",c,A??""].filter(Boolean).join(" "),style:{...void 0===D?null:{maxWidth:r(D)},...H},...I,children:[_?e(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:e("svg",{width:W,height:W/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-color-surface-container)"})})}):null,T?a("div",{className:"flex min-w-0 flex-col",children:[o(v)?e("div",{id:E,className:`mp-hover-card__title m-0 ${m[L]}`,children:v}):null,o(w)?e("div",{id:F,className:`mp-hover-card__description text-mp-on-surface-variant m-0 ${n}`,children:w}):null]}):null,o(b)?e("div",{className:"min-w-0",children:b}):null]})})})]})}
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{POPUP_ARROW_SIZE as a,POPUP_ARROW_TURN as l,PopupArrow as n}from"../../internal/PopupArrow.js";import{PreviewCard as o}from"@base-ui/react/preview-card";import{cssLength as s}from"../../internal/length.js";import{sheetPad as t}from"../../internal/density.js";import{hasContent as d,META_TEXT as m,PROSE_TEXT as c,SHEET_GAP as p,SHEET_TITLE as f}from"../../internal/scale.js";import{FADE as u,PORTAL_LAYER as x}from"../../internal/surface.js";import{useMPDensity as h,useMPSize as v}from"../../internal/config.js";const g={xs:"max-w-64",sm:"max-w-72",md:"max-w-96",lg:"max-w-md",xl:"max-w-xl"};export function MPHoverCard({trigger:w,title:j,description:y,children:b,side:N="bottom",align:O="center",sideOffset:P=8,alignOffset:_=0,arrow:$=!1,open:z,defaultOpen:C,onOpenChange:A,delay:D,closeDelay:B,width:H,size:I,density:M,className:R,style:T,...W}){const k=v(I),q=h(M),E=d(j)||d(y),F=a[k],G=i.useId(),J=`${G}-title`,K=`${G}-description`;return r(o.Root,{open:z,defaultOpen:C,onOpenChange:e=>A?.(e),children:[e(o.Trigger,{render:w,delay:D,closeDelay:B}),e(o.Portal,{children:e(o.Positioner,{className:x,side:N,align:O,sideOffset:P,alignOffset:_,children:r(o.Popup,{"data-mp-size":k,"aria-labelledby":d(j)?J:void 0,"aria-describedby":d(y)?K:void 0,className:["mp-hover-card rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",t(k,q),p[k],c[k],void 0===H?g[k]:"",u,R??""].filter(Boolean).join(" "),style:{...void 0===H?null:{maxWidth:s(H)},...T},...W,children:[$?e(o.Arrow,{className:l,children:e(n,{size:F,fill:"var(--_mp-color-surface-container)"})}):null,E?r("div",{className:"flex min-w-0 flex-col",children:[d(j)?e("div",{id:J,className:`mp-hover-card__title m-0 ${f[k]}`,children:j}):null,d(y)?e("div",{id:K,className:`mp-hover-card__description text-mp-on-surface-variant m-0 ${m}`,children:y}):null]}):null,d(b)?e("div",{className:"min-w-0",children:b}):null]})})})]})}

package/dist/components/icon/MPIcon.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import*as i from"react";function o(e){return!i.isValidElement(e)}export const MPIcon=/*@__PURE__*/i.forwardRef(function({icon:r,size:t,color:l,strokeWidth:n,center:s=!1,label:c,className:a,style:d,...f},m){const u=["mp-icon inline-flex shrink-0 items-center justify-center align-middle",void 0===t?"":"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",s?"justify-self-center":"",a??""].filter(Boolean).join(" ");return e("span",{ref:m,className:u,style:{...void 0===t?{}:{width:t,height:t,fontSize:t},...void 0===l?{}:{color:l},...d},role:c?"img":void 0,"aria-label":c,"aria-hidden":!c||void 0,...f,children:o(r)?i.createElement(r,{size:t,color:void 0===l?"currentColor":l,strokeWidth:n}):r})});
+import{jsx as e}from"react/jsx-runtime";import*as i from"react";function o(e){return!i.isValidElement(e)}export const MPIcon=/*@__PURE__*/i.forwardRef(function({icon:r,size:t,color:n,strokeWidth:l,center:s=!1,label:c,className:a,style:d,...m},f){const h=["mp-icon inline-flex shrink-0 items-center justify-center align-middle","[&>svg]:shrink-0 [&>img]:shrink-0",void 0===t?"":"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",s?"justify-self-center":"",a??""].filter(Boolean).join(" ");return e("span",{ref:f,className:h,style:{...void 0===t?{}:{width:t,height:t,fontSize:t},...void 0===n?{}:{color:n},...d},role:c?"img":void 0,"aria-label":c,"aria-hidden":!c||void 0,...m,children:o(r)?i.createElement(r,{size:t,color:void 0===n?"currentColor":n,strokeWidth:l}):r})});

package/dist/components/image/MPImage.d.ts

@@ -1,9 +1,35 @@
 import * as React from 'react';
 import type { MPSize } from '../../types.js';
-/** How the picture is fitted into the box it was given. CSS's own four. */
-export type MPImageFit = 'cover' | 'contain' | 'fill' | 'none';
+/** How the picture is fitted into the box it was given. CSS's own words. */
+export type MPImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 /** What the picture is doing right now. */
 export type MPImageState = 'loading' | 'loaded' | 'error';
+/** A picture that stands in while the real one arrives. */
+export interface MPImagePlaceholder {
+    /**
+     * A URL, a data URI, or a `Blob` such as a file the reader has just picked.
+     *
+     * A `Blob` is drawn through an object URL made for it, so keep the same Blob
+     * from one render to the next: a new one on every render makes a new URL on
+     * every render, and each of those renders again.
+     */
+    src: string | Blob;
+    /**
+     * Blurs the stand-in. `true` is a 20px radius, and a number is a radius in
+     * pixels.
+     * @default false
+     */
+    blur?: boolean | number;
+}
+/** A turn in degrees, clockwise, a quarter at a time. */
+export type MPImageRotate = 0 | 90 | 180 | 270;
+/** Which way the picture is mirrored, along the axes it is shown on. */
+export type MPImageFlip = 'none' | 'horizontal' | 'vertical' | 'both';
+/**
+ * The part of the picture a crop keeps, in `object-position`'s words: the
+ * centre, a side, a corner, or two percentages across and down.
+ */
+export type MPImagePosition = 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top left' | 'top right' | 'bottom left' | 'bottom right' | `${number}% ${number}%`;
 export interface MPImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>, 'onError'> {
     /** Where the picture is. */
     src?: string;
@@ -26,18 +52,44 @@ export interface MPImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>
      */
     ratio?: number | string;
     /**
-     * How the picture is fitted into that box.
+     * How the picture is fitted into that box. `scale-down` is `contain` that
+     * never enlarges a file smaller than the box.
      * @default 'cover'
      */
     fit?: MPImageFit;
+    /**
+     * The width of the file, or of the box when it is given without `height`.
+     *
+     * With `height` as well, the two are the file's size in pixels, as on an
+     * `<img>`, and they reserve its proportion. Alone, it makes the box that wide,
+     * no wider than its container, and as tall as the picture or `ratio` makes
+     * it. A number or a string of digits is pixels, and any other string is a CSS
+     * length.
+     */
+    width?: number | string;
+    /**
+     * The height of the file, or of the box when it is given without `width`.
+     *
+     * With `width` as well, the two are the file's size in pixels. Alone, it makes
+     * the box that tall and as wide as its container, or as wide as `ratio` makes
+     * it when there is one. A number or a string of digits is pixels, and any
+     * other string is a CSS length.
+     */
+    height?: number | string;
     /**
      * Drawn while the picture is on its way.
      *
      * A shimmer by default, on the surface the box sits on. `false` draws nothing,
      * which is what a picture inside something that already has its own loading
      * treatment wants.
+     *
+     * `{ src, blur }` draws a picture instead: a small copy of the file, a data
+     * URI or a `Blob`, fitted, placed, turned and mirrored like the picture, and
+     * blurred if `blur` says so. It gives way once the picture has faded in over
+     * it. Like the shimmer, it fills the box, so the box needs a reserved size: a
+     * `ratio`, or both `width` and `height`.
      */
-    placeholder?: React.ReactNode | false;
+    placeholder?: React.ReactNode | false | MPImagePlaceholder;
     /**
      * Drawn instead of the picture when it does not arrive.
      *
@@ -75,6 +127,62 @@ export interface MPImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>
      * arrives either way.
      */
     onStateChange?: (state: MPImageState) => void;
+    /**
+     * Turns the picture clockwise, in quarter turns.
+     *
+     * Only quarters, because a picture turned by any other angle stops covering
+     * its box, and filling the corners would mean enlarging it by an amount the
+     * caller would then want to tune. A quarter turn swaps the box's proportion:
+     * `width` and `height`, when both are given, are read as the file's size and
+     * reserve the turned shape, and without them the shape is read from the file
+     * once it arrives. An explicit `ratio` is the layout's shape and is kept.
+     *
+     * Drawn with the `rotate` property rather than `transform`, so a `transform`
+     * of your own, such as a hover zoom, still applies on top.
+     * @default 0
+     */
+    rotate?: MPImageRotate;
+    /**
+     * Mirrors the picture along the axes it is shown on.
+     *
+     * `horizontal` swaps left and right on the screen whether or not the picture
+     * is turned. Drawn with the `scale` property, so it leaves `transform` free as
+     * `rotate` does, and `preview` opens the picture mirrored.
+     * @default 'none'
+     */
+    flip?: MPImageFlip;
+    /**
+     * Which part of the picture a `cover` crop keeps, and where `contain`, `none`
+     * and `scale-down` leave their empty space.
+     *
+     * Read on the picture as it is shown, so `top` keeps the top of a picture
+     * that has been turned or mirrored. Physical rather than logical: the subject
+     * of a photograph does not move to the other side on a right-to-left page. A
+     * value in any other form reaches `object-position` as written.
+     * @default 'center'
+     */
+    position?: MPImagePosition;
+    /**
+     * What fills the room `fit` leaves around the picture.
+     *
+     * `blur` draws the same picture behind itself, covering the box and blurred,
+     * the way a video player fills the sides of a portrait clip. It reuses the
+     * picture's request, and it is drawn only for a `fit` that can leave room:
+     * `contain`, `none` and `scale-down`. Any other string is a CSS `background`
+     * painted behind the picture: a colour, a custom property or a gradient.
+     * @default 'none'
+     */
+    letterbox?: 'none' | 'blur' | (string & {});
+    /**
+     * Loads this picture first: the one a page is judged by, which is usually its
+     * Largest Contentful Paint.
+     *
+     * Sets `loading="eager"` and a high fetch priority. A `loading` or
+     * `fetchPriority` of your own still wins. Give it to one picture per page: a
+     * high priority on every picture raises none of them above the others.
+     * @default false
+     */
+    priority?: boolean;
     /** The corner and type scale of the placeholder and the fallback. @default 'md' */
     size?: MPSize;
 }

package/dist/components/image/MPImage.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as a,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{Dialog as t}from"@base-ui/react/dialog";import{MPIcon as n}from"../icon/MPIcon.js";import{BrokenImageIcon as i}from"../../constants/icons.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FADE as m,PORTAL_LAYER as d,SCRIM as f}from"../../internal/surface.js";import{useMPSize as u}from"../../internal/config.js";const p={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"};export const MPImage=/*@__PURE__*/r.forwardRef(function({src:j,alt:b,ratio:g,fit:h="cover",placeholder:v,fallback:x,preview:y=!1,previewSrc:N,previewLabel:z,onStateChange:w,size:k,className:P,style:R,onLoad:S,...L},B){const C=u(k),E=s(),I=l(c,E),[M,$]=r.useState(j?"loading":"error"),F=r.useRef(null),T=r.useCallback(e=>{$(a=>(a!==e&&w?.(e),e))},[w]),[W,q]=r.useState(j);j!==W&&(q(j),$(j?"loading":"error")),r.useEffect(()=>{const e=F.current;e&&j&&e.complete&&T(e.naturalWidth>0?"loaded":"error")},[j,T]);const A="loaded"===M,D=e("div",{className:["bg-mp-surface-container text-mp-on-surface-variant","flex size-full items-center justify-center"].join(" "),children:e(n,{icon:i,size:24})}),G=e("div",{className:["bg-mp-surface-container-high size-full","motion-safe:animate-pulse motion-reduce:animate-none"].join(" ")}),H=o(a,{children:[e("img",{...L,ref:e=>{F.current=e,"function"==typeof B?B(e):B&&(B.current=e)},src:j,alt:b,className:["size-full",p[h],A?"opacity-100":"opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)"].join(" "),onLoad:e=>{T("loaded"),S?.(e)},onError:()=>T("error")}),"loading"===M&&!1!==v?e("span",{"aria-hidden":"true",className:"absolute inset-0",children:v??G}):null,"error"===M?e("span",{className:"absolute inset-0",children:x??D}):null]}),J=["mp-image relative block overflow-hidden",P??""].filter(Boolean).join(" "),K={aspectRatio:g,...R};return y?o(t.Root,{children:[e(t.Trigger,{"data-mp-size":C,"data-mp-state":M,disabled:"error"===M,"aria-label":(z??b)||I.open,className:[J,"outline-mp-secondary cursor-zoom-in appearance-none border-0 bg-transparent p-0","focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default","outline-none"].join(" "),style:K,children:H}),o(t.Portal,{children:[e(t.Backdrop,{className:`${f} ${m} fixed inset-0 z-40`}),e(t.Popup,{className:[d,m,"fixed inset-0 flex items-center justify-center p-6"].join(" "),children:e("img",{src:N??j,alt:b,className:"max-h-full max-w-full object-contain"})})]})]}):e("span",{"data-mp-size":C,"data-mp-state":M,className:J,style:K,children:H})});
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import*as o from"react";import{Dialog as n}from"@base-ui/react/dialog";import{MPIcon as r}from"../icon/MPIcon.js";import{BrokenImageIcon as a}from"../../constants/icons.js";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FADE as d,PORTAL_LAYER as u,SCRIM as h}from"../../internal/surface.js";import{useMPSize as m}from"../../internal/config.js";const f={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},p={position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"},g=Number.parseInt(o.version,10),b=!Number.isFinite(g)||0===g||g>=19?"fetchPriority":"fetchpriority",v={loading:"eager",[b]:"high"};function y(e,t){const i=2*e+"px";return t?{...p,width:`calc(100cqh + ${i})`,height:`calc(100cqw + ${i})`}:{position:"absolute",top:-e,left:-e,width:`calc(100% + ${i})`,height:`calc(100% + ${i})`,maxWidth:"none"}}const w=new Map([["left",[0,0]],["right",[0,1]],["top",[1,0]],["bottom",[1,1]]]);function j(e,t,i){const o=e.trim().split(/\s+/),n=[.5,.5],r=[!1,!1];if(o.length>2)return e;for(const[t,i]of o.entries()){if("center"===i)continue;const o=w.get(i),a=/^(-?\d*\.?\d+)%$/.exec(i),l=o?o[0]:t,s=o?o[1]:a?Number(a[1])/100:void 0;if(void 0===s||r[l])return e;n[l]=s,r[l]=!0}let[a,l]=n;"horizontal"!==i&&"both"!==i||(a=1-a),"vertical"!==i&&"both"!==i||(l=1-l);for(let e=0;e<t/90;e++)[a,l]=[l,1-a];const s=e=>Math.round(1e4*e)/100+"%";return`${s(a)} ${s(l)}`}function $(e){return"number"==typeof e?Number.isFinite(e)?e:void 0:void 0!==e&&/^\d+$/.test(e.trim())?Number(e):void 0}function x(e){const t=$(e);return void 0===t?String(e):`${t}px`}function N(e,t,i){const o=e??t,n=e??(i?t:void 0);if(!o)return{aspectRatio:"1",width:"min(100%, 100cqh)",containerType:"size"};const r=o.height,a=o.width;return{aspectRatio:`${r} / ${a}`,width:`min(100%, ${n?`${n.height}px, `:""}calc(100cqh * ${r} / ${a}))`,containerType:"size"}}function z(e){return e.naturalWidth>0&&e.naturalHeight>0?{width:e.naturalWidth,height:e.naturalHeight}:void 0}export const MPImage=/*@__PURE__*/o.forwardRef(function({src:g,alt:w,ratio:R,fit:k="cover",placeholder:L,fallback:P,preview:S=!1,previewSrc:T,previewLabel:W,onStateChange:q,rotate:M,flip:F="none",position:B="center",letterbox:E="none",priority:O=!1,size:U,className:I,style:C,width:H,height:V,onLoad:A,...D},G){const J=m(U),K=l(),Q=s(c,K),X="object"==typeof(Y=L)&&null!==Y&&!o.isValidElement(Y)&&"src"in Y?L:void 0;var Y;const Z=function(e){const[t,i]=o.useState();return o.useEffect(()=>{if(void 0===e||"string"==typeof e)return;const t=URL.createObjectURL(e);return i({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),void 0===e||"string"==typeof e?e:t?.blob===e?t.url:void 0}(X?.src),[_,ee]=o.useState({state:g?"loading":"error"}),[te,ie]=o.useState(),oe=o.useRef(null),{state:ne,natural:re}=_,ae=o.useCallback((e,t)=>{const i="loaded"===e&&t?z(t):void 0;ee(t=>t.state===e&&t.natural?.width===i?.width&&t.natural?.height===i?.height?t:(t.state!==e&&q?.(e),{state:e,natural:i}))},[q]),[le,se]=o.useState(g);g!==le&&(se(g),ee({state:g?"loading":"error"})),o.useEffect(()=>{const e=oe.current;e&&g&&e.complete&&ae(e.naturalWidth>0?"loaded":"error",e)},[g,ae]);const ce=function(e){return void 0!==e&&Number.isFinite(e)?(Math.round(e/90)%4+4)%4*90:0}(M),de=90===ce||270===ce,ue=function(e,t){const i="horizontal"===t||"both"===t,o="vertical"===t||"both"===t,[n,r]=90===e||270===e?[o,i]:[i,o];return{...e?{rotate:`${e}deg`}:null,...n||r?{scale:`${n?-1:1} ${r?-1:1}`}:null}}(ce,F),he="center"===B?{}:{objectPosition:j(B,ce,F)},me=void 0!==H&&void 0!==V,fe=void 0===H||me?void 0:x(H),pe=void 0===V||me?void 0:x(V),ge=me?$(H):void 0,be=me?$(V):void 0,ve=(ge&&be?{width:ge,height:be}:void 0)??re,ye=de&&void 0===R&&ve&&void 0===pe?`${ve.height} / ${ve.width}`:R,we="loaded"===ne,je=e("div",{className:["bg-mp-surface-container text-mp-on-surface-variant","flex size-full items-center justify-center"].join(" "),children:e(r,{icon:a,size:24})}),$e=e("div",{className:["bg-mp-surface-container-high size-full","motion-safe:animate-pulse motion-reduce:animate-none"].join(" ")}),xe=/*@__PURE__*/[we?"opacity-100":"opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)"].join(" "),Ne=D.loading??(O?"eager":void 0),ze=D.fetchPriority??(O?"high":void 0),Re="blur"===E&&("contain"===k||"none"===k||"scale-down"===k),ke="none"!==E&&"blur"!==E?E:void 0,Le=Boolean(Z)&&"error"!==ne,Pe=!0===X?.blur?20:"number"==typeof X?.blur&&Number.isFinite(X.blur)?Math.max(0,X.blur):0,Se=i(t,{children:[Re?e("img",{...ze?{[b]:ze}:null,src:g,srcSet:D.srcSet,sizes:D.sizes,loading:Ne,decoding:D.decoding,crossOrigin:D.crossOrigin,referrerPolicy:D.referrerPolicy,alt:"","aria-hidden":"true",draggable:!1,className:`pointer-events-none select-none object-cover ${xe}`,style:{...ue,...he,filter:"blur(24px)",...y(48,de)}}):null,Le?e("img",{src:Z,alt:"","aria-hidden":"true",draggable:!1,className:`pointer-events-none select-none ${f[k]}`,style:{...ue,...he,...Pe?{filter:`blur(${Pe}px)`}:null,...y(2*Pe,de),...we?{opacity:0,transition:"opacity 0ms linear var(--mp-sys-motion-duration-short4)"}:null}}):null,e("img",{...O?v:null,...D,ref:e=>{oe.current=e,"function"==typeof G?G(e):G&&(G.current=e)},src:g,alt:w,width:me?H:void 0,height:me?V:void 0,className:`block size-full ${f[k]} ${xe}`,style:{...ue,...he,...Re||Le?{position:"relative"}:null,...de?p:null},onLoad:e=>{ae("loaded",e.currentTarget),A?.(e)},onError:()=>ae("error")}),"loading"!==ne||!1===L||X?null:e("span",{"aria-hidden":"true",className:"absolute inset-0",children:L??$e}),"error"===ne?e("span",{className:"absolute inset-0",children:P??je}):null]}),Te=["mp-image relative block overflow-hidden",I??""].filter(Boolean).join(" "),We={aspectRatio:ye,...void 0!==fe?{width:fe,maxWidth:"100%"}:null,...void 0!==pe?{height:pe}:null,...void 0!==pe&&void 0!==R?{width:"auto",maxWidth:"100%"}:null,...de?{containerType:"size"}:null,...void 0!==ke?{background:ke}:null,...C},qe=T??g,Me=te?.src===qe?te:void 0,Fe=e=>{const t=z(e.currentTarget);!t||t.width===Me?.width&&t.height===Me?.height||ie({...t,src:qe})};return S?i(n.Root,{children:[e(n.Trigger,{"data-mp-size":J,"data-mp-state":ne,disabled:"error"===ne,"aria-label":(W??w)||Q.open,className:[Te,"w-full","outline-mp-secondary cursor-zoom-in appearance-none border-0 bg-transparent p-0","focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default","outline-none"].filter(Boolean).join(" "),style:We,children:Se}),i(n.Portal,{children:[e(n.Backdrop,{className:`${h} ${d} fixed inset-0 z-40`}),e(n.Popup,{className:[u,d,"fixed inset-0 flex items-center justify-center p-6"].join(" "),style:de?{containerType:"size"}:void 0,children:de?e("span",{className:"relative block shrink-0",style:N(Me,ve,void 0===T),children:e("img",{src:qe,alt:w,className:"object-contain",style:{...ue,...p},onLoad:Fe})}):e("img",{src:qe,alt:w,className:"max-h-full max-w-full object-contain",style:ue,onLoad:Fe})})]})]}):e("span",{"data-mp-size":J,"data-mp-state":ne,className:Te,style:We,children:Se})});

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

@@ -1,2 +1,2 @@
 export { MPImage } from './MPImage.js';
-export type { MPImageProps, MPImageFit, MPImageState } from './MPImage.js';
+export type { MPImageProps, MPImageFit, MPImageFlip, MPImagePlaceholder, MPImagePosition, MPImageRotate, MPImageState } from './MPImage.js';

package/dist/components/list/MPList.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import*as t from"react";import{useRender as i}from"@base-ui/react/use-render";import{accentSlots as o}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{CONTROL_GAP as s,hasContent as a,PROSE_TEXT as d}from"../../internal/scale.js";import{sheetPadX as m}from"../../internal/density.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{containerSurface as p}from"../../internal/elevation.js";import{useMPColor as u,useMPDensity as f,useMPSize as x}from"../../internal/config.js";const y=/*@__PURE__*/t.createContext({size:"md",color:"primary",density:0,dividers:!1}),h={xs:"py-1.5",sm:"py-2.5",md:"py-4",lg:"py-5",xl:"py-6"},v={xs:["py-1","py-0.5","py-0.5"],sm:["py-2","py-1.5","py-1"],md:["py-3.5","py-3","py-2.5"],lg:["py-4.5","py-4","py-3.5"],xl:["py-5.5","py-5","py-4.5"]};function b(e,r){return 0===r?h[e]:v[e][-r-1]}const j={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},g={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"};export const MPList=/*@__PURE__*/t.forwardRef(function({variant:r="outlined",elevation:n,size:l,color:s,density:a,dividers:d=!1,render:m,className:c,style:h,children:v,...b},j){const g=x(l),N=u(s),k=f(a),_=t.useMemo(()=>({size:g,color:N,density:k,dividers:d}),[g,N,k,d]),w=["mp-list rounded-mp-md flex flex-col",p(r,n),"text-mp-on-surface",d?"overflow-hidden [&>li+li]:border-mp-outline-variant [&>li+li]:border-t":"p-1",c??""].filter(Boolean).join(" "),z=i({render:m??e("ul",{}),ref:j,props:{role:"list","data-mp-size":g,"data-mp-variant":r,className:w,style:{...o(N),...h},children:v,...b}});return e(y.Provider,{value:_,children:z})});function N({render:r,props:n}){return i({render:r??(n.href?e("a",{}):e("button",{})),props:n})}export const MPListItem=/*@__PURE__*/t.forwardRef(function({startIcon:i,endIcon:o,description:p,action:u,href:f,target:x,rel:h,render:v,selected:k=!1,disabled:_=!1,className:w,children:z,onClick:B,...C},I){const{size:L,density:M,dividers:P}=t.useContext(y),R=Boolean(B||f)&&!_,F=m(L,M),S=["group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","font-[inherit] no-underline",F,b(L,M),s[L],d[L],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",P?"":g[L],_?"text-mp-on-surface/38 cursor-default":k?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":"",R?["cursor-pointer appearance-none border-0",k?"":"bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].filter(Boolean).join(" "):""].filter(Boolean).join(" "),$=r(n,{children:[R?e(c,{}):null,a(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,r("span",{className:"mp-list-item__text flex min-w-0 flex-1 flex-col",children:[a(z)?e("span",{className:"mp-list-item__label truncate",children:z}):null,a(p)?e("span",{className:["mp-list-item__description truncate",j[L],k?"opacity-80":"text-mp-on-surface-variant"].join(" "),children:p}):null]}),a(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]});return r("li",{ref:I,"data-selected":k||void 0,className:["flex w-full items-center",w??""].filter(Boolean).join(" "),...C,children:[R&&f?e(N,{render:v,props:{href:f,target:x,rel:l(x,h),className:S,"aria-current":k?"page":void 0,onClick:B,children:$}}):R?e(N,{render:v,props:{type:v?void 0:"button",className:S,"aria-current":!!k||void 0,onClick:B,children:$}}):e("div",{className:S,"aria-disabled":_||void 0,children:$}),a(u)?e("div",{className:`flex shrink-0 items-center ${F}`,children:u}):null]})});
+import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import*as t from"react";import{useRender as i}from"@base-ui/react/use-render";import{accentSlots as o}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{CONTROL_GAP as s,hasContent as a,PROSE_TEXT as d}from"../../internal/scale.js";import{sheetPadX as m}from"../../internal/density.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{containerSurface as p}from"../../internal/elevation.js";import{useMPColor as u,useMPDensity as f,useMPSize as x}from"../../internal/config.js";const y=/*@__PURE__*/t.createContext({size:"md",color:"primary",density:0,dividers:!1}),h={xs:"py-1.5",sm:"py-2.5",md:"py-4",lg:"py-5",xl:"py-6"},v={xs:["py-1","py-0.5","py-0.5"],sm:["py-2","py-1.5","py-1"],md:["py-3.5","py-3","py-2.5"],lg:["py-4.5","py-4","py-3.5"],xl:["py-5.5","py-5","py-4.5"]};function b(e,r){return 0===r?h[e]:v[e][-r-1]}const j={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},g={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"};export const MPList=/*@__PURE__*/t.forwardRef(function({variant:r="outlined",elevation:n,size:l,color:s,density:a,dividers:d=!1,render:m,className:c,style:h,children:v,...b},j){const g=x(l),N=u(s),k=f(a),_=t.useMemo(()=>({size:g,color:N,density:k,dividers:d}),[g,N,k,d]),w=["mp-list rounded-mp-md m-0 flex list-none flex-col",p(r,n),"text-mp-on-surface",d?"overflow-hidden p-0 [&>li+li]:border-mp-outline-variant [&>li+li]:border-t":"p-1",c??""].filter(Boolean).join(" "),z=i({render:m??e("ul",{}),ref:j,props:{role:"list","data-mp-size":g,"data-mp-variant":r,className:w,style:{...o(N),...h},children:v,...b}});return e(y.Provider,{value:_,children:z})});function N({render:r,props:n}){return i({render:r??(n.href?e("a",{}):e("button",{})),props:n})}export const MPListItem=/*@__PURE__*/t.forwardRef(function({startIcon:i,endIcon:o,description:p,action:u,href:f,target:x,rel:h,render:v,selected:k=!1,disabled:_=!1,className:w,children:z,onClick:B,...C},I){const{size:L,density:M,dividers:P}=t.useContext(y),R=Boolean(B||f)&&!_,F=m(L,M),S=["group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","font-[inherit] no-underline",F,b(L,M),s[L],d[L],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",P?"":g[L],_?"text-mp-on-surface/38 cursor-default":k?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":"",R?["cursor-pointer appearance-none border-0",k?"":"bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].filter(Boolean).join(" "):""].filter(Boolean).join(" "),$=r(n,{children:[R?e(c,{}):null,a(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,r("span",{className:"mp-list-item__text flex min-w-0 flex-1 flex-col",children:[a(z)?e("span",{className:"mp-list-item__label truncate",children:z}):null,a(p)?e("span",{className:["mp-list-item__description truncate",j[L],k?"opacity-80":"text-mp-on-surface-variant"].join(" "),children:p}):null]}),a(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]});return r("li",{ref:I,"data-selected":k||void 0,className:["flex w-full items-center",w??""].filter(Boolean).join(" "),...C,children:[R&&f?e(N,{render:v,props:{href:f,target:x,rel:l(x,h),className:S,"aria-current":k?"page":void 0,onClick:B,children:$}}):R?e(N,{render:v,props:{type:v?void 0:"button",className:S,"aria-current":!!k||void 0,onClick:B,children:$}}):e("div",{className:S,"aria-disabled":_||void 0,children:$}),a(u)?e("div",{className:`flex shrink-0 items-center ${F}`,children:u}):null]})});

package/dist/components/menu/MPMenu.d.ts

@@ -34,7 +34,7 @@ export interface MPMenuProps extends MPMenuSurfaceProps {
      * Whether that trigger renders a real `<button>`.
      *
      * It nearly always does — an [MPButton](./button), an
-     * [MPIconButton](./icon-button), an [MPChip](./chip) with an `onClick` — and
+     * [MPIconButton](./icon-button), an [MPChip](../display/chip) with an `onClick` — and
      * this can be left alone. Set it `false` for a trigger that is deliberately
      * something else: an avatar, a card, a row of text. Base UI then supplies the
      * `role`, the tab stop and the Enter/Space handling a `<button>` would have

package/dist/components/menubar/MPMenubar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Menubar as r}from"@base-ui/react/menubar";import{MPMenu as n}from"../menu/MPMenu.js";import{accentSlots as s}from"../../internal/accent.js";import{MPMenuContext as i}from"../../internal/menu.js";import{MPStateLayer as l}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,hasContent as m}from"../../internal/scale.js";import{useMPColor as c,useMPSize as p}from"../../internal/config.js";const u={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},d={xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"},f={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};export function MPMenubarMenu({label:r,startIcon:s,disabled:c=!1,children:p,className:x,style:b}){const{size:h,color:j}=o.useContext(i);return e(n,{size:h,color:j,disabled:c,openOnHover:!0,sideOffset:4,trigger:t("button",{type:"button",disabled:c,className:["mp-menubar__menu group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-xs cursor-pointer items-center justify-center bg-transparent","appearance-none font-[inherit] whitespace-nowrap select-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","disabled:text-mp-on-surface/38 disabled:cursor-default","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",u[h],d[h],f[h],a[h],x??""].filter(Boolean).join(" "),style:b,children:[c?null:e(l,{className:"group-data-popup-open:opacity-8"}),m(s)?e("span",{className:"relative flex",children:s}):null,e("span",{className:"relative",children:r})]}),children:p})}export const MPMenubar=/*@__PURE__*/o.forwardRef(function({orientation:t="horizontal",modal:n=!0,loopFocus:l=!0,disabled:m=!1,size:u,color:d,className:f,style:x,children:b,...h},j){const g=p(u),v=c(d),y=o.useMemo(()=>({size:g,color:v}),[g,v]);return e(i.Provider,{value:y,children:e(r,{ref:j,orientation:t,modal:n,loopFocus:l,disabled:m,"data-mp-size":g,"data-mp-orientation":t,className:["mp-menubar flex items-center","vertical"===t?"flex-col items-stretch":"flex-row",a[g],f??""].filter(Boolean).join(" "),style:{...s(v),...x},...h,children:b})})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Menubar as r}from"@base-ui/react/menubar";import{MPMenu as n}from"../menu/MPMenu.js";import{accentSlots as s}from"../../internal/accent.js";import{MPMenuContext as i}from"../../internal/menu.js";import{MPStateLayer as l}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,hasContent as m}from"../../internal/scale.js";import{useMPColor as c,useMPSize as p}from"../../internal/config.js";const u={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},d={xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"},f={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};export function MPMenubarMenu({label:r,startIcon:s,disabled:c=!1,children:p,className:x,style:b}){const{size:h,color:j}=o.useContext(i);return e(n,{size:h,color:j,disabled:c,openOnHover:!0,sideOffset:4,trigger:t("button",{type:"button",disabled:c,className:["mp-menubar__menu group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-xs cursor-pointer items-center justify-center bg-transparent","appearance-none border-0 font-[inherit] whitespace-nowrap select-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","disabled:text-mp-on-surface/38 disabled:cursor-default","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",u[h],d[h],f[h],a[h],x??""].filter(Boolean).join(" "),style:b,children:[c?null:e(l,{className:"group-data-popup-open:opacity-8"}),m(s)?e("span",{className:"relative flex",children:s}):null,e("span",{className:"relative",children:r})]}),children:p})}export const MPMenubar=/*@__PURE__*/o.forwardRef(function({orientation:t="horizontal",modal:n=!0,loopFocus:l=!0,disabled:m=!1,size:u,color:d,className:f,style:x,children:b,...h},j){const g=p(u),v=c(d),y=o.useMemo(()=>({size:g,color:v}),[g,v]);return e(i.Provider,{value:y,children:e(r,{ref:j,orientation:t,modal:n,loopFocus:l,disabled:m,"data-mp-size":g,"data-mp-orientation":t,className:["mp-menubar flex items-center","vertical"===t?"flex-col items-stretch":"flex-row",a[g],f??""].filter(Boolean).join(" "),style:{...s(v),...x},...h,children:b})})});

package/dist/components/navigation-menu/MPNavigationMenu.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as p,CONTROL_ICON as d,CONTROL_PAD_X as u,CONTROL_TEXT as f,hasContent as h,META_TEXT as g}from"../../internal/scale.js";import{PORTAL_LAYER as x}from"../../internal/surface.js";import{useMPColor as v,useMPSize as N}from"../../internal/config.js";const y=/*@__PURE__*/a.createContext({size:"md"}),j=/*@__PURE__*/["mp-navigation-menu__popup rounded-mp-xs shadow-mp-2","bg-mp-surface-container text-mp-on-surface box-border overflow-hidden outline-none","transition-[opacity,width,height] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),b={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const MPNavigationMenuLink=/*@__PURE__*/a.forwardRef(function({href:t,title:r,description:o,startIcon:s,target:p,rel:d,className:x,children:v,...N},j){const{size:b}=a.useContext(y);return n(i.Link,{ref:j,href:t,target:p,rel:l(p,d),className:["mp-navigation-menu__link group text-mp-on-surface rounded-mp-xs relative flex","min-w-0 cursor-pointer items-start bg-transparent py-2 no-underline outline-none",m[b],u[b],x??""].filter(Boolean).join(" "),...N,children:[e(c,{}),h(s)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"relative flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${f[b]}`,children:r}),h(o)?e("span",{className:`text-mp-on-surface-variant ${g}`,children:o}):null,v]})]})});export function MPNavigationMenuItem({label:s,href:g,target:x,rel:v,startIcon:N,value:j,disabled:w=!1,columns:M=1,children:P,className:_,style:z}){const{size:k}=a.useContext(y),C=void 0!==g&&!h(P),I=Number.isFinite(M)?Math.max(1,Math.round(M)):1,L=["mp-navigation-menu__item group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-full cursor-pointer items-center justify-center bg-transparent","appearance-none font-[inherit] whitespace-nowrap no-underline select-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",p[k],f[k],m[k],u[k],_??""].filter(Boolean).join(" ");return e(i.Item,{value:j,children:C?n(i.Link,{href:g,target:x,rel:l(x,v),className:L,style:z,children:[e(c,{}),h(N)?e("span",{className:"relative flex",children:N}):null,e("span",{className:"relative",children:s})]}):n(t,{children:[n(i.Trigger,{disabled:w,className:L,style:z,children:[w?null:e(c,{className:"group-data-popup-open:opacity-8"}),h(N)?e("span",{className:"relative flex",children:N}):null,e("span",{className:"relative",children:s}),e(i.Icon,{className:["relative flex items-center transition-transform","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:o,size:d[k]})})]}),e(i.Content,{className:`mp-navigation-menu__panel grid gap-1 ${b[k]}`,style:I>1?{gridTemplateColumns:`repeat(${I}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const MPNavigationMenu=/*@__PURE__*/a.forwardRef(function({orientation:t="horizontal",value:r,defaultValue:o,onValueChange:l,delay:c,closeDelay:p,sideOffset:d=8,size:u,color:f,className:h,style:g,children:b,...w},M){const P=N(u),_=v(f),z=a.useMemo(()=>({size:P}),[P]);return e(y.Provider,{value:z,children:n(i.Root,{ref:M,orientation:t,value:r,defaultValue:o,onValueChange:e=>l?.(e),delay:c,closeDelay:p,"data-mp-size":P,className:["mp-navigation-menu",h??""].filter(Boolean).join(" "),style:{...s(_),...g},...w,children:[e(i.List,{className:["flex items-center","vertical"===t?"flex-col items-stretch":"flex-row",m[P]].join(" "),children:b}),e(i.Portal,{children:e(i.Positioner,{className:x,sideOffset:d,collisionPadding:12,style:s(_),children:e(i.Popup,{className:j,children:e(i.Viewport,{})})})})]})})});
+import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as p,CONTROL_ICON as d,CONTROL_PAD_X as u,CONTROL_TEXT as f,hasContent as h,META_TEXT as g}from"../../internal/scale.js";import{PORTAL_LAYER as x}from"../../internal/surface.js";import{useMPColor as v,useMPSize as N}from"../../internal/config.js";const y=/*@__PURE__*/a.createContext({size:"md"}),j=/*@__PURE__*/["mp-navigation-menu__popup rounded-mp-xs shadow-mp-2","bg-mp-surface-container text-mp-on-surface box-border overflow-hidden outline-none","transition-[opacity,width,height] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),b={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const MPNavigationMenuLink=/*@__PURE__*/a.forwardRef(function({href:t,title:r,description:o,startIcon:s,target:p,rel:d,className:x,children:v,...N},j){const{size:b}=a.useContext(y);return n(i.Link,{ref:j,href:t,target:p,rel:l(p,d),className:["mp-navigation-menu__link group text-mp-on-surface rounded-mp-xs relative flex","min-w-0 cursor-pointer items-start bg-transparent py-2 no-underline outline-none",m[b],u[b],x??""].filter(Boolean).join(" "),...N,children:[e(c,{}),h(s)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"relative flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${f[b]}`,children:r}),h(o)?e("span",{className:`text-mp-on-surface-variant ${g}`,children:o}):null,v]})]})});export function MPNavigationMenuItem({label:s,href:g,target:x,rel:v,startIcon:N,value:j,disabled:w=!1,columns:M=1,children:P,className:_,style:z}){const{size:k}=a.useContext(y),C=void 0!==g&&!h(P),I=Number.isFinite(M)?Math.max(1,Math.round(M)):1,L=["mp-navigation-menu__item group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-full cursor-pointer items-center justify-center bg-transparent","appearance-none border-0 font-[inherit] whitespace-nowrap no-underline select-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",p[k],f[k],m[k],u[k],_??""].filter(Boolean).join(" ");return e(i.Item,{value:j,children:C?n(i.Link,{href:g,target:x,rel:l(x,v),className:L,style:z,children:[e(c,{}),h(N)?e("span",{className:"relative flex",children:N}):null,e("span",{className:"relative",children:s})]}):n(t,{children:[n(i.Trigger,{disabled:w,className:L,style:z,children:[w?null:e(c,{className:"group-data-popup-open:opacity-8"}),h(N)?e("span",{className:"relative flex",children:N}):null,e("span",{className:"relative",children:s}),e(i.Icon,{className:["relative flex items-center transition-transform","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:o,size:d[k]})})]}),e(i.Content,{className:`mp-navigation-menu__panel grid gap-1 ${b[k]}`,style:I>1?{gridTemplateColumns:`repeat(${I}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const MPNavigationMenu=/*@__PURE__*/a.forwardRef(function({orientation:t="horizontal",value:r,defaultValue:o,onValueChange:l,delay:c,closeDelay:p,sideOffset:d=8,size:u,color:f,className:h,style:g,children:b,...w},M){const P=N(u),_=v(f),z=a.useMemo(()=>({size:P}),[P]);return e(y.Provider,{value:z,children:n(i.Root,{ref:M,orientation:t,value:r,defaultValue:o,onValueChange:e=>l?.(e),delay:c,closeDelay:p,"data-mp-size":P,className:["mp-navigation-menu",h??""].filter(Boolean).join(" "),style:{...s(_),...g},...w,children:[e(i.List,{className:["m-0 flex list-none items-center p-0","vertical"===t?"flex-col items-stretch":"flex-row",m[P]].join(" "),children:b}),e(i.Portal,{children:e(i.Positioner,{className:x,sideOffset:d,collisionPadding:12,style:s(_),children:e(i.Popup,{className:j,children:e(i.Viewport,{})})})})]})})});