material-plus-ui 1.6.0 → 1.7.0

package/dist/components/pie-chart/MPPieChart.d.ts

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { type ChartBaseProps } from '../../internal/ChartChrome.js';
+import type { MPChartCategory, MPChartDatum } from '../../types.js';
+/** How the ring is drawn. */
+export type MPPieChartShape = 'pie' | 'donut' | 'semi';
+export interface MPPieChartProps extends ChartBaseProps {
+    /**
+     * The slices. Numbers, or points carrying their own name and colour.
+     *
+     * One series and not an array of them, because that is what a pie **is**: the
+     * slices are the entities here, so each takes a palette slot of its own and
+     * the legend lists them rather than listing series.
+     */
+    data: readonly MPChartDatum[];
+    /** What each slice is called. Points may carry their own `x` instead. */
+    categories?: readonly MPChartCategory[];
+    /**
+     * - `pie` — a filled disc.
+     * - `donut` — a ring, with room in the middle for the total.
+     * - `semi` — half a ring, opened along the bottom, for a tile wider than it
+     *   is tall.
+     * @default 'pie'
+     */
+    shape?: MPPieChartShape;
+    /**
+     * Where the first slice starts, in degrees clockwise from twelve o'clock.
+     * Ignored by `semi`, which is defined by where it opens.
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * What goes in the hole. A ring with nothing in the middle is a pie with a
+     * bite taken out of it — the total, or the one figure the chart is about, is
+     * what the ring was drawn around.
+     */
+    center?: React.ReactNode;
+    /**
+     * Writes each slice's **share** on it, where the slice is wide enough to hold
+     * the text with room either side. One that does not fit is dropped rather
+     * than clipped; the hover panel and the table still have it.
+     *
+     * The share and not the value, because a share is what a pie is a picture of
+     * and the value is one hover away.
+     * @default 'none'
+     */
+    valueLabels?: 'none' | 'all';
+}
+/**
+ * Parts of a whole, at a glance.
+ *
+ * ```tsx
+ * <MPPieChart
+ *   categories={['Search', 'Direct', 'Social']}
+ *   data={[52, 31, 17]}
+ * />
+ * ```
+ *
+ * The narrowest chart here and the easiest one to misuse. An angle is a poor
+ * thing to compare: two slices within a few percent of each other are
+ * indistinguishable, and nobody can rank six of them by eye. So a pie answers
+ * exactly one question — **is one of these most of it?** Anything finer, and
+ * anything past about six slices, is [MPBarChart](bar-chart), where the reader
+ * is judging length instead.
+ *
+ * ## What it does with a negative
+ *
+ * Leaves it out, and says so in the table. A negative has no share of a whole,
+ * and every way of drawing one is a lie: as an absolute it claims the opposite
+ * of what it means, and as a signed sweep it overlaps the slice beside it.
+ *
+ * ## Colour follows the slice
+ *
+ * A slice takes its palette slot from its place in `data`, never from its size.
+ * A chart that is refiltered or resorted keeps every category the colour it had
+ * — which is the whole reason a legend is worth reading twice.
+ */
+export declare function MPPieChart({ data, categories, shape, startAngle, center, valueLabels, height, format, locale: localeProp, label, legend, tooltip, empty, size: sizeProp, className, style, ...rest }: MPPieChartProps): React.JSX.Element;

package/dist/components/pie-chart/MPPieChart.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{useMPElementSize as n}from"../../hooks/useMPElementSize.js";import{useMPLocale as o,useMPMessages as r}from"../../internal/locale.js";import{useMPSize as a}from"../../internal/config.js";import{CHART as i}from"../../internal/messages/chart.js";import{TABLE as s}from"../../internal/messages/table.js";import{ChartLegend as m,ChartShell as c,ChartTable as u,ChartTooltipPanel as h,useVisibility as d}from"../../internal/ChartChrome.js";import{CHART_FONT_SIZE as f,MARK_GAP as p,PLOT_HEIGHT as v,arcPath as g,categoryAt as y,formatCategory as x,formatStatistic as b,polarPoint as M,seriesColor as j,toValues as w}from"../../internal/chart.js";export function MPPieChart({data:P,categories:k,shape:I="pie",startAngle:N=0,center:z,valueLabels:A="none",height:B,format:C,locale:D,label:L,legend:R,tooltip:S,empty:$,size:_,className:E,style:F,...K}){const O=a(_),U=o(D),W=r(i,U),X=r(s,U),Y=l.useRef(null),q=n(Y),G=l.useId(),H=l.useMemo(()=>w([{data:P}])[0],[P]),J=d(l.useMemo(()=>H.map(()=>({})),[H])),[Q,T]=l.useState(null),V=l.useCallback(e=>b(e,U,C,!0),[C,U]),Z=l.useMemo(()=>H.map((e,t)=>x(y(t,k,[H]),U)),[H,k,U]),ee=l.useMemo(()=>H.map((e,t)=>e.color??j(t,void 0)),[H]),te=H.map((e,t)=>J.visible[t]&&null!==e.value&&e.value>0?e.value:0),le=te.reduce((e,t)=>e+t,0),ne=q.width,oe="number"==typeof B?B:void 0===B?v[O]:q.height,re=f[O],ae="semi"===I,ie=ne/2,se=ae?oe-re-4:oe/2,me=Math.max(0,ae?Math.min(ne/2,oe-re-8)-2:Math.min(ne,oe)/2-2),ce="pie"===I?0:.62*me,ue=ae?Math.PI:2*Math.PI;let he=ae?-Math.PI/2:N*Math.PI/180;const de=te.map(e=>{const t=he;return he+=le>0?e/le*ue:0,{from:t,to:he,share:e}}),fe=e=>{const t=de.map((e,t)=>e.share>0?t:-1).filter(e=>e>=0);if(0===t.length)return;const l=null===Q?e>0?-1:0:t.indexOf(Q);T(t[(l+e+t.length)%t.length])},pe=e=>le>0?new Intl.NumberFormat(U,{style:"percent",maximumFractionDigits:1}).format(e/le):"",ve=null===Q?null:de[Q],ge=ve&&ve.share>0?[{seriesIndex:Q,color:ee[Q],value:ve.share,formatted:`${V(ve.share)} · ${pe(ve.share)}`,label:H[Q]?.label}]:[],ye=ve&&ve.share>0?Z[Q]:void 0,xe=ve?M(ie,se,.75*me,(ve.from+ve.to)/2):null,be=!1===S?{mode:"none"}:!0===S||void 0===S?{}:S,Me=!1===R?{interactive:!1}:!0===R||void 0===R?{}:R,je=!1!==R&&H.length>1,we=le<=0,Pe=[H];return t(c,{...K,size:O,className:["mp-pie-chart",E??""].filter(Boolean).join(" "),style:F,plotRef:Y,name:L??W.label,describedBy:we?void 0:G,interactive:!we,height:B,legendSide:Me.side??"bottom",plotProps:{onPointerMove:we||"none"===be.mode?void 0:e=>T(((e,t)=>{const l=Y.current;if(!l||le<=0)return null;const n=l.getBoundingClientRect(),o=e-n.left-ie,r=t-n.top-se,a=Math.hypot(o,r);if(a>me+8||a<ce)return null;const i=Math.atan2(o,-r),s=de.findIndex(({from:e,to:t,share:l})=>!(l<=0)&&(i-e+4*Math.PI)%(2*Math.PI)<t-e);return-1===s?null:s})(e.clientX,e.clientY)),onPointerLeave:()=>T(null),onKeyDown:we||"none"===be.mode?void 0:e=>{if("ArrowRight"===e.key||"ArrowDown"===e.key)fe(1);else if("ArrowLeft"===e.key||"ArrowUp"===e.key)fe(-1);else{if("Escape"!==e.key)return;T(null)}e.preventDefault()},onBlur:()=>T(null)},tooltip:xe&&ge.length>0&&"none"!==be.mode?e(h,{heading:ye,items:ge,x:xe.x,y:xe.y,flip:xe.x>ie,size:O}):null,legend:je?e(m,{names:Z,colors:ee,options:Me,visibility:J,size:O}):null,status:{heading:ye,items:ge},table:we?null:e(u,{id:G,caption:L??W.table,corner:W.category,categories:Z,names:[L??W.table],values:Pe,format:V,locale:U,empty:X.empty}),children:[we?e("div",{className:"text-mp-on-surface-variant text-mp-body-small flex h-full items-center justify-center",children:$??X.empty}):ne>0&&oe>0?e("svg",{width:ne,height:oe,viewBox:`0 0 ${ne} ${oe}`,"aria-hidden":"true",className:"block overflow-visible",children:t("g",{className:"mp-pie-chart__slices",children:[de.map((t,l)=>{if(t.share<=0)return null;return e("path",{d:g(ie,se,Q===l?me+3:me,ce,t.from,t.to),fill:ee[l],stroke:"var(--_mp-color-surface)",strokeWidth:p,strokeLinejoin:"round",opacity:null===J.hovered||J.hovered===l?1:.35},l)}),"all"===A?de.map((t,l)=>{const n=pe(t.share),o=t.to-t.from,r=M(ie,se,ce>0?(me+ce)/2:.68*me,(t.from+t.to)/2),a=o*(ce>0?(me+ce)/2:.68*me);return t.share<=0||a<n.length*re*.6+8?null:e("text",{x:r.x,y:r.y,textAnchor:"middle",dominantBaseline:"central",fill:"var(--_mp-color-on-surface)",fontSize:re,children:n},l)}):null]})}):null,null==z||"pie"===I||we?null:e("div",{className:"pointer-events-none absolute flex flex-col items-center justify-center text-center",style:{left:ie-ce,top:se-ce,width:2*ce,height:ae?ce:2*ce},children:z})]})}

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

@@ -0,0 +1,2 @@
+export { MPPieChart } from './MPPieChart.js';
+export type { MPPieChartProps, MPPieChartShape } from './MPPieChart.js';

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

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

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/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 n}from"@base-ui/react/radio-group";import{Field as l}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";import{useMPColor as m,useMPSize as u}from"../../internal/config.js";const f={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"}},g=/*@__PURE__*/r.createContext({size:"md",readOnly:!1,invalid:!1});export const MPRadio=/*@__PURE__*/r.forwardRef(function({value:n,label:o,description:s,disabled:m=!1,id:u,className:x,style:h},b){const y=r.useContext(g),z=f[y.size],j=r.useId(),v=u??j;return e(l.Root,{className:["mp-radio inline-block align-top",x??""].filter(Boolean).join(" "),style:h,disabled:m,"data-mp-value":n,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:n,disabled:m,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,m?"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:[m?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",m?"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(l.Label,{htmlFor:v,className:["leading-[1.4]",m?"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(l.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:f,description:x,errorMessage:h,orientation:b="vertical",size:y,color:z,required:j=!1,disabled:v=!1,readOnly:N=!1,name:R,children:O,className:k,style:w},M){const _=u(y),C=m(z),V=p(h),I=V?"error":C,P=r.useId(),S=r.useMemo(()=>({size:_,readOnly:N,invalid:V}),[_,N,V]);return e(g.Provider,{value:S,children:a(l.Root,{className:["mp-radio-group flex flex-col gap-2",k??""].filter(Boolean).join(" "),disabled:v,invalid:V,"data-mp-size":_,"data-mp-orientation":b,style:{...o(I),...w},children:[p(f)?a("span",{id:P,className:[d,v?"text-mp-on-surface/38":"text-mp-on-surface-variant"].join(" "),children:[f,j?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(n,{ref:M,"aria-labelledby":p(f)?P:void 0,value:i,defaultValue:t,onValueChange:e=>c?.(String(e??"")),disabled:v,readOnly:N,required:j,name:R,className:["flex","horizontal"===b?"flex-row flex-wrap gap-x-6 gap-y-2":"flex-col gap-2"].join(" "),children:O}),e(s,{description:x,errorMessage:h})]})})});
+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 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:v=5,precision:y=1,icon:j,emptyIcon:b,clearable:M=!0,readOnly:N=!1,disabled:P=!1,name:w,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=w??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(v)),X=y>0&&y<=1?y: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||P?"":["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",P?"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",style:{width:100*a+"%"},children:e("span",{className:["flex items-center justify-center","transition-colors duration-(--mp-sys-motion-duration-short4)",P?"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",P?"":"cursor-pointer"].join(" "),style:{insetInlineStart:100*n/Y+"%",width:100/Y+"%"},onPointerEnter:()=>{P||U(a)},children:e("input",{type:"radio",className:c,name:T,value:a,checked:K===a,disabled:P,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":P||void 0,"aria-required":S||void 0,className:ie,style:ae,onPointerLeave:e=>{U(null),L?.(e)},...V,children:ne})});
+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";

package/dist/components/scroll-zone/MPScrollZone.d.ts

@@ -0,0 +1,165 @@
+import * as React from 'react';
+import type { MPColor, MPOrientation, MPSize, MPVariant } from '../../types.js';
+/**
+ * When the two scroll buttons are drawn.
+ *
+ * - `auto` — neither while everything fits, and at an end whichever costs less.
+ *   An `overlay` button with nowhere to go is removed, an `inline` one is drawn
+ *   `disabled`. The default.
+ * - `always` — both, from the first paint, `disabled` rather than gone at an
+ *   end. What a strip whose content arrives from a fetch wants, so the buttons
+ *   are not appearing under the pointer half a second in.
+ * - `none` — none at all. The wheel, a finger, a drag and the arrow keys are
+ *   all still there; this is the strip that scrolls the way a phone scrolls.
+ */
+export type MPScrollZoneButtons = 'auto' | 'always' | 'none';
+/**
+ * Where those buttons sit, which is also where the strip ends.
+ *
+ * - `inline` — beside the strip, in the layout. The default. The scroller stops
+ *   where the button starts, so an item is cut off at the button's edge rather
+ *   than sliding under it: nothing is ever half-hidden behind a control.
+ * - `overlay` — over the ends of the strip, which keeps every pixel of the box
+ *   for content. What a shelf of pictures wants, where the thing under the
+ *   button is a picture that carries on.
+ *
+ * The lane an `inline` button sits in is held open even while that button has
+ * nowhere to go, or the strip would resize under the pointer each time it
+ * reached an end. That is also what decides what `buttons="auto"` does there:
+ * the lane is paid for either way, so an inline button stays and goes
+ * `disabled`, while an overlay one — whose absence is free — is removed.
+ */
+export type MPScrollZoneButtonPlacement = 'inline' | 'overlay';
+/**
+ * What pressing one does.
+ *
+ * - `item` — moves to the next child along, `step` of them at a time. The
+ *   default, and the only one that lands on something rather than between two
+ *   things.
+ * - `page` — moves by everything currently in view, the way Page Down does.
+ * - `hold` — travels for as long as the button is held, at `speed` pixels a
+ *   second. A press too short to be a hold moves one item instead, so the
+ *   button is never dead to a quick tap.
+ */
+export type MPScrollZoneMode = 'item' | 'page' | 'hold';
+export interface MPScrollZoneProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'> {
+    /**
+     * Which way the children run, and so which way the zone scrolls.
+     * @default 'horizontal'
+     */
+    orientation?: MPOrientation;
+    /**
+     * How many rows a horizontal zone lays its children out in before it starts a
+     * new column, and how many columns a vertical one uses. `2` is the shelf that
+     * holds twice as much in the same width.
+     * @default 1
+     */
+    lines?: number;
+    /**
+     * The space between children. A number is pixels, a string is any CSS length.
+     * @default 8
+     */
+    gap?: number | string;
+    /** When the scroll buttons are drawn. @default 'auto' */
+    buttons?: MPScrollZoneButtons;
+    /**
+     * Whether they sit beside the strip or over it.
+     * @default 'inline'
+     */
+    buttonPlacement?: MPScrollZoneButtonPlacement;
+    /** What pressing one does. @default 'item' */
+    mode?: MPScrollZoneMode;
+    /** How many children one press moves, in `item` mode. @default 1 */
+    step?: number;
+    /** How fast a held button travels, in pixels a second. @default 900 */
+    speed?: number;
+    /**
+     * Snaps the nearest child to the leading edge when the scrolling stops. The
+     * wheel and a drag included, not only the buttons.
+     * @default false
+     */
+    snap?: boolean;
+    /**
+     * Lets a mouse or a pen drag the strip along, the way a finger already can.
+     *
+     * Touch is left to the browser, whose own scrolling beats anything a handler
+     * can imitate: momentum, rubber-banding and the scrollbar all come with it.
+     * @default true
+     */
+    drag?: boolean;
+    /**
+     * Turns a wheel rolled over the strip into travel along it — the one axis a
+     * mouse has, on a strip that does not run along it.
+     *
+     * Off by default, because a wheel taken from the page is the page's: a reader
+     * who meant to scroll past the shelf is held by it instead. What it does take
+     * it gives back at the ends, so a strip with nothing left ahead of it is
+     * something to scroll past rather than something to be caught in. A trackpad
+     * swiping sideways is left alone, and a vertical zone ignores the prop —
+     * there the wheel already points the way the strip runs.
+     * @default false
+     */
+    wheel?: boolean;
+    /** Shows the browser's own scrollbar under the strip. @default false */
+    scrollbar?: boolean;
+    /**
+     * How the scroll buttons are drawn.
+     * @default 'filled'
+     */
+    variant?: MPVariant;
+    /**
+     * The size of those buttons, and how far they sit from the strip. Not the
+     * size of a child, which is whatever the caller made it.
+     * @default 'md'
+     */
+    size?: MPSize;
+    /** Which accent family they read. @default 'primary' */
+    color?: MPColor;
+    /** What the strip is called: "Categories", "Recent files". */
+    label?: string;
+    /** Defaults to the wording in `locale`. */
+    previousLabel?: string;
+    /** The same. */
+    nextLabel?: string;
+    /**
+     * Which language the buttons name themselves in. Falls back to the nearest
+     * `MPLocaleProvider`, then to English.
+     */
+    locale?: string;
+    /** The strip. Every top-level child is one item of it. */
+    children?: React.ReactNode;
+}
+/**
+ * A strip of anything, laid out in one direction and scrolled in it.
+ *
+ * The mechanism is an ordinary scroll container, and everything the component
+ * offers is a way of driving one. Swiping on a phone, two-finger dragging on a
+ * trackpad, the arrow keys and the scrollbar are the browser's own and are never
+ * intercepted. What is added on top is a pair of buttons for the pointer that
+ * has neither a wheel nor a finger, a mouse drag for the strip that reads as
+ * something to pull, and — only where it is asked for — the wheel turned onto
+ * the axis the strip runs along.
+ *
+ * ```tsx
+ * <MPScrollZone label="Categories">
+ *   <MPChip>Coffee</MPChip>
+ *   <MPChip>Tea</MPChip>
+ * </MPScrollZone>
+ * ```
+ *
+ * ## Nothing is transformed
+ *
+ * A translated track would have to argue for an exception to the rule the rest
+ * of the library keeps; a scroll offset does not. It is also what makes the
+ * strip run the other way under RTL without being told, keeps the scrollbar
+ * honest, and lets the browser scroll a focused child into view on its own.
+ *
+ * ## What separates it from `MPCarousel`
+ *
+ * `lines`, and what it implies. A carousel is one thing at a time and knows
+ * which one — it has a `value`, an index, and a row of marks saying where the
+ * reader is. A scroll zone has none of those, because it is a shelf that
+ * happens to be longer than the room it is in: there is no current item to
+ * report, and two rows of thumbnails is a shape a carousel cannot hold.
+ */
+export declare const MPScrollZone: React.ForwardRefExoticComponent<MPScrollZoneProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/scroll-zone/MPScrollZone.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{MPIconButton as r}from"../icon-button/MPIconButton.js";import{MPIcon as o}from"../icon/MPIcon.js";import{ChevronLeftIcon as i,ChevronRightIcon as l,ChevronDownIcon as s}from"../../constants/icons.js";import{accentSlots as a}from"../../internal/accent.js";import{cssLength as c}from"../../internal/length.js";import{useMPLocale as u,useMPMessages as d}from"../../internal/locale.js";import{SCROLL as m}from"../../internal/messages/scroll.js";import{CONTROL_ICON as f}from"../../internal/scale.js";import{useMPColor as p,useMPSize as b}from"../../internal/config.js";const v={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-3",xl:"p-4"},w={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-3",xl:"gap-4"};export const MPScrollZone=/*@__PURE__*/n.forwardRef(function({orientation:h="horizontal",lines:g=1,gap:y=8,buttons:x="auto",buttonPlacement:k="inline",mode:L="item",step:E=1,speed:j=900,snap:M=!1,drag:C=!0,wheel:P=!1,scrollbar:z=!1,variant:R="filled",size:N,color:T,label:A,previousLabel:B,nextLabel:D,locale:W,className:S,style:F,children:I,...Y},_){const H=b(N),X=p(T),q=d(m,u(W)),K="horizontal"===h,O=Math.max(1,Math.round(g)),$=Math.max(1,Math.round(E)),V="inline"===k,Z=n.useRef(null),G=n.useRef(null),[J,Q]=n.useState({back:!1,forward:!1}),U=n.useCallback(()=>{const e=Z.current;if(!e)return;const t=K?e.clientWidth:e.clientHeight,n=K?e.scrollWidth:e.scrollHeight,r=Math.abs(K?e.scrollLeft:e.scrollTop);Q(e=>{const o=r>1,i=n-t-r>1;return e.back===o&&e.forward===i?e:{back:o,forward:i}})},[K]);n.useEffect(()=>{const e=Z.current,t=G.current;if(U(),!e||"undefined"==typeof ResizeObserver)return;const n=new ResizeObserver(U);return n.observe(e),t&&n.observe(t),()=>n.disconnect()},[U]);const ee=n.useCallback(()=>{const e=Z.current;return e&&K&&"rtl"===getComputedStyle(e).direction?-1:1},[K]),te=n.useCallback((e,t)=>{const n=Z.current;if(!n)return;const r=t?"undefined"!=typeof window&&window.matchMedia?.("(prefers-reduced-motion: reduce)").matches?"auto":"smooth":"auto";n.scrollBy(K?{left:e,behavior:r}:{top:e,behavior:r})},[K]),ne=n.useCallback(()=>{const e=Z.current,t=G.current;if(!e||!t)return[];const n=K&&"rtl"===getComputedStyle(e).direction,r=K?n?"right":"left":"top",o=n?-1:1,i=e.getBoundingClientRect()[r],l=[];for(const e of Array.from(t.children)){const t=Math.round((e.getBoundingClientRect()[r]-i)*o);l.includes(t)||l.push(t)}return l.sort((e,t)=>e-t)},[K]),re=n.useCallback((e,t=L)=>{const n=Z.current;if(!n)return;const r=ee(),o=K?n.clientWidth:n.clientHeight;if("page"===t)return void te(o*(e?1:-1)*r,!0);const i=ne(),l=i.filter(e=>e>1),s=i.filter(e=>e<-1),a=e?l[$-1]:s[s.length-$];te(void 0!==a?a*r:o*(e?1:-1)*r,!0)},[ee,K,ne,$,L,te]),oe=n.useRef(null);n.useEffect(()=>()=>oe.current?.(),[]);const ie=n.useCallback((e,t)=>{if(oe.current)return;const n=ee(),r=performance.now();let o=r,i=0;const l=t=>{const r=t-o;o=t,te(j*r/1e3*(e?1:-1)*n,!1),i=requestAnimationFrame(l)};i=requestAnimationFrame(l);const s=()=>{cancelAnimationFrame(i),oe.current=null,window.removeEventListener(t,s),window.removeEventListener("pointercancel",s),window.removeEventListener("blur",s),performance.now()-r<140&&re(e,"item")};oe.current=s,window.addEventListener(t,s),window.addEventListener("pointercancel",s),window.addEventListener("blur",s)},[re,ee,te,j]),le=n.useRef(null);function se(e){return"hold"!==L?{onClick:()=>re(e)}:{onPointerDown:t=>{0===t.button&&ie(e,"pointerup")},onKeyDown:t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),ie(e,"keyup"))}}}n.useEffect(()=>()=>le.current?.(),[]),n.useEffect(()=>{const e=Z.current;if(!e||!P||!K)return;const t=t=>{if(t.ctrlKey||Math.abs(t.deltaX)>Math.abs(t.deltaY))return;const n=1===t.deltaMode?16:2===t.deltaMode?e.clientWidth:1,r=t.deltaY*n;if(!r)return;const o=Math.abs(e.scrollLeft);(r>0?e.scrollWidth-e.clientWidth-o>1:o>1)&&(t.preventDefault(),te(r*ee(),!1))};return e.addEventListener("wheel",t,{passive:!1}),()=>e.removeEventListener("wheel",t)},[ee,K,te,P]);const ae="none"!==x&&("always"===x||J.back||J.forward);function ce(t){const n=t?J.forward:J.back;if("auto"===x&&!n&&!V)return e("span",{});const a=e(r,{variant:R,size:H,color:X,label:t?D??q.next:B??q.previous,disabled:!n,className:"pointer-events-auto",icon:e(o,{icon:K?t?l:i:s,size:f[H],className:K?"rtl:rotate-180":t?"":"rotate-180"}),...se(t)});return V?e("span",{className:"flex shrink-0 items-center justify-center",children:a}):a}return t("div",{ref:_,"data-mp-size":H,"data-mp-variant":R,className:["mp-scroll-zone relative flex min-w-0",V&&K?"flex-row items-stretch":"flex-col",V?w[H]:"",S??""].filter(Boolean).join(" "),style:{...a(X),...F},...Y,children:[ae&&V?ce(!1):null,e("div",{ref:Z,tabIndex:0,role:"group","aria-label":A??q.label,className:["mp-scroll-zone__scroller","min-h-0 min-w-0 grow",K?"overflow-x-auto overflow-y-hidden":"overflow-y-auto overflow-x-hidden",M?K?"snap-x snap-mandatory":"snap-y snap-mandatory":"",z?"":"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",C&&(J.back||J.forward)?"cursor-grab data-dragging:cursor-grabbing":"","outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].filter(Boolean).join(" "),onScroll:U,onPointerDown:function(e){if(!C||"touch"===e.pointerType||0!==e.button)return;le.current?.();const t=e.currentTarget,n=e.clientX,r=e.clientY,o=t.scrollLeft,i=t.scrollTop;let l=!1;const s=document.body.style.getPropertyValue("-webkit-user-select"),a=e=>{const s=e.clientX-n,a=e.clientY-r;if(!l){if(Math.abs(K?s:a)<4)return;l=!0;try{t.setPointerCapture(e.pointerId)}catch{}t.dataset.dragging="true",document.body.style.setProperty("-webkit-user-select","none")}K?t.scrollLeft=o-s:t.scrollTop=i-a},c=()=>{le.current=null,t.removeEventListener("pointermove",a),t.removeEventListener("pointerup",u),t.removeEventListener("pointercancel",c),delete t.dataset.dragging,s?document.body.style.setProperty("-webkit-user-select",s):document.body.style.removeProperty("-webkit-user-select")},u=()=>{const e=l;if(c(),!e)return;const n=e=>{e.stopPropagation(),e.preventDefault()};t.addEventListener("click",n,{capture:!0,once:!0}),window.setTimeout(()=>t.removeEventListener("click",n,!0),0)};le.current=c,t.addEventListener("pointermove",a),t.addEventListener("pointerup",u),t.addEventListener("pointercancel",c)},children:e("div",{ref:G,className:["mp-scroll-zone__track",M?"[&>*]:snap-start":""].filter(Boolean).join(" "),style:{display:"grid",gap:c(y),gridAutoFlow:K?"column":"row",...K?{width:"max-content",gridTemplateRows:`repeat(${O}, auto)`,gridAutoColumns:"max-content"}:{gridTemplateColumns:`repeat(${O}, minmax(0, 1fr))`,gridAutoRows:"max-content"}},children:I})}),ae&&V?ce(!0):null,ae&&!V?t("div",{className:["pointer-events-none absolute inset-0 flex justify-between",K?"items-center":"flex-col items-center",v[H]].join(" "),children:[ce(!1),ce(!0)]}):null]})});

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

@@ -0,0 +1,2 @@
+export { MPScrollZone } from './MPScrollZone.js';
+export type { MPScrollZoneButtonPlacement, MPScrollZoneButtons, MPScrollZoneMode, MPScrollZoneProps } from './MPScrollZone.js';

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

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