material-plus-ui 1.6.0 → 1.7.0

package/dist/internal/messages/chart.js

@@ -0,0 +1 @@
+export const CHART={name:"chart",en:{label:"Chart",table:"Chart data",category:"Category"}};

package/dist/internal/messages/code.d.ts

@@ -0,0 +1,3 @@
+import type { MPNamespace } from '../i18n.js';
+/** `MPCodeBlock`'s own words — see `MPMessages['code']`. */
+export declare const CODE: MPNamespace<'code'>;

package/dist/internal/messages/code.js

@@ -0,0 +1 @@
+export const CODE={name:"code",en:{copy:"Copy",copied:"Copied",copyFailed:"Could not copy",raw:"Plain text",label:"Code"}};

package/dist/internal/messages/data-table.d.ts

@@ -0,0 +1,3 @@
+import type { MPNamespace } from '../i18n.js';
+/** `MPDataTable`'s ticks, its count and its two controls — see `MPMessages['dataTable']`. */
+export declare const DATA_TABLE: MPNamespace<'dataTable'>;

package/dist/internal/messages/data-table.js

@@ -0,0 +1 @@
+export const DATA_TABLE={name:"dataTable",en:{selectAll:"Select all rows",selectRow:"Select row",total:"Rows: {total}",selected:"Selected: {count}",download:"Download CSV",perPage:"Rows per page",resize:"Resize column"}};

package/dist/internal/messages/scroll.d.ts

@@ -0,0 +1,3 @@
+import type { MPNamespace } from '../i18n.js';
+/** `MPScrollZone`'s own names — see `MPMessages['scroll']`. */
+export declare const SCROLL: MPNamespace<'scroll'>;

package/dist/internal/messages/scroll.js

@@ -0,0 +1 @@
+export const SCROLL={name:"scroll",en:{label:"Scrollable content",previous:"Scroll back",next:"Scroll forward"}};

package/dist/internal/messages/sparkline.d.ts

@@ -0,0 +1,3 @@
+import type { MPNamespace } from '../i18n.js';
+/** `MPSparkline`'s one sentence — see `MPMessages['sparkline']`. */
+export declare const SPARKLINE: MPNamespace<'sparkline'>;

package/dist/internal/messages/sparkline.js

@@ -0,0 +1 @@
+export const SPARKLINE={name:"sparkline",en:{summary:"{count} points, from {first} to {last}"}};

package/dist/internal/messages/tour.d.ts

@@ -0,0 +1,3 @@
+import type { MPNamespace } from '../i18n.js';
+/** `MPTour`'s four buttons and its counter — see `MPMessages['tour']`. */
+export declare const TOUR: MPNamespace<'tour'>;

package/dist/internal/messages/tour.js

@@ -0,0 +1 @@
+export const TOUR={name:"tour",en:{previous:"Back",next:"Next",done:"Done",skip:"Skip",position:"Step {index} of {total}"}};

package/dist/internal/mockup.d.ts

@@ -0,0 +1,174 @@
+/**
+ * The parts a device mockup is drawn out of.
+ *
+ * `MPMockup` is one component with a lot of pictures in it: three devices, six
+ * systems, four bezels, three finishes and four cut-outs. Kept in the component
+ * that would be a thousand-line file whose interesting fifty lines — the scale,
+ * the screen, the content — are buried in geometry.
+ *
+ * So the geometry lives here, as tables and small drawings, and the component
+ * is left holding the decisions: what a caller asked for, what the device
+ * implies when they did not, and how big it all comes out on the page.
+ *
+ * ## Why the numbers are in the screen's own pixels
+ *
+ * Every measurement below is in the device's logical resolution rather than in
+ * page pixels, and that is what makes one scale at the end work: a bezel that
+ * was 14 device pixels stays 14 device pixels whether the mockup is drawn at
+ * full size or at a third of it, so the hardware never thickens as the picture
+ * shrinks.
+ *
+ * ## What is not a token
+ *
+ * The finishes. A graphite phone stays graphite on a page switched to dark,
+ * because the hardware is a photograph of an object rather than a surface of
+ * this library's — a mockup whose aluminium turned white with the page would be
+ * a mockup of nothing.
+ */
+import * as React from 'react';
+import type { MPSize } from '../types.js';
+/** Which machine the mockup is a picture of. */
+export type MPMockupDevice = 'desktop' | 'tablet' | 'mobile';
+/** The system whose chrome is drawn on the screen. */
+export type MPMockupOs = 'macos' | 'windows' | 'linux' | 'ios' | 'ipados' | 'android';
+/** What holds a desktop screen up. */
+export type MPMockupHardware = 'monitor' | 'laptop';
+/** The camera cut-out along the top edge of a handheld. */
+export type MPMockupNotch = 'none' | 'notch' | 'dynamic-island' | 'punch-hole';
+/**
+ * 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.
+ */
+export type MPMockupBezel = 'none' | 'thin' | 'standard' | 'thick';
+/** What the hardware is made of. */
+export type MPMockupFinish = 'graphite' | 'silver' | 'white';
+/** Which way a handheld is held. */
+export type MPMockupOrientation = 'portrait' | 'landscape';
+/** A screen's logical size, in CSS pixels. */
+export interface MPMockupResolution {
+    width: number;
+    height: number;
+}
+/**
+ * The system to draw, with a mismatch corrected rather than refused.
+ *
+ * `os="macos"` on a phone is a caller who changed `device` and forgot the other
+ * prop, and the useful answer is the phone's own system — not a desktop menu
+ * bar across a 390-pixel screen.
+ */
+export declare function resolveOs(device: MPMockupDevice, os?: MPMockupOs): MPMockupOs;
+/** The cut-out a device would have if nobody said otherwise. */
+export declare function defaultNotch(device: MPMockupDevice, os: MPMockupOs): MPMockupNotch;
+/**
+ * Five real resolutions per device, which is what `size` picks between.
+ *
+ * Real ones rather than a smooth ladder, because the number that matters is the
+ * one a media query fires at: a layout tested at 390 and at 430 has been tested
+ * at the two widths most phones actually are, and a made-up 400 would be a
+ * width nobody's device has.
+ */
+export declare const RESOLUTIONS: Record<MPMockupDevice, Record<MPSize, MPMockupResolution>>;
+/** How much hardware sits on each side of the screen, in screen pixels. */
+interface Shell {
+    side: number;
+    top: number;
+    bottom: number;
+    /** The outer corner. The screen's own is this minus `side`. */
+    radius: number;
+}
+/** What the stand under a desktop is made of, in screen pixels. */
+interface Stand {
+    neckWidth: number;
+    neckHeight: number;
+    footWidth: number;
+    footHeight: number;
+}
+/**
+ * Everything the component needs to draw one device, resolved.
+ *
+ * One object rather than eight return values, because the frame's size is the
+ * sum of the rest and a caller that recomputed it would be a second place for
+ * the arithmetic to be wrong.
+ */
+export interface MPMockupMetrics {
+    screen: MPMockupResolution;
+    /** The device itself: the screen plus its hardware. */
+    body: MPMockupResolution;
+    /** The whole picture: the body plus whatever holds it up. */
+    frame: MPMockupResolution;
+    shell: Shell;
+    screenRadius: number;
+    stand: Stand | null;
+    /** The wedge a laptop sits on, drawn as a trapezium. */
+    laptop: {
+        width: number;
+        height: number;
+        lipWidth: number;
+    } | null;
+}
+export declare function mockupMetrics(options: {
+    device: MPMockupDevice;
+    bezel: MPMockupBezel;
+    hardware: MPMockupHardware;
+    orientation: MPMockupOrientation;
+    resolution: MPMockupResolution;
+}): MPMockupMetrics;
+/**
+ * The three finishes, as fixed colours.
+ *
+ * Not tokens, and not derived from the source colour: a graphite phone stays
+ * graphite on a page switched to dark, because the hardware is a photograph of
+ * an object rather than a surface of this library's. A mockup whose aluminium
+ * turned white with the page would be a mockup of nothing.
+ *
+ * Two slots each — the face and the edge — because the hardware is drawn as a
+ * flat face with a hairline of a darker shade inside it, which is what reads as
+ * an edge rather than as a border.
+ */
+export declare const FINISHES: Record<MPMockupFinish, React.CSSProperties>;
+/** What every piece of hardware is painted with. */
+export declare const HARDWARE = "bg-(--_mp-device) ring-1 ring-(--_mp-device-edge) ring-inset";
+/**
+ * The camera cut-out, drawn into the top edge of the screen.
+ *
+ * Hardware rather than chrome, so it is drawn whether or not `systemUi` is on —
+ * a phone does not stop having a camera because the status bar was turned off.
+ * It sits over the screen rather than taking room from it, which is what the
+ * real thing does: the content runs underneath and the system inset keeps the
+ * words clear of it.
+ */
+export declare function MockupCutout({ notch, width }: {
+    notch: MPMockupNotch;
+    width: number;
+}): React.JSX.Element | null;
+/** What one system puts above and below the content. */
+export interface MPMockupChrome {
+    top: React.ReactNode;
+    bottom: React.ReactNode;
+    /** How much room each takes out of the screen, in screen pixels. */
+    insetTop: number;
+    insetBottom: number;
+}
+/**
+ * A system's own bars.
+ *
+ * Each takes its own room out of the screen rather than covering the content,
+ * so turning `systemUi` off gives the screen back to `children` rather than
+ * uncovering something that was hidden underneath.
+ *
+ * The bars are drawn out of this library's own roles — `surface`, `on-surface`
+ * — rather than out of each system's real colours, and that is the line this
+ * component keeps: the *hardware* is a photograph and has fixed colours, the
+ * *software* on the screen is a page and follows the page. A macOS menu bar
+ * that stayed light on a dark mockup would be a picture of somebody else's
+ * screenshot rather than a frame around yours.
+ */
+export declare function mockupChrome(options: {
+    os: MPMockupOs;
+    width: number;
+    notch: MPMockupNotch;
+}): MPMockupChrome;
+export {};

package/dist/internal/mockup.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as t,jsxs as e}from"react/jsx-runtime";const i={desktop:["macos","windows","linux"],tablet:["ipados","android"],mobile:["ios","android"]},s={desktop:"macos",tablet:"ipados",mobile:"ios"};export function resolveOs(t,e){return e&&i[t].includes(e)?e:s[t]}export function defaultNotch(t,e){return"mobile"!==t?"none":"ios"===e?"dynamic-island":"punch-hole"}export const RESOLUTIONS={mobile:{xs:{width:320,height:568},sm:{width:360,height:780},md:{width:390,height:844},lg:{width:414,height:896},xl:{width:430,height:932}},tablet:{xs:{width:744,height:1133},sm:{width:810,height:1080},md:{width:820,height:1180},lg:{width:1024,height:1366},xl:{width:1032,height:1376}},desktop:{xs:{width:1024,height:640},sm:{width:1280,height:800},md:{width:1440,height:900},lg:{width:1680,height:1050},xl:{width:1920,height:1200}}};const a={mobile:{thin:{side:10,top:10,bottom:10,radius:46},standard:{side:14,top:14,bottom:14,radius:52},thick:{side:12,top:62,bottom:82,radius:26}},tablet:{thin:{side:14,top:14,bottom:14,radius:28},standard:{side:22,top:22,bottom:22,radius:36},thick:{side:20,top:58,bottom:58,radius:22}},desktop:{thin:{side:10,top:10,bottom:10,radius:12},standard:{side:14,top:14,bottom:52,radius:16},thick:{side:20,top:20,bottom:72,radius:10}}},n={mobile:44,tablet:26,desktop:8};export function mockupMetrics(t){const{device:e,bezel:i,hardware:s,orientation:h,resolution:d}=t,o="desktop"!==e&&"landscape"===h?{width:d.height,height:d.width}:{width:d.width,height:d.height};if("none"===i)return{screen:o,body:o,frame:o,shell:{side:0,top:0,bottom:0,radius:n[e]},screenRadius:n[e],stand:null,laptop:null};const r=a[e][i],l={width:o.width+2*r.side,height:o.height+r.top+r.bottom};if("desktop"!==e)return{screen:o,body:l,frame:l,shell:r,screenRadius:Math.max(2,r.radius-r.side),stand:null,laptop:null};if("laptop"===s){const t={width:Math.round(1.14*l.width),height:Math.round(.028*l.height)+12,lipWidth:Math.round(.12*l.width)};return{screen:o,body:l,frame:{width:t.width,height:l.height+t.height},shell:r,screenRadius:Math.max(2,r.radius-r.side),stand:null,laptop:t}}const c={neckWidth:Math.round(.16*l.width),neckHeight:Math.round(.11*l.height),footWidth:Math.round(.42*l.width),footHeight:Math.max(8,Math.round(.018*l.height))};return{screen:o,body:l,frame:{width:Math.max(l.width,c.footWidth),height:l.height+c.neckHeight+c.footHeight},shell:r,screenRadius:Math.max(2,r.radius-r.side),stand:c,laptop:null}}export const FINISHES={graphite:{"--_mp-device":"#2f3033","--_mp-device-edge":"#131416"},silver:{"--_mp-device":"#d8d9dd","--_mp-device-edge":"#a3a5aa"},white:{"--_mp-device":"#f3f3f5","--_mp-device-edge":"#c8c9ce"}};export const HARDWARE="bg-(--_mp-device) ring-1 ring-(--_mp-device-edge) ring-inset";export function MockupCutout({notch:e,width:i}){if("none"===e)return null;if("punch-hole"===e){const e=Math.round(.032*i);return t("span",{"aria-hidden":"true",className:"absolute left-1/2 -translate-x-1/2 rounded-full bg-black",style:{top:.8*e,width:e,height:e}})}if("dynamic-island"===e){const e=Math.round(.09*i);return t("span",{"aria-hidden":"true",className:"absolute left-1/2 -translate-x-1/2 rounded-full bg-black",style:{top:.35*e,width:Math.round(.31*i),height:e}})}const s=Math.round(.075*i);return t("span",{"aria-hidden":"true",className:"absolute top-0 left-1/2 -translate-x-1/2 bg-black",style:{width:Math.round(.52*i),height:s,borderBottomLeftRadius:.6*s,borderBottomRightRadius:.6*s}})}function h({width:e,height:i,round:s}){return t("span",{className:"bg-mp-on-surface/38 shrink-0",style:{width:e,height:i,borderRadius:s?"9999px":.3*i}})}function d({widths:e,height:i,gap:s,round:a}){return t("span",{className:"flex items-center",style:{gap:s},children:e.map((e,s)=>t(h,{width:e,height:i,round:a},s))})}function o({height:i}){const s=Math.max(1,Math.round(.18*i));return e("span",{className:"flex items-end",style:{gap:.4*i},children:[t("span",{className:"flex items-end",style:{gap:.6*s},children:[.4,.6,.8,1].map(e=>t("span",{className:"bg-mp-on-surface rounded-[1px]",style:{width:s,height:i*e}},e))}),t("span",{className:"relative",style:{width:1.2*i,height:i},children:[1,.62,.26].map((e,a)=>t("span",{className:"border-mp-on-surface absolute bottom-0 left-1/2 -translate-x-1/2 rounded-t-full border-t",style:{width:1.2*i*e,height:i*e,borderWidth:2===a?.3*i:s}},e))}),e("span",{className:"flex items-center",style:{gap:.8*s},children:[t("span",{className:"border-mp-on-surface/60 relative rounded-[2px] border",style:{width:1.9*i,height:i,padding:.6*s},children:t("span",{className:"bg-mp-on-surface block h-full rounded-[1px]",style:{width:"68%"}})}),t("span",{className:"bg-mp-on-surface/60 rounded-r-[1px]",style:{width:s,height:.4*i}})]})]})}function r({size:i}){return e("span",{className:"flex items-center",style:{gap:1.6*i},children:[t("span",{className:"border-mp-on-surface rotate-45 border-b-2 border-l-2",style:{width:.6*i,height:.6*i}}),t("span",{className:"border-mp-on-surface rounded-full border-2",style:{width:.75*i,height:.75*i}}),t("span",{className:"border-mp-on-surface rounded-[2px] border-2",style:{width:.7*i,height:.7*i}})]})}export function mockupChrome(i){const{os:s,width:a,notch:n}=i,l=Math.max(10,Math.round(.035*a)),c=Math.round(.36*l),p=Math.round(.5*l),u="text-mp-on-surface pointer-events-none flex shrink-0 items-center";if("ios"===s||"ipados"===s||"android"===s){const i="none"===n?Math.round(1.3*l):Math.round(2.2*l),d=Math.round(1.4*l),m=e("span",{className:`${u} justify-between`,style:{height:i,paddingInline:2*p,paddingTop:"none"===n?0:Math.round(.6*l)},children:[t(h,{width:Math.round(1.4*l),height:c}),t(o,{height:c})]});return"android"===s?{top:m,bottom:t("span",{className:`${u} justify-center`,style:{height:Math.round(1.8*l)},children:t(r,{size:1.6*c})}),insetTop:i,insetBottom:Math.round(1.8*l)}:{top:m,bottom:t("span",{className:`${u} justify-center`,style:{height:d},children:t("span",{className:"bg-mp-on-surface/60 rounded-full",style:{width:Math.round(.36*a),height:Math.max(3,.28*c)}})}),insetTop:i,insetBottom:d}}if("macos"===s){const i=Math.round(.95*l),s=Math.round(2.1*l),a=Math.round(1.3*l);return{top:e("span",{className:`${u} bg-mp-surface-container/80 justify-between`,style:{height:i,paddingInline:1.5*p,gap:2*p},children:[e("span",{className:"flex items-center",style:{gap:p},children:[t("span",{className:"flex items-center",style:{gap:.7*p},children:["#ff5f57","#febc2e","#28c840"].map(e=>t("span",{className:"rounded-full",style:{width:c,height:c,background:e}},e))}),t(d,{widths:[3*c,2*c,2.4*c],height:c,gap:p})]}),t(d,{widths:[1.6*c,3*c],height:c,gap:p})]}),bottom:t("span",{className:`${u} justify-center`,style:{height:s},children:t("span",{className:"bg-mp-surface-container-high/80 flex items-center rounded-[18%]",style:{gap:p,padding:p},children:[0,1,2,3,4].map(e=>t(h,{width:a,height:a},e))})}),insetTop:i,insetBottom:s}}const m=Math.round(1.5*l),g=Math.round(.95*l);return"windows"===s?{top:null,bottom:e("span",{className:`${u} bg-mp-surface-container/85 justify-center`,style:{height:m,gap:1.5*p},children:[t("span",{className:"grid shrink-0",style:{width:g,height:g,gap:.14*g,gridTemplateColumns:"1fr 1fr"},children:[0,1,2,3].map(e=>t("span",{className:"bg-mp-on-surface/60 rounded-[1px]"},e))}),t(d,{widths:[g,g,g,g],height:g,gap:p})]}),insetTop:0,insetBottom:m}:{top:e("span",{className:`${u} bg-mp-surface-container/85 justify-between`,style:{height:m,paddingInline:2*p},children:[t(d,{widths:[3*c,2*c],height:c,gap:p}),t(h,{width:3.4*c,height:c}),t(d,{widths:[1.6*c,1.6*c,2.4*c],height:c,gap:p})]}),bottom:null,insetTop:m,insetBottom:0}}

package/dist/internal/page-layout.d.ts

@@ -15,7 +15,7 @@
  * stops being a column, whether a drawer is open, and how tall the bars are.
  */
 import * as React from 'react';
-import type { MPSide, MPVariant, MPWindowClass } from '../types.js';
+import type { MPElevation, MPSide, MPVariant, MPWindowClass } from '../types.js';
 /**
  * Which end of the band a sidebar takes.
  *
@@ -109,18 +109,25 @@ export declare const MPPageLayoutContext: React.Context<MPPageLayoutContextValue
  */
 export declare const MPSidebarSideContext: React.Context<MPSidebarSide | null>;
 /**
- * The same four widths as classes, for the part of this that is decided in CSS
+ * The same boundaries as classes, for the part of this that is decided in CSS
  * rather than in JavaScript.
  *
- * `COLLAPSED_ONLY` hides something from the breakpoint *up*, which is what a
+ * `COLLAPSED_ONLY` hides something from the class *up*, which is what a
  * sidebar's own trigger wants: the button exists exactly while the column does
  * not. `EXPANDED_ONLY` hides it below, which is what the column wants for the
  * one paint between the server's markup arriving and JavaScript finding out how
  * wide the window is — without it a phone draws a full-width sidebar and throws
  * it away a moment later.
  *
- * Written out per class because Tailwind finds classes by scanning source text:
- * an interpolated `max-[${width}px]:hidden` generates no rule at all.
+ * These were four arbitrary variants each — `min-[600px]:hidden` and its
+ * mirror — which is to say two more copies of the four widths, sitting a few
+ * lines under the copy that has just been removed. They are `internal/visibility.ts`
+ * now, and the same classes `MPShow` puts on: one vocabulary for "not at this
+ * width", so a sidebar and a bottom bar written against each other cannot part
+ * company at one of them.
+ *
+ * `none` is the only value that is not a window size class. A sidebar that never
+ * collapses has a trigger that is never shown and a column that always is.
  */
 export declare const COLLAPSED_ONLY: Record<MPPageCollapse, string>;
 export declare const EXPANDED_ONLY: Record<MPPageCollapse, string>;
@@ -180,3 +187,15 @@ export declare function drawerSide(side: MPSidebarSide): MPSide;
  * `surface` — which is why it is what a bar defaults to.
  */
 export declare const BAR_SURFACE: Record<MPVariant, string>;
+/**
+ * What a bar paints, from whichever of `variant` and `elevation` answered.
+ *
+ * `containerSurface`'s rule, with the one difference a bar has: `outlined` does not
+ * draw a hairline round it — the rule under a top app bar belongs to the bar's
+ * own edge treatment — so a level replaces the surface outright whatever the
+ * variant was.
+ *
+ * A bar's `elevated` is level 2 rather than 1, because a bar sits over the
+ * page's content rather than in it. An explicit level says what it says.
+ */
+export declare function barSurface(variant: MPVariant, elevation: MPElevation | undefined): string;

package/dist/internal/page-layout.js

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";export const MPPageLayoutContext=/*@__PURE__*/e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const MPSidebarSideContext=/*@__PURE__*/e.createContext(null);const n={none:null,compact:null,medium:"(width < 600px)",expanded:"(width < 840px)",large:"(width < 1200px)","extra-large":"(width < 1600px)"};export const COLLAPSED_ONLY={none:"hidden",compact:"hidden",medium:"min-[600px]:hidden",expanded:"min-[840px]:hidden",large:"min-[1200px]:hidden","extra-large":"min-[1600px]:hidden"};export const EXPANDED_ONLY={none:"",compact:"",medium:"max-[600px]:hidden",expanded:"max-[840px]:hidden",large:"max-[1200px]:hidden","extra-large":"max-[1600px]:hidden"};export function useMPCollapsed(t){const d=n[t],a=e.useCallback(e=>{if(!d||"undefined"==typeof window||!window.matchMedia)return()=>{};const n=window.matchMedia(d);return n.addEventListener("change",e),()=>n.removeEventListener("change",e)},[d]),o=e.useCallback(()=>!(!d||"undefined"==typeof window||!window.matchMedia)&&window.matchMedia(d).matches,[d]);return e.useSyncExternalStore(a,o,()=>!1)}export function drawerSide(e){const n="undefined"!=typeof document&&"rtl"===document.documentElement.dir;return"start"===e?n?"right":"left":n?"left":"right"}export const BAR_SURFACE={filled:"bg-mp-surface-container-highest",tonal:"bg-mp-surface-container",elevated:"shadow-mp-2 bg-mp-surface-container-low",outlined:"bg-mp-surface",text:"bg-transparent"};
+import*as e from"react";import{HIDDEN_BELOW as t,HIDDEN_FROM as n}from"./visibility.js";import{below as r,useWindowMins as o}from"./window-class.js";import{ELEVATION_SURFACE as a}from"./elevation.js";export const MPPageLayoutContext=/*@__PURE__*/e.createContext({present:!1,register:()=>{},collapseBelow:"none",open:{start:!1,end:!1},setOpen:()=>{},scroll:"page"});export const MPSidebarSideContext=/*@__PURE__*/e.createContext(null);export const COLLAPSED_ONLY={none:"hidden",compact:n.compact,medium:n.medium,expanded:n.expanded,large:n.large,"extra-large":n["extra-large"]};export const EXPANDED_ONLY={none:"",compact:t.compact,medium:t.medium,expanded:t.expanded,large:t.large,"extra-large":t["extra-large"]};export function useMPCollapsed(t){const n=o(),a=r("none"===t?0:n[t]),d=e.useCallback(e=>{if(!a||"undefined"==typeof window||!window.matchMedia)return()=>{};const t=window.matchMedia(a);return t.addEventListener("change",e),()=>t.removeEventListener("change",e)},[a]),i=e.useCallback(()=>!(!a||"undefined"==typeof window||!window.matchMedia)&&window.matchMedia(a).matches,[a]);return e.useSyncExternalStore(d,i,()=>!1)}export function drawerSide(e){const t="undefined"!=typeof document&&"rtl"===document.documentElement.dir;return"start"===e?t?"right":"left":t?"left":"right"}export const BAR_SURFACE={filled:"bg-mp-surface-container-highest",tonal:"bg-mp-surface-container",elevated:"shadow-mp-2 bg-mp-surface-container-low",outlined:"bg-mp-surface",text:"bg-transparent"};export function barSurface(e,t){return void 0===t?BAR_SURFACE[e]:a[t]}

package/dist/internal/responsive.d.ts

@@ -0,0 +1,55 @@
+/**
+ * The one shape a value that changes with the window is written in.
+ *
+ * `MPResponsive<T>` in `src/types.ts` is the type — a value, or a map keyed by
+ * window size class, each entry applying from its own class upward. This is what
+ * turns one of those into something the stylesheet can read, and it is a module
+ * rather than three functions inside `MPGrid` because the grid stopped being the
+ * only component with a responsive prop.
+ *
+ * ## Why a custom property and not a class
+ *
+ * Because the values are arithmetic a caller picks at runtime. A column is
+ * `(100% + gutter) * span / columns - gutter` and a measure is whatever length
+ * was asked for; Tailwind finds classes by scanning source text, so an
+ * interpolated `w-[${n}]` generates no rule at all. The rules are therefore
+ * written once in `src/styles.css` and the per-instance numbers arrive as inline
+ * `--_mp-{name}-{class}` slots, exactly as a `color` reaches a background.
+ *
+ * The other half of that decision is what a media query can do that React
+ * cannot: an inherited custom property changes at a boundary without anything
+ * re-rendering, so the value a component lays itself out against is always the
+ * one that is actually on screen. A responsive prop resolved in JavaScript would
+ * be a subtree re-rendering at every window class to say the same thing, and a
+ * first paint on the server that has to be corrected afterwards.
+ *
+ * ## Why only the classes that were named
+ *
+ * `span={{ expanded: 6 }}` writes one custom property and not five. The gaps are
+ * filled in by the stylesheet, which falls each class back to the one below it —
+ * see the rungs in `src/styles.css`. That keeps the `style` attribute down to
+ * what was asked for, which is the difference between a list of two hundred rows
+ * carrying one declaration each and carrying five.
+ */
+import type * as React from 'react';
+import type { MPResponsive, MPWindowClass } from '../types.js';
+/** A bare value means "from `compact` up"; a map is already per class. */
+export declare function classMap<T>(value: MPResponsive<T> | undefined): Partial<Record<MPWindowClass, T>>;
+/**
+ * Turns a responsive value into the `--_mp-{name}-{class}` slots the stylesheet
+ * reads, writing only the classes the caller actually named.
+ *
+ * `toCss` is the component's own, because what a number means is the component's
+ * business: a span is a count, a gutter is a length on Tailwind's spacing scale,
+ * a measure is either a rung of the size ladder or a length said outright.
+ */
+export declare function responsiveSlots<T>(name: string, value: MPResponsive<T> | undefined, toCss: (value: T) => string): React.CSSProperties;
+/**
+ * Fills the `compact` entry of a partial map in with the prop's own default.
+ *
+ * Without this, `spacing={{ expanded: 8 }}` would be a grid with no gutter at all
+ * below 840dp — the stylesheet's `0px` fallback rather than the documented 4 —
+ * and a caller who widened one class would silently lose every class under it. A
+ * map says "from here up, this instead"; it does not say "and nothing below".
+ */
+export declare function withBaseline<T>(value: MPResponsive<T> | undefined, baseline: T): MPResponsive<T>;

package/dist/internal/responsive.js

@@ -0,0 +1 @@
+import{WINDOW_CLASSES as o}from"./window-class.js";export function classMap(o){return null==o?{}:"object"==typeof o?o:{compact:o}}export function responsiveSlots(t,n,c){const e=classMap(n),s={};for(const n of o){const o=e[n];void 0!==o&&(s[`--_mp-${t}-${n}`]=c(o))}return s}export function withBaseline(o,t){return null==o?t:"object"==typeof o?{compact:t,...o}:o}

package/dist/internal/scale.d.ts

@@ -116,23 +116,6 @@ export declare const SHEET_TITLE: Record<MPSize, string>;
 export declare const SHEET_GAP: Record<MPSize, string>;
 /** The gap between a control and the text stacked above or below it. */
 export declare const STACK_GAP: Record<MPSize, string>;
-/**
- * The measure — how wide a row of content is allowed to get — in `rem` and
- * pinned to MD3's window size class boundaries: 600, 840, 1200 and 1600dp, with
- * one rung below them.
- *
- * So `maxWidth="md"` is "never wider than a medium window", which is a sentence
- * about the specification rather than a number somebody liked. Tailwind's own
- * `max-w-*` scale is a different set — `max-w-lg` is 32rem — and two ladders
- * called `lg` on one page is how a layout drifts by a few pixels for no reason
- * anybody can find later.
- *
- * It is here rather than in `MPContainer`, which was its first reader, for the
- * reason at the top of this file: a header, a footer and a container that hold
- * their content to "a medium window" have to agree on where that edge is, or the
- * bar and the article under it line up at every width but one.
- */
-export declare const MEASURE: Record<MPSize, string>;
 /**
  * Whether a slot was given something worth drawing a wrapper around.
  *

package/dist/internal/scale.js

@@ -1 +1 @@
-export const CONTROL_HEIGHT={xs:"h-8",sm:"h-10",md:"h-14",lg:"h-16",xl:"h-18"};export const CONTROL_SQUARE={xs:"size-8",sm:"size-10",md:"size-14",lg:"size-16",xl:"size-18"};export const CONTROL_TEXT={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-title-medium",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};export const CONTROL_PAD_X={xs:"px-3",sm:"px-4",md:"px-6",lg:"px-8",xl:"px-10"};export const CONTROL_GAP={xs:"gap-1.5",sm:"gap-2",md:"gap-2",lg:"gap-2.5",xl:"gap-3"};export const CONTROL_ICON={xs:16,sm:18,md:20,lg:22,xl:24};export const PROSE_TEXT={xs:"text-mp-body-medium",sm:"text-mp-body-medium",md:"text-mp-body-large",lg:"text-mp-body-large",xl:"text-mp-body-large"};export const META_TEXT="text-mp-body-small";export const SHEET_PAD={xs:"p-2.5",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"};export const SHEET_PAD_X={xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"};export const SHEET_PAD_Y={xs:"py-2.5",sm:"py-3",md:"py-4",lg:"py-5",xl:"py-6"};export const SHEET_TITLE={xs:"text-mp-title-small",sm:"text-mp-title-small",md:"text-mp-title-medium",lg:"text-mp-title-large",xl:"text-mp-headline-small"};export const SHEET_GAP={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const STACK_GAP={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export const MEASURE={xs:"max-w-[30rem]",sm:"max-w-[37.5rem]",md:"max-w-[52.5rem]",lg:"max-w-[75rem]",xl:"max-w-[100rem]"};export function hasContent(t){return null!=t&&!1!==t&&""!==t}
+export const CONTROL_HEIGHT={xs:"h-8",sm:"h-10",md:"h-14",lg:"h-16",xl:"h-18"};export const CONTROL_SQUARE={xs:"size-8",sm:"size-10",md:"size-14",lg:"size-16",xl:"size-18"};export const CONTROL_TEXT={xs:"text-mp-label-large",sm:"text-mp-label-large",md:"text-mp-title-medium",lg:"text-mp-title-medium",xl:"text-mp-title-medium"};export const CONTROL_PAD_X={xs:"px-3",sm:"px-4",md:"px-6",lg:"px-8",xl:"px-10"};export const CONTROL_GAP={xs:"gap-1.5",sm:"gap-2",md:"gap-2",lg:"gap-2.5",xl:"gap-3"};export const CONTROL_ICON={xs:16,sm:18,md:20,lg:22,xl:24};export const PROSE_TEXT={xs:"text-mp-body-medium",sm:"text-mp-body-medium",md:"text-mp-body-large",lg:"text-mp-body-large",xl:"text-mp-body-large"};export const META_TEXT="text-mp-body-small";export const SHEET_PAD={xs:"p-2.5",sm:"p-3",md:"p-4",lg:"p-5",xl:"p-6"};export const SHEET_PAD_X={xs:"px-2.5",sm:"px-3",md:"px-4",lg:"px-5",xl:"px-6"};export const SHEET_PAD_Y={xs:"py-2.5",sm:"py-3",md:"py-4",lg:"py-5",xl:"py-6"};export const SHEET_TITLE={xs:"text-mp-title-small",sm:"text-mp-title-small",md:"text-mp-title-medium",lg:"text-mp-title-large",xl:"text-mp-headline-small"};export const SHEET_GAP={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const STACK_GAP={xs:"gap-0.5",sm:"gap-0.5",md:"gap-1",lg:"gap-1",xl:"gap-1.5"};export function hasContent(t){return null!=t&&!1!==t&&""!==t}

package/dist/internal/step.d.ts

@@ -51,6 +51,21 @@ export declare const BULLET_GAP: Record<MPSize, string>;
 export declare const ITEM_GAP: Record<MPSize, string>;
 /** The same ladder across, for the horizontal form. */
 export declare const ITEM_GAP_X: Record<MPSize, string>;
+/**
+ * What everything that changes with a step's status eases on.
+ *
+ * The bullet always had this. The line leaving it and the title beside it did
+ * not, so advancing a stepper drew one event twice: a bullet filling with the
+ * accent over 200ms, and a connector and a heading arriving at their new colours
+ * in the frame the state changed. A sequence is read across, and the half of it
+ * that snapped was the half that carries the eye to the next step.
+ *
+ * `border-color` and `color` rather than a blanket `transition-colors`, which
+ * would also put the `background-color` and the `box-shadow` of the three-line
+ * `BULLET` table on every connector — a line has neither, and a transition
+ * listing a property nothing declares is a declaration the browser keeps.
+ */
+export declare const STEP_MOTION: string;
 export declare const BORDER_STYLE: Record<MPStepConnector, string>;
 /**
  * The bullet at each of the three states.

package/dist/internal/step.js

@@ -1 +1 @@
-export const BULLET_SIZE={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"};export const BULLET_GAP={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const ITEM_GAP={xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"};export const ITEM_GAP_X={xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"};export const BORDER_STYLE={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""};export const BULLET={complete:"bg-(--_mp-accent) text-(--_mp-on-accent)",current:"bg-(--_mp-accent) text-(--_mp-on-accent) shadow-[0_0_0_0.25rem_var(--_mp-accent-container)]",upcoming:"border-mp-outline text-mp-on-surface-variant border-2 bg-transparent"};export const CONNECTOR_COLOR={complete:"border-(--_mp-accent)",current:"border-mp-outline-variant",upcoming:"border-mp-outline-variant"};export const TITLE_COLOR={complete:"text-mp-on-surface",current:"text-(--_mp-accent)",upcoming:"text-mp-on-surface-variant"};
+export const BULLET_SIZE={xs:"0.875rem",sm:"1rem",md:"1.25rem",lg:"1.5rem",xl:"1.875rem"};export const BULLET_GAP={xs:"gap-2",sm:"gap-2.5",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const ITEM_GAP={xs:"pb-5",sm:"pb-6",md:"pb-7",lg:"pb-8",xl:"pb-10"};export const ITEM_GAP_X={xs:"pe-5",sm:"pe-6",md:"pe-7",lg:"pe-8",xl:"pe-10"};export const STEP_MOTION=/*@__PURE__*/["transition-[border-color,color]","duration-(--mp-sys-motion-duration-short4)","ease-mp-standard"].join(" ");export const BORDER_STYLE={solid:"border-solid",dashed:"border-dashed",dotted:"border-dotted",none:""};export const BULLET={complete:"bg-(--_mp-accent) text-(--_mp-on-accent)",current:"bg-(--_mp-accent) text-(--_mp-on-accent) shadow-[0_0_0_0.25rem_var(--_mp-accent-container)]",upcoming:"border-mp-outline text-mp-on-surface-variant border-2 bg-transparent"};export const CONNECTOR_COLOR={complete:"border-(--_mp-accent)",current:"border-mp-outline-variant",upcoming:"border-mp-outline-variant"};export const TITLE_COLOR={complete:"text-mp-on-surface",current:"text-(--_mp-accent)",upcoming:"text-mp-on-surface-variant"};

package/dist/internal/table.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import type { MPDensity, MPSize } from '../types.js';
+/**
+ * The cell padding at a density step: two pixels off each face, which is MD3's
+ * four off the row.
+ *
+ * The two axes bottom out in different places because they are answering
+ * different questions. Sideways it is the room between one column and the next,
+ * and 6px is where two numbers start touching. Vertically it is the row height,
+ * and 4px is what keeps the shortest row — `body-small`'s 16px line box at `xs`
+ * — on the 24px floor `MPDensity` names.
+ */
+export declare function cellPadX(size: MPSize, density: MPDensity): string;
+export declare function cellPadY(size: MPSize, density: MPDensity): string;
+/**
+ * What a cell is set in. MD3's data table puts its cells in `body-medium` and
+ * its column headings in `title-small` — 14px at weight 500, which is the same
+ * size one weight up, so a heading reads as a heading without changing the
+ * column's measure.
+ */
+export declare const CELL_TEXT: Record<MPSize, string>;
+export declare const HEAD_TEXT: Record<MPSize, string>;
+/**
+ * A row's own background, read from a slot rather than written inline.
+ *
+ * Everything else about a cell is inline because a host stylesheet outranks a
+ * utility — but a row has a *hover* state, and an inline style has no `:hover`.
+ * A custom property is the way out: the host cannot see it, so a one-class
+ * variant sets it without a fight, and the inline `background-color` on the row
+ * just reads whatever it currently holds.
+ */
+export declare const ROW: string;
+/**
+ * A cell's raw value, if React can draw it, and nothing if it cannot.
+ *
+ * Without `render`, a cell is `row[column.key]` — and `Row` is the caller's own
+ * type, so that value is genuinely anything. A `Date`, a nested object, a `Map`:
+ * handed to React each of them throws *Objects are not valid as a React child*,
+ * from inside a `.map()` in a `<tbody>`, which takes down the table and every
+ * boundary above it. One unexpected column in an API response was a blank page.
+ *
+ * A blank cell is the honest answer to "this is not text". The column already
+ * has `render` for the case where it is something else, and the prop docs
+ * already say so — what was missing is that failing to reach for it cost the
+ * whole page rather than one cell.
+ *
+ * The list is what React itself will draw: strings, numbers, bigints, and the
+ * three nothings. `null`, `undefined` and `boolean` are already nothing to
+ * React, and are passed through rather than filtered so that the `false` a
+ * `condition && value` leaves behind stays as harmless here as it is anywhere
+ * else in this library.
+ */
+export declare function drawableCell(value: unknown): React.ReactNode;

package/dist/internal/table.js

@@ -0,0 +1 @@
+import*as t from"react";const e={xs:10,sm:12,md:16,lg:20,xl:24},m={xs:6,sm:10,md:16,lg:20,xl:24};function l(t){return t/16+"rem"}export function cellPadX(t,m){return l(Math.max(6,e[t]+2*m))}export function cellPadY(t,e){return l(Math.max(4,m[t]+2*e))}export const CELL_TEXT={xs:"text-mp-body-small",sm:"text-mp-body-small",md:"text-mp-body-medium",lg:"text-mp-body-medium",xl:"text-mp-body-large"};export const HEAD_TEXT={xs:"text-mp-label-medium",sm:"text-mp-label-medium",md:"text-mp-title-small",lg:"text-mp-title-small",xl:"text-mp-title-medium"};export const ROW=/*@__PURE__*/["[--_mp-row:transparent]","transition-[background-color] duration-(--mp-sys-motion-duration-short4)"].join(" ");export function drawableCell(e){if(null==e)return null;const m=typeof e;return"string"===m||"number"===m||"bigint"===m||"boolean"===m||t.isValidElement(e)?e:null}

package/dist/internal/text.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Where a character ends, and where a word does.
+ *
+ * One module, because the alternative is three. `MPAnimateTyping` counts
+ * characters, `MPAnimateScramble` replaces them and `MPAnimateSplit` hands each
+ * one its own delay, and every one of those has to agree about what a character
+ * *is*. Three copies would be three opinions, and they would only disagree on
+ * the text nobody tests with.
+ *
+ * ## Why not `[...text]`, and why not `split('')`
+ *
+ * A code point is not a character. `👩‍👩‍👧` is seven of them joined by zero-width
+ * joiners; `한` typed on a Korean keyboard can be three; a flag is two; an
+ * accented letter may be one or two depending on how the file was normalised.
+ * A typewriter that advances by code points spends four frames assembling an
+ * emoji out of parts that mean nothing on their own, and a splitter that does it
+ * hands a screen reader — or a `key` — a fragment that is not a character.
+ *
+ * `split('')` is worse again: it splits by UTF-16 code *unit*, so it halves
+ * every astral character into two lone surrogates, which render as `�`.
+ *
+ * ## Why not `split(' ')` for words
+ *
+ * Because a word boundary is not a space anywhere east of Myanmar. Japanese,
+ * Chinese, Thai, Khmer and Lao write without them, so splitting on whitespace
+ * hands back the entire sentence as a single fragment — an effect that silently
+ * does nothing, in the languages where nobody testing it would notice.
+ *
+ * `Intl.Segmenter` knows both boundaries and is in every current engine. The
+ * fallbacks below are for a runtime that does not have it, and they are the
+ * naive answers rather than an attempt at a second implementation: something
+ * imperfect that runs beats an effect that throws.
+ */
+import * as React from 'react';
+/**
+ * The text a node carries, and nothing about its markup.
+ *
+ * Elements contribute nothing on purpose. There is no honest way to type out
+ * half of a link, or to scramble the third character of a `<strong>` and leave
+ * the emphasis intact — the effects that read this animate *text*, so what they
+ * take is text.
+ */
+export declare function textOf(node: React.ReactNode): string;
+/** The text split the way a reader would split it: by grapheme cluster. */
+export declare function graphemesOf(text: string, locale?: string): string[];
+/**
+ * The text split into words, with the space after each one kept on it.
+ *
+ * Kept rather than dropped, because a set of fragments that has thrown its
+ * whitespace away cannot be laid out again: joining with `' '` puts a space
+ * where a line break was and another one before a full stop. Each fragment
+ * carries what followed it, so the pieces still concatenate to the original.
+ *
+ * `isWordLike` is what separates a word from the punctuation and spacing
+ * between two of them, and the run of non-words after a word is folded onto it.
+ */
+export declare function wordsOf(text: string, locale?: string): string[];

package/dist/internal/text.js

@@ -0,0 +1 @@
+const e="undefined"!=typeof Intl&&"Segmenter"in Intl;export function textOf(e){return"string"==typeof e||"number"==typeof e?String(e):Array.isArray(e)?e.map(textOf).join(""):""}export function graphemesOf(t,n){if(!e)return[...t];return[...new Intl.Segmenter(n,{granularity:"grapheme"}).segment(t)].map(e=>e.segment)}export function wordsOf(t,n){if(!e)return t.match(/\S+\s*|\s+/g)??[];const r=new Intl.Segmenter(n,{granularity:"word"}),o=[];for(const e of r.segment(t))e.isWordLike||0===o.length?o.push(e.segment):o[o.length-1]+=e.segment;return o}

package/dist/internal/threshold.d.ts

@@ -0,0 +1,19 @@
+import type { MPColor, MPThreshold } from '../types.js';
+/**
+ * Where a reading changes colour, resolved once.
+ *
+ * A meter and a gauge are the same quantity in two shapes, and a page carrying
+ * both must not disagree about where the amber starts. That is the whole reason
+ * this is not a private function inside whichever component needed it first —
+ * two copies of a scan this short would agree until the day one of them was
+ * edited alone.
+ *
+ * It is a file of its own rather than a section of `internal/chart.ts` because
+ * `MPMeter` is not a chart: reaching into that module for six lines would hand
+ * a bar the scales, the path builders and the palette.
+ *
+ * Written as a scan rather than a sort, so the array is read in the order it
+ * was given. Thresholds are meant to be listed in ascending order, and quietly
+ * reordering them would hide the one call site that did not.
+ */
+export declare function thresholdColor(value: number, color: MPColor, thresholds: readonly MPThreshold[] | undefined): MPColor;

package/dist/internal/threshold.js

@@ -0,0 +1 @@
+export function thresholdColor(o,r,t){if(!t||0===t.length)return r;let e=r;for(const r of t)o>=r.from&&(e=r.color);return e}

package/dist/internal/time-scale.d.ts

@@ -0,0 +1,44 @@
+import type { ValueScale } from './chart.js';
+/**
+ * A scale for an axis of instants.
+ *
+ * `valueScale`'s 1-2-5-10 family is the right one for a count and exactly the
+ * wrong one for a moment: run on epoch milliseconds it produces a tick every
+ * 200,000,000 ms, which lands at 14:53:20 on an arbitrary Tuesday. Nobody reads
+ * that. Time is not decimal below the year — sixty, sixty, twenty-four, seven,
+ * twelve — so its steps are written down rather than derived.
+ *
+ * A file of its own because only the timeline needs it. The other seven charts
+ * would carry a calendar for nothing.
+ */
+/** The units a time axis is allowed to step in. */
+export type TimeUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';
+/** A value scale whose ticks are instants, plus the unit they step in. */
+export interface TimeScale extends ValueScale {
+    unit: TimeUnit;
+    count: number;
+}
+/**
+ * The scale an axis of instants runs on.
+ *
+ * The ends round outward to the step, exactly as `valueScale`'s do, so an axis
+ * of work starting on a Wednesday afternoon begins at midnight on the Wednesday
+ * rather than at the first task's start.
+ */
+export declare function timeScale(extent: {
+    min: number;
+    max: number;
+} | null, options?: {
+    min?: number;
+    max?: number;
+    tickCount?: number;
+}): TimeScale;
+/**
+ * A tick written at the resolution its step implies.
+ *
+ * An axis stepping in hours writes clock times and one stepping in months
+ * writes month names. Writing the whole instant at every step would be an axis
+ * of identical strings differing in one field, which is the least readable form
+ * of a date there is.
+ */
+export declare function formatTimeTick(value: number, unit: TimeUnit, locale: string | undefined): string;