material-plus-ui 0.0.1 → 1.0.0

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

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import type { MPTypographyWeight } from '../typography/MPTypography';
+import type { MPColor, MPVariant } from '../../types';
+/**
+ * The four weights a mark can be drawn at.
+ *
+ * `elevated` is deliberately absent, and it is the one member of `MPVariant` that
+ * could not mean anything here: elevation is a surface lifting off the page, and
+ * a mark is *inside* a line of text. A raised word would cast a shadow onto the
+ * sentence it is part of.
+ */
+export type MPHighlightVariant = Exclude<MPVariant, 'elevated'>;
+export interface MPHighlightProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
+    /**
+     * What to find.
+     *
+     * A string is one term, an array is several — the longest is tried first, so
+     * `['data', 'database']` marks the whole word rather than the first four
+     * 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.
+     */
+    query: string | string[] | RegExp;
+    /**
+     * How much surface the mark paints.
+     *
+     * `tonal` is the default, and it is the only one of the four that is a
+     * highlighter pen: MD3's container roles are a pale wash under dark ink, which
+     * is a marked word rather than a word replaced by a block of colour. `filled`
+     * is the accent proper under its own ink — loud, and right for one match on a
+     * page. `outlined` boxes the word, `text` recolours it and draws nothing.
+     * @default 'tonal'
+     */
+    variant?: MPHighlightVariant;
+    /**
+     * Which accent family the mark reads.
+     *
+     * `tertiary` rather than `primary`, and this is the one place in the library
+     * where that is the right default. `primary` is what a page uses for the thing
+     * it wants pressed; a search match is not that, and a page whose marked words
+     * are the same colour as its buttons has two things competing to be the loudest
+     * thing on it.
+     * @default 'tertiary'
+     */
+    color?: MPColor;
+    /**
+     * Whether `a` and `A` are different letters.
+     * @default false
+     */
+    caseSensitive?: boolean;
+    /**
+     * Whether a term has to be a word on its own — `cat` marking "cat" but not
+     * "concatenate".
+     *
+     * A word here is a run of letters, digits and underscores in any script, so it
+     * means what it should for `café` and `naïve`. It means very little for Korean
+     * or Japanese, where a phrase is not delimited by spaces at all; that is a
+     * property of the writing system rather than of this prop, and is why it is off
+     * by default.
+     * @default false
+     */
+    wholeWord?: boolean;
+    /** Underlines the mark as well. Combines with every variant. */
+    underline?: boolean;
+    /**
+     * Sets the mark's weight. Omit it and the mark is the weight of the text around
+     * it — the surface is already saying "this one", and a bolded word inside a
+     * sentence changes the rhythm of the whole line.
+     */
+    weight?: MPTypographyWeight;
+    /**
+     * The text to search. Elements are walked into and left otherwise untouched, so
+     * a match inside a `<strong>` is still marked and the `<strong>` survives.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Marks the words a reader is looking for, inside text they were already reading.
+ *
+ * The component is the search, not just the styling: `query` is what a search box
+ * holds, and everything about *how* the matching is done — case, whole words, a
+ * regular expression — is a prop rather than something a caller has to
+ * pre-compute into a list of offsets.
+ *
+ * The mark is a real `<mark>`, which is the element for text of relevance to the
+ * reader and is announced as such. That has one consequence worth knowing:
+ * marking eleven words in a paragraph tells a screen reader that eleven things
+ * are important, which is a way of saying nothing. A highlight is for a handful
+ * of matches.
+ *
+ * Nothing here is stateful and nothing measures — the whole component is a pure
+ * function of `children` and `query`, so it re-marks on its own the moment the
+ * search box changes.
+ */
+export declare const MPHighlight: React.ForwardRefExoticComponent<MPHighlightProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/highlight/MPHighlight.js

@@ -0,0 +1 @@
+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=n.forwardRef(function({query:i,variant:a="tonal",color:c="tertiary",caseSensitive:u=!1,wholeWord:m=!1,underline:f=!1,weight:p,className:d,style:g,children:h,...x},b){const y=n.useMemo(()=>function(e,n){if(e instanceof RegExp)return e.global?e:new RegExp(e.source,`${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),[i,u]),_=["rounded-mp-xs -mx-0.5 px-0.5","box-decoration-clone",r[a],f?"underline decoration-2 underline-offset-2":"",p?o[p]:""].filter(Boolean).join(" "),j=y?s(h,y,m,(n,t)=>e("mark",{className:_,children:n},t)):h;return e("span",{ref:b,className:["mp-highlight",d??""].filter(Boolean).join(" "),style:{...t(c),...g},...x,children:j})});

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

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

package/dist/components/highlight/index.js

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

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { type MPButtonProps } from '../button/MPButton';
+export interface MPIconButtonProps extends Omit<MPButtonProps, 'children' | 'startIcon' | 'endIcon' | 'fullWidth'> {
+    /**
+     * The glyph.
+     *
+     * Wrap it in an `MPIcon` when it needs a size of its own; passed bare it is
+     * laid out exactly as a button's `startIcon` is, which is what keeps an icon
+     * button and a labelled button with the same glyph drawing it at the same
+     * size.
+     */
+    icon: React.ReactNode;
+    /**
+     * What the button does, in words.
+     *
+     * Required, and the one prop here that is. A button whose whole label is a
+     * drawing has no accessible name at all, and "an icon button with no
+     * `aria-label`" is the single most common accessibility defect a component
+     * library ships. Making it required is the only fix that survives review — a
+     * default would be a name that is right for nobody, and a warning is a thing
+     * that gets filtered out of a console.
+     */
+    label: string;
+}
+/**
+ * A round button with a glyph in it and nothing else.
+ *
+ * There is almost nothing here, and that is the point: an [MPButton](./button)
+ * with an icon and no children already goes square and is already a pill, which
+ * for a square is a circle — MD3's icon button shape falls out of the button's
+ * own `corner-full` with no second table to keep in step. What this component
+ * adds is the *name*, which is the part that cannot be defaulted and is the part
+ * that is always missing.
+ *
+ * Everything else is the button's, unchanged and on purpose: the five variants,
+ * the four families, the size ladder, the state layer, `loading`, and the values
+ * a surrounding `MPButtonGroup` sets. Two components drawing the same surface
+ * from two copies of one table are two components that will eventually disagree
+ * about it.
+ *
+ * ## Why the default variant is `text` and the button's is `filled`
+ *
+ * Because MD3's default icon button is its *standard* one — a glyph with no
+ * container at all — and the specification is right about why. A labelled button
+ * is usually the one thing on a row worth pressing; an icon button is usually
+ * one of several sitting in a toolbar or a card's corner, and five filled discs
+ * in a row is a row with no emphasis left in it. Reach for `filled` when the
+ * icon button *is* the action on the screen.
+ *
+ * ## No toggle state
+ *
+ * MD3 also describes a *toggle* icon button, which swaps its container and its
+ * ink when selected. This is not that, and a `selected` prop would make it half
+ * of one: a toggle needs a pressed state that survives the press, a group that
+ * can enforce one choice, and a name that changes with the state. That is
+ * [MPSegmentedButton](./segmented-button) for a set, and a `<MPIconButton>` whose
+ * `icon` and `label` are both derived from your own state for a single one.
+ */
+export declare const MPIconButton: React.ForwardRefExoticComponent<MPIconButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import*as r from"react";import{MPButton as o}from"../button/MPButton";export const MPIconButton=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

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

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

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

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

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { MPColor, MPSize, MPVariant } from '../../types';
+export interface MPListProps extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'color'> {
+    /**
+     * How much surface the sheet paints behind the rows.
+     * @default 'outlined'
+     */
+    variant?: MPVariant;
+    /**
+     * The row height and type scale. Each rung lands a one-line row on exactly the
+     * control height of the same name — see `PAD_Y`.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family a selected or hovered row reads. The sheet itself stays
+     * neutral whatever this is.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    /**
+     * Separates the rows with a hairline instead of with space.
+     *
+     * It changes more than it sounds like: with dividers the rules have to reach
+     * both edges of the sheet, so the list gives up its inner padding and the rows
+     * give up their rounded corners. A row cannot be a floating tile and a ruled
+     * line at the same time.
+     * @default false
+     */
+    dividers?: boolean;
+    /**
+     * Renders something other than a `<ul>` — `render={<ol />}` for a list where
+     * the order is the point. Base UI's own escape hatch.
+     */
+    render?: useRender.RenderProp;
+    children?: React.ReactNode;
+}
+export interface MPListItemProps extends Omit<React.ComponentPropsWithoutRef<'li'>, 'color' | 'onClick'> {
+    /**
+     * Passing it is what turns the row into a real `<button>`. It lands on that
+     * button rather than on the `<li>`, which is why the type is loosened from the
+     * list item the shell actually is.
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Content before the label — an icon, an avatar, a status dot. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, inside the pressable area. */
+    endIcon?: React.ReactNode;
+    /**
+     * A second line under the label. MD3 calls this the supporting text, and it is
+     * one step down the type scale in `on-surface-variant`.
+     */
+    description?: React.ReactNode;
+    /**
+     * A control pinned to the end of the row — a switch, a menu button.
+     *
+     * Deliberately outside the pressable area: a row that both navigates and holds
+     * a toggle has two things to press, and nesting one button inside another is
+     * markup the browser rewrites on parse.
+     */
+    action?: React.ReactNode;
+    /** Renders the row as a link. Mutually exclusive with `onClick` in practice. */
+    href?: string;
+    /** Marks the row as the chosen one — the open page, the current filter. */
+    selected?: boolean;
+    /** Unavailable. Drops the accent family, as everywhere else in the library. */
+    disabled?: boolean;
+    /** The label. */
+    children?: React.ReactNode;
+}
+/**
+ * A stack of rows.
+ *
+ * The list is a sheet and the rows are what is on it, which is the whole reason
+ * the two are separate components: `size` and `color` are properties of the
+ * stack, not of any one line in it, and a context is what carries them down.
+ *
+ * There is no Base UI primitive under this on purpose. A list is not a composite
+ * widget — it has no roving focus, no selection model, no keyboard contract of
+ * its own. Reaching for a menu or a listbox primitive to get one would hand
+ * every consumer's plain list of links the semantics of a menu, which is the
+ * most common way a component library breaks a screen reader.
+ */
+export declare const MPList: React.ForwardRefExoticComponent<MPListProps & React.RefAttributes<HTMLUListElement>>;
+/**
+ * One row.
+ *
+ * The shell is always an `<li>`. What changes is what is inside it: a plain run
+ * of content, or — when `onClick` or `href` is given — a real `<button>` or
+ * `<a>` wrapping that content, with `action` sitting outside it as a separate
+ * control. This is the same shape `MPChip` uses, for the same two reasons: a
+ * `<span>` carrying a click handler is invisible to a keyboard, and a `<button>`
+ * inside a `<button>` is markup Chrome silently un-nests.
+ */
+export declare const MPListItem: React.ForwardRefExoticComponent<MPListItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/list/MPList.js

@@ -0,0 +1 @@
+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 a,PROSE_TEXT as s,SHEET_PAD_X as c}from"../../internal/scale";import{MPStateLayer as d}from"../../internal/StateLayer";import{CONTAINER_SURFACE as m}from"../../internal/surface";const p=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=t.forwardRef(function({variant:r="outlined",size:n="md",color:l="primary",dividers:a=!1,render:s,className:c,style:d,children:u,...f},x){const h=t.useMemo(()=>({size:n,color:l,dividers:a}),[n,l,a]),v=["mp-list rounded-mp-md flex flex-col",m[r],"text-mp-on-surface",a?"overflow-hidden [&>li+li]:border-mp-outline-variant [&>li+li]:border-t":"p-1",c??""].filter(Boolean).join(" "),b=i({render:s??e("ul",{}),ref:x,props:{role:"list","data-mp-size":n,"data-mp-variant":r,className:v,style:{...o(l),...d},children:u,...f}});return e(p.Provider,{value:h,children:b})});export const MPListItem=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:C}=t.useContext(p),B=Boolean(j||v)&&!y,I=c[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],s[z],"transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)",C?"":x[z],y?"text-mp-on-surface/38 cursor-default":b?"bg-(--_mp-accent-container) text-(--_mp-on-accent-container)":"",B?["cursor-pointer appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "):"",B&&b?"bg-(--_mp-accent-container)":""].filter(Boolean).join(" "),M=r(n,{children:[B?e(d,{}):null,a(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:[a(g)?e("span",{className:"truncate",children:g}):null,a(m)?e("span",{className:["truncate",f[z],b?"opacity-80":"text-mp-on-surface-variant"].join(" "),children:m}):null]}),a(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:[B&&v?e("a",{href:v,className:L,"aria-current":b?"page":void 0,onClick:j,children:M}):B?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}),a(h)?e("div",{className:`flex shrink-0 items-center ${I}`,children:h}):null]})});

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

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

package/dist/components/list/index.js

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

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { useMPLocale } from '../../internal/locale';
+export interface MPLocaleProviderProps {
+    /**
+     * A BCP 47 tag — `ko`, `ja`, `pt-BR`, `zh-Hant`.
+     *
+     * It reaches two different systems and they degrade differently, which is
+     * worth knowing before choosing one:
+     *
+     * - **`Intl` formats the dates and the numbers**, and speaks every language
+     *   the platform does. A tag with no entry in this library's own table still
+     *   gets month names, weekday names, AM/PM and the right date order.
+     * - **This library's table supplies the words `Intl` has no opinion about** —
+     *   "Previous month", "Today", "Hour". Those fall back to English for a tag it
+     *   does not carry, and a `labels` prop on the component fills the gap.
+     *
+     * Left `undefined` the platform's own default is used for the first and
+     * English for the second, which is exactly what a component with no provider
+     * over it does.
+     */
+    locale?: string;
+    children?: React.ReactNode;
+}
+/**
+ * The language the components speak, set once for everything under it.
+ *
+ * Wrap the application. Every component in this library that writes a word or
+ * formats a date takes a `locale` prop of its own, and this is where that prop
+ * gets its default — so a form of four pickers is one decision rather than four.
+ *
+ * ```tsx
+ * <MPLocaleProvider locale="ko">
+ *   <App />
+ * </MPLocaleProvider>
+ * ```
+ *
+ * ## Why it is not a whole theme object
+ *
+ * Everything else a provider might carry here is already a CSS custom property:
+ * the colour roles, the type scale, the corners, the motion durations. Those
+ * reach a component through the cascade, which means a section of a page can
+ * differ from the rest of it without a second provider and without a re-render.
+ * A locale cannot travel that way — it decides which *string* is rendered, not
+ * how one is painted — so it is the one thing left that needs context, and this
+ * provider carries that and nothing else.
+ *
+ * ## Nesting
+ *
+ * Providers nest, and the nearest one wins. A page in Korean with one section
+ * showing a Japanese listing's dates is two providers, and the inner one does
+ * not have to restate anything: there is only the one value.
+ */
+export declare function MPLocaleProvider({ locale, children }: MPLocaleProviderProps): React.JSX.Element;
+/**
+ * The locale in force at this point in the tree.
+ *
+ * Exported because an application that has told this library its language should
+ * not have to tell itself the same thing twice — the same tag is what its own
+ * `Intl.NumberFormat` calls want. Passing an argument makes it the
+ * prop-beats-provider resolution the components themselves use, which is what a
+ * wrapper component around one of them wants.
+ */
+export { useMPLocale };

package/dist/components/locale/MPLocaleProvider.js

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

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

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

package/dist/components/locale/index.js

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

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

@@ -0,0 +1,223 @@
+import * as React from 'react';
+import type { MPAlign, MPColor, MPSide, MPSize } from '../../types';
+/**
+ * A menu takes `size` and `color` and stops there.
+ *
+ * There is no `variant`, for the reason `MPDialog` has none: the five weights
+ * answer "how much of a surface does this paint", and a popup that has taken the
+ * pointer has already answered it. There is no `elevation` either — MD3 puts a
+ * menu at level 2 and nowhere else, and a menu that could be told to sit flat
+ * would be a list.
+ */
+interface MPMenuSurfaceProps {
+    /**
+     * The row height and type scale.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which accent family a ticked or chosen row reads. The popup itself stays
+     * neutral, as MD3's does.
+     * @default 'primary'
+     */
+    color?: MPColor;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MPMenuProps extends MPMenuSurfaceProps {
+    /**
+     * The element that opens the menu, wired up by Base UI. Optional — a controlled
+     * menu opened from elsewhere needs no trigger of its own.
+     */
+    trigger?: React.ReactElement;
+    /** Whether the menu is open. Use with `onOpenChange` for a controlled menu. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Which edge of the trigger it hangs off. @default 'bottom' */
+    side?: MPSide;
+    /** Where it sits along that edge. @default 'start' */
+    align?: MPAlign;
+    /** Distance from the trigger, in pixels. @default 4 */
+    sideOffset?: number;
+    /** Whether the page behind is taken away while the menu is open. @default true */
+    modal?: boolean;
+    /**
+     * Opens on hover as well as on click. For a menu bar, where crossing the row
+     * with one menu open should walk through the others rather than close them.
+     * @default false
+     */
+    openOnHover?: boolean;
+    /** Whether the arrow keys wrap from the last row back to the first. @default true */
+    loopFocus?: boolean;
+    /** Unavailable. The trigger stops opening anything. */
+    disabled?: boolean;
+    /** The rows. */
+    children?: React.ReactNode;
+}
+export interface MPContextMenuProps extends MPMenuSurfaceProps {
+    /** The rows, exactly as they are written inside an `MPMenu`. */
+    content: React.ReactNode;
+    /**
+     * The area that answers a right-click or a long press. Rendered inside a
+     * `<div>` of Base UI's, which is what listens for the gesture.
+     */
+    children: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** @default true */
+    loopFocus?: boolean;
+    disabled?: boolean;
+}
+export interface MPMenuItemProps {
+    /** What the row does. Not given, and not a link, the row is a label. */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Renders the row as a real `<a>`. A menu of links has to be links. */
+    href?: string;
+    /** Where the link opens — `_blank` and the rest. Ignored without `href`. */
+    target?: string;
+    /** Content before the label — an icon, a swatch, an avatar. */
+    startIcon?: React.ReactNode;
+    /** Content after the label, before any `shortcut`. */
+    endIcon?: React.ReactNode;
+    /**
+     * The keystroke that does the same thing, set at the end of the row and muted.
+     * Text only — the row does not bind it, the application does.
+     */
+    shortcut?: React.ReactNode;
+    /** A second line under the label, one step down the type scale and muted. */
+    description?: React.ReactNode;
+    /**
+     * Re-points the row's family — `error` for the one that deletes. Defaults to
+     * the menu's own.
+     */
+    color?: MPColor;
+    /** Whether picking the row closes the menu. @default true */
+    closeOnClick?: boolean;
+    /** Unavailable. Still listed, and still found by typeahead. */
+    disabled?: boolean;
+    /** What typeahead matches against, when the label is not a plain string. */
+    label?: string;
+    /** The label. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MPMenuSubmenuProps {
+    /** The label on the row that opens it. */
+    label?: React.ReactNode;
+    startIcon?: React.ReactNode;
+    disabled?: boolean;
+    /** Which edge of the parent row it opens against. @default 'right' */
+    side?: MPSide;
+    /** Distance from the parent menu, in pixels. @default 0 */
+    sideOffset?: number;
+    /** The nested rows. */
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface MPMenuGroupProps {
+    /** The heading over the group. Wired to it by Base UI. */
+    label?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface MPMenuCheckboxItemProps extends Omit<MPMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Whether ticking the row closes the menu. `false` here rather than the `true`
+     * a plain row takes: a list of things to tick is a list you tick more than one
+     * of.
+     * @default false
+     */
+    closeOnClick?: boolean;
+}
+export interface MPMenuRadioGroupProps {
+    value?: string | number;
+    defaultValue?: string | number;
+    onValueChange?: (value: string | number) => void;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface MPMenuRadioItemProps extends Omit<MPMenuItemProps, 'href' | 'target' | 'startIcon' | 'onClick'> {
+    /** What this row sets the group to. */
+    value: string | number;
+    /** @default false */
+    closeOnClick?: boolean;
+}
+export type MPMenuSeparatorProps = React.ComponentPropsWithoutRef<'div'>;
+/**
+ * One row of a menu.
+ *
+ * Renders a real `<a>` when it is given an `href` and Base UI's own item
+ * otherwise. A menu of links that are not links cannot be opened in a new tab,
+ * cannot be copied, and tells a screen reader the wrong thing about every one of
+ * them.
+ */
+export declare function MPMenuItem({ onClick, href, target, startIcon, endIcon, shortcut, description, color, closeOnClick, disabled, label, children, className, style }: MPMenuItemProps): React.JSX.Element;
+/** 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;
+/**
+ * A row inside an `MPMenuRadioGroup`.
+ *
+ * Marked with a filled dot rather than a tick, which is the same distinction
+ * `MPCheckbox` and `MPRadio` make everywhere else: a tick says "and", a dot says
+ * "instead of".
+ */
+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;
+/** The hairline between two runs of rows. `outline-variant`, as MD3 draws it. */
+export declare function MPMenuSeparator({ className, ...props }: MPMenuSeparatorProps): React.JSX.Element;
+/**
+ * A menu inside a menu.
+ *
+ * The row that opens it is the same row every other item is, wearing a chevron —
+ * and it opens on hover, on Enter and on the arrow key that points at it, all of
+ * which is Base UI's. What is here is the surface and the glyph.
+ *
+ * Nesting is unlimited: a submenu renders its children inside a popup that is
+ * itself a menu, so a submenu of a submenu needs no different component.
+ */
+export declare function MPMenuSubmenu({ label, startIcon, disabled, side, sideOffset, children, className, style }: MPMenuSubmenuProps): React.JSX.Element;
+/**
+ * A list of actions that appears when something is pressed.
+ *
+ * Everything that makes a menu a menu rather than a floating list of divs is Base
+ * UI's: roving focus with the arrow keys, Home and End, typeahead, Escape,
+ * closing on an outside click, restoring focus to the trigger, submenus opening
+ * on hover with the safe triangle so a diagonal reach does not close them, and
+ * the `menu` / `menuitem` roles that make any of it mean something to a screen
+ * reader. What is here is the surface, the ladders and the row layout.
+ *
+ * ## Why the rows are composed and a select's options are data
+ *
+ * The opposite of `MPSelect`, and deliberately. A select's options are values out
+ * of a list a caller already has, and its trigger has to be able to name the
+ * chosen one before the popup has ever been mounted. A menu's rows are *code* —
+ * each one a different handler, a different icon, sometimes a submenu — and
+ * nothing has to know about them until the menu opens. Data would mean an `items`
+ * type with a variant for every shape a row can take, which is a component tree
+ * spelled as a discriminated union.
+ */
+export declare function MPMenu({ size, color, trigger, open, defaultOpen, onOpenChange, side, align, sideOffset, modal, openOnHover, loopFocus, disabled, className, style, children }: MPMenuProps): React.JSX.Element;
+/**
+ * The same menu, opened by a right-click or a long press instead of by a button.
+ *
+ * It takes the rows as `content` and the area as `children`, which is
+ * `MPTooltip`'s shape rather than `MPMenu`'s — because here the trigger is not
+ * one element handed over, it is a region of the page, and the region is the
+ * thing being wrapped. Base UI positions the popup at the pointer rather than
+ * against an anchor, and the long press is what makes it reachable on a touch
+ * screen at all.
+ */
+export declare function MPContextMenu({ size, color, content, children, open, defaultOpen, onOpenChange, loopFocus, disabled, className, style }: MPContextMenuProps): React.JSX.Element;
+export {};

package/dist/components/menu/MPMenu.js

@@ -0,0 +1 @@
+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,startIcon:s,endIcon:c,shortcut:d,description:m,color:u,closeOnClick:h=!0,disabled:f=!1,label:x,children:b,className:g,style:N}){const{size:v}=t.useContext(i),P=n(t.Fragment,{children:[e(y,{}),p(s)?e("span",{className:`${k} text-mp-on-surface-variant`,children:s}):null,e(M,{description:m,children:b}),p(c)?e("span",{className:`${k} text-mp-on-surface-variant`,children:c}):null,e(O,{shortcut:d})]}),I=u?{"--_mp-accent":`var(--_mp-color-${u})`}:void 0,$=I||N?{...I,...N}:void 0;return void 0!==r?e(a.LinkItem,{href:r,target:o,label:x,closeOnClick:h,onClick:l,className:C(v,Boolean(u),g),style:$,children:P}):e(a.Item,{disabled:f,label:x,closeOnClick:h,onClick:l,className:C(v,Boolean(u),g),style:$,children:P})}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})})})]})})}

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

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

package/dist/components/menu/index.js

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