material-plus-ui 1.3.0 → 1.4.0

package/dist/components/checkbox/MPCheckbox.js

@@ -1 +1,2 @@
-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";import{CheckIcon as i,RemoveIcon as s}from"../../constants/icons";import{accentSlots as c}from"../../internal/accent";import{MPStateLayer as d}from"../../internal/StateLayer";import{MPSupportingText as l}from"../../internal/SupportingText";import{PROSE_TEXT as m,hasContent as p}from"../../internal/scale";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:z="md",color:j="primary",required:_=!1,disabled:v=!1,readOnly:C=!1,name:N,value:M,id:I},R){const q=p(k),w=q?"error":j,L=h[z],O=r.useId(),P=I??O;return e(n.Root,{className:"mp-checkbox inline-block align-top",disabled:v,invalid:q,"data-mp-size":z,style:c(w),children:a("div",{className:["flex items-start gap-3",m[z]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(t.Root,{ref:R,id:P,name:N,value:M,checked:u,defaultChecked:f,indeterminate:x,required:_,disabled:v,readOnly:C,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)",L.box,v?["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(" "):[C?"cursor-default":"cursor-pointer",q?"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:[v?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",L.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:L.glyph,strokeWidth:3})})]})}),p(g)||p(y)||q?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(g)?a(n.Label,{htmlFor:P,className:["leading-[1.4]",v?"text-mp-on-surface/38 cursor-default":C?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[g,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{description:y,errorMessage:k})]}):null]})})});
+"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:_=!1,disabled:v=!1,readOnly:C=!1,name:N,value:M,id:I},R){const q=p(k),w=q?"error":z,L=h[j],O=r.useId(),P=I??O;return e(n.Root,{className:"mp-checkbox inline-block align-top",disabled:v,invalid:q,"data-mp-size":j,style:c(w),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:R,id:P,name:N,value:M,checked:u,defaultChecked:f,indeterminate:x,required:_,disabled:v,readOnly:C,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)",L.box,v?["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(" "):[C?"cursor-default":"cursor-pointer",q?"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:[v?null:e(d,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",L.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:L.glyph,strokeWidth:3})})]})}),p(g)||p(y)||q?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(g)?a(n.Label,{htmlFor:P,className:["leading-[1.4]",v?"text-mp-on-surface/38 cursor-default":C?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:[g,_?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{description:y,errorMessage:k})]}):null]})})});

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

@@ -1,2 +1,2 @@
-export { MPCheckbox } from './MPCheckbox';
-export type { MPCheckboxProps } from './MPCheckbox';
+export { MPCheckbox } from './MPCheckbox.js';
+export type { MPCheckboxProps } from './MPCheckbox.js';

package/dist/components/checkbox/index.js

@@ -1 +1 @@
-export{MPCheckbox}from"./MPCheckbox";
+export{MPCheckbox}from"./MPCheckbox.js";

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPColor, MPSize, MPVariant } from '../../types';
+import type { MPColor, MPSize, MPVariant } from '../../types.js';
 export interface MPChipProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
     /**
      * How much surface the chip paints.

package/dist/components/chip/MPChip.js

@@ -1 +1,2 @@
-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";import{CloseIcon as r}from"../../constants/icons";import{accentSlots as i}from"../../internal/accent";import{useMPLocale as l,useMPMessages as c}from"../../internal/locale";import{hasContent as s}from"../../internal/scale";import{MPStateLayer as m}from"../../internal/StateLayer";const p={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},d={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"},u={xs:"px-2",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"},f={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2",xl:"gap-2.5"},x={xs:"rounded-mp-xs",sm:"rounded-mp-sm",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"},b={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"},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-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)"},h={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"},v=["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(" "),y=["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:_="md",color:w="primary",startIcon:j,endIcon:k,count:N,onDelete:z,deleteLabel:C,locale:I,selected:$,disabled:B=!1,className:L,style:M,children:P,onClick:D,...F},R){const S=l(I),q=c("common",S),A=Boolean(D)&&!B,E=["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)",p[_],d[_],f[_],x[_],B?h[o]:$?g[o]:b[o],A?"ps-0":u[_],z?"pe-2":A?"pe-0":"",L??""].filter(Boolean).join(" "),G=n(t,{children:[j,s(P)?e("span",{className:"min-w-0 truncate",children:P}):null,k,s(N)?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:N}):null]});return n("span",{ref:R,"data-mp-size":_,"data-mp-variant":o,"data-selected":$||void 0,className:E,style:{...i(w),...M},"aria-disabled":!(!B||A)||void 0,...F,children:[A?n("button",{type:"button","aria-pressed":$,className:`${y} ${f[_]} ${u[_]}`,onClick:D,children:[e(m,{}),G]}):G,z?e("button",{type:"button","aria-label":C??q.remove,disabled:B,className:v,onClick:z,children:e(a,{icon:r,size:"1em"})}):null]})});
+"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]})});

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

@@ -1,2 +1,2 @@
-export { MPChip } from './MPChip';
-export type { MPChipProps } from './MPChip';
+export { MPChip } from './MPChip.js';
+export type { MPChipProps } from './MPChip.js';

package/dist/components/chip/index.js

@@ -1 +1 @@
-export{MPChip}from"./MPChip";
+export{MPChip}from"./MPChip.js";

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPSize, MPVariant } from '../../types';
+import type { MPSize, 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;

package/dist/components/collapsible/MPCollapsible.js

@@ -1 +1,2 @@
-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";import{ChevronDownIcon as r}from"../../constants/icons";import{MPStateLayer as o}from"../../internal/StateLayer";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";import{CONTAINER_SURFACE as h}from"../../internal/surface";const x=["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:N,subtitle:j,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(N)?e("span",{className:`truncate ${f[P]}`,children:N}):null,c(j)?e("span",{className:`text-mp-on-surface-variant truncate ${d}`,children:j}):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})})]})});
+"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})})]})});

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

@@ -1,2 +1,2 @@
-export { MPCollapsible } from './MPCollapsible';
-export type { MPCollapsibleProps } from './MPCollapsible';
+export { MPCollapsible } from './MPCollapsible.js';
+export type { MPCollapsibleProps } from './MPCollapsible.js';

package/dist/components/collapsible/index.js

@@ -1 +1 @@
-export{MPCollapsible}from"./MPCollapsible";
+export{MPCollapsible}from"./MPCollapsible.js";

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

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

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

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

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

@@ -1,2 +1,2 @@
-export { MPColorPicker } from './MPColorPicker';
-export type { MPColorPickerLabels, MPColorPickerProps } from './MPColorPicker';
+export { MPColorPicker } from './MPColorPicker.js';
+export type { MPColorPickerLabels, MPColorPickerProps } from './MPColorPicker.js';

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

@@ -1 +1 @@
-export{MPColorPicker}from"./MPColorPicker";
+export{MPColorPicker}from"./MPColorPicker.js";

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

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

package/dist/components/combobox/MPCombobox.js

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

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

@@ -1,2 +1,2 @@
-export { MPCombobox } from './MPCombobox';
-export type { MPComboboxOption, MPComboboxProps, MPComboboxValue } from './MPCombobox';
+export { MPCombobox } from './MPCombobox.js';
+export type { MPComboboxOption, MPComboboxProps, MPComboboxValue } from './MPCombobox.js';

package/dist/components/combobox/index.js

@@ -1 +1 @@
-export{MPCombobox}from"./MPCombobox";
+export{MPCombobox}from"./MPCombobox.js";

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPSize } from '../../types';
+import type { MPSize } from '../../types.js';
 export interface MPContainerProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How wide the content is allowed to get, on a ladder pinned to MD3's window

package/dist/components/container/MPContainer.js

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

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

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

package/dist/components/container/index.js

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

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type MPPickerLabels } from '../../internal/Calendar';
-import { type MPPickerShellProps } from '../../internal/Picker';
-import type { MPWeekday } from '../../types';
+import { type MPPickerLabels } from '../../internal/Calendar.js';
+import { type MPPickerShellProps } from '../../internal/Picker.js';
+import type { MPWeekday } from '../../types.js';
 export interface MPDatePickerProps extends MPPickerShellProps {
     /** The chosen day. Use with `onValueChange` for a controlled picker. */
     value?: Date | null;

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

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

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

@@ -1,2 +1,2 @@
-export { MPDatePicker } from './MPDatePicker';
-export type { MPDatePickerProps } from './MPDatePicker';
+export { MPDatePicker } from './MPDatePicker.js';
+export type { MPDatePickerProps } from './MPDatePicker.js';

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

@@ -1 +1 @@
-export{MPDatePicker}from"./MPDatePicker";
+export{MPDatePicker}from"./MPDatePicker.js";

package/dist/components/date-range-picker/MPDateRangePicker.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type MPPickerLabels } from '../../internal/Calendar';
-import { type MPPickerShellProps } from '../../internal/Picker';
-import type { MPWeekday } from '../../types';
+import { type MPPickerLabels } from '../../internal/Calendar.js';
+import { type MPPickerShellProps } from '../../internal/Picker.js';
+import type { MPWeekday } from '../../types.js';
 /**
  * Two ends, either of which may be missing.
  *

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

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