material-plus-ui 1.3.0 → 1.4.0

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPResponsive } from '../../types';
+import type { MPResponsive } from '../../types.js';
 /**
  * How a row divides the space its items did not take.
  *

package/dist/components/grid/MPGrid.js

@@ -1 +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}})});

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

@@ -1,2 +1,2 @@
-export { MPGrid, MPGridItem } from './MPGrid';
-export type { MPGridAlign, MPGridAlignSelf, MPGridItemProps, MPGridJustify, MPGridProps } from './MPGrid';
+export { MPGrid, MPGridItem } from './MPGrid.js';
+export type { MPGridAlign, MPGridAlignSelf, MPGridItemProps, MPGridJustify, MPGridProps } from './MPGrid.js';

package/dist/components/grid/index.js

@@ -1 +1 @@
-export{MPGrid,MPGridItem}from"./MPGrid";
+export{MPGrid,MPGridItem}from"./MPGrid.js";

package/dist/components/header/MPHeader.d.ts

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPAlign, MPPosition, MPSize, MPVariant } from '../../types.js';
+export interface MPHeaderProps extends Omit<React.ComponentPropsWithoutRef<'header'>, 'title'> {
+    /**
+     * The leading slot: the mark, the product's name, the thing that is the same
+     * on every page — and, on a narrow window, the
+     * [MPSidebarTrigger](./sidebar#mpsidebartrigger) that goes ahead of it.
+     *
+     * A slot rather than the first of `children` because the three regions of a
+     * bar are laid out *against each other* — the middle can only be centred on
+     * the bar if the two ends are the component's to measure — and a caller
+     * writing three wrappers by hand is a caller whose header drifts from the next
+     * one.
+     */
+    brand?: React.ReactNode;
+    /**
+     * The trailing slot: the account menu, the theme switch, the call to action.
+     * Laid out end-aligned, so a row of icon buttons needs no wrapper of its own.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Where the middle slot sits.
+     *
+     * `center` is MD3's own **center-aligned top app bar**, and it is centred on
+     * the *bar* rather than in the space left over: both ends are given equal
+     * shares, so the middle stays on the bar's midline however long the brand is.
+     * @default 'start'
+     */
+    align?: MPAlign;
+    /**
+     * How the bar sits in the page's scroll, spelled the way CSS spells it.
+     *
+     * `sticky` — the default — holds it against the top of the window once the
+     * page has scrolled to it, while leaving it in the flow so nothing has to be
+     * padded out of its way. `fixed` takes it out of the flow entirely, which an
+     * [MPPageLayout](./page-layout) answers by reserving its height. `static` lets
+     * it scroll away.
+     * @default 'sticky'
+     */
+    position?: MPPosition;
+    /**
+     * How much surface the bar paints, on the **container** ladder — the bar is
+     * never dyed, because what sits on it arrives with colours of its own.
+     *
+     * `tonal` is the default and is MD3's own scrolled top app bar:
+     * `surface-container` against the page's `surface`. `outlined` is the flat one
+     * — the page's own surface with a hairline where it ends — and `text` paints
+     * nothing at all, which is what a bar over a hero image wants.
+     * @default 'tonal'
+     */
+    variant?: MPVariant;
+    /**
+     * The bar's height floor, its gutter and the air between its slots.
+     *
+     * `md` is 64px, which is MD3's own small top app bar. It is a floor rather
+     * than a height: a bar whose middle slot wrapped onto a second line would
+     * otherwise clip it.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Holds the row of slots to a measure and centres it while the sheet itself
+     * still spans the window. The same ladder [MPContainer](./container)'s
+     * `maxWidth` uses, so a header and the container under it line up on one edge.
+     * @default 'none'
+     */
+    maxWidth?: MPSize | 'none';
+    /**
+     * The gutter down each side of the row.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * The name the bar is announced by. Worth writing when a page has more than
+     * one `<header>` in it — an article's own and the site's — because "banner"
+     * twice tells a reader which is which not at all.
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<header>`. Base UI's own escape hatch, and
+     * rarely what you want: at the top level of a document that tag *is* the
+     * `banner` landmark, and it is what says so to a screen reader's landmark
+     * list, to a reader mode and to a crawler.
+     */
+    render?: useRender.RenderProp;
+    /** The middle slot: a row of navigation links, a search field, a headline. */
+    children?: React.ReactNode;
+}
+/**
+ * The bar across the top of a page. **MD3's top app bar**, with the site's own
+ * three regions on it.
+ *
+ * A real `<header>`, which is the whole reason it is a component rather than a
+ * row of divs: at the top level of a document that tag is the `banner` landmark,
+ * and it is what a screen reader's landmark list, a reader mode and a search
+ * engine's understanding of the page are built out of.
+ *
+ * The slots are props rather than compound sub-components, for
+ * [MPCard](./card)'s reason: the arrangement is fixed — brand, middle, actions —
+ * and what a caller wants to decide is what goes in each. That the middle can be
+ * centred on the bar's own midline is only possible *because* the ends are the
+ * component's to measure.
+ *
+ * ## Why there is no `divider`
+ *
+ * [MPBottomNavigation](./bottom-navigation) has one and this does not, and the
+ * difference is that this takes a `variant`. MD3 separates a bar from the
+ * content by **tone** — `surface-container` against `surface` — and the case a
+ * hairline exists for is the bar that paints the page's own surface. That bar is
+ * `variant="outlined"`, and the rule is what `outlined` *means* here: a
+ * container's outline is a hairline all the way round, and a bar has exactly one
+ * edge with anything on the other side of it.
+ *
+ * ## Inside a layout, and outside one
+ *
+ * Inside an [MPPageLayout](./page-layout) the bar registers itself, so a column
+ * that holds its place knows how far down the window to start and a `fixed` bar
+ * has its height reserved. Outside one it is simply a bar, and everything above
+ * still holds.
+ */
+export declare const MPHeader: React.ForwardRefExoticComponent<MPHeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/components/header/MPHeader.js

@@ -0,0 +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}})});

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

@@ -0,0 +1,2 @@
+export { MPHeader } from './MPHeader.js';
+export type { MPHeaderProps } from './MPHeader.js';

package/dist/components/header/index.js

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

package/dist/components/highlight/MPHighlight.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { MPTypographyWeight } from '../typography/MPTypography';
-import type { MPColor, MPVariant } from '../../types';
+import type { MPTypographyWeight } from '../typography/MPTypography.js';
+import type { MPColor, MPVariant } from '../../types.js';
 /**
  * The four weights a mark can be drawn at.
  *
@@ -19,6 +19,13 @@ export interface MPHighlightProps extends Omit<React.ComponentPropsWithoutRef<'s
      * letters of it. A `RegExp` is used as written, with the global flag forced on;
      * `caseSensitive` and `wholeWord` are ignored for it, because a regular
      * expression already says both of those things itself.
+     *
+     * Strings are escaped, so a search box's contents are safe to pass straight
+     * through however they are spelled. A `RegExp` is **not** — it is run as
+     * written, which is the point of accepting one. Building one out of text
+     * somebody else typed is a denial of service waiting for the input that
+     * backtracks; escape it into a string term instead, or keep the expression a
+     * literal in your own source.
      */
     query: string | string[] | RegExp;
     /**

package/dist/components/highlight/MPHighlight.js

@@ -1 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{accentSlots as t}from"../../internal/accent";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border border-(--_mp-accent) bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i=/[\p{L}\p{N}_]/u;function l(e){return e.replace(/[-.*+?^${}()|[\]\\]/g,"\\$&")}function a(e,n,t){const r=n>0?e[n-1]:"",o=t<e.length?e[t]:"";return!i.test(r)&&!i.test(o)}function c(e,n,t,r){n.lastIndex=0;const o=[];let i,l=0;for(;null!==(i=n.exec(e));){if(""===i[0]){n.lastIndex+=1;continue}const c=i.index,s=c+i[0].length;t&&!a(e,c,s)||(c>l&&o.push(e.slice(l,c)),o.push(r(i[0],String(c))),l=s)}return 0===o.length?e:(l<e.length&&o.push(e.slice(l)),o)}function s(e,t,r,o){if("string"==typeof e)return c(e,t,r,o);if("number"==typeof e)return c(String(e),t,r,o);if(Array.isArray(e))return n.Children.map(e,e=>s(e,t,r,o));if(n.isValidElement(e)){const i=e.props.children;return void 0===i||"function"==typeof i?e:n.cloneElement(e,void 0,s(i,t,r,o))}return e}export const MPHighlight=/*@__PURE__*/n.forwardRef(function({query:i,variant:a="tonal",color:c="tertiary",caseSensitive:u=!1,wholeWord:f=!1,underline:m=!1,weight:p,className:g,style:d,children:h,...x},b){const y=i instanceof RegExp?`re ${i.source} ${i.flags}`:Array.isArray(i)?`a ${i.join("\0")}`:`s ${i}`,_=n.useMemo(()=>function(e,n){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const t=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===t.length?null:new RegExp(t.map(l).join("|"),n?"gu":"giu")}(i,u),[y,u]),$=["rounded-mp-xs -mx-0.5 px-0.5","box-decoration-clone",r[a],m?"underline decoration-2 underline-offset-2":"",p?o[p]:""].filter(Boolean).join(" "),j=n.useMemo(()=>_?s(h,_,f,(n,t)=>e("mark",{className:$,children:n},t)):h,[h,_,f,$]);return e("span",{ref:b,className:["mp-highlight",g??""].filter(Boolean).join(" "),style:{...t(c),...d},...x,children:j})});
+"use client";
+import{jsx as e}from"react/jsx-runtime";import*as n from"react";import{accentSlots as t}from"../../internal/accent.js";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",outlined:"border border-(--_mp-accent) bg-transparent text-(--_mp-accent)",text:"bg-transparent text-(--_mp-accent)"},o={regular:"font-normal",medium:"font-medium",semibold:"font-semibold",bold:"font-bold"},i=/[\p{L}\p{N}_]/u;function l(e){return e.replace(/[-.*+?^${}()|[\]\\]/g,"\\$&")}function a(e,n,t){const r=n>0?e[n-1]:"",o=t<e.length?e[t]:"";return!i.test(r)&&!i.test(o)}function c(e,n,t,r){n.lastIndex=0;const o=[];let i,l=0;for(;null!==(i=n.exec(e));){if(""===i[0]){n.lastIndex+=1;continue}const c=i.index,s=c+i[0].length;t&&!a(e,c,s)||(c>l&&o.push(e.slice(l,c)),o.push(r(i[0],String(c))),l=s)}return 0===o.length?e:(l<e.length&&o.push(e.slice(l)),o)}function s(e,t,r,o){if("string"==typeof e)return c(e,t,r,o);if("number"==typeof e)return c(String(e),t,r,o);if(Array.isArray(e))return n.Children.map(e,e=>s(e,t,r,o));if(n.isValidElement(e)){const i=e.props.children;return void 0===i||"function"==typeof i?e:n.cloneElement(e,void 0,s(i,t,r,o))}return e}export const MPHighlight=/*@__PURE__*/n.forwardRef(function({query:i,variant:a="tonal",color:c="tertiary",caseSensitive:u=!1,wholeWord:f=!1,underline:m=!1,weight:p,className:g,style:d,children:h,...x},b){const y=i instanceof RegExp?`re ${i.source} ${i.flags}`:Array.isArray(i)?`a ${i.join("\0")}`:`s ${i}`,_=n.useMemo(()=>function(e,n){if(e instanceof RegExp)return new RegExp(e.source,e.global?e.flags:`${e.flags}g`);const t=(Array.isArray(e)?e:[e]).map(e=>e.trim()).filter(Boolean).sort((e,n)=>n.length-e.length);return 0===t.length?null:new RegExp(t.map(l).join("|"),n?"gu":"giu")}(i,u),[y,u]),j=["rounded-mp-xs -mx-0.5 px-0.5","box-decoration-clone",r[a],m?"underline decoration-2 underline-offset-2":"",p?o[p]:""].filter(Boolean).join(" "),$=n.useMemo(()=>_?s(h,_,f,(n,t)=>e("mark",{className:j,children:n},t)):h,[h,_,f,j]);return e("span",{ref:b,className:["mp-highlight",g??""].filter(Boolean).join(" "),style:{...t(c),...d},...x,children:$})});

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

@@ -1,2 +1,2 @@
-export { MPHighlight } from './MPHighlight';
-export type { MPHighlightProps, MPHighlightVariant } from './MPHighlight';
+export { MPHighlight } from './MPHighlight.js';
+export type { MPHighlightProps, MPHighlightVariant } from './MPHighlight.js';

package/dist/components/highlight/index.js

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

package/dist/components/icon/MPIcon.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPIconGlyph } from '../../types';
+import type { MPIconGlyph } from '../../types.js';
 export interface MPIconProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
     /**
      * The glyph to draw: a component from an icon set, or an element of your own.

package/dist/components/icon/MPIcon.js

@@ -1 +1,2 @@
+"use client";
 import{jsx as e}from"react/jsx-runtime";import*as i from"react";function o(e){return!i.isValidElement(e)}export const MPIcon=/*@__PURE__*/i.forwardRef(function({icon:r,size:t,color:l,strokeWidth:n,center:s=!1,label:c,className:a,style:d,...f},m){const u=["mp-icon inline-flex shrink-0 items-center justify-center align-middle",void 0===t?"":"[&>svg]:block [&>svg]:size-full [&>img]:block [&>img]:size-full",s?"justify-self-center":"",a??""].filter(Boolean).join(" ");return e("span",{ref:m,className:u,style:{...void 0===t?{}:{width:t,height:t,fontSize:t},...void 0===l?{}:{color:l},...d},role:c?"img":void 0,"aria-label":c,"aria-hidden":!c||void 0,...f,children:o(r)?i.createElement(r,{size:t,color:void 0===l?"currentColor":l,strokeWidth:n}):r})});

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

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

package/dist/components/icon/index.js

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

package/dist/components/icon-button/MPIconButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MPButtonProps } from '../button/MPButton';
+import { type MPButtonProps } from '../button/MPButton.js';
 export interface MPIconButtonProps extends Omit<MPButtonProps, 'children' | 'startIcon' | 'endIcon' | 'fullWidth'> {
     /**
      * The glyph.

package/dist/components/icon-button/MPIconButton.js

@@ -1 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{MPButton as o}from"../button/MPButton";export const MPIconButton=/*@__PURE__*/r.forwardRef(function({icon:r,label:a,variant:n="text",...e},i){return t(o,{ref:i,"aria-label":a,variant:n,startIcon:r,...e})});
+"use client";
+import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{MPButton as o}from"../button/MPButton.js";export const MPIconButton=/*@__PURE__*/r.forwardRef(function({icon:r,label:a,variant:n="text",...e},i){return t(o,{ref:i,"aria-label":a,variant:n,startIcon:r,...e})});

package/dist/components/icon-button/index.d.ts

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

package/dist/components/icon-button/index.js

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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPColor, MPSize, MPVariant } from '../../types';
+import type { MPColor, MPSize, MPVariant } from '../../types.js';
 export interface MPListProps extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'color'> {
     /**
      * How much surface the sheet paints behind the rows.

package/dist/components/list/MPList.js

@@ -1 +1,2 @@
-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";import{CONTROL_GAP as l,hasContent as s,PROSE_TEXT as a,SHEET_PAD_X as d}from"../../internal/scale";import{MPStateLayer as c}from"../../internal/StateLayer";import{CONTAINER_SURFACE as m}from"../../internal/surface";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:g,onClick:j,...k},w){const{size:z,dividers:B}=t.useContext(p),C=Boolean(j||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(g)?e("span",{className:"truncate",children:g}):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:j,children:M}):C?e("button",{type:"button",className:L,"aria-current":!!b||void 0,onClick:j,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]})});
+"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]})});

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

@@ -1,2 +1,2 @@
-export { MPList, MPListItem } from './MPList';
-export type { MPListItemProps, MPListProps } from './MPList';
+export { MPList, MPListItem } from './MPList.js';
+export type { MPListItemProps, MPListProps } from './MPList.js';

package/dist/components/list/index.js

@@ -1 +1 @@
-export{MPList,MPListItem}from"./MPList";
+export{MPList,MPListItem}from"./MPList.js";

package/dist/components/locale/MPLocaleProvider.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMPLocale } from '../../internal/locale';
+import { useMPLocale } from '../../internal/locale.js';
 export interface MPLocaleProviderProps {
     /**
      * A BCP 47 tag — `ko`, `ja`, `pt-BR`, `zh-Hant`.

package/dist/components/locale/MPLocaleProvider.js

@@ -1 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{MPLocaleContext as e,useMPLocale as o}from"../../internal/locale";export function MPLocaleProvider({locale:o,children:i}){return r(e.Provider,{value:o,children:i})}export{o as useMPLocale};
+"use client";
+import{jsx as r}from"react/jsx-runtime";import{MPLocaleContext as e,useMPLocale as o}from"../../internal/locale.js";export function MPLocaleProvider({locale:o,children:i}){return r(e.Provider,{value:o,children:i})}export{o as useMPLocale};

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

@@ -1,2 +1,2 @@
-export { MPLocaleProvider, useMPLocale } from './MPLocaleProvider';
-export type { MPLocaleProviderProps } from './MPLocaleProvider';
+export { MPLocaleProvider, useMPLocale } from './MPLocaleProvider.js';
+export type { MPLocaleProviderProps } from './MPLocaleProvider.js';

package/dist/components/locale/index.js

@@ -1 +1 @@
-export{MPLocaleProvider,useMPLocale}from"./MPLocaleProvider";
+export{MPLocaleProvider,useMPLocale}from"./MPLocaleProvider.js";

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPAlign, MPColor, MPSide, MPSize } from '../../types';
+import type { MPAlign, MPColor, MPSide, MPSize } from '../../types.js';
 /**
  * A menu takes `size` and `color` and stops there.
  *

package/dist/components/menu/MPMenu.js

@@ -1 +1,2 @@
-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";import{CheckIcon as o,ChevronRightIcon as s}from"../../constants/icons";import{MPMenuContext as i}from"../../internal/menu";import{accentSlots as c}from"../../internal/accent";import{MPStateLayer as d}from"../../internal/StateLayer";import{CONTROL_ICON as m,META_TEXT as u,hasContent as p}from"../../internal/scale";import{FADE as h,PORTAL_LAYER as f}from"../../internal/surface";const x=["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",h].join(" "),b={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},g={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},N={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},v={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",b[e],g[e],N[e],v[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function y(){return e(d,{layer:"inset-0 bg-current",className:"group-data-highlighted:opacity-8 group-data-popup-open:opacity-8 group-data-disabled:opacity-0"})}const k="relative flex shrink-0 items-center justify-center";function M({children:t,description:a}){return p(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 ${u}`,children:a})]}):e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:t})}function O({shortcut:n}){return p(n)?e("span",{className:`text-mp-on-surface-variant relative ms-2 shrink-0 ${u}`,children:n}):null}export function MPMenuItem({onClick:l,href:r,target:o,rel:s,startIcon:c,endIcon:d,shortcut:m,description:u,color:h,closeOnClick:f=!0,disabled:x=!1,label:b,children:g,className:N,style:v}){const{size:P}=t.useContext(i),I=n(t.Fragment,{children:[e(y,{}),p(c)?e("span",{className:`${k} text-mp-on-surface-variant`,children:c}):null,e(M,{description:u,children:g}),p(d)?e("span",{className:`${k} text-mp-on-surface-variant`,children:d}):null,e(O,{shortcut:m})]}),$=h?{"--_mp-accent":`var(--_mp-color-${h})`}:void 0,z=$||v?{...$,...v}:void 0;return void 0===r||x?e(a.Item,{disabled:x,label:b,closeOnClick:f,onClick:l,className:C(P,Boolean(h),N),style:z,children:I}):e(a.LinkItem,{href:r,target:o,rel:s??("_blank"===o?"noopener noreferrer":void 0),label:b,closeOnClick:f,onClick:l,className:C(P,Boolean(h),N),style:z,children:I})}export function MPMenuCheckboxItem({checked:l,defaultChecked:s,onCheckedChange:c,endIcon:d,shortcut:u,description:h,color:f,closeOnClick:x=!1,disabled:b=!1,label:g,children:N,className:v,style:P}){const{size:I}=t.useContext(i),$=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:s,onCheckedChange:e=>c?.(e),disabled:b,label:g,closeOnClick:x,className:C(I,Boolean(f),v),style:$||P?{...$,...P}:void 0,children:[e(y,{}),e("span",{className:`${k} text-(--_mp-accent)`,style:{width:m[I]},children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{icon:o,size:m[I]})})}),e(M,{description:h,children:N}),p(d)?e("span",{className:`${k} text-mp-on-surface-variant`,children:d}):null,e(O,{shortcut:u})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:o,className:s}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:s,children:o})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:o,description:s,color:c,closeOnClick:d=!1,disabled:u=!1,label:h,children:f,className:x,style:b}){const{size:g}=t.useContext(i),N=c?{"--_mp-accent":`var(--_mp-color-${c})`}:void 0;return n(a.RadioItem,{value:l,disabled:u,label:h,closeOnClick:d,className:C(g,Boolean(c),x),style:N||b?{...N,...b}:void 0,children:[e(y,{}),e("span",{className:`${k} text-(--_mp-accent)`,style:{width:m[g]},children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e(M,{description:s,children:f}),p(r)?e("span",{className:`${k} text-mp-on-surface-variant`,children:r}):null,e(O,{shortcut:o})]})}export function MPMenuGroup({label:l,children:r,className:o}){const{size:s}=t.useContext(i);return n(a.Group,{className:o,children:[p(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${g[s]} ${u}`,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:o,disabled:d=!1,side:u="right",sideOffset:h=0,children:b,className:g,style:N}){const{size:v,color:M}=t.useContext(i);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:d,className:C(v,!1),children:[e(y,{}),p(o)?e("span",{className:`${k} text-mp-on-surface-variant`,children:o}):null,e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${k} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:s,size:m[v]})})]}),e(a.Portal,{children:e(a.Positioner,{className:f,side:u,sideOffset:h,align:"start",children:e(a.Popup,{className:[x,g??""].filter(Boolean).join(" "),style:{...c(M),...N},children:b})})})]})}export function MPMenu({size:l="md",color:r="primary",trigger:o,open:s,defaultOpen:d,onOpenChange:m,side:u="bottom",align:p="start",sideOffset:h=4,modal:b=!0,openOnHover:g=!1,loopFocus:N=!0,disabled:v=!1,className:C,style:y,children:k}){const M=t.useMemo(()=>({size:l,color:r}),[l,r]);return e(i.Provider,{value:M,children:n(a.Root,{open:s,defaultOpen:d,onOpenChange:e=>m?.(e),modal:b,loopFocus:N,disabled:v,children:[o?e(a.Trigger,{render:o,openOnHover:g,disabled:v}):null,e(a.Portal,{children:e(a.Positioner,{className:f,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":l,className:[x,C??""].filter(Boolean).join(" "),style:{...c(r),...y},children:k})})})]})})}export function MPContextMenu({size:a="md",color:r="primary",content:o,children:s,open:d,defaultOpen:m,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:b,style:g}){const N=t.useMemo(()=>({size:a,color:r}),[a,r]);return e(i.Provider,{value:N,children:n(l.Root,{open:d,defaultOpen:m,onOpenChange:e=>u?.(e),loopFocus:p,disabled:h,children:[e(l.Trigger,{children:s}),e(l.Portal,{children:e(l.Positioner,{className:f,children:e(l.Popup,{"data-mp-size":a,className:[x,b??""].filter(Boolean).join(" "),style:{...c(r),...g},children:o})})})]})})}
+"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"},C={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 y(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],C[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:C}){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=$||C?{...$,...C}:void 0;return void 0===r||b?e(a.Item,{disabled:b,label:g,closeOnClick:x,onClick:l,className:y(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:y(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:C}){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:y(j,Boolean(f),v),style:I||C?{...I,...C}: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}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:o,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:y(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}){const{size:o}=t.useContext(c);return n(a.Group,{className:s,children:[h(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${N[o]} ${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:C}=t.useContext(c);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:i,className:y(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(C),...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:C,style:y,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,C??""].filter(Boolean).join(" "),style:{...d(r),...y},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})})})]})})}

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

@@ -1,2 +1,2 @@
-export { MPContextMenu, MPMenu, MPMenuCheckboxItem, MPMenuGroup, MPMenuItem, MPMenuRadioGroup, MPMenuRadioItem, MPMenuSeparator, MPMenuSubmenu } from './MPMenu';
-export type { MPContextMenuProps, MPMenuCheckboxItemProps, MPMenuGroupProps, MPMenuItemProps, MPMenuProps, MPMenuRadioGroupProps, MPMenuRadioItemProps, MPMenuSeparatorProps, MPMenuSubmenuProps } from './MPMenu';
+export { MPContextMenu, MPMenu, MPMenuCheckboxItem, MPMenuGroup, MPMenuItem, MPMenuRadioGroup, MPMenuRadioItem, MPMenuSeparator, MPMenuSubmenu } from './MPMenu.js';
+export type { MPContextMenuProps, MPMenuCheckboxItemProps, MPMenuGroupProps, MPMenuItemProps, MPMenuProps, MPMenuRadioGroupProps, MPMenuRadioItemProps, MPMenuSeparatorProps, MPMenuSubmenuProps } from './MPMenu.js';

package/dist/components/menu/index.js

@@ -1 +1 @@
-export{MPContextMenu,MPMenu,MPMenuCheckboxItem,MPMenuGroup,MPMenuItem,MPMenuRadioGroup,MPMenuRadioItem,MPMenuSeparator,MPMenuSubmenu}from"./MPMenu";
+export{MPContextMenu,MPMenu,MPMenuCheckboxItem,MPMenuGroup,MPMenuItem,MPMenuRadioGroup,MPMenuRadioItem,MPMenuSeparator,MPMenuSubmenu}from"./MPMenu.js";

package/dist/components/menubar/MPMenubar.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPSize } from '../../types.js';
+export interface MPMenubarProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the bar runs. `vertical` is the shape a side rail of menus takes;
+     * the arrow keys follow it either way.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /**
+     * Whether an open menu takes the page away.
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Whether the arrow keys wrap around at the ends of the bar.
+     * @default true
+     */
+    loopFocus?: boolean;
+    /** Disables every menu on the bar at once. */
+    disabled?: boolean;
+    /**
+     * The row height and type scale, passed to every menu on the bar.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family an open menu's word reads, and which a chosen row inside
+     * it reads.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /** The `MPMenubarMenu`s. */
+    children?: React.ReactNode;
+}
+export interface MPMenubarMenuProps {
+    /** The word on the bar. */
+    label: React.ReactNode;
+    /** A glyph before the label. */
+    startIcon?: React.ReactNode;
+    /** Unavailable. The word stays on the bar and opens nothing. */
+    disabled?: boolean;
+    /** The rows, written exactly as they are inside an [MPMenu](./menu). */
+    children?: React.ReactNode;
+}
+/**
+ * One menu on the bar: the word, and the rows behind it.
+ *
+ * It has no `size` and no `color` of its own — both belong to the bar, which is
+ * the only place they can be set once and hold for every menu on it. The rows
+ * inside are the same [MPMenuItem](./menu), `MPMenuSeparator`, `MPMenuGroup` and
+ * `MPMenuSubmenu` an [MPMenu](./menu) takes, because it *is* the same menu.
+ */
+export declare function MPMenubarMenu({ label, startIcon, disabled, children }: MPMenubarMenuProps): React.JSX.Element;
+/**
+ * The strip of words at the top of an application — File, Edit, View — each of
+ * which opens a menu.
+ *
+ * ## What makes it a bar rather than a row of menus
+ *
+ * What happens once one of them is **open**: moving along the strip walks
+ * through the others instead of closing the one you left, and the arrow keys
+ * move between the menus as well as inside them. Base UI owns all of that, along
+ * with the `menubar` role — which is what tells a screen reader that the strip
+ * is one widget with one tab stop rather than six unrelated buttons.
+ *
+ * ## Why it draws no surface
+ *
+ * A menu bar sits **on** something: an [MPHeader](../layout/header), a title
+ * bar, a toolbar. A sheet under a strip that is already on a sheet is two
+ * sheets, and the second one has nothing to say. It is the same refusal
+ * [MPContainer](../layout/container#why-it-draws-no-surface) makes, one level
+ * down.
+ *
+ * ## When this is the wrong component
+ *
+ * When there are more actions than a strip can hold. A menu bar's whole
+ * advantage is that every heading is visible before you go looking for one, and
+ * a bar of twelve words has already lost it — that is an
+ * [MPCommandPalette](./command-palette).
+ */
+export declare const MPMenubar: React.ForwardRefExoticComponent<MPMenubarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/menubar/MPMenubar.js

@@ -0,0 +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 i}from"../../internal/accent.js";import{MPMenuContext as s}from"../../internal/menu.js";import{MPStateLayer as a}from"../../internal/StateLayer.js";import{CONTROL_GAP as l,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:i,disabled:d=!1,children:f}){const{size:x,color:b}=o.useContext(s);return e(n,{size:x,color:b,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[x],p[x],u[x],l[x]].join(" "),children:[d?null:e(a,{className:"group-data-popup-open:opacity-8"}),m(i)?e("span",{className:"relative flex",children:i}):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(s.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",l[c],u??""].filter(Boolean).join(" "),style:{...i(p),...d},...x,children:f})})});

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

@@ -0,0 +1,2 @@
+export { MPMenubar, MPMenubarMenu } from './MPMenubar.js';
+export type { MPMenubarMenuProps, MPMenubarProps } from './MPMenubar.js';

package/dist/components/menubar/index.js

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