material-plus-ui 1.5.0 → 1.7.0

package/dist/components/collapsible/MPCollapsible.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Collapsible as a}from"@base-ui/react/collapsible";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronDownIcon as r}from"../../constants/icons.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as c,META_TEXT as d,PROSE_TEXT as m,SHEET_PAD_X as p,SHEET_PAD_Y as u,SHEET_TITLE as f}from"../../internal/scale.js";import{CONTAINER_SURFACE as h}from"../../internal/surface.js";const x=/*@__PURE__*/["h-(--collapsible-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" "),b={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPCollapsible=/*@__PURE__*/t.forwardRef(function({open:t,defaultOpen:g=!1,onOpenChange:v,title:j,subtitle:N,startIcon:w,action:y,trigger:k,indicator:M=!0,disabled:O=!1,padded:z=!0,variant:C="outlined",size:P="md",hiddenUntilFound:$=!1,keepMounted:B=!1,className:F,children:I,...R},T){const U=p[P],L=u[P];return n(a.Root,{ref:T,open:t,defaultOpen:g,onOpenChange:e=>v?.(e),disabled:O,"data-mp-size":P,"data-mp-variant":C,className:["mp-collapsible rounded-mp-md flex w-full flex-col overflow-hidden",h[C],"text-mp-on-surface",F??""].filter(Boolean).join(" "),...R,children:[k?e(a.Trigger,{render:k}):n("div",{className:"flex w-full items-center",children:[n(a.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",U,L,s[P],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:[e(o,{}),c(w)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:w}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[c(j)?e("span",{className:`truncate ${f[P]}`,children:j}):null,c(N)?e("span",{className:`text-mp-on-surface-variant truncate ${d}`,children:N}):null]}),M?e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(i,{icon:r,size:l[P]})}):null]}),c(y)?e("span",{className:`flex shrink-0 items-center ${U}`,children:y}):null]}),e(a.Panel,{hiddenUntilFound:$,keepMounted:B,className:x,children:e("div",{className:["min-w-0",m[P],"text-mp-on-surface-variant",z?U:"",z?k?L:b[P]:""].filter(Boolean).join(" "),children:I})})]})});
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Collapsible as a}from"@base-ui/react/collapsible";import{MPIcon as i}from"../icon/MPIcon.js";import{ChevronDownIcon as r}from"../../constants/icons.js";import{MPStateLayer as o}from"../../internal/StateLayer.js";import{CONTROL_GAP as s,CONTROL_ICON as l,hasContent as c,META_TEXT as d,PROSE_TEXT as m,SHEET_PAD_X as p,SHEET_PAD_Y as u,SHEET_TITLE as f}from"../../internal/scale.js";import{containerSurface as h}from"../../internal/elevation.js";import{useMPSize as x}from"../../internal/config.js";const b=/*@__PURE__*/["h-(--collapsible-panel-height) overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none","data-starting-style:h-0 data-ending-style:h-0"].join(" "),g={xs:"pb-2.5",sm:"pb-3",md:"pb-4",lg:"pb-5",xl:"pb-6"};export const MPCollapsible=/*@__PURE__*/t.forwardRef(function({open:t,defaultOpen:v=!1,onOpenChange:j,title:N,subtitle:w,startIcon:y,action:k,trigger:M,indicator:O=!0,disabled:z=!1,padded:C=!0,variant:P="outlined",elevation:$,size:B,hiddenUntilFound:F=!1,keepMounted:I=!1,className:R,children:T,...U},L){const S=x(B),q=p[S],A=u[S];return n(a.Root,{ref:L,open:t,defaultOpen:v,onOpenChange:e=>j?.(e),disabled:z,"data-mp-size":S,"data-mp-variant":P,className:["mp-collapsible rounded-mp-md flex w-full flex-col overflow-hidden",h(P,$),"text-mp-on-surface",R??""].filter(Boolean).join(" "),...U,children:[M?e(a.Trigger,{render:M}):n("div",{className:"flex w-full items-center",children:[n(a.Trigger,{className:["group relative flex min-w-0 flex-1 cursor-pointer items-center text-start","appearance-none border-0 bg-transparent font-[inherit] text-inherit",q,A,s[S],"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default"].join(" "),children:[e(o,{}),c(y)?e("span",{className:"text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center",children:y}):null,n("span",{className:"flex min-w-0 flex-1 flex-col",children:[c(N)?e("span",{className:`truncate ${f[S]}`,children:N}):null,c(w)?e("span",{className:`text-mp-on-surface-variant truncate ${d}`,children:w}):null]}),O?e("span",{className:["text-mp-on-surface-variant flex h-[1lh] shrink-0 items-center","transition-[rotate] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","group-data-panel-open:rotate-180"].join(" "),children:e(i,{icon:r,size:l[S]})}):null]}),c(k)?e("span",{className:`flex shrink-0 items-center ${q}`,children:k}):null]}),e(a.Panel,{hiddenUntilFound:F,keepMounted:I,className:b,children:e("div",{className:["min-w-0",m[S],"text-mp-on-surface-variant",C?q:"",C?M?A:g[S]:""].filter(Boolean).join(" "),children:T})})]})});

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPStyleProps } from '../../types.js';
+import type { MPColor, MPControlEventProps, MPSlots, MPStyleProps, MPVariant } from '../../types.js';
 /**
  * What a combobox's value may be — the same two types `MPSelect` submits, and for
  * the same reason: a form control's value is what a form sends, and every escape
@@ -18,14 +18,30 @@ export interface MPComboboxOption {
      * A `string` rather than a `ReactNode`, which is the one place this differs
      * from `MPSelect`: the label is what the filter matches against and what is
      * written into a text input, and neither of those can be done to an element.
+     * `content` is how a row draws as something richer than its own label.
      */
     label?: string;
+    /**
+     * What the row in the popup draws, when that is more than the label — a
+     * thumbnail beside the title, a glyph, a second line of detail.
+     *
+     * It replaces the label **in the popup only**. The input still receives
+     * `label` when the row is chosen, the chip still shows `label`, and the filter
+     * still matches against `label` — which is the whole reason the two are
+     * separate props rather than `label` being loosened to a `ReactNode`: a text
+     * input's value is a string, and a row that could not say what its own string
+     * is would have nothing to put there.
+     *
+     * So `label` stays required-in-spirit even with this set. It is what the row
+     * is *called*; this is what it looks like.
+     */
+    content?: React.ReactNode;
     /** Unavailable, but still listed — the option exists, it just cannot be picked. */
     disabled?: boolean;
 }
 /** One value, or an array of them, depending on `multiple`. */
 type Selection<Multiple extends boolean | undefined> = Multiple extends true ? MPComboboxValue[] : MPComboboxValue | null;
-export interface MPComboboxProps<Multiple extends boolean | undefined = false> extends MPStyleProps {
+export interface MPComboboxProps<Multiple extends boolean | undefined = false> extends MPStyleProps, MPControlEventProps<HTMLInputElement> {
     /**
      * The options, as data — the same shape `MPSelect` takes, and for the same
      * reason: what a caller has is almost always an array already.   *
@@ -51,9 +67,18 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
      * @default false
      */
     multiple?: Multiple;
-    /** The chosen value. Use with `onValueChange` for a controlled combobox. */
+    /**
+     * The chosen value. Use with `onValueChange` for a controlled combobox.
+     *
+     * **Nothing chosen is `null`.** A value with no matching entry in `items` is
+     * drawn as itself, which here is not a fallback but the point — `allowCustom`
+     * is on by default and a value the list never held is a value a reader typed.
+     * The cost is that a sentinel is indistinguishable from one: pass `null` for
+     * "not picked yet" rather than a `0` or an empty string, or the field will
+     * show it.
+     */
     value?: Selection<Multiple> | null;
-    /** The initially chosen value, for an uncontrolled combobox. */
+    /** The initially chosen value, for an uncontrolled combobox. `null` is none. */
     defaultValue?: Selection<Multiple> | null;
     onValueChange?: (value: Selection<Multiple>) => void;
     /** Called as the text in the input changes — the filter query, not the value. */
@@ -87,6 +112,39 @@ 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;
+    /**
+     * Which rows survive the query, replacing the matching this does on its own.
+     *
+     * **`null` turns the filtering off entirely**, and that is the value to reach
+     * for when the rows already arrived filtered: a list fetched per keystroke has
+     * been matched by a server that knows things this does not — synonyms,
+     * transliteration, the rule that strips a punctuation mark out of a tag before
+     * comparing it — and a second pass here can only remove rows that server
+     * decided were matches. A row the reader can see the reason for, disappearing
+     * as they type the next character, is what that looks like.
+     *
+     * A function is the middle ground: `(option, query) => …` for matching a
+     * description as well as a label, or for a fold this library's collator does
+     * not do. The row that offers what was typed is exempt either way — its label
+     * *is* the query, so a filter that hid it would be hiding the answer to the
+     * question it was asked.
+     *
+     * Left out, Base UI's own collator-backed match is used, which is what handles
+     * accents and case across eighteen locales.
+     */
+    filter?: ((option: MPComboboxOption, query: string) => boolean) | null;
+    /**
+     * How the chips inside a `multiple` field are painted.
+     *
+     * The default is `tonal`, or `outlined` while the field is in its error state.
+     * `outlined` throughout is worth knowing about: a field holding six filled
+     * chips reads as a row of buttons rather than as a value, which is the reason
+     * Material UI's own autocomplete draws them outlined.
+     */
+    chipVariant?: MPVariant;
+    /** Which accent family those chips read. Defaults to `primary`, or `error`
+     * while the field is in its error state. */
+    chipColor?: MPColor;
     /**
      * 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.
@@ -170,6 +228,14 @@ export interface MPComboboxProps<Multiple extends boolean | undefined = false> e
     id?: string;
     className?: string;
     style?: React.CSSProperties;
+    /**
+     * A class name for a part `className` cannot reach.
+     *
+     * - `item` — every row of matches. They are drawn from `options` rather than
+     *   written by the caller, and they render at the end of `<body>`, so neither
+     *   a prop nor a selector against the root reaches one.
+     */
+    classNames?: MPSlots<'item'>;
 }
 /**
  * A field you can type into and also choose from.
@@ -189,5 +255,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, 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 declare function MPCombobox<Multiple extends boolean | undefined = false>({ items, multiple, value, defaultValue, onValueChange, onInputValueChange, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, allowCustom, customLabel, clearable, emptyMessage, limit, filter, chipVariant, chipColor, placeholder, label, floatingLabel, description, errorMessage, startIcon, size: sizeProp, fullWidth, required, disabled, readOnly, name, open, defaultOpen, onOpenChange, clearLabel, openLabel, locale: localeProp, removeLabel, inputRef, id, classNames, className, style }: MPComboboxProps<Multiple>): React.JSX.Element;
 export {};

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize } from '../../types.js';
+import type { MPColor, MPSize, MPSlots } from '../../types.js';
 /** One thing the palette can do. */
 export interface MPCommand {
     /** What identifies the command. */
@@ -93,6 +93,16 @@ export interface MPCommandPaletteProps {
     label?: string;
     className?: string;
     style?: React.CSSProperties;
+    /**
+     * A class name for a part `className` cannot reach.
+     *
+     * - `backdrop` — the scrim behind the sheet.
+     * - `input` — the search field at the top of it.
+     * - `list` — the scrolling region under that.
+     * - `row` — every result in the list. They are drawn from `items`, so there is
+     *   no element of the caller's to put a class on.
+     */
+    classNames?: MPSlots<'backdrop' | 'input' | 'list' | 'row'>;
 }
 /**
  * Everything an application can do, behind one field.
@@ -129,4 +139,4 @@ export interface MPCommandPaletteProps {
  * 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;
+export declare function MPCommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, shortcut, width, maxHeight, size: sizeProp, color: colorProp, locale: localeProp, placeholder, emptyMessage, label, classNames, className, style }: MPCommandPaletteProps): React.JSX.Element;

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

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

package/dist/components/config/MPConfigProvider.d.ts

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import { useMPConfig, type MPConfigValue } from '../../internal/config.js';
+import type { MPColor, MPDensity, MPSize, MPWindowClass } from '../../types.js';
+export interface MPConfigProviderProps {
+    /**
+     * The size every control under this starts at.
+     *
+     * `md` is Material's own and is what a component takes when nobody says
+     * anything — see `MPSize`. A design that runs at `sm` sets it here once
+     * instead of at the several hundred call sites that would otherwise each have
+     * to repeat it, and each be a place it can be forgotten.
+     */
+    size?: MPSize;
+    /**
+     * The accent family every control under this reads.
+     *
+     * `primary` unless set. A product themed on `secondary` or `tertiary` is one
+     * line here rather than a prop on every button, chip, tab and slider.
+     */
+    color?: MPColor;
+    /**
+     * How tightly every component that holds things is packed under this.
+     *
+     * `0` unless set — the size that was asked for, with nothing taken out. A
+     * product that runs dense sets it here, and only the containers read it: the
+     * lists, tables and cards tighten and the controls keep the height a finger
+     * needs. See `MPDensity`.
+     */
+    density?: MPDensity;
+    /**
+     * Where the window size classes begin, in CSS pixels, for everything the
+     * library decides in **JavaScript** — `useMPWindowClass`, `MPSidebar`'s
+     * collapse, and the rungs `maxWidth` resolves to.
+     *
+     * Partial and merged over MD3's own, so `{ medium: 700 }` moves one boundary
+     * and leaves the other three. `compact` is always nought whatever it is given:
+     * a first class whose floor is above zero leaves a band of windows in no class
+     * at all.
+     *
+     * ## This does not move the stylesheet
+     *
+     * It cannot. A media query is resolved before any of this runs and cannot name
+     * a custom property, so `MPGrid`'s reflow, `MPShow`'s hiding and every other
+     * width-driven rule are decided by the CSS the build produced. This prop is
+     * how you tell the JavaScript side what you already did on the CSS side — it
+     * is not the source, and a page that sets it alone has moved half its layout.
+     *
+     * The CSS side is a project that runs its own Tailwind, redeclaring both
+     * halves of the boundary after importing the library:
+     *
+     * ```css
+     * @custom-variant mp-medium (@media (width >= 700px));
+     * @custom-variant mp-below-medium (@media (width < 700px));
+     * ```
+     *
+     * A project on the compiled `material-plus-ui/styles.css` cannot move the
+     * stylesheet at all, and should not set this either. See
+     * [Breakpoints](../../design/breakpoints).
+     */
+    breakpoints?: Partial<Record<MPWindowClass, number>>;
+    /**
+     * The language the components speak — the same value `MPLocaleProvider` takes,
+     * carried here so an application needs one provider rather than two.
+     */
+    locale?: string;
+    /**
+     * Which way the text runs, for everything under it.
+     *
+     * This is the one prop here that reaches **two** systems, because the
+     * direction is answered in two places and they have to agree:
+     *
+     * - **The stylesheet** reads the DOM's own `dir`. Every padding, margin and
+     *   corner in this library is already a logical property, so the CSS half of
+     *   RTL has always worked from a `dir` attribute anywhere above a component.
+     * - **Base UI** reads a React context, and there was nothing putting one
+     *   there. Seven of its parts consult it — the slider, menu, select, combobox,
+     *   navigation menu, OTP field and scroll area — and without it they were all
+     *   being told the page ran left to right. The visible one was the slider,
+     *   whose handle sat exactly one handle-width off the value it was reporting,
+     *   at every value, and hung off the end of the track at the extremes.
+     *
+     * Given here, both are set: the attribute goes on a `display: contents`
+     * element, which takes part in no layout at all, and the same value goes into
+     * Base UI's own `DirectionProvider`. Left out, nothing is rendered and nothing
+     * is claimed — a page that sets `dir` on `<html>` and never mounts this still
+     * gets the CSS half and not the other one.
+     */
+    dir?: 'ltr' | 'rtl';
+    children?: React.ReactNode;
+}
+/**
+ * The prop defaults for everything under it.
+ *
+ * Wrap the application. Every component in this library still takes `size` and
+ * `color` of its own — and every container takes `density` — and this is where
+ * those props get their default, so a design that runs at `size="sm"` is one
+ * decision rather than one per call site.
+ *
+ * ```tsx
+ * <MPConfigProvider size="sm" color="tertiary" locale="ko">
+ *   <App />
+ * </MPConfigProvider>
+ * ```
+ *
+ * ## Why it carries these three and not a theme
+ *
+ * Everything a theme normally holds is already a CSS custom property here — the
+ * colour roles, the type scale, the corners, the motion durations. Those reach a
+ * component through the cascade, which means a *section* of a page can differ
+ * from the rest of it without a provider at all and without a re-render. A JS
+ * theme object would be a second place the same values live.
+ *
+ * `size` is the one thing that cannot travel that way. It resolves to literal
+ * Tailwind class strings — `h-14`, `text-mp-body-large` — because Tailwind finds
+ * classes by scanning source text and an interpolated `h-${n}` generates no rule
+ * at all. A value that cannot be a custom property and has to reach every call
+ * site is exactly what context is for. `color` and `density` join it because the
+ * three are the axes a whole product is usually set on together — and because
+ * `density` resolves to class strings for the same reason `size` does.
+ *
+ * ## Why `variant` is not here
+ *
+ * Because there is no such thing as *the* default variant. `MPAccordion` starts
+ * `outlined`, `MPAlert` `tonal`, `MPBadge` `filled`, `MPButton` `filled`,
+ * `MPChip` `outlined` — five answers to five different questions about emphasis.
+ * One global value would overwrite all five with an arbitrary one, and the
+ * component that looked wrong afterwards would give no clue why.
+ *
+ * ## What it does not override
+ *
+ * A component that had chosen its own default keeps it. `MPBadge` is `error`
+ * because a badge is usually a count of something that wants attention;
+ * `MPTooltip` is `sm` because a tooltip at a control's height is a slab;
+ * `MPDialog`, `MPPill` and `MPShortcut` are `secondary`. Those are answers
+ * rather than unfilled defaults, so the configuration passes them by — set the
+ * prop to move them.
+ *
+ * ## Nesting
+ *
+ * Providers nest and **merge**, nearest wins per field. A section that only
+ * changes the accent keeps the size the provider above it set:
+ *
+ * ```tsx
+ * <MPConfigProvider size="sm">
+ *   <App />
+ *   <MPConfigProvider color="error">
+ *     <DangerZone /> // size="sm" still, color="error" now
+ *   </MPConfigProvider>
+ * </MPConfigProvider>
+ * ```
+ */
+export declare function MPConfigProvider({ size, color, density, breakpoints, locale, dir, children }: MPConfigProviderProps): React.JSX.Element;
+/**
+ * The configuration in force at this point in the tree.
+ *
+ * Exported for the reason `useMPLocale` is: an application that has told this
+ * library its size and its accent should not have to tell itself the same thing
+ * twice. A wrapper component of your own around one of these can resolve a prop
+ * the way the component underneath will.
+ *
+ * The fields are optional, and `undefined` means "nobody set one" rather than
+ * `md` or `primary` — the library's own defaults are applied by the components,
+ * not stored here, so that a future change of default is one place.
+ */
+export { useMPConfig };
+export type { MPConfigValue };

package/dist/components/config/MPConfigProvider.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as r}from"react/jsx-runtime";import*as i from"react";import{DirectionProvider as o}from"@base-ui/react/direction-provider";import{MPConfigContext as e,useMPConfig as n}from"../../internal/config.js";import{MPLocaleContext as t,useMPLocale as s}from"../../internal/locale.js";import{WINDOW_CLASSES as a}from"../../internal/window-class.js";export function MPConfigProvider({size:c,color:d,density:l,breakpoints:p,locale:m,dir:f,children:v}){const u=n(),b=s(),j=a.map(r=>p?.[r]??u.breakpoints?.[r]??"").join(","),y=i.useMemo(()=>({size:c??u.size,color:d??u.color,density:l??u.density,breakpoints:p||u.breakpoints?{...u.breakpoints,...p}:void 0}),[c,d,l,u.size,u.color,u.density,j]),h=m??b,k=r(e.Provider,{value:y,children:r(t.Provider,{value:h,children:v})});return f?r(o,{direction:f,children:r("div",{dir:f,style:{display:"contents"},children:k})}):k}export{n as useMPConfig};

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

@@ -0,0 +1,2 @@
+export { MPConfigProvider, useMPConfig } from './MPConfigProvider.js';
+export type { MPConfigProviderProps, MPConfigValue } from './MPConfigProvider.js';

package/dist/components/config/index.js

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