material-plus-ui 1.5.0 → 1.7.0

package/dist/components/hover-card/MPHoverCard.d.ts

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import type { MPAlign, MPDensity, MPSide, MPSize } from '../../types.js';
+/**
+ * The same axes an `MPPopover` takes, and for the same reasons.
+ *
+ * No `variant`, because the five weights answer "how much does this surface
+ * assert itself against the page" and a card that arrives uninvited has already
+ * been answered for. No `color`, because MD3's answer for a small sheet
+ * anchored to something is `surface-container`, neutral — and a card that could
+ * be dyed would dye whatever preview somebody put in it. No `elevation`,
+ * because a card floating over the page is the whole idea and a prop that could
+ * sit it flat would undo it.
+ */
+export interface MPHoverCardProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'title' | 'children'> {
+    /**
+     * What the card hangs off. Exactly one element, which must accept a ref and
+     * spread props — every Material Plus component does.
+     *
+     * Usually an `MPTextLink` or an `MPAvatar`: the two things a reader wants to
+     * know more about without leaving the sentence they are in.
+     */
+    trigger: React.ReactElement;
+    /** The heading, rendered as the element that names the card. */
+    title?: React.ReactNode;
+    /** A line under it, and the card's accessible description. */
+    description?: React.ReactNode;
+    /** The body. */
+    children?: React.ReactNode;
+    /**
+     * Which edge of the trigger it appears on. Flips when there is no room.
+     * @default 'bottom'
+     */
+    side?: MPSide;
+    /** Where it sits along that edge. @default 'center' */
+    align?: MPAlign;
+    /** Distance from the trigger, in pixels. @default 8 */
+    sideOffset?: number;
+    /** Shift along that edge, in pixels. @default 0 */
+    alignOffset?: number;
+    /**
+     * Draws the wedge pointing at the trigger.
+     *
+     * Off by default, as on `MPPopover`: a sheet eight pixels from what opened it
+     * does not need to say what it belongs to.
+     * @default false
+     */
+    arrow?: boolean;
+    /** Whether the card is open. Use with `onOpenChange` for a controlled one. */
+    open?: boolean;
+    /** Whether it starts open, for an uncontrolled one. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * How long the pointer has to rest on the trigger before the card opens, in
+     * milliseconds. Base UI's own default is long enough that crossing a
+     * paragraph of links does not open four of them.
+     */
+    delay?: number;
+    /**
+     * How long the card stays after the pointer has left, in milliseconds. This
+     * is what makes the gap between the trigger and the card crossable.
+     */
+    closeDelay?: number;
+    /** A hard cap on the card's width, overriding the one `size` implies. */
+    width?: number | string;
+    /** The type scale and the room inside. @default 'md' */
+    size?: MPSize;
+    /** Takes room out of that padding, two pixels a face per step. @default 0 */
+    density?: MPDensity;
+}
+/**
+ * A card that opens when the pointer rests on something, holding a preview of
+ * what is on the other side of it.
+ *
+ * ```tsx
+ * <MPHoverCard trigger={<MPTextLink href="/people/priya">Priya Raman</MPTextLink>} title="Priya Raman">
+ *   Platform team. Joined 2023.
+ * </MPHoverCard>
+ * ```
+ *
+ * ## Where it sits between the other two popups
+ *
+ * A tooltip is a **label**: one line, no interaction, and the pointer never
+ * reaches it. A popover is a panel that was **asked for** by a press, so it can
+ * hold a form. This one is uninvited like a tooltip and reachable like a
+ * popover — the pointer can cross into it, and a link inside it can be
+ * followed.
+ *
+ * ## Because it is uninvited, it is never the only way to anything
+ *
+ * A keyboard with no hover, a touchscreen with no pointer, and a screen reader
+ * all arrive by the trigger's own route instead. So whatever is in here has to
+ * exist on the page the trigger leads to as well. Treat it as a shortcut for
+ * the reader who has a pointer, never as the place a fact lives.
+ *
+ * That is also why there is no keyboard equivalent bolted on. A card that
+ * opened on focus would interrupt every keyboard reader tabbing through a
+ * paragraph of links, which is a worse answer than not opening at all.
+ */
+export declare function MPHoverCard({ trigger, title, description, children, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, delay, closeDelay, width, size: sizeProp, density: densityProp, className, style, ...props }: MPHoverCardProps): React.JSX.Element;

package/dist/components/hover-card/MPHoverCard.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as i from"react";import{PreviewCard as t}from"@base-ui/react/preview-card";import{cssLength as r}from"../../internal/length.js";import{sheetPad as l}from"../../internal/density.js";import{hasContent as o,META_TEXT as n,PROSE_TEXT as s,SHEET_GAP as d,SHEET_TITLE as m}from"../../internal/scale.js";import{FADE as c,PORTAL_LAYER as p}from"../../internal/surface.js";import{useMPDensity as f,useMPSize as h}from"../../internal/config.js";const x={xs:"max-w-64",sm:"max-w-72",md:"max-w-96",lg:"max-w-md",xl:"max-w-xl"},u={xs:8,sm:9,md:10,lg:11,xl:12};export function MPHoverCard({trigger:g,title:v,description:w,children:b,side:j="bottom",align:y="center",sideOffset:N=8,alignOffset:O=0,arrow:_=!1,open:P,defaultOpen:$,onOpenChange:z,delay:C,closeDelay:B,width:D,size:M,density:k,className:A,style:H,...I}){const L=h(M),R=f(k),T=o(v)||o(w),W=u[L],q=i.useId(),E=`${q}-title`,F=`${q}-description`;return a(t.Root,{open:P,defaultOpen:$,onOpenChange:e=>z?.(e),children:[e(t.Trigger,{render:g,delay:C,closeDelay:B}),e(t.Portal,{children:e(t.Positioner,{className:p,side:j,align:y,sideOffset:N,alignOffset:O,children:a(t.Popup,{"data-mp-size":L,"aria-labelledby":o(v)?E:void 0,"aria-describedby":o(w)?F:void 0,className:["mp-hover-card rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",l(L,R),d[L],s[L],void 0===D?x[L]:"",c,A??""].filter(Boolean).join(" "),style:{...void 0===D?null:{maxWidth:r(D)},...H},...I,children:[_?e(t.Arrow,{className:["data-[side=top]:bottom-[-1px]","data-[side=bottom]:top-[-1px] data-[side=bottom]:rotate-180","data-[side=left]:right-[-1px] data-[side=left]:-rotate-90","data-[side=right]:left-[-1px] data-[side=right]:rotate-90"].join(" "),children:e("svg",{width:W,height:W/2,viewBox:"0 0 10 5","aria-hidden":"true",className:"block",children:e("path",{d:"M0 0h10L5 5z",fill:"var(--_mp-color-surface-container)"})})}):null,T?a("div",{className:"flex min-w-0 flex-col",children:[o(v)?e("div",{id:E,className:`mp-hover-card__title m-0 ${m[L]}`,children:v}):null,o(w)?e("div",{id:F,className:`mp-hover-card__description text-mp-on-surface-variant m-0 ${n}`,children:w}):null]}):null,o(b)?e("div",{className:"min-w-0",children:b}):null]})})})]})}

package/dist/components/hover-card/index.d.ts

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

package/dist/components/hover-card/index.js

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

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

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

package/dist/components/image/MPImage.js

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

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

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

package/dist/components/image/index.js

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

package/dist/components/line-chart/MPLineChart.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/ChartFrame.js';
+import type { MPChartCurve, MPChartValueLabels } from '../../types.js';
+export interface MPLineChartProps extends CartesianChartProps {
+    /**
+     * How the line gets from one point to the next.
+     * @default 'linear'
+     */
+    curve?: MPChartCurve;
+    /**
+     * The dots on the joins.
+     *
+     * `auto` draws them while they still have room to be separate marks and drops
+     * them once the line is denser than that — a dot every three pixels is not a
+     * row of dots, it is a thicker line.
+     * @default 'auto'
+     */
+    markers?: boolean | 'auto';
+    /**
+     * Which values are written onto the line itself.
+     * @default 'none'
+     */
+    valueLabels?: MPChartValueLabels;
+}
+/**
+ * A quantity over an ordered axis — how it has moved, and where it is going.
+ *
+ * ```tsx
+ * <MPLineChart
+ *   categories={['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
+ *   series={[{ name: 'Signups', data: [120, 138, 131, 164, 190] }]}
+ * />
+ * ```
+ *
+ * It is the shape for a value read along a sequence — days, releases, versions,
+ * steps of a process. What it encodes is **position**, and that is the whole
+ * argument for every decision below: a line says where a number was, and the
+ * distance between two of them says how far it moved.
+ *
+ * ## The axis does not start at zero
+ *
+ * A bar's length means its value, so a bar chart cut off above zero is a lie
+ * about proportion. A line's *position* means its value and nothing about the
+ * mark claims proportionality, so cropping the scale moves every point by the
+ * same amount and the picture survives. Forcing zero onto a series that runs
+ * between 3,200 and 3,400 draws a flat line and reports a real change as
+ * nothing happening.
+ *
+ * Pass `yAxis={{ min: 0 }}` where zero genuinely is the baseline.
+ *
+ * ## A gap is a gap
+ *
+ * A `null` is a point nothing was measured at, and the line breaks there rather
+ * than being joined across. A bridged gap draws a straight run through values
+ * nobody has, and it is the one kind of invented data a reader never questions
+ * — it looks exactly like the rest of the line.
+ *
+ * ## The hover layer is not optional
+ *
+ * A chart in a browser is a thing a reader interrogates, so the crosshair and
+ * the panel are on by default: the question a line chart gets asked is "what
+ * happened in March", and answering it by making somebody measure against a
+ * gridline is answering it badly. The arrow keys walk the same columns, and a
+ * clipped live region says each one out loud.
+ */
+export declare function MPLineChart({ curve, markers, valueLabels, ...frame }: MPLineChartProps): React.JSX.Element;

package/dist/components/line-chart/MPLineChart.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{CartesianFrame as l}from"../../internal/ChartFrame.js";import{LINE_WIDTH as t,MARKER_RADIUS as n,linePath as a}from"../../internal/chart.js";export function MPLineChart({curve:o="linear",markers:i="auto",valueLabels:u="none",...s}){return e(l,{...s,inset:!0,includeZero:!1,headroom:"none"===u?0:14,children:({plot:l,values:s,visible:c,colors:m,point:h,size:d,hovered:f,activeIndex:p,format:x})=>{const v=t[d],k=n[d],j=s.reduce((e,r)=>Math.max(e,r.length),0),y=j>1?l.width/(j-1):l.width,g="auto"===i?y>=6*k:i;return e("g",{className:"mp-line-chart__marks",children:s.map((t,n)=>{if(!c[n])return null;const i=t.map((e,r)=>null===e.value?null:h(r,e.value)),s=m[n];return r("g",{opacity:null!==f&&f!==n?.25:1,children:[e("path",{d:a(i,o),fill:"none",stroke:s,strokeWidth:v,strokeLinecap:"round",strokeLinejoin:"round"}),i.map((r,l)=>{if(!r)return null;const t=p===l;return g||t?e("circle",{cx:r.x,cy:r.y,r:t?k+1:k,fill:s,stroke:"var(--_mp-color-surface)",strokeWidth:2},l):null}),"none"===u?null:t.map((r,n)=>{const a=i[n];if(!a||null===r.value)return null;const o=t.filter(e=>null!==e.value),s=o.map(e=>e.value);if(!("all"===u||"last"===u&&r===o[o.length-1]||"extremes"===u&&(r.value===Math.min(...s)||r.value===Math.max(...s))))return null;const c=a.x>l.left+l.width-24?"end":a.x<l.left+24?"start":"middle";return e("text",{x:a.x,y:a.y-k-5,textAnchor:c,fill:"var(--_mp-color-on-surface)",fontSize:"xs"===d||"sm"===d?10:11,children:r.label??x(r.value)},n)})]},n)})})}})}

package/dist/components/line-chart/index.d.ts

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

package/dist/components/line-chart/index.js

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

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

@@ -1,12 +1,23 @@
 import * as React from 'react';
 import { useRender } from '@base-ui/react/use-render';
-import type { MPColor, MPSize, MPVariant } from '../../types.js';
+import type { MPColor, MPDensity, MPSize, MPElevation, MPVariant } from '../../types.js';
 export interface MPListProps extends Omit<React.ComponentPropsWithoutRef<'ul'>, 'color'> {
     /**
      * How much surface the sheet paints behind the rows.
      * @default 'outlined'
      */
     variant?: MPVariant;
+    /**
+     * How far off the page the sheet is lifted, on MD3's own scale.
+     *
+     * It moves the **tone** as well as the shadow, because Material pairs the two:
+     * a level-2 surface is `surface-container` under a level-2 shadow, and a prop
+     * that only cast a shadow would raise this into a surface the specification
+     * has no name for. Given a level, `variant` is left holding only its hairline.
+     *
+     * Left unset, `variant` decides — and `variant="elevated"` is this at `1`.
+     */
+    elevation?: MPElevation;
     /**
      * 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`.
@@ -19,6 +30,17 @@ export interface MPListProps extends Omit<React.ComponentPropsWithoutRef<'ul'>,
      * @default 'primary'
      */
     color?: MPColor;
+    /**
+     * Takes room out of every row without changing what it is set in.
+     *
+     * A list is the component density was invented for: it is one row repeated,
+     * and how many of them a reader can see at once is most of what makes it
+     * usable. Each step keeps the row exactly one rung down the control ladder —
+     * `md` at `-1` is 52px, which is `lg` at `-2` and a `sm` button at `0` — so a
+     * dense list and the controls beside it still line up.
+     * @default 0
+     */
+    density?: MPDensity;
     /**
      * Separates the rows with a hairline instead of with space.
      *
@@ -62,6 +84,31 @@ export interface MPListItemProps extends Omit<React.ComponentPropsWithoutRef<'li
     action?: React.ReactNode;
     /** Renders the row as a link. Mutually exclusive with `onClick` in practice. */
     href?: string;
+    /**
+     * Where that link opens. `rel` follows on its own for `_blank` — see `rel`.
+     */
+    target?: string;
+    /**
+     * Overrides the `rel` a `_blank` row would otherwise get, which is
+     * `noopener noreferrer`. Writing one **replaces** it rather than adding to it,
+     * so a row that also needs `nofollow` spells all three out.
+     */
+    rel?: string;
+    /**
+     * Renders the row's pressable element as something else — a router's `Link`,
+     * most of the time. `href`, `target` and the row's classes still go through,
+     * so `render={<NextLink />}` needs the URL written once, on the `MPListItem`.
+     *
+     * **This is the one `render` in the library that is not the outermost
+     * element.** A row's shell is an `<li>` because it is inside a `<ul>`, and
+     * swapping that for anything else makes the list stop being a list; what a
+     * caller actually wants to replace is the `<a>` *inside* it, which is the
+     * thing App Router has to own for a client-side navigation and a prefetch to
+     * happen at all. So that is what this replaces. Without `href` or `onClick`
+     * the row is not pressable and there is nothing here to render — this is
+     * ignored rather than wrapping inert content in a link.
+     */
+    render?: useRender.RenderProp;
     /** Marks the row as the chosen one — the open page, the current filter. */
     selected?: boolean;
     /** Unavailable. Drops the accent family, as everywhere else in the library. */
@@ -92,5 +139,8 @@ export declare const MPList: React.ForwardRefExoticComponent<MPListProps & React
  * control. This is the same shape `MPChip` uses, for the same two reasons: a
  * `<span>` carrying a click handler is invisible to a keyboard, and a `<button>`
  * inside a `<button>` is markup Chrome silently un-nests.
+ *
+ * That inner element is what `render` replaces — a router's `Link`, so a row in
+ * a navigation list is a client-side navigation rather than a full page load.
  */
 export declare const MPListItem: React.ForwardRefExoticComponent<MPListItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/components/list/MPList.js

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

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

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

package/dist/components/menu/MPMenu.js

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

package/dist/components/menubar/MPMenubar.js

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