material-plus-ui 1.6.0 → 1.8.0

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 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]})})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a 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{MARK_MOTION as l}from"../../internal/mark.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{MPSupportingText as m}from"../../internal/SupportingText.js";import{PROSE_TEXT as p,hasContent as h}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const b={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__*/a.forwardRef(function({checked:x,defaultChecked:g,onCheckedChange:k,indeterminate:j=!1,label:y,description:z,errorMessage:N,size:_,color:v,required:C=!1,disabled:M=!1,readOnly:w=!1,name:I,value:R,id:q,className:L,style:O},P){const S=f(_),B=u(v),F=h(N),T=F?"error":B,W=b[S],$=a.useId(),A=q??$;return e(n.Root,{className:["mp-checkbox inline-block max-w-full align-top",L??""].filter(Boolean).join(" "),disabled:M,invalid:F,"data-mp-size":S,style:{...c(T),...O},children:r("div",{className:["flex items-start gap-3",p[S]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(t.Root,{ref:P,id:A,name:I,value:R,checked:x,defaultChecked:g,indeterminate:j,required:C,disabled:M,readOnly:w,onCheckedChange:e=>k?.(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)",W.box,M?["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(" "):[w?"cursor-default":"cursor-pointer",F?"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:[M?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",W.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 ${l}`,children:e(o,{icon:j?s:i,size:W.glyph,strokeWidth:3})})]})}),h(y)||h(z)||F?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[h(y)?r(n.Label,{htmlFor:A,className:["leading-[1.4]",M?"text-mp-on-surface/38 cursor-default":w?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[y,C?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(m,{description:z,errorMessage:N})]}):null]})})});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types.js';
+import type { MPColor, MPSize, MPTransition, MPVariant } from '../../types.js';
 export interface MPChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
     /**
      * How much surface the chip paints.
@@ -57,6 +57,15 @@ export interface MPChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>
     /** Unavailable. Drops the accent family, as everywhere else in the library. */
     disabled?: boolean;
     children?: React.ReactNode;
+    /**
+     * An entrance, run once as it mounts.
+     *
+     * `transition="fade"` is the whole of what most callers want; the object form
+     * takes a duration, an edge to come from, or a scale to start at. Anything
+     * that has to run again — on scroll, on hover, under your own control — is an
+     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     */
+    transition?: MPTransition;
 }
 /**
  * A compact token: a tag, a filter, a status, an entity plucked out of a list.
@@ -78,7 +87,7 @@ export interface MPChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>
  * ## 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
+ * an [MPMenu](../inputs/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

package/dist/components/chip/MPChip.js

@@ -1,2 +1,2 @@
 "use client";
-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]})});
+import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{MPIcon as r}from"../icon/MPIcon.js";import{CloseIcon as a}from"../../constants/icons.js";import{accentSlots as i}from"../../internal/accent.js";import{transitionProps as s}from"../../internal/transition.js";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale.js";import{COMMON as m}from"../../internal/messages/common.js";import{hasContent as p}from"../../internal/scale.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{useMPColor as u,useMPSize as b}from"../../internal/config.js";const f={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},x={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"},g={xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},h={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-2.5"},v={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},y={filled:"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 border-0 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 border-0 bg-transparent"},j={filled:"border-0 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-1 border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border-mp-outline bg-(--_mp-accent-container) text-(--_mp-on-accent-container) border",text:"border-0 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)"},_={filled:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38",tonal:"border-0 bg-mp-on-surface/12 text-mp-on-surface/38",elevated:"border-0 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:"border-0 bg-transparent text-mp-on-surface/38"},w=/*@__PURE__*/["ms-0.5 -me-1 inline-flex shrink-0 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent p-0 text-inherit [font:inherit]","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(" "),k=/*@__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(" "),N=/*@__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:$,color:C,startIcon:z,endIcon:B,count:I,onDelete:L,deleteLabel:M,locale:P,selected:D,disabled:F=!1,transition:R,className:S,style:q,children:A,onClick:E,...G},H){const J=s(R),K=b($),O=u(C),Q=l(P),T=c(m,Q),U=Boolean(E)&&!F,V=U&&Boolean(L),W=U&&!L,X=["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[K],x[K],h[K],v[K],F?_[o]:D?j[o]:y[o],V?"ps-0":g[K],L?"pe-2":"",W?N:"",S??""].filter(Boolean).join(" "),Y=t(n,{children:[z,p(A)?e("span",{className:"min-w-0 truncate leading-[normal]",children:A}):null,B,p(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]}),Z={"data-mp-size":K,"data-mp-variant":o,"data-selected":D||void 0,className:`${X}${J.className?` ${J.className}`:""}`,style:{...i(O),...J.style,...q},...G};return W?t("button",{ref:H,type:"button","aria-pressed":D,onClick:E,...Z,children:[e(d,{}),Y]}):t("span",{ref:H,"aria-disabled":!(!F||U)||void 0,...Z,children:[V?t("button",{type:"button","aria-pressed":D,className:`${k} ${h[K]} ${g[K]}`,onClick:E,children:[e(d,{}),Y]}):Y,L?e("button",{type:"button","aria-label":M??T.remove,disabled:F,className:w,onClick:L,children:e(r,{icon:a,size:"1em"})}):null]})});

package/dist/components/code-block/MPCodeBlock.d.ts

@@ -0,0 +1,177 @@
+import * as React from 'react';
+import type { MPDensity, MPSize } from '../../types.js';
+export { registerMPLanguage } from '../../internal/highlight.js';
+/**
+ * Which palette the block wears.
+ *
+ * - `auto` — the page's own scheme, light on a light page and dark on a dark
+ *   one. The default, because that is what every other surface in this library
+ *   does and a reader who has chosen a scheme has chosen it for the whole page.
+ * - `dark` and `light` — pinned, whatever the page is doing. `dark` is what a
+ *   documentation site usually wants: code has been read on a dark ground since
+ *   terminals, and the choice is one prop.
+ * - `mono` — no hue at all. Structure carried by weight and by how far a run is
+ *   muted, which is what a block printed on paper, or read by somebody who
+ *   cannot separate the hues, is left with.
+ *
+ * The type is open on purpose. A theme is a set of `--mp-code-*` custom
+ * properties under a `[data-mp-code-theme]` selector and nothing else, so a
+ * consumer who writes one in their own stylesheet has a theme — with nothing to
+ * register, nothing to import, and no cost to anybody who did not.
+ *
+ * No third-party palettes ship here. One Dark, Dracula and the rest are other
+ * projects' published work under their own licences, and porting them into this
+ * package would be shipping somebody else's design; the open string is how to
+ * bring the one you read in all day.
+ */
+export type MPCodeBlockTheme = 'auto' | 'dark' | 'light' | 'mono' | (string & {});
+export interface MPCodeBlockProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'prefix' | 'children' | 'onCopy'> {
+    /**
+     * The code.
+     *
+     * Trailing whitespace is trimmed off the end of the block: a template literal
+     * is almost always written with a newline before its closing backtick, and
+     * that newline is a blank line at the bottom of every block. Nothing is
+     * trimmed off the front, because indentation is meaningful in half of the
+     * languages here.
+     */
+    code: string;
+    /**
+     * What it is written in — `ts`, `bash`, `yml`, `dockerfile`. The common
+     * spellings and file extensions are understood, so a value copied off a
+     * fenced code block works as it stands.
+     *
+     * A language nothing here knows is drawn plain rather than refused. Teach it
+     * one with `registerMPLanguage`.
+     */
+    language?: string;
+    /**
+     * The palette.
+     * @default 'auto'
+     */
+    theme?: MPCodeBlockTheme;
+    /** The type scale and the air around the code. @default 'md' */
+    size?: MPSize;
+    /** Tightens that air and nothing else. @default 0 */
+    density?: MPDensity;
+    /**
+     * Colours the code.
+     *
+     * Off, nothing is fetched at all — the grammar engine is behind a dynamic
+     * import, so a block that does not colour itself costs no more than the text
+     * in it. On, the block draws plain on the first frame and colours itself when
+     * the grammar lands: a few milliseconds, and never a blank space where the
+     * code should be.
+     * @default true
+     */
+    highlight?: boolean;
+    /**
+     * The bar over the code, and the master switch for it. With it off there is
+     * no bar, and none of `showLanguage`, `copyable` or `rawToggle` draws
+     * anything whatever they say.
+     * @default true
+     */
+    toolbar?: boolean;
+    /**
+     * A name at the start of the bar, usually a file path. Takes the place the
+     * language would otherwise have, and both can be shown at once.
+     */
+    title?: React.ReactNode;
+    /** Names the language at the start of the bar. @default true */
+    showLanguage?: boolean;
+    /** The button that puts the code on the clipboard. @default true */
+    copyable?: boolean;
+    /**
+     * The toggle that drops the colouring and shows the characters as they are.
+     *
+     * Off by default: it is a second control on a bar that usually wants one, and
+     * it means nothing at all when `highlight` is off.
+     * @default false
+     */
+    rawToggle?: boolean;
+    /**
+     * Lines to mark: a tinted row with a rule down its leading edge.
+     *
+     * A number is one line, a string is a list of lines and ranges — `'4'`,
+     * `'4-9'`, `'1,4-9,12'` — and an array is any mix of the two. They are
+     * counted the way the gutter counts, so with `startLine={286}` a
+     * `markLines={288}` marks the line the gutter calls 288.
+     */
+    markLines?: number | string | Array<number | string>;
+    /** Numbers down the side. @default false */
+    lineNumbers?: boolean;
+    /** What the first line is numbered. @default 1 */
+    startLine?: number;
+    /**
+     * A shell prompt in front of every line that has something on it — `$`, `#`,
+     * `>>>`.
+     *
+     * Drawn but never *present*: the symbol is generated content, so it cannot be
+     * selected, cannot be found by find-in-page, and is not what the copy button
+     * puts on the clipboard. A transcript stays a transcript and still pastes
+     * into a shell.
+     */
+    prompt?: string;
+    /** Wraps long lines instead of scrolling them sideways. @default false */
+    wrap?: boolean;
+    /**
+     * How tall the block may get before the code scrolls inside it. A number is
+     * pixels, a string is any CSS length. Left out, the block is as tall as the
+     * code.
+     */
+    maxHeight?: number | string;
+    /** The typeface. Defaults to the page's own monospace stack. */
+    fontFamily?: string;
+    /** Overrides the size the `size` ladder chose. A number is pixels. */
+    fontSize?: number | string;
+    /** Overrides the leading. A bare number is a ratio, as in CSS. */
+    lineHeight?: number | string;
+    /**
+     * Which language the block's own words are in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** The copy button's label. Defaults to the wording in `locale`. */
+    copyLabel?: string;
+    /** And what it says once the code is on the clipboard. */
+    copiedLabel?: string;
+    /** The raw toggle's label. */
+    rawLabel?: string;
+    /** Fires with the copied text once the clipboard has taken it. */
+    onCopy?: (code: string) => void;
+}
+/**
+ * A viewer for one line of code or a thousand.
+ *
+ * ```tsx
+ * <MPCodeBlock code={source} language="ts" title="src/index.ts" lineNumbers />
+ * ```
+ *
+ * Everything above the code is optional and off one prop each, because the same
+ * component has to be a snippet inside a sentence — no bar, no numbers, no
+ * chrome — and the full transcript at the top of a README. Those are the same
+ * block with different things turned on rather than two components.
+ *
+ * ## The colouring arrives separately
+ *
+ * highlight.js, reached through a dynamic import, which makes it the one thing
+ * in this library that is loaded rather than imported. The grammars are forty
+ * kilobytes and there are thirty-four of them, so they come as their own chunk,
+ * one language at a time, and only for a block that asked to be coloured. The
+ * block draws plain on the first frame and colours itself when the chunk lands;
+ * there is never a blank space where the code should be.
+ *
+ * ## It is drawn as lines, always
+ *
+ * Even with no numbers and no prompt. A line is what carries a number, a prompt
+ * and a place in the scroll, and a component that switched between two
+ * renderings would have two sets of wrapping behaviour to keep in step.
+ *
+ * ## The block does not take the page's accent
+ *
+ * It has a palette of its own, because code is read against a ground chosen for
+ * code and the twelve hues it needs are not the four MD3 has. `theme` picks
+ * which set fills the slots, and `auto` — the default — is the one that follows
+ * the page's light and dark the way every other surface here does.
+ */
+export declare const MPCodeBlock: React.ForwardRefExoticComponent<MPCodeBlockProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/code-block/MPCodeBlock.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{MPIcon as n}from"../icon/MPIcon.js";import{CheckIcon as r,CodeIcon as i,CopyIcon as l}from"../../constants/icons.js";import{canonicalLanguage as a,highlightCode as s,plainLines as c}from"../../internal/highlight.js";import{cssLength as m}from"../../internal/length.js";import{useMPLocale as d,useMPMessages as p}from"../../internal/locale.js";import{CODE as u}from"../../internal/messages/code.js";import{META_TEXT as f,hasContent as g}from"../../internal/scale.js";import{VISUALLY_HIDDEN as x}from"../../internal/visually-hidden.js";import{useMPDensity as h,useMPSize as b}from"../../internal/config.js";export{registerMPLanguage}from"../../internal/highlight.js";const y={xs:"text-[0.6875rem]/[1.55]",sm:"text-[0.75rem]/[1.6]",md:"text-[0.8125rem]/[1.65]",lg:"text-[0.875rem]/[1.7]",xl:"text-[1rem]/[1.7]"},v={xs:8,sm:12,md:14,lg:16,xl:20},w={xs:8,sm:12,md:14,lg:16,xl:20},j={xs:4,sm:4,md:6,lg:8,xl:8};function N(e,t,o){return Math.max(o,e+2*t)}export const MPCodeBlock=/*@__PURE__*/o.forwardRef(function({code:k,language:_,theme:M="auto",size:S,density:$,highlight:L=!0,toolbar:T=!0,title:z,showLanguage:C=!0,copyable:F=!0,rawToggle:R=!1,markLines:A,lineNumbers:H=!1,startLine:K=1,prompt:B,wrap:E=!1,maxHeight:P,fontFamily:D,fontSize:I,lineHeight:q,locale:G,copyLabel:J,copiedLabel:O,rawLabel:Q,onCopy:U,className:V,style:W,...X},Y){const Z=b(S),ee=h($),te=p(u,d(G)),oe=o.useMemo(()=>k.replace(/\r\n?/g,"\n").replace(/\s+$/,""),[k]),ne=a(_),[re,ie]=o.useState(!1),[le,ae]=o.useState(null),[se,ce]=o.useState(null),me=L&&!re&&null!==ne;o.useEffect(()=>{if(!me||!ne)return void ce(null);let e=!1;return s(oe,ne).then(t=>{e||ce(t)},()=>{e||ce(null)}),()=>{e=!0}},[oe,ne,me]);const de=o.useMemo(()=>me&&se?se:c(oe),[me,se,oe]),pe=o.useMemo(()=>function(e){const t=new Set;if(void 0===e)return t;for(const o of Array.isArray(e)?e:[e])if("number"!=typeof o)for(const e of o.split(",")){const o=/^\s*(\d+)\s*(?:-\s*(\d+)\s*)?$/.exec(e);if(!o)continue;const n=Number(o[1]),r=void 0===o[2]?n:Number(o[2]);for(let e=Math.min(n,r);e<=Math.max(n,r);e+=1)t.add(e)}else Number.isFinite(o)&&t.add(Math.trunc(o));return t}(A),[A]),ue=o.useRef(void 0);o.useEffect(()=>()=>clearTimeout(ue.current),[]);const fe=o.useRef(null),ge=J??te.copy,xe=O??te.copied,he=Q??te.raw,be=/*@__PURE__*/["mp-code__button inline-flex shrink-0 cursor-pointer items-center gap-1 border-0","rounded-mp-xs bg-transparent px-1.5 py-1","text-(--mp-code-dim) hover:text-(--mp-code-fg) hover:bg-(--mp-code-hover)",f,"transition-[color,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none","outline-(--mp-code-fg) focus-visible:outline-2 focus-visible:outline-offset-1","focus-visible:outline-solid outline-none"].join(" "),ye=g(z)?"string"==typeof z?z:void 0:ne??te.label,ve=T&&(C||F||R||g(z));return t("div",{ref:Y,"data-mp-size":Z,"data-mp-code-theme":M,"data-mp-code-wrap":E?"true":void 0,className:["mp-code rounded-mp-md flex min-w-0 flex-col overflow-hidden","border-(--mp-code-rule) bg-(--mp-code-bg) text-(--mp-code-fg) border",V??""].filter(Boolean).join(" "),style:{"--mp-code-gutter":`${String(K+Math.max(de.length-1,0)).length}ch`,"--mp-code-pad-x":`${N(w[Z],ee,6)}px`,"--mp-code-pad-y":`${N(v[Z],ee,4)}px`,"--mp-code-bar-pad-y":`${N(j[Z],ee,2)}px`,...D?{fontFamily:D}:null,...void 0===I?null:{fontSize:m(I)},...void 0===q?null:{lineHeight:q},...W},...X,children:[ve?t("div",{className:["mp-code__bar border-(--mp-code-rule) flex min-w-0 items-center gap-1 border-b","px-[calc(var(--mp-code-pad-x)+2px)] py-(--mp-code-bar-pad-y)"].join(" "),children:[g(z)?e("span",{className:`mp-code__title min-w-0 truncate font-mono ${f}`,children:z}):null,C&&ne?e("span",{className:["mp-code__language text-(--mp-code-dim) min-w-0 truncate font-mono","tracking-wide uppercase select-none",f].join(" "),children:ne}):null,e("span",{className:"flex-1"}),R&&L?e("button",{type:"button","aria-pressed":re,"aria-label":he,title:he,onClick:()=>ie(e=>!e),className:[be,re?"bg-(--mp-code-hover) text-(--mp-code-fg)":""].filter(Boolean).join(" "),children:e(n,{icon:i,size:"1.15em"})}):null,F?t("button",{type:"button",onClick:async()=>{const e=await async function(e){try{if(navigator.clipboard?.writeText)return await navigator.clipboard.writeText(e),!0}catch{}try{const t=document.createElement("textarea");t.value=e,t.setAttribute("readonly",""),t.style.cssText="position:fixed;top:0;left:0;opacity:0;pointer-events:none",document.body.append(t),t.select();const o=document.execCommand("copy");return t.remove(),o}catch{return!1}}(oe);clearTimeout(ue.current),ae(e),ue.current=setTimeout(()=>ae(null),2e3),e&&U?.(oe)},className:be,children:[e(n,{icon:le?r:l,size:"1.15em"}),e("span",{children:null===le?ge:le?xe:te.copyFailed})]}):null]}):null,e("div",{className:`mp-code__body flex min-h-0 flex-col ${y[Z]}`,children:e("div",{role:"region","aria-label":ye,tabIndex:0,onKeyDown:e=>{if("a"!==e.key&&"A"!==e.key)return;if(!e.metaKey&&!e.ctrlKey||e.altKey)return;const t=fe.current,o="undefined"==typeof window?null:window.getSelection();if(!t||!o)return;e.preventDefault();const n=document.createRange();n.selectNodeContents(t),o.removeAllRanges(),o.addRange(n)},className:["mp-code__scroller box-border min-h-0 overflow-auto py-(--mp-code-pad-y)","outline-(--mp-code-fg) focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),style:void 0===P?void 0:{maxHeight:m(P)},children:e("pre",{ref:fe,className:["m-0 bg-transparent p-0 font-mono",E?"w-full":"w-max min-w-full"].join(" "),children:de.map((t,n)=>{const r=K+n;return e("div",{className:"mp-code-line px-(--mp-code-pad-x)","data-line":H?r:void 0,"data-mark":pe.has(r)?"":void 0,"data-prompt":B&&t.length>0?B:void 0,children:e("code",{children:t.map((t,n)=>t.token?e("span",{className:t.token,children:t.text},n):e(o.Fragment,{children:t.text},n))})},n)})})})}),e("span",{"aria-live":"polite",className:x,children:null===le?"":le?xe:te.copyFailed})]})});

package/dist/components/code-block/index.d.ts

@@ -0,0 +1,2 @@
+export { MPCodeBlock, registerMPLanguage } from './MPCodeBlock.js';
+export type { MPCodeBlockProps, MPCodeBlockTheme } from './MPCodeBlock.js';

package/dist/components/code-block/index.js

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

package/dist/components/collapsible/MPCollapsible.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPSize, MPVariant } from '../../types.js';
+import type { MPSize, MPElevation, MPVariant } from '../../types.js';
 export interface MPCollapsibleProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title' | 'onChange'> {
     /** Whether the panel is showing. Use with `onOpenChange` for a controlled one. */
     open?: boolean;
@@ -51,6 +51,17 @@ export interface MPCollapsibleProps extends Omit<React.ComponentPropsWithoutRef<
      * @default 'outlined'
      */
     variant?: MPVariant;
+    /**
+     * How far off the page the sheet is lifted, on MD3's own scale.
+     *
+     * It moves the **tone** as well as the shadow, because Material pairs the two:
+     * a level-2 surface is `surface-container` under a level-2 shadow, and a prop
+     * that only cast a shadow would raise this into a surface the specification
+     * has no name for. Given a level, `variant` is left holding only its hairline.
+     *
+     * Left unset, `variant` decides — and `variant="elevated"` is this at `1`.
+     */
+    elevation?: MPElevation;
     /**
      * The room inside, and the type scale of the header and the body.
      * @default 'md'

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";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})})]})});
+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{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]})});
+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 o}from"../icon/MPIcon.js";import{CheckIcon as l,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 b,META_TEXT as v,PROSE_TEXT as x,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],b=-g/2,x=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:x,backgroundImage:"linear-gradient(to top, #000000, rgb(0 0 0 / 0)), linear-gradient(to right, #ffffff, rgb(255 255 255 / 0))"},children:e("span",{className:L,style:{width:g,height:g,left:`${n.s}%`,top:100-n.v+"%",marginLeft:b,marginTop:b,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:b,marginTop:b,backgroundColor:x}})}),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:b,marginTop:b,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",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:M(r.hsv)}:void 0,children:e(o,{icon:l,size:12})})},`${t}:${a}`)})}):null]})}const V={h:202,s:100,v:61};export const MPColorPicker=/*@__PURE__*/r.forwardRef(function({value:l,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 oe=d(Z),le=p(J),ie=h(m,le,Q),se=w(q),ue=B[oe],ce=r.useId(),de=ae??ce,[pe,he]=r.useState(_),me=l??pe,[fe,ge]=r.useState(G),be=W??fe,[ve,xe]=r.useState(()=>$(me)??{hsv:V,alpha:1}),[ye,we]=r.useState(()=>me),je=P(ve.hsv,I?ve.alpha:1,T),Ne=""===me;r.useEffect(()=>{const e=$(me);e?P(e.hsv,I?e.alpha:1,T)!==je&&(we(me),xe(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:be}),Pe=(e,a)=>{xe(e);const r=P(e.hsv,I?e.alpha:1,T);we(a??r),void 0===l&&he(r),M?.(r)},$e=e(F,{hsv:ve.hsv,alphaValue:ve.alpha,onChange:Pe,text:ye,onTextChange:e=>{we(e);const a=$(e);a&&Pe(a,e)},withAlpha:I,swatches:A,editable:O,size:oe,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(ve.hsv,I?ve.alpha:1)}})}),Te=Y?e("input",{type:"hidden",name:Y,value:Ne?"":je}):null;return R?a("div",{ref:te,"data-mp-size":oe,className:["mp-color-picker flex flex-col",y[oe],re??""].filter(Boolean).join(" "),style:ne,children:[w(D)?a("span",{className:[v,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:`${v} text-mp-error`,children:q}):w(S)?e("span",{className:`${v} text-mp-on-surface-variant`,children:S}):null,Te]}):a(n.Root,{ref:te,disabled:E,invalid:se,"data-mp-size":oe,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:be,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 border-0 bg-transparent font-[inherit] outline-none",ue.padding,Ce?"pe-10":"",ue.height,x[oe],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===l&&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","appearance-none border-0 bg-transparent p-0","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(o,{icon:i,size:b[oe]})]}):null,e(u,{label:D,required:K,notched:_e}),w(D)?e(s,{size:oe,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",x[oe],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 { MPColor, MPControlEventProps, MPStyleProps, MPVariant } 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
@@ -67,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. */
@@ -219,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.
@@ -238,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, 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 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 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})]})}
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Combobox as o}from"@base-ui/react/combobox";import{Field as l}from"@base-ui/react/field";import{MPChip as t}from"../chip/MPChip.js";import{MPIcon as r}from"../icon/MPIcon.js";import{AddIcon as i,CheckIcon as s,ChevronDownIcon as m,CloseIcon as c}from"../../constants/icons.js";import{MPFieldLabel as p,MPFieldOutline as u,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:ne,errorMessage:oe,startIcon:le,size:te,fullWidth:re=!1,required:ie=!1,disabled:se=!1,readOnly:me=!1,name:ce,open:pe,defaultOpen:ue,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(oe),Se=!0===$,Ie=S[we],ze=n.useId(),Ve=ve??ze,Oe=n.useMemo(()=>O.map(e=>({value:e.value,label:e.label??String(e.value),content:e.content,disabled:e.disabled})),[O]),[$e,Pe]=n.useState(()=>V(_)),_e=void 0===P?$e:V(P),[qe,Fe]=n.useState(""),{shrunk:Te,focusProps:Ae}=d({floating:ae&&w(ee),filled:_e.length>0||""!==qe,pinned:!!le}),De=n.useMemo(()=>new Map(Oe.map(e=>[e.value,e])),[Oe]),Ke=n.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=n.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=n.useMemo(()=>null==Q?Q:(e,a)=>!0===e.custom||Q(e,a),[Q]),We=n.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 border-0 bg-transparent text-inherit [font: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","appearance-none border-0 bg-transparent p-0","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(o.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(l.Root,{disabled:se,invalid:ke,"data-mp-size":we,className:["mp-combobox group flex-col align-top",re?"flex w-full":"inline-flex w-fit",je??""].filter(Boolean).join(" "),style:Ce,...Ae,children:[a(o.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:pe,defaultOpen:ue,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:ie,children:[a("div",{className:"relative w-full",children:[a(o.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:[le?e("span",{className:["flex shrink-0 items-center",se?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:le}):null,Se?e(o.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(o.Value,{children:l=>a(n.Fragment,{children:[l.map((a,n)=>e(o.Chip,{render:e(t,{variant:X??(ke?"outlined":"tonal"),color:Y??(ke?"error":"primary"),size:z[we],disabled:se,endIcon:me||se?null:e(o.ChipRemove,{"aria-label":ge?ge(a.label):h(Le.removeNamed,{label:a.label}),className:"flex cursor-pointer appearance-none items-center border-0 bg-transparent p-0 text-inherit opacity-70 hover:opacity-100",children:e(r,{icon:c,size:16})})}),children:a.label},`${n}:${String(a.value)}`)),Ye(l.length>0)]})})}):Ye(!1),H&&!me?a(o.Clear,{"aria-label":he??Le.clear,className:Xe,children:[e(v,{}),e(r,{icon:c,size:j[we]})]}):null,a(o.Trigger,{"aria-label":fe??Le.open,className:Xe,children:[e(v,{}),e(o.Icon,{className:["relative flex items-center","transition-transform duration-(--mp-sys-motion-duration-short4)","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:m,size:j[we]})})]})]}),e(u,{label:ee,required:ie,notched:Te}),w(ee)?e(p,{size:we,label:ee,required:ie,htmlFor:Ve,shrunk:Te}):null]}),e(o.Portal,{children:e(o.Positioner,{className:M,sideOffset:4,children:a(o.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(o.Empty,{className:"text-mp-on-surface-variant px-3 py-2 empty:hidden",children:W??Me.empty}),e(o.List,{children:(n,l)=>a(o.Item,{value:n,disabled:n.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:n.custom?e(r,{icon:i,size:18}):e(o.ItemIndicator,{keepMounted:!0,className:`mp-combobox__mark ${N}`,children:e(r,{icon:s,size:18})})}),e("span",{className:w(n.content)?"min-w-0 flex-1":"min-w-0 flex-1 truncate",children:n.custom?G?G(n.label):h(Me.add,{label:n.label}):n.content??n.label})]},`${l}:${n.custom?"custom:":""}${String(n.value)}`)})]})})})]}),e(y,{description:ne,errorMessage:oe,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: sizeProp, color: colorProp, 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 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})]})})})]})})}
+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})]})})})]})})}