material-plus-ui 1.6.0 → 1.8.0

package/dist/components/image/MPImage.js

@@ -1,2 +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})});
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import*as o from"react";import{Dialog as n}from"@base-ui/react/dialog";import{MPIcon as r}from"../icon/MPIcon.js";import{BrokenImageIcon as a}from"../../constants/icons.js";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{COMMON as c}from"../../internal/messages/common.js";import{FADE as d,PORTAL_LAYER as u,SCRIM as h}from"../../internal/surface.js";import{useMPSize as m}from"../../internal/config.js";const f={cover:"object-cover",contain:"object-contain",fill:"object-fill",none:"object-none","scale-down":"object-scale-down"},p={position:"absolute",top:"50%",left:"50%",width:"100cqh",height:"100cqw",maxWidth:"none",translate:"-50% -50%"},g=Number.parseInt(o.version,10),b=!Number.isFinite(g)||0===g||g>=19?"fetchPriority":"fetchpriority",v={loading:"eager",[b]:"high"};function y(e,t){const i=2*e+"px";return t?{...p,width:`calc(100cqh + ${i})`,height:`calc(100cqw + ${i})`}:{position:"absolute",top:-e,left:-e,width:`calc(100% + ${i})`,height:`calc(100% + ${i})`,maxWidth:"none"}}const w=new Map([["left",[0,0]],["right",[0,1]],["top",[1,0]],["bottom",[1,1]]]);function j(e,t,i){const o=e.trim().split(/\s+/),n=[.5,.5],r=[!1,!1];if(o.length>2)return e;for(const[t,i]of o.entries()){if("center"===i)continue;const o=w.get(i),a=/^(-?\d*\.?\d+)%$/.exec(i),l=o?o[0]:t,s=o?o[1]:a?Number(a[1])/100:void 0;if(void 0===s||r[l])return e;n[l]=s,r[l]=!0}let[a,l]=n;"horizontal"!==i&&"both"!==i||(a=1-a),"vertical"!==i&&"both"!==i||(l=1-l);for(let e=0;e<t/90;e++)[a,l]=[l,1-a];const s=e=>Math.round(1e4*e)/100+"%";return`${s(a)} ${s(l)}`}function $(e){return"number"==typeof e?Number.isFinite(e)?e:void 0:void 0!==e&&/^\d+$/.test(e.trim())?Number(e):void 0}function x(e){const t=$(e);return void 0===t?String(e):`${t}px`}function N(e,t,i){const o=e??t,n=e??(i?t:void 0);if(!o)return{aspectRatio:"1",width:"min(100%, 100cqh)",containerType:"size"};const r=o.height,a=o.width;return{aspectRatio:`${r} / ${a}`,width:`min(100%, ${n?`${n.height}px, `:""}calc(100cqh * ${r} / ${a}))`,containerType:"size"}}function z(e){return e.naturalWidth>0&&e.naturalHeight>0?{width:e.naturalWidth,height:e.naturalHeight}:void 0}export const MPImage=/*@__PURE__*/o.forwardRef(function({src:g,alt:w,ratio:R,fit:k="cover",placeholder:L,fallback:P,preview:S=!1,previewSrc:T,previewLabel:W,onStateChange:q,rotate:M,flip:F="none",position:B="center",letterbox:E="none",priority:O=!1,size:U,className:I,style:C,width:H,height:V,onLoad:A,...D},G){const J=m(U),K=l(),Q=s(c,K),X="object"==typeof(Y=L)&&null!==Y&&!o.isValidElement(Y)&&"src"in Y?L:void 0;var Y;const Z=function(e){const[t,i]=o.useState();return o.useEffect(()=>{if(void 0===e||"string"==typeof e)return;const t=URL.createObjectURL(e);return i({blob:e,url:t}),()=>URL.revokeObjectURL(t)},[e]),void 0===e||"string"==typeof e?e:t?.blob===e?t.url:void 0}(X?.src),[_,ee]=o.useState({state:g?"loading":"error"}),[te,ie]=o.useState(),oe=o.useRef(null),{state:ne,natural:re}=_,ae=o.useCallback((e,t)=>{const i="loaded"===e&&t?z(t):void 0;ee(t=>t.state===e&&t.natural?.width===i?.width&&t.natural?.height===i?.height?t:(t.state!==e&&q?.(e),{state:e,natural:i}))},[q]),[le,se]=o.useState(g);g!==le&&(se(g),ee({state:g?"loading":"error"})),o.useEffect(()=>{const e=oe.current;e&&g&&e.complete&&ae(e.naturalWidth>0?"loaded":"error",e)},[g,ae]);const ce=function(e){return void 0!==e&&Number.isFinite(e)?(Math.round(e/90)%4+4)%4*90:0}(M),de=90===ce||270===ce,ue=function(e,t){const i="horizontal"===t||"both"===t,o="vertical"===t||"both"===t,[n,r]=90===e||270===e?[o,i]:[i,o];return{...e?{rotate:`${e}deg`}:null,...n||r?{scale:`${n?-1:1} ${r?-1:1}`}:null}}(ce,F),he="center"===B?{}:{objectPosition:j(B,ce,F)},me=void 0!==H&&void 0!==V,fe=void 0===H||me?void 0:x(H),pe=void 0===V||me?void 0:x(V),ge=me?$(H):void 0,be=me?$(V):void 0,ve=(ge&&be?{width:ge,height:be}:void 0)??re,ye=de&&void 0===R&&ve&&void 0===pe?`${ve.height} / ${ve.width}`:R,we="loaded"===ne,je=e("div",{className:["bg-mp-surface-container text-mp-on-surface-variant","flex size-full items-center justify-center"].join(" "),children:e(r,{icon:a,size:24})}),$e=e("div",{className:["bg-mp-surface-container-high size-full","motion-safe:animate-pulse motion-reduce:animate-none"].join(" ")}),xe=/*@__PURE__*/[we?"opacity-100":"opacity-0","transition-opacity duration-(--mp-sys-motion-duration-short4)"].join(" "),Ne=D.loading??(O?"eager":void 0),ze=D.fetchPriority??(O?"high":void 0),Re="blur"===E&&("contain"===k||"none"===k||"scale-down"===k),ke="none"!==E&&"blur"!==E?E:void 0,Le=Boolean(Z)&&"error"!==ne,Pe=!0===X?.blur?20:"number"==typeof X?.blur&&Number.isFinite(X.blur)?Math.max(0,X.blur):0,Se=i(t,{children:[Re?e("img",{...ze?{[b]:ze}:null,src:g,srcSet:D.srcSet,sizes:D.sizes,loading:Ne,decoding:D.decoding,crossOrigin:D.crossOrigin,referrerPolicy:D.referrerPolicy,alt:"","aria-hidden":"true",draggable:!1,className:`pointer-events-none select-none object-cover ${xe}`,style:{...ue,...he,filter:"blur(24px)",...y(48,de)}}):null,Le?e("img",{src:Z,alt:"","aria-hidden":"true",draggable:!1,className:`pointer-events-none select-none ${f[k]}`,style:{...ue,...he,...Pe?{filter:`blur(${Pe}px)`}:null,...y(2*Pe,de),...we?{opacity:0,transition:"opacity 0ms linear var(--mp-sys-motion-duration-short4)"}:null}}):null,e("img",{...O?v:null,...D,ref:e=>{oe.current=e,"function"==typeof G?G(e):G&&(G.current=e)},src:g,alt:w,width:me?H:void 0,height:me?V:void 0,className:`block size-full ${f[k]} ${xe}`,style:{...ue,...he,...Re||Le?{position:"relative"}:null,...de?p:null},onLoad:e=>{ae("loaded",e.currentTarget),A?.(e)},onError:()=>ae("error")}),"loading"!==ne||!1===L||X?null:e("span",{"aria-hidden":"true",className:"absolute inset-0",children:L??$e}),"error"===ne?e("span",{className:"absolute inset-0",children:P??je}):null]}),Te=["mp-image relative block overflow-hidden",I??""].filter(Boolean).join(" "),We={aspectRatio:ye,...void 0!==fe?{width:fe,maxWidth:"100%"}:null,...void 0!==pe?{height:pe}:null,...void 0!==pe&&void 0!==R?{width:"auto",maxWidth:"100%"}:null,...de?{containerType:"size"}:null,...void 0!==ke?{background:ke}:null,...C},qe=T??g,Me=te?.src===qe?te:void 0,Fe=e=>{const t=z(e.currentTarget);!t||t.width===Me?.width&&t.height===Me?.height||ie({...t,src:qe})};return S?i(n.Root,{children:[e(n.Trigger,{"data-mp-size":J,"data-mp-state":ne,disabled:"error"===ne,"aria-label":(W??w)||Q.open,className:[Te,"w-full","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"].filter(Boolean).join(" "),style:We,children:Se}),i(n.Portal,{children:[e(n.Backdrop,{className:`${h} ${d} fixed inset-0 z-40`}),e(n.Popup,{className:[u,d,"fixed inset-0 flex items-center justify-center p-6"].join(" "),style:de?{containerType:"size"}:void 0,children:de?e("span",{className:"relative block shrink-0",style:N(Me,ve,void 0===T),children:e("img",{src:qe,alt:w,className:"object-contain",style:{...ue,...p},onLoad:Fe})}):e("img",{src:qe,alt:w,className:"max-h-full max-w-full object-contain",style:ue,onLoad:Fe})})]})]}):e("span",{"data-mp-size":J,"data-mp-state":ne,className:Te,style:We,children:Se})});

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

@@ -1,2 +1,2 @@
 export { MPImage } from './MPImage.js';
-export type { MPImageProps, MPImageFit, MPImageState } from './MPImage.js';
+export type { MPImageProps, MPImageFit, MPImageFlip, MPImagePlaceholder, MPImagePosition, MPImageRotate, MPImageState } 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.
      *

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

@@ -34,7 +34,7 @@ export interface MPMenuProps extends MPMenuSurfaceProps {
      * 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
+     * [MPIconButton](./icon-button), an [MPChip](../display/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

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";import{useMPColor as b,useMPSize as g}from"../../internal/config.js";const v=/*@__PURE__*/["mp-menu__popup rounded-mp-xs shadow-mp-2 bg-mp-surface-container text-mp-on-surface","max-h-[min(24rem,var(--available-height))] min-w-[112px] max-w-[280px]","overflow-y-auto overscroll-contain py-2 outline-none",f].join(" "),N={xs:"min-h-8",sm:"min-h-10",md:"min-h-12",lg:"min-h-14",xl:"min-h-16"},y={xs:"px-2",sm:"px-2.5",md:"px-3",lg:"px-4",xl:"px-5"},C={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3",xl:"gap-4"},k={xs:"text-mp-label-medium",sm:"text-mp-label-large",md:"text-mp-label-large",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};function j(e,n,t){return["group relative flex w-full cursor-pointer items-center select-none",n?"text-(--_mp-accent)":"text-mp-on-surface",N[e],y[e],C[e],k[e],"data-disabled:text-mp-on-surface/38 data-disabled:cursor-default","outline-none",t??""].filter(Boolean).join(" ")}function M(){return e(m,{layer:"inset-0 bg-current",className:"group-data-highlighted:opacity-8 group-data-popup-open:opacity-8 group-data-disabled:opacity-0"})}const O="relative flex shrink-0 items-center justify-center";function P({children:t,description:a}){return h(a)?n("span",{className:"relative flex min-w-0 flex-1 flex-col py-1.5 text-start",children:[e("span",{className:"truncate",children:t}),e("span",{className:`text-mp-on-surface-variant truncate ${p}`,children:a})]}):e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:t})}function I({shortcut:n}){return h(n)?e("span",{className:`text-mp-on-surface-variant relative ms-2 shrink-0 ${p}`,children:n}):null}export function MPMenuItem({onClick:l,href:r,target:s,rel:o,startIcon:d,endIcon:m,shortcut:u,description:p,color:f,closeOnClick:x=!0,disabled:b=!1,label:g,children:v,className:N,style:y}){const{size:C}=t.useContext(c),k=n(t.Fragment,{children:[e(M,{}),h(d)?e("span",{className:`${O} text-mp-on-surface-variant`,children:d}):null,e(P,{description:p,children:v}),h(m)?e("span",{className:`${O} text-mp-on-surface-variant`,children:m}):null,e(I,{shortcut:u})]}),$=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0,z=$||y?{...$,...y}:void 0;return void 0===r||b?e(a.Item,{disabled:b,label:g,closeOnClick:x,onClick:l,className:j(C,Boolean(f),N),style:z,children:k}):e(a.LinkItem,{href:r,target:s,rel:i(s,o),label:g,closeOnClick:x,onClick:l,className:j(C,Boolean(f),N),style:z,children:k})}export function MPMenuCheckboxItem({checked:l,defaultChecked:o,onCheckedChange:i,endIcon:d,shortcut:m,description:p,color:f,closeOnClick:x=!1,disabled:b=!1,label:g,children:v,className:N,style:y}){const{size:C}=t.useContext(c),k=f?{"--_mp-accent":`var(--_mp-color-${f})`}:void 0;return n(a.CheckboxItem,{checked:l,defaultChecked:o,onCheckedChange:e=>i?.(e),disabled:b,label:g,closeOnClick:x,className:j(C,Boolean(f),N),style:k||y?{...k,...y}:void 0,children:[e(M,{}),e("span",{className:`${O} text-(--_mp-accent)`,style:{width:u[C]},children:e(a.CheckboxItemIndicator,{className:"flex items-center justify-center",children:e(r,{icon:s,size:u[C]})})}),e(P,{description:p,children:v}),h(d)?e("span",{className:`${O} text-mp-on-surface-variant`,children:d}):null,e(I,{shortcut:m})]})}export function MPMenuRadioGroup({value:n,defaultValue:t,onValueChange:l,disabled:r=!1,children:s,className:o,style:i}){return e(a.RadioGroup,{value:n,defaultValue:t,onValueChange:e=>l?.(e),disabled:r,className:o,style:i,children:s})}export function MPMenuRadioItem({value:l,endIcon:r,shortcut:s,description:o,color:i,closeOnClick:d=!1,disabled:m=!1,label:p,children:f,className:x,style:b}){const{size:g}=t.useContext(c),v=i?{"--_mp-accent":`var(--_mp-color-${i})`}:void 0;return n(a.RadioItem,{value:l,disabled:m,label:p,closeOnClick:d,className:j(g,Boolean(i),x),style:v||b?{...v,...b}:void 0,children:[e(M,{}),e("span",{className:`${O} text-(--_mp-accent)`,style:{width:u[g]},children:e(a.RadioItemIndicator,{className:"flex items-center justify-center",children:e("span",{className:"block size-2.5 rounded-full bg-current"})})}),e(P,{description:o,children:f}),h(r)?e("span",{className:`${O} text-mp-on-surface-variant`,children:r}):null,e(I,{shortcut:s})]})}export function MPMenuGroup({label:l,children:r,className:s,style:o}){const{size:i}=t.useContext(c);return n(a.Group,{className:s,style:o,children:[h(l)?e(a.GroupLabel,{className:`text-mp-on-surface-variant pt-2 pb-1 ${y[i]} ${p}`,children:l}):null,r]})}export function MPMenuSeparator({className:n,...t}){return e(a.Separator,{className:["bg-mp-outline-variant my-2 h-px",n??""].filter(Boolean).join(" "),...t})}export function MPMenuSubmenu({label:l,startIcon:s,disabled:i=!1,side:m="right",sideOffset:p=0,children:f,className:b,style:g}){const{size:N,color:y}=t.useContext(c);return n(a.SubmenuRoot,{children:[n(a.SubmenuTrigger,{disabled:i,className:j(N,!1),children:[e(M,{}),h(s)?e("span",{className:`${O} text-mp-on-surface-variant`,children:s}):null,e("span",{className:"relative min-w-0 flex-1 truncate text-start",children:l}),e("span",{className:`${O} text-mp-on-surface-variant rtl:rotate-180`,children:e(r,{icon:o,size:u[N]})})]}),e(a.Portal,{children:e(a.Positioner,{className:x,side:m,sideOffset:p,align:"start",children:e(a.Popup,{className:[v,b??""].filter(Boolean).join(" "),style:{...d(y),...g},children:f})})})]})}export function MPMenu({size:l,color:r,trigger:s,open:o,defaultOpen:i,onOpenChange:m,side:u="bottom",align:p="start",sideOffset:h=4,modal:f,openOnHover:N=!1,loopFocus:y=!0,nativeButton:C=!0,disabled:k=!1,className:j,style:M,children:O}){const P=g(l),I=b(r),$=t.useMemo(()=>({size:P,color:I}),[P,I]);return e(c.Provider,{value:$,children:n(a.Root,{open:o,defaultOpen:i,onOpenChange:e=>m?.(e),modal:f,loopFocus:y,disabled:k,children:[s?e(a.Trigger,{render:s,openOnHover:N,nativeButton:C,disabled:k}):null,e(a.Portal,{children:e(a.Positioner,{className:x,side:u,align:p,sideOffset:h,children:e(a.Popup,{"data-mp-size":P,className:[v,j??""].filter(Boolean).join(" "),style:{...d(I),...M},children:O})})})]})})}export function MPContextMenu({size:a,color:r,content:s,children:o,open:i,defaultOpen:m,onOpenChange:u,loopFocus:p=!0,disabled:h=!1,className:f,style:N}){const y=g(a),C=b(r),k=t.useMemo(()=>({size:y,color:C}),[y,C]);return e(c.Provider,{value:k,children:n(l.Root,{open:i,defaultOpen:m,onOpenChange:e=>u?.(e),loopFocus:p,disabled:h,children:[e(l.Trigger,{children:o}),e(l.Portal,{children:e(l.Positioner,{className:x,children:e(l.Popup,{"data-mp-size":y,className:[v,f??""].filter(Boolean).join(" "),style:{...d(C),...N},children:s})})})]})})}
+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 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})})});
+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 border-0 font-[inherit] whitespace-nowrap select-none","transition-colors duration-(--mp-sys-motion-duration-short4)","data-popup-open:text-(--_mp-accent)","disabled:text-mp-on-surface/38 disabled:cursor-default","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none",u[h],d[h],f[h],a[h],x??""].filter(Boolean).join(" "),style:b,children:[c?null:e(l,{className:"group-data-popup-open:opacity-8"}),m(s)?e("span",{className:"relative flex",children:s}):null,e("span",{className:"relative",children:r})]}),children:p})}export const MPMenubar=/*@__PURE__*/o.forwardRef(function({orientation:t="horizontal",modal:n=!0,loopFocus:l=!0,disabled:m=!1,size:u,color:d,className:f,style:x,children:b,...h},j){const g=p(u),v=c(d),y=o.useMemo(()=>({size:g,color:v}),[g,v]);return e(i.Provider,{value:y,children:e(r,{ref:j,orientation:t,modal:n,loopFocus:l,disabled:m,"data-mp-size":g,"data-mp-orientation":t,className:["mp-menubar flex items-center","vertical"===t?"flex-col items-stretch":"flex-row",a[g],f??""].filter(Boolean).join(" "),style:{...s(v),...x},...h,children:b})})});

package/dist/components/meter/MPMeter.d.ts

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import type { MPColor, MPSize, MPThreshold } from '../../types.js';
+export interface MPMeterProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * How much there is.
+     *
+     * Required, and that is the whole difference from `MPProgressLinear`: a meter
+     * reports a quantity that is already known, so there is no indeterminate case
+     * for a default to stand in for.
+     */
+    value: number;
+    /** @default 0 */
+    min?: number;
+    /** @default 100 */
+    max?: number;
+    /** A name for what is being measured. Read out with the value. */
+    label?: React.ReactNode;
+    /**
+     * Shows the value as text beside the bar. A share of the range unless
+     * `format` says otherwise.
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * How to write that value — `Intl.NumberFormat` options, so bytes,
+     * currencies and plain counts all work.
+     *
+     * It matters more here than on a progress bar. A meter usually has real
+     * units: 41 of 60 seats, 2.1 GB of 5, £340 of a £500 budget. A percentage is
+     * what a range nobody described reads as, not what the reader came for.
+     */
+    format?: Intl.NumberFormatOptions;
+    /**
+     * Where the bar changes colour, smallest `from` first. The family of the last
+     * threshold the value has reached wins; below all of them `color` stands.
+     */
+    thresholds?: readonly MPThreshold[];
+    /**
+     * Thickness of the groove. Nothing else on a bar has a size.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * The family the bar carries before any threshold is reached.
+     * @default 'primary'
+     */
+    color?: MPColor;
+}
+/**
+ * How much of something there is, on a scale known in advance — disk used, seats
+ * taken, quota spent, a password's strength.
+ *
+ * ```tsx
+ * <MPMeter
+ *   value={41}
+ *   max={60}
+ *   label="Seats taken"
+ *   showValue
+ *   thresholds={[{ from: 48, color: 'tertiary' }, { from: 57, color: 'error' }]}
+ * />
+ * ```
+ *
+ * ## It looks like a progress bar and is not one
+ *
+ * A progress bar is about **time**: something is happening, this is how far it
+ * has got, it may have no value at all, and it is expected to move on its own.
+ * A meter is about **quantity**: the number is already known, it does not move
+ * unless the thing it measures does, and it is meaningful to say the reading is
+ * bad — which is what `thresholds` is for and what a progress bar has no use
+ * for. A disk that is 94% full is not 94% finished.
+ *
+ * The two carry different roles for that reason, so a screen reader announces a
+ * meter as a measurement rather than as something in progress. Reaching for the
+ * wrong one is not a styling mistake; it is a claim about what the number means.
+ *
+ * ## `thresholds` names roles, not colours
+ *
+ * MD3 has four accent families and none of them is called `warning`, so an amber
+ * band is `tertiary` under whatever source colour the page is themed from. That
+ * is the honest answer rather than a limitation: a threshold that named a colour
+ * would be a colour that ignores the theme, on the one component whose whole
+ * point is to be read at a glance.
+ *
+ * The last threshold the value has reached wins, so they are listed smallest
+ * first and the list is read in the order it was given.
+ */
+export declare const MPMeter: React.ForwardRefExoticComponent<MPMeterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/meter/MPMeter.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Meter as t}from"@base-ui/react/meter";import{accentSlots as n}from"../../internal/accent.js";import{META_TEXT as o,STACK_GAP as s}from"../../internal/scale.js";import{BAR_THICKNESS as l,progressFraction as i}from"../../internal/progress.js";import{useMPColor as m,useMPSize as c}from"../../internal/config.js";import{thresholdColor as u}from"../../internal/threshold.js";export const MPMeter=/*@__PURE__*/a.forwardRef(function({value:a,min:f=0,max:d=100,label:p,showValue:h=!1,format:j,thresholds:b,size:x,color:w,className:v,style:N,..._},g){const y=c(x),k=m(w),M=i(a,f,d),z=u(a,k,b),R=void 0!==j;return r(t.Root,{ref:g,value:a,min:f,max:d,format:j,"data-mp-size":y,className:["mp-meter flex w-full flex-col",s[y],v??""].filter(Boolean).join(" "),style:{...n(z),...N},..._,children:[p||h?r("div",{className:["mp-meter__header flex items-baseline gap-2",p?"justify-between":"justify-end",o].join(" "),children:[p?e(t.Label,{className:"text-mp-on-surface min-w-0 truncate",children:p}):null,h?e(t.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>R?e:`${Math.round(100*(M??0))}%`}):null]}):null,e(t.Track,{className:["mp-meter__track rounded-mp-full bg-mp-on-surface/12 relative w-full overflow-hidden",l[y]].join(" "),children:e(t.Indicator,{className:["mp-meter__bar rounded-mp-full absolute inset-y-0 start-0 bg-(--_mp-accent)","transition-[width,background-color] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard motion-reduce:transition-none"].join(" ")})})]})});

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

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

package/dist/components/meter/index.js

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

package/dist/components/mockup/MPMockup.d.ts

@@ -0,0 +1,143 @@
+import * as React from 'react';
+import type { MPMockupBezel, MPMockupDevice, MPMockupFinish, MPMockupHardware, MPMockupNotch, MPMockupOrientation, MPMockupOs, MPMockupResolution } from '../../internal/mockup.js';
+import type { MPSize } from '../../types.js';
+export type { MPMockupBezel, MPMockupDevice, MPMockupFinish, MPMockupHardware, MPMockupNotch, MPMockupOrientation, MPMockupOs, MPMockupResolution };
+export interface MPMockupProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which machine this is a picture of. The one prop with no default: a mockup
+     * that has not said what it is a mockup of has not said anything.
+     */
+    device: MPMockupDevice;
+    /**
+     * The system whose chrome is drawn on the screen. A desktop runs `macos`,
+     * `windows` or `linux`; a tablet runs `ipados` or `android`; a phone runs
+     * `ios` or `android`.
+     *
+     * A value the device cannot run falls back to that device's own default
+     * rather than being refused — `os="macos"` on a phone is a caller who changed
+     * `device` and forgot this one.
+     */
+    os?: MPMockupOs;
+    /**
+     * What holds a desktop screen up: a stand under it, or a keyboard in front of
+     * it. Ignored on a tablet and a phone, which hold themselves up.
+     * @default 'monitor'
+     */
+    hardware?: MPMockupHardware;
+    /**
+     * How big the device is, on a five-step ladder of real resolutions per device
+     * — a 320-wide phone up to a 430-wide one, a 1024-wide desktop up to a
+     * 1920-wide one.
+     *
+     * As on `MPBox`, `size` here sets no height and no type scale. What it sets is
+     * the **resolution of the screen**, which is the only thing about a device
+     * there is to scale. `resolution` overrides it outright.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * The screen's logical resolution in CSS pixels, when none of the five steps
+     * is the machine you mean.
+     *
+     * This is the viewport the content is laid out against, not the panel's
+     * physical pixel count.
+     */
+    resolution?: MPMockupResolution;
+    /**
+     * Which way a handheld is held. Landscape turns the screen, the bezel and the
+     * cut-out together. Ignored on a desktop, whose stand does not turn with it.
+     * @default 'portrait'
+     */
+    orientation?: MPMockupOrientation;
+    /**
+     * How much hardware there is around the screen.
+     *
+     * `none` is not a thinner bezel — it is no hardware at all, leaving the screen
+     * on its own with its corners cut, which is what a mockup that only wants the
+     * viewport is asking for. `thick` is an older device: narrow sides, a
+     * forehead and a chin.
+     * @default 'standard'
+     */
+    bezel?: MPMockupBezel;
+    /**
+     * What the hardware is made of. Fixed colours rather than theme tokens — a
+     * graphite phone stays graphite on a page switched to dark.
+     * @default 'graphite'
+     */
+    finish?: MPMockupFinish;
+    /**
+     * The camera cut-out. Hardware rather than chrome, so it is drawn whether or
+     * not `systemUi` is on. Defaults to what the device would have: a dynamic
+     * island on an iOS phone, a punch hole on an Android one, nothing anywhere
+     * else.
+     */
+    notch?: MPMockupNotch;
+    /**
+     * Draws the system's own bars — a status bar and a home indicator, a menu bar
+     * and a dock, a taskbar.
+     *
+     * Each takes its own room rather than covering the content, so turning it off
+     * gives the screen back to `children` rather than uncovering anything.
+     * @default true
+     */
+    systemUi?: boolean;
+    /**
+     * The rendered width of the whole picture on the page. A number is pixels, a
+     * string is any CSS length.
+     *
+     * Left out the mockup fills the width it is given. The device is always laid
+     * out at its own resolution and then scaled once, so this changes how big the
+     * picture is and never what the content inside it thinks the viewport is.
+     */
+    width?: number | string;
+    /** The rendered height. Given on its own it decides the size and the width follows. */
+    height?: number | string;
+    /** What is on the screen. */
+    children?: React.ReactNode;
+}
+/**
+ * A picture of a device, with a real page inside it.
+ *
+ * ```tsx
+ * <MPMockup device="mobile" width={280}>
+ *   <YourScreen />
+ * </MPMockup>
+ * ```
+ *
+ * ## The screen is a real viewport
+ *
+ * `children` are laid out against the device's own resolution — 390 by 844 CSS
+ * pixels for a phone at `md` — and the whole device is then scaled once to
+ * whatever room it was given. So a layout inside it wraps where it would wrap
+ * on the machine, not where it would wrap in the box the picture happens to fit
+ * in.
+ *
+ * The one thing to know is that a media query still measures the **window**.
+ * `@media (max-width: 600px)` inside a phone mockup on a laptop is false, and
+ * always will be — nothing on the page can change what the window is. Content
+ * that has to respond inside the frame should measure the frame, with a
+ * container query.
+ *
+ * ## That scale is a transform, and it is the exception
+ *
+ * The rule everywhere else in this library is that a surface is not moved or
+ * scaled. It is a rule about **controls**: a scaled button is a button whose
+ * text was resampled at the moment it was pressed.
+ *
+ * Nothing here is pressed, and the scale never changes on an interaction — it
+ * is set once from the room available and again only when that room changes. A
+ * device drawn at a third of its size is a picture of a device, which is the
+ * whole point, and no other mechanism lays a 390-pixel page out inside a
+ * 130-pixel box.
+ *
+ * ## Hardware is a photograph, software is a page
+ *
+ * The finishes are fixed colours and do not follow the theme: a graphite phone
+ * stays graphite on a page switched to dark, because a mockup whose aluminium
+ * turned white would be a mockup of nothing.
+ *
+ * The chrome on the screen does follow it. A menu bar and a status bar are
+ * drawn out of `surface` and `on-surface`, so the frame stays a frame around
+ * *your* page rather than becoming a picture of somebody else's screenshot.
+ */
+export declare const MPMockup: React.ForwardRefExoticComponent<MPMockupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/mockup/MPMockup.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as i from"react";import{cssLength as o}from"../../internal/length.js";import{FINISHES as s,HARDWARE as h,MockupCutout as r,RESOLUTIONS as n,defaultNotch as a,mockupChrome as d,mockupMetrics as l,resolveOs as c}from"../../internal/mockup.js";import{useMPSize as m}from"../../internal/config.js";export const MPMockup=/*@__PURE__*/i.forwardRef(function({device:p,os:u,hardware:f="monitor",size:g,resolution:w,orientation:v="portrait",bezel:b="standard",finish:k="graphite",notch:y,systemUi:x=!0,width:_,height:$,className:R,style:N,children:j,...z},B){const H=m(g),M=c(p,u),O=y??a(p,M),W=l({device:p,bezel:b,hardware:f,orientation:v,resolution:w??n[p][H]}),{screen:C,body:P,frame:E,shell:F,screenRadius:S,stand:T,laptop:U}=W,q=x?d({os:M,width:C.width,notch:O}):null,A=i.useRef(null),[D,G]=i.useState(null);i.useEffect(()=>{const e=A.current;if(!e||"undefined"==typeof ResizeObserver)return;const t=()=>{const t=e.getBoundingClientRect();t.width<=0||t.height<=0||G(Math.min(t.width/E.width,t.height/E.height))};t();const i=new ResizeObserver(t);return i.observe(e),()=>i.disconnect()},[E.width,E.height]);const I=i.useCallback(e=>{A.current=e,"function"==typeof B?B(e):B&&(B.current=e)},[B]);return e("div",{ref:I,"data-mp-size":H,"data-mp-device":p,"data-mp-os":M,className:["mp-mockup relative",R??""].filter(Boolean).join(" "),style:{...s[k],width:o(_)??(void 0===$?"100%":"auto"),height:o($),aspectRatio:`${E.width} / ${E.height}`,...N},...z,children:t("div",{className:"mp-mockup__frame absolute top-1/2 left-1/2 flex flex-col items-center",style:{width:E.width,height:E.height,transform:`translate(-50%, -50%) scale(${D??1})`,transformOrigin:"center",visibility:null===D?"hidden":void 0},children:[e("div",{className:`mp-mockup__body relative shrink-0 ${h}`,style:{width:P.width,height:P.height,borderRadius:F.radius,padding:`${F.top}px ${F.side}px ${F.bottom}px`},children:t("div",{className:"mp-mockup__screen bg-mp-surface text-mp-on-surface relative flex size-full flex-col overflow-hidden",style:{borderRadius:S},children:[q?.top,e("div",{className:"mp-mockup__content relative min-h-0 overflow-hidden",style:{width:C.width,height:C.height-(q?.insetTop??0)-(q?.insetBottom??0)},children:j}),q?.bottom,e(r,{notch:O,width:C.width})]})}),T?t(i.Fragment,{children:[e("div",{className:`mp-mockup__neck shrink-0 ${h}`,style:{width:T.neckWidth,height:T.neckHeight}}),e("div",{className:`mp-mockup__foot shrink-0 ${h}`,style:{width:T.footWidth,height:T.footHeight,borderRadius:T.footHeight}})]}):null,U?e("div",{className:`mp-mockup__base relative shrink-0 ${h}`,style:{width:U.width,height:U.height,clipPath:"polygon(2% 0, 98% 0, 100% 100%, 0 100%)",borderRadius:`0 0 ${.5*U.height}px ${.5*U.height}px`},children:e("span",{className:"bg-(--_mp-device-edge) absolute top-0 left-1/2 -translate-x-1/2 rounded-b-full",style:{width:U.lipWidth,height:.28*U.height}})}):null]})})});

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

@@ -0,0 +1,2 @@
+export { MPMockup } from './MPMockup.js';
+export type { MPMockupBezel, MPMockupDevice, MPMockupFinish, MPMockupHardware, MPMockupNotch, MPMockupOrientation, MPMockupOs, MPMockupProps, MPMockupResolution } from './MPMockup.js';

package/dist/components/mockup/index.js

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

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

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

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

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