material-plus-ui 1.3.0 → 1.4.0

package/dist/components/date-range-picker/index.d.ts

@@ -1,2 +1,2 @@
-export { MPDateRangePicker } from './MPDateRangePicker';
-export type { MPDateRange, MPDateRangePickerProps, MPDateRangePreset } from './MPDateRangePicker';
+export { MPDateRangePicker } from './MPDateRangePicker.js';
+export type { MPDateRange, MPDateRangePickerProps, MPDateRangePreset } from './MPDateRangePicker.js';

package/dist/components/date-range-picker/index.js

@@ -1 +1 @@
-export{MPDateRangePicker}from"./MPDateRangePicker";
+export{MPDateRangePicker}from"./MPDateRangePicker.js";

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { type MPPickerLabels } from '../../internal/Calendar';
-import { type MPPickerShellProps } from '../../internal/Picker';
-import { type MPTimeUnit } from '../../internal/date';
-import type { MPWeekday } from '../../types';
+import { type MPPickerLabels } from '../../internal/Calendar.js';
+import { type MPPickerShellProps } from '../../internal/Picker.js';
+import { type MPTimeUnit } from '../../internal/date.js';
+import type { MPWeekday } from '../../types.js';
 export interface MPDateTimePickerProps extends MPPickerShellProps {
     /** The chosen moment. Use with `onValueChange` for a controlled picker. */
     value?: Date | null;
@@ -40,6 +40,11 @@ export interface MPDateTimePickerProps extends MPPickerShellProps {
     /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
     hour12?: boolean;
     showSeconds?: boolean;
+    /**
+     * How far apart the rows of each clock column are. Rounded, and held between 1
+     * and the column's own span — see [MPTimePicker](./time-picker).
+     * @default 1
+     */
     hourStep?: number;
     minuteStep?: number;
     secondStep?: number;

package/dist/components/date-time-picker/MPDateTimePicker.js

@@ -1 +1,2 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{MPButton as l}from"../button/MPButton";import{MPIcon as a}from"../icon/MPIcon";import{CalendarIcon as n}from"../../constants/icons";import{MPCalendar as r,MPTimeGrid as i}from"../../internal/Calendar";import{FOOTER_SIZE as s,MPPickerDivider as c,MPPickerFooter as d,MPPickerShell as m,useDisplaySamples as u}from"../../internal/Picker";import{useMPLocale as h,useMPMessages as p}from"../../internal/locale";import{CONTROL_ICON as f}from"../../internal/scale";import{formatDate as S,isDayOutside as b,isHour12 as g,isValidDate as v,localeWeekStart as D,mergeDateAndTime as x,startOfDay as C,startOfMonth as k,timeUnitSpan as w,toISODateTime as z,today as O,withPlaceholder as y,withTime as T}from"../../internal/date";export const MPDateTimePicker=/*@__PURE__*/t.forwardRef(function({value:M,defaultValue:P,onValueChange:j,open:I,defaultOpen:N,onOpenChange:V,defaultMonth:B,minDate:R,maxDate:E,shouldDisableDate:F,shouldDisableTime:q,locale:A,weekStartsOn:G,format:H,hour12:J,showSeconds:K=!1,hourStep:L=1,minuteStep:Q=1,secondStep:U=1,placeholder:W,clearable:X=!1,showNowButton:Y=!0,closeOnSelect:Z=!1,labels:$,name:_,size:ee="md",color:oe="primary",readOnly:te=!1,disabled:le=!1,startIcon:ae,...ne},re){const ie=h(A),se=p("picker",ie,$),ce=G??D(ie),de=J??g(ie),[me,ue]=t.useState(P??null),he=void 0!==M?M:me,[pe,fe]=t.useState(N??!1),Se=I??pe,[be,ge]=t.useState(()=>k(v(he)?he:B??O()));t.useEffect(()=>{Se&&ge(k(v(he)?he:B??O()))},[Se]);const ve=e=>{e&&(te||le)||(void 0===I&&fe(e),V?.(e))},De=e=>{void 0===M&&ue(e),j?.(e)},xe=t.useCallback((e,o)=>{const[t,l]=w(o,e),a=C(e).getTime();return!!(v(R)&&a+1e3*l<R.getTime())||(!!(v(E)&&a+1e3*t>E.getTime())||(q?.(e,o)??!1))},[R,E,q]),Ce=H??{dateStyle:"medium",timeStyle:"short",hour12:de},ke=new Date,we=T(ke,{seconds:K?ke.getSeconds():0}),ze=b(we,R,E)||(F?.(we)??!1)||xe(we,"second"),Oe=y(u(ie,Ce),W);return e(m,{...ne,slug:"date-time-picker",size:ee,color:oe,readOnly:te,disabled:le,triggerRef:re,startIcon:void 0===ae?e(a,{icon:n,size:f[ee]}):ae,display:v(he)?S(he,ie,Ce):W??"",samples:Oe,empty:!v(he),clearable:X,onClear:()=>De(null),open:Se,onOpenChange:ve,labels:se,hiddenValues:_?[{name:_,value:v(he)?z(he,K):""}]:void 0,children:o("div",{className:"flex flex-col gap-1.5",children:[o("div",{className:"flex items-stretch gap-2",children:[e(r,{size:ee,color:oe,locale:ie,weekStartsOn:ce,month:be,onMonthChange:ge,selected:[he],onSelect:e=>{const o=v(he)?x(e,he):C(e);De(o),ge(k(o)),Z&&ve(!1)},minDate:R,maxDate:E,shouldDisableDate:F,labels:se,autoFocus:!0}),e(c,{}),e(i,{size:ee,locale:ie,value:v(he)?he:null,referenceDate:v(he)?he:O(),onChange:De,hour12:de,showSeconds:K,hourStep:L,minuteStep:Q,secondStep:U,shouldDisableTime:xe,labels:se})]}),o(d,{children:[X?e(l,{variant:"text",size:s[ee],color:oe,onClick:()=>{De(null),ve(!1)},children:se.clear}):null,Y?e(l,{variant:"text",size:s[ee],color:oe,disabled:ze,onClick:()=>{De(we),ge(k(we))},children:se.now}):null,e(l,{variant:"filled",size:s[ee],color:oe,onClick:()=>ve(!1),children:se.done})]})]})})});
+"use client";
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import*as t from"react";import{MPButton as l}from"../button/MPButton.js";import{MPIcon as a}from"../icon/MPIcon.js";import{CalendarIcon as n}from"../../constants/icons.js";import{MPCalendar as s,MPTimeGrid as r}from"../../internal/Calendar.js";import{FOOTER_SIZE as i,MPPickerDivider as c,MPPickerFooter as m,MPPickerShell as d,useDisplaySamples as u}from"../../internal/Picker.js";import{useMPLocale as p,useMPMessages as h}from"../../internal/locale.js";import{PICKER as f}from"../../internal/messages/picker.js";import{CONTROL_ICON as S}from"../../internal/scale.js";import{formatDate as b,isDayOutside as g,isHour12 as v,isValidDate as D,localeWeekStart as j,mergeDateAndTime as x,startOfDay as C,startOfMonth as k,timeUnitSpan as w,toISODateTime as z,today as O,withPlaceholder as y,withTime as T}from"../../internal/date.js";export const MPDateTimePicker=/*@__PURE__*/t.forwardRef(function({value:M,defaultValue:P,onValueChange:I,open:N,defaultOpen:V,onOpenChange:B,defaultMonth:R,minDate:E,maxDate:F,shouldDisableDate:q,shouldDisableTime:A,locale:G,weekStartsOn:H,format:J,hour12:K,showSeconds:L=!1,hourStep:Q=1,minuteStep:U=1,secondStep:W=1,placeholder:X,clearable:Y=!1,showNowButton:Z=!0,closeOnSelect:$=!1,labels:_,name:ee,size:oe="md",color:te="primary",readOnly:le=!1,disabled:ae=!1,startIcon:ne,...se},re){const ie=p(G),ce=h(f,ie,_),me=H??j(ie),de=K??v(ie),[ue,pe]=t.useState(P??null),he=void 0!==M?M:ue,[fe,Se]=t.useState(V??!1),be=N??fe,[ge,ve]=t.useState(()=>k(D(he)?he:R??O()));t.useEffect(()=>{be&&ve(k(D(he)?he:R??O()))},[be]);const De=e=>{e&&(le||ae)||(void 0===N&&Se(e),B?.(e))},je=e=>{void 0===M&&pe(e),I?.(e)},xe=t.useCallback((e,o)=>{const[t,l]=w(o,e),a=C(e).getTime();return!!(D(E)&&a+1e3*l<E.getTime())||(!!(D(F)&&a+1e3*t>F.getTime())||(A?.(e,o)??!1))},[E,F,A]),Ce=J??{dateStyle:"medium",timeStyle:"short",hour12:de},ke=new Date,we=T(ke,{seconds:L?ke.getSeconds():0}),ze=g(we,E,F)||(q?.(we)??!1)||xe(we,"second"),Oe=y(u(ie,Ce),X);return e(d,{...se,slug:"date-time-picker",size:oe,color:te,readOnly:le,disabled:ae,triggerRef:re,startIcon:void 0===ne?e(a,{icon:n,size:S[oe]}):ne,display:D(he)?b(he,ie,Ce):X??"",samples:Oe,empty:!D(he),clearable:Y,onClear:()=>je(null),open:be,onOpenChange:De,labels:ce,hiddenValues:ee?[{name:ee,value:D(he)?z(he,L):""}]:void 0,children:o("div",{className:"flex flex-col gap-1.5",children:[o("div",{className:"flex items-stretch gap-2",children:[e(s,{size:oe,color:te,locale:ie,weekStartsOn:me,month:ge,onMonthChange:ve,selected:[he],onSelect:e=>{const o=D(he)?x(e,he):C(e);je(o),ve(k(o)),$&&De(!1)},minDate:E,maxDate:F,shouldDisableDate:q,labels:ce,autoFocus:!0}),e(c,{}),e(r,{size:oe,locale:ie,value:D(he)?he:null,referenceDate:D(he)?he:O(),onChange:je,hour12:de,showSeconds:L,hourStep:Q,minuteStep:U,secondStep:W,shouldDisableTime:xe,labels:ce})]}),o(m,{children:[Y?e(l,{variant:"text",size:i[oe],color:te,onClick:()=>{je(null),De(!1)},children:ce.clear}):null,Z?e(l,{variant:"text",size:i[oe],color:te,disabled:ze,onClick:()=>{je(we),ve(k(we))},children:ce.now}):null,e(l,{variant:"filled",size:i[oe],color:te,onClick:()=>De(!1),children:ce.done})]})]})})});

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

@@ -1,2 +1,2 @@
-export { MPDateTimePicker } from './MPDateTimePicker';
-export type { MPDateTimePickerProps } from './MPDateTimePicker';
+export { MPDateTimePicker } from './MPDateTimePicker.js';
+export type { MPDateTimePickerProps } from './MPDateTimePicker.js';

package/dist/components/date-time-picker/index.js

@@ -1 +1 @@
-export{MPDateTimePicker}from"./MPDateTimePicker";
+export{MPDateTimePicker}from"./MPDateTimePicker.js";

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Dialog } from '@base-ui/react/dialog';
-import type { MPColor, MPSize } from '../../types';
+import type { MPColor, MPSize } from '../../types.js';
 /**
  * A dialog takes `size` and `color` and stops there.
  *

package/dist/components/dialog/MPDialog.js

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

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

@@ -1,2 +1,2 @@
-export { MPDialog, MPDialogClose } from './MPDialog';
-export type { MPDialogCloseProps, MPDialogProps } from './MPDialog';
+export { MPDialog, MPDialogClose } from './MPDialog.js';
+export type { MPDialogCloseProps, MPDialogProps } from './MPDialog.js';

package/dist/components/dialog/index.js

@@ -1 +1 @@
-export{MPDialog,MPDialogClose}from"./MPDialog";
+export{MPDialog,MPDialogClose}from"./MPDialog.js";

package/dist/components/divider/MPDivider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPAlign, MPColor, MPOrientation, MPSize } from '../../types';
+import type { MPAlign, MPColor, MPOrientation, MPSize } from '../../types.js';
 /** Where the label sits along a labelled divider. Ignored without a label. */
 export type MPDividerTextAlign = MPAlign;
 export interface MPDividerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {

package/dist/components/divider/MPDivider.js

@@ -1 +1,2 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as l}from"@base-ui/react/separator";import{hasContent as a}from"../../internal/scale";const i="[border-color:var(--_mp-line)]";function o(e){return"number"==typeof e?`${e}px`:e}const n={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},s={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-medium",lg:"text-mp-label-large",xl:"text-mp-label-large"},m={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const MPDivider=/*@__PURE__*/t.forwardRef(function({orientation:t="horizontal",color:p,size:d="md",length:c,thickness:f,textAlign:h="center",className:x,style:u,children:v,...b},w){const g="vertical"===t,_=a(v),$={"--_mp-line":p?`var(--_mp-color-${p})`:"var(--_mp-color-outline-variant)","--_mp-rule":o(f)??"1px"},j=o(c),k={...$,...void 0===j?null:g?{height:j}:{width:j},...u};if(!_)return e(l,{ref:w,orientation:t,"data-mp-size":d,className:["mp-divider",g?"w-0 border-l [border-left-width:var(--_mp-rule)] "+(void 0===j?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--_mp-rule)]",i,x??""].filter(Boolean).join(" "),style:k,...b});const[N,y]=n[t][h],z=g?"w-0 border-l [border-left-width:var(--_mp-rule)]":"h-0 border-t [border-top-width:var(--_mp-rule)]";return r(l,{ref:w,orientation:t,"aria-label":"string"==typeof v?v:void 0,"data-mp-size":d,className:["mp-divider flex items-center",g?"w-auto flex-col "+(void 0===j?"self-stretch":""):"w-full",m[d],x??""].filter(Boolean).join(" "),style:k,...b,children:[e("span",{"aria-hidden":"true",className:`${z} ${N} ${i}`}),e("span",{className:["text-mp-on-surface-variant shrink-0 whitespace-nowrap",s[d],g?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:v}),e("span",{"aria-hidden":"true",className:`${z} ${y} ${i}`})]})});
+"use client";
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as l}from"@base-ui/react/separator";import{hasContent as a}from"../../internal/scale.js";import{cssLength as i}from"../../internal/length.js";const o="[border-color:var(--_mp-line)]",n={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},s={xs:"text-mp-label-small",sm:"text-mp-label-small",md:"text-mp-label-medium",lg:"text-mp-label-large",xl:"text-mp-label-large"},m={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const MPDivider=/*@__PURE__*/t.forwardRef(function({orientation:t="horizontal",color:d,size:p="md",length:c,thickness:f,textAlign:h="center",className:x,style:u,children:v,...b},w){const g="vertical"===t,_=a(v),j={"--_mp-line":d?`var(--_mp-color-${d})`:"var(--_mp-color-outline-variant)","--_mp-rule":i(f)??"1px"},$=i(c),k={...j,...void 0===$?null:g?{height:$}:{width:$},...u};if(!_)return e(l,{ref:w,orientation:t,"data-mp-size":p,className:["mp-divider",g?"w-0 border-l [border-left-width:var(--_mp-rule)] "+(void 0===$?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--_mp-rule)]",o,x??""].filter(Boolean).join(" "),style:k,...b});const[N,z]=n[t][h],y=g?"w-0 border-l [border-left-width:var(--_mp-rule)]":"h-0 border-t [border-top-width:var(--_mp-rule)]";return r(l,{ref:w,orientation:t,"aria-label":"string"==typeof v?v:void 0,"data-mp-size":p,className:["mp-divider flex items-center",g?"w-auto flex-col "+(void 0===$?"self-stretch":""):"w-full",m[p],x??""].filter(Boolean).join(" "),style:k,...b,children:[e("span",{"aria-hidden":"true",className:`${y} ${N} ${o}`}),e("span",{className:["text-mp-on-surface-variant shrink-0 whitespace-nowrap",s[p],g?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:v}),e("span",{"aria-hidden":"true",className:`${y} ${z} ${o}`})]})});

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

@@ -1,2 +1,2 @@
-export { MPDivider } from './MPDivider';
-export type { MPDividerProps, MPDividerTextAlign } from './MPDivider';
+export { MPDivider } from './MPDivider.js';
+export type { MPDividerProps, MPDividerTextAlign } from './MPDivider.js';

package/dist/components/divider/index.js

@@ -1 +1 @@
-export{MPDivider}from"./MPDivider";
+export{MPDivider}from"./MPDivider.js";

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';
+import type { MPSide, MPSize } from '../../types.js';
 /**
  * How the panel relates to the page, in MD3's own two words for it.
  *

package/dist/components/drawer/MPDrawer.js

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

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

@@ -1,2 +1,2 @@
-export { MPDrawer, MPDrawerClose } from './MPDrawer';
-export type { MPDrawerCloseProps, MPDrawerMode, MPDrawerProps } from './MPDrawer';
+export { MPDrawer, MPDrawerClose } from './MPDrawer.js';
+export type { MPDrawerCloseProps, MPDrawerMode, MPDrawerProps } from './MPDrawer.js';

package/dist/components/drawer/index.js

@@ -1 +1 @@
-export{MPDrawer,MPDrawerClose}from"./MPDrawer";
+export{MPDrawer,MPDrawerClose}from"./MPDrawer.js";

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';
+import type { MPSize, 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

package/dist/components/empty/MPEmpty.js

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

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

@@ -1,2 +1,2 @@
-export { MPEmpty } from './MPEmpty';
-export type { MPEmptyProps } from './MPEmpty';
+export { MPEmpty } from './MPEmpty.js';
+export type { MPEmptyProps } from './MPEmpty.js';

package/dist/components/empty/index.js

@@ -1 +1 @@
-export{MPEmpty}from"./MPEmpty";
+export{MPEmpty}from"./MPEmpty.js";

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

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

package/dist/components/fieldset/MPFieldset.js

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

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

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

package/dist/components/fieldset/index.js

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPStyleProps } from '../../types';
+import type { MPStyleProps } from '../../types.js';
 /** Why a file was turned away. One reason per file, in the order they are checked. */
 export type MPFileRejectionReason = 'type' | 'size' | 'count';
 export interface MPFileRejection {
@@ -52,7 +52,7 @@ export interface MPFilePickerProps extends MPStyleProps {
     description?: React.ReactNode;
     /** The message under the box, which also turns the picker over. */
     errorMessage?: React.ReactNode;
-    /** The line inside the box. @default 'Drop files here, or click to browse' */
+    /** The line inside the box. Defaults to the wording in `locale`. */
     title?: React.ReactNode;
     /** The line under it — what is accepted, how big, how many. */
     hint?: React.ReactNode;
@@ -68,8 +68,9 @@ export interface MPFilePickerProps extends MPStyleProps {
      */
     removeLabel?: (name: string) => string;
     /**
-     * Which language the remove buttons' default names are written in. Falls back
-     * to the nearest `MPLocaleProvider`, then to English.
+     * Which language the box's own words are written in — the prompt inside it and
+     * the remove buttons' names. Falls back to the nearest `MPLocaleProvider`,
+     * then to English.
      */
     locale?: string;
     /** Marks the field required. */

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

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

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

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

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

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

package/dist/components/floating-action-button/MPFloatingActionButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPCorner, MPPosition, MPSize } from '../../types';
+import type { MPColor, MPCorner, MPPosition, MPSize } from '../../types.js';
 /**
  * The three containers MD3 gives a floating button, and the reason there are not
  * five of them.

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

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

package/dist/components/floating-action-button/index.d.ts

@@ -1,2 +1,2 @@
-export { MPFloatingActionButton } from './MPFloatingActionButton';
-export type { MPFloatingActionButtonProps, MPFloatingActionButtonVariant } from './MPFloatingActionButton';
+export { MPFloatingActionButton } from './MPFloatingActionButton.js';
+export type { MPFloatingActionButtonProps, MPFloatingActionButtonVariant } from './MPFloatingActionButton.js';

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

@@ -1 +1 @@
-export{MPFloatingActionButton}from"./MPFloatingActionButton";
+export{MPFloatingActionButton}from"./MPFloatingActionButton.js";

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

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

package/dist/components/footer/MPFooter.js

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

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

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

package/dist/components/footer/index.js

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

package/dist/components/form/MPForm.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import type { MPSize } from '../../types.js';
+/**
+ * When a field decides whether it is valid.
+ *
+ * Base UI's own three, under Base UI's own spelling. This is one of the few
+ * places the library does *not* invent a word of its own: `validationMode` is
+ * what a caller will read everywhere else, and a nicer synonym would only be a
+ * word they had to translate back.
+ */
+export type MPFormValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
+/** Errors that came from somewhere else, keyed by the field's `name`. */
+export type MPFormErrors = Record<string, string | string[]>;
+export interface MPFormProps extends Omit<React.ComponentPropsWithoutRef<'form'>, 'onSubmit'> {
+    /**
+     * When a field validates.
+     *
+     * - `onSubmit` — on submit, and on every change afterwards. The default, and
+     *   the only one that does not tell somebody their email address is wrong
+     *   while they are still typing it.
+     * - `onBlur` — when a field loses focus.
+     * - `onChange` — on every keystroke.
+     * @default 'onSubmit'
+     */
+    validationMode?: MPFormValidationMode;
+    /**
+     * Errors from outside the browser's own validation — a server, a form action,
+     * a schema — keyed by the `name` of the field each belongs to.
+     *
+     * They are shown **on the field**, and cleared as soon as that field changes.
+     */
+    errors?: MPFormErrors;
+    /**
+     * Called on a valid submit, with the form's values. The native submit event is
+     * prevented, so nothing navigates.
+     */
+    onSubmit?: (values: Record<string, unknown>) => void;
+    /**
+     * The gap between the form's children. A form is a stack, and this is which
+     * rung of the [ladder](../../design/prop-conventions#size) it stacks on.
+     * @default 'md'
+     */
+    size?: MPSize;
+    children?: React.ReactNode;
+}
+/**
+ * A `<form>` that knows which of its fields is wrong.
+ *
+ * On its own, a page of [MPTextField](./text-field)s validates one field at a
+ * time, and a failed submit leaves the reader to go and find the red one. What
+ * this adds is the part that has to be owned **above** the fields: a submit
+ * collects every field's validity at once, focus lands on the first one that
+ * failed, and `errors` puts a server's answer back on the field it belongs to
+ * rather than in a banner at the top of the page.
+ *
+ * ## It is not a form library
+ *
+ * There is no schema here, no resolver and no field array. A project that wants
+ * those keeps the one it already has and hands the result to `errors`, which is
+ * the seam this is built around — and it is a seam rather than an integration
+ * precisely because every one of those libraries can produce
+ * `{ [name]: message }`.
+ *
+ * ## Why it lays its children out at all
+ *
+ * Because a form is a **stack**, and a stack with no gap is a stack of fields
+ * touching. The gap is the only visual decision here: no surface, no padding, no
+ * measure. Those belong to an [MPCard](../layout/card) or an
+ * [MPContainer](../layout/container) around it, for the reason a container gives
+ * — the thing that decides the shape of a page should not also be the thing that
+ * submits it.
+ */
+export declare const MPForm: React.ForwardRefExoticComponent<MPFormProps & React.RefAttributes<HTMLFormElement>>;

package/dist/components/form/MPForm.js

@@ -0,0 +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})});

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

@@ -0,0 +1,2 @@
+export { MPForm } from './MPForm.js';
+export type { MPFormErrors, MPFormProps, MPFormValidationMode } from './MPForm.js';

package/dist/components/form/index.js

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