material-plus-ui 1.5.0 → 1.6.0

package/dist/components/grid/MPGrid.d.ts

@@ -14,6 +14,20 @@ export type MPGridJustify = 'start' | 'center' | 'end' | 'space-between' | 'spac
 export type MPGridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 /** The same, for one item overriding the row it is in. */
 export type MPGridAlignSelf = MPGridAlign | 'auto';
+/**
+ * How wide one item is: a number of the grid's columns, or `'grow'`.
+ *
+ * `'grow'` is the one value that is not a measurement. It is "whatever the row
+ * has left after everybody else has taken theirs", which is the width a
+ * thumbnail's neighbour wants and the one thing a twelve-column arithmetic
+ * cannot express — the remainder is only known once the other items in *that*
+ * row have been laid out, and no `span` a caller writes down knows what else is
+ * in the row.
+ *
+ * Two growing items in a row split the remainder equally rather than by their
+ * contents, which is the useful half of what makes it predictable.
+ */
+export type MPGridSpan = number | 'grow';
 export interface MPGridProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How many columns a row is divided into. Every `span` and every `offset`
@@ -74,9 +88,17 @@ export interface MPGridItemProps extends React.ComponentPropsWithoutRef<'div'> {
      * own window class up, so two of them usually describe a whole layout.
      *
      * A span wider than the row is clamped to the row rather than overflowing.
+     *
+     * `span="grow"` is the exception to all of the above: it takes the width the
+     * row has left rather than a share of it, which is the layout a thumbnail
+     * beside a body of text wants — `<MPGridItem span={3}>` for the picture and
+     * `<MPGridItem span="grow">` for the words, with no arithmetic to keep in step
+     * when the picture's column count changes. It is responsive like any other
+     * value: `span={{ compact: 12, medium: 'grow' }}` stacks on a phone and fills
+     * the rest of the row from 600dp.
      * @default the grid's full width
      */
-    span?: MPResponsive<number>;
+    span?: MPResponsive<MPGridSpan>;
     /**
      * Columns left empty *before* the item — space pushed in ahead of it, not an
      * absolute position in the row. First in a twelve-column row, `offset={4}` with

package/dist/components/grid/MPGrid.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";const n=["compact","medium","expanded","large","extra-large"];function r(e,t,r){const a=function(e){return null==e?{}:"object"==typeof e?e:{compact:e}}(t),s={};for(const t of n){const n=a[t];void 0!==n&&(s[`--_mp-${e}-${t}`]=r(n))}return s}function a(e,t){return null==e?t:"object"==typeof e?{compact:t,...e}:e}function s(e){return String(Math.max(1,Math.round(e)))}function o(e){return String(Math.max(1,Math.round(e)))}function c(e){return String(Math.max(0,Math.round(e)))}function i(e){const t=.25*Math.max(0,e);return`${Number(t.toFixed(5))}rem`}const l={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},f={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},u={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"},p={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};export const MPGrid=/*@__PURE__*/e.forwardRef(function({columns:e,spacing:n,rowSpacing:o,columnSpacing:c,justifyContent:p,alignItems:d,alignContent:m,wrap:y=!0,render:g,className:h,style:x,children:b,...j},w){return t({render:g,ref:w,props:{className:["mp-grid flex",y?"flex-wrap":"flex-nowrap","gap-x-(--_mp-gap-x) gap-y-(--_mp-gap-y)",p?l[p]:"",d?f[d]:"",m?u[m]:"",h??""].filter(Boolean).join(" "),style:{...r("cols",a(e,12),s),...r("gap-x",a(c??n,4),i),...r("gap-y",a(o??n,4),i),...x},children:b,...j}})});export const MPGridItem=/*@__PURE__*/e.forwardRef(function({span:e,offset:n,alignSelf:a,render:s,className:i,style:l,children:f,...u},d){return t({render:s,ref:d,props:{className:["mp-grid-item",a?p[a]:"",i??""].filter(Boolean).join(" "),style:{...r("span",e,o),...r("offset",n,c),...l},children:f,...u}})});
+import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";import{WINDOW_CLASSES as n}from"../../internal/window-class.js";function r(e){return null==e?{}:"object"==typeof e?e:{compact:e}}function o(e,t,o){const s=r(t),a={};for(const t of n){const n=s[t];void 0!==n&&(a[`--_mp-${e}-${t}`]=o(n))}return a}function s(e,t){return null==e?t:"object"==typeof e?{compact:t,...e}:e}function a(e){return String(Math.max(1,Math.round(e)))}function c(e){return String(Math.max(1,Math.round(e)))}function i(e){const t=r(e),o=Object.values(t).some(e=>"grow"===e),s={};for(const e of n){const n=t[e];void 0!==n&&("grow"!==n&&(s[`--_mp-span-${e}`]=c(n)),o&&(s[`--_mp-grow-${e}`]="grow"===n?"1":"0"))}return s}function f(e){return String(Math.max(0,Math.round(e)))}function l(e){const t=.25*Math.max(0,e);return`${Number(t.toFixed(5))}rem`}const u={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},p={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},m={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"},d={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};export const MPGrid=/*@__PURE__*/e.forwardRef(function({columns:e,spacing:n,rowSpacing:r,columnSpacing:c,justifyContent:i,alignItems:f,alignContent:d,wrap:g=!0,render:y,className:h,style:w,children:b,...j},x){return t({render:y,ref:x,props:{className:["mp-grid flex",g?"flex-wrap":"flex-nowrap","gap-x-(--_mp-gap-x) gap-y-(--_mp-gap-y)",i?u[i]:"",f?p[f]:"",d?m[d]:"",h??""].filter(Boolean).join(" "),style:{...o("cols",s(e,12),a),...o("gap-x",s(c??n,4),l),...o("gap-y",s(r??n,4),l),...w},children:b,...j}})});export const MPGridItem=/*@__PURE__*/e.forwardRef(function({span:e,offset:n,alignSelf:r,render:s,className:a,style:c,children:l,...u},p){return t({render:s,ref:p,props:{className:["mp-grid-item",r?d[r]:"",a??""].filter(Boolean).join(" "),style:{...i(e),...o("offset",n,f),...c},children:l,...u}})});

package/dist/components/header/MPHeader.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useRender as i}from"@base-ui/react/use-render";import{BAR_SURFACE as n,MPPageLayoutContext as r}from"../../internal/page-layout.js";import{hasContent as s,MEASURE as l,SHEET_PAD_X as m}from"../../internal/scale.js";const d={xs:"min-h-12",sm:"min-h-14",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},o={xs:"text-mp-title-small",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},c={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-4",xl:"gap-5"},p={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-8",xl:"gap-10"},x={static:"",absolute:"absolute inset-x-0 top-0 z-30",sticky:"sticky top-0 z-30",fixed:"fixed inset-x-0 top-0 z-40"},f={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},u={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const MPHeader=/*@__PURE__*/a.forwardRef(function({brand:h,actions:g,align:b="start",position:j="sticky",variant:v="tonal",size:w="md",maxWidth:y="none",padded:N=!0,label:k,render:_,className:z,children:$,...B},C){const{register:H}=a.useContext(r),M=a.useCallback(e=>{H("header",e),"function"==typeof C?C(e):C&&(C.current=e)},[H,C]);return i({render:_??e("header",{}),ref:M,props:{"aria-label":k,"data-mp-size":w,"data-mp-variant":v,className:["mp-header text-mp-on-surface box-border w-full min-w-0",n[v],"outlined"===v?"border-mp-outline-variant border-b":"",x[j],z??""].filter(Boolean).join(" "),children:t("div",{className:["flex w-full items-center",d[w],p[w],N?m[w]:"","none"===y?"":`${l[y]} mx-auto`].filter(Boolean).join(" "),children:[s(h)?e("div",{className:["mp-header__brand flex min-w-0 items-center",f[b],c[w],o[w]].join(" "),children:h}):"center"===b?e("div",{"aria-hidden":"true",className:f[b]}):null,s($)?e("div",{className:`mp-header__middle ${u[b]} ${c[w]}`,children:$}):null,s(g)?e("div",{className:["mp-header__actions flex min-w-0 items-center justify-end",f[b],c[w]].join(" "),children:g}):"center"===b?e("div",{"aria-hidden":"true",className:f[b]}):null]}),...B}})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{useRender as i}from"@base-ui/react/use-render";import{BAR_SURFACE as n,MPPageLayoutContext as r}from"../../internal/page-layout.js";import{hasContent as s,MEASURE as l,SHEET_PAD_X as m}from"../../internal/scale.js";import{useMPSize as d}from"../../internal/config.js";const o={xs:"min-h-12",sm:"min-h-14",md:"min-h-16",lg:"min-h-20",xl:"min-h-24"},c={xs:"text-mp-title-small",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},p={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-4",xl:"gap-5"},x={xs:"gap-3",sm:"gap-4",md:"gap-6",lg:"gap-8",xl:"gap-10"},f={static:"",absolute:"absolute inset-x-0 top-0 z-30",sticky:"sticky top-0 z-30",fixed:"fixed inset-x-0 top-0 z-40"},u={start:"shrink-0",center:"flex-1 basis-0",end:"shrink-0"},h={start:"flex min-w-0 flex-1 items-center justify-start",center:"flex min-w-0 shrink items-center justify-center",end:"flex min-w-0 flex-1 items-center justify-end"};export const MPHeader=/*@__PURE__*/a.forwardRef(function({brand:g,actions:b,align:j="start",position:v="sticky",variant:w="tonal",size:y,maxWidth:N="none",padded:k=!0,label:_,render:z,className:$,children:B,...C},H){const M=d(y),{register:P}=a.useContext(r),R=a.useCallback(e=>{P("header",e),"function"==typeof H?H(e):H&&(H.current=e)},[P,H]);return i({render:z??e("header",{}),ref:R,props:{"aria-label":_,"data-mp-size":M,"data-mp-variant":w,className:["mp-header text-mp-on-surface box-border w-full min-w-0",n[w],"outlined"===w?"border-mp-outline-variant border-b":"",f[v],$??""].filter(Boolean).join(" "),children:t("div",{className:["flex w-full items-center",o[M],x[M],k?m[M]:"","none"===N?"":`${l[N]} mx-auto`].filter(Boolean).join(" "),children:[s(g)?e("div",{className:["mp-header__brand flex min-w-0 items-center",u[j],p[M],c[M]].join(" "),children:g}):"center"===j?e("div",{"aria-hidden":"true",className:u[j]}):null,s(B)?e("div",{className:`mp-header__middle ${h[j]} ${p[M]}`,children:B}):null,s(b)?e("div",{className:["mp-header__actions flex min-w-0 items-center justify-end",u[j],p[M]].join(" "),children:b}):"center"===j?e("div",{"aria-hidden":"true",className:u[j]}):null]}),...C}})});

package/dist/components/image/MPImage.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import type { MPSize } from '../../types.js';
+/** How the picture is fitted into the box it was given. CSS's own four. */
+export type MPImageFit = 'cover' | 'contain' | 'fill' | 'none';
+/** What the picture is doing right now. */
+export type MPImageState = 'loading' | 'loaded' | 'error';
+export interface MPImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>, 'onError'> {
+    /** Where the picture is. */
+    src?: string;
+    /**
+     * What the picture says, for a reader who cannot see it.
+     *
+     * Required, and the one prop here that is — for the reason `MPIconButton`'s
+     * `label` is required: a picture with no text alternative is the single most
+     * common accessibility defect a component library can help with, and the help
+     * is refusing to compile without one. Pass `alt=""` for a picture that is
+     * decoration, which is a claim rather than an omission.
+     */
+    alt: string;
+    /**
+     * The proportion the box holds, written the way CSS writes it — a number
+     * (`1.5`) or a ratio (`'16 / 9'`).
+     *
+     * Left out, the box is whatever the picture turns out to be, and the page
+     * **reflows** when it arrives. Giving a ratio is what reserves the room.
+     */
+    ratio?: number | string;
+    /**
+     * How the picture is fitted into that box.
+     * @default 'cover'
+     */
+    fit?: MPImageFit;
+    /**
+     * Drawn while the picture is on its way.
+     *
+     * A shimmer by default, on the surface the box sits on. `false` draws nothing,
+     * which is what a picture inside something that already has its own loading
+     * treatment wants.
+     */
+    placeholder?: React.ReactNode | false;
+    /**
+     * Drawn instead of the picture when it does not arrive.
+     *
+     * A broken-picture glyph on a neutral surface by default. This is the prop
+     * that makes the component worth having: a bare `<img>` whose `src` 404s draws
+     * the browser's own broken-image mark, which is different in every browser and
+     * belongs to none of them.
+     */
+    fallback?: React.ReactNode;
+    /**
+     * Opens the picture over a scrim when it is pressed.
+     *
+     * The box becomes a button, so it is reachable by keyboard and says what it
+     * does. Off by default: most pictures on a page are not worth opening, and one
+     * that silently became pressable would be a control nobody declared.
+     * @default false
+     */
+    preview?: boolean;
+    /**
+     * What the preview loads, when that is not `src` — the full-resolution file
+     * behind a thumbnail.
+     * @default src
+     */
+    previewSrc?: string;
+    /** The label on the button `preview` turns the box into. */
+    previewLabel?: string;
+    /** Called when the state changes, for a caller that wants to know. */
+    onStateChange?: (state: MPImageState) => void;
+    /** The corner and type scale of the placeholder and the fallback. @default 'md' */
+    size?: MPSize;
+}
+/**
+ * A picture that says what it is doing.
+ *
+ * ```tsx
+ * <MPImage src={photo} alt="The east face at dawn" ratio="16 / 9" preview />
+ * ```
+ *
+ * A bare `<img>` has three states and shows two of them badly. While it is on
+ * its way there is a hole the size of nothing, and the page jumps when it lands;
+ * when it fails there is the browser's own broken-image mark, which is different
+ * in every browser and belongs to none of them. This draws a placeholder for the
+ * first and a fallback for the second, and `ratio` reserves the room so that
+ * neither one moves the page.
+ *
+ * ## The cached case is the one that breaks
+ *
+ * An image already in the cache fires `load` **before** React attaches the
+ * handler, so a component that only listened would sit on its placeholder
+ * forever — and the picture behind it would be fully drawn the whole time. The
+ * `complete` flag is checked on mount for exactly that, which is why this is a
+ * component rather than three lines of `useState` at a call site.
+ *
+ * ## `alt` is required
+ *
+ * For the reason `MPIconButton`'s `label` is: a picture with no text alternative
+ * is the most common accessibility defect a library can actually help with, and
+ * the help is refusing to compile. `alt=""` is the way to say *decoration*,
+ * which is a claim somebody made rather than a prop somebody forgot.
+ *
+ * ## What it is not
+ *
+ * Not a gallery. `preview` opens **this** picture and nothing else — a lightbox
+ * that walked between images would need to know which images, in what order, and
+ * that is a component holding a collection rather than a picture.
+ *
+ * Not a `next/image`. There is no `srcset` generation, no loader and no format
+ * negotiation: those belong to whatever is serving the file, and a library that
+ * guessed at them would be guessing about somebody else's CDN. `srcSet` and
+ * `sizes` pass straight through to the `<img>`.
+ */
+export declare const MPImage: React.ForwardRefExoticComponent<MPImageProps & React.RefAttributes<HTMLImageElement>>;

package/dist/components/image/MPImage.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,Fragment as a,jsxs as o}from"react/jsx-runtime";import*as r from"react";import{Dialog as t}from"@base-ui/react/dialog";import{MPIcon as n}from"../icon/MPIcon.js";import{BrokenImageIcon as i}from"../../constants/icons.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FADE as m,PORTAL_LAYER as d,SCRIM as f}from"../../internal/surface.js";import{useMPSize as u}from"../../internal/config.js";const p={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none"};export const MPImage=/*@__PURE__*/r.forwardRef(function({src:j,alt:b,ratio:g,fit:h="cover",placeholder:v,fallback:x,preview:y=!1,previewSrc:N,previewLabel:z,onStateChange:w,size:k,className:P,style:R,onLoad:S,...L},B){const C=u(k),E=s(),I=l(c,E),[M,$]=r.useState(j?"loading":"error"),F=r.useRef(null),T=r.useCallback(e=>{$(a=>(a!==e&&w?.(e),e))},[w]),[W,q]=r.useState(j);j!==W&&(q(j),$(j?"loading":"error")),r.useEffect(()=>{const e=F.current;e&&j&&e.complete&&T(e.naturalWidth>0?"loaded":"error")},[j,T]);const A="loaded"===M,D=e("div",{className:["bg-mp-surface-container text-mp-on-surface-variant","flex size-full items-center justify-center"].join(" "),children:e(n,{icon:i,size:24})}),G=e("div",{className:["bg-mp-surface-container-high size-full","motion-safe:animate-pulse motion-reduce:animate-none"].join(" ")}),H=o(a,{children:[e("img",{...L,ref:e=>{F.current=e,"function"==typeof B?B(e):B&&(B.current=e)},src:j,alt:b,className:["size-full",p[h],A?"opacity-100":"opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)"].join(" "),onLoad:e=>{T("loaded"),S?.(e)},onError:()=>T("error")}),"loading"===M&&!1!==v?e("span",{"aria-hidden":"true",className:"absolute inset-0",children:v??G}):null,"error"===M?e("span",{className:"absolute inset-0",children:x??D}):null]}),J=["mp-image relative block overflow-hidden",P??""].filter(Boolean).join(" "),K={aspectRatio:g,...R};return y?o(t.Root,{children:[e(t.Trigger,{"data-mp-size":C,"data-mp-state":M,disabled:"error"===M,"aria-label":(z??b)||I.open,className:[J,"outline-mp-secondary cursor-zoom-in appearance-none border-0 bg-transparent p-0","focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-default","outline-none"].join(" "),style:K,children:H}),o(t.Portal,{children:[e(t.Backdrop,{className:`${f} ${m} fixed inset-0 z-40`}),e(t.Popup,{className:[d,m,"fixed inset-0 flex items-center justify-center p-6"].join(" "),children:e("img",{src:N??j,alt:b,className:"max-h-full max-w-full object-contain"})})]})]}):e("span",{"data-mp-size":C,"data-mp-state":M,className:J,style:K,children:H})});

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

@@ -0,0 +1,2 @@
+export { MPImage } from './MPImage.js';
+export type { MPImageProps, MPImageFit, MPImageState } from './MPImage.js';

package/dist/components/image/index.js

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

package/dist/components/list/MPList.d.ts

@@ -62,6 +62,31 @@ export interface MPListItemProps extends Omit<React.ComponentPropsWithoutRef<'li
     action?: React.ReactNode;
     /** Renders the row as a link. Mutually exclusive with `onClick` in practice. */
     href?: string;
+    /**
+     * Where that link opens. `rel` follows on its own for `_blank` — see `rel`.
+     */
+    target?: string;
+    /**
+     * Overrides the `rel` a `_blank` row would otherwise get, which is
+     * `noopener noreferrer`. Writing one **replaces** it rather than adding to it,
+     * so a row that also needs `nofollow` spells all three out.
+     */
+    rel?: string;
+    /**
+     * Renders the row's pressable element as something else — a router's `Link`,
+     * most of the time. `href`, `target` and the row's classes still go through,
+     * so `render={<NextLink />}` needs the URL written once, on the `MPListItem`.
+     *
+     * **This is the one `render` in the library that is not the outermost
+     * element.** A row's shell is an `<li>` because it is inside a `<ul>`, and
+     * swapping that for anything else makes the list stop being a list; what a
+     * caller actually wants to replace is the `<a>` *inside* it, which is the
+     * thing App Router has to own for a client-side navigation and a prefetch to
+     * happen at all. So that is what this replaces. Without `href` or `onClick`
+     * the row is not pressable and there is nothing here to render — this is
+     * ignored rather than wrapping inert content in a link.
+     */
+    render?: useRender.RenderProp;
     /** Marks the row as the chosen one — the open page, the current filter. */
     selected?: boolean;
     /** Unavailable. Drops the accent family, as everywhere else in the library. */
@@ -92,5 +117,8 @@ export declare const MPList: React.ForwardRefExoticComponent<MPListProps & React
  * control. This is the same shape `MPChip` uses, for the same two reasons: a
  * `<span>` carrying a click handler is invisible to a keyboard, and a `<button>`
  * inside a `<button>` is markup Chrome silently un-nests.
+ *
+ * That inner element is what `render` replaces — a router's `Link`, so a row in
+ * a navigation list is a client-side navigation rather than a full page load.
  */
 export declare const MPListItem: React.ForwardRefExoticComponent<MPListItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/list/MPList.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import*as t from"react";import{useRender as i}from"@base-ui/react/use-render";import{accentSlots as o}from"../../internal/accent.js";import{CONTROL_GAP as l,hasContent as s,PROSE_TEXT as a,SHEET_PAD_X as d}from"../../internal/scale.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTAINER_SURFACE as m}from"../../internal/surface.js";const p=/*@__PURE__*/t.createContext({size:"md",color:"primary",dividers:!1}),u={xs:"py-1.5",sm:"py-2.5",md:"py-4",lg:"py-5",xl:"py-6"},f={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},x={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"};export const MPList=/*@__PURE__*/t.forwardRef(function({variant:r="outlined",size:n="md",color:l="primary",dividers:s=!1,render:a,className:d,style:c,children:u,...f},x){const h=t.useMemo(()=>({size:n,color:l,dividers:s}),[n,l,s]),v=["mp-list rounded-mp-md flex flex-col",m[r],"text-mp-on-surface",s?"overflow-hidden [&>li+li]:border-mp-outline-variant [&>li+li]:border-t":"p-1",d??""].filter(Boolean).join(" "),b=i({render:a??e("ul",{}),ref:x,props:{role:"list","data-mp-size":n,"data-mp-variant":r,className:v,style:{...o(l),...c},children:u,...f}});return e(p.Provider,{value:h,children:b})});export const MPListItem=/*@__PURE__*/t.forwardRef(function({startIcon:i,endIcon:o,description:m,action:h,href:v,selected:b=!1,disabled:y=!1,className:N,children:j,onClick:g,...k},w){const{size:z,dividers:B}=t.useContext(p),C=Boolean(g||v)&&!y,I=d[z],L=["group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","font-[inherit] no-underline",I,u[z],l[z],a[z],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",B?"":x[z],y?"text-mp-on-surface/38 cursor-default":b?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":"",C?["cursor-pointer appearance-none border-0",b?"":"bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].filter(Boolean).join(" "):""].filter(Boolean).join(" "),M=r(n,{children:[C?e(c,{}):null,s(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,r("span",{className:"flex min-w-0 flex-1 flex-col",children:[s(j)?e("span",{className:"truncate",children:j}):null,s(m)?e("span",{className:["truncate",f[z],b?"opacity-80":"text-mp-on-surface-variant"].join(" "),children:m}):null]}),s(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]});return r("li",{ref:w,"data-selected":b||void 0,className:["flex w-full items-center",N??""].filter(Boolean).join(" "),...k,children:[C&&v?e("a",{href:v,className:L,"aria-current":b?"page":void 0,onClick:g,children:M}):C?e("button",{type:"button",className:L,"aria-current":!!b||void 0,onClick:g,children:M}):e("div",{className:L,"aria-disabled":y||void 0,children:M}),s(h)?e("div",{className:`flex shrink-0 items-center ${I}`,children:h}):null]})});
+import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import*as t from"react";import{useRender as i}from"@base-ui/react/use-render";import{accentSlots as o}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{CONTROL_GAP as s,hasContent as a,PROSE_TEXT as d,SHEET_PAD_X as m}from"../../internal/scale.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTAINER_SURFACE as p}from"../../internal/surface.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const x=/*@__PURE__*/t.createContext({size:"md",color:"primary",dividers:!1}),h={xs:"py-1.5",sm:"py-2.5",md:"py-4",lg:"py-5",xl:"py-6"},v={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-medium"},b={xs:"rounded-mp-xs",sm:"rounded-mp-xs",md:"rounded-mp-sm",lg:"rounded-mp-sm",xl:"rounded-mp-md"};export const MPList=/*@__PURE__*/t.forwardRef(function({variant:r="outlined",size:n,color:l,dividers:s=!1,render:a,className:d,style:m,children:c,...h},v){const b=f(n),y=u(l),j=t.useMemo(()=>({size:b,color:y,dividers:s}),[b,y,s]),N=["mp-list rounded-mp-md flex flex-col",p[r],"text-mp-on-surface",s?"overflow-hidden [&>li+li]:border-mp-outline-variant [&>li+li]:border-t":"p-1",d??""].filter(Boolean).join(" "),g=i({render:a??e("ul",{}),ref:v,props:{role:"list","data-mp-size":b,"data-mp-variant":r,className:N,style:{...o(y),...m},children:c,...h}});return e(x.Provider,{value:j,children:g})});function y({render:r,props:n}){return i({render:r??(n.href?e("a",{}):e("button",{})),props:n})}export const MPListItem=/*@__PURE__*/t.forwardRef(function({startIcon:i,endIcon:o,description:p,action:u,href:f,target:j,rel:N,render:g,selected:k=!1,disabled:_=!1,className:w,children:z,onClick:B,...C},I){const{size:L,dividers:M}=t.useContext(x),P=Boolean(B||f)&&!_,R=m[L],F=["group relative flex min-w-0 flex-1 items-center overflow-hidden text-start","font-[inherit] no-underline",R,h[L],s[L],d[L],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",M?"":b[L],_?"text-mp-on-surface/38 cursor-default":k?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":"",P?["cursor-pointer appearance-none border-0",k?"":"bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].filter(Boolean).join(" "):""].filter(Boolean).join(" "),S=r(n,{children:[P?e(c,{}):null,a(i)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:i}):null,r("span",{className:"mp-list-item__text flex min-w-0 flex-1 flex-col",children:[a(z)?e("span",{className:"mp-list-item__label truncate",children:z}):null,a(p)?e("span",{className:["mp-list-item__description truncate",v[L],k?"opacity-80":"text-mp-on-surface-variant"].join(" "),children:p}):null]}),a(o)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:o}):null]});return r("li",{ref:I,"data-selected":k||void 0,className:["flex w-full items-center",w??""].filter(Boolean).join(" "),...C,children:[P&&f?e(y,{render:g,props:{href:f,target:j,rel:l(j,N),className:F,"aria-current":k?"page":void 0,onClick:B,children:S}}):P?e(y,{render:g,props:{type:g?void 0:"button",className:F,"aria-current":!!k||void 0,onClick:B,children:S}}):e("div",{className:F,"aria-disabled":_||void 0,children:S}),a(u)?e("div",{className:`flex shrink-0 items-center ${R}`,children:u}):null]})});

package/dist/components/menu/MPMenu.d.ts

@@ -30,6 +30,25 @@ export interface MPMenuProps extends MPMenuSurfaceProps {
      * menu opened from elsewhere needs no trigger of its own.
      */
     trigger?: React.ReactElement;
+    /**
+     * Whether that trigger renders a real `<button>`.
+     *
+     * It nearly always does — an [MPButton](./button), an
+     * [MPIconButton](./icon-button), an [MPChip](./chip) with an `onClick` — and
+     * this can be left alone. Set it `false` for a trigger that is deliberately
+     * something else: an avatar, a card, a row of text. Base UI then supplies the
+     * `role`, the tab stop and the Enter/Space handling a `<button>` would have
+     * brought with it, so the trigger is still a button to a screen reader and to
+     * a keyboard.
+     *
+     * The reason it is a prop rather than something inferred: what a trigger
+     * renders is only known once it has rendered, and by then the wiring has
+     * already been decided. Base UI says so in the console when the two disagree,
+     * in either direction — a `false` here on something that *is* a `<button>` is
+     * as wrong as the reverse.
+     * @default true
+     */
+    nativeButton?: boolean;
     /** Whether the menu is open. Use with `onOpenChange` for a controlled menu. */
     open?: boolean;
     /** Whether it starts open, for an uncontrolled one. */
@@ -219,7 +238,7 @@ export declare function MPMenuSubmenu({ label, startIcon, disabled, side, sideOf
  * type with a variant for every shape a row can take, which is a component tree
  * spelled as a discriminated union.
  */
-export declare function MPMenu({ size, color, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: MPMenuProps): React.JSX.Element;
+export declare function MPMenu({ size: sizeProp, color: colorProp, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, nativeButton, disabled, className, style, children }: MPMenuProps): React.JSX.Element;
 /**
  * The same menu, opened by a right-click or a long press instead of by a button.
  *
@@ -230,5 +249,5 @@ export declare function MPMenu({ size, color, trigger, open, defaultOpen, onOpen
  * against an anchor, and the long press is what makes it reachable on a touch
  * screen at all.
  */
-export declare function MPContextMenu({ size, color, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: MPContextMenuProps): React.JSX.Element;
+export declare function MPContextMenu({ size: sizeProp, color: colorProp, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: MPContextMenuProps): React.JSX.Element;
 export {};

package/dist/components/menu/MPMenu.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as l}from"@base-ui/react/context-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{CheckIcon as s,ChevronRightIcon as o}from"../../constants/icons.js";import{linkRel as i}from"../../internal/link.js";import{MPMenuContext as c}from"../../internal/menu.js";import{accentSlots as d}from"../../internal/accent.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{CONTROL_ICON as u,META_TEXT as p,hasContent as h}from"../../internal/scale.js";import{FADE as f,PORTAL_LAYER as x}from"../../internal/surface.js";const b=/*@__PURE__*/["mp-menu__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container text-mp-on-surface","max-h-[min(24rem,var(--available-height))] min-w-[112px] max-w-[280px]","overflow-y-auto overscroll-contain py-2 outline-none",f].join(" "),g={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},N={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},v={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},y={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};function C(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",g[e],N[e],v[e],y[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function k(){return e(m,{layer:"inset-0 bg-current",className:"group-data-highlighted:opacity-8 group-data-popup-open:opacity-8 group-data-disabled:opacity-0"})}const M="relative flex shrink-0 items-center justify-center";function O({children:t,description:a}){return h(a)?n("span",{className:"relative flex min-w-0 flex-1 flex-col py-1.5 text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`text-mp-on-surface-variant truncate ${p}`,children:a})]}):e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:t})}function P({shortcut:n}){return h(n)?e("span",{className:`text-mp-on-surface-variant relative ms-2 shrink-0 ${p}`,children:n}):null}export function MPMenuItem({onClick:l,href:r,target:s,rel:o,startIcon:d,endIcon:m,shortcut:u,description:p,color:f,closeOnClick:x=!0,disabled:b=!1,label:g,children:N,className:v,style:y}){const{size:j}=t.useContext(c),I=n(t.Fragment,{children:[e(k,{}),h(d)?e("span",{className:`${M} text-mp-on-surface-variant`,children:d}):null,e(O,{description:p,children:N}),h(m)?e("span",{className:`${M} text-mp-on-surface-variant`,children:m}):null,e(P,{shortcut:u})]}),$=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0,z=$||y?{...$,...y}:void 0;return void 0===r||b?e(a.Item,{disabled:b,label:g,closeOnClick:x,onClick:l,className:C(j,Boolean(f),v),style:z,children:I}):e(a.LinkItem,{href:r,target:s,rel:i(s,o),label:g,closeOnClick:x,onClick:l,className:C(j,Boolean(f),v),style:z,children:I})}export function MPMenuCheckboxItem({checked:l,defaultChecked:o,onCheckedChange:i,endIcon:d,shortcut:m,description:p,color:f,closeOnClick:x=!1,disabled:b=!1,label:g,children:N,className:v,style:y}){const{size:j}=t.useContext(c),I=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:o,onCheckedChange:e=>i?.(e),disabled:b,label:g,closeOnClick:x,className:C(j,Boolean(f),v),style:I||y?{...I,...y}:void 0,children:[e(k,{}),e("span",{className:`${M} text-(--_mp-accent)`,style:{width:u[j]},children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{icon:s,size:u[j]})})}),e(O,{description:p,children:N}),h(d)?e("span",{className:`${M} text-mp-on-surface-variant`,children:d}):null,e(P,{shortcut:m})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:s,className:o,style:i}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:o,style:i,children:s})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:s,description:o,color:i,closeOnClick:d=!1,disabled:m=!1,label:p,children:f,className:x,style:b}){const{size:g}=t.useContext(c),N=i?{"--_mp-accent":`var(--_mp-color-${i})`}:void 0;return n(a.RadioItem,{value:l,disabled:m,label:p,closeOnClick:d,className:C(g,Boolean(i),x),style:N||b?{...N,...b}:void 0,children:[e(k,{}),e("span",{className:`${M} text-(--_mp-accent)`,style:{width:u[g]},children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e(O,{description:o,children:f}),h(r)?e("span",{className:`${M} text-mp-on-surface-variant`,children:r}):null,e(P,{shortcut:s})]})}export function MPMenuGroup({label:l,children:r,className:s,style:o}){const{size:i}=t.useContext(c);return n(a.Group,{className:s,style:o,children:[h(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${N[i]} ${p}`,children:l}):null,r]})}export function MPMenuSeparator({className:n,...t}){return e(a.Separator,{className:["bg-mp-outline-variant my-2 h-px",n??""].filter(Boolean).join(" "),...t})}export function MPMenuSubmenu({label:l,startIcon:s,disabled:i=!1,side:m="right",sideOffset:p=0,children:f,className:g,style:N}){const{size:v,color:y}=t.useContext(c);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:i,className:C(v,!1),children:[e(k,{}),h(s)?e("span",{className:`${M} text-mp-on-surface-variant`,children:s}):null,e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${M} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:o,size:u[v]})})]}),e(a.Portal,{children:e(a.Positioner,{className:x,side:m,sideOffset:p,align:"start",children:e(a.Popup,{className:[b,g??""].filter(Boolean).join(" "),style:{...d(y),...N},children:f})})})]})}export function MPMenu({size:l="md",color:r="primary",trigger:s,open:o,defaultOpen:i,onOpenChange:m,side:u="bottom",align:p="start",sideOffset:h=4,modal:f,openOnHover:g=!1,loopFocus:N=!0,disabled:v=!1,className:y,style:C,children:k}){const M=t.useMemo(()=>({size:l,color:r}),[l,r]);return e(c.Provider,{value:M,children:n(a.Root,{open:o,defaultOpen:i,onOpenChange:e=>m?.(e),modal:f,loopFocus:N,disabled:v,children:[s?e(a.Trigger,{render:s,openOnHover:g,disabled:v}):null,e(a.Portal,{children:e(a.Positioner,{className:x,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":l,className:[b,y??""].filter(Boolean).join(" "),style:{...d(r),...C},children:k})})})]})})}export function MPContextMenu({size:a="md",color:r="primary",content:s,children:o,open:i,defaultOpen:m,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:f,style:g}){const N=t.useMemo(()=>({size:a,color:r}),[a,r]);return e(c.Provider,{value:N,children:n(l.Root,{open:i,defaultOpen:m,onOpenChange:e=>u?.(e),loopFocus:p,disabled:h,children:[e(l.Trigger,{children:o}),e(l.Portal,{children:e(l.Positioner,{className:x,children:e(l.Popup,{"data-mp-size":a,className:[b,f??""].filter(Boolean).join(" "),style:{...d(r),...g},children:s})})})]})})}
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{Menu as a}from"@base-ui/react/menu";import{ContextMenu as l}from"@base-ui/react/context-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{CheckIcon as s,ChevronRightIcon as o}from"../../constants/icons.js";import{linkRel as i}from"../../internal/link.js";import{MPMenuContext as c}from"../../internal/menu.js";import{accentSlots as d}from"../../internal/accent.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{CONTROL_ICON as u,META_TEXT as p,hasContent as h}from"../../internal/scale.js";import{FADE as f,PORTAL_LAYER as x}from"../../internal/surface.js";import{useMPColor as b,useMPSize as g}from"../../internal/config.js";const v=/*@__PURE__*/["mp-menu__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container text-mp-on-surface","max-h-[min(24rem,var(--available-height))] min-w-[112px] max-w-[280px]","overflow-y-auto overscroll-contain py-2 outline-none",f].join(" "),N={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},y={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},C={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},k={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};function j(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",N[e],y[e],C[e],k[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function M(){return e(m,{layer:"inset-0 bg-current",className:"group-data-highlighted:opacity-8 group-data-popup-open:opacity-8 group-data-disabled:opacity-0"})}const O="relative flex shrink-0 items-center justify-center";function P({children:t,description:a}){return h(a)?n("span",{className:"relative flex min-w-0 flex-1 flex-col py-1.5 text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`text-mp-on-surface-variant truncate ${p}`,children:a})]}):e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:t})}function I({shortcut:n}){return h(n)?e("span",{className:`text-mp-on-surface-variant relative ms-2 shrink-0 ${p}`,children:n}):null}export function MPMenuItem({onClick:l,href:r,target:s,rel:o,startIcon:d,endIcon:m,shortcut:u,description:p,color:f,closeOnClick:x=!0,disabled:b=!1,label:g,children:v,className:N,style:y}){const{size:C}=t.useContext(c),k=n(t.Fragment,{children:[e(M,{}),h(d)?e("span",{className:`${O} text-mp-on-surface-variant`,children:d}):null,e(P,{description:p,children:v}),h(m)?e("span",{className:`${O} text-mp-on-surface-variant`,children:m}):null,e(I,{shortcut:u})]}),$=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0,z=$||y?{...$,...y}:void 0;return void 0===r||b?e(a.Item,{disabled:b,label:g,closeOnClick:x,onClick:l,className:j(C,Boolean(f),N),style:z,children:k}):e(a.LinkItem,{href:r,target:s,rel:i(s,o),label:g,closeOnClick:x,onClick:l,className:j(C,Boolean(f),N),style:z,children:k})}export function MPMenuCheckboxItem({checked:l,defaultChecked:o,onCheckedChange:i,endIcon:d,shortcut:m,description:p,color:f,closeOnClick:x=!1,disabled:b=!1,label:g,children:v,className:N,style:y}){const{size:C}=t.useContext(c),k=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:o,onCheckedChange:e=>i?.(e),disabled:b,label:g,closeOnClick:x,className:j(C,Boolean(f),N),style:k||y?{...k,...y}:void 0,children:[e(M,{}),e("span",{className:`${O} text-(--_mp-accent)`,style:{width:u[C]},children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{icon:s,size:u[C]})})}),e(P,{description:p,children:v}),h(d)?e("span",{className:`${O} text-mp-on-surface-variant`,children:d}):null,e(I,{shortcut:m})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:s,className:o,style:i}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:o,style:i,children:s})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:s,description:o,color:i,closeOnClick:d=!1,disabled:m=!1,label:p,children:f,className:x,style:b}){const{size:g}=t.useContext(c),v=i?{"--_mp-accent":`var(--_mp-color-${i})`}:void 0;return n(a.RadioItem,{value:l,disabled:m,label:p,closeOnClick:d,className:j(g,Boolean(i),x),style:v||b?{...v,...b}:void 0,children:[e(M,{}),e("span",{className:`${O} text-(--_mp-accent)`,style:{width:u[g]},children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e(P,{description:o,children:f}),h(r)?e("span",{className:`${O} text-mp-on-surface-variant`,children:r}):null,e(I,{shortcut:s})]})}export function MPMenuGroup({label:l,children:r,className:s,style:o}){const{size:i}=t.useContext(c);return n(a.Group,{className:s,style:o,children:[h(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${y[i]} ${p}`,children:l}):null,r]})}export function MPMenuSeparator({className:n,...t}){return e(a.Separator,{className:["bg-mp-outline-variant my-2 h-px",n??""].filter(Boolean).join(" "),...t})}export function MPMenuSubmenu({label:l,startIcon:s,disabled:i=!1,side:m="right",sideOffset:p=0,children:f,className:b,style:g}){const{size:N,color:y}=t.useContext(c);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:i,className:j(N,!1),children:[e(M,{}),h(s)?e("span",{className:`${O} text-mp-on-surface-variant`,children:s}):null,e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${O} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:o,size:u[N]})})]}),e(a.Portal,{children:e(a.Positioner,{className:x,side:m,sideOffset:p,align:"start",children:e(a.Popup,{className:[v,b??""].filter(Boolean).join(" "),style:{...d(y),...g},children:f})})})]})}export function MPMenu({size:l,color:r,trigger:s,open:o,defaultOpen:i,onOpenChange:m,side:u="bottom",align:p="start",sideOffset:h=4,modal:f,openOnHover:N=!1,loopFocus:y=!0,nativeButton:C=!0,disabled:k=!1,className:j,style:M,children:O}){const P=g(l),I=b(r),$=t.useMemo(()=>({size:P,color:I}),[P,I]);return e(c.Provider,{value:$,children:n(a.Root,{open:o,defaultOpen:i,onOpenChange:e=>m?.(e),modal:f,loopFocus:y,disabled:k,children:[s?e(a.Trigger,{render:s,openOnHover:N,nativeButton:C,disabled:k}):null,e(a.Portal,{children:e(a.Positioner,{className:x,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":P,className:[v,j??""].filter(Boolean).join(" "),style:{...d(I),...M},children:O})})})]})})}export function MPContextMenu({size:a,color:r,content:s,children:o,open:i,defaultOpen:m,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:f,style:N}){const y=g(a),C=b(r),k=t.useMemo(()=>({size:y,color:C}),[y,C]);return e(c.Provider,{value:k,children:n(l.Root,{open:i,defaultOpen:m,onOpenChange:e=>u?.(e),loopFocus:p,disabled:h,children:[e(l.Trigger,{children:o}),e(l.Portal,{children:e(l.Positioner,{className:x,children:e(l.Popup,{"data-mp-size":y,className:[v,f??""].filter(Boolean).join(" "),style:{...d(C),...N},children:s})})})]})})}

package/dist/components/menubar/MPMenubar.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Menubar as r}from"@base-ui/react/menubar";import{MPMenu as n}from"../menu/MPMenu.js";import{accentSlots as s}from"../../internal/accent.js";import{MPMenuContext as l}from"../../internal/menu.js";import{MPStateLayer as a}from"../../internal/StateLayer.js";import{CONTROL_GAP as i,hasContent as m}from"../../internal/scale.js";const c={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},p={xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"},u={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};export function MPMenubarMenu({label:r,startIcon:s,disabled:d=!1,children:f,className:x,style:b}){const{size:h,color:j}=o.useContext(l);return e(n,{size:h,color:j,disabled:d,openOnHover:!0,sideOffset:4,trigger:t("button",{type:"button",disabled:d,className:["mp-menubar__menu group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-xs cursor-pointer items-center justify-center bg-transparent","appearance-none font-[inherit] whitespace-nowrap select-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","disabled:text-mp-on-surface/38 disabled:cursor-default","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",c[h],p[h],u[h],i[h],x??""].filter(Boolean).join(" "),style:b,children:[d?null:e(a,{className:"group-data-popup-open:opacity-8"}),m(s)?e("span",{className:"relative flex",children:s}):null,e("span",{className:"relative",children:r})]}),children:f})}export const MPMenubar=/*@__PURE__*/o.forwardRef(function({orientation:t="horizontal",modal:n=!0,loopFocus:a=!0,disabled:m=!1,size:c="md",color:p="primary",className:u,style:d,children:f,...x},b){const h=o.useMemo(()=>({size:c,color:p}),[c,p]);return e(l.Provider,{value:h,children:e(r,{ref:b,orientation:t,modal:n,loopFocus:a,disabled:m,"data-mp-size":c,"data-mp-orientation":t,className:["mp-menubar flex items-center","vertical"===t?"flex-col items-stretch":"flex-row",i[c],u??""].filter(Boolean).join(" "),style:{...s(p),...d},...x,children:f})})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as o from"react";import{Menubar as r}from"@base-ui/react/menubar";import{MPMenu as n}from"../menu/MPMenu.js";import{accentSlots as s}from"../../internal/accent.js";import{MPMenuContext as i}from"../../internal/menu.js";import{MPStateLayer as l}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,hasContent as m}from"../../internal/scale.js";import{useMPColor as c,useMPSize as p}from"../../internal/config.js";const u={xs:"h-6",sm:"h-7",md:"h-8",lg:"h-10",xl:"h-12"},d={xs:"px-1.5",sm:"px-2",md:"px-2.5",lg:"px-3",xl:"px-4"},f={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};export function MPMenubarMenu({label:r,startIcon:s,disabled:c=!1,children:p,className:x,style:b}){const{size:h,color:j}=o.useContext(i);return e(n,{size:h,color:j,disabled:c,openOnHover:!0,sideOffset:4,trigger:t("button",{type:"button",disabled:c,className:["mp-menubar__menu group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-xs cursor-pointer items-center justify-center bg-transparent","appearance-none font-[inherit] whitespace-nowrap select-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","disabled:text-mp-on-surface/38 disabled:cursor-default","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",u[h],d[h],f[h],a[h],x??""].filter(Boolean).join(" "),style:b,children:[c?null:e(l,{className:"group-data-popup-open:opacity-8"}),m(s)?e("span",{className:"relative flex",children:s}):null,e("span",{className:"relative",children:r})]}),children:p})}export const MPMenubar=/*@__PURE__*/o.forwardRef(function({orientation:t="horizontal",modal:n=!0,loopFocus:l=!0,disabled:m=!1,size:u,color:d,className:f,style:x,children:b,...h},j){const g=p(u),v=c(d),y=o.useMemo(()=>({size:g,color:v}),[g,v]);return e(i.Provider,{value:y,children:e(r,{ref:j,orientation:t,modal:n,loopFocus:l,disabled:m,"data-mp-size":g,"data-mp-orientation":t,className:["mp-menubar flex items-center","vertical"===t?"flex-col items-stretch":"flex-row",a[g],f??""].filter(Boolean).join(" "),style:{...s(v),...x},...h,children:b})})});

package/dist/components/navigation-menu/MPNavigationMenu.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n,Fragment as a}from"react/jsx-runtime";import*as t from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as p,CONTROL_ICON as d,CONTROL_PAD_X as u,CONTROL_TEXT as f,hasContent as h,META_TEXT as g}from"../../internal/scale.js";import{PORTAL_LAYER as x}from"../../internal/surface.js";const v=/*@__PURE__*/t.createContext({size:"md"}),y=/*@__PURE__*/["mp-navigation-menu__popup rounded-mp-xs shadow-mp-2","bg-mp-surface-container text-mp-on-surface box-border overflow-hidden outline-none","transition-[opacity,width,height] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),N={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const MPNavigationMenuLink=/*@__PURE__*/t.forwardRef(function({href:a,title:r,description:o,startIcon:s,target:p,rel:d,className:x,children:y,...N},j){const{size:b}=t.useContext(v);return n(i.Link,{ref:j,href:a,target:p,rel:l(p,d),className:["mp-navigation-menu__link group text-mp-on-surface rounded-mp-xs relative flex","min-w-0 cursor-pointer items-start bg-transparent py-2 no-underline outline-none",m[b],u[b],x??""].filter(Boolean).join(" "),...N,children:[e(c,{}),h(s)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"relative flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${f[b]}`,children:r}),h(o)?e("span",{className:`text-mp-on-surface-variant ${g}`,children:o}):null,y]})]})});export function MPNavigationMenuItem({label:s,href:g,target:x,rel:y,startIcon:j,value:b,disabled:w=!1,columns:M=1,children:P,className:_,style:z}){const{size:k}=t.useContext(v),C=void 0!==g&&!h(P),I=Number.isFinite(M)?Math.max(1,Math.round(M)):1,L=["mp-navigation-menu__item group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-full cursor-pointer items-center justify-center bg-transparent","appearance-none font-[inherit] whitespace-nowrap no-underline select-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",p[k],f[k],m[k],u[k],_??""].filter(Boolean).join(" ");return e(i.Item,{value:b,children:C?n(i.Link,{href:g,target:x,rel:l(x,y),className:L,style:z,children:[e(c,{}),h(j)?e("span",{className:"relative flex",children:j}):null,e("span",{className:"relative",children:s})]}):n(a,{children:[n(i.Trigger,{disabled:w,className:L,style:z,children:[w?null:e(c,{className:"group-data-popup-open:opacity-8"}),h(j)?e("span",{className:"relative flex",children:j}):null,e("span",{className:"relative",children:s}),e(i.Icon,{className:["relative flex items-center transition-transform","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:o,size:d[k]})})]}),e(i.Content,{className:`mp-navigation-menu__panel grid gap-1 ${N[k]}`,style:I>1?{gridTemplateColumns:`repeat(${I}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const MPNavigationMenu=/*@__PURE__*/t.forwardRef(function({orientation:a="horizontal",value:r,defaultValue:o,onValueChange:l,delay:c,closeDelay:p,sideOffset:d=8,size:u="md",color:f="primary",className:h,style:g,children:N,...j},b){const w=t.useMemo(()=>({size:u}),[u]);return e(v.Provider,{value:w,children:n(i.Root,{ref:b,orientation:a,value:r,defaultValue:o,onValueChange:e=>l?.(e),delay:c,closeDelay:p,"data-mp-size":u,className:["mp-navigation-menu",h??""].filter(Boolean).join(" "),style:{...s(f),...g},...j,children:[e(i.List,{className:["flex items-center","vertical"===a?"flex-col items-stretch":"flex-row",m[u]].join(" "),children:N}),e(i.Portal,{children:e(i.Positioner,{className:x,sideOffset:d,collisionPadding:12,style:s(f),children:e(i.Popup,{className:y,children:e(i.Viewport,{})})})})]})})});
+import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import*as a from"react";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{MPIcon as r}from"../icon/MPIcon.js";import{ChevronDownIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{linkRel as l}from"../../internal/link.js";import{MPStateLayer as c}from"../../internal/StateLayer.js";import{CONTROL_GAP as m,CONTROL_HEIGHT as p,CONTROL_ICON as d,CONTROL_PAD_X as u,CONTROL_TEXT as f,hasContent as h,META_TEXT as g}from"../../internal/scale.js";import{PORTAL_LAYER as x}from"../../internal/surface.js";import{useMPColor as v,useMPSize as N}from"../../internal/config.js";const y=/*@__PURE__*/a.createContext({size:"md"}),j=/*@__PURE__*/["mp-navigation-menu__popup rounded-mp-xs shadow-mp-2","bg-mp-surface-container text-mp-on-surface box-border overflow-hidden outline-none","transition-[opacity,width,height] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard data-starting-style:opacity-0 data-ending-style:opacity-0"].join(" "),b={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const MPNavigationMenuLink=/*@__PURE__*/a.forwardRef(function({href:t,title:r,description:o,startIcon:s,target:p,rel:d,className:x,children:v,...N},j){const{size:b}=a.useContext(y);return n(i.Link,{ref:j,href:t,target:p,rel:l(p,d),className:["mp-navigation-menu__link group text-mp-on-surface rounded-mp-xs relative flex","min-w-0 cursor-pointer items-start bg-transparent py-2 no-underline outline-none",m[b],u[b],x??""].filter(Boolean).join(" "),...N,children:[e(c,{}),h(s)?e("span",{className:"relative flex h-[1lh] shrink-0 items-center",children:s}):null,n("span",{className:"relative flex min-w-0 flex-col gap-0.5",children:[e("span",{className:`font-medium ${f[b]}`,children:r}),h(o)?e("span",{className:`text-mp-on-surface-variant ${g}`,children:o}):null,v]})]})});export function MPNavigationMenuItem({label:s,href:g,target:x,rel:v,startIcon:N,value:j,disabled:w=!1,columns:M=1,children:P,className:_,style:z}){const{size:k}=a.useContext(y),C=void 0!==g&&!h(P),I=Number.isFinite(M)?Math.max(1,Math.round(M)):1,L=["mp-navigation-menu__item group text-mp-on-surface relative inline-flex shrink-0","rounded-mp-full cursor-pointer items-center justify-center bg-transparent","appearance-none font-[inherit] whitespace-nowrap no-underline select-none","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","data-disabled:text-mp-on-surface/38 data-disabled:cursor-default",p[k],f[k],m[k],u[k],_??""].filter(Boolean).join(" ");return e(i.Item,{value:j,children:C?n(i.Link,{href:g,target:x,rel:l(x,v),className:L,style:z,children:[e(c,{}),h(N)?e("span",{className:"relative flex",children:N}):null,e("span",{className:"relative",children:s})]}):n(t,{children:[n(i.Trigger,{disabled:w,className:L,style:z,children:[w?null:e(c,{className:"group-data-popup-open:opacity-8"}),h(N)?e("span",{className:"relative flex",children:N}):null,e("span",{className:"relative",children:s}),e(i.Icon,{className:["relative flex items-center transition-transform","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","data-popup-open:rotate-180"].join(" "),children:e(r,{icon:o,size:d[k]})})]}),e(i.Content,{className:`mp-navigation-menu__panel grid gap-1 ${b[k]}`,style:I>1?{gridTemplateColumns:`repeat(${I}, minmax(0, 1fr))`}:void 0,children:P})]})})}export const MPNavigationMenu=/*@__PURE__*/a.forwardRef(function({orientation:t="horizontal",value:r,defaultValue:o,onValueChange:l,delay:c,closeDelay:p,sideOffset:d=8,size:u,color:f,className:h,style:g,children:b,...w},M){const P=N(u),_=v(f),z=a.useMemo(()=>({size:P}),[P]);return e(y.Provider,{value:z,children:n(i.Root,{ref:M,orientation:t,value:r,defaultValue:o,onValueChange:e=>l?.(e),delay:c,closeDelay:p,"data-mp-size":P,className:["mp-navigation-menu",h??""].filter(Boolean).join(" "),style:{...s(_),...g},...w,children:[e(i.List,{className:["flex items-center","vertical"===t?"flex-col items-stretch":"flex-row",m[P]].join(" "),children:b}),e(i.Portal,{children:e(i.Positioner,{className:x,sideOffset:d,collisionPadding:12,style:s(_),children:e(i.Popup,{className:j,children:e(i.Viewport,{})})})})]})})});

package/dist/components/number-field/MPNumberField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPStyleProps } from '../../types.js';
+import type { MPControlEventProps, MPStyleProps } from '../../types.js';
 /**
  * Where the two steppers sit.
  *
@@ -14,7 +14,7 @@ import type { MPStyleProps } from '../../types.js';
  * nobody hits.
  */
 export type MPNumberFieldSteppers = 'end' | 'split' | 'none';
-export interface MPNumberFieldProps extends MPStyleProps {
+export interface MPNumberFieldProps extends MPStyleProps, MPControlEventProps<HTMLInputElement> {
     /** The number. Use with `onValueChange` for a controlled field. */
     value?: number | null;
     /** The starting number, for an uncontrolled field. */
@@ -129,4 +129,4 @@ export interface MPNumberFieldProps extends MPStyleProps {
  * owns the parsing against the locale, the clamping, the press-and-hold repeat on
  * the steppers, and the hidden input that submits with a form.
  */
-export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size, fullWidth, required, disabled, readOnly, name, id, className, style }: MPNumberFieldProps): React.JSX.Element;
+export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size: sizeProp, fullWidth, required, disabled, readOnly, name, id, className, style }: MPNumberFieldProps): React.JSX.Element;

package/dist/components/number-field/MPNumberField.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{NumberField as r}from"@base-ui/react/number-field";import{Field as n}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon.js";import{AddIcon as i,RemoveIcon as s}from"../../constants/icons.js";import{MPFieldLabel as o,MPFieldOutline as p,useFloatingLabel as m}from"../../internal/FieldOutline.js";import{useMPLocale as d,useMPMessages as c}from"../../internal/locale.js";import{NUMBER_FIELD as u}from"../../internal/messages/number-field.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{CONTROL_ICON as g,PROSE_TEXT as x,hasContent as b}from"../../internal/scale.js";const j={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:v,defaultValue:y,onValueChange:N,onValueCommitted:z,min:S,max:w,step:V,largeStep:k,smallStep:I,allowWheelScrub:q=!1,format:C,locale:L,steppers:M="end",incrementLabel:F,decrementLabel:O,label:P,floatingLabel:W=!0,description:B,errorMessage:R,placeholder:_,startIcon:D,size:G="md",fullWidth:T=!1,required:$=!1,disabled:A=!1,readOnly:E=!1,name:H,id:J,className:K,style:Q}){const U=c(u,d("string"==typeof L?L:void 0)),X=b(R),Y=j[G],Z=a.useId(),ee=J??Z,le="none"!==M&&!E&&!A,[ae,re]=a.useState(y??null),ne=void 0===v?ae:v,{shrunk:te,focusProps:ie}=m({floating:W&&b(P),filled:null!==ne,pinned:!!D||le&&"split"===M}),se=/*@__PURE__*/["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",Y.stepper].join(" "),oe=l(r.Decrement,{"aria-label":O??U.decrease,className:se,children:[e(f,{}),e(t,{icon:s,size:g[G]})]}),pe=l(r.Increment,{"aria-label":F??U.increase,className:se,children:[e(f,{}),e(t,{icon:i,size:g[G]})]});return l(n.Root,{className:["mp-number-field group flex-col align-top",T?"flex w-full":"inline-flex w-fit",K??""].filter(Boolean).join(" "),style:Q,disabled:A,invalid:X,"data-mp-size":G,...ie,children:[e(r.Root,{id:ee,name:H,className:"contents",value:v,defaultValue:y,onValueChange:e=>{re(e),N?.(e)},onValueCommitted:e=>z?.(e),min:S,max:w,step:V,largeStep:k,smallStep:I,allowWheelScrub:q,format:C,locale:L,disabled:A,readOnly:E,required:$,children:l("div",{className:"relative w-full",children:[l(r.Group,{className:["flex w-full items-center gap-2",Y.height,le&&"end"===M?`${Y.padding} pe-1`:le&&"split"===M?"px-1":Y.padding].join(" "),children:[le&&"split"===M?oe:null,D?e("span",{className:["flex shrink-0 items-center",A?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:D}):null,e(r.Input,{placeholder:te?_:void 0,className:["w-full min-w-0 flex-1 tabular-nums",x[G],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",le&&"split"===M?"text-center":""].filter(Boolean).join(" ")}),le&&"end"===M?l("span",{className:"flex shrink-0 items-center",children:[oe,pe]}):null,le&&"split"===M?pe:null]}),e(p,{label:P,required:$,notched:te}),b(P)?e(o,{size:G,label:P,required:$,htmlFor:ee,shrunk:te}):null]})}),e(h,{description:B,errorMessage:R,className:Y.padding})]})}
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as l from"react";import{NumberField as a}from"@base-ui/react/number-field";import{Field as r}from"@base-ui/react/field";import{MPIcon as t}from"../icon/MPIcon.js";import{AddIcon as i,RemoveIcon as o}from"../../constants/icons.js";import{MPFieldLabel as s,MPFieldOutline as p,useFloatingLabel as m}from"../../internal/FieldOutline.js";import{useMPLocale as d,useMPMessages as c}from"../../internal/locale.js";import{NUMBER_FIELD as u}from"../../internal/messages/number-field.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{MPSupportingText as h}from"../../internal/SupportingText.js";import{CONTROL_ICON as x,PROSE_TEXT as g,hasContent as b}from"../../internal/scale.js";import{useMPSize as j}from"../../internal/config.js";const y={xs:{padding:"px-2",height:"h-8",stepper:"size-6"},sm:{padding:"px-3",height:"h-10",stepper:"size-8"},md:{padding:"px-4",height:"h-14",stepper:"size-10"},lg:{padding:"px-4",height:"h-16",stepper:"size-11"},xl:{padding:"px-5",height:"h-18",stepper:"size-12"}};export function MPNumberField({value:v,defaultValue:N,onValueChange:w,onValueCommitted:z,onKeyDown:C,onKeyUp:k,onFocus:S,onBlur:M,onClick:V,onDoubleClick:D,onContextMenu:F,min:I,max:q,step:B,largeStep:K,smallStep:L,allowWheelScrub:O=!1,format:P,locale:W,steppers:R="end",incrementLabel:U,decrementLabel:_,label:G,floatingLabel:T=!0,description:$,errorMessage:A,placeholder:E,startIcon:H,size:J,fullWidth:Q=!1,required:X=!1,disabled:Y=!1,readOnly:Z=!1,name:ee,id:ne,className:le,style:ae}){const re=j(J),te=c(u,d("string"==typeof W?W:void 0)),ie=b(A),oe=y[re],se=l.useId(),pe=ne??se,me="none"!==R&&!Z&&!Y,[de,ce]=l.useState(N??null),ue=void 0===v?de:v,{shrunk:fe,focusProps:he}=m({floating:T&&b(G),filled:null!==ue,pinned:!!H||me&&"split"===R}),xe=/*@__PURE__*/["mp-number-field__stepper group relative flex shrink-0 items-center justify-center","rounded-mp-full cursor-pointer appearance-none bg-transparent p-0 font-[inherit]","text-mp-on-surface-variant outline-none","disabled:text-mp-on-surface/38 disabled:cursor-default",oe.stepper].join(" "),ge=n(a.Decrement,{"aria-label":_??te.decrease,className:xe,children:[e(f,{}),e(t,{icon:o,size:x[re]})]}),be=n(a.Increment,{"aria-label":U??te.increase,className:xe,children:[e(f,{}),e(t,{icon:i,size:x[re]})]});return n(r.Root,{className:["mp-number-field group flex-col align-top",Q?"flex w-full":"inline-flex w-fit",le??""].filter(Boolean).join(" "),style:ae,disabled:Y,invalid:ie,"data-mp-size":re,...he,children:[e(a.Root,{id:pe,name:ee,className:"contents",value:v,defaultValue:N,onValueChange:e=>{ce(e),w?.(e)},onValueCommitted:e=>z?.(e),min:I,max:q,step:B,largeStep:K,smallStep:L,allowWheelScrub:O,format:P,locale:W,disabled:Y,readOnly:Z,required:X,children:n("div",{className:"relative w-full",children:[n(a.Group,{className:["flex w-full items-center gap-2",oe.height,me&&"end"===R?`${oe.padding} pe-1`:me&&"split"===R?"px-1":oe.padding].join(" "),children:[me&&"split"===R?ge:null,H?e("span",{className:["flex shrink-0 items-center",Y?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:H}):null,e(a.Input,{placeholder:fe?E:void 0,onKeyDown:C,onKeyUp:k,onFocus:S,onBlur:M,onClick:V,onDoubleClick:D,onContextMenu:F,className:["w-full min-w-0 flex-1 tabular-nums",g[re],"font-[family-name:var(--mp-sys-typescale-body-large-font)]","appearance-none border-0 bg-transparent px-0 outline-none","caret-mp-primary text-mp-on-surface","placeholder:text-mp-on-surface-variant","disabled:text-mp-on-surface/38 disabled:placeholder:text-mp-on-surface/38",me&&"split"===R?"text-center":""].filter(Boolean).join(" ")}),me&&"end"===R?n("span",{className:"flex shrink-0 items-center",children:[ge,be]}):null,me&&"split"===R?be:null]}),e(p,{label:G,required:X,notched:fe}),b(G)?e(s,{size:re,label:G,required:X,htmlFor:pe,shrunk:fe}):null]})}),e(h,{description:$,errorMessage:A,className:oe.padding})]})}

package/dist/components/otp-field/MPOtpField.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{MPSupportingText as n}from"../../internal/SupportingText.js";import{META_TEXT as l,STACK_GAP as i,hasContent as m}from"../../internal/scale.js";const s={xs:"h-8 w-7",sm:"h-10 w-9",md:"h-14 w-12",lg:"h-16 w-14",xl:"h-18 w-16"},d={xs:"text-mp-body-large",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},u={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},p={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const MPOtpField=/*@__PURE__*/a.forwardRef(function({size:c="md",fullWidth:f=!1,length:h=6,charset:x="numeric",mask:b=!1,groupSize:g,separator:v="–",value:y,defaultValue:w,onValueChange:j,onComplete:M,onValueInvalid:V,autoSubmit:N=!1,label:C,description:F,errorMessage:S,name:z,required:I=!1,disabled:O=!1,readOnly:R=!1,autoFocus:$=!1,className:k,style:q},T){const A=Math.min(12,Math.max(2,Math.round(h))),B=m(S),L=g&&g>0?Math.round(g):0,P=/*@__PURE__*/["rounded-mp-xs border bg-transparent text-center font-[inherit]",s[c],d[c],"transition-[border-color,color] duration-(--mp-sys-motion-duration-short4)","focus:border-2 focus:border-mp-primary focus:outline-none",O?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":B?"border-mp-error text-mp-on-surface caret-mp-error hover:border-mp-error":R?"border-mp-outline-variant text-mp-on-surface cursor-default":"border-mp-outline text-mp-on-surface caret-mp-primary hover:border-mp-on-surface"].join(" ");return r(t.Root,{disabled:O,invalid:B,"data-mp-size":c,className:["mp-otp-field flex-col align-top",i[c],f?"flex w-full":"inline-flex w-fit",k??""].filter(Boolean).join(" "),style:q,children:[m(C)?r(t.Label,{className:`${l} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 data-invalid:text-mp-error`,children:[C,I?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(o.Root,{ref:T,length:A,validationType:p[x],mask:b,name:z,required:I,disabled:O,readOnly:R,autoSubmit:N,value:y,defaultValue:w,onValueChange:e=>j?.(e),onValueComplete:e=>M?.(e),onValueInvalid:e=>V?.(e),className:`flex items-center ${u[c]}`,children:Array.from({length:A},(t,n)=>r(a.Fragment,{children:[L>0&&n>0&&n%L===0?e("span",{"aria-hidden":"true",className:`text-mp-on-surface-variant px-0.5 select-none ${d[c]}`,children:v}):null,e(o.Input,{className:P,autoFocus:$&&0===n})]},n))}),e(n,{description:F,errorMessage:S})]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{MPSupportingText as n}from"../../internal/SupportingText.js";import{META_TEXT as l,STACK_GAP as i,hasContent as m}from"../../internal/scale.js";import{useMPSize as s}from"../../internal/config.js";const u={xs:"h-8 w-7",sm:"h-10 w-9",md:"h-14 w-12",lg:"h-16 w-14",xl:"h-18 w-16"},d={xs:"text-mp-body-large",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},p={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},c={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const MPOtpField=/*@__PURE__*/a.forwardRef(function({size:f,fullWidth:h=!1,length:x=6,charset:g="numeric",mask:b=!1,groupSize:v,separator:y="–",value:j,defaultValue:w,onValueChange:M,onComplete:V,onValueInvalid:N,autoSubmit:C=!1,label:F,description:S,errorMessage:z,name:I,required:O=!1,disabled:R=!1,readOnly:$=!1,autoFocus:k=!1,className:q,style:T},A){const B=s(f),L=Math.min(12,Math.max(2,Math.round(x))),P=m(z),W=v&&v>0?Math.round(v):0,D=/*@__PURE__*/["rounded-mp-xs border bg-transparent text-center font-[inherit]",u[B],d[B],"transition-[border-color,color] duration-(--mp-sys-motion-duration-short4)","focus:border-2 focus:border-mp-primary focus:outline-none",R?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":P?"border-mp-error text-mp-on-surface caret-mp-error hover:border-mp-error":$?"border-mp-outline-variant text-mp-on-surface cursor-default":"border-mp-outline text-mp-on-surface caret-mp-primary hover:border-mp-on-surface"].join(" ");return r(t.Root,{disabled:R,invalid:P,"data-mp-size":B,className:["mp-otp-field flex-col align-top",i[B],h?"flex w-full":"inline-flex w-fit",q??""].filter(Boolean).join(" "),style:T,children:[m(F)?r(t.Label,{className:`${l} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 data-invalid:text-mp-error`,children:[F,O?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(o.Root,{ref:A,length:L,validationType:c[g],mask:b,name:I,required:O,disabled:R,readOnly:$,autoSubmit:C,value:j,defaultValue:w,onValueChange:e=>M?.(e),onValueComplete:e=>V?.(e),onValueInvalid:e=>N?.(e),className:`flex items-center ${p[B]}`,children:Array.from({length:L},(t,n)=>r(a.Fragment,{children:[W>0&&n>0&&n%W===0?e("span",{"aria-hidden":"true",className:`text-mp-on-surface-variant px-0.5 select-none ${d[B]}`,children:y}):null,e(o.Input,{className:D,autoFocus:k&&0===n})]},n))}),e(n,{description:S,errorMessage:z})]})});

package/dist/components/overlay/MPOverlay.d.ts

@@ -99,4 +99,4 @@ export interface MPOverlayProps {
  * else Base UI owns: the portal, the scroll lock, the focus held inside, the page
  * behind going inert, and focus returning to wherever it came from on close.
  */
-export declare function MPOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, label, locale: localeProp, className, style, children }: MPOverlayProps): React.JSX.Element;
+export declare function MPOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size: sizeProp, label, locale: localeProp, className, style, children }: MPOverlayProps): React.JSX.Element;

package/dist/components/overlay/MPOverlay.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{OVERLAY as t}from"../../internal/messages/overlay.js";import{FADE as n,PORTAL_LAYER as i,SCRIM as o}from"../../internal/surface.js";import{SHEET_PAD as m}from"../../internal/scale.js";const c={scrim:o,blur:"bg-mp-scrim/20 [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-mp-surface",clear:""},p={start:"items-start",center:"items-center",end:"items-end"};export function MPOverlay({open:o,defaultOpen:f,onOpenChange:d,tone:u="scrim",dismissible:x=!1,modal:b=!0,align:j="center",size:h="md",label:y,locale:g,className:O,style:N,children:P}){const k=s(t,l(g));return e(r.Root,{open:o,defaultOpen:f,modal:b,disablePointerDismissal:!x,onOpenChange:(e,a)=>{x||e||"escape-key"!==a.reason?d?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`${i} fixed inset-0 ${n} ${c[u]}`}),e(r.Viewport,{className:[i,"fixed inset-0 flex justify-center",p[j],m[h]].join(" "),children:e(r.Popup,{"aria-label":y??k.label,"data-mp-size":h,className:["mp-overlay flex max-h-full max-w-full flex-col items-center justify-center","text-mp-on-surface outline-none",n,O??""].filter(Boolean).join(" "),style:N,children:P})})]})})}
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Dialog as a}from"@base-ui/react/dialog";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{OVERLAY as t}from"../../internal/messages/overlay.js";import{FADE as n,PORTAL_LAYER as i,SCRIM as o}from"../../internal/surface.js";import{SHEET_PAD as m}from"../../internal/scale.js";import{useMPSize as c}from"../../internal/config.js";const p={scrim:o,blur:"bg-mp-scrim/20 [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-mp-surface",clear:""},f={start:"items-start",center:"items-center",end:"items-end"};export function MPOverlay({open:o,defaultOpen:d,onOpenChange:u,tone:x="scrim",dismissible:j=!1,modal:b=!0,align:g="center",size:h,label:y,locale:O,className:N,style:P,children:k}){const v=c(h),$=s(t,l(O));return e(a.Root,{open:o,defaultOpen:d,modal:b,disablePointerDismissal:!j,onOpenChange:(e,r)=>{j||e||"escape-key"!==r.reason?u?.(e):r.cancel()},children:r(a.Portal,{children:[e(a.Backdrop,{className:`${i} fixed inset-0 ${n} ${p[x]}`}),e(a.Viewport,{className:[i,"fixed inset-0 flex justify-center",f[g],m[v]].join(" "),children:e(a.Popup,{"aria-label":y??$.label,"data-mp-size":v,className:["mp-overlay flex max-h-full max-w-full flex-col items-center justify-center","text-mp-on-surface outline-none",n,N??""].filter(Boolean).join(" "),style:P,children:k})})]})})}

package/dist/components/pagination/MPPagination.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronLeftIcon as i,ChevronRightIcon as r,ChevronsLeftIcon as l,ChevronsRightIcon as s}from"../../constants/icons.js";import{accentSlots as o}from"../../internal/accent.js";import{fillMessage as m}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{PAGINATION as u}from"../../internal/messages/pagination.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{CONTROL_ICON as d,CONTROL_TEXT as h}from"../../internal/scale.js";import{VISUALLY_HIDDEN as g}from"../../internal/visually-hidden.js";const x={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},b={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function j(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=/*@__PURE__*/t.forwardRef(function({count:y,page:v,defaultPage:M=1,onPageChange:w,siblingCount:N=1,boundaryCount:P=1,showEdges:C=!1,showArrows:S=!0,size:K="md",color:_="primary",fullWidth:k=!1,disabled:z=!1,getPageHref:$,locale:A,labels:B,className:D,style:E,...H},I){const L=c(A),R=p(u,L,B),[W,q]=t.useState(M),F=void 0!==v,G=Math.min(Math.max(v??W,1),Math.max(y,1));if(y<2)return null;const J=function(e,n,t,a){const i=j(1,Math.min(a,e)),r=j(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),s=Math.min(Math.max(n+t,a+2*t+2),r.length>0?r[0]-2:e-1);return[...i,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...j(l,s),...s<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...r]}(y,G,N,P),O=G<=1,Q=G>=y,T=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||$&&!w||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),y);n!==G&&(F||q(n),w?.(n))})(n))},U=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",x[K],h[K],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),V=(t,a,i,r,l,s,o)=>e("li",{className:"flex",children:!$||i||r?n("button",{type:"button",disabled:i,"aria-label":l,"aria-current":r?"page":void 0,className:U(r,i),onClick:e=>T(e,a),children:[i?null:e(f,{}),e("span",{className:"relative",children:s})]}):n("a",{href:$(a),rel:o,"aria-label":l,className:U(!1,!1),onClick:e=>T(e,a),children:[e(f,{}),e("span",{className:"relative",children:s})]})},t),X=n=>e(a,{icon:n,size:d[K],className:"rtl:rotate-180"});return n("nav",{ref:I,"aria-label":R.label,"data-mp-size":K,className:["mp-pagination flex",k?"w-full justify-center":"",D??""].filter(Boolean).join(" "),style:{...o(_),...E},...H,children:[n("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${b[K]}`,children:[C?V("first",1,z||O,!1,R.first,X(l)):null,S?V("previous",G-1,z||O,!1,R.previous,X(i),"prev"):null,J.map((n,t)=>"number"==typeof n?V(`slot-${t}`,n,z,n===G,m(R.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",x[K],h[K]].join(" "),children:"…"},`slot-${t}`)),S?V("next",G+1,z||Q,!1,R.next,X(r),"next"):null,C?V("last",y,z||Q,!1,R.last,X(s)):null]}),e("span",{className:g,"aria-live":"polite",children:m(R.status,{page:String(G),total:String(y)})})]})});
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronLeftIcon as i,ChevronRightIcon as r,ChevronsLeftIcon as l,ChevronsRightIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{fillMessage as m}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{PAGINATION as u}from"../../internal/messages/pagination.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{CONTROL_ICON as d,CONTROL_TEXT as h}from"../../internal/scale.js";import{VISUALLY_HIDDEN as g}from"../../internal/visually-hidden.js";import{useMPColor as x,useMPSize as b}from"../../internal/config.js";const j={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},v={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function y(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=/*@__PURE__*/t.forwardRef(function({count:M,page:w,defaultPage:N=1,onPageChange:P,siblingCount:C=1,boundaryCount:S=1,showEdges:K=!1,showArrows:_=!0,size:k,color:z,fullWidth:$=!1,disabled:A=!1,getPageHref:B,locale:D,labels:E,className:H,style:I,...L},R){const W=b(k),q=x(z),F=c(D),G=p(u,F,E),[J,O]=t.useState(N),Q=void 0!==w,T=Math.min(Math.max(w??J,1),Math.max(M,1));if(M<2)return null;const U=function(e,n,t,a){const i=y(1,Math.min(a,e)),r=y(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),o=Math.min(Math.max(n+t,a+2*t+2),r.length>0?r[0]-2:e-1);return[...i,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...y(l,o),...o<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...r]}(M,T,C,S),V=T<=1,X=T>=M,Y=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||B&&!P||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),M);n!==T&&(Q||O(n),P?.(n))})(n))},Z=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",j[W],h[W],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),ee=(t,a,i,r,l,o,s)=>e("li",{className:"flex",children:!B||i||r?n("button",{type:"button",disabled:i,"aria-label":l,"aria-current":r?"page":void 0,className:Z(r,i),onClick:e=>Y(e,a),children:[i?null:e(f,{}),e("span",{className:"relative",children:o})]}):n("a",{href:B(a),rel:s,"aria-label":l,className:Z(!1,!1),onClick:e=>Y(e,a),children:[e(f,{}),e("span",{className:"relative",children:o})]})},t),ne=n=>e(a,{icon:n,size:d[W],className:"rtl:rotate-180"});return n("nav",{ref:R,"aria-label":G.label,"data-mp-size":W,className:["mp-pagination flex",$?"w-full justify-center":"",H??""].filter(Boolean).join(" "),style:{...s(q),...I},...L,children:[n("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${v[W]}`,children:[K?ee("first",1,A||V,!1,G.first,ne(l)):null,_?ee("previous",T-1,A||V,!1,G.previous,ne(i),"prev"):null,U.map((n,t)=>"number"==typeof n?ee(`slot-${t}`,n,A,n===T,m(G.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",j[W],h[W]].join(" "),children:"…"},`slot-${t}`)),_?ee("next",T+1,A||X,!1,G.next,ne(r),"next"):null,K?ee("last",M,A||X,!1,G.last,ne(o)):null]}),e("span",{className:g,"aria-live":"polite",children:m(G.status,{page:String(T),total:String(M)})})]})});

package/dist/components/panes/MPPanes.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent.js";import{pixelsIn as o}from"../../internal/length.js";const i=/*@__PURE__*/n.createContext({basis:null,id:null}),a={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},s={xs:4,sm:6,md:8,lg:10,xl:12};function l(e,t,n){if(null!=e)return"number"==typeof e?t*e/100:o(e,t,n)}export const MPPanes=/*@__PURE__*/n.forwardRef(function({orientation:o="horizontal",resizable:c=!0,color:u="primary",size:d="md",onResize:m,onResizeEnd:f,className:p,style:h,children:g,...v},y){const x=n.Children.toArray(g).filter(n.isValidElement),b=x.length,w=n.useId(),z=n.useRef(null),S=n.useCallback(e=>{z.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),j=n.useRef([]),E=x.map(e=>e.props),[R,M]=n.useState(null),k=R&&R.length===b?R:null,C=n.useRef(null);n.useLayoutEffect(()=>{j.current=E,C.current=k});const L=n.useRef(null);n.useEffect(()=>()=>{null!==L.current&&(document.body.style.userSelect=L.current,L.current=null)},[]);const P="horizontal"===o,$=s[d]*Math.max(0,b-1);function _(e){const t=z.current,n=C.current;if(!c||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(P?r.width:r.height)-$;if(o<=0)return null;const i=j.current[e],a=j.current[e+1],s=n[e]*o,u=s+n[e+1]*o,d=Math.max(l(i?.minSize,o,t)??0,u-(l(a?.maxSize,o,t)??u)),f=Math.min(l(i?.maxSize,o,t)??u,u-(l(a?.minSize,o,t)??0));return f<d?null:{root:t,current:n,lower:d,upper:f,start:s,resize(t){const r=Math.min(f,Math.max(d,s+t)),i=[...n];return i[e]=r/o,i[e+1]=(u-r)/o,M(i),m?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=z.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(P?t.width:t.height)-$;n<=0||M(t=>t&&t.length===b?t:function(e,t,n){const r=e.map(e=>l(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,s=r.map(e=>Math.max(0,e??a)),c=s.reduce((e,t)=>e+t,0);return c<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/c)}(j.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[b,P,$]);const B=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",a[d],"transition-colors duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-0","focus-visible:outline-solid outline-none",c?[P?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:S,"data-mp-size":d,className:["mp-panes flex h-full w-full",P?"flex-row":"flex-col","min-h-0 min-w-0",p??""].filter(Boolean).join(" "),style:{...r(u),...h},...v,children:x.map((r,o)=>t(n.Fragment,{children:[o>0?e("div",{role:"separator","aria-orientation":P?"vertical":"horizontal","aria-valuenow":k?Math.round(100*k[o-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!c||void 0,"aria-controls":`${w}-${o-1}`,tabIndex:c?0:-1,className:B,onPointerDown:e=>{0===e.button&&function(e,t){const n=_(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;L.current=o,document.body.style.userSelect="none";const i=P?t.clientX:t.clientY,a=P&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=P?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,L.current=null,f?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(o-1,e)},onKeyDown:e=>{const t=P?"ArrowLeft":"ArrowUp",n=P?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n){e.preventDefault();const t=P&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1;return void function(e,t){const n=_(e);if(!n)return;const r=n.resize(t);f?.(r.map(e=>100*e))}(o-1,(e.key===n?16:-16)*t)}"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=_(e);if(!n)return;const r=n.resize(n[t]-n.start);f?.(r.map(e=>100*e))}(o-1,"Home"===e.key?"lower":"upper"))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",P?"h-full w-px":"h-px w-full",c?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(i.Provider,{value:{basis:k?`calc((100% - ${$}px) * ${k[o].toFixed(6)})`:null,id:`${w}-${o}`},children:r})]},r.key??o))})});export const MPPane=/*@__PURE__*/n.forwardRef(function({defaultSize:t,minSize:r,maxSize:o,className:a,style:s,children:l,...c},u){const{basis:d,id:m}=n.useContext(i);return e("div",{ref:u,id:m??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",a??""].filter(Boolean).join(" "),style:{flex:d?`0 0 ${d}`:"1 1 0%",...s},...c,children:l})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent.js";import{pixelsIn as o}from"../../internal/length.js";import{useMPColor as i,useMPSize as a}from"../../internal/config.js";const s=/*@__PURE__*/n.createContext({basis:null,id:null}),l={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},c={xs:4,sm:6,md:8,lg:10,xl:12};function u(e,t,n){if(null!=e)return"number"==typeof e?t*e/100:o(e,t,n)}export const MPPanes=/*@__PURE__*/n.forwardRef(function({orientation:o="horizontal",resizable:d=!0,color:m,size:f,onResize:p,onResizeEnd:h,className:g,style:v,children:x,...y},b){const w=i(m),z=a(f),S=n.Children.toArray(x).filter(n.isValidElement),j=S.length,E=n.useId(),R=n.useRef(null),M=n.useCallback(e=>{R.current=e,"function"==typeof b?b(e):b&&(b.current=e)},[b]),k=n.useRef([]),C=S.map(e=>e.props),[L,P]=n.useState(null),$=L&&L.length===j?L:null,_=n.useRef(null);n.useLayoutEffect(()=>{k.current=C,_.current=$});const B=n.useRef(null);n.useEffect(()=>()=>{null!==B.current&&(document.body.style.userSelect=B.current,B.current=null)},[]);const N="horizontal"===o,A=c[z]*Math.max(0,j-1);function D(e){const t=R.current,n=_.current;if(!d||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(N?r.width:r.height)-A;if(o<=0)return null;const i=k.current[e],a=k.current[e+1],s=n[e]*o,l=s+n[e+1]*o,c=Math.max(u(i?.minSize,o,t)??0,l-(u(a?.maxSize,o,t)??l)),m=Math.min(u(i?.maxSize,o,t)??l,l-(u(a?.minSize,o,t)??0));return m<c?null:{root:t,current:n,lower:c,upper:m,start:s,resize(t){const r=Math.min(m,Math.max(c,s+t)),i=[...n];return i[e]=r/o,i[e+1]=(l-r)/o,P(i),p?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=R.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(N?t.width:t.height)-A;n<=0||P(t=>t&&t.length===j?t:function(e,t,n){const r=e.map(e=>u(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,s=r.map(e=>Math.max(0,e??a)),l=s.reduce((e,t)=>e+t,0);return l<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/l)}(k.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[j,N,A]);const I=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",l[z],"transition-colors duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-0","focus-visible:outline-solid outline-none",d?[N?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:M,"data-mp-size":z,className:["mp-panes flex h-full w-full",N?"flex-row":"flex-col","min-h-0 min-w-0",g??""].filter(Boolean).join(" "),style:{...r(w),...v},...y,children:S.map((r,o)=>t(n.Fragment,{children:[o>0?e("div",{role:"separator","aria-orientation":N?"vertical":"horizontal","aria-valuenow":$?Math.round(100*$[o-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!d||void 0,"aria-controls":`${E}-${o-1}`,tabIndex:d?0:-1,className:I,onPointerDown:e=>{0===e.button&&function(e,t){const n=D(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;B.current=o,document.body.style.userSelect="none";const i=N?t.clientX:t.clientY,a=N&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=N?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,B.current=null,h?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(o-1,e)},onKeyDown:e=>{const t=N?"ArrowLeft":"ArrowUp",n=N?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n){e.preventDefault();const t=N&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1;return void function(e,t){const n=D(e);if(!n)return;const r=n.resize(t);h?.(r.map(e=>100*e))}(o-1,(e.key===n?16:-16)*t)}"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=D(e);if(!n)return;const r=n.resize(n[t]-n.start);h?.(r.map(e=>100*e))}(o-1,"Home"===e.key?"lower":"upper"))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",N?"h-full w-px":"h-px w-full",d?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(s.Provider,{value:{basis:$?`calc((100% - ${A}px) * ${$[o].toFixed(6)})`:null,id:`${E}-${o}`},children:r})]},r.key??o))})});export const MPPane=/*@__PURE__*/n.forwardRef(function({defaultSize:t,minSize:r,maxSize:o,className:i,style:a,children:l,...c},u){const{basis:d,id:m}=n.useContext(s);return e("div",{ref:u,id:m??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",i??""].filter(Boolean).join(" "),style:{flex:d?`0 0 ${d}`:"1 1 0%",...a},...c,children:l})});