material-plus-ui 1.3.1 → 1.5.0

package/dist/components/floating-action-button/MPFloatingActionButton.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Button as o}from"@base-ui/react/button";import{accentSlots as n}from"../../internal/accent.js";import{MPStateLayer as i}from"../../internal/StateLayer.js";import{hasContent as s}from"../../internal/scale.js";const r={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"bg-mp-surface-container-high text-(--_mp-accent)"},m={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},l={xs:"min-w-10 gap-0 px-0",sm:"min-w-12 gap-0 px-0",md:"min-w-14 gap-0 px-0",lg:"min-w-18 gap-0 px-0",xl:"min-w-24 gap-0 px-0"},p={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},d={xs:24,sm:24,md:24,lg:30,xl:36},f={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"},c={xs:"min-w-16 gap-1.5 px-3",sm:"min-w-18 gap-2 px-4",md:"min-w-20 gap-2 px-4",lg:"min-w-24 gap-2.5 px-5",xl:"min-w-28 gap-3 px-6"},x={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},u={"top-start":"top-(--_mp-fab-offset) start-(--_mp-fab-offset)","top-end":"top-(--_mp-fab-offset) end-(--_mp-fab-offset)","bottom-start":"bottom-(--_mp-fab-offset) start-(--_mp-fab-offset)","bottom-end":"bottom-(--_mp-fab-offset) end-(--_mp-fab-offset)"};export const MPFloatingActionButton=/*@__PURE__*/a.forwardRef(function({icon:a,label:b,extended:g=!1,variant:h="tonal",color:w="primary",size:y="md",position:_="fixed",corner:j="bottom-end",offset:v=16,disabled:k=!1,type:z="button",className:N,style:$,...B},A){return e(o,{ref:A,type:z,disabled:k,"aria-label":b,"data-mp-size":y,"data-mp-variant":h,className:["mp-fab group inline-flex shrink-0 items-center justify-center","box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,box-shadow,color,min-width,padding,gap]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",p[y],m[y],f[y],g?c[y]:l[y],k?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${r[h]} shadow-mp-3`,"static"===_?"relative":`${x[_]} ${u[j]}`,N??""].filter(Boolean).join(" "),style:{...n(w),"--_mp-fab-offset":"number"==typeof v?`${v}px`:v,...$},...B,children:[k?null:t(i,{}),s(a)?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:d[y],height:d[y]},children:a}):null,t("span",{className:["relative grid transition-[grid-template-columns]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",g?"grid-cols-[1fr]":"grid-cols-[0fr]"].join(" "),children:t("span",{className:"min-w-0 truncate",children:b})})]})});
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Button as n}from"@base-ui/react/button";import{accentSlots as o}from"../../internal/accent.js";import{cssLength as i}from"../../internal/length.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{hasContent as r}from"../../internal/scale.js";const m={filled:"bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"bg-mp-surface-container-high text-(--_mp-accent)"},l={xs:"h-10",sm:"h-12",md:"h-14",lg:"h-18",xl:"h-24"},p={xs:"min-w-10 gap-0 px-0",sm:"min-w-12 gap-0 px-0",md:"min-w-14 gap-0 px-0",lg:"min-w-18 gap-0 px-0",xl:"min-w-24 gap-0 px-0"},d={xs:"rounded-mp-md",sm:"rounded-mp-lg",md:"rounded-mp-lg",lg:"rounded-mp-xl",xl:"rounded-mp-xl"},f={xs:24,sm:24,md:24,lg:30,xl:36},c={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"},x={xs:"min-w-16 gap-1.5 px-3",sm:"min-w-18 gap-2 px-4",md:"min-w-20 gap-2 px-4",lg:"min-w-24 gap-2.5 px-5",xl:"min-w-28 gap-3 px-6"},u={absolute:"absolute z-30",sticky:"sticky z-30",fixed:"fixed z-40"},b={"top-start":"top-(--_mp-fab-offset) start-(--_mp-fab-offset)","top-end":"top-(--_mp-fab-offset) end-(--_mp-fab-offset)","bottom-start":"bottom-(--_mp-fab-offset) start-(--_mp-fab-offset)","bottom-end":"bottom-(--_mp-fab-offset) end-(--_mp-fab-offset)"};export const MPFloatingActionButton=/*@__PURE__*/a.forwardRef(function({icon:a,label:g,extended:h=!1,variant:w="tonal",color:y="primary",size:_="md",position:j="fixed",corner:v="bottom-end",offset:k=16,disabled:z=!1,type:N="button",className:B,style:$,...A},F){return e(n,{ref:F,type:N,disabled:z,"aria-label":g,"data-mp-size":_,"data-mp-variant":w,className:["mp-fab group inline-flex shrink-0 items-center justify-center","box-border overflow-hidden align-middle whitespace-nowrap select-none","cursor-pointer appearance-none font-[inherit]","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none","transition-[background-color,box-shadow,color,min-width,padding,gap]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",d[_],l[_],c[_],h?x[_]:p[_],z?"bg-mp-on-surface/12 text-mp-on-surface/38 cursor-default shadow-none":`${m[w]} shadow-mp-3`,"static"===j?"relative":`${u[j]} ${b[v]}`,B??""].filter(Boolean).join(" "),style:{...o(y),"--_mp-fab-offset":i(k),...$},...A,children:[z?null:t(s,{}),r(a)?t("span",{className:"relative flex shrink-0 items-center justify-center",style:{width:f[_],height:f[_]},children:a}):null,t("span",{className:["relative grid transition-[grid-template-columns]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard",h?"grid-cols-[1fr]":"grid-cols-[0fr]"].join(" "),children:t("span",{className:"min-w-0 truncate",children:g})})]})});

package/dist/components/footer/MPFooter.d.ts

@@ -0,0 +1,94 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPPosition, MPSize, MPVariant } from '../../types.js';
+export interface MPFooterProps extends Omit<React.ComponentPropsWithoutRef<'footer'>, 'title'> {
+    /**
+     * How the sheet sits in the page's scroll.
+     *
+     * `static` — the default, and the opposite of [MPHeader](./header)'s — is what
+     * a footer *is*: the thing at the end of the document, reached by scrolling to
+     * it. `sticky` and `fixed` are for the bar that has to stay in reach — a
+     * form's save row, a cookie notice — and an [MPPageLayout](./page-layout)
+     * reserves the height a `fixed` one takes out of the flow.
+     * @default 'static'
+     */
+    position?: MPPosition;
+    /**
+     * How much surface the sheet paints, on the **container** ladder — a footer is
+     * never dyed, because what sits on it arrives with colours of its own.
+     *
+     * `outlined` is the default here and `tonal` is [MPHeader](./header)'s,
+     * because the two sit against different things. A header is over content that
+     * is passing underneath it and needs a tone of its own to stay legible; a
+     * footer has the end of the document above it and nothing below, so the
+     * hairline is the whole of what says the document ended.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * The sheet's scale — its gutter and the air above and below its content. As
+     * on [MPBox](./box), `size` here is the size of the *sheet*: it sets no height
+     * and no type scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Holds the content to a measure and centres it while the sheet itself still
+     * spans the window. The same ladder [MPContainer](./container)'s `maxWidth`
+     * uses.
+     * @default 'none'
+     */
+    maxWidth?: MPSize | 'none';
+    /**
+     * The gutter, and the air above and below.
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * The name the region is announced by. Worth writing when a page has more than
+     * one `<footer>` in it — an article's own and the site's.
+     */
+    label?: string;
+    /**
+     * Renders something other than a `<footer>`. Base UI's own escape hatch, and
+     * rarely what you want: at the top level of a document that tag is the
+     * `contentinfo` landmark, and it is what says "this is the site's own
+     * information" rather than "this is more of the article".
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Everything in it.
+     *
+     * A footer's content is four columns of links on one site and a single line on
+     * the next, all of it the caller's — which is why this component has slots for
+     * nothing and room for anything.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The sheet at the end of a page.
+ *
+ * A real `<footer>`, which is the whole reason it is a component rather than a
+ * div: at the top level of a document that tag is the `contentinfo` landmark —
+ * the region a screen reader offers as "the site's own information", and the one
+ * a search engine reads the copyright, the address and the site map out of.
+ *
+ * ## Why it has no slots, and [MPHeader](./header) does
+ *
+ * Because a header's three regions are a fixed arrangement worth writing once,
+ * and a footer's content is not an arrangement at all. Four columns of links on
+ * one site, a copyright line on the next, a language picker and a row of logos
+ * on the third. A component that guessed would be a component every second site
+ * had to fight.
+ *
+ * What it decides instead is the **sheet**: the surface, the gutter, the measure,
+ * and whether it stays in reach. Everything above that is an
+ * [MPGrid](./grid) or an [MPContainer](./container) the caller puts inside it.
+ *
+ * ## Inside a layout, and outside one
+ *
+ * Inside an [MPPageLayout](./page-layout) it registers itself, so a `fixed`
+ * footer's height is reserved rather than sitting on top of the last paragraph.
+ * Outside one it is simply a sheet.
+ */
+export declare const MPFooter: React.ForwardRefExoticComponent<MPFooterProps & React.RefAttributes<HTMLElement>>;

package/dist/components/footer/MPFooter.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e}from"react/jsx-runtime";import*as t from"react";import{useRender as o}from"@base-ui/react/use-render";import{BAR_SURFACE as r,MPPageLayoutContext as a}from"../../internal/page-layout.js";import{MEASURE as i,SHEET_PAD_X as n,SHEET_PAD_Y as s}from"../../internal/scale.js";const l={static:"",absolute:"absolute inset-x-0 bottom-0 z-30",sticky:"sticky bottom-0 z-30",fixed:"fixed inset-x-0 bottom-0 z-40"};export const MPFooter=/*@__PURE__*/t.forwardRef(function({position:m="static",variant:c="outlined",size:d="md",maxWidth:f="none",padded:u=!0,label:p,render:b,className:x,children:j,...z},h){const{register:v}=t.useContext(a),w=t.useCallback(e=>{v("footer",e),"function"==typeof h?h(e):h&&(h.current=e)},[v,h]);return o({render:b??e("footer",{}),ref:w,props:{"aria-label":p,"data-mp-size":d,"data-mp-variant":c,className:["mp-footer text-mp-on-surface box-border w-full min-w-0",r[c],"outlined"===c?"border-mp-outline-variant border-t":"",l[m],x??""].filter(Boolean).join(" "),children:e("div",{className:["mp-footer__inner w-full",u?`${n[d]} ${s[d]}`:"","none"===f?"":`${i[f]} mx-auto`].filter(Boolean).join(" "),children:j}),...z}})});

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

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

package/dist/components/footer/index.js

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

package/dist/components/form/MPForm.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import type { MPSize } from '../../types.js';
+/**
+ * When a field decides whether it is valid.
+ *
+ * Base UI's own three, under Base UI's own spelling. This is one of the few
+ * places the library does *not* invent a word of its own: `validationMode` is
+ * what a caller will read everywhere else, and a nicer synonym would only be a
+ * word they had to translate back.
+ */
+export type MPFormValidationMode = 'onSubmit' | 'onBlur' | 'onChange';
+/** Errors that came from somewhere else, keyed by the field's `name`. */
+export type MPFormErrors = Record<string, string | string[]>;
+export interface MPFormProps extends Omit<React.ComponentPropsWithoutRef<'form'>, 'onSubmit'> {
+    /**
+     * When a field validates.
+     *
+     * - `onSubmit` — on submit, and on every change afterwards. The default, and
+     *   the only one that does not tell somebody their email address is wrong
+     *   while they are still typing it.
+     * - `onBlur` — when a field loses focus.
+     * - `onChange` — on every keystroke.
+     * @default 'onSubmit'
+     */
+    validationMode?: MPFormValidationMode;
+    /**
+     * Errors from outside the browser's own validation — a server, a form action,
+     * a schema — keyed by the `name` of the field each belongs to.
+     *
+     * They are shown **on the field**, and cleared as soon as that field changes.
+     */
+    errors?: MPFormErrors;
+    /**
+     * Called on a valid submit, with the form's values. The native submit event is
+     * prevented, so nothing navigates.
+     */
+    onSubmit?: (values: Record<string, unknown>) => void;
+    /**
+     * The gap between the form's children. A form is a stack, and this is which
+     * rung of the [ladder](../../design/prop-conventions#size) it stacks on.
+     * @default 'md'
+     */
+    size?: MPSize;
+    children?: React.ReactNode;
+}
+/**
+ * A `<form>` that knows which of its fields is wrong.
+ *
+ * On its own, a page of [MPTextField](./text-field)s validates one field at a
+ * time, and a failed submit leaves the reader to go and find the red one. What
+ * this adds is the part that has to be owned **above** the fields: a submit
+ * collects every field's validity at once, focus lands on the first one that
+ * failed, and `errors` puts a server's answer back on the field it belongs to
+ * rather than in a banner at the top of the page.
+ *
+ * ## It is not a form library
+ *
+ * There is no schema here, no resolver and no field array. A project that wants
+ * those keeps the one it already has and hands the result to `errors`, which is
+ * the seam this is built around — and it is a seam rather than an integration
+ * precisely because every one of those libraries can produce
+ * `{ [name]: message }`.
+ *
+ * ## Why it lays its children out at all
+ *
+ * Because a form is a **stack**, and a stack with no gap is a stack of fields
+ * touching. The gap is the only visual decision here: no surface, no padding, no
+ * measure. Those belong to an [MPCard](../layout/card) or an
+ * [MPContainer](../layout/container) around it, for the reason a container gives
+ * — the thing that decides the shape of a page should not also be the thing that
+ * submits it.
+ */
+export declare const MPForm: React.ForwardRefExoticComponent<MPFormProps & React.RefAttributes<HTMLFormElement>>;

package/dist/components/form/MPForm.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as r}from"react/jsx-runtime";import*as o from"react";import{Form as e}from"@base-ui/react/form";import{SHEET_GAP as i}from"../../internal/scale.js";export const MPForm=/*@__PURE__*/o.forwardRef(function({validationMode:o="onSubmit",errors:m,onSubmit:a,size:t="md",className:n,children:s,...f},l){return r(e,{ref:l,validationMode:o,errors:m,onFormSubmit:r=>a?.(r),"data-mp-size":t,className:["mp-form flex flex-col",i[t],n??""].filter(Boolean).join(" "),...f,children:s})});

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

@@ -0,0 +1,2 @@
+export { MPForm } from './MPForm.js';
+export type { MPFormErrors, MPFormProps, MPFormValidationMode } from './MPForm.js';

package/dist/components/form/index.js

@@ -0,0 +1 @@
+export{MPForm}from"./MPForm.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

@@ -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/menu/MPMenu.d.ts

@@ -133,6 +133,7 @@ export interface MPMenuGroupProps {
     label?: React.ReactNode;
     children?: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 }
 export interface MPMenuCheckboxItemProps extends Omit<MPMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
     checked?: boolean;
@@ -153,6 +154,7 @@ export interface MPMenuRadioGroupProps {
     disabled?: boolean;
     children?: React.ReactNode;
     className?: string;
+    style?: React.CSSProperties;
 }
 export interface MPMenuRadioItemProps extends Omit<MPMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
     /** What this row sets the group to. */
@@ -173,7 +175,7 @@ export declare function MPMenuItem({ onClick, href, target, rel, startIcon, endI
 /** A row that ticks. The tick lands in the column a `startIcon` would. */
 export declare function MPMenuCheckboxItem({ checked, defaultChecked, onCheckedChange, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuCheckboxItemProps): React.JSX.Element;
 /** One choice out of a set. Wraps the rows that make up the set. */
-export declare function MPMenuRadioGroup({ value, defaultValue, onValueChange, disabled, children, className }: MPMenuRadioGroupProps): React.JSX.Element;
+export declare function MPMenuRadioGroup({ value, defaultValue, onValueChange, disabled, children, className, style }: MPMenuRadioGroupProps): React.JSX.Element;
 /**
  * A row inside an `MPMenuRadioGroup`.
  *
@@ -183,7 +185,7 @@ export declare function MPMenuRadioGroup({ value, defaultValue, onValueChange, d
  */
 export declare function MPMenuRadioItem({ value, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuRadioItemProps): React.JSX.Element;
 /** A named run of rows. The label is a heading, not a row — it cannot be picked. */
-export declare function MPMenuGroup({ label, children, className }: MPMenuGroupProps): React.JSX.Element;
+export declare function MPMenuGroup({ label, children, className, style }: MPMenuGroupProps): React.JSX.Element;
 /** The hairline between two runs of rows. `outline-variant`, as MD3 draws it. */
 export declare function MPMenuSeparator({ className, ...props }: MPMenuSeparatorProps): React.JSX.Element;
 /**

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 o,ChevronRightIcon as s}from"../../constants/icons.js";import{MPMenuContext as i}from"../../internal/menu.js";import{accentSlots as c}from"../../internal/accent.js";import{MPStateLayer as d}from"../../internal/StateLayer.js";import{CONTROL_ICON as m,META_TEXT as u,hasContent as p}from"../../internal/scale.js";import{FADE as h,PORTAL_LAYER as f}from"../../internal/surface.js";const x=/*@__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",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),j=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})]}),I=h?{"--_mp-accent":`var(--_mp-color-${h})`}:void 0,$=I||v?{...I,...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:$,children:j}):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:$,children:j})}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:j}=t.useContext(i),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(j,Boolean(f),v),style:I||P?{...I,...P}:void 0,children:[e(y,{}),e("span",{className:`${k} text-(--_mp-accent)`,style:{width:m[j]},children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{icon:o,size:m[j]})})}),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})})})]})})}
+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})})})]})})}

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

@@ -0,0 +1,89 @@
+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;
+    /**
+     * Added to the word on the bar — the button that opens the menu — rather than
+     * to the menu it opens. That one takes its own `className` on
+     * [MPMenu](./menu).
+     */
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 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, className, style }: 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 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})})});

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";