material-plus-ui 1.6.0 → 1.8.0

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

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

package/dist/components/dialog/MPDialog.js

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

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

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

package/dist/components/drawer/MPDrawer.js

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

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

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

package/dist/components/empty/MPEmpty.js

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

package/dist/components/fieldset/MPFieldset.js

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

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

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

package/dist/components/flex/MPFlex.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPGridAlign, MPGridJustify } from '../grid/MPGrid.js';
+import type { MPResponsive } from '../../types.js';
+/** Which way the items run. */
+export type MPFlexDirection = 'row' | 'column';
+export interface MPFlexProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Which way the items run, and the width at which that changes.
+     *
+     * `direction={{ compact: 'column', medium: 'row' }}` is the whole reason this
+     * component exists as something other than a `className`: a stack on a phone
+     * and a row from 600dp up is the most common layout decision there is, and
+     * writing it as a Tailwind variant means writing the library's boundary out
+     * again in a number that has to match.
+     * @default 'row'
+     */
+    direction?: MPResponsive<MPFlexDirection>;
+    /**
+     * Whether items that do not fit move onto another line.
+     * @default false
+     */
+    wrap?: MPResponsive<boolean>;
+    /**
+     * How the space the items did not take is divided along the direction.
+     * @default 'start'
+     */
+    justify?: MPResponsive<MPGridJustify>;
+    /**
+     * How the items sit across it.
+     *
+     * `stretch` is CSS's own default and is what makes two cards in a row the same
+     * height without either being told a height. `center` is what a row of a label
+     * and a control wants.
+     * @default 'stretch'
+     */
+    align?: MPResponsive<MPGridAlign>;
+    /**
+     * The space between items. A number is pixels, a string is any CSS length.
+     * @default 0
+     */
+    gap?: MPResponsive<number | string>;
+    /**
+     * Lays out as `inline-flex`, so the box is as wide as its contents and sits in
+     * a line of text.
+     * @default false
+     */
+    inline?: boolean;
+    /**
+     * Renders something other than a `<div>`. Base UI's own escape hatch, so it
+     * behaves here exactly as it does on every Base UI primitive.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * A row, or a column, and the width at which it changes from one to the other.
+ *
+ * It draws nothing. No surface, no padding, no corner — only the five properties
+ * a flex container has, each of which can be said per window size class.
+ *
+ * ## Why this and not a `className`
+ *
+ * For a row that is always a row, a `className` is the better answer and this
+ * component is overhead. What it is for is the row that is a column on a phone:
+ *
+ * ```tsx
+ * <MPFlex direction={{ compact: 'column', medium: 'row' }} gap={16}>
+ * ```
+ *
+ * Written as Tailwind variants that is `flex-col md:flex-row`, which is the
+ * library's boundary said again in Tailwind's numbers — 768px rather than 600 —
+ * and a layout that reflows at one width while the `MPGrid` beside it reflows at
+ * another. The variants this package ships (`mp-medium:flex-row`) fix the number
+ * and are the right answer where a page is already writing Tailwind; this is the
+ * answer for a page that would rather say it in props, and it resolves in CSS
+ * either way. See [Breakpoints](../../design/breakpoints).
+ *
+ * ## Its relationship to the other three
+ *
+ * - [MPGrid](./grid) divides a row into columns and is what a *page* is laid out
+ *   on. Reach for it when things have to line up with things in another row.
+ * - [MPStack](./stack) lays things **over** each other in a pile, which is a
+ *   different idea that shares an unfortunate name across the ecosystem.
+ * - [MPBox](./box) is a sheet with padding and a surface. This is neither.
+ *
+ * ## Every axis is responsive, and resolved in CSS
+ *
+ * The values reach the stylesheet as `--_mp-flex-*` slots, one per class the
+ * caller actually named, and the rules in `styles.css` fall each class back to
+ * the one below it. So a window crossing 600dp changes the layout with nothing
+ * re-rendering, and a server-rendered first paint is already right — which is
+ * the half of this that a hook and a branch cannot do.
+ */
+export declare const MPFlex: React.ForwardRefExoticComponent<MPFlexProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/flex/MPFlex.js

@@ -0,0 +1,2 @@
+"use client";
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{responsiveSlots as n}from"../../internal/responsive.js";import{cssLength as t}from"../../internal/length.js";export const MPFlex=/*@__PURE__*/e.forwardRef(function({direction:e,wrap:f,justify:a,align:o,gap:s,inline:p=!1,render:x,className:c,style:m,children:d,...u},g){return r({render:x,ref:g,props:{className:["mp-flex",p?"inline-flex":"flex",c??""].filter(Boolean).join(" "),style:{...n("flex-dir",e,e=>e),...n("flex-wrap",f,e=>e?"wrap":"nowrap"),...n("flex-justify",a,i),...n("flex-align",o,l),...n("flex-gap",s,e=>t(e)),...m},children:d,...u}})});function i(e){return"start"===e||"end"===e?`flex-${e}`:e}function l(e){return"start"===e||"end"===e?`flex-${e}`:e}

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

@@ -0,0 +1,2 @@
+export { MPFlex } from './MPFlex.js';
+export type { MPFlexDirection, MPFlexProps } from './MPFlex.js';

package/dist/components/flex/index.js

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

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/floating-bottom-navigation/MPFloatingBottomNavigation.d.ts

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type MPBottomNavigationLabels, type MPBottomNavigationValue } from '../../internal/bottom-navigation.js';
+import type { MPElevation, MPPosition, MPSize, MPVariant } from '../../types.js';
+export interface MPFloatingBottomNavigationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'defaultValue' | 'onChange'> {
+    /** The destination the reader is on. Use with `onValueChange` for a controlled bar. */
+    value?: MPBottomNavigationValue | null;
+    /** Which starts current, for an uncontrolled bar. */
+    defaultValue?: MPBottomNavigationValue | null;
+    /** Called with the value of the destination that was pressed. */
+    onValueChange?: (value: MPBottomNavigationValue) => void;
+    /**
+     * How the bar sits in the page's scroll.
+     *
+     * `fixed` — the default — holds it against the bottom of the window.
+     * `sticky` holds it against the bottom of whatever is scrolling, `absolute`
+     * against the bottom of the nearest positioned ancestor — which is what a bar
+     * inside a phone screen of its own wants — and `static` puts it back in the
+     * flow, centred.
+     * @default 'fixed'
+     */
+    position?: MPPosition;
+    /**
+     * How far the bar floats above the bottom edge. A number is pixels, a string
+     * is any CSS length.
+     *
+     * This is the whole difference between this component and
+     * `MPBottomNavigation`: the gap under it is what makes the page keep going
+     * underneath rather than stop at a bar.
+     * @default 16
+     */
+    offset?: number | string;
+    /**
+     * Which names are drawn. `selected` here, against the `all` a full-width bar
+     * defaults to: this one is only as wide as what is in it, so five drawn names
+     * would stretch it across the screen and it would stop being a lozenge.
+     * @default 'selected'
+     */
+    labels?: MPBottomNavigationLabels;
+    /**
+     * How much surface the lozenge paints.
+     *
+     * A container's ladder, so the sheet is never dyed — what carries the accent
+     * is the one destination that is current.
+     * @default 'filled'
+     */
+    variant?: MPVariant;
+    /**
+     * How far off the page it is lifted.
+     *
+     * `3` here, against the nothing every other surface defaults to, because this
+     * bar is *defined* by not being part of the page: a lozenge lying flat over
+     * the content it is floating above reads as a mistake rather than as a
+     * decision.
+     * @default 3
+     */
+    elevation?: MPElevation;
+    /**
+     * The height of the row and its type scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Adds `env(safe-area-inset-bottom)` to `offset`, so the bar clears a phone's
+     * home indicator rather than sitting on it.
+     *
+     * Unlike on `MPBottomNavigation` this moves the whole sheet rather than the
+     * row inside it: there is nothing under a floating bar that has to stay
+     * covered.
+     * @default true
+     */
+    safeArea?: boolean;
+    /** Every destination stops answering. */
+    disabled?: boolean;
+    /**
+     * The name the bar is announced by — "Main", "Sections". A landmark with no
+     * name is one a screen reader lists as "navigation".
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<nav>`. Rarely what you want here: a row of
+     * destinations is navigation.
+     */
+    render?: useRender.RenderProp;
+    /** The `MPBottomNavigationItem`s — the same item the full-width bar takes. */
+    children?: React.ReactNode;
+}
+/**
+ * A row of destinations floating clear of the bottom edge of the window.
+ *
+ * ```tsx
+ * <MPFloatingBottomNavigation defaultValue="home" label="Main">
+ *   <MPBottomNavigationItem value="home" icon={<HomeIcon />}>Home</MPBottomNavigationItem>
+ *   <MPBottomNavigationItem value="search" icon={<SearchIcon />}>Search</MPBottomNavigationItem>
+ * </MPFloatingBottomNavigation>
+ * ```
+ *
+ * It is `MPBottomNavigation` lifted off the page. The same `<nav>`, the same
+ * `MPBottomNavigationItem` children, the same `aria-current="page"` — and
+ * deliberately not a `role="tablist"`, for the same reason: a bottom navigation
+ * changes what the page *is*, not which panel of one is showing.
+ *
+ * ## Everything about the shape follows from `offset`
+ *
+ * Because the page keeps going underneath, the sheet is a stadium rather than a
+ * bar with two corners; it is only as wide as its destinations; it carries a
+ * shadow, because a lozenge lying flat over what it is floating above reads as
+ * a mistake; and it names only the destination the reader is on, since five
+ * drawn names would stretch it back into a bar.
+ *
+ * ## There is no second highlight
+ *
+ * The destination the reader is on wears the same active indicator it wears in
+ * the full-width bar — MD3's pill, widening out of a circle behind the glyph.
+ * A floating bar could instead have one tile that slides between destinations,
+ * and this deliberately does not: the specification draws one selected
+ * treatment, and a lozenge with both would be saying where the reader is twice,
+ * on two different curves.
+ *
+ * ## Which bar to reach for
+ *
+ * `MPBottomNavigation` when the bar is the bottom of the screen — the page
+ * stops at it, and the tonal step between `surface-container` and `surface` is
+ * what separates them. This one when the content is meant to run underneath: a
+ * map, a photograph, a feed that should not end in a bar.
+ */
+export declare const MPFloatingBottomNavigation: React.ForwardRefExoticComponent<MPFloatingBottomNavigationProps & React.RefAttributes<HTMLElement>>;

package/dist/components/floating-bottom-navigation/MPFloatingBottomNavigation.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as a}from"@base-ui/react/use-render";import{MPBottomNavigationContext as o}from"../../internal/bottom-navigation.js";import{containerSurface as i}from"../../internal/elevation.js";import{cssLength as l}from"../../internal/length.js";import{useMPSize as s}from"../../internal/config.js";const n={xs:"h-12",sm:"h-14",md:"h-16",lg:"h-18",xl:"h-20"},r={xs:"px-1",sm:"px-1.5",md:"px-2",lg:"px-2.5",xl:"px-3"},m={xs:"gap-0.5",sm:"gap-1",md:"gap-1.5",lg:"gap-2",xl:"gap-2.5"},f={static:"mx-auto w-fit",absolute:"absolute inset-x-0 bottom-(--_mp-nav-offset) z-30 mx-auto w-fit",sticky:"sticky bottom-(--_mp-nav-offset) z-30 mx-auto w-fit",fixed:"fixed inset-x-0 bottom-(--_mp-nav-offset) z-40 mx-auto w-fit"};export const MPFloatingBottomNavigation=/*@__PURE__*/t.forwardRef(function({value:p,defaultValue:d=null,onValueChange:x,position:u="fixed",offset:c=16,labels:b="selected",variant:g="filled",elevation:v=3,size:h,safeArea:j=!0,disabled:w=!1,label:z,render:y,className:_,style:k,children:N,...B},C){const M=s(h),[P,V]=t.useState(d),A=void 0!==p,F=A?p:P,R=t.useCallback(e=>{A||V(e),x?.(e)},[A,x]),S=t.useMemo(()=>({value:F??null,change:R,size:M,labels:b,disabled:w,floating:!0}),[F,R,M,b,w]),$=l(c);return a({render:y??e("nav",{}),ref:C,props:{"aria-label":z,"data-mp-size":M,"data-mp-variant":g,className:["mp-floating-bottom-navigation rounded-mp-full box-border flex max-w-full min-w-0","items-stretch",n[M],r[M],m[M],i(g,v),"text-mp-on-surface",f[u],_??""].filter(Boolean).join(" "),style:{"--_mp-nav-offset":j?`calc(${$} + env(safe-area-inset-bottom))`:$,...k},children:e(o.Provider,{value:S,children:N}),...B}})});

package/dist/components/floating-bottom-navigation/index.d.ts

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

package/dist/components/floating-bottom-navigation/index.js

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPPosition, MPSize, MPVariant } from '../../types.js';
+import type { MPDensity, MPMeasure, MPPosition, MPResponsive, MPSize, MPElevation, MPVariant } from '../../types.js';
 export interface MPFooterProps extends Omit<React.ComponentPropsWithoutRef<'footer'>, 'title'> {
     /**
      * How the sheet sits in the page's scroll.
@@ -25,6 +25,16 @@ export interface MPFooterProps extends Omit<React.ComponentPropsWithoutRef<'foot
      * @default 'outlined'
      */
     variant?: MPVariant;
+    /**
+     * How far off the page the bar is lifted, on MD3's own scale.
+     *
+     * It moves the tone as well as the shadow — see `MPElevation`. A bar's
+     * `elevated` is level 2 rather than 1, because a bar sits over the page's
+     * content rather than in it; an explicit level says exactly what it says.
+     *
+     * Left unset, `variant` decides.
+     */
+    elevation?: MPElevation;
     /**
      * The sheet's scale — its gutter and the air above and below its content. As
      * on [MPBox](./box), `size` here is the size of the *sheet*: it sets no height
@@ -32,13 +42,23 @@ export interface MPFooterProps extends Omit<React.ComponentPropsWithoutRef<'foot
      * @default 'md'
      */
     size?: MPSize;
+    /**
+     * Takes room out of the gutter and the air above and below the content.
+     *
+     * A footer is the sheet a page ends on, and the amount of screen it takes is
+     * mostly padding. On a dense page it is the first thing that should give some
+     * back.
+     * @default 0
+     */
+    density?: MPDensity;
     /**
      * Holds the content to a measure and centres it while the sheet itself still
-     * spans the window. The same ladder [MPContainer](./container)'s `maxWidth`
-     * uses.
+     * spans the window. The same prop [MPContainer](./container)'s `maxWidth` is —
+     * a rung of the size ladder, a CSS length of your own, or a map keyed by
+     * window size class.
      * @default 'none'
      */
-    maxWidth?: MPSize | 'none';
+    maxWidth?: MPResponsive<MPMeasure>;
     /**
      * The gutter, and the air above and below.
      * @default true

package/dist/components/footer/MPFooter.js

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

package/dist/components/form/MPForm.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{SHEET_GAP as i}from"../../internal/scale.js";export const MPForm=/*@__PURE__*/o.forwardRef(function({validationMode:o="onSubmit",errors:m,onSubmit:a,size:t="md",className:n,children:s,...f},l){return r(e,{ref:l,validationMode:o,errors:m,onFormSubmit:r=>a?.(r),"data-mp-size":t,className:["mp-form flex flex-col",i[t],n??""].filter(Boolean).join(" "),...f,children:s})});
+import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{useMPSize as i}from"../../internal/config.js";import{SHEET_GAP as t}from"../../internal/scale.js";export const MPForm=/*@__PURE__*/o.forwardRef(function({validationMode:o="onSubmit",errors:m,onSubmit:a,size:n,className:s,children:f,...l},c){const d=i(n);return r(e,{ref:c,validationMode:o,errors:m,onFormSubmit:r=>a?.(r),"data-mp-size":d,className:["mp-form flex flex-col",t[d],s??""].filter(Boolean).join(" "),...l,children:f})});