material-plus-ui 1.7.0 → 1.9.0

package/dist/components/empty/MPEmpty.d.ts

@@ -52,7 +52,7 @@ export interface MPEmptyProps extends Omit<React.ComponentPropsWithoutRef<'div'>
      * `transition="fade"` is the whole of what most callers want; the object form
      * takes a duration, an edge to come from, or a scale to start at. Anything
      * that has to run again — on scroll, on hover, under your own control — is an
-     * [MPAnimateFade](../motion/animate-fade) and its siblings.
+     * [MPAnimateFade](../transitions/animate-fade) and its siblings.
      */
     transition?: MPTransition;
 }

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

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

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

@@ -15,19 +15,28 @@ export type MPGridAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 /** The same, for one item overriding the row it is in. */
 export type MPGridAlignSelf = MPGridAlign | 'auto';
 /**
- * How wide one item is: a number of the grid's columns, or `'grow'`.
+ * How wide one item is: a number of the grid's columns, `'grow'` or `'auto'`.
  *
- * `'grow'` is the one value that is not a measurement. It is "whatever the row
- * has left after everybody else has taken theirs", which is the width a
- * thumbnail's neighbour wants and the one thing a twelve-column arithmetic
- * cannot express — the remainder is only known once the other items in *that*
- * row have been laid out, and no `span` a caller writes down knows what else is
- * in the row.
+ * Neither word is a measurement, and they are the two ends of the same question
+ * a column count cannot answer. `'grow'` is "whatever the row has left after
+ * everybody else has taken theirs" — the width a thumbnail's neighbour wants,
+ * and one the arithmetic cannot reach because the remainder is only known once
+ * the other items in *that* row have been laid out. `'auto'` is "exactly what is
+ * inside me", which the arithmetic cannot reach either: what is inside an item
+ * is measured by the browser, and a share of twelve columns has to be written
+ * down in advance.
+ *
+ * They pair. A control bar whose left half is a set of transport buttons and
+ * whose right half is however many icon buttons the page turned out to need is
+ * `span="grow"` and `span="auto"`, and neither side has a number in it — which
+ * matters because the number would be wrong: four 32px buttons in `span={2}` of
+ * a 768px bar is 128px against 128px, and the pixel that sub-pixel rounding
+ * takes off wraps the last button onto a second row.
  *
  * Two growing items in a row split the remainder equally rather than by their
  * contents, which is the useful half of what makes it predictable.
  */
-export type MPGridSpan = number | 'grow';
+export type MPGridSpan = number | 'grow' | 'auto';
 export interface MPGridProps extends React.ComponentPropsWithoutRef<'div'> {
     /**
      * How many columns a row is divided into. Every `span` and every `offset`
@@ -96,6 +105,14 @@ export interface MPGridItemProps extends React.ComponentPropsWithoutRef<'div'> {
      * when the picture's column count changes. It is responsive like any other
      * value: `span={{ compact: 12, medium: 'grow' }}` stacks on a phone and fills
      * the rest of the row from 600dp.
+     *
+     * `span="auto"` is the other end of that: exactly the width of what is inside
+     * the item, however much that turns out to be. It is the span for a group
+     * whose size is a runtime question — a row of icon buttons where how many
+     * there are depends on what the page can do — and it pairs with `'grow'`, one
+     * item taking what it needs and the other taking the rest. An `'auto'` item
+     * does not shrink, so contents wider than the row overflow rather than
+     * squeezing what is beside them.
      * @default the grid's full width
      */
     span?: MPResponsive<MPGridSpan>;

package/dist/components/grid/MPGrid.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";import{classMap as n,responsiveSlots as r,withBaseline as s}from"../../internal/responsive.js";import{WINDOW_CLASSES as a}from"../../internal/window-class.js";function o(e){return String(Math.max(1,Math.round(e)))}function c(e){return String(Math.max(1,Math.round(e)))}function i(e){const t=n(e),r=Object.values(t).some(e=>"grow"===e),s={};for(const e of a){const n=t[e];void 0!==n&&("grow"!==n&&(s[`--_mp-span-${e}`]=c(n)),r&&(s[`--_mp-grow-${e}`]="grow"===n?"1":"0"))}return s}function l(e){return String(Math.max(0,Math.round(e)))}function f(e){const t=.25*Math.max(0,e);return`${Number(t.toFixed(5))}rem`}const p={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},u={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},m={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"},d={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};export const MPGrid=/*@__PURE__*/e.forwardRef(function({columns:e,spacing:n,rowSpacing:a,columnSpacing:c,justifyContent:i,alignItems:l,alignContent:d,wrap:g=!0,render:y,className:h,style:w,children:x,...j},b){return t({render:y,ref:b,props:{className:["mp-grid flex",g?"flex-wrap":"flex-nowrap","gap-x-(--_mp-gap-x) gap-y-(--_mp-gap-y)",i?p[i]:"",l?u[l]:"",d?m[d]:"",h??""].filter(Boolean).join(" "),style:{...r("cols",s(e,12),o),...r("gap-x",s(c??n,4),f),...r("gap-y",s(a??n,4),f),...w},children:x,...j}})});export const MPGridItem=/*@__PURE__*/e.forwardRef(function({span:e,offset:n,alignSelf:s,render:a,className:o,style:c,children:f,...p},u){return t({render:a,ref:u,props:{className:["mp-grid-item",s?d[s]:"",o??""].filter(Boolean).join(" "),"data-mp-offset":null==n?void 0:"",style:{...i(e),...r("offset",n,l),...c},children:f,...p}})});
+import*as e from"react";import{useRender as t}from"@base-ui/react/use-render";import{classMap as n,responsiveSlots as r,withBaseline as s}from"../../internal/responsive.js";import{WINDOW_CLASSES as a}from"../../internal/window-class.js";function o(e){return String(Math.max(1,Math.round(e)))}function c(e){return String(Math.max(1,Math.round(e)))}function i(e){const t=n(e),r=Object.values(t),s=r.some(e=>"grow"===e),o=r.some(e=>"auto"===e),i={};for(const e of a){const n=t[e];void 0!==n&&("grow"!==n&&"auto"!==n&&(i[`--_mp-span-${e}`]=c(n)),s&&(i[`--_mp-grow-${e}`]="grow"===n?"1":"0"),o&&(i[`--_mp-width-${e}`]="auto"===n?"auto":"var(--_mp-span-width)"))}return i}function l(e){return String(Math.max(0,Math.round(e)))}function f(e){const t=.25*Math.max(0,e);return`${Number(t.toFixed(5))}rem`}const p={start:"justify-start",center:"justify-center",end:"justify-end","space-between":"justify-between","space-around":"justify-around","space-evenly":"justify-evenly"},u={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},m={start:"content-start",center:"content-center",end:"content-end","space-between":"content-between","space-around":"content-around","space-evenly":"content-evenly",stretch:"content-stretch"},d={auto:"self-auto",start:"self-start",center:"self-center",end:"self-end",stretch:"self-stretch",baseline:"self-baseline"};export const MPGrid=/*@__PURE__*/e.forwardRef(function({columns:e,spacing:n,rowSpacing:a,columnSpacing:c,justifyContent:i,alignItems:l,alignContent:d,wrap:g=!0,render:h,className:w,style:y,children:x,...j},b){return t({render:h,ref:b,props:{className:["mp-grid flex",g?"flex-wrap":"flex-nowrap","gap-x-(--_mp-gap-x) gap-y-(--_mp-gap-y)",i?p[i]:"",l?u[l]:"",d?m[d]:"",w??""].filter(Boolean).join(" "),style:{...r("cols",s(e,12),o),...r("gap-x",s(c??n,4),f),...r("gap-y",s(a??n,4),f),...y},children:x,...j}})});export const MPGridItem=/*@__PURE__*/e.forwardRef(function({span:e,offset:n,alignSelf:s,render:a,className:o,style:c,children:f,...p},u){return t({render:a,ref:u,props:{className:["mp-grid-item",s?d[s]:"",o??""].filter(Boolean).join(" "),"data-mp-offset":null==n?void 0:"",style:{...i(e),...r("offset",n,l),...c},children:f,...p}})});

package/dist/components/heatmap-chart/MPHeatmapChart.d.ts

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { type ChartBaseProps } from '../../internal/ChartChrome.js';
 import type { MPChartAxis, MPChartCategory, MPChartSeries } from '../../types.js';
-export interface MPHeatmapChartProps extends ChartBaseProps {
+/**
+ * No `labelColor`: every piece of text this chart writes sits **on** a ramp
+ * step, where the question is what reads against the fill underneath. There are
+ * no series here for an ink to name, either.
+ */
+export interface MPHeatmapChartProps extends Omit<ChartBaseProps, 'labelColor'> {
     /**
      * The rows. Each series is one row and its `data` are that row's cells, in
      * the order `categories` names the columns.
@@ -9,9 +14,13 @@ export interface MPHeatmapChartProps extends ChartBaseProps {
     series: readonly MPChartSeries[];
     /** The column headings. */
     categories?: readonly MPChartCategory[];
-    /** The column axis. Only `label`, `hidden` and `tickFormat` mean anything here. */
+    /**
+     * The column axis. Only `label`, `hidden`, `thickness`, `tickFormat` and
+     * `tickLabels` mean anything here — there is no scale to pin and no grid to
+     * cast when both axes are categorical.
+     */
     xAxis?: MPChartAxis;
-    /** The row axis, same three. */
+    /** The row axis, minus `tickLabels`: a row already has a line of its own. */
     yAxis?: MPChartAxis;
     /**
      * Where the colour scale starts and ends. Taken from the data otherwise.

package/dist/components/heatmap-chart/MPHeatmapChart.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as t from"react";import{useMPElementSize as n}from"../../hooks/useMPElementSize.js";import{useMPLocale as a,useMPMessages as r}from"../../internal/locale.js";import{useMPSize as o}from"../../internal/config.js";import{CHART as i}from"../../internal/messages/chart.js";import{TABLE as m}from"../../internal/messages/table.js";import{ChartShell as s,ChartTable as c,ChartTooltipPanel as h}from"../../internal/ChartChrome.js";import{CHART_FONT_SIZE as u,MARK_GAP as d,PLOT_HEIGHT as f,RAMP_STEPS as p,formatCategory as x,formatStatistic as g,rampFill as v,rampInk as y,rampStep as w,textWidth as b,toValues as k,truncate as M}from"../../internal/chart.js";export function MPHeatmapChart({series:j,categories:A,xAxis:N,yAxis:S,min:$,max:_,valueLabels:z=!1,height:B,format:C,locale:P,label:D,legend:R,tooltip:L,empty:E,size:F,className:I,style:W,...H}){const K=o(F),U=a(P),X=r(i,U),Y=r(m,U),q=t.useRef(null),G=n(q),J=t.useId(),[O,Q]=t.useState(null),T=t.useMemo(()=>k(j),[j]),V=T.reduce((e,l)=>Math.max(e,l.length),0),Z=t.useCallback(e=>g(e,U,C,!0),[C,U]),ee=j.map((e,l)=>e.name??String(l+1)),le=Array.from({length:V},(e,l)=>N?.tickFormat?String(N.tickFormat(A?.[l]??l,l)):x(A?.[l]??l,U)),te=T.flat().filter(e=>null!==e.value),ne=$??(te.length>0?Math.min(...te.map(e=>e.value)):0),ae=_??(te.length>0?Math.max(...te.map(e=>e.value)):0),re=ae-ne||1,oe=u[K],ie=G.width,me="number"==typeof B?B:void 0===B?f[K]:G.height,se=ee.reduce((e,l)=>Math.max(e,b(l,oe)),0),ce=S?.hidden?0:S?.thickness??Math.min(140,se+10),he=N?.hidden?0:N?.thickness??oe+12,ue=ce,de=0,fe=Math.max(0,ie-ce),pe=Math.max(0,me-he),xe=V>0?fe/V:0,ge=T.length>0?pe/T.length:0,ve=(e,l)=>{Q(t=>{const n=t??{row:0,column:0};return{row:Math.min(T.length-1,Math.max(0,n.row+(t?e:0))),column:Math.min(V-1,Math.max(0,n.column+(t?l:0)))}})},ye=O?T[O.row]?.[O.column]??null:null,we=O&&ye&&null!==ye.value?[{seriesIndex:O.row,name:ee[O.row],color:v(w((ye.value-ne)/re)),value:ye.value,formatted:Z(ye.value),label:ye.label}]:[],be=!1===L?{mode:"none"}:!0===L||void 0===L?{}:L,ke=!1!==R&&te.length>0,Me=0===V||0===T.length||0===te.length,je=Array.from({length:V},(e,l)=>T.map(e=>e[l]??{value:null}));return e(s,{...H,size:K,className:["mp-heatmap-chart",I??""].filter(Boolean).join(" "),style:W,plotRef:q,name:D??X.label,describedBy:Me?void 0:J,interactive:!Me,height:B,legendSide:"bottom",plotProps:{onPointerMove:Me||"none"===be.mode?void 0:e=>Q(((e,l)=>{const t=q.current;if(!t||xe<=0||ge<=0)return null;const n=t.getBoundingClientRect(),a=Math.floor((e-n.left-ue)/xe),r=Math.floor((l-n.top-de)/ge);return a<0||a>=V||r<0||r>=T.length?null:{row:r,column:a}})(e.clientX,e.clientY)),onPointerLeave:()=>Q(null),onKeyDown:Me||"none"===be.mode?void 0:e=>{if("ArrowRight"===e.key)ve(0,1);else if("ArrowLeft"===e.key)ve(0,-1);else if("ArrowDown"===e.key)ve(1,0);else if("ArrowUp"===e.key)ve(-1,0);else{if("Escape"!==e.key)return;Q(null)}e.preventDefault()},onBlur:()=>Q(null)},tooltip:O&&we.length>0&&"none"!==be.mode?e(h,{heading:`${ee[O.row]} · ${le[O.column]}`,items:we,x:ue+(O.column+.5)*xe,y:de+(O.row+.5)*ge,flip:O.column>V/2,size:K}):null,legend:ke?l("div",{className:"mp-chart__legend flex items-center justify-center gap-2",children:[e("span",{className:"text-mp-on-surface-variant text-mp-label-small tabular-nums",children:Z(ne)}),e("span",{className:"flex","aria-hidden":"true",children:Array.from({length:p},(l,t)=>e("span",{className:"block h-3 w-6 first:rounded-s-mp-xs last:rounded-e-mp-xs",style:{background:v(t)}},t))}),e("span",{className:"text-mp-on-surface-variant text-mp-label-small tabular-nums",children:Z(ae)})]}):null,status:{heading:O?`${ee[O.row]} · ${le[O.column]}`:void 0,items:we},table:Me?null:e(c,{id:J,caption:D??X.table,corner:S?.label??X.category,categories:ee,names:le,values:je,format:Z,locale:U,empty:Y.empty}),children:Me?e("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:E??Y.empty}):ie>0&&me>0?l("svg",{width:ie,height:me,viewBox:`0 0 ${ie} ${me}`,"aria-hidden":"true",className:"block overflow-visible",children:[e("g",{className:"mp-heatmap-chart__cells",children:T.map((t,n)=>Array.from({length:V},(a,r)=>{const o=t[r],i=O?.row===n&&O?.column===r,m=ue+r*xe,s=de+n*ge,c=Math.max(0,xe-d),h=Math.max(0,ge-d);if(!o||null===o.value)return e("rect",{x:m+d/2,y:s+d/2,width:c,height:h,fill:"none",stroke:"var(--_mp-color-outline-variant)",strokeWidth:1,strokeDasharray:"2 2",rx:2},r);const u=w((o.value-ne)/re);return l("g",{children:[e("rect",{x:m+d/2,y:s+d/2,width:c,height:h,fill:o.color??v(u),rx:2,stroke:i?"var(--_mp-color-on-surface)":"none",strokeWidth:i?2:0}),z&&c>b(Z(o.value),oe)+8&&h>oe+4?e("text",{x:m+xe/2,y:s+ge/2,textAnchor:"middle",dominantBaseline:"central",fill:y(u),fontSize:oe,children:Z(o.value)}):null]},r)}))}),S?.hidden?null:ee.map((l,t)=>e("text",{x:ue-8,y:de+(t+.5)*ge,textAnchor:"end",dominantBaseline:"central",fill:"var(--_mp-color-on-surface-variant)",fontSize:oe,children:M(l,ce-10,oe)},`r${t}`)),N?.hidden?null:le.map((l,t)=>e("text",{x:ue+(t+.5)*xe,y:de+pe+oe+4,textAnchor:"middle",fill:"var(--_mp-color-on-surface-variant)",fontSize:oe,children:M(l,xe-2,oe)},`c${t}`))]}):null})}
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useMPElementSize as a}from"../../hooks/useMPElementSize.js";import{useMPLocale as n,useMPMessages as r}from"../../internal/locale.js";import{useMPSize as o}from"../../internal/config.js";import{CHART as i}from"../../internal/messages/chart.js";import{TABLE as m}from"../../internal/messages/table.js";import{ChartShell as s,ChartTable as c,ChartTooltipPanel as h}from"../../internal/ChartChrome.js";import{CHART_FONT_SIZE as u,MARK_GAP as d,PLOT_HEIGHT as f,RAMP_STEPS as p,formatCategory as x,formatStatistic as g,rampFill as v,rampInk as y,rampStep as w,textWidth as M,tickTurn as b,toValues as k,truncate as j,turnedBand as A,turnedRoom as $}from"../../internal/chart.js";export function MPHeatmapChart({series:N,categories:B,xAxis:S,yAxis:_,min:z,max:P,valueLabels:C=!1,height:D,format:L,locale:R,label:I,legend:E,tooltip:F,empty:W,size:H,className:K,style:U,...X}){const Y=o(H),q=n(R),G=r(i,q),J=r(m,q),O=l.useRef(null),Q=a(O),T=l.useId(),[V,Z]=l.useState(null),ee=l.useMemo(()=>k(N),[N]),te=ee.reduce((e,t)=>Math.max(e,t.length),0),le=l.useCallback(e=>g(e,q,L,!0),[L,q]),ae=N.map((e,t)=>e.name??String(t+1)),ne=Array.from({length:te},(e,t)=>S?.tickFormat?String(S.tickFormat(B?.[t]??t,t)):x(B?.[t]??t,q)),re=ee.flat().filter(e=>null!==e.value),oe=z??(re.length>0?Math.min(...re.map(e=>e.value)):0),ie=P??(re.length>0?Math.max(...re.map(e=>e.value)):0),me=ie-oe||1,se=u[Y],ce=Q.width,he="number"==typeof D?D:void 0===D?f[Y]:Q.height,ue=ae.reduce((e,t)=>Math.max(e,M(t,se)),0),de=_?.hidden?0:_?.thickness??Math.min(140,ue+10),fe=Math.max(0,ce-de),pe=te>0?fe/te:0,xe=S?.hidden?0:b(S?.tickLabels??"auto",ne,se,pe),ge=Math.min(120,.5*he),ve=ne.map((e,t)=>j(e,xe>0?Math.min($(xe,ge,se),xe>=90?1/0:(de+pe*(t+.5))/Math.cos(xe*Math.PI/180)):pe-2,se)),ye=ve.reduce((e,t)=>Math.max(e,M(t,se)),0),we=S?.hidden?0:S?.thickness??(xe>0?8+A(xe,ye,se)+4:se+12),Me=de,be=0,ke=Math.max(0,he-we),je=ee.length>0?ke/ee.length:0,Ae=(e,t)=>{Z(l=>{const a=l??{row:0,column:0};return{row:Math.min(ee.length-1,Math.max(0,a.row+(l?e:0))),column:Math.min(te-1,Math.max(0,a.column+(l?t:0)))}})},$e=V?ee[V.row]?.[V.column]??null:null,Ne=V&&$e&&null!==$e.value?[{seriesIndex:V.row,name:ae[V.row],color:v(w(($e.value-oe)/me)),value:$e.value,formatted:le($e.value),label:$e.label}]:[],Be=!1===F?{mode:"none"}:!0===F||void 0===F?{}:F,Se=!1!==E&&re.length>0,_e=0===te||0===ee.length||0===re.length,ze=Array.from({length:te},(e,t)=>ee.map(e=>e[t]??{value:null}));return e(s,{...X,size:Y,className:["mp-heatmap-chart",K??""].filter(Boolean).join(" "),style:U,plotRef:O,name:I??G.label,describedBy:_e?void 0:T,interactive:!_e,height:D,legendSide:"bottom",plotProps:{onPointerMove:_e||"none"===Be.mode?void 0:e=>Z(((e,t)=>{const l=O.current;if(!l||pe<=0||je<=0)return null;const a=l.getBoundingClientRect(),n=Math.floor((e-a.left-Me)/pe),r=Math.floor((t-a.top-be)/je);return n<0||n>=te||r<0||r>=ee.length?null:{row:r,column:n}})(e.clientX,e.clientY)),onPointerLeave:()=>Z(null),onKeyDown:_e||"none"===Be.mode?void 0:e=>{if("ArrowRight"===e.key)Ae(0,1);else if("ArrowLeft"===e.key)Ae(0,-1);else if("ArrowDown"===e.key)Ae(1,0);else if("ArrowUp"===e.key)Ae(-1,0);else{if("Escape"!==e.key)return;Z(null)}e.preventDefault()},onBlur:()=>Z(null)},tooltip:V&&Ne.length>0&&"none"!==Be.mode?e(h,{heading:`${ae[V.row]} · ${ne[V.column]}`,items:Ne,x:Me+(V.column+.5)*pe,y:be+(V.row+.5)*je,flip:V.column>te/2,size:Y}):null,legend:Se?t("div",{className:"mp-chart__legend flex items-center justify-center gap-2",children:[e("span",{className:"text-mp-on-surface-variant text-mp-label-small tabular-nums",children:le(oe)}),e("span",{className:"flex","aria-hidden":"true",children:Array.from({length:p},(t,l)=>e("span",{className:"block h-3 w-6 first:rounded-s-mp-xs last:rounded-e-mp-xs",style:{background:v(l)}},l))}),e("span",{className:"text-mp-on-surface-variant text-mp-label-small tabular-nums",children:le(ie)})]}):null,status:{heading:V?`${ae[V.row]} · ${ne[V.column]}`:void 0,items:Ne},table:_e?null:e(c,{id:T,caption:I??G.table,corner:_?.label??G.category,categories:ae,names:ne,values:ze,format:le,locale:q,empty:J.empty}),children:_e?e("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:W??J.empty}):ce>0&&he>0?t("svg",{width:ce,height:he,viewBox:`0 0 ${ce} ${he}`,"aria-hidden":"true",className:"block overflow-visible",children:[e("g",{className:"mp-heatmap-chart__cells",children:ee.map((l,a)=>Array.from({length:te},(n,r)=>{const o=l[r],i=V?.row===a&&V?.column===r,m=Me+r*pe,s=be+a*je,c=Math.max(0,pe-d),h=Math.max(0,je-d);if(!o||null===o.value)return e("rect",{x:m+d/2,y:s+d/2,width:c,height:h,fill:"none",stroke:"var(--_mp-color-outline-variant)",strokeWidth:1,strokeDasharray:"2 2",rx:2},r);const u=w((o.value-oe)/me);return t("g",{children:[e("rect",{x:m+d/2,y:s+d/2,width:c,height:h,fill:o.color??v(u),rx:2,stroke:i?"var(--_mp-color-on-surface)":"none",strokeWidth:i?2:0}),C&&c>M(le(o.value),se)+8&&h>se+4?e("text",{x:m+pe/2,y:s+je/2,textAnchor:"middle",dominantBaseline:"central",fill:y(u),fontSize:se,children:le(o.value)}):null]},r)}))}),_?.hidden?null:ae.map((t,l)=>e("text",{x:Me-8,y:be+(l+.5)*je,textAnchor:"end",dominantBaseline:"central",fill:"var(--_mp-color-on-surface-variant)",fontSize:se,children:j(t,de-10,se)},`r${l}`)),S?.hidden?null:ve.map((t,l)=>{const a=Me+(l+.5)*pe,n=be+ke;return e("text",{x:a,y:xe>0?n+8:n+se+4,textAnchor:xe>0?"end":"middle",dominantBaseline:xe>0?"central":void 0,transform:xe>0?`rotate(${-xe} ${a} ${n+8})`:void 0,fill:"var(--_mp-color-on-surface-variant)",fontSize:se,children:t},`c${l}`)})]}):null})}

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

@@ -68,6 +68,7 @@ export interface MPHoverCardProps extends Omit<React.ComponentPropsWithoutRef<'d
     /** Takes room out of that padding, two pixels a face per step. @default 0 */
     density?: MPDensity;
 }
+/** The wedge, at roughly a third of the sheet's corner per step. */
 /**
  * A card that opens when the pointer rests on something, holding a preview of
  * what is on the other side of it.

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

@@ -1,2 +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]})})})]})}
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as i from"react";import{POPUP_ARROW_SIZE as a,POPUP_ARROW_TURN as l,PopupArrow as n}from"../../internal/PopupArrow.js";import{PreviewCard as o}from"@base-ui/react/preview-card";import{cssLength as s}from"../../internal/length.js";import{sheetPad as t}from"../../internal/density.js";import{hasContent as d,META_TEXT as m,PROSE_TEXT as c,SHEET_GAP as p,SHEET_TITLE as f}from"../../internal/scale.js";import{FADE as u,PORTAL_LAYER as x}from"../../internal/surface.js";import{useMPDensity as h,useMPSize as v}from"../../internal/config.js";const g={xs:"max-w-64",sm:"max-w-72",md:"max-w-96",lg:"max-w-md",xl:"max-w-xl"};export function MPHoverCard({trigger:w,title:j,description:y,children:b,side:N="bottom",align:O="center",sideOffset:P=8,alignOffset:_=0,arrow:$=!1,open:z,defaultOpen:C,onOpenChange:A,delay:D,closeDelay:B,width:H,size:I,density:M,className:R,style:T,...W}){const k=v(I),q=h(M),E=d(j)||d(y),F=a[k],G=i.useId(),J=`${G}-title`,K=`${G}-description`;return r(o.Root,{open:z,defaultOpen:C,onOpenChange:e=>A?.(e),children:[e(o.Trigger,{render:w,delay:D,closeDelay:B}),e(o.Portal,{children:e(o.Positioner,{className:x,side:N,align:O,sideOffset:P,alignOffset:_,children:r(o.Popup,{"data-mp-size":k,"aria-labelledby":d(j)?J:void 0,"aria-describedby":d(y)?K: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",t(k,q),p[k],c[k],void 0===H?g[k]:"",u,R??""].filter(Boolean).join(" "),style:{...void 0===H?null:{maxWidth:s(H)},...T},...W,children:[$?e(o.Arrow,{className:l,children:e(n,{size:F,fill:"var(--_mp-color-surface-container)"})}):null,E?r("div",{className:"flex min-w-0 flex-col",children:[d(j)?e("div",{id:J,className:`mp-hover-card__title m-0 ${f[k]}`,children:j}):null,d(y)?e("div",{id:K,className:`mp-hover-card__description text-mp-on-surface-variant m-0 ${m}`,children:y}):null]}):null,d(b)?e("div",{className:"min-w-0",children:b}):null]})})})]})}

package/dist/components/icon/MPIcon.js

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

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

@@ -1,9 +1,35 @@
 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';
+/** How the picture is fitted into the box it was given. CSS's own words. */
+export type MPImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
 /** What the picture is doing right now. */
 export type MPImageState = 'loading' | 'loaded' | 'error';
+/** A picture that stands in while the real one arrives. */
+export interface MPImagePlaceholder {
+    /**
+     * A URL, a data URI, or a `Blob` such as a file the reader has just picked.
+     *
+     * A `Blob` is drawn through an object URL made for it, so keep the same Blob
+     * from one render to the next: a new one on every render makes a new URL on
+     * every render, and each of those renders again.
+     */
+    src: string | Blob;
+    /**
+     * Blurs the stand-in. `true` is a 20px radius, and a number is a radius in
+     * pixels.
+     * @default false
+     */
+    blur?: boolean | number;
+}
+/** A turn in degrees, clockwise, a quarter at a time. */
+export type MPImageRotate = 0 | 90 | 180 | 270;
+/** Which way the picture is mirrored, along the axes it is shown on. */
+export type MPImageFlip = 'none' | 'horizontal' | 'vertical' | 'both';
+/**
+ * The part of the picture a crop keeps, in `object-position`'s words: the
+ * centre, a side, a corner, or two percentages across and down.
+ */
+export type MPImagePosition = 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top left' | 'top right' | 'bottom left' | 'bottom right' | `${number}% ${number}%`;
 export interface MPImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>, 'onError'> {
     /** Where the picture is. */
     src?: string;
@@ -26,18 +52,44 @@ export interface MPImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>
      */
     ratio?: number | string;
     /**
-     * How the picture is fitted into that box.
+     * How the picture is fitted into that box. `scale-down` is `contain` that
+     * never enlarges a file smaller than the box.
      * @default 'cover'
      */
     fit?: MPImageFit;
+    /**
+     * The width of the file, or of the box when it is given without `height`.
+     *
+     * With `height` as well, the two are the file's size in pixels, as on an
+     * `<img>`, and they reserve its proportion. Alone, it makes the box that wide,
+     * no wider than its container, and as tall as the picture or `ratio` makes
+     * it. A number or a string of digits is pixels, and any other string is a CSS
+     * length.
+     */
+    width?: number | string;
+    /**
+     * The height of the file, or of the box when it is given without `width`.
+     *
+     * With `width` as well, the two are the file's size in pixels. Alone, it makes
+     * the box that tall and as wide as its container, or as wide as `ratio` makes
+     * it when there is one. A number or a string of digits is pixels, and any
+     * other string is a CSS length.
+     */
+    height?: number | string;
     /**
      * 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.
+     *
+     * `{ src, blur }` draws a picture instead: a small copy of the file, a data
+     * URI or a `Blob`, fitted, placed, turned and mirrored like the picture, and
+     * blurred if `blur` says so. It gives way once the picture has faded in over
+     * it. Like the shimmer, it fills the box, so the box needs a reserved size: a
+     * `ratio`, or both `width` and `height`.
      */
-    placeholder?: React.ReactNode | false;
+    placeholder?: React.ReactNode | false | MPImagePlaceholder;
     /**
      * Drawn instead of the picture when it does not arrive.
      *
@@ -75,6 +127,62 @@ export interface MPImageProps extends Omit<React.ComponentPropsWithoutRef<'img'>
      * arrives either way.
      */
     onStateChange?: (state: MPImageState) => void;
+    /**
+     * Turns the picture clockwise, in quarter turns.
+     *
+     * Only quarters, because a picture turned by any other angle stops covering
+     * its box, and filling the corners would mean enlarging it by an amount the
+     * caller would then want to tune. A quarter turn swaps the box's proportion:
+     * `width` and `height`, when both are given, are read as the file's size and
+     * reserve the turned shape, and without them the shape is read from the file
+     * once it arrives. An explicit `ratio` is the layout's shape and is kept.
+     *
+     * Drawn with the `rotate` property rather than `transform`, so a `transform`
+     * of your own, such as a hover zoom, still applies on top.
+     * @default 0
+     */
+    rotate?: MPImageRotate;
+    /**
+     * Mirrors the picture along the axes it is shown on.
+     *
+     * `horizontal` swaps left and right on the screen whether or not the picture
+     * is turned. Drawn with the `scale` property, so it leaves `transform` free as
+     * `rotate` does, and `preview` opens the picture mirrored.
+     * @default 'none'
+     */
+    flip?: MPImageFlip;
+    /**
+     * Which part of the picture a `cover` crop keeps, and where `contain`, `none`
+     * and `scale-down` leave their empty space.
+     *
+     * Read on the picture as it is shown, so `top` keeps the top of a picture
+     * that has been turned or mirrored. Physical rather than logical: the subject
+     * of a photograph does not move to the other side on a right-to-left page. A
+     * value in any other form reaches `object-position` as written.
+     * @default 'center'
+     */
+    position?: MPImagePosition;
+    /**
+     * What fills the room `fit` leaves around the picture.
+     *
+     * `blur` draws the same picture behind itself, covering the box and blurred,
+     * the way a video player fills the sides of a portrait clip. It reuses the
+     * picture's request, and it is drawn only for a `fit` that can leave room:
+     * `contain`, `none` and `scale-down`. Any other string is a CSS `background`
+     * painted behind the picture: a colour, a custom property or a gradient.
+     * @default 'none'
+     */
+    letterbox?: 'none' | 'blur' | (string & {});
+    /**
+     * Loads this picture first: the one a page is judged by, which is usually its
+     * Largest Contentful Paint.
+     *
+     * Sets `loading="eager"` and a high fetch priority. A `loading` or
+     * `fetchPriority` of your own still wins. Give it to one picture per page: a
+     * high priority on every picture raises none of them above the others.
+     * @default false
+     */
+    priority?: boolean;
     /** The corner and type scale of the placeholder and the fallback. @default 'md' */
     size?: MPSize;
 }

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type CartesianChartProps } from '../../internal/ChartFrame.js';
-import type { MPChartCurve, MPChartValueLabels } from '../../types.js';
+import type { MPChartCurve, MPChartGaps, MPChartValueLabels } from '../../types.js';
 export interface MPLineChartProps extends CartesianChartProps {
     /**
      * How the line gets from one point to the next.
@@ -16,6 +16,16 @@ export interface MPLineChartProps extends CartesianChartProps {
      * @default 'auto'
      */
     markers?: boolean | 'auto';
+    /**
+     * What the line does where a series has no value.
+     *
+     * `break` stops and restarts, `connect` joins the two sides with a dashed
+     * run, and `zero` draws the missing reading at zero and widens the axis to
+     * hold it. The hover panel and the table still report a gap as a gap in all
+     * three.
+     * @default 'break'
+     */
+    gaps?: MPChartGaps;
     /**
      * Which values are written onto the line itself.
      * @default 'none'
@@ -55,6 +65,14 @@ export interface MPLineChartProps extends CartesianChartProps {
  * nobody has, and it is the one kind of invented data a reader never questions
  * — it looks exactly like the rest of the line.
  *
+ * `gaps` is there for the two cases where the default is the wrong reading.
+ * `connect` joins the two sides and draws the joining run **dashed**, so the
+ * line carries on and the picture still says which part of it was measured.
+ * `zero` draws the missing reading at zero and widens the axis to hold it,
+ * which is right where a gap means "none of it happened" and wrong where it
+ * means "nobody was counting". The table behind the chart reports a gap as a
+ * gap whichever is chosen.
+ *
  * ## The hover layer is not optional
  *
  * A chart in a browser is a thing a reader interrogates, so the crosshair and
@@ -63,4 +81,4 @@ export interface MPLineChartProps extends CartesianChartProps {
  * 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;
+export declare function MPLineChart({ curve, markers, gaps, valueLabels, ...frame }: MPLineChartProps): React.JSX.Element;

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

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

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}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]})});
+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/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/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})]})}