material-plus-ui 1.6.0 → 1.8.0

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 @@
+import{segmenter as t}from"./intl.js";const e={granularity:"grapheme"},r={granularity:"word"};export function textOf(t){return"string"==typeof t||"number"==typeof t?String(t):Array.isArray(t)?t.map(textOf).join(""):""}export function graphemesOf(r,n){const o=t(n,e);return o?[...o.segment(r)].map(t=>t.segment):[...r]}export function wordsOf(e,n){const o=t(n,r);if(!o)return e.match(/\S+\s*|\s+/g)??[];const s=[];for(const t of o.segment(e))t.isWordLike||0===s.length?s.push(t.segment):s[s.length-1]+=t.segment;return s}

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 @@
+import{dateTimeFormatter as e}from"./intl.js";const t=1e3,n=6e4,o=36e5,s=24*o,u=[{unit:"second",count:1,size:t},{unit:"second",count:5,size:5e3},{unit:"second",count:15,size:15e3},{unit:"second",count:30,size:3e4},{unit:"minute",count:1,size:n},{unit:"minute",count:5,size:3e5},{unit:"minute",count:15,size:9e5},{unit:"minute",count:30,size:18e5},{unit:"hour",count:1,size:o},{unit:"hour",count:3,size:3*o},{unit:"hour",count:6,size:6*o},{unit:"hour",count:12,size:12*o},{unit:"day",count:1,size:s},{unit:"day",count:2,size:2*s},{unit:"week",count:1,size:7*s},{unit:"month",count:1,size:30*s},{unit:"month",count:3,size:91*s},{unit:"year",count:1,size:365*s}];function i(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 a(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:n=6}=t,r=t.min??e?.min??Date.now(),c=t.max??e?.max??r+s,h=c-r||2*o,m=h/Math.max(1,n),d=u.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*s)/n):d.count,M=void 0!==t.min?r:a(r,d.unit,l),g=void 0!==t.max?c:(()=>{let e=M;do{e=i(e,d.unit,l)}while(e<c);return e})(),k=g-M||1,f=[];for(let e=M;e<=g&&(f.push(e),!(f.length>500));e=i(e,d.unit,l));return{min:M,max:g,ticks:f,unit:d.unit,count:l,fraction:e=>(e-M)/k}}export function formatTimeTick(t,n,o){return e(o,"second"===n?{minute:"2-digit",second:"2-digit"}:"minute"===n||"hour"===n?{hour:"numeric",minute:"2-digit"}:"day"===n||"week"===n?{month:"short",day:"numeric"}:"month"===n?{year:"numeric",month:"short"}:{year:"numeric"}).format(t)}

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

@@ -9,13 +9,40 @@ export declare const WINDOW_CLASSES: readonly MPWindowClass[];
  * window narrower than no window.
  */
 export declare const WINDOW_MIN: Record<MPWindowClass, number>;
-/** Which class a width falls in. Widest match wins. */
-export declare function windowClassFor(width: number): MPWindowClass;
+/**
+ * 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

@@ -1,2 +1,2 @@
 "use client";
-import*as e from"react";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 windowClassFor(e){let t="compact";for(const n of WINDOW_CLASSES)e>=WINDOW_MIN[n]&&(t=n);return t}let t=null;function n(){return"undefined"!=typeof window&&window.matchMedia?(t??=WINDOW_CLASSES.filter(e=>WINDOW_MIN[e]>0).map(e=>window.matchMedia(`(min-width: ${WINDOW_MIN[e]}px)`)),t):[]}function o(e){const t=n();for(const n of t)n.addEventListener("change",e);return()=>{for(const n of t)n.removeEventListener("change",e)}}export function useWindowClass(t){const r=e.useCallback(()=>function(e){const t=n();if(0===t.length)return e;let o="compact",r=0;for(const e of WINDOW_CLASSES)0!==WINDOW_MIN[e]&&(t[r]?.matches&&(o=e),r+=1);return o}(t),[t]);return e.useSyncExternalStore(o,r,r)}
+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)}

package/dist/locales/ar.js

@@ -1 +1 @@
-export const ar={locale:"ar",messages:{common:{close:"إغلاق",clear:"مسح",open:"فتح",remove:"إزالة",removeNamed:"إزالة {label}",loading:"جارٍ التحميل"},textField:{showPassword:"إظهار كلمة المرور",hidePassword:"إخفاء كلمة المرور"},empty:{title:"لا يوجد شيء هنا"},picker:{previousMonth:"الشهر السابق",nextMonth:"الشهر التالي",previousYear:"السنة السابقة",nextYear:"السنة التالية",previousYears:"السنوات السابقة",nextYears:"السنوات التالية",chooseMonth:"اختيار شهر",chooseYear:"اختيار سنة",today:"اليوم",thisMonth:"هذا الشهر",thisYear:"هذه السنة",now:"الآن",clear:"مسح",done:"تم",hour:"الساعة",minute:"الدقيقة",second:"الثانية",meridiem:"ص/م",start:"البداية",end:"النهاية"},numberField:{increase:"زيادة",decrease:"إنقاص"},carousel:{label:"عرض دوّار",previous:"الشريحة السابقة",next:"الشريحة التالية",slide:"الشريحة {index} من {total}"},breadcrumb:{label:"مسار التنقل",expand:"إظهار الخطوات المخفية"},combobox:{empty:"لا توجد نتائج",add:"إضافة ”{label}“"},table:{empty:"لا توجد بيانات"},filePicker:{prompt:"أفلِت الملفات هنا، أو انقر للاستعراض"},textLink:{newTab:"يُفتح في تبويب جديد"},overlay:{label:"طبقة تراكب"},alert:{dismiss:"إغلاق"},chat:{sending:"جارٍ الإرسال",sent:"تم الإرسال",delivered:"تم التسليم",read:"تمت القراءة",failed:"لم يتم الإرسال",typing:"يكتب الآن"},spoiler:{reveal:"إظهار",hide:"إخفاء",notice:"مخفي حتى لا يُقرأ بالخطأ"},pagination:{label:"ترقيم الصفحات",page:"الصفحة {page}",status:"الصفحة {page} من {total}",previous:"الصفحة السابقة",next:"الصفحة التالية",first:"الصفحة الأولى",last:"الصفحة الأخيرة"},rating:{label:"التقييم",value:"{value} من {max}",empty:"بدون تقييم"},colorPicker:{area:"التشبع والسطوع",hue:"درجة اللون",alpha:"العتامة",value:"قيمة اللون",swatches:"ألوان جاهزة",clear:"مسح",empty:"بلا لون"},transfer:{source:"المتاح",target:"المحدد",toTarget:"النقل إلى المحدد",toSource:"الإرجاع إلى المتاح",search:"بحث",empty:"لا شيء هنا"},command:{label:"لوحة الأوامر",search:"اكتب أمراً أو ابحث…",empty:"لا توجد أوامر مطابقة"},layout:{skipToContent:"تخطٍ إلى المحتوى",sidebar:"الشريط الجانبي",openSidebar:"فتح الشريط الجانبي",closeSidebar:"إغلاق الشريط الجانبي",resizeSidebar:"تغيير عرض الشريط الجانبي"},confirm:{confirm:"تأكيد",cancel:"إلغاء",ok:"حسنًا"}}};
+export const ar={locale:"ar",messages:{common:{close:"إغلاق",clear:"مسح",open:"فتح",remove:"إزالة",removeNamed:"إزالة {label}",loading:"جارٍ التحميل"},textField:{showPassword:"إظهار كلمة المرور",hidePassword:"إخفاء كلمة المرور"},empty:{title:"لا يوجد شيء هنا"},picker:{previousMonth:"الشهر السابق",nextMonth:"الشهر التالي",previousYear:"السنة السابقة",nextYear:"السنة التالية",previousYears:"السنوات السابقة",nextYears:"السنوات التالية",chooseMonth:"اختيار شهر",chooseYear:"اختيار سنة",today:"اليوم",thisMonth:"هذا الشهر",thisYear:"هذه السنة",now:"الآن",clear:"مسح",done:"تم",hour:"الساعة",minute:"الدقيقة",second:"الثانية",meridiem:"ص/م",start:"البداية",end:"النهاية"},numberField:{increase:"زيادة",decrease:"إنقاص"},carousel:{label:"عرض دوّار",previous:"الشريحة السابقة",next:"الشريحة التالية",slide:"الشريحة {index} من {total}"},scroll:{label:"محتوى قابل للتمرير",previous:"التمرير للخلف",next:"التمرير للأمام"},anchor:{label:"في هذه الصفحة"},code:{copy:"نسخ",copied:"تم النسخ",copyFailed:"تعذّر النسخ",raw:"النص الخام",label:"شفرة"},breadcrumb:{label:"مسار التنقل",expand:"إظهار الخطوات المخفية"},combobox:{empty:"لا توجد نتائج",add:"إضافة ”{label}“"},tour:{previous:"رجوع",next:"التالي",done:"تم",skip:"تخطي",position:"الخطوة {index} من {total}"},chart:{label:"مخطط",table:"بيانات المخطط",category:"الفئة"},sparkline:{summary:"نقاط: {count}، من {first} إلى {last}"},table:{empty:"لا توجد بيانات"},dataTable:{selectAll:"تحديد كل الصفوف",selectRow:"تحديد الصف",total:"الصفوف: {total}",selected:"المحدد: {count}",download:"تنزيل CSV",perPage:"صفوف لكل صفحة",resize:"تغيير عرض العمود"},filePicker:{prompt:"أفلِت الملفات هنا، أو انقر للاستعراض"},textLink:{newTab:"يُفتح في تبويب جديد"},overlay:{label:"طبقة تراكب"},alert:{dismiss:"إغلاق"},chat:{sending:"جارٍ الإرسال",sent:"تم الإرسال",delivered:"تم التسليم",read:"تمت القراءة",failed:"لم يتم الإرسال",typing:"يكتب الآن"},spoiler:{reveal:"إظهار",hide:"إخفاء",notice:"مخفي حتى لا يُقرأ بالخطأ"},pagination:{label:"ترقيم الصفحات",page:"الصفحة {page}",status:"الصفحة {page} من {total}",previous:"الصفحة السابقة",next:"الصفحة التالية",first:"الصفحة الأولى",last:"الصفحة الأخيرة"},rating:{label:"التقييم",value:"{value} من {max}",empty:"بدون تقييم"},colorPicker:{area:"التشبع والسطوع",hue:"درجة اللون",alpha:"العتامة",value:"قيمة اللون",swatches:"ألوان جاهزة",clear:"مسح",empty:"بلا لون"},transfer:{source:"المتاح",target:"المحدد",toTarget:"النقل إلى المحدد",toSource:"الإرجاع إلى المتاح",search:"بحث",empty:"لا شيء هنا",moved:"تم النقل إلى {list}: {count}"},command:{label:"لوحة الأوامر",search:"اكتب أمراً أو ابحث…",empty:"لا توجد أوامر مطابقة"},layout:{skipToContent:"تخطٍ إلى المحتوى",sidebar:"الشريط الجانبي",openSidebar:"فتح الشريط الجانبي",closeSidebar:"إغلاق الشريط الجانبي",resizeSidebar:"تغيير عرض الشريط الجانبي"},confirm:{confirm:"تأكيد",cancel:"إلغاء",ok:"حسنًا"}}};

package/dist/locales/de.js

@@ -1 +1 @@
-export const de={locale:"de",messages:{common:{close:"Schließen",clear:"Löschen",open:"Öffnen",remove:"Entfernen",removeNamed:"{label} entfernen",loading:"Wird geladen"},textField:{showPassword:"Passwort anzeigen",hidePassword:"Passwort verbergen"},empty:{title:"Nichts vorhanden"},picker:{previousMonth:"Voriger Monat",nextMonth:"Nächster Monat",previousYear:"Voriges Jahr",nextYear:"Nächstes Jahr",previousYears:"Vorige Jahre",nextYears:"Nächste Jahre",chooseMonth:"Monat auswählen",chooseYear:"Jahr auswählen",today:"Heute",thisMonth:"Dieser Monat",thisYear:"Dieses Jahr",now:"Jetzt",clear:"Löschen",done:"Fertig",hour:"Stunde",minute:"Minute",second:"Sekunde",meridiem:"AM/PM",start:"Beginn",end:"Ende"},numberField:{increase:"Erhöhen",decrease:"Verringern"},carousel:{label:"Karussell",previous:"Vorherige Folie",next:"Nächste Folie",slide:"Folie {index} von {total}"},breadcrumb:{label:"Brotkrümelnavigation",expand:"Ausgeblendete Schritte anzeigen"},combobox:{empty:"Keine Treffer",add:"„{label}“ hinzufügen"},table:{empty:"Keine Daten"},filePicker:{prompt:"Dateien hier ablegen oder zum Auswählen klicken"},textLink:{newTab:"Wird in einem neuen Tab geöffnet"},overlay:{label:"Overlay"},alert:{dismiss:"Schließen"},chat:{sending:"Wird gesendet",sent:"Gesendet",delivered:"Zugestellt",read:"Gelesen",failed:"Nicht gesendet",typing:"Schreibt"},spoiler:{reveal:"Anzeigen",hide:"Verbergen",notice:"Verborgen, damit es nicht versehentlich gelesen wird"},pagination:{label:"Seitennummerierung",page:"Seite {page}",status:"Seite {page} von {total}",previous:"Vorherige Seite",next:"Nächste Seite",first:"Erste Seite",last:"Letzte Seite"},rating:{label:"Bewertung",value:"{value} von {max}",empty:"Nicht bewertet"},colorPicker:{area:"Sättigung und Helligkeit",hue:"Farbton",alpha:"Deckkraft",value:"Farbwert",swatches:"Vorgegebene Farben",clear:"Löschen",empty:"Keine Farbe"},transfer:{source:"Verfügbar",target:"Ausgewählt",toTarget:"Zu Ausgewählt verschieben",toSource:"Zurück zu Verfügbar",search:"Suchen",empty:"Nichts vorhanden"},command:{label:"Befehlspalette",search:"Befehl eingeben oder suchen…",empty:"Keine Befehle gefunden"},layout:{skipToContent:"Zum Inhalt springen",sidebar:"Seitenleiste",openSidebar:"Seitenleiste öffnen",closeSidebar:"Seitenleiste schließen",resizeSidebar:"Seitenleiste anpassen"},confirm:{confirm:"Bestätigen",cancel:"Abbrechen",ok:"OK"}}};
+export const de={locale:"de",messages:{common:{close:"Schließen",clear:"Löschen",open:"Öffnen",remove:"Entfernen",removeNamed:"{label} entfernen",loading:"Wird geladen"},textField:{showPassword:"Passwort anzeigen",hidePassword:"Passwort verbergen"},empty:{title:"Nichts vorhanden"},picker:{previousMonth:"Voriger Monat",nextMonth:"Nächster Monat",previousYear:"Voriges Jahr",nextYear:"Nächstes Jahr",previousYears:"Vorige Jahre",nextYears:"Nächste Jahre",chooseMonth:"Monat auswählen",chooseYear:"Jahr auswählen",today:"Heute",thisMonth:"Dieser Monat",thisYear:"Dieses Jahr",now:"Jetzt",clear:"Löschen",done:"Fertig",hour:"Stunde",minute:"Minute",second:"Sekunde",meridiem:"AM/PM",start:"Beginn",end:"Ende"},numberField:{increase:"Erhöhen",decrease:"Verringern"},carousel:{label:"Karussell",previous:"Vorherige Folie",next:"Nächste Folie",slide:"Folie {index} von {total}"},scroll:{label:"Scrollbarer Inhalt",previous:"Zurückscrollen",next:"Vorwärtsscrollen"},anchor:{label:"Auf dieser Seite"},code:{copy:"Kopieren",copied:"Kopiert",copyFailed:"Kopieren fehlgeschlagen",raw:"Unformatiert",label:"Code"},breadcrumb:{label:"Brotkrümelnavigation",expand:"Ausgeblendete Schritte anzeigen"},combobox:{empty:"Keine Treffer",add:"„{label}“ hinzufügen"},tour:{previous:"Zurück",next:"Weiter",done:"Fertig",skip:"Überspringen",position:"Schritt {index} von {total}"},chart:{label:"Diagramm",table:"Diagrammdaten",category:"Kategorie"},sparkline:{summary:"{count} Punkte, von {first} bis {last}"},table:{empty:"Keine Daten"},dataTable:{selectAll:"Alle Zeilen auswählen",selectRow:"Zeile auswählen",total:"Zeilen: {total}",selected:"Ausgewählt: {count}",download:"CSV herunterladen",perPage:"Zeilen pro Seite",resize:"Spaltenbreite ändern"},filePicker:{prompt:"Dateien hier ablegen oder zum Auswählen klicken"},textLink:{newTab:"Wird in einem neuen Tab geöffnet"},overlay:{label:"Overlay"},alert:{dismiss:"Schließen"},chat:{sending:"Wird gesendet",sent:"Gesendet",delivered:"Zugestellt",read:"Gelesen",failed:"Nicht gesendet",typing:"Schreibt"},spoiler:{reveal:"Anzeigen",hide:"Verbergen",notice:"Verborgen, damit es nicht versehentlich gelesen wird"},pagination:{label:"Seitennummerierung",page:"Seite {page}",status:"Seite {page} von {total}",previous:"Vorherige Seite",next:"Nächste Seite",first:"Erste Seite",last:"Letzte Seite"},rating:{label:"Bewertung",value:"{value} von {max}",empty:"Nicht bewertet"},colorPicker:{area:"Sättigung und Helligkeit",hue:"Farbton",alpha:"Deckkraft",value:"Farbwert",swatches:"Vorgegebene Farben",clear:"Löschen",empty:"Keine Farbe"},transfer:{source:"Verfügbar",target:"Ausgewählt",toTarget:"Zu Ausgewählt verschieben",toSource:"Zurück zu Verfügbar",search:"Suchen",empty:"Nichts vorhanden",moved:"Verschoben nach {list}: {count}"},command:{label:"Befehlspalette",search:"Befehl eingeben oder suchen…",empty:"Keine Befehle gefunden"},layout:{skipToContent:"Zum Inhalt springen",sidebar:"Seitenleiste",openSidebar:"Seitenleiste öffnen",closeSidebar:"Seitenleiste schließen",resizeSidebar:"Seitenleiste anpassen"},confirm:{confirm:"Bestätigen",cancel:"Abbrechen",ok:"OK"}}};