material-plus-ui 1.0.0 → 1.1.0

package/dist/components/color-picker/MPColorPicker.js

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Field as n}from"@base-ui/react/field";import{Popover as l}from"@base-ui/react/popover";import{MPIcon as t}from"../icon/MPIcon";import{CheckIcon as o,CloseIcon as i}from"../../constants/icons";import{MPFieldLabel as s,MPFieldOutline as u}from"../../internal/FieldOutline";import{MPStateLayer as c}from"../../internal/StateLayer";import{MPSupportingText as d}from"../../internal/SupportingText";import{CONTROL_ICON as p,META_TEXT as h,PROSE_TEXT as f,STACK_GAP as m,hasContent as g}from"../../internal/scale";import{FADE as v,PORTAL_LAYER as b}from"../../internal/surface";import{CHECKER_BACKGROUND as x,DEFAULT_SWATCHES as y,clamp as w,cssColor as N,formatColor as k,parseColor as C,readableInk as j}from"../../internal/color";const _={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"No colour"},z={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},$={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},M={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},P={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},T={xs:12,sm:14,md:16,lg:18,xl:20},I={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}},O="border-mp-outline-variant relative overflow-hidden border",S=["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.4)]"].join(" ");function A(e){const a=e.currentTarget.getBoundingClientRect();return{x:0===a.width?0:w((e.clientX-a.left)/a.width,0,1),y:0===a.height?0:w((e.clientY-a.top)/a.height,0,1)}}function B(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function D({hsv:r,alphaValue:n,onChange:l,text:i,onTextChange:s,withAlpha:u,swatches:c,editable:d,size:p,inert:f,labels:m}){const g=T[p],v=-g/2,b=N({h:r.h,s:100,v:100}),y=N(r),_=e=>({onPointerDown:a=>{f||(a.currentTarget.setPointerCapture(a.pointerId),e(a))},onPointerMove:a=>{!f&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(a)}}),I=(e,a,r,n)=>({role:"slider",tabIndex:f?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":f||void 0,onKeyDown:e=>{const a=B(e);!f&&a&&0!==a.x&&(e.preventDefault(),n(a.x))}}),D=["outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ");return a("div",{className:`mp-color-picker__panel flex flex-col ${z[p]} ${P[p]}`,children:[e("div",{..._(e=>{const{x:a,y:t}=A(e);l({hsv:{h:r.h,s:100*a,v:100*(1-t)},alpha:n})}),role:"slider",tabIndex:f?-1:0,"aria-label":m.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(r.s),"aria-valuetext":`${Math.round(r.s)}%, ${Math.round(r.v)}%`,"aria-disabled":f||void 0,onKeyDown:e=>{const a=B(e);!f&&a&&(e.preventDefault(),l({hsv:{h:r.h,s:w(r.s+a.x,0,100),v:w(r.v+a.y,0,100)},alpha:n}))},className:[O,"rounded-mp-sm",$[p],D,f?"cursor-default":"cursor-crosshair touch-none"].join(" "),style:{backgroundColor:b,backgroundImage:"linear-gradient(to top, #000000, rgb(0 0 0 / 0)), linear-gradient(to right, #ffffff, rgb(255 255 255 / 0))"},children:e("span",{className:S,style:{width:g,height:g,left:`${r.s}%`,top:100-r.v+"%",marginLeft:v,marginTop:v,backgroundColor:y}})}),e("div",{..._(e=>l({hsv:{...r,h:360*A(e).x},alpha:n})),...I(m.hue,r.h,360,e=>l({hsv:{...r,h:(r.h+2*e+360)%360},alpha:n})),className:[O,"rounded-mp-full",M[p],D,f?"cursor-default":"cursor-pointer touch-none"].join(" "),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:S,style:{width:g,height:g,left:r.h/360*100+"%",top:"50%",marginLeft:v,marginTop:v,backgroundColor:b}})}),u?a("div",{..._(e=>l({hsv:r,alpha:A(e).x})),...I(m.alpha,100*n,100,e=>l({hsv:r,alpha:w(n+e/100,0,1)})),className:[O,"rounded-mp-full",M[p],D,f?"cursor-default":"cursor-pointer touch-none"].join(" "),style:x,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${N(r,0)}, ${y})`}}),e("span",{className:S,style:{width:g,height:g,left:100*n+"%",top:"50%",marginLeft:v,marginTop:v,backgroundColor:N(r,n)}})]}):null,d?a("div",{className:`flex items-center ${P[p]}`,children:[e("span",{"aria-hidden":"true",className:"border-mp-outline-variant shrink-0 rounded-full border",style:{width:g+8,height:g+8,...x},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:N(r,n)}})}),e("input",{type:"text",value:i,readOnly:f,spellCheck:!1,autoComplete:"off","aria-label":m.value,onChange:e=>s(e.target.value),className:["rounded-mp-xs border-mp-outline text-mp-on-surface min-w-0 flex-1 border","bg-transparent px-2 py-1 font-mono lowercase",h,"focus-visible:border-mp-primary outline-none"].join(" ")})]}):null,c&&c.length>0?e("div",{role:"group","aria-label":m.swatches,className:"grid grid-cols-8 gap-1",children:c.map(a=>{const i=C(a),s=null!==i&&k(i.hsv,i.alpha,"hex")===k(r,n,"hex");return e("button",{type:"button",disabled:f,"aria-label":a,"aria-pressed":s,onClick:()=>{i&&l(i)},className:["border-mp-outline-variant flex aspect-square items-center justify-center","rounded-full border",D,f?"cursor-default":"hover:shadow-mp-1 cursor-pointer"].join(" "),style:{backgroundColor:a},children:s&&i?e("span",{style:{color:j(i.hsv)},children:e(t,{icon:o,size:12})}):null},a)})}):null]})}const L={h:202,s:100,v:61};export const MPColorPicker=r.forwardRef(function({value:o,defaultValue:w="#00639b",onValueChange:j,format:z="hex",alpha:$=!1,swatches:M=y,inline:P=!1,editable:T=!0,label:O,description:S,errorMessage:A,required:B=!1,disabled:R=!1,readOnly:q=!1,clearable:V=!1,name:K,open:F,defaultOpen:E=!1,onOpenChange:H,labels:U,size:W="md",fullWidth:X=!1,id:Y,className:G,style:J},Q){const Z=r.useMemo(()=>({..._,...U}),[U]),ee=g(A),ae=I[W],re=r.useId(),ne=Y??`mp-color-picker-${K??re}`,[le,te]=r.useState(w),oe=o??le,[ie,se]=r.useState(E),ue=F??ie,[ce,de]=r.useState(()=>C(oe)??{hsv:L,alpha:1}),[pe,he]=r.useState(()=>oe),fe=k(ce.hsv,$?ce.alpha:1,z),me=""===oe;r.useEffect(()=>{const e=C(oe);e?k(e.hsv,$?e.alpha:1,z)!==fe&&(he(oe),de(e)):he(oe)},[oe,fe,$,z]);const ge=R||q,ve=V&&!ge&&!me,be=(e,a)=>{de(e);const r=k(e.hsv,$?e.alpha:1,z);he(a??r),void 0===o&&te(r),j?.(r)},xe=e(D,{hsv:ce.hsv,alphaValue:ce.alpha,onChange:be,text:pe,onTextChange:e=>{he(e);const a=C(e);a&&be(a,e)},withAlpha:$,swatches:M,editable:T,size:W,inert:ge,labels:Z}),ye=e("span",{"aria-hidden":"true",className:"border-mp-outline-variant block size-5 shrink-0 rounded-full border",style:x,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:me?"transparent":N(ce.hsv,$?ce.alpha:1)}})}),we=K?e("input",{type:"hidden",name:K,value:me?"":fe}):null;return P?a("div",{ref:Q,"data-mp-size":W,className:["mp-color-picker flex flex-col",m[W],G??""].filter(Boolean).join(" "),style:J,children:[g(O)?a("span",{className:[h,R?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[O,B?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,xe,g(A)?e("span",{className:`${h} text-mp-error`,children:A}):g(S)?e("span",{className:`${h} text-mp-on-surface-variant`,children:S}):null,we]}):a(n.Root,{ref:Q,disabled:R,invalid:ee,"data-mp-size":W,className:["mp-color-picker group flex-col align-top",X?"flex w-full":"inline-flex w-fit",G??""].filter(Boolean).join(" "),style:J,children:[a(l.Root,{open:ue,onOpenChange:e=>{void 0===F&&se(e),H?.(e)},children:[a("div",{className:"relative w-full",children:[a(l.Trigger,{id:ne,disabled:R,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",ae.padding,ve?"pe-10":"",ae.height,f[W],R?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(q?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[ye,e("span",{className:["min-w-0 flex-1 truncate text-start",me?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:me?Z.empty:fe})]}),ve?a("button",{type:"button","aria-label":Z.clear,onClick:()=>{void 0===o&&te(""),he(""),j?.("")},className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(c,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(t,{icon:i,size:p[W]})]}):null,e(u,{label:O,required:B}),g(O)?e(s,{size:W,label:O,required:B,htmlFor:ne}):null]}),e(l.Portal,{children:e(l.Positioner,{className:b,sideOffset:4,align:"start",children:e(l.Popup,{className:["mp-color-picker__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container","text-mp-on-surface p-3 outline-none",f[W],v].join(" "),children:xe})})})]}),e(d,{description:S,errorMessage:A,className:ae.padding}),we]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Field as n}from"@base-ui/react/field";import{Popover as l}from"@base-ui/react/popover";import{MPIcon as t}from"../icon/MPIcon";import{CheckIcon as o,CloseIcon as i}from"../../constants/icons";import{MPFieldLabel as s,MPFieldOutline as u,useFloatingLabel as c}from"../../internal/FieldOutline";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as h}from"../../internal/SupportingText";import{CONTROL_ICON as p,META_TEXT as f,PROSE_TEXT as m,STACK_GAP as g,hasContent as v}from"../../internal/scale";import{FADE as b,PORTAL_LAYER as x}from"../../internal/surface";import{CHECKER_BACKGROUND as y,DEFAULT_SWATCHES as w,clamp as N,cssColor as k,formatColor as C,parseColor as j,readableInk as _}from"../../internal/color";const z={area:"Saturation and brightness",hue:"Hue",alpha:"Opacity",value:"Colour value",swatches:"Swatches",clear:"Clear",empty:"No colour"},P={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},$={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},M={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},T={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},I={xs:12,sm:14,md:16,lg:18,xl:20},O={xs:{padding:"px-2",height:"h-8"},sm:{padding:"px-3",height:"h-10"},md:{padding:"px-4",height:"h-14"},lg:{padding:"px-4",height:"h-16"},xl:{padding:"px-5",height:"h-18"}},S="border-mp-outline-variant relative overflow-hidden border",A=["pointer-events-none absolute rounded-full border-2 border-white","[box-shadow:0_0_0_1px_rgb(0_0_0/0.35),0_1px_3px_rgb(0_0_0/0.4)]"].join(" ");function B(e,a,r){return{x:0===e.width?0:N((a-e.left)/e.width,0,1),y:0===e.height?0:N((r-e.top)/e.height,0,1)}}function D(e){const a=e.shiftKey?10:1;switch(e.key){case"ArrowLeft":return{x:-a,y:0};case"ArrowRight":return{x:a,y:0};case"ArrowUp":return{x:0,y:a};case"ArrowDown":return{x:0,y:-a};default:return null}}function L({hsv:n,alphaValue:l,onChange:i,text:s,onTextChange:u,withAlpha:c,swatches:d,editable:h,size:p,inert:m,labels:g}){const v=I[p],b=-v/2,x=k({h:n.h,s:100,v:100}),w=k(n),z=r.useRef(null),O=e=>({onPointerDown:a=>{if(m)return;const r=a.currentTarget.getBoundingClientRect();z.current=r,a.currentTarget.setPointerCapture(a.pointerId),e(B(r,a.clientX,a.clientY))},onPointerMove:a=>{const r=z.current;!m&&r&&a.currentTarget.hasPointerCapture(a.pointerId)&&e(B(r,a.clientX,a.clientY))},onPointerUp:()=>{z.current=null},onPointerCancel:()=>{z.current=null}}),L=(e,a,r,n)=>({role:"slider",tabIndex:m?-1:0,"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":Math.round(a),"aria-orientation":"horizontal","aria-disabled":m||void 0,onKeyDown:e=>{const a=D(e);!m&&a&&0!==a.x&&(e.preventDefault(),n(a.x))}}),R=["outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),q=r.useMemo(()=>d?d.map(e=>{const a=j(e);return{swatch:e,parsed:a,hex:null===a?null:C(a.hsv,a.alpha,"hex")}}):[],[d]),V=C(n,l,"hex");return a("div",{className:`mp-color-picker__panel flex flex-col ${P[p]} ${T[p]}`,children:[e("div",{...O(({x:e,y:a})=>i({hsv:{h:n.h,s:100*e,v:100*(1-a)},alpha:l})),role:"slider",tabIndex:m?-1:0,"aria-label":g.area,"aria-valuemin":0,"aria-valuemax":100,"aria-valuenow":Math.round(n.s),"aria-valuetext":`${Math.round(n.s)}%, ${Math.round(n.v)}%`,"aria-disabled":m||void 0,onKeyDown:e=>{const a=D(e);!m&&a&&(e.preventDefault(),i({hsv:{h:n.h,s:N(n.s+a.x,0,100),v:N(n.v+a.y,0,100)},alpha:l}))},className:[S,"rounded-mp-sm",$[p],R,m?"cursor-default":"cursor-crosshair touch-none"].join(" "),style:{backgroundColor:x,backgroundImage:"linear-gradient(to top, #000000, rgb(0 0 0 / 0)), linear-gradient(to right, #ffffff, rgb(255 255 255 / 0))"},children:e("span",{className:A,style:{width:v,height:v,left:`${n.s}%`,top:100-n.v+"%",marginLeft:b,marginTop:b,backgroundColor:w}})}),e("div",{...O(({x:e})=>i({hsv:{...n,h:360*e},alpha:l})),...L(g.hue,n.h,360,e=>i({hsv:{...n,h:(n.h+2*e+360)%360},alpha:l})),className:[S,"rounded-mp-full",M[p],R,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:{backgroundImage:"linear-gradient(to right, #ff0000 0%, #ffff00 16.66%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.66%, #ff00ff 83.33%, #ff0000 100%)"},children:e("span",{className:A,style:{width:v,height:v,left:n.h/360*100+"%",top:"50%",marginLeft:b,marginTop:b,backgroundColor:x}})}),c?a("div",{...O(({x:e})=>i({hsv:n,alpha:e})),...L(g.alpha,100*l,100,e=>i({hsv:n,alpha:N(l+e/100,0,1)})),className:[S,"rounded-mp-full",M[p],R,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:y,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${k(n,0)}, ${w})`}}),e("span",{className:A,style:{width:v,height:v,left:100*l+"%",top:"50%",marginLeft:b,marginTop:b,backgroundColor:k(n,l)}})]}):null,h?a("div",{className:`flex items-center ${T[p]}`,children:[e("span",{"aria-hidden":"true",className:"border-mp-outline-variant shrink-0 rounded-full border",style:{width:v+8,height:v+8,...y},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:k(n,l)}})}),e("input",{type:"text",value:s,readOnly:m,spellCheck:!1,autoComplete:"off","aria-label":g.value,onChange:e=>u(e.target.value),className:["rounded-mp-xs border-mp-outline text-mp-on-surface min-w-0 flex-1 border","bg-transparent px-2 py-1 font-mono lowercase",f,"focus-visible:border-mp-primary outline-none"].join(" ")})]}):null,q.length>0?e("div",{role:"group","aria-label":g.swatches,className:"grid grid-cols-8 gap-1",children:q.map(({swatch:a,parsed:r,hex:n},l)=>{const s=null!==r&&n===V;return e("button",{type:"button",disabled:m,"aria-label":a,"aria-pressed":s,onClick:()=>{r&&i({hsv:r.hsv,alpha:r.alpha})},className:["border-mp-outline-variant flex aspect-square items-center justify-center","rounded-full border",R,m?"cursor-default":"hover:shadow-mp-1 cursor-pointer"].join(" "),style:{backgroundColor:a},children:s&&r?e("span",{style:{color:_(r.hsv)},children:e(t,{icon:o,size:12})}):null},`${l}:${a}`)})}):null]})}const R={h:202,s:100,v:61};export const MPColorPicker=r.forwardRef(function({value:o,defaultValue:N="#00639b",onValueChange:_,format:P="hex",alpha:$=!1,swatches:M=w,inline:T=!1,editable:I=!0,label:S,floatingLabel:A=!0,description:B,errorMessage:D,required:q=!1,disabled:V=!1,readOnly:K=!1,clearable:F=!1,name:U,open:X,defaultOpen:Y=!1,onOpenChange:E,labels:H,size:W="md",fullWidth:G=!1,id:J,className:Q,style:Z},ee){const ae=r.useMemo(()=>({...z,...H}),[H]),re=v(D),ne=O[W],le=r.useId(),te=J??le,[oe,ie]=r.useState(N),se=o??oe,[ue,ce]=r.useState(Y),de=X??ue,[he,pe]=r.useState(()=>j(se)??{hsv:R,alpha:1}),[fe,me]=r.useState(()=>se),ge=C(he.hsv,$?he.alpha:1,P),ve=""===se;r.useEffect(()=>{const e=j(se);e?C(e.hsv,$?e.alpha:1,P)!==ge&&(me(se),pe(e)):me(se)},[se,ge,$,P]);const be=V||K,xe=F&&!be&&!ve,{shrunk:ye,focusProps:we}=c({floating:A&&v(S),filled:!ve,pinned:de}),Ne=(e,a)=>{pe(e);const r=C(e.hsv,$?e.alpha:1,P);me(a??r),void 0===o&&ie(r),_?.(r)},ke=e(L,{hsv:he.hsv,alphaValue:he.alpha,onChange:Ne,text:fe,onTextChange:e=>{me(e);const a=j(e);a&&Ne(a,e)},withAlpha:$,swatches:M,editable:I,size:W,inert:be,labels:ae}),Ce=e("span",{"aria-hidden":"true",className:"border-mp-outline-variant block size-5 shrink-0 rounded-full border",style:y,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:ve?"transparent":k(he.hsv,$?he.alpha:1)}})}),je=U?e("input",{type:"hidden",name:U,value:ve?"":ge}):null;return T?a("div",{ref:ee,"data-mp-size":W,className:["mp-color-picker flex flex-col",g[W],Q??""].filter(Boolean).join(" "),style:Z,children:[v(S)?a("span",{className:[f,V?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[S,q?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,ke,v(D)?e("span",{className:`${f} text-mp-error`,children:D}):v(B)?e("span",{className:`${f} text-mp-on-surface-variant`,children:B}):null,je]}):a(n.Root,{ref:ee,disabled:V,invalid:re,"data-mp-size":W,className:["mp-color-picker group flex-col align-top",G?"flex w-full":"inline-flex w-fit",Q??""].filter(Boolean).join(" "),style:Z,...we,children:[a(l.Root,{open:de,onOpenChange:e=>{void 0===X&&ce(e),E?.(e)},children:[a("div",{className:"relative w-full",children:[a(l.Trigger,{id:te,disabled:V,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",ne.padding,xe?"pe-10":"",ne.height,m[W],V?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(K?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[ve&&!ye?null:Ce,e("span",{className:["min-w-0 flex-1 truncate text-start",ve?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:ve?ye?ae.empty:null:ge})]}),xe?a("button",{type:"button","aria-label":ae.clear,onClick:()=>{void 0===o&&ie(""),me(""),_?.("")},className:["group/clear rounded-mp-full text-mp-on-surface-variant absolute inset-y-0","end-1 my-auto flex size-8 cursor-pointer items-center justify-center","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),children:[e(d,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(t,{icon:i,size:p[W]})]}):null,e(u,{label:S,required:q,notched:ye}),v(S)?e(s,{size:W,label:S,required:q,htmlFor:te,shrunk:ye}):null]}),e(l.Portal,{children:e(l.Positioner,{className:x,sideOffset:4,align:"start",children:e(l.Popup,{className:["mp-color-picker__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container","text-mp-on-surface p-3 outline-none",m[W],b].join(" "),children:ke})})})]}),e(h,{description:B,errorMessage:D,className:ne.padding}),je]})});

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

@@ -69,14 +69,28 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
     emptyMessage?: React.ReactNode;
     /** The most rows the list will show at once. `-1` is all of them. @default -1 */
     limit?: number;
-    /** Shown in the input while nothing is typed. */
+    /**
+     * Shown in the input while nothing is typed. With a floating label it is held
+     * back until the label has risen out of its way.
+     */
     placeholder?: string;
     /**
-     * Label in the outline's notch. Always drawn there rather than floating over
-     * the placeholder, so a combobox and a text field sit at the same height in a
-     * form.
+     * Label for the combobox, drawn in the outline's notch and — while nothing is
+     * chosen or typed, the control is unfocused and there is no `startIcon` —
+     * resting on the input's own line. See `floatingLabel`.
      */
     label?: React.ReactNode;
+    /**
+     * Whether the label rests on the input's line while there is nothing to make
+     * room for, and rises into the notch on focus, on the first character or on
+     * the first chip.
+     *
+     * `false` pins it in the notch, which is the one thing a floating label costs:
+     * a combobox with a label and one without no longer sit at the same height in
+     * a form until both are answered. A `startIcon` holds the label up regardless.
+     * @default true
+     */
+    floatingLabel?: boolean;
     /** The line under the control. Replaced by `errorMessage` when there is one. */
     description?: React.ReactNode;
     /**
@@ -99,8 +113,16 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
     /** Whether the popup starts open. */
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** Accessible name of the clear button. @default 'Clear' */
+    /**
+     * Accessible name of the clear button. Defaults to the word for "clear" in
+     * `locale`.
+     */
     clearLabel?: string;
+    /**
+     * Which language the two adornments' default names are written in. Falls back
+     * to the nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     /**
      * Accessible name of the chevron that opens the list, **for a combobox with no
      * `label`**.
@@ -110,16 +132,22 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
      * a button called "Fruit" beside a field called "Fruit" is the button that
      * opens that field. This is the fallback for the unlabelled case, where the
      * chevron would otherwise be a button with a glyph in it and no name at all.
-     * @default 'Open'
+     *
+     * Defaults to the word for "open" in `locale`.
      */
     openLabel?: string;
-    /** Accessible name of a chip's remove button. Receives the chip's label. */
+    /**
+     * Accessible name of a chip's remove button. Receives the chip's label.
+     *
+     * Left out, the chip is still named — "Remove Seoul" in `locale`'s own word
+     * order — rather than being one of five buttons all called "Remove".
+     */
     removeLabel?: (label: string) => string;
     /** A ref to the text input the reader types into. */
     inputRef?: React.Ref<HTMLInputElement>;
     /**
-     * The id put on the input and pointed at by the label. Derived from `name` when
-     * omitted, and generated when there is no name either.
+     * The id put on the input and pointed at by the label. Generated when it is
+     * left out.
      */
     id?: string;
     className?: string;
@@ -143,5 +171,5 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
  * navigation across both the list and the chips, and the hidden input that makes
  * the whole thing submit with a form.
  */
-export declare function MPCombobox<Multiple extends boolean | undefined = false>({ items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage, limit, placeholder, label, description, errorMessage, startIcon, size, fullWidth, required, disabled, readOnly, name, open, defaultOpen, onOpenChange, clearLabel, openLabel, removeLabel, inputRef, id, className, style }: MPComboboxProps<Multiple>): React.JSX.Element;
+export declare function MPCombobox<Multiple extends boolean | undefined = false>({ items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage, limit, placeholder, label, floatingLabel, description, errorMessage, startIcon, size, fullWidth, required, disabled, readOnly, name, open, defaultOpen, onOpenChange, clearLabel, openLabel, locale: localeProp, removeLabel, inputRef, id, className, style }: MPComboboxProps<Multiple>): React.JSX.Element;
 export {};

package/dist/components/combobox/MPCombobox.js

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

package/dist/components/container/MPContainer.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPSize } from '../../types';
+export interface MPContainerProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * How wide the content is allowed to get, on a ladder pinned to MD3's window
+     * size classes — `sm` 600dp, `md` 840dp, `lg` 1200dp, `xl` 1600dp, `xs` 480dp.
+     *
+     * `none`, the default, is no limit: a container's job is the margin, and a
+     * measure is a second decision that a page should have to ask for.
+     * @default 'none'
+     */
+    maxWidth?: MPSize | 'none';
+    /**
+     * The page margin. Turn it off to keep the centring and the measure without
+     * the gutter — a full-bleed hero, a section that pads itself.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * The margin's rung. `md` is 16dp, which is MD3's own compact margin; the
+     * specification widens it to 24dp from a medium window up, which here is
+     * `size="lg"`.
+     *
+     * As on [MPBox](./box) this is the size of the *sheet* — it never touches a
+     * height or the type scale — and it is independent of `maxWidth`, which is how
+     * wide the content gets rather than how far it sits from the edge.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Centres the content once `maxWidth` is narrower than the page. No effect
+     * while `maxWidth` is `none`, because there is nothing left over to centre in.
+     * @default true
+     */
+    centered?: boolean;
+    /**
+     * Renders something other than a `<div>`: `render={<main />}`,
+     * `render={<section />}`. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+/**
+ * The page margin, and optionally a measure.
+ *
+ * Material describes a layout as content held off the edge of the window by a
+ * margin — 16dp in a compact window, 24dp from medium up — and this is that
+ * margin, said once, at the top of a page rather than on each of the things
+ * inside it.
+ *
+ * Nothing to do with the grid. A container holds an [MPGrid](./grid) as happily
+ * as it holds a single paragraph, and a grid needs no container around it: the
+ * two are separate because the questions are separate — how far the content sits
+ * from the edge of the window, and how the content divides itself up.
+ *
+ * ## Why it draws no surface
+ *
+ * No `variant`, no `color`, no shadow, for the same reason a grid draws none:
+ * the outermost element on a page is the one thing that must not decide what the
+ * page looks like. A container that painted `surface-container` would put a
+ * second background behind an application that already has one, and every sheet
+ * inside it would then be a sheet on a sheet.
+ *
+ * When the page genuinely is a card on a background, that is an
+ * [MPBox](./box) or an [MPCard](./card) *inside* the container.
+ *
+ * ## Why the measure is off by default
+ *
+ * Because the two decisions arrive at different times. Nearly every page wants
+ * the margin, and a good number of them — a dashboard, a table, an editor —
+ * deliberately want the full width. A container that capped the width on its own
+ * would be a component whose most common use is undoing something it did.
+ */
+export declare const MPContainer: React.ForwardRefExoticComponent<MPContainerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/container/MPContainer.js

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

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

@@ -0,0 +1,2 @@
+export { MPContainer } from './MPContainer';
+export type { MPContainerProps } from './MPContainer';

package/dist/components/container/index.js

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

package/dist/components/date-picker/MPDatePicker.d.ts

@@ -39,6 +39,9 @@ export interface MPDatePickerProps extends MPPickerShellProps {
     /**
      * How the trigger writes the chosen date. Passed straight to `Intl`, so
      * `{ dateStyle: 'full' }` and `{ year: '2-digit', month: 'narrow' }` both work.
+     *
+     * An object written inline is fine: what the picker keeps between renders is
+     * keyed on what the format *says*, not on the object that says it.
      * @default { dateStyle: 'medium' }
      */
     format?: Intl.DateTimeFormatOptions;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{MPButton as o}from"../button/MPButton";import{MPIcon as t}from"../icon/MPIcon";import{CalendarIcon as n}from"../../constants/icons";import{MPCalendar as r}from"../../internal/Calendar";import{FOOTER_SIZE as i,MPPickerFooter as s,MPPickerShell as c}from"../../internal/Picker";import{useMPLocale as m,useMPMessages as d}from"../../internal/locale";import{CONTROL_ICON as u}from"../../internal/scale";import{displaySamples as p,formatDate as f,isDayOutside as h,isValidDate as b,localeWeekStart as x,mergeDateAndTime as v,startOfDay as D,startOfMonth as g,toISODate as k,today as y,withPlaceholder as C}from"../../internal/date";export const MPDatePicker=l.forwardRef(function({value:O,defaultValue:S,onValueChange:z,open:M,defaultOpen:P,onOpenChange:w,defaultMonth:j,minDate:I,maxDate:V,shouldDisableDate:B,locale:R,weekStartsOn:E,format:F={dateStyle:"medium"},placeholder:N,clearable:T=!1,showTodayButton:q=!0,closeOnSelect:A=!0,labels:G,name:H,size:J="md",color:K="primary",readOnly:L=!1,disabled:Q=!1,startIcon:U,...W},X){const Y=m(R),Z=d("picker",Y,G),$=E??x(Y),[_,ee]=l.useState(S??null),ae=void 0!==O?O:_,[le,oe]=l.useState(P??!1),te=M??le,[ne,re]=l.useState(()=>g(b(ae)?ae:j??y()));l.useEffect(()=>{te&&re(g(b(ae)?ae:j??y()))},[te]);const ie=e=>{e&&(L||Q)||(void 0===M&&oe(e),w?.(e))},se=e=>{void 0===O&&ee(e),z?.(e)},ce=e=>{const a=b(ae)?v(e,ae):D(e);se(a),re(g(a)),A&&ie(!1)},me=y(),de=h(me,I,V)||(B?.(me)??!1),ue=q||T,pe=l.useMemo(()=>C(p(Y,F),N),[Y,F,N]);return e(c,{...W,slug:"date-picker",size:J,color:K,readOnly:L,disabled:Q,name:H,triggerRef:X,startIcon:U??e(t,{icon:n,size:u[J]}),display:b(ae)?f(ae,Y,F):N??"",samples:pe,empty:!b(ae),clearable:T,onClear:()=>se(null),open:te,onOpenChange:ie,labels:Z,hiddenValues:H?[{name:H,value:b(ae)?k(ae):""}]:void 0,children:a("div",{className:"flex flex-col "+(ue?"gap-1.5":""),children:[e(r,{size:J,color:K,locale:Y,weekStartsOn:$,month:ne,onMonthChange:re,selected:[ae],onSelect:ce,minDate:I,maxDate:V,shouldDisableDate:B,labels:Z,autoFocus:!0}),ue?a(s,{children:[T?e(o,{variant:"text",size:i[J],color:K,onClick:()=>{se(null),ie(!1)},children:Z.clear}):null,q?e(o,{variant:"text",size:i[J],color:K,disabled:de,onClick:()=>ce(me),children:Z.today}):null]}):null]})})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{MPButton as o}from"../button/MPButton";import{MPIcon as t}from"../icon/MPIcon";import{CalendarIcon as n}from"../../constants/icons";import{MPCalendar as r}from"../../internal/Calendar";import{FOOTER_SIZE as i,MPPickerFooter as s,MPPickerShell as c,useDisplaySamples as d}from"../../internal/Picker";import{useMPLocale as m,useMPMessages as u}from"../../internal/locale";import{CONTROL_ICON as p}from"../../internal/scale";import{formatDate as f,isDayOutside as h,isValidDate as b,localeWeekStart as v,mergeDateAndTime as x,startOfDay as D,startOfMonth as g,toISODate as k,today as y,withPlaceholder as C}from"../../internal/date";export const MPDatePicker=l.forwardRef(function({value:O,defaultValue:S,onValueChange:z,open:M,defaultOpen:P,onOpenChange:w,defaultMonth:j,minDate:I,maxDate:V,shouldDisableDate:B,locale:R,weekStartsOn:E,format:F={dateStyle:"medium"},placeholder:N,clearable:T=!1,showTodayButton:q=!0,closeOnSelect:A=!0,labels:G,name:H,size:J="md",color:K="primary",readOnly:L=!1,disabled:Q=!1,startIcon:U,...W},X){const Y=m(R),Z=u("picker",Y,G),$=E??v(Y),[_,ee]=l.useState(S??null),ae=void 0!==O?O:_,[le,oe]=l.useState(P??!1),te=M??le,[ne,re]=l.useState(()=>g(b(ae)?ae:j??y()));l.useEffect(()=>{te&&re(g(b(ae)?ae:j??y()))},[te]);const ie=e=>{e&&(L||Q)||(void 0===M&&oe(e),w?.(e))},se=e=>{void 0===O&&ee(e),z?.(e)},ce=e=>{const a=b(ae)?x(e,ae):D(e);se(a),re(g(a)),A&&ie(!1)},de=y(),me=h(de,I,V)||(B?.(de)??!1),ue=q||T,pe=C(d(Y,F),N);return e(c,{...W,slug:"date-picker",size:J,color:K,readOnly:L,disabled:Q,triggerRef:X,startIcon:void 0===U?e(t,{icon:n,size:p[J]}):U,display:b(ae)?f(ae,Y,F):N??"",samples:pe,empty:!b(ae),clearable:T,onClear:()=>se(null),open:te,onOpenChange:ie,labels:Z,hiddenValues:H?[{name:H,value:b(ae)?k(ae):""}]:void 0,children:a("div",{className:"flex flex-col "+(ue?"gap-1.5":""),children:[e(r,{size:J,color:K,locale:Y,weekStartsOn:$,month:ne,onMonthChange:re,selected:[ae],onSelect:ce,minDate:I,maxDate:V,shouldDisableDate:B,labels:Z,autoFocus:!0}),ue?a(s,{children:[T?e(o,{variant:"text",size:i[J],color:K,onClick:()=>{se(null),ie(!1)},children:Z.clear}):null,q?e(o,{variant:"text",size:i[J],color:K,disabled:me,onClick:()=>ce(de),children:Z.today}):null]}):null]})})});

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

@@ -1 +1 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{MPButton as a}from"../button/MPButton";import{MPIcon as t}from"../icon/MPIcon";import{ArrowRightIcon as r,CalendarIcon as s}from"../../constants/icons";import{MPCalendar as o}from"../../internal/Calendar";import{FOOTER_SIZE as i,MPPickerFooter as c,MPPickerShell as u}from"../../internal/Picker";import{useMPLocale as m,useMPMessages as d}from"../../internal/locale";import{MPWidthSizer as p}from"../../internal/WidthSizer";import{CONTROL_ICON as h,META_TEXT as f}from"../../internal/scale";import{addMonths as v,compareDay as x,displaySamples as g,formatDate as b,isValidDate as w,localeWeekStart as N,startOfDay as S,startOfMonth as C,toISODate as y,today as D,withPlaceholder as k}from"../../internal/date";const O={start:null,end:null};export const MPDateRangePicker=n.forwardRef(function({value:P,defaultValue:z,onValueChange:M,open:j,defaultOpen:B,onOpenChange:I,defaultMonth:R,minDate:V,maxDate:E,shouldDisableDate:F,locale:W,weekStartsOn:$,format:_={dateStyle:"medium"},monthCount:q=2,startPlaceholder:A,endPlaceholder:G,presets:H,clearable:J=!1,closeOnSelect:K=!0,labels:L,name:Q,size:T="md",color:U="primary",readOnly:X=!1,disabled:Y=!1,startIcon:Z,...ee},le){const ne=m(W),ae=d("picker",ne,L),te=$??N(ne),[re,se]=n.useState(z??O),oe=void 0!==P?P??O:re,ie=w(oe.start)?oe.start:null,ce=w(oe.end)?oe.end:null,[ue,me]=n.useState(B??!1),de=j??ue,[pe,he]=n.useState(null),[fe,ve]=n.useState(null),[xe,ge]=n.useState(()=>C(ie??R??D()));n.useEffect(()=>{de?ge(C(ie??R??D())):(he(null),ve(null))},[de]);const be=e=>{e&&(X||Y)||(void 0===j&&me(e),I?.(e))},we=e=>{void 0===P&&se(e),M?.(e)},Ne=pe??ie,Se=null!==pe?fe:ce,Ce=(l,n)=>w(l)?b(l,ne,_):e("span",{className:"text-mp-on-surface-variant",children:n??""}),ye=v(xe,1),De=2===q,ke=n.useMemo(()=>g(ne,_),[ne,_]),Oe=null!==pe?ae.end:null===ie?ae.start:null,Pe={size:T,color:U,locale:ne,weekStartsOn:te,selected:[ie,ce,pe],rangeStart:Ne,rangeEnd:Se,onSelect:e=>{const l=S(e);if(null===pe)return he(l),ve(l),void we({start:l,end:null});const[n,a]=x(l,pe)<0?[l,pe]:[pe,l];he(null),ve(null),we({start:n,end:a}),K&&be(!1)},onPreviewChange:e=>{null!==pe&&ve(e??pe)},minDate:V,maxDate:E,shouldDisableDate:F,showOutsideDays:!1,labels:ae};return e(u,{...ee,slug:"date-range-picker",size:T,color:U,readOnly:X,disabled:Y,name:Q,triggerRef:le,startIcon:Z??e(t,{icon:s,size:h[T]}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ce(ie,A)}),e(p,{samples:k(ke,A)})]}),e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center rtl:rotate-180",children:e(t,{icon:r,size:h[T]})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ce(ce,G)}),e(p,{samples:k(ke,G)})]})]}),empty:null===ie&&null===ce,clearable:J,onClear:()=>we(O),open:de,onOpenChange:be,labels:ae,hiddenValues:Q?[{name:Q,value:ie?y(ie):""},{name:Q,value:ce?y(ce):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:"flex items-stretch gap-2",children:[H&&H.length>0?e("div",{className:"border-mp-outline-variant flex max-h-[calc(var(--_mp-cell,2.5rem)*8)] flex-col overflow-y-auto border-e pe-1.5",children:H.map((l,n)=>e(a,{variant:"text",size:i[T],color:U,className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;he(null),ve(null),we(l),w(l.start)&&ge(C(l.start)),K&&be(!1)})(l),children:l.label},n))}):null,e(o,{...Pe,month:xe,onMonthChange:ge,showNextButton:!De,autoFocus:!0}),De?e(o,{...Pe,month:ye,onMonthChange:e=>ge(v(e,-1)),showPreviousButton:!1}):null]}),J||null!==Oe?l(c,{children:[null!==Oe?e("span",{className:`text-mp-on-surface-variant me-auto ${f}`,children:Oe}):null,J?e(a,{variant:"text",size:i[T],color:U,onClick:()=>{he(null),ve(null),we(O),be(!1)},children:ae.clear}):null]}):null]})})});
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{MPButton as a}from"../button/MPButton";import{MPIcon as t}from"../icon/MPIcon";import{ArrowRightIcon as r,CalendarIcon as s}from"../../constants/icons";import{MPCalendar as o}from"../../internal/Calendar";import{FOOTER_SIZE as i,MPPickerFooter as c,MPPickerShell as u,useDisplaySamples as m}from"../../internal/Picker";import{useMPLocale as d,useMPMessages as p}from"../../internal/locale";import{MPWidthSizer as h}from"../../internal/WidthSizer";import{CONTROL_ICON as f,META_TEXT as v}from"../../internal/scale";import{addMonths as x,compareDay as g,formatDate as b,isValidDate as w,localeWeekStart as N,startOfDay as S,startOfMonth as C,toISODate as y,today as D,withPlaceholder as k}from"../../internal/date";const O={start:null,end:null};export const MPDateRangePicker=n.forwardRef(function({value:P,defaultValue:z,onValueChange:M,open:j,defaultOpen:B,onOpenChange:I,defaultMonth:R,minDate:V,maxDate:E,shouldDisableDate:F,locale:W,weekStartsOn:$,format:_={dateStyle:"medium"},monthCount:q=2,startPlaceholder:A,endPlaceholder:G,presets:H,clearable:J=!1,closeOnSelect:K=!0,labels:L,name:Q,size:T="md",color:U="primary",readOnly:X=!1,disabled:Y=!1,startIcon:Z,...ee},le){const ne=d(W),ae=p("picker",ne,L),te=$??N(ne),[re,se]=n.useState(z??O),oe=void 0!==P?P??O:re,ie=w(oe.start)?oe.start:null,ce=w(oe.end)?oe.end:null,[ue,me]=n.useState(B??!1),de=j??ue,[pe,he]=n.useState(null),[fe,ve]=n.useState(null),[xe,ge]=n.useState(()=>C(ie??R??D()));n.useEffect(()=>{de?ge(C(ie??R??D())):(he(null),ve(null))},[de]);const be=e=>{e&&(X||Y)||(void 0===j&&me(e),I?.(e))},we=e=>{void 0===P&&se(e),M?.(e)},Ne=pe??ie,Se=null!==pe?fe:ce,Ce=(l,n)=>w(l)?b(l,ne,_):e("span",{className:"text-mp-on-surface-variant",children:n??""}),ye=x(xe,1),De=2===q,ke=m(ne,_),Oe=null!==pe?ae.end:null===ie?ae.start:null,Pe={size:T,color:U,locale:ne,weekStartsOn:te,selected:[ie,ce,pe],rangeStart:Ne,rangeEnd:Se,onSelect:e=>{const l=S(e);if(null===pe)return he(l),ve(l),void we({start:l,end:null});const[n,a]=g(l,pe)<0?[l,pe]:[pe,l];he(null),ve(null),we({start:n,end:a}),K&&be(!1)},onPreviewChange:e=>{null!==pe&&ve(e??pe)},minDate:V,maxDate:E,shouldDisableDate:F,showOutsideDays:!1,labels:ae};return e(u,{...ee,slug:"date-range-picker",size:T,color:U,readOnly:X,disabled:Y,triggerRef:le,startIcon:void 0===Z?e(t,{icon:s,size:f[T]}):Z,display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ce(ie,A)}),e(h,{samples:k(ke,A)})]}),e("span",{"aria-hidden":"true",className:"text-mp-on-surface-variant flex shrink-0 items-center rtl:rotate-180",children:e(t,{icon:r,size:f[T]})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:Ce(ce,G)}),e(h,{samples:k(ke,G)})]})]}),empty:null===ie&&null===ce,clearable:J,onClear:()=>we(O),open:de,onOpenChange:be,labels:ae,hiddenValues:Q?[{name:Q,value:ie?y(ie):""},{name:Q,value:ce?y(ce):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:"flex items-stretch gap-2",children:[H&&H.length>0?e("div",{className:"border-mp-outline-variant flex max-h-[calc(var(--_mp-cell,2.5rem)*8)] flex-col overflow-y-auto border-e pe-1.5",children:H.map((l,n)=>e(a,{variant:"text",size:i[T],color:U,className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;he(null),ve(null),we(l),w(l.start)&&ge(C(l.start)),K&&be(!1)})(l),children:l.label},n))}):null,e(o,{...Pe,month:xe,onMonthChange:ge,showNextButton:!De,autoFocus:!0}),De?e(o,{...Pe,month:ye,onMonthChange:e=>ge(x(e,-1)),showPreviousButton:!1}):null]}),J||null!==Oe?l(c,{children:[null!==Oe?e("span",{className:`text-mp-on-surface-variant me-auto ${v}`,children:Oe}):null,J?e(a,{variant:"text",size:i[T],color:U,onClick:()=>{he(null),ve(null),we(O),be(!1)},children:ae.clear}):null]}):null]})})});

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

@@ -1 +1 @@
-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 m,MPPickerShell as d}from"../../internal/Picker";import{useMPLocale as u,useMPMessages as h}from"../../internal/locale";import{CONTROL_ICON as p}from"../../internal/scale";import{displaySamples as f,formatDate as S,isDayOutside as b,isHour12 as g,isValidDate as D,localeWeekStart as v,mergeDateAndTime as x,startOfDay as C,startOfMonth as k,timeUnitSpan as w,toISODateTime as z,today as O,withPlaceholder as y,withTime as M}from"../../internal/date";export const MPDateTimePicker=t.forwardRef(function({value:T,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=u(A),se=h("picker",ie,$),ce=G??v(ie),me=J??g(ie),[de,ue]=t.useState(P??null),he=void 0!==T?T:de,[pe,fe]=t.useState(N??!1),Se=I??pe,[be,ge]=t.useState(()=>k(D(he)?he:B??O()));t.useEffect(()=>{Se&&ge(k(D(he)?he:B??O()))},[Se]);const De=e=>{e&&(te||le)||(void 0===I&&fe(e),V?.(e))},ve=e=>{void 0===T&&ue(e),j?.(e)},xe=t.useCallback((e,o)=>{const[t,l]=w(o,e),a=C(e).getTime();return!!(D(R)&&a+1e3*l<R.getTime())||(!!(D(E)&&a+1e3*t>E.getTime())||(q?.(e,o)??!1))},[R,E,q]),Ce=H??{dateStyle:"medium",timeStyle:"short",hour12:me},ke=new Date,we=M(ke,{seconds:K?ke.getSeconds():0}),ze=b(we,R,E)||(F?.(we)??!1)||xe(we,"second"),Oe=t.useMemo(()=>y(f(ie,Ce),W),[ie,Ce,W]);return e(d,{...ne,slug:"date-time-picker",size:ee,color:oe,readOnly:te,disabled:le,name:_,triggerRef:re,startIcon:ae??e(a,{icon:n,size:p[ee]}),display:D(he)?S(he,ie,Ce):W??"",samples:Oe,empty:!D(he),clearable:X,onClear:()=>ve(null),open:Se,onOpenChange:De,labels:se,hiddenValues:_?[{name:_,value:D(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=D(he)?x(e,he):C(e);ve(o),ge(k(o)),Z&&De(!1)},minDate:R,maxDate:E,shouldDisableDate:F,labels:se,autoFocus:!0}),e(c,{}),e(i,{size:ee,locale:ie,value:D(he)?he:null,referenceDate:D(he)?he:O(),onChange:ve,hour12:me,showSeconds:K,hourStep:L,minuteStep:Q,secondStep:U,shouldDisableTime:xe,labels:se})]}),o(m,{children:[X?e(l,{variant:"text",size:s[ee],color:oe,onClick:()=>{ve(null),De(!1)},children:se.clear}):null,Y?e(l,{variant:"text",size:s[ee],color:oe,disabled:ze,onClick:()=>{ve(we),ge(k(we))},children:se.now}):null,e(l,{variant:"filled",size:s[ee],color:oe,onClick:()=>De(!1),children:se.done})]})]})})});
+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=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})]})]})})});

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

@@ -54,10 +54,15 @@ export interface MPDialogProps {
      */
     showClose?: boolean;
     /**
-     * Accessible name of the × button.
-     * @default 'Close'
+     * Accessible name of the × button. Defaults to the word for "close" in
+     * `locale`.
      */
     closeLabel?: string;
+    /**
+     * Which language the × button's default name is written in. Falls back to the
+     * nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     /**
      * A hard cap on the sheet's width, overriding the one `size` implies. Numbers
      * are pixels. For the dialog whose *content* decides its width — a wide table,
@@ -142,4 +147,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, width, fullWidth, fullScreen, modal, dismissible, size, color, 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, color, className, style, children }: MPDialogProps): React.JSX.Element;

package/dist/components/dialog/MPDialog.js

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

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

@@ -80,10 +80,15 @@ export interface MPDrawerProps {
      */
     showClose?: boolean;
     /**
-     * Accessible name of the × button.
-     * @default 'Close'
+     * Accessible name of the × button. Defaults to the word for "close" in
+     * `locale`.
      */
     closeLabel?: string;
+    /**
+     * Which language the × button's default name is written in. Falls back to the
+     * nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     /**
      * How far the panel reaches in from its edge: a **width** for `left` and
      * `right`, a **height** for `top` and `bottom`. Numbers are pixels.
@@ -160,4 +165,4 @@ export declare const MPDrawerClose: React.ForwardRefExoticComponent<Omit<import(
  * of the animation. What says the panel came from an edge is that it is
  * *attached* to one: square against the window, cut on the free side.
  */
-export declare function MPDrawer({ side, mode, open, defaultOpen, onOpenChange, trigger, title, description, actions, dividers, showClose, closeLabel, extent, rounded, dismissible, size, 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, className, style, children }: MPDrawerProps): React.JSX.Element | null;

package/dist/components/drawer/MPDrawer.js

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

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

@@ -3,10 +3,20 @@ import { useRender } from '@base-ui/react/use-render';
 import type { MPSize, MPVariant } from '../../types';
 export interface MPEmptyProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title'> {
     /**
-     * The headline. Defaults to `Nothing here`; pass `false` for a state that is a
-     * glyph and a sentence with no heading over them.
+     * The headline. Defaults to the words for "nothing here" in `locale`; pass
+     * `false` for a state that is a glyph and a sentence with no heading over
+     * them.
      */
     title?: React.ReactNode | false;
+    /**
+     * Which language that default headline is written in. Falls back to the
+     * nearest `MPLocaleProvider`, then to English.
+     *
+     * It matters more here than anywhere else in the library: this is the one
+     * invented string that is **drawn** rather than only read out, so a page in
+     * Korean with an empty list used to say "Nothing here" in the middle of it.
+     */
+    locale?: string;
     /**
      * The glyph above the headline. Defaults to the empty tray; pass `false` to
      * drop it, or a node — an illustration, a brand mark, an icon from any set —

package/dist/components/empty/MPEmpty.js

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

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

@@ -60,8 +60,18 @@ export interface MPFilePickerProps extends MPStyleProps {
     icon?: React.ReactNode;
     /** Lists the chosen files under the box, each with a way to remove it. @default true */
     showList?: boolean;
-    /** The accessible name of a file's remove button. Receives the file's name. */
+    /**
+     * The accessible name of a file's remove button. Receives the file's name.
+     *
+     * Left out, each button is still named for its own file — in `locale`'s own
+     * word order — rather than being one of five buttons all called "Remove".
+     */
     removeLabel?: (name: string) => string;
+    /**
+     * Which language the remove buttons' default names are written in. Falls back
+     * to the nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
     /** Marks the field required. */
     required?: boolean;
     /** Greys the picker out and stops it taking files. */

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

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