material-plus-ui 1.5.0 → 1.7.0

package/dist/components/popconfirm/MPPopconfirm.d.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import type { MPAlign, MPColor, MPSide, MPSize } from '../../types.js';
+export interface MPPopconfirmProps {
+    /**
+     * The control that asks, and that the question hangs off. Exactly one element,
+     * and it must accept a ref and spread props — every Material Plus component
+     * does.
+     */
+    trigger: React.ReactElement;
+    /** The question, as the popup's heading. */
+    title?: React.ReactNode;
+    /** A line under it — what happens, and to what. */
+    description?: React.ReactNode;
+    /** Anything else the popup should hold. */
+    children?: React.ReactNode;
+    /**
+     * Called when the reader says yes.
+     *
+     * A callback rather than a promise, and that is the whole difference from
+     * [`useMPConfirm`](../feedback/confirm): this one is written where the button
+     * is, so there is already a handler there to put it in.
+     */
+    onConfirm?: () => void;
+    /** Called when they say no. Dismissing counts — see `onOpenChange`. */
+    onCancel?: () => void;
+    /** What the yes button says. @default the translation of `Confirm` */
+    confirmLabel?: React.ReactNode;
+    /** What the no button says. @default the translation of `Cancel` */
+    cancelLabel?: React.ReactNode;
+    /**
+     * The accent the yes button is drawn in. `'error'` is what a destructive
+     * question wants, and it is not the default for the reason `useMPConfirm`
+     * gives: a red button on every confirmation stops being a warning.
+     */
+    color?: MPColor;
+    /** Which edge of the trigger the question appears on. @default 'top' */
+    side?: MPSide;
+    /** @default 'center' */
+    align?: MPAlign;
+    /** @default true */
+    arrow?: boolean;
+    size?: MPSize;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/**
+ * A confirmation that stays where the control is.
+ *
+ * ```tsx
+ * <MPPopconfirm
+ *   trigger={<MPButton color="error">Delete</MPButton>}
+ *   title="Delete this row?"
+ *   confirmLabel="Delete"
+ *   color="error"
+ *   onConfirm={() => remove(id)}
+ * />
+ * ```
+ *
+ * ## When this rather than `useMPConfirm`
+ *
+ * They ask the same question and the difference is **where the reader's eye
+ * is**, which is a real difference and not a stylistic one:
+ *
+ * | | `MPPopconfirm` | [`useMPConfirm`](../feedback/confirm) |
+ * | --- | --- | --- |
+ * | Appears | at the control | in the middle of the screen |
+ * | The page behind | stays put | goes under a scrim |
+ * | Costs | one element | a provider |
+ * | Answers with | a callback | a promise |
+ *
+ * A row of twelve delete buttons is the case for this one: a modal that covered
+ * the table would take away the row the reader was pointing at, and having to
+ * re-find it afterwards is how the wrong row gets deleted. A confirmation about
+ * the *page* — leaving with unsaved changes, an irreversible account action —
+ * wants the modal, because it is not about a thing on the page at all.
+ *
+ * ## Every other way out is *no*
+ *
+ * Escape, a press outside and the cancel button all close it without confirming,
+ * and `onCancel` is called for all three. That is the same rule `useMPConfirm`
+ * follows and for the same reason: the safe answer to "are you sure" is no.
+ *
+ * ## It is a popover, not a dialog
+ *
+ * So it does not trap the focus and the page behind it stays live. That is the
+ * point of the shape — but it also means a reader can walk away from the
+ * question with Tab, which a modal would not allow. Use the modal where the
+ * answer genuinely has to be given.
+ */
+export declare function MPPopconfirm({ trigger, title, description, children, onConfirm, onCancel, confirmLabel, cancelLabel, color: colorProp, side, align, arrow, size: sizeProp, open: openProp, defaultOpen, onOpenChange, className }: MPPopconfirmProps): React.JSX.Element;

package/dist/components/popconfirm/MPPopconfirm.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as o from"react";import{MPButton as n}from"../button/MPButton.js";import{MPPopover as i}from"../popover/MPPopover.js";import{useMPLocale as t,useMPMessages as a}from"../../internal/locale.js";import{CONFIRM as s}from"../../internal/messages/confirm.js";import{useMPColor as c,useMPSize as l}from"../../internal/config.js";export function MPPopconfirm({trigger:m,title:p,description:f,children:d,onConfirm:g,onCancel:j,confirmLabel:u,cancelLabel:h,color:x,side:v="top",align:C="center",arrow:P=!0,size:z,open:b,defaultOpen:M,onOpenChange:N,className:O}){const k=l(z),w=c(x),L=a(s,t()),[y,B]=o.useState(M??!1),S=e=>{void 0===b&&B(e),N?.(e)},q=e=>{S(!1),e?g?.():j?.()};return r(i,{trigger:m,title:p,description:f,side:v,align:C,arrow:P,size:k,open:b??y,onOpenChange:e=>{e?S(!0):q(!1)},className:O,children:[d,r("div",{className:"mt-3 flex justify-end gap-1",children:[e(n,{variant:"text",size:"sm",onClick:()=>q(!1),children:h??L.cancel}),e(n,{variant:"text",size:"sm",color:w,onClick:()=>q(!0),children:u??L.confirm})]})]})}

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

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

package/dist/components/popconfirm/index.js

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

package/dist/components/popover/MPPopover.d.ts

@@ -140,4 +140,4 @@ export declare const MPPopoverClose: React.ForwardRefExoticComponent<Omit<import
  * dialog's `surface-container-high` at elevation 3, because a popover has not
  * taken the page and should not sit above the menus that did not either.
  */
-export declare function MPPopover({ trigger, title, description, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, locale: localeProp, width, size, className, style, children }: MPPopoverProps): React.JSX.Element;
+export declare function MPPopover({ trigger, title, description, side, align, sideOffset, alignOffset, arrow, open, defaultOpen, onOpenChange, modal, dismissible, showClose, closeLabel, locale: localeProp, width, size: sizeProp, className, style, children }: MPPopoverProps): React.JSX.Element;

package/dist/components/popover/MPPopover.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Popover as s}from"@base-ui/react/popover";import{MPIcon as t}from"../icon/MPIcon.js";import{CloseIcon as i}from"../../constants/icons.js";import{useMPLocale as a,useMPMessages as l}from"../../internal/locale.js";import{cssLength as r}from"../../internal/length.js";import{COMMON as n}from"../../internal/messages/common.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{hasContent as c,META_TEXT as d,PROSE_TEXT as p,SHEET_GAP as f,SHEET_PAD as u,SHEET_TITLE as h}from"../../internal/scale.js";import{FADE as x,PORTAL_LAYER as g}from"../../internal/surface.js";const v={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},b={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=s.Close;export function MPPopover({trigger:j,title:w,description:N,side:O="bottom",align:P="center",sideOffset:y=8,alignOffset:C=0,arrow:z=!1,open:k,defaultOpen:M,onOpenChange:L,modal:B=!1,dismissible:T=!0,showClose:$=!1,closeLabel:A,locale:D,width:I,size:R="md",className:S,style:W,children:_}){const q=a(D),E=l(n,q),F=c(w)||c(N),G=b[R];return o(s.Root,{open:k,defaultOpen:M,modal:B,onOpenChange:(e,o)=>{T||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?L?.(e):o.cancel()},children:[j?e(s.Trigger,{render:j}):null,e(s.Portal,{children:e(s.Positioner,{className:g,side:O,align:P,sideOffset:y,alignOffset:C,children:o(s.Popup,{"data-mp-size":R,className:["mp-popover rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",u[R],f[R],p[R],void 0===I?v[R]:"",x,S??""].filter(Boolean).join(" "),style:{...void 0===I?null:{maxWidth:r(I)},...W},children:[z?e(s.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:G,height:G/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,F||$?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[c(w)?e(s.Title,{className:`m-0 ${h[R]}`,children:w}):null,c(N)?e(s.Description,{className:`text-mp-on-surface-variant m-0 ${d}`,children:N}):null]}),$?o(s.Close,{"aria-label":A??E.close,className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","rounded-mp-full -m-1 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(m,{}),e(t,{icon:i,size:18})]}):null]}):null,c(_)?e("div",{className:"min-w-0",children:_}):null]})})})]})}
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{Popover as i}from"@base-ui/react/popover";import{MPIcon as s}from"../icon/MPIcon.js";import{CloseIcon as t}from"../../constants/icons.js";import{useMPLocale as r,useMPMessages as a}from"../../internal/locale.js";import{cssLength as l}from"../../internal/length.js";import{COMMON as n}from"../../internal/messages/common.js";import{MPStateLayer as m}from"../../internal/StateLayer.js";import{hasContent as c,META_TEXT as d,PROSE_TEXT as p,SHEET_GAP as f,SHEET_PAD as u,SHEET_TITLE as h}from"../../internal/scale.js";import{FADE as x,PORTAL_LAYER as g}from"../../internal/surface.js";import{useMPSize as v}from"../../internal/config.js";const b={xs:"max-w-56",sm:"max-w-64",md:"max-w-80",lg:"max-w-96",xl:"max-w-lg"},j={xs:8,sm:9,md:10,lg:11,xl:12};export const MPPopoverClose=i.Close;export function MPPopover({trigger:w,title:N,description:O,side:P="bottom",align:y="center",sideOffset:C=8,alignOffset:z=0,arrow:k=!1,open:M,defaultOpen:L,onOpenChange:B,modal:T=!1,dismissible:$=!0,showClose:A=!1,closeLabel:D,locale:I,width:R,size:S,className:W,style:_,children:q}){const E=v(S),F=r(I),G=a(n,F),H=c(N)||c(O),J=j[E];return o(i.Root,{open:M,defaultOpen:L,modal:T,onOpenChange:(e,o)=>{$||e||"escape-key"!==o.reason&&"outside-press"!==o.reason&&"focus-out"!==o.reason?B?.(e):o.cancel()},children:[w?e(i.Trigger,{render:w}):null,e(i.Portal,{children:e(i.Positioner,{className:g,side:P,align:y,sideOffset:C,alignOffset:z,children:o(i.Popup,{"data-mp-size":E,className:["mp-popover rounded-mp-md relative flex flex-col outline-none","bg-mp-surface-container text-mp-on-surface shadow-mp-2","box-border",u[E],f[E],p[E],void 0===R?b[E]:"",x,W??""].filter(Boolean).join(" "),style:{...void 0===R?null:{maxWidth:l(R)},..._},children:[k?e(i.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:J,height:J/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,H||A?o("div",{className:"flex shrink-0 items-start gap-3",children:[o("div",{className:"flex min-w-0 flex-1 flex-col",children:[c(N)?e(i.Title,{className:`m-0 ${h[E]}`,children:N}):null,c(O)?e(i.Description,{className:`text-mp-on-surface-variant m-0 ${d}`,children:O}):null]}),A?o(i.Close,{"aria-label":D??G.close,className:["group text-mp-on-surface-variant relative flex size-8 shrink-0","rounded-mp-full -m-1 cursor-pointer items-center justify-center","appearance-none border-0 bg-transparent","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),children:[e(m,{}),e(s,{icon:t,size:18})]}):null]}):null,c(q)?e("div",{className:"min-w-0",children:q}):null]})})})]})}

package/dist/components/portal/MPPortal.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+export interface MPPortalProps {
+    /**
+     * Where to render. An element, a ref to one, or nothing for `document.body`.
+     *
+     * A ref is the useful form for a container this same page renders — it is
+     * `null` on the first render, and the portal waits rather than falling back to
+     * the body and moving afterwards.
+     */
+    container?: Element | React.RefObject<Element | null> | null;
+    /**
+     * Renders in place instead, as though the portal were not there.
+     *
+     * For the component that is portalled in one context and not in another — a
+     * panel that escapes a clipping ancestor on a page and belongs inline in a
+     * printed view.
+     *
+     * It saves the branch and not the state: React sees a portal and an inline
+     * subtree as different elements, so changing this **remounts** the children
+     * exactly as `{escape ? <MPPortal>{x}</MPPortal> : x}` would. Anything below
+     * it loses its state, its scroll position and the focus in it. Decide once,
+     * per mount, rather than toggling.
+     */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Children rendered somewhere else in the DOM, usually the end of `<body>`.
+ *
+ * For a subtree that has to escape a clipping or stacking context its own
+ * position would trap it in. Both of those are real and neither is obvious from
+ * looking at the markup: an `overflow: hidden` anywhere above an element clips
+ * it, and a `transform`, a `filter` or an `opacity` below 1 makes a new
+ * containing block that a `position: fixed` child is measured against rather
+ * than the viewport.
+ *
+ * ```tsx
+ * <MPPortal>
+ *   <div className="fixed inset-x-0 bottom-0">…</div>
+ * </MPPortal>
+ * ```
+ *
+ * ## Most components here do not need it
+ *
+ * Every popup in this library already portals itself — a select's list, a
+ * dialog, a tooltip, a menu, a drawer's panel — because a component whose whole
+ * job is to sit over the page cannot leave that to a caller. This is for a
+ * caller's **own** overlay, in a page whose structure it does not control.
+ *
+ * ## Nothing on the first render, and never on a server
+ *
+ * A portal needs a real DOM node and there is none while the server renders, so
+ * this returns `null` there and again on the first client render. That is what
+ * keeps hydration honest: markup that appeared in one pass and not the other is
+ * exactly the mismatch React warns about, and the alternative — rendering to a
+ * placeholder and moving it — is a flash.
+ *
+ * The practical consequence is that a portal's content is never in the HTML a
+ * crawler reads. Anything that has to be indexed does not belong in one.
+ *
+ * ## It does not trap focus, and does not manage the stack
+ *
+ * A portal moves an element in the DOM and nothing else. Focus, Escape, an inert
+ * background, a scrim and a z-index are the *dialog's* concerns —
+ * [MPDialog](./dialog) and [MPDrawer](./drawer) are those, and a hand-built
+ * overlay in a portal has none of it. Reach for them before this.
+ *
+ * ## Events still bubble through React
+ *
+ * A click inside a portal reaches an `onClick` on the element that rendered it,
+ * even though the DOM says the two are unrelated. That is React's own behaviour
+ * rather than something added here, and it catches people both ways: a menu
+ * inside a portal inside a clickable card still opens the card.
+ */
+export declare function MPPortal({ container, disabled, children }: MPPortalProps): React.JSX.Element | null;

package/dist/components/portal/MPPortal.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as r}from"react/jsx-runtime";import*as t from"react";import{createPortal as n}from"react-dom";export function MPPortal({container:e,disabled:o=!1,children:u}){const[c,i]=t.useState(null);return t.useEffect(()=>{i(r=>{const t=function(r){if(!r)return"undefined"==typeof document?null:document.body;return"current"in r?r.current:r}(e);return t===r?r:t})}),o?r(t.Fragment,{children:u}):c?n(u,c):null}

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

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

package/dist/components/portal/index.js

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

package/dist/components/progress-box/MPProgressBox.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as l}from"../../internal/accent.js";import{META_TEXT as t,STACK_GAP as n}from"../../internal/scale.js";import{SEGMENT_GAP as o,SEGMENT_RADIUS as i,SEGMENT_SIZE as m,progressAriaText as c,progressFraction as u,progressText as f}from"../../internal/progress.js";export const MPProgressBox=/*@__PURE__*/r.forwardRef(function({size:r="md",color:p="primary",count:d=4,value:x=null,min:h=0,max:g=100,label:b,showValue:j=!1,format:y,className:v,style:w},N){const M=u(x,h,g),B=null===M,V=void 0!==y,_=Math.max(1,Math.floor(d));return a(s.Root,{ref:N,value:null===M?null:x??null,min:h,max:g,format:y,getAriaValueText:c(M,V),"data-mp-size":r,className:["mp-progress-box inline-flex flex-col",n[r],v??""].filter(Boolean).join(" "),style:{...l(p),...w},children:[b||j?a("div",{className:["flex items-baseline gap-2",b?"justify-between":"justify-end",t].join(" "),children:[b?e(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:b}):null,j?e(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>f(M,e,V)}):null]}):null,e(s.Track,{className:`flex ${o[r]}`,children:Array.from({length:_},(a,s)=>e("span",{className:["bg-mp-on-surface/12 relative overflow-hidden",m[r],i[r],B?"mp-progress-segment-wave bg-(--_mp-accent)":""].filter(Boolean).join(" "),style:B?{"--_mp-index":s}:void 0,children:B?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--_mp-accent) transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",style:{width:`${Math.min(100,Math.max(0,100*(M*_-s)))}%`}})},s))})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as n}from"@base-ui/react/progress";import{accentSlots as r}from"../../internal/accent.js";import{VISUALLY_HIDDEN as s}from"../../internal/visually-hidden.js";import{META_TEXT as t,STACK_GAP as o}from"../../internal/scale.js";import{SEGMENT_GAP as i,SEGMENT_RADIUS as m,SEGMENT_SIZE as c,progressAriaText as u,progressFraction as f,progressText as p}from"../../internal/progress.js";import{useMPColor as d,useMPSize as h}from"../../internal/config.js";export const MPProgressBox=/*@__PURE__*/l.forwardRef(function({size:l,color:x,count:b=4,value:g=null,min:j=0,max:v=100,label:y,hideLabel:N=!1,showValue:w=!1,format:M,className:B,style:L},V){const _=h(l),k=d(x),z=f(g,j,v),A=null===z,P=void 0!==M,R=N?null:y,T=Math.max(1,Math.floor(b));return a(n.Root,{ref:V,value:null===z?null:g??null,min:j,max:v,format:M,getAriaValueText:u(z,P),"data-mp-size":_,className:["mp-progress-box inline-flex flex-col",o[_],B??""].filter(Boolean).join(" "),style:{...r(k),...L},children:[N&&y?e(n.Label,{className:s,children:y}):null,R||w?a("div",{className:["flex items-baseline gap-2",R?"justify-between":"justify-end",t].join(" "),children:[R?e(n.Label,{className:"text-mp-on-surface min-w-0 truncate",children:R}):null,w?e(n.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>p(z,e,P)}):null]}):null,e(n.Track,{className:`flex ${i[_]}`,children:Array.from({length:T},(a,l)=>e("span",{className:["bg-mp-on-surface/12 relative overflow-hidden",c[_],m[_],A?"mp-progress-segment-wave bg-(--_mp-accent)":""].filter(Boolean).join(" "),style:A?{"--_mp-index":l}:void 0,children:A?null:e("span",{className:"absolute inset-y-0 start-0 bg-(--_mp-accent) transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",style:{width:`${Math.min(100,Math.max(0,100*(z*T-l)))}%`}})},l))})]})});

package/dist/components/progress-circular/MPProgressCircular.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as t}from"../../internal/accent.js";import{CONTROL_GAP as o,META_TEXT as n}from"../../internal/scale.js";import{RING_DIAMETER as l,RING_STROKE as i,progressAriaText as c,progressFraction as m,progressText as u}from"../../internal/progress.js";export const MPProgressCircular=/*@__PURE__*/a.forwardRef(function({size:a="md",color:p="primary",value:f=null,min:h=0,max:d=100,label:x,showValue:k=!1,format:g,className:v,style:y},j){const N=m(f,h,d),w=null===N,b=void 0!==g,$=l[a],L=i[a],V=$/2,z=V-L/2;return e(s.Root,{ref:j,value:null===N?null:f??null,min:h,max:d,format:g,getAriaValueText:c(N,b),"data-mp-size":a,className:["mp-progress-circular inline-flex items-center",o[a],n,v??""].filter(Boolean).join(" "),style:{...t(p),...y},children:[e("svg",{className:w?"mp-progress-circular-turn shrink-0":"shrink-0",width:$,height:$,viewBox:`0 0 ${$} ${$}`,fill:"none","aria-hidden":"true",children:[r("circle",{cx:V,cy:V,r:z,stroke:"var(--_mp-color-on-surface)",strokeOpacity:.12,strokeWidth:L}),r("circle",{cx:V,cy:V,r:z,pathLength:100,stroke:"var(--_mp-accent)",strokeWidth:L,strokeLinecap:"round",className:w?"mp-progress-circular-arc":"transition-[stroke-dashoffset] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",transform:`rotate(-90 ${V} ${V})`,...w?null:{strokeDasharray:100,strokeDashoffset:100*(1-N)}})]}),x?r(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:x}):null,k?r(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:r=>u(N,r,b)}):null]})});
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as a from"react";import{Progress as s}from"@base-ui/react/progress";import{accentSlots as t}from"../../internal/accent.js";import{VISUALLY_HIDDEN as o}from"../../internal/visually-hidden.js";import{CONTROL_GAP as l,META_TEXT as n}from"../../internal/scale.js";import{RING_DIAMETER as i,RING_STROKE as c,progressAriaText as m,progressFraction as u,progressText as p}from"../../internal/progress.js";import{useMPColor as f,useMPSize as h}from"../../internal/config.js";export const MPProgressCircular=/*@__PURE__*/a.forwardRef(function({size:a,color:d,value:x=null,min:k=0,max:g=100,label:j,hideLabel:v=!1,showValue:y=!1,format:N,className:b,style:w},L){const $=h(a),V=f(d),z=u(x,k,g),B=null===z,D=void 0!==N,P=i[$],R=c[$],W=P/2,_=W-R/2;return e(s.Root,{ref:L,value:null===z?null:x??null,min:k,max:g,format:N,getAriaValueText:m(z,D),"data-mp-size":$,className:["mp-progress-circular inline-flex items-center",l[$],n,b??""].filter(Boolean).join(" "),style:{...t(V),...w},children:[e("svg",{className:B?"mp-progress-circular-turn shrink-0":"shrink-0",width:P,height:P,viewBox:`0 0 ${P} ${P}`,fill:"none","aria-hidden":"true",children:[r("circle",{cx:W,cy:W,r:_,stroke:"var(--_mp-color-on-surface)",strokeOpacity:.12,strokeWidth:R}),r("circle",{cx:W,cy:W,r:_,pathLength:100,stroke:"var(--_mp-accent)",strokeWidth:R,strokeLinecap:"round",className:B?"mp-progress-circular-arc":"transition-[stroke-dashoffset] duration-(--mp-sys-motion-duration-short4) ease-mp-standard",transform:`rotate(-90 ${W} ${W})`,...B?null:{strokeDasharray:100,strokeDashoffset:100*(1-z)}})]}),v?j?r(s.Label,{className:o,children:j}):null:j?r(s.Label,{className:"text-mp-on-surface min-w-0 truncate",children:j}):null,y?r(s.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:r=>p(z,r,D)}):null]})});

package/dist/components/progress-linear/MPProgressLinear.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Progress as l}from"@base-ui/react/progress";import{accentSlots as s}from"../../internal/accent.js";import{META_TEXT as n,STACK_GAP as t}from"../../internal/scale.js";import{BAR_THICKNESS as i,progressAriaText as o,progressFraction as m,progressText as c}from"../../internal/progress.js";export const MPProgressLinear=/*@__PURE__*/r.forwardRef(function({size:u="md",color:p="primary",value:f=null,min:d=0,max:x=100,label:g,showValue:h=!1,format:j,className:b,style:N},w){const v=m(f,d,x),y=null===v,V=void 0!==j,$="absolute inset-y-0 rounded-mp-full bg-(--_mp-accent)";return a(l.Root,{ref:w,value:null===v?null:f??null,min:d,max:x,format:j,getAriaValueText:o(v,V),"data-mp-size":u,className:["mp-progress-linear flex w-full flex-col",t[u],b??""].filter(Boolean).join(" "),style:{...s(p),...N},children:[g||h?a("div",{className:["flex items-baseline gap-2",g?"justify-between":"justify-end",n].join(" "),children:[g?e(l.Label,{className:"text-mp-on-surface min-w-0 truncate",children:g}):null,h?e(l.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>c(v,e,V)}):null]}):null,e(l.Track,{className:["rounded-mp-full bg-mp-on-surface/12 relative w-full overflow-hidden",i[u]].join(" "),children:y?a(r.Fragment,{children:[e("span",{className:`${$} mp-progress-linear-lead`}),e("span",{className:`${$} mp-progress-linear-trail`})]}):e(l.Indicator,{className:`${$} start-0 transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard`})})]})});
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Progress as r}from"@base-ui/react/progress";import{accentSlots as s}from"../../internal/accent.js";import{VISUALLY_HIDDEN as n}from"../../internal/visually-hidden.js";import{META_TEXT as t,STACK_GAP as i}from"../../internal/scale.js";import{BAR_THICKNESS as o,progressAriaText as m,progressFraction as c,progressText as u}from"../../internal/progress.js";import{useMPColor as f,useMPSize as p}from"../../internal/config.js";export const MPProgressLinear=/*@__PURE__*/l.forwardRef(function({size:d,color:h,value:j=null,min:g=0,max:x=100,label:b,hideLabel:N=!1,showValue:v=!1,format:w,className:y,style:L},V){const $=p(d),k=f(h),z=c(j,g,x),P=null===z,R=N?null:b,T=void 0!==w,A="absolute inset-y-0 rounded-mp-full bg-(--_mp-accent)";return a(r.Root,{ref:V,value:null===z?null:j??null,min:g,max:x,format:w,getAriaValueText:m(z,T),"data-mp-size":$,className:["mp-progress-linear flex w-full flex-col",i[$],y??""].filter(Boolean).join(" "),style:{...s(k),...L},children:[N&&b?e(r.Label,{className:n,children:b}):null,R||v?a("div",{className:["flex items-baseline gap-2",R?"justify-between":"justify-end",t].join(" "),children:[R?e(r.Label,{className:"text-mp-on-surface min-w-0 truncate",children:R}):null,v?e(r.Value,{className:"text-mp-on-surface-variant shrink-0 tabular-nums",children:e=>u(z,e,T)}):null]}):null,e(r.Track,{className:["rounded-mp-full bg-mp-on-surface/12 relative w-full overflow-hidden",o[$]].join(" "),children:P?a(l.Fragment,{children:[e("span",{className:`${A} mp-progress-linear-lead`}),e("span",{className:`${A} mp-progress-linear-trail`})]}):e(r.Indicator,{className:`${A} start-0 transition-[width] duration-(--mp-sys-motion-duration-short4) ease-mp-standard`})})]})});

package/dist/components/radio-group/MPRadioGroup.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as n}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent.js";import{MPStateLayer as t}from"../../internal/StateLayer.js";import{MPSupportingText as s}from"../../internal/SupportingText.js";import{META_TEXT as d,PROSE_TEXT as c,hasContent as p}from"../../internal/scale.js";const m={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[9px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-[11px]",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},u=/*@__PURE__*/r.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/r.forwardRef(function({value:l,label:o,description:s,disabled:f=!1,id:x,className:g,style:h},b){const y=r.useContext(u),z=m[y.size],j=r.useId(),v=x??j;return e(n.Root,{className:["mp-radio inline-block align-top",g??""].filter(Boolean).join(" "),style:h,disabled:f,"data-mp-value":l,children:a("div",{className:["flex items-start gap-3",c[y.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(i.Root,{ref:b,id:v,value:l,disabled:f,className:["mp-radio__dot group relative inline-flex shrink-0 items-center justify-center","box-border rounded-full border-2 p-0","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color] duration-(--mp-sys-motion-duration-short4)",z.ring,f?"border-mp-on-surface/38 cursor-default":[y.readOnly?"cursor-default":"cursor-pointer",y.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[f?null:e(t,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",z.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["rounded-full",z.fill,"transition-[opacity,scale] duration-(--mp-sys-motion-duration-short4)","ease-mp-standard","data-starting-style:scale-0 data-starting-style:opacity-0","data-ending-style:scale-0 data-ending-style:opacity-0",f?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(s)?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(n.Label,{htmlFor:v,className:["leading-[1.4]",f?"text-mp-on-surface/38 cursor-default":y.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(s)?e(n.Description,{className:`${d} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38`,children:s}):null]}):null]})})});export const MPRadioGroup=/*@__PURE__*/r.forwardRef(function({value:i,defaultValue:t,onValueChange:c,label:m,description:f,errorMessage:x,orientation:g="vertical",size:h="md",color:b="primary",required:y=!1,disabled:z=!1,readOnly:j=!1,name:v,children:N,className:R,style:O},k){const w=p(x),M=w?"error":b,_=r.useId(),C=r.useMemo(()=>({size:h,readOnly:j,invalid:w}),[h,j,w]);return e(u.Provider,{value:C,children:a(n.Root,{className:["mp-radio-group flex flex-col gap-2",R??""].filter(Boolean).join(" "),disabled:z,invalid:w,"data-mp-size":h,"data-mp-orientation":g,style:{...o(M),...O},children:[p(m)?a("span",{id:_,className:[d,z?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[m,y?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{ref:k,"aria-labelledby":p(m)?_:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:z,readOnly:j,required:y,name:v,className:["flex","horizontal"===g?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:N}),e(s,{description:f,errorMessage:x})]})})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Radio as i}from"@base-ui/react/radio";import{RadioGroup as l}from"@base-ui/react/radio-group";import{Field as n}from"@base-ui/react/field";import{accentSlots as o}from"../../internal/accent.js";import{DOT_MOTION as t}from"../../internal/mark.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{MPSupportingText as d}from"../../internal/SupportingText.js";import{META_TEXT as c,PROSE_TEXT as m,hasContent as p}from"../../internal/scale.js";import{useMPColor as u,useMPSize as f}from"../../internal/config.js";const x={xs:{ring:"size-4",fill:"size-2",halo:"size-8"},sm:{ring:"size-[18px]",fill:"size-[10px]",halo:"size-9"},md:{ring:"size-5",fill:"size-2.5",halo:"size-10"},lg:{ring:"size-[22px]",fill:"size-3",halo:"size-11"},xl:{ring:"size-6",fill:"size-3",halo:"size-12"}},h=/*@__PURE__*/a.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/a.forwardRef(function({value:l,label:o,description:d,disabled:u=!1,id:f,className:g,style:b},z){const j=a.useContext(h),v=x[j.size],y=a.useId(),N=f??y;return e(n.Root,{className:["mp-radio inline-block align-top",g??""].filter(Boolean).join(" "),style:b,disabled:u,"data-mp-value":l,children:r("div",{className:["flex items-start gap-3",m[j.size]].join(" "),children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:r(i.Root,{ref:z,id:N,value:l,disabled:u,className:["mp-radio__dot group relative inline-flex shrink-0 items-center justify-center","box-border rounded-full border-2 p-0","appearance-none bg-transparent font-[inherit] outline-none","transition-[border-color] duration-(--mp-sys-motion-duration-short4)",v.ring,u?"border-mp-on-surface/38 cursor-default":[j.readOnly?"cursor-default":"cursor-pointer",j.invalid?"border-mp-error":"border-mp-on-surface-variant","data-checked:border-(--_mp-accent)"].join(" ")].join(" "),children:[u?null:e(s,{layer:["top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",v.halo,"bg-mp-on-surface","group-data-checked:bg-(--_mp-accent)"].join(" ")}),e(i.Indicator,{className:["mp-radio__fill rounded-full",v.fill,t,u?"bg-mp-on-surface/38":"bg-(--_mp-accent)"].join(" ")})]})}),p(o)||p(d)?r("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p(o)?e(n.Label,{htmlFor:N,className:["leading-[1.4]",u?"text-mp-on-surface/38 cursor-default":j.readOnly?"text-mp-on-surface":"text-mp-on-surface cursor-pointer"].join(" "),children:o}):null,p(d)?e(n.Description,{className:`${c} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38`,children:d}):null]}):null]})})});export const MPRadioGroup=/*@__PURE__*/a.forwardRef(function({value:i,defaultValue:t,onValueChange:s,label:m,description:x,errorMessage:g,orientation:b="vertical",size:z,color:j,required:v=!1,disabled:y=!1,readOnly:N=!1,name:R,children:_,className:k,style:O},w){const M=f(z),C=u(j),V=p(g),I=V?"error":C,P=a.useId(),S=a.useMemo(()=>({size:M,readOnly:N,invalid:V}),[M,N,V]);return e(h.Provider,{value:S,children:r(n.Root,{className:["mp-radio-group flex flex-col gap-2",k??""].filter(Boolean).join(" "),disabled:y,invalid:V,"data-mp-size":M,"data-mp-orientation":b,style:{...o(I),...O},children:[p(m)?r("span",{id:P,className:[c,y?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[m,v?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(l,{ref:w,"aria-labelledby":p(m)?P:void 0,value:i,defaultValue:t,onValueChange:e=>s?.(String(e??"")),disabled:y,readOnly:N,required:v,name:R,className:["flex","horizontal"===b?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:_}),e(d,{description:x,errorMessage:g})]})})});

package/dist/components/rating/MPRating.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{MPIcon as i}from"../icon/MPIcon.js";import{StarIcon as n}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{fillMessage as o}from"../../internal/i18n.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{RATING as m}from"../../internal/messages/rating.js";import{VISUALLY_HIDDEN as c}from"../../internal/visually-hidden.js";const d={xs:16,sm:20,md:24,lg:30,xl:36},u={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const MPRating=/*@__PURE__*/a.forwardRef(function({value:p,defaultValue:h=0,onValueChange:f,count:g=5,precision:x=1,icon:y,emptyIcon:v,clearable:j=!0,readOnly:b=!1,disabled:M=!1,name:N,required:P=!1,size:w="md",color:S="primary",locale:R,labels:_,structuredData:z=!1,className:I,style:k,onPointerLeave:q,...C},L){const V=s(R),A=l(m,V,_),B=a.useId(),F=N??B,[D,E]=a.useState(h),O=void 0!==p,T=O?p:D,[G,H]=a.useState(null),J=Math.max(1,Math.floor(g)),K=x>0&&x<=1?x:1,Q=Math.round(1/K),U=Math.max(0,Math.min(J,G??T)),W=e=>e<=0?A.empty:o(A.value,{value:String(e),max:String(J)}),X=e=>{O||E(e),f?.(e)},Y=t=>{const a=e(i,{icon:n,size:d[w],className:t?"[&>svg]:fill-current":""});return(t?y:v)??a},Z=Array.from({length:J},(a,i)=>{const n=Math.max(0,Math.min(1,U-i));return t("span",{className:["mp-rating__star relative inline-flex shrink-0","rounded-mp-xs",b||M?"":["outline-mp-secondary has-[:focus-visible]:outline-2","has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-solid"].join(" ")].filter(Boolean).join(" "),style:{width:d[w],height:d[w]},children:[e("span",{className:["flex items-center justify-center",M?"text-mp-on-surface/38":"text-mp-outline"].join(" "),style:{width:d[w],height:d[w]},children:Y(!1)}),e("span",{"aria-hidden":"true",className:"mp-rating__fill pointer-events-none absolute inset-y-0 start-0 overflow-hidden",style:{width:100*n+"%"},children:e("span",{className:["flex items-center justify-center","transition-colors duration-(--mp-sys-motion-duration-short4)",M?"text-mp-on-surface/38":"text-(--_mp-accent)"].join(" "),style:{width:d[w],height:d[w]},children:Y(!0)})}),b?null:Array.from({length:Q},(t,a)=>{const n=Number((i+(a+1)*K).toFixed(4));return e("label",{className:["absolute inset-y-0",M?"":"cursor-pointer"].join(" "),style:{insetInlineStart:100*a/Q+"%",width:100/Q+"%"},onPointerEnter:()=>{M||H(n)},children:e("input",{type:"radio",className:c,name:F,value:n,checked:T===n,disabled:M,required:P,"aria-label":W(n),onChange:()=>X(n),onClick:()=>{j&&T===n&&X(0)}})},n)})]},i)}),$=["mp-rating inline-flex items-center align-middle",u[w],I??""].filter(Boolean).join(" "),ee={...r(S),...k};if(b){const i=Math.max(0,Math.min(J,T));return t("div",{ref:L,role:"img","data-mp-size":w,"aria-label":W(i),itemScope:z||void 0,itemType:z?"https://schema.org/Rating":void 0,className:$,style:ee,onPointerLeave:q,...C,children:[z?t(a.Fragment,{children:[e("meta",{itemProp:"ratingValue",content:String(i)}),e("meta",{itemProp:"bestRating",content:String(J)}),e("meta",{itemProp:"worstRating",content:"0"})]}):null,Z]})}return e("div",{ref:L,role:"radiogroup","data-mp-size":w,"aria-label":A.label,"aria-disabled":M||void 0,"aria-required":P||void 0,className:$,style:ee,onPointerLeave:e=>{H(null),q?.(e)},...C,children:Z})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIcon as i}from"../icon/MPIcon.js";import{StarIcon as a}from"../../constants/icons.js";import{accentSlots as r}from"../../internal/accent.js";import{fillMessage as o}from"../../internal/i18n.js";import{useMPLocale as s,useMPMessages as l}from"../../internal/locale.js";import{RATING as m}from"../../internal/messages/rating.js";import{VISUALLY_HIDDEN as c}from"../../internal/visually-hidden.js";import{useMPColor as d,useMPSize as u}from"../../internal/config.js";const p={xs:16,sm:20,md:24,lg:30,xl:36},h={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const MPRating=/*@__PURE__*/n.forwardRef(function({value:f,defaultValue:g=0,onValueChange:x,count:y=5,precision:v=1,icon:j,emptyIcon:b,clearable:M=!0,readOnly:N=!1,disabled:w=!1,name:P,required:S=!1,size:R,color:_,locale:z,labels:I,structuredData:k=!1,className:q,style:C,onPointerLeave:L,...V},A){const B=u(R),F=d(_),D=s(z),E=l(m,D,I),O=n.useId(),T=P??O,[G,H]=n.useState(g),J=void 0!==f,K=J?f:G,[Q,U]=n.useState(null),W=Math.max(1,Math.floor(y)),X=v>0&&v<=1?v:1,Y=Math.round(1/X),Z=Math.max(0,Math.min(W,Q??K)),$=e=>e<=0?E.empty:o(E.value,{value:String(e),max:String(W)}),ee=e=>{J||H(e),x?.(e)},te=t=>{const n=e(i,{icon:a,size:p[B],className:t?"[&>svg]:fill-current":""});return(t?j:b)??n},ne=Array.from({length:W},(n,i)=>{const a=Math.max(0,Math.min(1,Z-i));return t("span",{className:["mp-rating__star relative inline-flex shrink-0","rounded-mp-xs",N||w?"":["outline-mp-secondary has-[:focus-visible]:outline-2","has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-solid"].join(" ")].filter(Boolean).join(" "),style:{width:p[B],height:p[B]},children:[e("span",{className:["flex items-center justify-center",w?"text-mp-on-surface/38":"text-mp-outline"].join(" "),style:{width:p[B],height:p[B]},children:te(!1)}),e("span",{"aria-hidden":"true",className:["mp-rating__fill pointer-events-none absolute inset-y-0 start-0 overflow-hidden","transition-[width] duration-(--mp-sys-motion-duration-short2) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{width:100*a+"%"},children:e("span",{className:["flex items-center justify-center","transition-colors duration-(--mp-sys-motion-duration-short4)",w?"text-mp-on-surface/38":"text-(--_mp-accent)"].join(" "),style:{width:p[B],height:p[B]},children:te(!0)})}),N?null:Array.from({length:Y},(t,n)=>{const a=Number((i+(n+1)*X).toFixed(4));return e("label",{className:["absolute inset-y-0",w?"":"cursor-pointer"].join(" "),style:{insetInlineStart:100*n/Y+"%",width:100/Y+"%"},onPointerEnter:()=>{w||U(a)},children:e("input",{type:"radio",className:c,name:T,value:a,checked:K===a,disabled:w,required:S,"aria-label":$(a),onChange:()=>ee(a),onClick:()=>{M&&K===a&&ee(0)}})},a)})]},i)}),ie=["mp-rating inline-flex items-center align-middle",h[B],q??""].filter(Boolean).join(" "),ae={...r(F),...C};if(N){const i=Math.max(0,Math.min(W,K));return t("div",{ref:A,role:"img","data-mp-size":B,"aria-label":$(i),itemScope:k||void 0,itemType:k?"https://schema.org/Rating":void 0,className:ie,style:ae,onPointerLeave:L,...V,children:[k?t(n.Fragment,{children:[e("meta",{itemProp:"ratingValue",content:String(i)}),e("meta",{itemProp:"bestRating",content:String(W)}),e("meta",{itemProp:"worstRating",content:"0"})]}):null,ne]})}return e("div",{ref:A,role:"radiogroup","data-mp-size":B,"aria-label":E.label,"aria-disabled":w||void 0,"aria-required":S||void 0,className:ie,style:ae,onPointerLeave:e=>{U(null),L?.(e)},...V,children:ne})});

package/dist/components/scatter-chart/MPScatterChart.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { type CartesianChartProps } from '../../internal/ChartFrame.js';
+export interface MPScatterChartProps extends CartesianChartProps {
+    /**
+     * Sizes each mark by its point's `z`, so a third number rides along.
+     *
+     * The **area** carries it and not the radius — a bubble drawn with its radius
+     * proportional to the value shows four times the ink for twice the number,
+     * and every reader judges the blob rather than the line across it.
+     * @default false
+     */
+    bubble?: boolean;
+    /** How big the largest bubble gets, in pixels. @default 22 */
+    maxRadius?: number;
+    /**
+     * Gives each series a mark of its own shape as well as its own colour.
+     *
+     * On by default, and it is not decoration. Colour separates **three** series
+     * where any two marks can touch, and a scatter is exactly that case — see the
+     * note on the component. A shape is the second channel that carries the rest,
+     * and it survives greyscale, print and forced colours too.
+     * @default true
+     */
+    shapes?: boolean;
+}
+/**
+ * Two measures against each other, one mark per observation.
+ *
+ * ```tsx
+ * <MPScatterChart
+ *   series={[{ name: 'Runs', data: [{ x: 12, y: 4.2 }, { x: 19, y: 5.1 }] }]}
+ * />
+ * ```
+ *
+ * The only chart here with a value axis in **both** directions. Its question is
+ * whether two things move together, and its marks are observations rather than
+ * a sequence — so there is no order to walk along and nothing to join up.
+ *
+ * ## Neither axis starts at zero
+ *
+ * A position encodes a value and claims nothing about proportion, so cropping
+ * both scales moves every mark by the same amount and the relationship survives
+ * intact. Forcing zero onto two measures that live between 40 and 60 puts the
+ * whole picture in one corner, which is the one way to make a scatter say
+ * nothing at all.
+ *
+ * ## Three series is the cap on colour alone
+ *
+ * The palette's eight slots are separable pair by pair only to the third, and
+ * on a scatter **any two marks can sit side by side** — unlike a line or a bar,
+ * where only neighbours meet. That is a property of the colour space rather
+ * than of this palette, and no ordering of eight does better.
+ *
+ * So the marks take shapes as well: a circle, a square, a triangle, a diamond
+ * and a cross, each scaled to the same area so no series looks heavier than
+ * another. Past five series, facet the chart rather than reaching for a sixth
+ * shape.
+ *
+ * ## The grid runs both ways here and nowhere else
+ *
+ * A grid in both directions is graph paper, and on a chart of columns the
+ * vertical rules would be doing the job the crosshair already does. Here there
+ * is no column to be in and reading a mark's x off the picture is half of what
+ * the reader came for, so graph paper is exactly the point.
+ */
+export declare function MPScatterChart({ bubble, maxRadius, shapes, ...frame }: MPScatterChartProps): React.JSX.Element;

package/dist/components/scatter-chart/MPScatterChart.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as r}from"react/jsx-runtime";import{CartesianFrame as e}from"../../internal/ChartFrame.js";import{MARKER_RADIUS as s,MARK_SHAPES as a,bubbleRadius as t,markPath as c,pointX as i}from"../../internal/chart.js";export function MPScatterChart({bubble:o=!1,maxRadius:l=22,shapes:n=!0,...u}){const h=r=>n?a[r%a.length]:"circle";return r(e,{...u,xScale:"value",includeZero:!1,markRadius:20,markInset:o?l+2:s.xl+2,marks:({values:r,visible:e,valuePx:a,categoryValuePx:c,categories:n,size:u})=>{const h=s[u],m=o?r.reduce((r,s,a)=>e[a]?s.reduce((r,e)=>Math.max(r,e.z??0),r):r,0):0;return r.flatMap((r,s)=>e[s]?r.flatMap((r,e)=>{const u=i(r,e,n);if(null===r.value||null===u)return[];const d=o?t(r.z??0,m,l,h):h+1;return[{series:s,index:e,x:c(u),y:a(r.value),r:d}]}):[])},swatch:(e,s)=>r("svg",{width:10,height:10,viewBox:"0 0 10 10","aria-hidden":"true",className:"block",children:r("path",{d:c(h(e),5,5,4),fill:"cross"===h(e)?"none":s,stroke:s,strokeWidth:"cross"===h(e)?1.5:0})}),children:({marks:e,colors:s,activeMark:a,hovered:t})=>r("g",{className:"mp-scatter-chart__marks",children:e.map((e,i)=>{const o=h(e.series),l=a===e,n=null!==t&&t!==e.series;return r("path",{d:c(o,e.x,e.y,l?e.r+1.5:e.r),fill:"cross"===o?"none":s[e.series],stroke:"cross"===o?s[e.series]:"var(--_mp-color-surface)",strokeWidth:"cross"===o?2:1.5,strokeLinecap:"round",opacity:n?.15:l?1:.85},i)})})})}

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

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

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

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

package/dist/components/scroll-area/MPScrollArea.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import type { MPOrientation, MPSize } from '../../types.js';
+/** Which way the content is allowed to scroll. */
+export type MPScrollAxis = MPOrientation | 'both';
+export interface MPScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'children'> {
+    /**
+     * The scrollbar's thickness.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /**
+     * Which way the content may scroll.
+     *
+     * `vertical` is the common case and the default. `both` is for content with a
+     * width of its own — a wide table, a diagram — where neither axis should be
+     * the one that wraps.
+     * @default 'vertical'
+     */
+    axis?: MPScrollAxis;
+    /**
+     * How tall the box is allowed to get before it starts scrolling. A number is
+     * pixels, a string is any CSS length.
+     *
+     * Something has to bound the box or there is nothing to scroll: a scroll area
+     * whose height is its content's height never overflows. This is the usual way
+     * to say that, and a `className` with a `max-h-*` or a flex parent that
+     * constrains it are the others.
+     */
+    maxHeight?: number | string;
+    /** A fixed height, for the box that should be its size whatever is in it. */
+    height?: number | string;
+    /**
+     * Keeps the scrollbar drawn instead of fading it out when the pointer leaves.
+     *
+     * Off, it behaves the way an overlay scrollbar does — visible while scrolling
+     * or hovered, gone otherwise. On is right for a panel whose scrollability is
+     * not obvious from its content, where a bar that appears only on hover is a
+     * bar a reader has to discover.
+     * @default false
+     */
+    persistent?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * A box with a scrollbar of its own.
+ *
+ * The browser's is drawn by the operating system: a different width on every
+ * machine, a different colour from the sheet it is cut into, and on Windows a
+ * 17px band of grey that no design accounts for. This one is an element, so it
+ * is the same everywhere and made of the library's own tokens.
+ *
+ * ```tsx
+ * <MPScrollArea maxHeight={320}>
+ *   <MPList>…</MPList>
+ * </MPScrollArea>
+ * ```
+ *
+ * ## Something has to bound the box
+ *
+ * A scroll area whose height is its content's height never overflows and never
+ * shows a bar. `maxHeight` is the usual way to say what bounds it; a `className`
+ * carrying a `max-h-*`, or a flex parent that constrains it, are the others.
+ *
+ * ## The scrollbar overlays the content
+ *
+ * It takes no room in the layout, which is what makes it swappable for the
+ * browser's own on a page that has already been designed: adding one does not
+ * reflow anything. The trade is that content can pass underneath it, so a box
+ * whose content reaches the edge wants a little inline padding of its own.
+ *
+ * ## It is still a real scroll container
+ *
+ * The wheel, the trackpad, a touch drag, Page Up, Home and End, and a keyboard
+ * focus moving into something below the fold all work, because the viewport
+ * underneath is an ordinary `overflow: auto` element. This replaces how the bar
+ * is *drawn* and nothing about how scrolling behaves — including the browser's
+ * own scroll anchoring and its overscroll handling.
+ *
+ * The native bar is hidden rather than the scrolling being reimplemented, which
+ * is the difference between this and a library that listens for `wheel` events.
+ */
+export declare const MPScrollArea: React.ForwardRefExoticComponent<MPScrollAreaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-area/MPScrollArea.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import*as o from"react";import{ScrollArea as t}from"@base-ui/react/scroll-area";import{cssLength as a}from"../../internal/length.js";import{useMPSize as i}from"../../internal/config.js";const n={xs:"w-1.5",sm:"w-2",md:"w-2.5",lg:"w-3",xl:"w-3.5"},s={xs:"h-1.5",sm:"h-2",md:"h-2.5",lg:"h-3",xl:"h-3.5"};export const MPScrollArea=/*@__PURE__*/o.forwardRef(function({size:o,axis:n="vertical",maxHeight:s,height:c,persistent:m=!1,className:p,style:h,children:u,...f},d){const g=i(o),x="horizontal"!==n,v="vertical"!==n;return e(t.Root,{ref:d,"data-mp-size":g,className:["mp-scroll-area relative overflow-hidden",p??""].filter(Boolean).join(" "),style:h,...f,children:[r(t.Viewport,{className:"mp-scroll-area__viewport size-full overscroll-contain",style:{maxHeight:a(s),height:a(c)},children:r(t.Content,{className:"mp-scroll-area__content",children:u})}),x?r(l,{orientation:"vertical",size:g,persistent:m}):null,v?r(l,{orientation:"horizontal",size:g,persistent:m}):null,x&&v?r(t.Corner,{className:"mp-scroll-area__corner bg-mp-surface-container"}):null]})});function l({orientation:e,size:o,persistent:a}){return r(t.Scrollbar,{orientation:e,className:["mp-scroll-area__bar flex touch-none select-none p-0.5","vertical"===e?n[o]:s[o],"transition-opacity duration-(--mp-sys-motion-duration-short4)",a?"opacity-100":"opacity-0 data-hovering:opacity-100 data-scrolling:opacity-100"].join(" "),children:r(t.Thumb,{className:["mp-scroll-area__thumb rounded-mp-full flex-1","bg-mp-on-surface/38 hover:bg-mp-on-surface/56 active:bg-mp-on-surface/56","transition-[background-color] duration-(--mp-sys-motion-duration-short4)"].join(" ")})})}

package/dist/components/scroll-area/index.d.ts

@@ -0,0 +1,2 @@
+export { MPScrollArea } from './MPScrollArea.js';
+export type { MPScrollAreaProps, MPScrollAxis } from './MPScrollArea.js';

package/dist/components/scroll-area/index.js

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