material-plus-ui 1.5.0 → 1.7.0

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

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

package/dist/components/meter/MPMeter.js

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

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

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

package/dist/components/meter/index.js

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

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

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

package/dist/components/mockup/MPMockup.js

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

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

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

package/dist/components/mockup/index.js

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

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

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

package/dist/components/number-field/MPNumberField.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { MPStyleProps } from '../../types.js';
+import type { MPControlEventProps, MPStyleProps } from '../../types.js';
 /**
  * Where the two steppers sit.
  *
@@ -14,7 +14,7 @@ import type { MPStyleProps } from '../../types.js';
  * nobody hits.
  */
 export type MPNumberFieldSteppers = 'end' | 'split' | 'none';
-export interface MPNumberFieldProps extends MPStyleProps {
+export interface MPNumberFieldProps extends MPStyleProps, MPControlEventProps<HTMLInputElement> {
     /** The number. Use with `onValueChange` for a controlled field. */
     value?: number | null;
     /** The starting number, for an uncontrolled field. */
@@ -129,4 +129,4 @@ export interface MPNumberFieldProps extends MPStyleProps {
  * owns the parsing against the locale, the clamping, the press-and-hold repeat on
  * the steppers, and the hidden input that submits with a form.
  */
-export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size, fullWidth, required, disabled, readOnly, name, id, className, style }: MPNumberFieldProps): React.JSX.Element;
+export declare function MPNumberField({ value, defaultValue, onValueChange, onValueCommitted, onKeyDown, onKeyUp, onFocus, onBlur, onClick, onDoubleClick, onContextMenu, min, max, step, largeStep, smallStep, allowWheelScrub, format, locale, steppers, incrementLabel, decrementLabel, label, floatingLabel, description, errorMessage, placeholder, startIcon, size: sizeProp, fullWidth, required, disabled, readOnly, name, id, className, style }: MPNumberFieldProps): React.JSX.Element;

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

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

package/dist/components/otp-field/MPOtpField.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{MPSupportingText as n}from"../../internal/SupportingText.js";import{META_TEXT as l,STACK_GAP as i,hasContent as m}from"../../internal/scale.js";const s={xs:"h-8 w-7",sm:"h-10 w-9",md:"h-14 w-12",lg:"h-16 w-14",xl:"h-18 w-16"},d={xs:"text-mp-body-large",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},u={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},p={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const MPOtpField=/*@__PURE__*/a.forwardRef(function({size:c="md",fullWidth:f=!1,length:h=6,charset:x="numeric",mask:b=!1,groupSize:g,separator:v="–",value:y,defaultValue:w,onValueChange:j,onComplete:M,onValueInvalid:V,autoSubmit:N=!1,label:C,description:F,errorMessage:S,name:z,required:I=!1,disabled:O=!1,readOnly:R=!1,autoFocus:$=!1,className:k,style:q},T){const A=Math.min(12,Math.max(2,Math.round(h))),B=m(S),L=g&&g>0?Math.round(g):0,P=/*@__PURE__*/["rounded-mp-xs border bg-transparent text-center font-[inherit]",s[c],d[c],"transition-[border-color,color] duration-(--mp-sys-motion-duration-short4)","focus:border-2 focus:border-mp-primary focus:outline-none",O?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":B?"border-mp-error text-mp-on-surface caret-mp-error hover:border-mp-error":R?"border-mp-outline-variant text-mp-on-surface cursor-default":"border-mp-outline text-mp-on-surface caret-mp-primary hover:border-mp-on-surface"].join(" ");return r(t.Root,{disabled:O,invalid:B,"data-mp-size":c,className:["mp-otp-field flex-col align-top",i[c],f?"flex w-full":"inline-flex w-fit",k??""].filter(Boolean).join(" "),style:q,children:[m(C)?r(t.Label,{className:`${l} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 data-invalid:text-mp-error`,children:[C,I?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(o.Root,{ref:T,length:A,validationType:p[x],mask:b,name:z,required:I,disabled:O,readOnly:R,autoSubmit:N,value:y,defaultValue:w,onValueChange:e=>j?.(e),onValueComplete:e=>M?.(e),onValueInvalid:e=>V?.(e),className:`flex items-center ${u[c]}`,children:Array.from({length:A},(t,n)=>r(a.Fragment,{children:[L>0&&n>0&&n%L===0?e("span",{"aria-hidden":"true",className:`text-mp-on-surface-variant px-0.5 select-none ${d[c]}`,children:v}):null,e(o.Input,{className:P,autoFocus:$&&0===n})]},n))}),e(n,{description:F,errorMessage:S})]})});
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as a from"react";import{Field as t}from"@base-ui/react/field";import{OTPField as o}from"@base-ui/react/otp-field";import{MPSupportingText as n}from"../../internal/SupportingText.js";import{META_TEXT as l,STACK_GAP as i,hasContent as m}from"../../internal/scale.js";import{useMPSize as s}from"../../internal/config.js";const u={xs:"h-8 w-7",sm:"h-10 w-9",md:"h-14 w-12",lg:"h-16 w-14",xl:"h-18 w-16"},d={xs:"text-mp-body-large",sm:"text-mp-title-medium",md:"text-mp-title-large",lg:"text-mp-headline-small",xl:"text-mp-headline-medium"},p={xs:"gap-1",sm:"gap-1.5",md:"gap-2",lg:"gap-2.5",xl:"gap-3"},c={numeric:"numeric",alpha:"alpha",alphanumeric:"alphanumeric",any:"none"};export const MPOtpField=/*@__PURE__*/a.forwardRef(function({size:f,fullWidth:h=!1,length:x=6,charset:g="numeric",mask:b=!1,groupSize:v,separator:y="–",value:j,defaultValue:w,onValueChange:M,onComplete:V,onValueInvalid:N,autoSubmit:C=!1,label:F,description:S,errorMessage:z,name:I,required:O=!1,disabled:R=!1,readOnly:$=!1,autoFocus:k=!1,className:q,style:T},A){const B=s(f),L=Math.min(12,Math.max(2,Math.round(x))),P=m(z),W=v&&v>0?Math.round(v):0,D=/*@__PURE__*/["rounded-mp-xs border bg-transparent text-center font-[inherit]",u[B],d[B],"transition-[border-color,color] duration-(--mp-sys-motion-duration-short4)","focus:border-2 focus:border-mp-primary focus:outline-none",R?"border-mp-on-surface/12 text-mp-on-surface/38 cursor-default":P?"border-mp-error text-mp-on-surface caret-mp-error hover:border-mp-error":$?"border-mp-outline-variant text-mp-on-surface cursor-default":"border-mp-outline text-mp-on-surface caret-mp-primary hover:border-mp-on-surface"].join(" ");return r(t.Root,{disabled:R,invalid:P,"data-mp-size":B,className:["mp-otp-field flex-col align-top",i[B],h?"flex w-full":"inline-flex w-fit",q??""].filter(Boolean).join(" "),style:T,children:[m(F)?r(t.Label,{className:`${l} text-mp-on-surface-variant data-disabled:text-mp-on-surface/38 data-invalid:text-mp-error`,children:[F,O?e("span",{"aria-hidden":"true",children:" *"}):null]}):null,e(o.Root,{ref:A,length:L,validationType:c[g],mask:b,name:I,required:O,disabled:R,readOnly:$,autoSubmit:C,value:j,defaultValue:w,onValueChange:e=>M?.(e),onValueComplete:e=>V?.(e),onValueInvalid:e=>N?.(e),className:`flex items-center ${p[B]}`,children:Array.from({length:L},(t,n)=>r(a.Fragment,{children:[W>0&&n>0&&n%W===0?e("span",{"aria-hidden":"true",className:`text-mp-on-surface-variant px-0.5 select-none ${d[B]}`,children:y}):null,e(o.Input,{className:D,autoFocus:k&&0===n})]},n))}),e(n,{description:S,errorMessage:z})]})});

package/dist/components/overlay/MPOverlay.d.ts

@@ -99,4 +99,4 @@ export interface MPOverlayProps {
  * else Base UI owns: the portal, the scroll lock, the focus held inside, the page
  * behind going inert, and focus returning to wherever it came from on close.
  */
-export declare function MPOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size, label, locale: localeProp, className, style, children }: MPOverlayProps): React.JSX.Element;
+export declare function MPOverlay({ open, defaultOpen, onOpenChange, tone, dismissible, modal, align, size: sizeProp, label, locale: localeProp, className, style, children }: MPOverlayProps): React.JSX.Element;

package/dist/components/overlay/MPOverlay.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as r}from"@base-ui/react/dialog";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{OVERLAY as t}from"../../internal/messages/overlay.js";import{FADE as n,PORTAL_LAYER as i,SCRIM as o}from"../../internal/surface.js";import{SHEET_PAD as m}from"../../internal/scale.js";const c={scrim:o,blur:"bg-mp-scrim/20 [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-mp-surface",clear:""},p={start:"items-start",center:"items-center",end:"items-end"};export function MPOverlay({open:o,defaultOpen:f,onOpenChange:d,tone:u="scrim",dismissible:x=!1,modal:b=!0,align:j="center",size:h="md",label:y,locale:g,className:O,style:N,children:P}){const k=s(t,l(g));return e(r.Root,{open:o,defaultOpen:f,modal:b,disablePointerDismissal:!x,onOpenChange:(e,a)=>{x||e||"escape-key"!==a.reason?d?.(e):a.cancel()},children:a(r.Portal,{children:[e(r.Backdrop,{className:`${i} fixed inset-0 ${n} ${c[u]}`}),e(r.Viewport,{className:[i,"fixed inset-0 flex justify-center",p[j],m[h]].join(" "),children:e(r.Popup,{"aria-label":y??k.label,"data-mp-size":h,className:["mp-overlay flex max-h-full max-w-full flex-col items-center justify-center","text-mp-on-surface outline-none",n,O??""].filter(Boolean).join(" "),style:N,children:P})})]})})}
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Dialog as a}from"@base-ui/react/dialog";import{useMPLocale as l,useMPMessages as s}from"../../internal/locale.js";import{OVERLAY as t}from"../../internal/messages/overlay.js";import{FADE as n,PORTAL_LAYER as i,SCRIM as o}from"../../internal/surface.js";import{SHEET_PAD as m}from"../../internal/scale.js";import{useMPSize as c}from"../../internal/config.js";const p={scrim:o,blur:"bg-mp-scrim/20 [backdrop-filter:blur(14px)_saturate(1.4)]",solid:"bg-mp-surface",clear:""},f={start:"items-start",center:"items-center",end:"items-end"};export function MPOverlay({open:o,defaultOpen:d,onOpenChange:u,tone:x="scrim",dismissible:j=!1,modal:b=!0,align:g="center",size:h,label:y,locale:O,className:N,style:P,children:k}){const v=c(h),$=s(t,l(O));return e(a.Root,{open:o,defaultOpen:d,modal:b,disablePointerDismissal:!j,onOpenChange:(e,r)=>{j||e||"escape-key"!==r.reason?u?.(e):r.cancel()},children:r(a.Portal,{children:[e(a.Backdrop,{className:`${i} fixed inset-0 ${n} ${p[x]}`}),e(a.Viewport,{className:[i,"fixed inset-0 flex justify-center",f[g],m[v]].join(" "),children:e(a.Popup,{"aria-label":y??$.label,"data-mp-size":v,className:["mp-overlay flex max-h-full max-w-full flex-col items-center justify-center","text-mp-on-surface outline-none",n,N??""].filter(Boolean).join(" "),style:P,children:k})})]})})}

package/dist/components/pagination/MPPagination.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronLeftIcon as i,ChevronRightIcon as r,ChevronsLeftIcon as l,ChevronsRightIcon as s}from"../../constants/icons.js";import{accentSlots as o}from"../../internal/accent.js";import{fillMessage as m}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{PAGINATION as u}from"../../internal/messages/pagination.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{CONTROL_ICON as d,CONTROL_TEXT as h}from"../../internal/scale.js";import{VISUALLY_HIDDEN as g}from"../../internal/visually-hidden.js";const x={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},b={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function j(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=/*@__PURE__*/t.forwardRef(function({count:y,page:v,defaultPage:M=1,onPageChange:w,siblingCount:N=1,boundaryCount:P=1,showEdges:C=!1,showArrows:S=!0,size:K="md",color:_="primary",fullWidth:k=!1,disabled:z=!1,getPageHref:$,locale:A,labels:B,className:D,style:E,...H},I){const L=c(A),R=p(u,L,B),[W,q]=t.useState(M),F=void 0!==v,G=Math.min(Math.max(v??W,1),Math.max(y,1));if(y<2)return null;const J=function(e,n,t,a){const i=j(1,Math.min(a,e)),r=j(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),s=Math.min(Math.max(n+t,a+2*t+2),r.length>0?r[0]-2:e-1);return[...i,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...j(l,s),...s<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...r]}(y,G,N,P),O=G<=1,Q=G>=y,T=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||$&&!w||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),y);n!==G&&(F||q(n),w?.(n))})(n))},U=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",x[K],h[K],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),V=(t,a,i,r,l,s,o)=>e("li",{className:"flex",children:!$||i||r?n("button",{type:"button",disabled:i,"aria-label":l,"aria-current":r?"page":void 0,className:U(r,i),onClick:e=>T(e,a),children:[i?null:e(f,{}),e("span",{className:"relative",children:s})]}):n("a",{href:$(a),rel:o,"aria-label":l,className:U(!1,!1),onClick:e=>T(e,a),children:[e(f,{}),e("span",{className:"relative",children:s})]})},t),X=n=>e(a,{icon:n,size:d[K],className:"rtl:rotate-180"});return n("nav",{ref:I,"aria-label":R.label,"data-mp-size":K,className:["mp-pagination flex",k?"w-full justify-center":"",D??""].filter(Boolean).join(" "),style:{...o(_),...E},...H,children:[n("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${b[K]}`,children:[C?V("first",1,z||O,!1,R.first,X(l)):null,S?V("previous",G-1,z||O,!1,R.previous,X(i),"prev"):null,J.map((n,t)=>"number"==typeof n?V(`slot-${t}`,n,z,n===G,m(R.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",x[K],h[K]].join(" "),children:"…"},`slot-${t}`)),S?V("next",G+1,z||Q,!1,R.next,X(r),"next"):null,C?V("last",y,z||Q,!1,R.last,X(s)):null]}),e("span",{className:g,"aria-live":"polite",children:m(R.status,{page:String(G),total:String(y)})})]})});
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as t from"react";import{MPIcon as a}from"../icon/MPIcon.js";import{ChevronLeftIcon as i,ChevronRightIcon as r,ChevronsLeftIcon as l,ChevronsRightIcon as o}from"../../constants/icons.js";import{accentSlots as s}from"../../internal/accent.js";import{fillMessage as m}from"../../internal/i18n.js";import{useMPLocale as c,useMPMessages as p}from"../../internal/locale.js";import{PAGINATION as u}from"../../internal/messages/pagination.js";import{MPStateLayer as f}from"../../internal/StateLayer.js";import{CONTROL_ICON as d,CONTROL_TEXT as h}from"../../internal/scale.js";import{VISUALLY_HIDDEN as g}from"../../internal/visually-hidden.js";import{useMPColor as x,useMPSize as b}from"../../internal/config.js";const j={xs:"h-8 min-w-8 px-1.5",sm:"h-10 min-w-10 px-2",md:"h-14 min-w-14 px-2.5",lg:"h-16 min-w-16 px-3",xl:"h-18 min-w-18 px-3.5"},v={xs:"gap-0.5",sm:"gap-1",md:"gap-1",lg:"gap-1.5",xl:"gap-2"};function y(e,n){return Array.from({length:Math.max(0,n-e+1)},(n,t)=>e+t)}export const MPPagination=/*@__PURE__*/t.forwardRef(function({count:M,page:w,defaultPage:N=1,onPageChange:P,siblingCount:C=1,boundaryCount:S=1,showEdges:K=!1,showArrows:_=!0,size:k,color:z,fullWidth:$=!1,disabled:A=!1,getPageHref:B,locale:D,labels:E,className:H,style:I,...L},R){const W=b(k),q=x(z),F=c(D),G=p(u,F,E),[J,O]=t.useState(N),Q=void 0!==w,T=Math.min(Math.max(w??J,1),Math.max(M,1));if(M<2)return null;const U=function(e,n,t,a){const i=y(1,Math.min(a,e)),r=y(Math.max(e-a+1,a+1),e),l=Math.max(Math.min(n-t,e-a-2*t-1),a+2),o=Math.min(Math.max(n+t,a+2*t+2),r.length>0?r[0]-2:e-1);return[...i,...l>a+2?["start-ellipsis"]:a+1<e-a?[a+1]:[],...y(l,o),...o<e-a-1?["end-ellipsis"]:e-a>a?[e-a]:[],...r]}(M,T,C,S),V=T<=1,X=T>=M,Y=(e,n)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||B&&!P||(e.preventDefault(),(e=>{const n=Math.min(Math.max(e,1),M);n!==T&&(Q||O(n),P?.(n))})(n))},Z=(e,n)=>["mp-pagination__cell group relative inline-flex items-center justify-center","rounded-mp-full box-border appearance-none overflow-hidden align-middle select-none","border-0 font-[inherit] tabular-nums whitespace-nowrap no-underline","transition-[background-color,color] duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-2","focus-visible:outline-solid outline-none",j[W],h[W],n?"text-mp-on-surface/38 cursor-default bg-transparent":e?"bg-(--_mp-accent) text-(--_mp-on-accent) cursor-pointer":"text-mp-on-surface cursor-pointer bg-transparent"].join(" "),ee=(t,a,i,r,l,o,s)=>e("li",{className:"flex",children:!B||i||r?n("button",{type:"button",disabled:i,"aria-label":l,"aria-current":r?"page":void 0,className:Z(r,i),onClick:e=>Y(e,a),children:[i?null:e(f,{}),e("span",{className:"relative",children:o})]}):n("a",{href:B(a),rel:s,"aria-label":l,className:Z(!1,!1),onClick:e=>Y(e,a),children:[e(f,{}),e("span",{className:"relative",children:o})]})},t),ne=n=>e(a,{icon:n,size:d[W],className:"rtl:rotate-180"});return n("nav",{ref:R,"aria-label":G.label,"data-mp-size":W,className:["mp-pagination flex",$?"w-full justify-center":"",H??""].filter(Boolean).join(" "),style:{...s(q),...I},...L,children:[n("ul",{role:"list",className:`m-0 flex list-none items-center p-0 ${v[W]}`,children:[K?ee("first",1,A||V,!1,G.first,ne(l)):null,_?ee("previous",T-1,A||V,!1,G.previous,ne(i),"prev"):null,U.map((n,t)=>"number"==typeof n?ee(`slot-${t}`,n,A,n===T,m(G.page,{page:String(n)}),n):e("li",{"aria-hidden":"true",className:["text-mp-on-surface-variant flex items-center justify-center select-none",j[W],h[W]].join(" "),children:"…"},`slot-${t}`)),_?ee("next",T+1,A||X,!1,G.next,ne(r),"next"):null,K?ee("last",M,A||X,!1,G.last,ne(o)):null]}),e("span",{className:g,"aria-live":"polite",children:m(G.status,{page:String(T),total:String(M)})})]})});

package/dist/components/panes/MPPanes.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent.js";import{pixelsIn as o}from"../../internal/length.js";const i=/*@__PURE__*/n.createContext({basis:null,id:null}),a={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},s={xs:4,sm:6,md:8,lg:10,xl:12};function l(e,t,n){if(null!=e)return"number"==typeof e?t*e/100:o(e,t,n)}export const MPPanes=/*@__PURE__*/n.forwardRef(function({orientation:o="horizontal",resizable:c=!0,color:u="primary",size:d="md",onResize:m,onResizeEnd:f,className:p,style:h,children:g,...v},y){const x=n.Children.toArray(g).filter(n.isValidElement),b=x.length,w=n.useId(),z=n.useRef(null),S=n.useCallback(e=>{z.current=e,"function"==typeof y?y(e):y&&(y.current=e)},[y]),j=n.useRef([]),E=x.map(e=>e.props),[R,M]=n.useState(null),k=R&&R.length===b?R:null,C=n.useRef(null);n.useLayoutEffect(()=>{j.current=E,C.current=k});const L=n.useRef(null);n.useEffect(()=>()=>{null!==L.current&&(document.body.style.userSelect=L.current,L.current=null)},[]);const P="horizontal"===o,$=s[d]*Math.max(0,b-1);function _(e){const t=z.current,n=C.current;if(!c||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(P?r.width:r.height)-$;if(o<=0)return null;const i=j.current[e],a=j.current[e+1],s=n[e]*o,u=s+n[e+1]*o,d=Math.max(l(i?.minSize,o,t)??0,u-(l(a?.maxSize,o,t)??u)),f=Math.min(l(i?.maxSize,o,t)??u,u-(l(a?.minSize,o,t)??0));return f<d?null:{root:t,current:n,lower:d,upper:f,start:s,resize(t){const r=Math.min(f,Math.max(d,s+t)),i=[...n];return i[e]=r/o,i[e+1]=(u-r)/o,M(i),m?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=z.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(P?t.width:t.height)-$;n<=0||M(t=>t&&t.length===b?t:function(e,t,n){const r=e.map(e=>l(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,s=r.map(e=>Math.max(0,e??a)),c=s.reduce((e,t)=>e+t,0);return c<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/c)}(j.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[b,P,$]);const B=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",a[d],"transition-colors duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-0","focus-visible:outline-solid outline-none",c?[P?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:S,"data-mp-size":d,className:["mp-panes flex h-full w-full",P?"flex-row":"flex-col","min-h-0 min-w-0",p??""].filter(Boolean).join(" "),style:{...r(u),...h},...v,children:x.map((r,o)=>t(n.Fragment,{children:[o>0?e("div",{role:"separator","aria-orientation":P?"vertical":"horizontal","aria-valuenow":k?Math.round(100*k[o-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!c||void 0,"aria-controls":`${w}-${o-1}`,tabIndex:c?0:-1,className:B,onPointerDown:e=>{0===e.button&&function(e,t){const n=_(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;L.current=o,document.body.style.userSelect="none";const i=P?t.clientX:t.clientY,a=P&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=P?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,L.current=null,f?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(o-1,e)},onKeyDown:e=>{const t=P?"ArrowLeft":"ArrowUp",n=P?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n){e.preventDefault();const t=P&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1;return void function(e,t){const n=_(e);if(!n)return;const r=n.resize(t);f?.(r.map(e=>100*e))}(o-1,(e.key===n?16:-16)*t)}"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=_(e);if(!n)return;const r=n.resize(n[t]-n.start);f?.(r.map(e=>100*e))}(o-1,"Home"===e.key?"lower":"upper"))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",P?"h-full w-px":"h-px w-full",c?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(i.Provider,{value:{basis:k?`calc((100% - ${$}px) * ${k[o].toFixed(6)})`:null,id:`${w}-${o}`},children:r})]},r.key??o))})});export const MPPane=/*@__PURE__*/n.forwardRef(function({defaultSize:t,minSize:r,maxSize:o,className:a,style:s,children:l,...c},u){const{basis:d,id:m}=n.useContext(i);return e("div",{ref:u,id:m??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",a??""].filter(Boolean).join(" "),style:{flex:d?`0 0 ${d}`:"1 1 0%",...s},...c,children:l})});
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as n from"react";import{accentSlots as r}from"../../internal/accent.js";import{pixelsIn as o}from"../../internal/length.js";import{useMPColor as i,useMPSize as a}from"../../internal/config.js";const s=/*@__PURE__*/n.createContext({basis:null,id:null}),l={xs:"basis-1",sm:"basis-1.5",md:"basis-2",lg:"basis-2.5",xl:"basis-3"},c={xs:4,sm:6,md:8,lg:10,xl:12};function u(e,t,n){if(null!=e)return"number"==typeof e?t*e/100:o(e,t,n)}export const MPPanes=/*@__PURE__*/n.forwardRef(function({orientation:o="horizontal",resizable:d=!0,color:m,size:f,onResize:p,onResizeEnd:h,className:g,style:v,children:x,...y},b){const w=i(m),z=a(f),S=n.Children.toArray(x).filter(n.isValidElement),j=S.length,E=n.useId(),R=n.useRef(null),M=n.useCallback(e=>{R.current=e,"function"==typeof b?b(e):b&&(b.current=e)},[b]),k=n.useRef([]),C=S.map(e=>e.props),[L,P]=n.useState(null),$=L&&L.length===j?L:null,_=n.useRef(null);n.useLayoutEffect(()=>{k.current=C,_.current=$});const B=n.useRef(null);n.useEffect(()=>()=>{null!==B.current&&(document.body.style.userSelect=B.current,B.current=null)},[]);const N="horizontal"===o,A=c[z]*Math.max(0,j-1);function D(e){const t=R.current,n=_.current;if(!d||!t||!n||void 0===n[e+1])return null;const r=t.getBoundingClientRect(),o=(N?r.width:r.height)-A;if(o<=0)return null;const i=k.current[e],a=k.current[e+1],s=n[e]*o,l=s+n[e+1]*o,c=Math.max(u(i?.minSize,o,t)??0,l-(u(a?.maxSize,o,t)??l)),m=Math.min(u(i?.maxSize,o,t)??l,l-(u(a?.minSize,o,t)??0));return m<c?null:{root:t,current:n,lower:c,upper:m,start:s,resize(t){const r=Math.min(m,Math.max(c,s+t)),i=[...n];return i[e]=r/o,i[e+1]=(l-r)/o,P(i),p?.(i.map(e=>100*e)),i}}}n.useEffect(()=>{const e=R.current;if(!e)return;const t=()=>{const t=e.getBoundingClientRect(),n=(N?t.width:t.height)-A;n<=0||P(t=>t&&t.length===j?t:function(e,t,n){const r=e.map(e=>u(e.defaultSize,t,n)),o=r.reduce((e,t)=>e+(t??0),0),i=r.filter(e=>void 0===e).length,a=i>0?Math.max(0,t-o)/i:0,s=r.map(e=>Math.max(0,e??a)),l=s.reduce((e,t)=>e+t,0);return l<=0?s.map(()=>1/Math.max(1,s.length)):s.map(e=>e/l)}(k.current,n,e))};t();const n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[j,N,A]);const I=["mp-panes__handle group/handle relative z-1 flex shrink-0 grow-0 items-center justify-center",l[z],"transition-colors duration-(--mp-sys-motion-duration-short4)","outline-mp-secondary focus-visible:outline-2 focus-visible:outline-offset-0","focus-visible:outline-solid outline-none",d?[N?"cursor-col-resize":"cursor-row-resize","hover:bg-(--_mp-accent)/8 data-[dragging]:bg-(--_mp-accent)/10"].join(" "):""].filter(Boolean).join(" ");return e("div",{ref:M,"data-mp-size":z,className:["mp-panes flex h-full w-full",N?"flex-row":"flex-col","min-h-0 min-w-0",g??""].filter(Boolean).join(" "),style:{...r(w),...v},...y,children:S.map((r,o)=>t(n.Fragment,{children:[o>0?e("div",{role:"separator","aria-orientation":N?"vertical":"horizontal","aria-valuenow":$?Math.round(100*$[o-1]):void 0,"aria-valuemin":0,"aria-valuemax":100,"aria-disabled":!d||void 0,"aria-controls":`${E}-${o-1}`,tabIndex:d?0:-1,className:I,onPointerDown:e=>{0===e.button&&function(e,t){const n=D(e);if(!n)return;const r=t.currentTarget;try{r.setPointerCapture(t.pointerId)}catch{}r.dataset.dragging="true";const o=document.body.style.userSelect;B.current=o,document.body.style.userSelect="none";const i=N?t.clientX:t.clientY,a=N&&"rtl"===getComputedStyle(n.root).direction?-1:1;let s=n.current;const l=e=>{const t=N?e.clientX:e.clientY;s=n.resize((t-i)*a)},c=()=>{r.removeEventListener("pointermove",l),r.removeEventListener("pointerup",c),r.removeEventListener("pointercancel",c),delete r.dataset.dragging,document.body.style.userSelect=o,B.current=null,h?.(s.map(e=>100*e))};r.addEventListener("pointermove",l),r.addEventListener("pointerup",c),r.addEventListener("pointercancel",c)}(o-1,e)},onKeyDown:e=>{const t=N?"ArrowLeft":"ArrowUp",n=N?"ArrowRight":"ArrowDown";if(e.key===t||e.key===n){e.preventDefault();const t=N&&"rtl"===getComputedStyle(e.currentTarget).direction?-1:1;return void function(e,t){const n=D(e);if(!n)return;const r=n.resize(t);h?.(r.map(e=>100*e))}(o-1,(e.key===n?16:-16)*t)}"Home"!==e.key&&"End"!==e.key||(e.preventDefault(),function(e,t){const n=D(e);if(!n)return;const r=n.resize(n[t]-n.start);h?.(r.map(e=>100*e))}(o-1,"Home"===e.key?"lower":"upper"))},children:e("span",{"aria-hidden":"true",className:["bg-mp-outline-variant pointer-events-none","transition-colors duration-(--mp-sys-motion-duration-short4)",N?"h-full w-px":"h-px w-full",d?["group-hover/handle:bg-(--_mp-accent)","group-focus-visible/handle:bg-(--_mp-accent)","group-data-[dragging]/handle:bg-(--_mp-accent)"].join(" "):""].filter(Boolean).join(" ")})}):null,e(s.Provider,{value:{basis:$?`calc((100% - ${A}px) * ${$[o].toFixed(6)})`:null,id:`${E}-${o}`},children:r})]},r.key??o))})});export const MPPane=/*@__PURE__*/n.forwardRef(function({defaultSize:t,minSize:r,maxSize:o,className:i,style:a,children:l,...c},u){const{basis:d,id:m}=n.useContext(s);return e("div",{ref:u,id:m??void 0,className:["mp-pane relative min-h-0 min-w-0 overflow-auto",i??""].filter(Boolean).join(" "),style:{flex:d?`0 0 ${d}`:"1 1 0%",...a},...c,children:l})});

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/pill/MPPill.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent.js";import{inertProps as r}from"../../internal/inert.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,CONTROL_ICON as l,CONTROL_TEXT as c,hasContent as m,META_TEXT as d,PROSE_TEXT as p,SHEET_PAD_X as u}from"../../internal/scale.js";const f={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},h={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},x={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},b={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=/*@__PURE__*/o.forwardRef(function({startIcon:w,endIcon:v,title:g,description:y,details:j,expanded:N=!1,position:k="static",side:_="top",onClick:z,variant:B="filled",size:C="md",color:I="secondary",className:R,style:$,children:H,...P},S){const E=o.useRef(null),F=o.useId(),[L,M]=o.useState(0);o.useEffect(()=>{const e=E.current;if(!e)return;const t=new ResizeObserver(()=>M(e.scrollHeight));return t.observe(e),M(e.scrollHeight),()=>t.disconnect()},[j]);const O=Boolean(z),q=u[C],A=t(n,{children:[m(w)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[C],height:l[C]},children:w}):null,m(g)||m(y)||m(H)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",h[C]].join(" "),children:[m(g)?e("span",{className:"max-w-full truncate",children:g}):null,m(y)?e("span",{className:`max-w-full truncate font-normal ${d} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:y}):null,H]}):null]});return t("div",{ref:S,"data-mp-size":C,"data-mp-variant":B,"data-mp-expanded":N||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",N?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",c[C],x[B],b[k][_],R??""].filter(Boolean).join(" "),style:{...i(I),...$},...P,children:[t("div",{className:["flex shrink-0 items-center py-1",f[C],a[C],O?"ps-0":q,m(v)?"pe-1":O?"pe-0":""].filter(Boolean).join(" "),children:[O?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent font-[inherit] text-inherit","rounded-[inherit]",a[C],q,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),"aria-expanded":m(j)?N:void 0,"aria-controls":m(j)?F:void 0,onClick:z,children:[e(s,{}),A]}):A,m(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]}),m(j)?e("div",{id:F,className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:N?L:0},...r(!N),children:e("div",{ref:E,className:`${q} pb-2 whitespace-normal ${p[C]}`,children:j})}):null]})});
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import*as o from"react";import{accentSlots as i}from"../../internal/accent.js";import{inertProps as r}from"../../internal/inert.js";import{MPStateLayer as s}from"../../internal/StateLayer.js";import{CONTROL_GAP as a,CONTROL_ICON as l,CONTROL_TEXT as c,hasContent as m,META_TEXT as d,PROSE_TEXT as p,SHEET_PAD_X as u}from"../../internal/scale.js";import{useMPSize as f}from"../../internal/config.js";const h={xs:"min-h-8",sm:"min-h-10",md:"min-h-14",lg:"min-h-16",xl:"min-h-18"},x={xs:"px-4",sm:"px-5",md:"px-6",lg:"px-8",xl:"px-10"},b={filled:"shadow-mp-2 bg-(--_mp-accent) text-(--_mp-on-accent)",tonal:"shadow-mp-2 bg-(--_mp-accent-container) text-(--_mp-on-accent-container)",elevated:"shadow-mp-2 bg-mp-surface-container-low text-(--_mp-accent)",outlined:"border-mp-outline shadow-mp-1 border bg-mp-surface-container text-mp-on-surface",text:"shadow-mp-1 bg-mp-surface-container text-mp-on-surface"},w={static:{top:"",bottom:""},sticky:{top:"sticky top-3 z-20",bottom:"sticky bottom-3 z-20"},fixed:{top:"fixed inset-x-0 top-3 z-30 mx-auto w-fit",bottom:"fixed inset-x-0 bottom-3 z-30 mx-auto w-fit"}};export const MPPill=/*@__PURE__*/o.forwardRef(function({startIcon:g,endIcon:v,title:j,description:y,details:N,expanded:k=!1,position:_="static",side:z="top",onClick:B,variant:C="filled",size:I,color:R="secondary",className:$,style:H,children:P,...S},E){const F=f(I),L=o.useRef(null),M=o.useId(),[O,q]=o.useState(0);o.useEffect(()=>{const e=L.current;if(!e)return;const t=new ResizeObserver(()=>q(e.scrollHeight));return t.observe(e),q(e.scrollHeight),()=>t.disconnect()},[N]);const A=Boolean(B),D=u[F],G=t(n,{children:[m(g)?e("span",{className:"flex shrink-0 items-center justify-center overflow-hidden rounded-mp-full [&_img]:size-full [&_img]:object-cover",style:{width:l[F],height:l[F]},children:g}):null,m(j)||m(y)||m(P)?t("span",{className:["flex min-w-0 flex-1 flex-col items-center justify-center text-center",x[F]].join(" "),children:[m(j)?e("span",{className:"max-w-full truncate",children:j}):null,m(y)?e("span",{className:`max-w-full truncate font-normal ${d} [color:color-mix(in_oklab,currentColor_72%,transparent)]`,children:y}):null,P]}):null]});return t("div",{ref:E,"data-mp-size":F,"data-mp-variant":C,"data-mp-expanded":k||void 0,className:["mp-pill inline-flex max-w-full flex-col overflow-hidden align-middle","box-border whitespace-nowrap select-none",k?"rounded-mp-xl":"rounded-mp-full","transition-[border-radius,background-color,box-shadow]","duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none",c[F],b[C],w[_][z],$??""].filter(Boolean).join(" "),style:{...i(R),...H},...S,children:[t("div",{className:["flex shrink-0 items-center py-1",h[F],a[F],A?"ps-0":D,m(v)?"pe-1":A?"pe-0":""].filter(Boolean).join(" "),children:[A?t("button",{type:"button",className:["group relative flex min-w-0 flex-1 cursor-pointer items-center justify-center","self-stretch appearance-none border-0 bg-transparent font-[inherit] text-inherit","rounded-[inherit]",a[F],D,"outline-mp-secondary focus-visible:outline-2 focus-visible:-outline-offset-2","focus-visible:outline-solid outline-none"].join(" "),"aria-expanded":m(N)?k:void 0,"aria-controls":m(N)?M:void 0,onClick:B,children:[e(s,{}),G]}):G,m(v)?e("span",{className:"flex h-[1lh] shrink-0 items-center",children:v}):null]}),m(N)?e("div",{id:M,className:["overflow-hidden","transition-[height] duration-(--mp-sys-motion-duration-short4) ease-mp-standard","motion-reduce:transition-none"].join(" "),style:{height:k?O:0},...r(!k),children:e("div",{ref:L,className:`${D} pb-2 whitespace-normal ${p[F]}`,children:N})}):null]})});