material-plus-ui 1.3.1 → 1.5.0

package/dist/components/color-picker/MPColorPicker.d.ts

@@ -1,23 +1,16 @@
 import * as React from 'react';
+import type { MPMessages } from '../../internal/i18n.js';
 import type { MPColorFormat } from '../../internal/color.js';
 import type { MPStyleProps } from '../../types.js';
-/** The names for the parts of the picker that have no text on them. */
-export interface MPColorPickerLabels {
-    /** The saturation/brightness square. */
-    area: string;
-    /** The hue rail beside it. */
-    hue: string;
-    /** The opacity rail, when `alpha` is on. */
-    alpha: string;
-    /** The field the value can be typed into. */
-    value: string;
-    /** The grid of ready-made colours. */
-    swatches: string;
-    /** The × that empties the control. */
-    clear: string;
-    /** What the trigger reads before anything has been chosen. */
-    empty: string;
-}
+/**
+ * The names for the parts of the picker that have no text on them.
+ *
+ * A namespace in the shared table rather than a set of defaults kept here, which
+ * is the rule every other component that invents a word follows: `locale` gets a
+ * translation, `MPLocaleProvider` gets one for the whole application at once,
+ * and `labels` gets whatever else. See `internal/i18n.ts`.
+ */
+export type MPColorPickerLabels = MPMessages['colorPicker'];
 export interface MPColorPickerProps extends MPStyleProps {
     /** The colour, as a CSS string. Pass it to drive the picker yourself. */
     value?: string;
@@ -93,6 +86,16 @@ export interface MPColorPickerProps extends MPStyleProps {
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
     /** Overrides for the accessible names, one at a time. */
+    /**
+     * Which language the picker's own names are written in — the rails, the
+     * square, the × and the word the trigger shows before a colour has been
+     * chosen. Falls back to the nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /**
+     * Overrides for the words themselves. They win over the translation, and
+     * anything not named stays translated.
+     */
     labels?: Partial<MPColorPickerLabels>;
     /**
      * The id put on the trigger and pointed at by the label. Generated when it is

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

@@ -1,2 +1,2 @@
 "use client";
-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 t}from"@base-ui/react/popover";import{MPIcon as l}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as i}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as u,useFloatingLabel as c}from"../../internal/FieldOutline.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as p}from"../../internal/SupportingText.js";import{CONTROL_ICON as h,META_TEXT as m,PROSE_TEXT as f,STACK_GAP as g,hasContent as v}from"../../internal/scale.js";import{FADE as b,PORTAL_LAYER as x}from"../../internal/surface.js";import{CHECKER_BACKGROUND as y,DEFAULT_SWATCHES as w,clamp as N,cssColor as j,formatColor as k,parseColor as C,readableInk as _}from"../../internal/color.js";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=/*@__PURE__*/["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:t,onChange:i,text:s,onTextChange:u,withAlpha:c,swatches:d,editable:p,size:h,inert:f,labels:g}){const v=I[h],b=-v/2,x=j({h:n.h,s:100,v:100}),w=j(n),z=r.useRef(null),O=e=>({onPointerDown:a=>{if(f)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;!f&&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: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=D(e);!f&&a&&0!==a.x&&(e.preventDefault(),n(a.x))}}),R=/*@__PURE__*/["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=C(e);return{swatch:e,parsed:a,hex:null===a?null:k(a.hsv,a.alpha,"hex")}}):[],[d]),V=k(n,t,"hex");return a("div",{className:`mp-color-picker__panel flex flex-col ${P[h]} ${T[h]}`,children:[e("div",{...O(({x:e,y:a})=>i({hsv:{h:n.h,s:100*e,v:100*(1-a)},alpha:t})),role:"slider",tabIndex:f?-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":f||void 0,onKeyDown:e=>{const a=D(e);!f&&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:t}))},className:[S,"rounded-mp-sm",$[h],R,f?"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:t})),...L(g.hue,n.h,360,e=>i({hsv:{...n,h:(n.h+2*e+360)%360},alpha:t})),className:[S,"rounded-mp-full",M[h],R,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: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*t,100,e=>i({hsv:n,alpha:N(t+e/100,0,1)})),className:[S,"rounded-mp-full",M[h],R,f?"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, ${j(n,0)}, ${w})`}}),e("span",{className:A,style:{width:v,height:v,left:100*t+"%",top:"50%",marginLeft:b,marginTop:b,backgroundColor:j(n,t)}})]}):null,p?a("div",{className:`flex items-center ${T[h]}`,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:j(n,t)}})}),e("input",{type:"text",value:s,readOnly:f,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",m,"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},t)=>{const s=null!==r&&n===V;return e("button",{type:"button",disabled:f,"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","transition-[box-shadow] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",R,f?"cursor-default":"hover:shadow-mp-1 cursor-pointer"].join(" "),style:{backgroundColor:a},children:e("span",{"aria-hidden":"true",className:["transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",s?"opacity-100":"opacity-0"].join(" "),style:r?{color:_(r.hsv)}:void 0,children:e(l,{icon:o,size:12})})},`${t}:${a}`)})}):null]})}const R={h:202,s:100,v:61};export const MPColorPicker=/*@__PURE__*/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],te=r.useId(),le=J??te,[oe,ie]=r.useState(N),se=o??oe,[ue,ce]=r.useState(Y),de=X??ue,[pe,he]=r.useState(()=>C(se)??{hsv:R,alpha:1}),[me,fe]=r.useState(()=>se),ge=k(pe.hsv,$?pe.alpha:1,P),ve=""===se;r.useEffect(()=>{const e=C(se);e?k(e.hsv,$?e.alpha:1,P)!==ge&&(fe(se),he(e)):fe(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)=>{he(e);const r=k(e.hsv,$?e.alpha:1,P);fe(a??r),void 0===o&&ie(r),_?.(r)},je=e(L,{hsv:pe.hsv,alphaValue:pe.alpha,onChange:Ne,text:me,onTextChange:e=>{fe(e);const a=C(e);a&&Ne(a,e)},withAlpha:$,swatches:M,editable:I,size:W,inert:be,labels:ae}),ke=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":j(pe.hsv,$?pe.alpha:1)}})}),Ce=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:[m,V?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[S,q?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,je,v(D)?e("span",{className:`${m} text-mp-error`,children:D}):v(B)?e("span",{className:`${m} text-mp-on-surface-variant`,children:B}):null,Ce]}):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(t.Root,{open:de,onOpenChange:e=>{void 0===X&&ce(e),E?.(e)},children:[a("div",{className:"relative w-full",children:[a(t.Trigger,{id:le,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,f[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:ke,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(""),fe(""),_?.("")},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(l,{icon:i,size:h[W]})]}):null,e(u,{label:S,required:q,notched:ye}),v(S)?e(s,{size:W,label:S,required:q,htmlFor:le,shrunk:ye}):null]}),e(t.Portal,{children:e(t.Positioner,{className:x,sideOffset:4,align:"start",children:e(t.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],b].join(" "),children:je})})})]}),e(p,{description:B,errorMessage:D,className:ne.padding}),Ce]})});
+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 t}from"@base-ui/react/popover";import{MPIcon as l}from"../icon/MPIcon.js";import{CheckIcon as o,CloseIcon as i}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as u,useFloatingLabel as c}from"../../internal/FieldOutline.js";import{useMPLocale as d,useMPMessages as p}from"../../internal/locale.js";import{COLOR_PICKER as h}from"../../internal/messages/color-picker.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{MPSupportingText as f}from"../../internal/SupportingText.js";import{CONTROL_ICON as g,META_TEXT as v,PROSE_TEXT as x,STACK_GAP as b,hasContent as y}from"../../internal/scale.js";import{FADE as w,PORTAL_LAYER as N}from"../../internal/surface.js";import{CHECKER_BACKGROUND as j,DEFAULT_SWATCHES as k,clamp as C,cssColor as _,formatColor as z,parseColor as P,readableInk as $}from"../../internal/color.js";const M={xs:"w-40",sm:"w-44",md:"w-52",lg:"w-60",xl:"w-72"},T={xs:"h-24",sm:"h-28",md:"h-32",lg:"h-40",xl:"h-48"},I={xs:"h-2.5",sm:"h-3",md:"h-3.5",lg:"h-4",xl:"h-5"},A={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"},R={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"}},B="border-mp-outline-variant relative overflow-hidden border",D=/*@__PURE__*/["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 L(e,a,r){return{x:0===e.width?0:C((a-e.left)/e.width,0,1),y:0===e.height?0:C((r-e.top)/e.height,0,1)}}function S(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 q({hsv:n,alphaValue:t,onChange:i,text:s,onTextChange:u,withAlpha:c,swatches:d,editable:p,size:h,inert:m,labels:f}){const g=R[h],x=-g/2,b=_({h:n.h,s:100,v:100}),y=_(n),w=r.useRef(null),N=r.useRef(null),k=r.useRef(0);r.useEffect(()=>()=>{k.current&&cancelAnimationFrame(k.current)},[]);const O=e=>({onPointerDown:a=>{if(m)return;const r=a.currentTarget.getBoundingClientRect();w.current=r,a.currentTarget.setPointerCapture(a.pointerId),e(L(r,a.clientX,a.clientY))},onPointerMove:a=>{const r=w.current;var n;!m&&r&&a.currentTarget.hasPointerCapture(a.pointerId)&&(n=L(r,a.clientX,a.clientY),N.current=n,k.current||(k.current=requestAnimationFrame(()=>{k.current=0;const a=N.current;N.current=null,a&&e(a)})))},onPointerUp:()=>{w.current=null},onPointerCancel:()=>{w.current=null}}),q=(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=S(e);!m&&a&&0!==a.x&&(e.preventDefault(),n(a.x))}}),F=/*@__PURE__*/["outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),V=r.useMemo(()=>d?d.map(e=>{const a=P(e);return{swatch:e,parsed:a,hex:null===a?null:z(a.hsv,a.alpha,"hex")}}):[],[d]),K=z(n,t,"hex");return a("div",{className:`mp-color-picker__panel flex flex-col ${M[h]} ${A[h]}`,children:[e("div",{...O(({x:e,y:a})=>i({hsv:{h:n.h,s:100*e,v:100*(1-a)},alpha:t})),role:"slider",tabIndex:m?-1:0,"aria-label":f.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=S(e);!m&&a&&(e.preventDefault(),i({hsv:{h:n.h,s:C(n.s+a.x,0,100),v:C(n.v+a.y,0,100)},alpha:t}))},className:[B,"rounded-mp-sm",T[h],F,m?"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:D,style:{width:g,height:g,left:`${n.s}%`,top:100-n.v+"%",marginLeft:x,marginTop:x,backgroundColor:y}})}),e("div",{...O(({x:e})=>i({hsv:{...n,h:360*e},alpha:t})),...q(f.hue,n.h,360,e=>i({hsv:{...n,h:(n.h+2*e+360)%360},alpha:t})),className:[B,"rounded-mp-full",I[h],F,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:D,style:{width:g,height:g,left:n.h/360*100+"%",top:"50%",marginLeft:x,marginTop:x,backgroundColor:b}})}),c?a("div",{...O(({x:e})=>i({hsv:n,alpha:e})),...q(f.alpha,100*t,100,e=>i({hsv:n,alpha:C(t+e/100,0,1)})),className:[B,"rounded-mp-full",I[h],F,m?"cursor-default":"cursor-pointer touch-none"].join(" "),style:j,children:[e("span",{"aria-hidden":"true",className:"absolute inset-0",style:{backgroundImage:`linear-gradient(to right, ${_(n,0)}, ${y})`}}),e("span",{className:D,style:{width:g,height:g,left:100*t+"%",top:"50%",marginLeft:x,marginTop:x,backgroundColor:_(n,t)}})]}):null,p?a("div",{className:`flex items-center ${A[h]}`,children:[e("span",{"aria-hidden":"true",className:"border-mp-outline-variant shrink-0 rounded-full border",style:{width:g+8,height:g+8,...j},children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:_(n,t)}})}),e("input",{type:"text",value:s,readOnly:m,spellCheck:!1,autoComplete:"off","aria-label":f.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",v,"focus-visible:border-mp-primary outline-none"].join(" ")})]}):null,V.length>0?e("div",{role:"group","aria-label":f.swatches,className:"grid grid-cols-8 gap-1",children:V.map(({swatch:a,parsed:r,hex:n},t)=>{const s=null!==r&&n===K;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","transition-[box-shadow] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",F,m?"cursor-default":"hover:shadow-mp-1 cursor-pointer"].join(" "),style:{backgroundColor:a},children:e("span",{"aria-hidden":"true",className:["transition-opacity duration-(--mp-sys-motion-duration-short4)","ease-mp-standard",s?"opacity-100":"opacity-0"].join(" "),style:r?{color:$(r.hsv)}:void 0,children:e(l,{icon:o,size:12})})},`${t}:${a}`)})}):null]})}const F={h:202,s:100,v:61};export const MPColorPicker=/*@__PURE__*/r.forwardRef(function({value:o,defaultValue:C="#00639b",onValueChange:$,format:M="hex",alpha:T=!1,swatches:I=k,inline:A=!1,editable:R=!0,label:B,floatingLabel:D=!0,description:L,errorMessage:S,required:V=!1,disabled:K=!1,readOnly:E=!1,clearable:U=!1,name:X,open:Y,defaultOpen:W=!1,onOpenChange:G,locale:H,labels:J,size:Q="md",fullWidth:Z=!1,id:ee,className:ae,style:re},ne){const te=d(H),le=p(h,te,J),oe=y(S),ie=O[Q],se=r.useId(),ue=ee??se,[ce,de]=r.useState(C),pe=o??ce,[he,me]=r.useState(W),fe=Y??he,[ge,ve]=r.useState(()=>P(pe)??{hsv:F,alpha:1}),[xe,be]=r.useState(()=>pe),ye=z(ge.hsv,T?ge.alpha:1,M),we=""===pe;r.useEffect(()=>{const e=P(pe);e?z(e.hsv,T?e.alpha:1,M)!==ye&&(be(pe),ve(e)):be(pe)},[pe,ye,T,M]);const Ne=K||E,je=U&&!Ne&&!we,{shrunk:ke,focusProps:Ce}=c({floating:D&&y(B),filled:!we,pinned:fe}),_e=(e,a)=>{ve(e);const r=z(e.hsv,T?e.alpha:1,M);be(a??r),void 0===o&&de(r),$?.(r)},ze=e(q,{hsv:ge.hsv,alphaValue:ge.alpha,onChange:_e,text:xe,onTextChange:e=>{be(e);const a=P(e);a&&_e(a,e)},withAlpha:T,swatches:I,editable:R,size:Q,inert:Ne,labels:le}),Pe=e("span",{"aria-hidden":"true",className:"border-mp-outline-variant block size-5 shrink-0 rounded-full border",style:j,children:e("span",{className:"block size-full rounded-full",style:{backgroundColor:we?"transparent":_(ge.hsv,T?ge.alpha:1)}})}),$e=X?e("input",{type:"hidden",name:X,value:we?"":ye}):null;return A?a("div",{ref:ne,"data-mp-size":Q,className:["mp-color-picker flex flex-col",b[Q],ae??""].filter(Boolean).join(" "),style:re,children:[y(B)?a("span",{className:[v,K?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[B,V?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,ze,y(S)?e("span",{className:`${v} text-mp-error`,children:S}):y(L)?e("span",{className:`${v} text-mp-on-surface-variant`,children:L}):null,$e]}):a(n.Root,{ref:ne,disabled:K,invalid:oe,"data-mp-size":Q,className:["mp-color-picker group flex-col align-top",Z?"flex w-full":"inline-flex w-fit",ae??""].filter(Boolean).join(" "),style:re,...Ce,children:[a(t.Root,{open:fe,onOpenChange:e=>{void 0===Y&&me(e),G?.(e)},children:[a("div",{className:"relative w-full",children:[a(t.Trigger,{id:ue,disabled:K,nativeButton:!0,className:["relative flex w-full items-center gap-2 select-none","appearance-none bg-transparent font-[inherit] outline-none",ie.padding,je?"pe-10":"",ie.height,x[Q],K?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface "+(E?"cursor-default":"cursor-pointer")].filter(Boolean).join(" "),children:[we&&!ke?null:Pe,e("span",{className:["min-w-0 flex-1 truncate text-start",we?"text-mp-on-surface-variant":""].filter(Boolean).join(" "),children:we?ke?le.empty:null:ye})]}),je?a("button",{type:"button","aria-label":le.clear,onClick:()=>{void 0===o&&de(""),be(""),$?.("")},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(m,{className:"group-hover/clear:opacity-8 group-focus-visible/clear:opacity-10"}),e(l,{icon:i,size:g[Q]})]}):null,e(u,{label:B,required:V,notched:ke}),y(B)?e(s,{size:Q,label:B,required:V,htmlFor:ue,shrunk:ke}):null]}),e(t.Portal,{children:e(t.Positioner,{className:N,sideOffset:4,align:"start",children:e(t.Popup,{className:["mp-color-picker__popup rounded-mp-md shadow-mp-2 bg-mp-surface-container","text-mp-on-surface p-3 outline-none",x[Q],w].join(" "),children:ze})})})]}),e(f,{description:L,errorMessage:S,className:ie.padding}),$e]})});

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

@@ -28,7 +28,21 @@ type Selection<Multiple extends boolean | undefined> = Multiple extends true ? M
 export interface MPComboboxProps<Multiple extends boolean | undefined = false> extends MPStyleProps {
     /**
      * The options, as data — the same shape `MPSelect` takes, and for the same
-     * reason: what a caller has is almost always an array already.
+     * reason: what a caller has is almost always an array already.   *
+     * ## How long a list this holds
+     *
+     * Every row is rendered, and there is no windowing. That is the right default
+     * — windowing costs a measured container, a scroll listener and a row height
+     * the component would have to decide for the caller — and it has a ceiling: a
+     * few hundred rows is nothing, a few thousand is a visible pause when the list
+     * opens, and past that the answer is a narrower list rather than a faster one.
+     *
+     * A list somebody has to scroll ten thousand rows of is a list that wanted a
+     * filter. Where it genuinely is that long, window it yourself and pass the
+     * slice.
+     *
+     * `limit` is the lighter tool here: it caps what the *popup* draws while
+     * leaving the filter to search everything.
      */
     items: readonly MPComboboxOption[];
     /**
@@ -54,7 +68,11 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
      * @default true
      */
     allowCustom?: boolean;
-    /** What that row says. Receives the trimmed query. */
+    /**
+     * What that row says. Receives the trimmed query.
+     *
+     * Left out, it is the wording in `locale` with the query set into it.
+     */
     customLabel?: (query: string) => React.ReactNode;
     /**
      * Shows a × that empties the field. Off by default — a field that can be
@@ -63,8 +81,8 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
      */
     clearable?: boolean;
     /**
-     * Shown in the popup when nothing matches and no value may be added.
-     * @default 'No matches'
+     * Shown in the popup when nothing matches and no value may be added. Defaults
+     * to the wording in `locale`.
      */
     emptyMessage?: React.ReactNode;
     /** The most rows the list will show at once. `-1` is all of them. @default -1 */

package/dist/components/combobox/MPCombobox.js

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

package/dist/components/command-palette/MPCommandPalette.d.ts

@@ -0,0 +1,132 @@
+import * as React from 'react';
+import type { MPColor, MPSize } from '../../types.js';
+/** One thing the palette can do. */
+export interface MPCommand {
+    /** What identifies the command. */
+    value: string;
+    /** What the row says, and what the query is matched against. */
+    label: string;
+    /** A second line under it — where the command goes, or what it changes. */
+    description?: React.ReactNode;
+    /** A glyph before the label. */
+    icon?: React.ReactNode;
+    /**
+     * The keystroke that does the same thing, set at the end of the row.
+     *
+     * Written the way [MPShortcut](../display/shortcut) writes them, so `Mod`
+     * resolves per platform. The palette **does not bind it** — the application
+     * does, and this is the label for the binding it already has.
+     */
+    shortcut?: string;
+    /**
+     * The heading this command sits under.
+     *
+     * Commands are drawn in the order they are given and a heading appears each
+     * time the group changes, so a group's commands have to be listed together.
+     */
+    group?: string;
+    /**
+     * Extra words the query is matched against but that are never drawn — the name
+     * somebody else's product gives the same command, an abbreviation, the word
+     * the reader would have searched for.
+     */
+    keywords?: readonly string[];
+    /** In the list but not runnable. */
+    disabled?: boolean;
+    /** What running it does. */
+    onSelect?: () => void;
+}
+export interface MPCommandPaletteProps {
+    /** Everything the palette can do. */
+    items: readonly MPCommand[];
+    /** Whether the palette is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /**
+     * Whether it starts open, for an uncontrolled one.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Called when a command is run, after its own `onSelect`. The palette closes
+     * either way.
+     */
+    onSelect?: (item: MPCommand) => void;
+    /**
+     * The keystroke that opens the palette, bound on the window.
+     *
+     * Written the way [MPShortcut](../display/shortcut) writes them, so `Mod` is
+     * Command on a Mac and Control everywhere else — the same vocabulary the rows
+     * *draw*, because a shortcut a component displays and one it binds have to be
+     * spelled the same way or the label is a claim nobody checked. `false` binds
+     * nothing.
+     * @default 'Mod+K'
+     */
+    shortcut?: string | false;
+    /** How wide the sheet may get. A number in pixels, or any CSS length. */
+    width?: number | string;
+    /**
+     * How tall the list may get before it scrolls.
+     * @default 320
+     */
+    maxHeight?: number | string;
+    /**
+     * The row height and type scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family the highlighted row and the caret read.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * Which language the placeholder, the empty line and the dialog's own name are
+     * written in. Falls back to the nearest `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** The placeholder in the field. Defaults to the wording in `locale`. */
+    placeholder?: string;
+    /** The line where the rows would be, when nothing matched. */
+    emptyMessage?: React.ReactNode;
+    /** The accessible name of the dialog, which has no visible title. */
+    label?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Everything an application can do, behind one field.
+ *
+ * The shape a keyboard-first product takes once it has more actions than a menu
+ * bar can hold: the reader types what they want instead of remembering where it
+ * was put.
+ *
+ * ## What it is not
+ *
+ * Not an [MPMenu](./menu). A menu is a short list in one place, and every row is
+ * visible before you go looking for it — that is the whole of what a menu is
+ * good at, and it is why a menu of sixty rows is not a menu.
+ *
+ * Not an [MPCombobox](./combobox) either, and this one is worth being precise
+ * about: what comes back from a combobox is a **value**, which the caller then
+ * does something with. What comes back from here is *something happening*. The
+ * row is the action, `onSelect` runs it, and the sheet closes because there is
+ * nothing left to decide.
+ *
+ * ## The surface is MD3's search view
+ *
+ * `surface-container-high` at `corner-extra-large` under elevation 3 — which is
+ * MD3's own docked search view, and happens to be the same three decisions
+ * [MPDialog](../feedback/dialog) makes. That is not a coincidence worth hiding:
+ * a sheet that has taken the page over a scrim is one object in this system,
+ * whether it is asking a question or taking a search.
+ *
+ * ## Where the behaviour comes from
+ *
+ * Base UI's `Autocomplete` owns the list — the highlight the pointer and the
+ * arrow keys **share**, `aria-activedescendant`, Enter running the highlighted
+ * row — and its `Dialog` owns the sheet, the scrim, the focus trap and putting
+ * the focus back wherever the reader was. What is left here is the surface, the
+ * matching, and the key that opens it.
+ */
+export declare function MPCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, size, color, locale: localeProp, placeholder, emptyMessage, label, className, style }: MPCommandPaletteProps): React.JSX.Element;

package/dist/components/command-palette/MPCommandPalette.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{Autocomplete as n}from"@base-ui/react/autocomplete";import{Dialog as r}from"@base-ui/react/dialog";import{MPShortcut as l}from"../shortcut/MPShortcut.js";import{accentSlots as o}from"../../internal/accent.js";import{cssLength as s}from"../../internal/length.js";import{matchesShortcut as i,useDetectedOS as m}from"../../internal/keys.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{COMMAND as d}from"../../internal/messages/command.js";import{MPStateLayer as u}from"../../internal/StateLayer.js";import{hasContent as f,META_TEXT as h,PROSE_TEXT as x}from"../../internal/scale.js";import{FADE as g,PORTAL_LAYER as y,SCRIM as v,SHEET_MOTION as w}from"../../internal/surface.js";const b={xs:"max-w-sm",sm:"max-w-md",md:"max-w-xl",lg:"max-w-2xl",xl:"max-w-3xl"},j={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-16",xl:"h-18"},N={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},$={xs:"py-1",sm:"py-1.5",md:"py-2",lg:"py-2.5",xl:"py-3"};function k(e){return[e.label,e.group??"",...e.keywords??[]].join("\n").toLowerCase()}export function MPCommandPalette({items:C,open:S,defaultOpen:_=!1,onOpenChange:L,onSelect:M,shortcut:P="Mod+K",width:E,maxHeight:z=320,size:O="md",color:V="primary",locale:B,placeholder:F,emptyMessage:H,label:I,className:R,style:D}){const K=c(B),T=p(d,K),W=m(),[q,A]=a.useState(_),[G,J]=a.useState(""),Q=S??q,U=a.useCallback(e=>{e||J(""),void 0===S&&A(e),L?.(e)},[S,L]);a.useEffect(()=>{if(!1===P)return;const e=e=>{i(e,P,W)&&(e.preventDefault(),U(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[P,W,U]);const X=a.useMemo(()=>C.map(k),[C]),Y=a.useMemo(()=>{if(""===G)return C;const e=G.toLowerCase();return C.filter((t,a)=>X[a].includes(e))},[C,X,G]),Z=s(E),ee=s(z);return e(r.Root,{open:Q,onOpenChange:U,children:t(r.Portal,{children:[e(r.Backdrop,{className:`${y} fixed inset-0 ${g} ${v}`}),e(r.Viewport,{className:`${y} fixed inset-0 flex justify-center p-4 pt-[12vh]`,children:e(r.Popup,{"aria-label":I??T.label,"data-mp-size":O,className:["mp-command-palette relative flex w-full flex-col self-start overflow-hidden","bg-mp-surface-container-high text-mp-on-surface shadow-mp-3 rounded-mp-xl","outline-none",x[O],void 0===Z?b[O]:"",`transition-[opacity,scale] ${w}`,"motion-safe:data-starting-style:scale-95 motion-safe:data-ending-style:scale-95",R??""].filter(Boolean).join(" "),style:{...o(V),...void 0===Z?null:{maxWidth:Z},...D},children:t(n.Root,{open:!0,mode:"list",items:Y,filter:null,value:G,onValueChange:e=>J(e),itemToStringValue:e=>e.label,children:[e("div",{className:`border-mp-outline-variant flex shrink-0 items-center border-b ${N[O]}`,children:e(n.Input,{autoFocus:!0,placeholder:F??T.search,className:["mp-command-palette__input min-w-0 flex-1 bg-transparent font-[inherit]","text-inherit outline-none","placeholder:text-mp-on-surface-variant caret-(--_mp-accent)",j[O]].join(" ")})}),e(n.List,{className:"mp-command-palette__list min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:ee},children:(r,o)=>t(a.Fragment,{children:[r.group&&r.group!==Y[o-1]?.group?e("div",{role:"presentation",className:`text-mp-on-surface-variant pt-2 pb-1 font-medium ${N[O]} ${h}`,children:r.group}):null,t(n.Item,{index:o,value:r,disabled:r.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),M?.(e),U(!1))})(r),className:["mp-command-palette__row group rounded-mp-xs relative flex cursor-pointer","items-center gap-3 select-none outline-none","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",N[O],$[O]].join(" "),children:[e(u,{layer:"inset-0 rounded-[inherit] bg-current",className:"group-data-highlighted:opacity-8 group-data-disabled:opacity-0"}),f(r.icon)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:r.icon}):null,t("span",{className:"relative flex min-w-0 flex-1 flex-col",children:[e("span",{className:"truncate",children:r.label}),f(r.description)?e("span",{className:`text-mp-on-surface-variant truncate ${h}`,children:r.description}):null]}),r.shortcut?e(l,{size:"xs",keys:r.shortcut,className:"relative shrink-0"}):null]})]},`${o}:${r.value}`)}),e(n.Empty,{className:`text-mp-on-surface-variant py-6 text-center ${N[O]} ${h}`,children:H??T.empty})]})})})]})})}

package/dist/components/command-palette/index.d.ts

@@ -0,0 +1,2 @@
+export { MPCommandPalette } from './MPCommandPalette.js';
+export type { MPCommand, MPCommandPaletteProps } from './MPCommandPalette.js';

package/dist/components/command-palette/index.js

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

package/dist/components/container/MPContainer.js

@@ -1 +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.js";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=/*@__PURE__*/e.forwardRef(function({maxWidth:e="none",padded:n=!0,size:o="md",centered:t=!0,render:s,className:d,children:i,...c},l){return r({render:s,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]:"",d??""].filter(Boolean).join(" "),children:i,...c}})});
+import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{MEASURE as n,SHEET_PAD_X as o}from"../../internal/scale.js";export const MPContainer=/*@__PURE__*/e.forwardRef(function({maxWidth:e="none",padded:a=!0,size:t="md",centered:i=!0,render:d,className:m,children:s,...c},l){return r({render:d,ref:l,props:{"data-mp-size":t,className:["mp-container block w-full","box-border","none"===e?"":n[e],i?"mx-auto":"",a?o[t]:"",m??""].filter(Boolean).join(" "),children:s,...c}})});

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

@@ -40,6 +40,11 @@ export interface MPDateTimePickerProps extends MPPickerShellProps {
     /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
     hour12?: boolean;
     showSeconds?: boolean;
+    /**
+     * How far apart the rows of each clock column are. Rounded, and held between 1
+     * and the column's own span — see [MPTimePicker](./time-picker).
+     * @default 1
+     */
     hourStep?: number;
     minuteStep?: number;
     secondStep?: number;

package/dist/components/dialog/MPDialog.js

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

package/dist/components/divider/MPDivider.js

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

package/dist/components/drawer/MPDrawer.js

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

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

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

package/dist/components/fieldset/MPFieldset.js

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

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

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

package/dist/components/fieldset/index.js

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

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

@@ -52,7 +52,7 @@ export interface MPFilePickerProps extends MPStyleProps {
     description?: React.ReactNode;
     /** The message under the box, which also turns the picker over. */
     errorMessage?: React.ReactNode;
-    /** The line inside the box. @default 'Drop files here, or click to browse' */
+    /** The line inside the box. Defaults to the wording in `locale`. */
     title?: React.ReactNode;
     /** The line under it — what is accepted, how big, how many. */
     hint?: React.ReactNode;
@@ -68,8 +68,9 @@ export interface MPFilePickerProps extends MPStyleProps {
      */
     removeLabel?: (name: string) => string;
     /**
-     * Which language the remove buttons' default names are written in. Falls back
-     * to the nearest `MPLocaleProvider`, then to English.
+     * Which language the box's own words are written in — the prompt inside it and
+     * the remove buttons' names. Falls back to the nearest `MPLocaleProvider`,
+     * then to English.
      */
     locale?: string;
     /** Marks the field required. */
@@ -82,6 +83,12 @@ export interface MPFilePickerProps extends MPStyleProps {
     name?: string;
     /** The id put on the browse button. */
     id?: string;
+    /**
+     * Added to the picker's outermost element — the box around the label, the drop
+     * zone and the list of files that have been chosen.
+     */
+    className?: string;
+    style?: React.CSSProperties;
 }
 /**
  * A box you drop files on, or click to open the file dialog.

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

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