material-plus-ui 1.5.0 → 1.7.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/progress.d.ts

@@ -43,6 +43,20 @@ export interface MPProgressProps {
     max?: number;
     /** A name for what is loading. Read out with the value by a screen reader. */
     label?: React.ReactNode;
+    /**
+     * Keeps that name for a screen reader and takes it off the screen.
+     *
+     * For the indicator that is already labelled by what is around it — a spinner
+     * inside a card whose heading says what is loading, a bar under a filename.
+     * Drawing the name a second time is noise a sighted reader has to skip;
+     * *removing* it leaves a `progressbar` announced as "63%" and nothing else,
+     * which is a number with no subject.
+     *
+     * This is the third option, and it is the one the old `aria-label` was: the
+     * name stays in the accessibility tree and stops taking a line.
+     * @default false
+     */
+    hideLabel?: boolean;
     /**
      * Shows the value as text beside the shape. A percentage of the range unless
      * `format` says otherwise.

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

@@ -0,0 +1,86 @@
+/**
+ * The bullet, the connector and the ladder they are drawn on — written once for
+ * the two components that draw a numbered sequence.
+ *
+ * `MPTimeline` shows a sequence that **happened**; `MPStepper` drives one that
+ * is being **worked through**. They are two components because those are two
+ * jobs — one is read and the other is pressed — but they are the same picture,
+ * and a picture kept by two tables is a picture that drifts the first time one
+ * of them is edited alone. That is the argument `scale.ts` makes about the size
+ * ladder, applied to a smaller thing.
+ *
+ * What is *not* here is anything either one decides on its own: the timeline's
+ * `meta` line, the stepper's reachability. Those are not shared and putting them
+ * here would make this a third component nobody renders.
+ */
+import type { MPSize } from '../types.js';
+/**
+ * How far a step has got.
+ *
+ * Three rather than more, and `error` is deliberately not among them —
+ * `MPStepper` draws a failed step by swapping the accent family for `error`,
+ * which is one axis rather than a fourth state every table below would have to
+ * grow a row for. The three are about *position in the sequence*; the colour is
+ * about what happened.
+ */
+export type MPStepStatus = 'complete' | 'current' | 'upcoming';
+/** How the line between two steps is drawn. `none` leaves the gap open. */
+export type MPStepConnector = 'solid' | 'dashed' | 'dotted' | 'none';
+/**
+ * The bullet.
+ *
+ * Its own ladder rather than a step off `CONTROL_HEIGHT`, for the reason a
+ * checkbox's tick has one: a bullet is not a control you can put a label inside.
+ * It is a mark beside one, sized against the title next to it.
+ *
+ * It is written as a custom property rather than as a class because the
+ * connector has to know it: the line is centred on the bullet, and centring is
+ * arithmetic on this number.
+ */
+export declare const BULLET_SIZE: Record<MPSize, string>;
+/** Between the bullet column and the content beside it. */
+export declare const BULLET_GAP: Record<MPSize, string>;
+/**
+ * How far apart two steps sit.
+ *
+ * The floor is set by the step with nothing in it. A step that is only a title
+ * and a time is one line tall, so the gap is the *whole* of what separates it
+ * from the next one — where a step with a paragraph under it has the paragraph's
+ * own leading working for it as well.
+ */
+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.
+ *
+ * Every one of them is a different axis, never a different opacity: `complete`
+ * is filled with the accent under its own ink, `current` is the same fill with a
+ * halo of the container tone around it, and `upcoming` is a hairline ring on the
+ * page's own surface. A reader who cannot tell the colours apart still has a
+ * filled shape, a haloed shape and an empty one.
+ */
+export declare const BULLET: Record<MPStepStatus, string>;
+/**
+ * The line *after* a step, which is what makes it the step's own property: a
+ * connector is coloured by whether the step it leaves has been reached, not by
+ * where it arrives.
+ */
+export declare const CONNECTOR_COLOR: Record<MPStepStatus, string>;
+export declare const TITLE_COLOR: Record<MPStepStatus, string>;

package/dist/internal/step.js

@@ -0,0 +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 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;

package/dist/internal/time-scale.js

@@ -0,0 +1 @@
+const e=1e3,t=6e4,n=36e5,o=24*n,s=[{unit:"second",count:1,size:e},{unit:"second",count:5,size:5e3},{unit:"second",count:15,size:15e3},{unit:"second",count:30,size:3e4},{unit:"minute",count:1,size:t},{unit:"minute",count:5,size:3e5},{unit:"minute",count:15,size:9e5},{unit:"minute",count:30,size:18e5},{unit:"hour",count:1,size:n},{unit:"hour",count:3,size:3*n},{unit:"hour",count:6,size:6*n},{unit:"hour",count:12,size:12*n},{unit:"day",count:1,size:o},{unit:"day",count:2,size:2*o},{unit:"week",count:1,size:7*o},{unit:"month",count:1,size:30*o},{unit:"month",count:3,size:91*o},{unit:"year",count:1,size:365*o}];function u(e,t,n){const o=new Date(e);switch(t){case"second":o.setSeconds(o.getSeconds()+n);break;case"minute":o.setMinutes(o.getMinutes()+n);break;case"hour":o.setHours(o.getHours()+n);break;case"day":o.setDate(o.getDate()+n);break;case"week":o.setDate(o.getDate()+7*n);break;case"month":o.setMonth(o.getMonth()+n);break;default:o.setFullYear(o.getFullYear()+n)}return o.getTime()}function i(e,t,n){const o=function(e,t){const n=new Date(e);switch(t){case"second":n.setMilliseconds(0);break;case"minute":n.setSeconds(0,0);break;case"hour":n.setMinutes(0,0,0);break;case"day":n.setHours(0,0,0,0);break;case"week":n.setHours(0,0,0,0),n.setDate(n.getDate()-(n.getDay()+6)%7);break;case"month":n.setHours(0,0,0,0),n.setDate(1);break;default:n.setHours(0,0,0,0),n.setMonth(0,1)}return n.getTime()}(e,t);if(n<=1)return o;const s=new Date(o);switch(t){case"second":s.setSeconds(Math.floor(s.getSeconds()/n)*n);break;case"minute":s.setMinutes(Math.floor(s.getMinutes()/n)*n);break;case"hour":s.setHours(Math.floor(s.getHours()/n)*n);break;case"month":s.setMonth(Math.floor(s.getMonth()/n)*n);break;case"year":s.setFullYear(Math.floor(s.getFullYear()/n)*n)}return s.getTime()}export function timeScale(e,t={}){const{tickCount:a=6}=t,c=t.min??e?.min??Date.now(),r=t.max??e?.max??c+o,h=r-c||2*n,m=h/Math.max(1,a),d=s.reduce((e,t)=>Math.abs(Math.log(t.size/m))<Math.abs(Math.log(e.size/m))?t:e),l="year"===d.unit?function(e){const t=10**Math.floor(Math.log10(Math.max(1,e))),n=Math.max(1,e)/t;return n<=1?t:n<=2?2*t:n<=5?5*t:10*t}(h/(365*o)/a):d.count,M=void 0!==t.min?c:i(c,d.unit,l),g=void 0!==t.max?r:(()=>{let e=M;do{e=u(e,d.unit,l)}while(e<r);return e})(),k=g-M||1,z=[];for(let e=M;e<=g&&(z.push(e),!(z.length>500));e=u(e,d.unit,l));return{min:M,max:g,ticks:z,unit:d.unit,count:l,fraction:e=>(e-M)/k}}export function formatTimeTick(e,t,n){const o="second"===t?{minute:"2-digit",second:"2-digit"}:"minute"===t||"hour"===t?{hour:"numeric",minute:"2-digit"}:"day"===t||"week"===t?{month:"short",day:"numeric"}:"month"===t?{year:"numeric",month:"short"}:{year:"numeric"};return new Intl.DateTimeFormat(n,o).format(e)}

package/dist/internal/transition.d.ts

@@ -0,0 +1,33 @@
+import type * as React from 'react';
+import type { MPAnimation, MPEasing, MPTransition } from '../types.js';
+/**
+ * The class and the inline slots one transition comes to.
+ *
+ * Split from `transitionProps` because `MPStack` needs the *options* rather than
+ * the finished style: it has a per-child step to add to the delay before the
+ * slots are filled. One table read by both is what keeps `transition="fade"` the
+ * same fade on a card and on a stack item.
+ */
+export declare function transitionParts(transition: MPTransition | undefined): {
+    effect: MPAnimation;
+    duration?: number;
+    delay: number;
+    easing?: MPEasing;
+    opacity: number;
+    scale?: number;
+    x?: string;
+    y?: string;
+    angle?: string;
+    clip?: string;
+} | null;
+/**
+ * The same reading, as the two things a component spreads onto its root.
+ *
+ * Returns empty strings and an empty object rather than `null` for the common
+ * case, so a caller composes them unconditionally instead of branching around
+ * them at every call site.
+ */
+export declare function transitionProps(transition: MPTransition | undefined): {
+    className: string;
+    style: React.CSSProperties;
+};

package/dist/internal/transition.js

@@ -0,0 +1 @@
+import{ANIM_BASE as e,ANIMATION_CLASS as t,animationSlots as a,revealClip as o,slideOffsets as n}from"./animate-core.js";const r={grow:.8,zoom:.4};export function transitionParts(e){if(!e)return null;const t="string"==typeof e?{effect:e}:e,{effect:a}=t,s="slide"===a?n(t.from??"bottom",t.distance??"100%"):null;return{effect:a,duration:t.duration,delay:t.delay??0,easing:t.easing,opacity:!1===t.fade||"reveal"===a?1:0,scale:t.scale??r[a],x:s?.x,y:s?.y,angle:"rotate"===a?`${t.angle??-180}deg`:void 0,clip:"reveal"===a?o(t.from??"left"):void 0}}export function transitionProps(o){const n=transitionParts(o);return n?{className:`${e} ${t[n.effect]}`,style:a({...n,repeat:1})}:{className:"",style:{}}}

package/dist/internal/visibility.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Showing and hiding at a window size class, as class names.
+ *
+ * Two components need this and neither is really about it: `MPShow` is nothing
+ * but this, and `MPSidebar` uses it to keep a column off a narrow screen for the
+ * one paint before JavaScript has found out how wide the window is.
+ *
+ * ## Why it is CSS and not the hook
+ *
+ * `useMPWindowClass` could answer the same question, and a page that swapped a
+ * whole navigation pattern on it would be right — eventually. The correction is
+ * a second render, so the first paint is a guess, and on a phone that guess is a
+ * desktop sidebar drawn and thrown away. A media query has no first render to be
+ * wrong: the browser resolves it before it paints anything, on the server's own
+ * markup.
+ *
+ * The cost is that both branches are in the DOM. That is the trade, and it is
+ * the right way round for a nav bar or a column of filters and the wrong way
+ * round for a heavy subtree that only one width ever sees — which is where the
+ * hook earns its second render.
+ *
+ * ## Why the names are written out
+ *
+ * These are Tailwind's own `hidden`, under the variants `src/styles.css`
+ * registers. Tailwind finds classes by scanning source text, so
+ * `mp-${windowClass}:hidden` assembled at runtime generates no rule at all and
+ * the component comes out visible at every width. Ten literal strings is what
+ * that costs, and it is why these are tables rather than a function.
+ *
+ * A consumer can spell the same classes — they are in the shipped stylesheet
+ * either way.
+ */
+import type { MPWindowClass } from '../types.js';
+/**
+ * Hidden while the window is *narrower* than this class — "show from here up".
+ *
+ * `compact` is the empty string rather than a class: no window is narrower than
+ * compact, so there is nothing to hide it at.
+ */
+export declare const HIDDEN_BELOW: Record<MPWindowClass, string>;
+/**
+ * Hidden from this class *up* — "show until here", the upper bound.
+ *
+ * `compact` is a plain `hidden`, and that is not a special case being smuggled
+ * in: shown only below compact is shown nowhere, and the honest answer to a
+ * bound of zero is an element that never appears.
+ */
+export declare const HIDDEN_FROM: Record<MPWindowClass, string>;

package/dist/internal/visibility.js

@@ -0,0 +1 @@
+export const HIDDEN_BELOW={compact:"",medium:"mp-below-medium:hidden",expanded:"mp-below-expanded:hidden",large:"mp-below-large:hidden","extra-large":"mp-below-extra-large:hidden"};export const HIDDEN_FROM={compact:"hidden",medium:"mp-medium:hidden",expanded:"mp-expanded:hidden",large:"mp-large:hidden","extra-large":"mp-extra-large:hidden"};

package/dist/internal/window-class.d.ts

@@ -0,0 +1,48 @@
+import type { MPWindowClass } from '../types.js';
+/** Smallest first, which is also the order the media queries have to be in. */
+export declare const WINDOW_CLASSES: readonly MPWindowClass[];
+/**
+ * The width each class starts at, in CSS pixels.
+ *
+ * A class runs from its own entry up to the next one's, so the test is `>=` and
+ * the widest matching class wins. `compact` starts at zero because there is no
+ * window narrower than no window.
+ */
+export declare const WINDOW_MIN: Record<MPWindowClass, number>;
+/**
+ * The media query a floor is, and the one below it.
+ *
+ * A width rather than a class name, because the floors are no longer constants:
+ * whose ladder is being asked about is the caller's business and this only
+ * knows how to say one. Nought has no query — every window is at least that
+ * wide — and both return `null` there, which a caller reads as "there is nothing
+ * to watch".
+ */
+export declare function atLeast(min: number): string | null;
+export declare function below(min: number): string | null;
+/**
+ * The floors in force at this point in the tree.
+ *
+ * MD3's, with whatever an `MPConfigProvider` moved written over them. `compact`
+ * is forced back to nought whatever it was given: a class whose floor is above
+ * zero leaves a band of windows in no class at all.
+ *
+ * The object is rebuilt on every call rather than memoised, and deliberately —
+ * every caller turns it into a number or a string before doing anything with it,
+ * so its identity is never a dependency of anything. Memoising it would be a
+ * `useMemo` whose own dependency is the identity of a prop callers write inline.
+ */
+export declare function useWindowMins(): Record<MPWindowClass, number>;
+/**
+ * `useSyncExternalStore` rather than an effect and a `useState`, for the reason
+ * `useMPCollapsed` gives: the hook needs a **server snapshot**, and this is the
+ * one API that tells React the server's answer and the client's are meant to
+ * differ. An effect would render the wrong layout once and then correct it,
+ * which React would not know to expect.
+ *
+ * The ladder reaches the store as a string. Everything `useSyncExternalStore`
+ * is given has to be stable between renders or it resubscribes on each one, and
+ * a `breakpoints` prop written inline — which is how anybody would write it — is
+ * a new object every time its provider renders.
+ */
+export declare function useWindowClass(onServer: MPWindowClass): MPWindowClass;

package/dist/internal/window-class.js

@@ -0,0 +1,2 @@
+"use client";
+import*as t from"react";import{MPConfigContext as e}from"./config.js";export const WINDOW_CLASSES=["compact","medium","expanded","large","extra-large"];export const WINDOW_MIN={compact:0,medium:600,expanded:840,large:1200,"extra-large":1600};export function atLeast(t){return t>0?`(width >= ${t}px)`:null}export function below(t){return t>0?`(width < ${t}px)`:null}export function useWindowMins(){const{breakpoints:n}=t.useContext(e);return n?{...WINDOW_MIN,...n,compact:0}:WINDOW_MIN}const n={classes:[],lists:[]},o=new Map;function s(t){if("undefined"==typeof window||!window.matchMedia)return n;let e=o.get(t);if(!e){const n=t.split(",").map(Number),s=WINDOW_CLASSES.map((t,e)=>[t,n[e]]).filter(([,t])=>t>0);e={classes:s.map(([t])=>t),lists:s.map(([,t])=>window.matchMedia(atLeast(t)))},o.set(t,e)}return e}export function useWindowClass(e){const n=(o=useWindowMins(),WINDOW_CLASSES.map(t=>o[t]).join(","));var o;const r=t.useCallback(t=>function(t,e){const{lists:n}=s(t);for(const t of n)t.addEventListener("change",e);return()=>{for(const t of n)t.removeEventListener("change",e)}}(n,t),[n]),a=t.useCallback(()=>function(t,e){const{classes:n,lists:o}=s(t);if(0===o.length)return e;let r=WINDOW_CLASSES[0];return n.forEach((t,e)=>{o[e]?.matches&&(r=t)}),r}(n,e),[n,e]);return t.useSyncExternalStore(r,a,a)}