material-plus-ui 1.5.0 → 1.6.0

package/dist/components/chat-bubble/MPChatBubble.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as l,ClockIcon as i,ErrorIcon as t,LinkIcon as s}from"../../constants/icons.js";import{accentSlots as o}from"../../internal/accent.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{linkRel as d,safeHref as p}from"../../internal/link.js";import{CHAT as u}from"../../internal/messages/chat.js";import{hasContent as f,META_TEXT as h,PROSE_TEXT as b}from"../../internal/scale.js";import{VISUALLY_HIDDEN as x}from"../../internal/visually-hidden.js";const v={xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},g={start:"[border-start-start-radius:var(--mp-sys-shape-corner-extra-small)]",end:"[border-start-end-radius:var(--mp-sys-shape-corner-extra-small)]"},y={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline-variant border bg-transparent text-mp-on-surface",text:"bg-mp-surface-container-low text-mp-on-surface"};function N(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-full",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const w={sending:e(a,{icon:i,size:"1.15em"}),sent:e(a,{icon:l,size:"1.15em"}),delivered:e("span",{className:"block size-[1.15em]",children:e(N,{})}),read:e("span",{className:"block size-[1.15em]",children:e(N,{})}),failed:e(a,{icon:t,size:"1.15em"})},k={sending:"text-mp-on-surface-variant",sent:"text-mp-on-surface-variant",delivered:"text-mp-on-surface-variant",read:"text-(--_mp-accent)",failed:"text-mp-error"},j=/*@__PURE__*/["rounded-mp-sm block overflow-hidden border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","transition-[background-color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),_=/*@__PURE__*/["shrink-0 opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4) ease-mp-standard","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const MPChatBubble=/*@__PURE__*/r.forwardRef(function({side:r="start",name:a,time:l,avatar:i,status:t,statusLabel:s,typing:d=!1,media:p,preview:N,actions:j,locale:L,variant:B="tonal",size:$="md",color:M="primary",className:P,style:W,children:I,...R},T){const q=c(L),A=m(u,q),D="end"===r,E=f(a)||f(l),F=d||f(I)||Boolean(N);return n("div",{ref:T,"data-mp-size":$,"data-mp-variant":B,"data-mp-side":r,className:["mp-chat-bubble group/bubble flex w-full items-start gap-2",D?"flex-row-reverse":"",P??""].filter(Boolean).join(" "),style:{...o(M),...W},...R,children:[f(i)?e("div",{className:"shrink-0",children:i}):null,n("div",{className:["flex min-w-0 max-w-[min(100%,32rem)] flex-col gap-1",D?"items-end":"items-start"].join(" "),children:[E?n("div",{className:`flex items-baseline gap-2 ${h}`,children:[f(a)?e("span",{className:"font-medium",children:a}):null,f(l)?e("span",{className:"text-mp-on-surface-variant",children:l}):null]}):null,n("div",{className:"flex min-w-0 items-center gap-1 "+(D?"flex-row-reverse":""),children:[n("div",{className:["mp-chat-bubble__sheet rounded-mp-xl flex min-w-0 flex-col overflow-hidden","box-border",g[r],y[B],b[$]].join(" "),children:[f(p)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:p}):null,F?n("div",{className:`flex min-w-0 flex-col gap-2 ${v[$]}`,children:[d?e(z,{label:A.typing}):f(I)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:I}):null,N?e(C,{preview:N}):null]}):null]}),f(j)?e("div",{className:_,children:j}):null]}),t?n("div",{className:`flex items-center gap-1 ${h} ${k[t]}`,children:[w[t],e("span",{className:x,children:s??A[t]})]}):null]})]})});function z({label:r}){return n("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(n=>e("span",{"aria-hidden":"true",className:"mp-chat-typing size-[0.45em] rounded-full bg-current",style:{"--_mp-index":n}},n)),e("span",{className:x,children:r})]})}function C({preview:r}){const{url:l,title:i,description:t,image:o,site:c,newTab:m=!1}=r,u=m?"_blank":void 0;return n("a",{href:p(l),target:u,rel:d(u,void 0),className:j,children:[o?e("img",{src:o,alt:"",loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",width:640,height:112,className:"block h-28 w-full object-cover"}):null,n("div",{className:"flex flex-col gap-0.5 p-2",children:[f(c)?n("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70",children:[e(a,{icon:s,size:"1em"}),e("span",{className:"truncate",children:c})]}):null,f(i)?e("span",{className:"font-medium",children:i}):null,f(t)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:t}):null]})]})}
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{CheckIcon as i,ClockIcon as l,ErrorIcon as t,LinkIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{useMPLocale as c,useMPMessages as m}from"../../internal/locale.js";import{linkRel as d,safeHref as p}from"../../internal/link.js";import{CHAT as u}from"../../internal/messages/chat.js";import{hasContent as f,META_TEXT as h,PROSE_TEXT as b}from"../../internal/scale.js";import{VISUALLY_HIDDEN as x}from"../../internal/visually-hidden.js";import{useMPColor as v,useMPSize as g}from"../../internal/config.js";const y={xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},N={start:"[border-start-start-radius:var(--mp-sys-shape-corner-extra-small)]",end:"[border-start-end-radius:var(--mp-sys-shape-corner-extra-small)]"},w={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface",outlined:"border-mp-outline-variant border bg-transparent text-mp-on-surface",text:"bg-mp-surface-container-low text-mp-on-surface"};function k(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-full",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const j={sending:e(a,{icon:l,size:"1.15em"}),sent:e(a,{icon:i,size:"1.15em"}),delivered:e("span",{className:"block size-[1.15em]",children:e(k,{})}),read:e("span",{className:"block size-[1.15em]",children:e(k,{})}),failed:e(a,{icon:t,size:"1.15em"})},_={sending:"text-mp-on-surface-variant",sent:"text-mp-on-surface-variant",delivered:"text-mp-on-surface-variant",read:"text-(--_mp-accent)",failed:"text-mp-error"},z=/*@__PURE__*/["rounded-mp-sm block overflow-hidden border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","transition-[background-color] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),C=/*@__PURE__*/["shrink-0 opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4) ease-mp-standard","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const MPChatBubble=/*@__PURE__*/r.forwardRef(function({side:r="start",name:a,time:i,avatar:l,status:t,statusLabel:o,typing:d=!1,media:p,preview:k,actions:z,locale:$,variant:M="tonal",size:P,color:W,className:I,style:R,children:T,...q},A){const D=g(P),E=v(W),F=c($),G=m(u,F),H="end"===r,J=f(a)||f(i),K=d||f(T)||Boolean(k);return n("div",{ref:A,"data-mp-size":D,"data-mp-variant":M,"data-mp-side":r,className:["mp-chat-bubble group/bubble flex w-full items-start gap-2",H?"flex-row-reverse":"",I??""].filter(Boolean).join(" "),style:{...s(E),...R},...q,children:[f(l)?e("div",{className:"shrink-0",children:l}):null,n("div",{className:["flex min-w-0 max-w-[min(100%,32rem)] flex-col gap-1",H?"items-end":"items-start"].join(" "),children:[J?n("div",{className:`flex items-baseline gap-2 ${h}`,children:[f(a)?e("span",{className:"font-medium",children:a}):null,f(i)?e("span",{className:"text-mp-on-surface-variant",children:i}):null]}):null,n("div",{className:"flex min-w-0 items-center gap-1 "+(H?"flex-row-reverse":""),children:[n("div",{className:["mp-chat-bubble__sheet rounded-mp-xl flex min-w-0 flex-col overflow-hidden","box-border",N[r],w[M],b[D]].join(" "),children:[f(p)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:p}):null,K?n("div",{className:`flex min-w-0 flex-col gap-2 ${y[D]}`,children:[d?e(L,{label:G.typing}):f(T)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:T}):null,k?e(B,{preview:k}):null]}):null]}),f(z)?e("div",{className:C,children:z}):null]}),t?n("div",{className:`flex items-center gap-1 ${h} ${_[t]}`,children:[j[t],e("span",{className:x,children:o??G[t]})]}):null]})]})});function L({label:r}){return n("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(n=>e("span",{"aria-hidden":"true",className:"mp-chat-typing size-[0.45em] rounded-full bg-current",style:{"--_mp-index":n}},n)),e("span",{className:x,children:r})]})}function B({preview:r}){const{url:i,title:l,description:t,image:s,site:c,newTab:m=!1}=r,u=m?"_blank":void 0;return n("a",{href:p(i),target:u,rel:d(u,void 0),className:z,children:[s?e("img",{src:s,alt:"",loading:"lazy",decoding:"async",referrerPolicy:"no-referrer",width:640,height:112,className:"block h-28 w-full object-cover"}):null,n("div",{className:"flex flex-col gap-0.5 p-2",children:[f(c)?n("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70",children:[e(a,{icon:o,size:"1em"}),e("span",{className:"truncate",children:c})]}):null,f(l)?e("span",{className:"font-medium",children:l}):null,f(t)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:t}):null]})]})}

package/dist/components/checkbox/MPCheckbox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as l}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";const h={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=/*@__PURE__*/r.forwardRef(function({checked:u,defaultChecked:f,onCheckedChange:b,indeterminate:x=!1,label:g,description:y,errorMessage:k,size:j="md",color:z="primary",required:N=!1,disabled:_=!1,readOnly:v=!1,name:C,value:M,id:I,className:R,style:q},w){const L=p(k),O=L?"error":z,P=h[j],S=r.useId(),B=I??S;return e(n.Root,{className:["mp-checkbox inline-block align-top",R??""].filter(Boolean).join(" "),disabled:_,invalid:L,"data-mp-size":j,style:{...c(O),...q},children:a("div",{className:["flex items-start gap-3",m[j]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(t.Root,{ref:w,id:B,name:C,value:M,checked:u,defaultChecked:f,indeterminate:x,required:N,disabled:_,readOnly:v,onCheckedChange:e=>b?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",P.box,_?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[v?"cursor-default":"cursor-pointer",L?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_mp-on-accent)"].join(" ")].join(" "),children:[_?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",P.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(t.Indicator,{className:["flex items-center justify-center","transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-60 data-starting-style:opacity-0","data-ending-style:scale-60 data-ending-style:opacity-0"].join(" "),children:e(o,{icon:x?s:i,size:P.glyph,strokeWidth:3})})]})}),p(g)||p(y)||L?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(g)?a(n.Label,{htmlFor:B,className:["leading-[1.4]",_?"text-mp-on-surface/38 cursor-default":v?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[g,N?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{description:y,errorMessage:k})]}):null]})})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Checkbox as t}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{MPIcon as o}from"../icon/MPIcon.js";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{accentSlots as c}from"../../internal/accent.js";import{MPStateLayer as l}from"../../internal/StateLayer.js";import{MPSupportingText as d}from"../../internal/SupportingText.js";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";import{useMPColor as h,useMPSize as u}from"../../internal/config.js";const f={xs:{box:"size-3.5",halo:"size-8",glyph:12},sm:{box:"size-4",halo:"size-9",glyph:14},md:{box:"size-[18px]",halo:"size-10",glyph:16},lg:{box:"size-5",halo:"size-11",glyph:18},xl:{box:"size-[22px]",halo:"size-12",glyph:20}};export const MPCheckbox=/*@__PURE__*/r.forwardRef(function({checked:b,defaultChecked:g,onCheckedChange:x,indeterminate:y=!1,label:k,description:j,errorMessage:z,size:N,color:_,required:v=!1,disabled:C=!1,readOnly:M=!1,name:I,value:R,id:q,className:w,style:L},O){const P=u(N),S=h(_),B=p(z),F=B?"error":S,T=f[P],W=r.useId(),A=q??W;return e(n.Root,{className:["mp-checkbox inline-block align-top",w??""].filter(Boolean).join(" "),disabled:C,invalid:B,"data-mp-size":P,style:{...c(F),...L},children:a("div",{className:["flex items-start gap-3",m[P]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(t.Root,{ref:O,id:A,name:I,value:R,checked:b,defaultChecked:g,indeterminate:y,required:v,disabled:C,readOnly:M,onCheckedChange:e=>x?.(e),className:["mp-checkbox__tick group relative inline-flex shrink-0 items-center","box-border justify-center border-2 p-0","rounded-[calc(var(--mp-sys-shape-corner-extra-small)/2)]","appearance-none bg-transparent font-[inherit] outline-none","transition-[background-color,border-color]","duration-(--mp-sys-motion-duration-short4)",T.box,C?["border-mp-on-surface/38 cursor-default","data-checked:bg-mp-on-surface/38 data-checked:border-transparent","data-indeterminate:bg-mp-on-surface/38 data-indeterminate:border-transparent"].join(" "):[M?"cursor-default":"cursor-pointer",B?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-transparent data-checked:bg-(--_mp-accent)","data-checked:text-(--_mp-on-accent)","data-indeterminate:border-transparent data-indeterminate:bg-(--_mp-accent)","data-indeterminate:text-(--_mp-on-accent)"].join(" ")].join(" "),children:[C?null:e(l,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",T.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)","group-data-indeterminate:bg-(--_mp-accent)"].join(" ")}),e(t.Indicator,{className:["flex items-center justify-center","transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-60 data-starting-style:opacity-0","data-ending-style:scale-60 data-ending-style:opacity-0"].join(" "),children:e(o,{icon:y?s:i,size:T.glyph,strokeWidth:3})})]})}),p(k)||p(j)||B?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(k)?a(n.Label,{htmlFor:A,className:["leading-[1.4]",C?"text-mp-on-surface/38 cursor-default":M?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[k,v?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(d,{description:j,errorMessage:z})]}):null]})})});

package/dist/components/chip/MPChip.d.ts

@@ -61,14 +61,29 @@ export interface MPChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>
 /**
  * A compact token: a tag, a filter, a status, an entity plucked out of a list.
  *
- * The shell is always a `<span>`. What changes is what is inside it: a plain run
- * of content, or — when `onClick` is given — a real `<button>` wrapping that
- * content, plus a second button for `onDelete`. Both are reachable by keyboard,
- * and neither is nested inside the other.
+ * A chip that does nothing is a `<span>`. A chip with an `onClick` is a real
+ * `<button>` — the shell itself, so there is one element, one tab stop, and one
+ * thing for a parent to hang `aria-expanded` on.
+ *
+ * The exception is `onDelete`, which is a second control and cannot be nested
+ * inside the first. A chip with both goes back to a `<span>` shell holding two
+ * sibling buttons: one wrapping the label, one drawing the ×. Both are reachable
+ * by keyboard and neither is inside the other.
  *
  * An inert `<span>` carrying a click handler is the single most common way a
  * component library loses its keyboard users, and a `<button>` inside a
  * `<button>` is the most common way one invents a chip that Chrome silently
- * rewrites. This shape avoids both.
+ * rewrites. Both shapes avoid both.
+ *
+ * ## Why the shell is the button, and not always a span
+ *
+ * Because of what wraps a chip. Base UI's `render` — which is how a chip becomes
+ * an [MPMenu](./menu)'s trigger, a popover's, a tooltip's — merges its handlers
+ * and its ARIA onto the element this component *returns*. With a `<span>` there
+ * that meant `aria-haspopup`, `aria-expanded`, `id` and `tabindex` landing on
+ * something that was not focusable, a second tab stop on the label button
+ * underneath carrying none of it, and Base UI logging that it expected a native
+ * `<button>`. One element is the fix, and it is also simply less markup for the
+ * common case.
  */
-export declare const MPChip: React.ForwardRefExoticComponent<MPChipProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MPChip: React.ForwardRefExoticComponent<MPChipProps & React.RefAttributes<HTMLElement>>;

package/dist/components/chip/MPChip.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import*as o from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{CloseIcon as r}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{hasContent as m}from"../../internal/scale.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";const d={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},u={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-label-large",xl:"text-mp-title-medium"},f={xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},x={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-2.5"},b={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},g={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant bg-transparent"},h={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-mp-outline bg-(--_mp-accent-container) text-(--_mp-on-accent-container) border",text:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"},v={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 text-mp-on-surface/38 border bg-transparent",text:"bg-transparent text-mp-on-surface/38"},y=/*@__PURE__*/["ms-0.5 -me-1 inline-flex shrink-0 cursor-pointer items-center justify-center","rounded-mp-full size-[1.35em] opacity-70","transition-opacity duration-(--mp-sys-motion-duration-short4)","hover:opacity-100 focus-visible:opacity-100","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:cursor-default disabled:opacity-38"].join(" "),_=/*@__PURE__*/["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch rounded-[inherit] font-[inherit] text-[inherit]","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(" ");export const MPChip=/*@__PURE__*/o.forwardRef(function({variant:o="outlined",size:j="md",color:w="primary",startIcon:k,endIcon:N,count:z,onDelete:C,deleteLabel:I,locale:$,selected:B,disabled:L=!1,className:M,style:P,children:D,onClick:F,...R},S){const q=s($),A=l(c,q),E=Boolean(F)&&!L,G=["mp-chip relative inline-flex max-w-full shrink-0 items-center","box-border overflow-hidden align-middle leading-none whitespace-nowrap select-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",d[j],u[j],x[j],b[j],L?v[o]:B?h[o]:g[o],E?"ps-0":f[j],C?"pe-2":E?"pe-0":"",M??""].filter(Boolean).join(" "),H=n(t,{children:[k,m(D)?e("span",{className:"min-w-0 truncate",children:D}):null,N,m(z)?e("span",{className:["rounded-mp-full ms-0.5 inline-flex shrink-0 items-center justify-center px-1.5 py-px","text-[0.85em] leading-none font-medium tabular-nums","filled"===o?"bg-(--_mp-on-accent)/20 text-(--_mp-on-accent)":"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"].join(" "),children:z}):null]});return n("span",{ref:S,"data-mp-size":j,"data-mp-variant":o,"data-selected":B||void 0,className:G,style:{...i(w),...P},"aria-disabled":!(!L||E)||void 0,...R,children:[E?n("button",{type:"button","aria-pressed":B,className:`${_} ${x[j]} ${f[j]}`,onClick:F,children:[e(p,{}),H]}):H,C?e("button",{type:"button","aria-label":I??A.remove,disabled:L,className:y,onClick:C,children:e(a,{icon:r,size:"1em"})}):null]})});
+import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{hasContent as m}from"../../internal/scale.js";import{MPStateLayer as p}from"../../internal/StateLayer.js";import{useMPColor as d,useMPSize as u}from"../../internal/config.js";const f={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},b={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-label-large",lg:"text-mp-label-large",xl:"text-mp-title-medium"},x={xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},g={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-2.5"},h={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},v={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-mp-surface-container-low text-mp-on-surface-variant",outlined:"border-mp-outline text-mp-on-surface-variant border bg-transparent",text:"text-mp-on-surface-variant bg-transparent"},y={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-mp-outline bg-(--_mp-accent-container) text-(--_mp-on-accent-container) border",text:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"},j={filled:"bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"bg-mp-on-surface/12 text-mp-on-surface/38 shadow-none",outlined:"border-mp-on-surface/12 text-mp-on-surface/38 border bg-transparent",text:"bg-transparent text-mp-on-surface/38"},_=/*@__PURE__*/["ms-0.5 -me-1 inline-flex shrink-0 cursor-pointer items-center justify-center","rounded-mp-full size-[1.35em] opacity-70","transition-opacity duration-(--mp-sys-motion-duration-short4)","hover:opacity-100 focus-visible:opacity-100","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none","disabled:cursor-default disabled:opacity-38"].join(" "),w=/*@__PURE__*/["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch rounded-[inherit] font-[inherit] text-[inherit]","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(" "),k=/*@__PURE__*/["group cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" ");export const MPChip=/*@__PURE__*/o.forwardRef(function({variant:o="outlined",size:N,color:C,startIcon:z,endIcon:B,count:I,onDelete:$,deleteLabel:L,locale:M,selected:P,disabled:D=!1,className:F,style:R,children:S,onClick:q,...A},E){const G=u(N),H=d(C),J=s(M),K=l(c,J),O=Boolean(q)&&!D,Q=O&&Boolean($),T=O&&!$,U=["mp-chip relative inline-flex max-w-full shrink-0 items-center","box-border overflow-hidden align-middle leading-none whitespace-nowrap select-none","transition-[background-color,border-color,box-shadow,color]","duration-(--mp-sys-motion-duration-short4)",f[G],b[G],g[G],h[G],D?j[o]:P?y[o]:v[o],Q?"ps-0":x[G],$?"pe-2":"",T?k:"",F??""].filter(Boolean).join(" "),V=t(n,{children:[z,m(S)?e("span",{className:"min-w-0 truncate",children:S}):null,B,m(I)?e("span",{className:["rounded-mp-full ms-0.5 inline-flex shrink-0 items-center justify-center px-1.5 py-px","text-[0.85em] leading-none font-medium tabular-nums","filled"===o?"bg-(--_mp-on-accent)/20 text-(--_mp-on-accent)":"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"].join(" "),children:I}):null]}),W={"data-mp-size":G,"data-mp-variant":o,"data-selected":P||void 0,className:U,style:{...r(H),...R},...A};return T?t("button",{ref:E,type:"button","aria-pressed":P,onClick:q,...W,children:[e(p,{}),V]}):t("span",{ref:E,"aria-disabled":!(!D||O)||void 0,...W,children:[Q?t("button",{type:"button","aria-pressed":P,className:`${w} ${g[G]} ${x[G]}`,onClick:q,children:[e(p,{}),V]}):V,$?e("button",{type:"button","aria-label":L??K.remove,disabled:D,className:_,onClick:$,children:e(a,{icon:i,size:"1em"})}):null]})});

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{CONTAINER_SURFACE as h}from"../../internal/surface.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:j=!1,onOpenChange:v,title:N,subtitle:w,startIcon:y,action:k,trigger:M,indicator:O=!0,disabled:z=!1,padded:C=!0,variant:P="outlined",size:$,hiddenUntilFound:B=!1,keepMounted:F=!1,className:I,children:R,...T},U){const L=x($),S=p[L],q=u[L];return n(a.Root,{ref:U,open:t,defaultOpen:j,onOpenChange:e=>v?.(e),disabled:z,"data-mp-size":L,"data-mp-variant":P,className:["mp-collapsible rounded-mp-md flex w-full flex-col overflow-hidden",h[P],"text-mp-on-surface",I??""].filter(Boolean).join(" "),...T,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",S,q,s[L],"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[L]}`,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[L]})}):null]}),c(k)?e("span",{className:`flex shrink-0 items-center ${S}`,children:k}):null]}),e(a.Panel,{hiddenUntilFound:B,keepMounted:F,className:b,children:e("div",{className:["min-w-0",m[L],"text-mp-on-surface-variant",C?S:"",C?M?q:g[L]:""].filter(Boolean).join(" "),children:R})})]})});

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, 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.   *
@@ -87,6 +103,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.
@@ -189,5 +238,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, 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 c,CloseIcon as m}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{FADE as N,PORTAL_LAYER as L}from"../../internal/surface.js";import{useMPSize as M}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"},k={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:V,multiple:O,value:P,defaultValue:$,onValueChange:q,onInputValueChange:F,onKeyDown:T,onKeyUp:A,onFocus:D,onBlur:K,onClick:R,onDoubleClick:_,onContextMenu:B,allowCustom:E=!0,customLabel:U,clearable:G=!1,emptyMessage:H,limit:W,filter:J,chipVariant:Q,chipColor:X,placeholder:Y,label:Z,floatingLabel:ee=!0,description:ae,errorMessage:le,startIcon:ne,size:oe,fullWidth:te=!1,required:ie=!1,disabled:re=!1,readOnly:se=!1,name:ce,open:me,defaultOpen:ue,onOpenChange:pe,clearLabel:de,openLabel:he,locale:fe,removeLabel:be,inputRef:ge,id:xe,className:ve,style:ye}){const je=M(oe),Ce=f(fe),we=b(x,Ce),Ne=b(g,Ce),Le=w(le),Me=!0===O,Se=S[je],Ie=l.useId(),ke=xe??Ie,ze=l.useMemo(()=>V.map(e=>({value:e.value,label:e.label??String(e.value),content:e.content,disabled:e.disabled})),[V]),[Ve,Oe]=l.useState(()=>z($)),Pe=void 0===P?Ve:z(P),[$e,qe]=l.useState(""),{shrunk:Fe,focusProps:Te}=d({floating:ee&&w(Z),filled:Pe.length>0||""!==$e,pinned:!!ne}),Ae=l.useMemo(()=>new Map(ze.map(e=>[e.value,e])),[ze]),De=l.useMemo(()=>{const e=new Set;for(const a of ze)e.add(a.label.toLocaleLowerCase()),e.add(String(a.value).toLocaleLowerCase());return e},[ze]),Ke=l.useCallback(e=>Ae.get(e)??{value:e,label:String(e),custom:!0},[Ae]),Re=$e.trim(),_e=Re.toLocaleLowerCase(),Be=""===Re||De.has(_e)||Pe.some(e=>String(e).toLocaleLowerCase()===_e),Ee=!E||se||re||Be?null:Re,Ue=l.useMemo(()=>null==J?J:(e,a)=>!0===e.custom||J(e,a),[J]),Ge=l.useMemo(()=>null===Ee?ze:[...ze,{value:Ee,label:Ee,custom:!0}],[ze,Ee]),He=Me?Pe.map(Ke):Pe.length>0?Ke(Pe[0]):null;const We=/*@__PURE__*/["min-w-0 flex-1 self-stretch bg-transparent font-[inherit] text-inherit outline-none","placeholder:text-mp-on-surface-variant",re?"text-mp-on-surface/38 cursor-default":"text-mp-on-surface caret-mp-primary"].join(" "),Je=/*@__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(" "),Qe=a=>e(n.Input,{ref:ge,id:ke,placeholder:Fe?Y:void 0,onKeyDown:T,onKeyUp:A,onFocus:D,onBlur:K,onClick:R,onDoubleClick:_,onContextMenu:B,className:Me?`${We} min-w-16 ${a?"ms-1.5":""}`:We});return a(o.Root,{disabled:re,invalid:Le,"data-mp-size":je,className:["mp-combobox group flex-col align-top",te?"flex w-full":"inline-flex w-fit",ve??""].filter(Boolean).join(" "),style:ye,...Te,children:[a(n.Root,{name:ce,items:Ge,multiple:Me,value:He,onValueChange:e=>{!function(e){void 0===P&&Oe(e),q?.(Me?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{qe(e),F?.(e)},open:me,defaultOpen:ue,onOpenChange:e=>pe?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:W,filter:Ue,disabled:re,readOnly:se,required:ie,children:[a("div",{className:"relative w-full",children:[a(n.InputGroup,{className:["relative flex w-full items-center gap-2",Se.padding,Me?I[je]:Se.height,C[je],re?"cursor-default":"cursor-text"].join(" "),children:[ne?e("span",{className:["flex shrink-0 items-center",re?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:ne}):null,Me?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:Q??(Le?"outlined":"tonal"),color:X??(Le?"error":"primary"),size:k[je],disabled:re,endIcon:se||re?null:e(n.ChipRemove,{"aria-label":be?be(a.label):h(we.removeNamed,{label:a.label}),className:"flex cursor-pointer items-center opacity-70 hover:opacity-100",children:e(i,{icon:m,size:16})})}),children:a.label},`${l}:${String(a.value)}`)),Qe(o.length>0)]})})}):Qe(!1),G&&!se?a(n.Clear,{"aria-label":de??we.clear,className:Je,children:[e(v,{}),e(i,{icon:m,size:j[je]})]}):null,a(n.Trigger,{"aria-label":he??we.open,className:Je,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:c,size:j[je]})})]})]}),e(p,{label:Z,required:ie,notched:Fe}),w(Z)?e(u,{size:je,label:Z,required:ie,htmlFor:ke,shrunk:Fe}):null]}),e(n.Portal,{children:e(n.Positioner,{className:L,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[je],N].join(" "),children:[e(n.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:H??Ne.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","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,{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?U?U(l.label):h(Ne.add,{label:l.label}):l.content??l.label})]},`${o}:${l.custom?"custom:":""}${String(l.value)}`)})]})})})]}),e(y,{description:ae,errorMessage:le,className:Se.padding})]})}

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

@@ -129,4 +129,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, 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 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 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"},$={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-16",xl:"h-18"},k={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:O,maxHeight:V=320,size:B,color:F,locale:H,placeholder:I,emptyMessage:R,label:D,className:K,style:T}){const W=j(B),q=b(F),A=c(H),G=p(d,A),J=m(),[Q,U]=a.useState(M),[X,Y]=a.useState(""),Z=L??Q,ee=a.useCallback(e=>{e||Y(""),void 0===L&&U(e),P?.(e)},[L,P]);a.useEffect(()=>{if(!1===z)return;const e=e=>{i(e,z,J)&&(e.preventDefault(),ee(!0))};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[z,J,ee]);const te=a.useMemo(()=>_.map(S),[_]),ae=a.useMemo(()=>{if(""===X)return _;const e=X.toLowerCase();return _.filter((t,a)=>te[a].includes(e))},[_,te,X]),ne=s(O),re=s(V);return e(r.Root,{open:Z,onOpenChange:ee,children:t(r.Portal,{children:[e(r.Backdrop,{className:`${v} fixed inset-0 ${g} ${y}`}),e(r.Viewport,{className:`${v} fixed inset-0 flex justify-center p-4 pt-[12vh]`,children:e(r.Popup,{"aria-label":D??G.label,"data-mp-size":W,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[W],void 0===ne?N[W]:"",`transition-[opacity,scale] ${w}`,"motion-safe:data-starting-style:scale-95 motion-safe:data-ending-style:scale-95",K??""].filter(Boolean).join(" "),style:{...o(q),...void 0===ne?null:{maxWidth:ne},...T},children:t(n.Root,{open:!0,mode:"list",items:ae,filter:null,value:X,onValueChange:e=>Y(e),itemToStringValue:e=>e.label,children:[e("div",{className:`border-mp-outline-variant flex shrink-0 items-center border-b ${k[W]}`,children:e(n.Input,{autoFocus:!0,placeholder:I??G.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)",$[W]].join(" ")})}),e(n.List,{className:"mp-command-palette__list min-h-0 flex-1 overflow-y-auto overscroll-contain p-1",style:{maxHeight:re},children:(r,o)=>t(a.Fragment,{children:[r.group&&r.group!==ae[o-1]?.group?e("div",{role:"presentation",className:`text-mp-on-surface-variant pt-2 pb-1 font-medium ${k[W]} ${h}`,children:r.group}):null,t(n.Item,{index:o,value:r,disabled:r.disabled,onClick:()=>(e=>{e.disabled||(e.onSelect?.(),E?.(e),ee(!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",k[W],C[W]].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 ${k[W]} ${h}`,children:R??G.empty})]})})})]})})}

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

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { useMPConfig, type MPConfigValue } from '../../internal/config.js';
+import type { MPColor, MPSize } 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;
+    /**
+     * 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 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 two 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` joins it because the two are the
+ * axes a whole product is usually set on together.
+ *
+ * ## 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, 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 o from"react";import{DirectionProvider as e}from"@base-ui/react/direction-provider";import{MPConfigContext as i,useMPConfig as t}from"../../internal/config.js";import{MPLocaleContext as c,useMPLocale as n}from"../../internal/locale.js";export function MPConfigProvider({size:l,color:s,locale:d,dir:a,children:m}){const p=t(),f=n(),u=o.useMemo(()=>({size:l??p.size,color:s??p.color}),[l,s,p.size,p.color]),v=d??f,h=r(i.Provider,{value:u,children:r(c.Provider,{value:v,children:m})});return a?r(e,{direction:a,children:r("div",{dir:a,style:{display:"contents"},children:h})}):h}export{t 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";