material-plus-ui 1.6.0 → 1.8.0

package/dist/internal/i18n.d.ts

@@ -189,6 +189,57 @@ export interface MPMessages {
         /** One slide, and its own position mark. `Slide 2 of 5`. */
         slide: string;
     };
+    /**
+     * MPScrollZone.
+     *
+     * Read out and never drawn, like the carousel's above — but a namespace of
+     * its own rather than three more keys in that one, because the words differ
+     * where it matters. A carousel's arrow moves to the *slide* before this one
+     * and there is a countable thing on the other side of the press; a scroll
+     * zone's moves the strip along and lands wherever the content happens to
+     * start. A translation that reused *Previous slide* for it would be naming a
+     * slide the reader is not being taken to.
+     */
+    scroll: {
+        /** What the strip is called when the caller has not said what is in it. */
+        label: string;
+        /** The two buttons, named by which way they travel. */
+        previous: string;
+        next: string;
+    };
+    /**
+     * MPAnchor.
+     *
+     * One string, and it is read out rather than drawn: the rows are the page's
+     * own headings, and the only thing the component says on its own behalf is
+     * what the `<nav>` around them is called. A page with a table of contents and
+     * a menu in it has two navigation landmarks, and a screen reader that offers
+     * both of them as "navigation" has told the reader nothing.
+     */
+    anchor: {
+        /** The name of the `<nav>` the list of headings is inside. */
+        label: string;
+    };
+    /**
+     * MPCodeBlock.
+     *
+     * Two of these are **drawn** — the copy button says its own word, and says a
+     * different one once the clipboard has taken the code — which is unusual in
+     * this table and is what makes the namespace necessary. A Korean page with a
+     * button reading *Copy* is a page the component broke.
+     */
+    code: {
+        /** The button that puts the code on the clipboard. */
+        copy: string;
+        /** What it says for a moment afterwards. */
+        copied: string;
+        /** And what it says when the browser refused. */
+        copyFailed: string;
+        /** The toggle that drops the colouring. Read out; the button is a glyph. */
+        raw: string;
+        /** What the scrollable region is called when nothing named it. */
+        label: string;
+    };
     /**
      * MPBreadcrumb.
      *
@@ -215,6 +266,74 @@ export interface MPMessages {
         /** The row that offers what was typed as a value of its own. */
         add: string;
     };
+    /**
+     * MPSparkline.
+     *
+     * One string, and it is the whole of what a sparkline says to a reader who
+     * cannot see it. The mark has no axis and no tooltip — see the note on the
+     * component — so the shape has to arrive as a sentence or not at all.
+     *
+     * `{count}`, `{first}` and `{last}` are filled in by `fillMessage`, and the
+     * two ends rather than the two extremes because it is the direction a reader
+     * wants from a sparkline: 120 to 400 says which way it went, and 90 to 410
+     * does not.
+     */
+    /**
+     * The framed charts.
+     *
+     * Three words, and every one of them is a name for a thing the chart drew
+     * rather than a thing the caller wrote. A chart's own content — its series
+     * names, its categories, its title — is the caller's and is never translated
+     * here; these are the scaffolding around it.
+     *
+     * `label` is the fallback accessible name. A chart is a focusable
+     * `role="img"`, and one with nothing to be called by is a tab stop that
+     * announces silence, so there is always a name even when the caller gave
+     * none.
+     *
+     * `table` names the grid under every chart — the relief channel that makes a
+     * picture readable to somebody who cannot see it — and `category` heads its
+     * first column, the one holding whatever the marks are filed under.
+     */
+    chart: {
+        /** What an unnamed chart is called. */
+        label: string;
+        /** The caption on the table under it. */
+        table: string;
+        /** The heading over that table's first column. */
+        category: string;
+    };
+    sparkline: {
+        summary: string;
+    };
+    /**
+     * MPTour.
+     *
+     * The four buttons and the counter — every one of them drawn, and none of
+     * them the caller's. A tour is a component whose whole content is somebody
+     * else's writing, so these five are the only words it says on its own behalf,
+     * and a tour whose steps are in Korean under a *Next* button is a tour that
+     * was translated halfway.
+     *
+     * The × is `common`'s, because it is the same × every sheet in the library
+     * closes with.
+     *
+     * `{index}` and `{total}` are filled in by `fillMessage`, and they are
+     * positional for the reason the pagination's are: a language that counts the
+     * total first is not one an argument order can serve.
+     */
+    tour: {
+        /** Back one step. Missing on the first. */
+        previous: string;
+        /** On one step. */
+        next: string;
+        /** What Next becomes on the last step. */
+        done: string;
+        /** Leaves the tour without finishing it. */
+        skip: string;
+        /** Where the reader is: "Step 2 of 5". */
+        position: string;
+    };
     /**
      * MPTable.
      *
@@ -225,6 +344,57 @@ export interface MPMessages {
     table: {
         empty: string;
     };
+    /**
+     * MPDataTable.
+     *
+     * The words the table says on its own behalf, and not one of them is the
+     * caller's data. Three are read out and never drawn — the ticks have no
+     * visible label, and a column of unnamed checkboxes is a column a screen
+     * reader announces as nothing at all — and three are drawn in the bar under
+     * the rows.
+     *
+     * The empty line is `table`'s, the search field's word is `transfer`'s and the
+     * pages are `pagination`'s: what is here is only what none of them says.
+     *
+     * `{count}` and `{total}` are filled in by `fillMessage`.
+     */
+    dataTable: {
+        /** The tick in the header, which chooses every row on the page. */
+        selectAll: string;
+        /** One row's tick. Read out with the row it is in. */
+        selectRow: string;
+        /**
+         * How many rows there are, after the search and before the page.
+         *
+         * A label with a number after it — "Rows: 7" — in every language that
+         * inflects a noun for number, and the natural phrase in the ones that do
+         * not. "1 rows" is what a single `{total} rows` says one row in seven times
+         * out of seven, and the alternative is a plural form per language in a table
+         * that holds one string per key: Polish and Arabic need four and six of
+         * them. Naming the thing and then counting it is right in every language and
+         * costs nothing.
+         */
+        total: string;
+        /**
+         * And how many of them are held, when any are.
+         *
+         * A second fact beside the first rather than a sentence joining the two.
+         * Written as one — "{count} of {total} selected" — the two numbers are
+         * counted over different sets, because a row the search has hidden is still
+         * chosen: a table of seven with one hidden row held would have said "1 of 1
+         * selected" the moment a search left one row on screen.
+         */
+        selected: string;
+        /** The button that writes the rows out as a file. */
+        download: string;
+        /** The label on the footer's page-size control. */
+        perPage: string;
+        /**
+         * The handle between two headings, which is a control a keyboard can reach:
+         * the arrow keys widen and narrow the column it belongs to.
+         */
+        resize: string;
+    };
     /**
      * MPFilePicker.
      *
@@ -397,6 +567,16 @@ export interface MPMessages {
         search: string;
         /** What a list with nothing in it says. */
         empty: string;
+        /**
+         * What is announced after an arrow is pressed: how many rows crossed, and
+         * which list they landed in.
+         *
+         * `{list}` is the heading of the list they arrived at — the caller's own
+         * when it is a string, and `source` or `target` otherwise. Nothing on the
+         * screen changes except two columns of near-identical rows, so this is the
+         * only thing that tells a reader the press did anything.
+         */
+        moved: string;
     };
     /**
      * MPCommandPalette.

package/dist/internal/initials.d.ts

@@ -0,0 +1,28 @@
+/**
+ * A name reduced to the letters that stand in for it.
+ *
+ * The first character of the first word plus the first of the last — "Jane Doe"
+ * is `JD`, "Acme Supply Co" is `AC`, and "홍길동" is `홍`.
+ *
+ * One word gives one character on purpose. Korean, Japanese and Chinese names
+ * are a single token, and two of their characters at 32px is a smudge where one
+ * of them is a name.
+ *
+ * `Array.from` rather than indexing, and that is the whole reason this is a
+ * function rather than a `slice(0, 1)` at each call site: a string index is a
+ * UTF-16 code unit, so `name[0]` on a name beginning with an emoji or any
+ * character outside the basic plane returns half of it, and half a surrogate
+ * pair renders as the replacement glyph. `normalize('NFC')` is the other half
+ * of the same care — a decomposed "Å" would otherwise give the bare A, with the
+ * ring left behind on the next character.
+ *
+ * The rule is wrong for some names, which is what every caller's own `initials`
+ * prop is for. It is not wrong often enough to be worth a locale-aware guess
+ * that would be wrong differently.
+ *
+ * A file of its own because two components need it and neither should import
+ * the other. `MPAvatar` derives a person's initials and `MPAppLogo` derives a
+ * product's, and a page carrying both would otherwise be able to disagree with
+ * itself about what a two-word name comes to.
+ */
+export declare function initialsOf(name: string): string;

package/dist/internal/initials.js

@@ -0,0 +1 @@
+export function initialsOf(r){const t=r.normalize("NFC").trim().split(/\s+/).filter(Boolean);if(0===t.length)return"";return((Array.from(t[0])[0]??"")+(t.length>1?Array.from(t[t.length-1])[0]??"":"")).toLocaleUpperCase()}

package/dist/internal/intl.d.ts

@@ -0,0 +1,64 @@
+/**
+ * One cache in front of `Intl`, for every part of the library that names things.
+ *
+ * Constructing an `Intl` formatter is not a cheap allocation. The engine
+ * resolves a locale, walks its fallback chain and loads the CLDR data behind
+ * whatever the options asked for; the object that comes back then formats for
+ * free. So a formatter built once and kept is the difference between paying that
+ * cost once a page and paying it once a value.
+ *
+ * `internal/date.ts` worked this out first and cached its own
+ * `Intl.DateTimeFormat`. Everything else did not, and the places that did not
+ * are the ones where it costs most:
+ *
+ * - `MPPieChart` built a percent formatter per slice.
+ * - `MPStatistic` built two per render of a delta.
+ * - `MPAnimateCounter` memoised on an `options` **prop**, so a caller writing
+ *   the object inline rebuilt the formatter on every frame of the count — sixty
+ *   a second, in the one component whose whole job is to re-render at that rate.
+ * - `MPAnimateSplit` built an `Intl.Segmenter` per word.
+ *
+ * Nothing here is exported from `src/index.ts`. It is the library talking to
+ * itself, in the sense `internal/` always means.
+ */
+/**
+ * How many entries a cache here holds before it starts forgetting.
+ *
+ * The caches are keyed on a locale and an options object, and the options are a
+ * caller's prop — so how many distinct keys there are is not something this file
+ * gets to decide. A table formatting a number per row against a per-row format
+ * would add an `Intl.NumberFormat` to a `Map` that never dropped one, for as
+ * long as the page was open. Nothing has ever reported that, and a cache with no
+ * ceiling is still a leak with a slow fuse.
+ *
+ * Sixty-four is far above what a page uses. A chart asks for two or three
+ * shapes, a statistic for two, and every component on the page shares them; the
+ * limit is for the case nobody planned rather than the case everybody has.
+ */
+export declare const CACHE_LIMIT = 64;
+/**
+ * Puts an entry in, and drops the oldest if that took the map over the line.
+ *
+ * A `Map` iterates in insertion order, so its first key is its oldest — which
+ * makes the eviction one delete rather than a data structure.
+ *
+ * Not a true LRU: reading an entry does not renew it, so a formatter used on
+ * every render could in principle be evicted by sixty-four newer ones. It would
+ * be rebuilt on the next call, which costs exactly what the miss it already was
+ * cost — and tracking use would mean writing to the map on every *read*, which
+ * is the hot path this whole thing exists to keep cheap.
+ */
+export declare function remember<Value>(cache: Map<string, Value>, key: string, value: Value): Value;
+/** A memoised `Intl.NumberFormat`. `undefined` locale means the runtime's own. */
+export declare const numberFormatter: (locale: string | undefined, options?: Intl.NumberFormatOptions | undefined) => Intl.NumberFormat;
+/** A memoised `Intl.DateTimeFormat`. `undefined` locale means the runtime's own. */
+export declare const dateTimeFormatter: (locale: string | undefined, options?: Intl.DateTimeFormatOptions | undefined) => Intl.DateTimeFormat;
+/**
+ * A memoised `Intl.Segmenter`, or `null` where the runtime has none.
+ *
+ * `null` rather than a throw, because `internal/text.ts` has a naive fallback
+ * for exactly that case and an effect that runs imperfectly beats one that does
+ * not run. The check is part of the factory rather than repeated at each call
+ * site, so the answer is worked out once.
+ */
+export declare const segmenter: (locale: string | undefined, options?: Intl.SegmenterOptions | undefined) => Intl.Segmenter | null;

package/dist/internal/intl.js

@@ -0,0 +1 @@
+export const CACHE_LIMIT=64;export function remember(e,t,n){if(e.set(t,n),e.size>64){const t=e.keys().next();t.done||e.delete(t.value)}return n}function e(e){const t=new Map;return(n,r)=>{const o=function(e,t){return`${e??""}\0${t?JSON.stringify(t):""}`}(n,r);return t.get(o)??remember(t,o,e(n,r))}}export const numberFormatter=e((e,t)=>new Intl.NumberFormat(e,t));export const dateTimeFormatter=e((e,t)=>new Intl.DateTimeFormat(e,t));export const segmenter=e((e,t)=>"undefined"!=typeof Intl&&"Segmenter"in Intl?new Intl.Segmenter(e,t):null);

package/dist/internal/mark.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The mark that comes and goes, and the timing every one of them shares.
+ *
+ * Six controls in this library draw a small shape to say "this one" — a
+ * checkbox's tick, a radio's dot, the tick beside a chosen row in a select, in a
+ * combobox, and in a menu's two kinds of item. They are the same event, so they
+ * have to be the same motion: a tick that grows into a `MPSelect` and one that
+ * is stamped into an `MPMenu` beside it read as two libraries, and that is
+ * exactly what the library had before this file.
+ *
+ * It is a string rather than a component because the elements it goes on are
+ * Base UI's own indicator parts. There is nothing to wrap: what differs between
+ * the six is which part renders and what the mark is drawn with, and what does
+ * not differ is the two hundred milliseconds and the frame it arrives from.
+ *
+ * ## Two from-states, because there are two kinds of mark
+ *
+ * A tick is a **stroke**. Drawn from nothing it spends its first frames as a
+ * smudge too small to read as a tick, and the eye takes the arrival for a
+ * flicker rather than for a stroke — so it starts at 0.6, already legible.
+ *
+ * A dot is a **disc**, and a disc at any size is still a disc. It can grow out
+ * of the centre of the ring taking the accent around it, which is the arrival
+ * MD3 draws for a radio.
+ *
+ * ## Why the third one is spelled differently
+ *
+ * `data-starting-style` and `data-ending-style` are Base UI's own two frames,
+ * and they are what `MARK_MOTION` and `DOT_MOTION` are written against. They
+ * work wherever the part stays mounted for the length of its exit, which the
+ * checkbox's, the radio's and the menu's indicators all do.
+ *
+ * `Select.ItemIndicator` and `Combobox.ItemIndicator` do not: both return `null`
+ * the moment their row stops being the chosen one, so `data-ending-style` never
+ * reaches the DOM and a tick that faded in vanished in a frame. Their answer is
+ * `keepMounted` plus `MARK_MOTION_KEPT`, which drives both directions off
+ * `data-selected` and needs neither frame. The cost is one empty `aria-hidden`
+ * span per row, in a column the list already reserves the width of.
+ */
+/** A stroke, arriving from 0.6 and leaving the same way. */
+export declare const MARK_MOTION: string;
+/** A disc, arriving from nothing. */
+export declare const DOT_MOTION: string;
+/**
+ * A stroke on a part that is kept mounted, so its resting state is the empty
+ * one and `data-selected` is what draws it.
+ *
+ * Always paired with `keepMounted` on the indicator. Without it the part is only
+ * ever in the DOM while it is selected, and a rule that hides everything else
+ * would hide the only thing there is.
+ */
+export declare const MARK_MOTION_KEPT: string;

package/dist/internal/mark.js

@@ -0,0 +1 @@
+const t=/*@__PURE__*/["transition-[opacity,scale]","duration-(--mp-sys-motion-duration-short4)","ease-mp-standard"].join(" ");export const MARK_MOTION=/*@__PURE__*/[t,"data-starting-style:scale-60 data-starting-style:opacity-0","data-ending-style:scale-60 data-ending-style:opacity-0"].join(" ");export const DOT_MOTION=/*@__PURE__*/[t,"data-starting-style:scale-0 data-starting-style:opacity-0","data-ending-style:scale-0 data-ending-style:opacity-0"].join(" ");export const MARK_MOTION_KEPT=/*@__PURE__*/[t,"scale-60 opacity-0","data-selected:scale-100 data-selected:opacity-100"].join(" ");

package/dist/internal/measure.d.ts

@@ -0,0 +1,31 @@
+/**
+ * How wide content is allowed to get, and the ladder it is usually asked for on.
+ *
+ * A module of its own rather than a third table in `internal/scale.ts`, and the
+ * reason is what `scale.ts` is: ladders of literal Tailwind class names, read by
+ * nearly every component in the library. The measure stopped being one of those
+ * when it started being read off the window size classes — and an `MPBox`, which
+ * wants a padding ladder and nothing else, should not carry those into its
+ * bundle to get one.
+ *
+ * Three components import this: `MPContainer`, `MPHeader` and `MPFooter`. They
+ * are the three that hold content to a width while the sheet around it spans the
+ * window, and they have to agree about where that edge is or the bar and the
+ * article under it line up at every width but one.
+ */
+import type { MPMeasure, MPWindowClass } from '../types.js';
+/**
+ * One `maxWidth`, as the length `max-width` is given.
+ *
+ * A rung of the ladder above, resolved against the boundaries in force where the
+ * component is — so a page that moved one with `MPConfigProvider` moves its
+ * measures too — or anything else the caller wrote, which reaches CSS untouched.
+ * `'60ch'` and `'42rem'` are the same kind of answer as `'lg'` rather than a
+ * second prop. See `MPMeasure`.
+ *
+ * The rungs were once four `rem` values written out — `37.5rem`, `52.5rem`,
+ * `75rem`, `100rem` — which are the four boundaries at a 16px root and only at a
+ * 16px root. A reader who had scaled their text up got a container that agreed
+ * with the media queries at no width at all.
+ */
+export declare function measureValue(value: MPMeasure, mins: Record<MPWindowClass, number>): string;

package/dist/internal/measure.js

@@ -0,0 +1 @@
+const e={xs:null,sm:"medium",md:"expanded",lg:"large",xl:"extra-large"};export function measureValue(n,r){if(!(n in e))return n;const l=e[n];return`${l?r[l]:480}px`}

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

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

package/dist/internal/messages/anchor.js

@@ -0,0 +1 @@
+export const ANCHOR={name:"anchor",en:{label:"On this page"}};

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

@@ -0,0 +1,3 @@
+import type { MPNamespace } from '../i18n.js';
+/** The framed charts' three words — see `MPMessages['chart']`. */
+export declare const CHART: MPNamespace<'chart'>;

package/dist/internal/messages/chart.js

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

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

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

package/dist/internal/messages/code.js

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

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

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

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

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

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

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

package/dist/internal/messages/scroll.js

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

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

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

package/dist/internal/messages/sparkline.js

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

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

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

package/dist/internal/messages/tour.js

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

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

@@ -1,3 +1,3 @@
 import type { MPNamespace } from '../i18n.js';
-/** `MPTransfer`'s two headings and its arrows — see `MPMessages['transfer']`. */
+/** `MPTransfer`'s two headings, its arrows and its announcement — see `MPMessages['transfer']`. */
 export declare const TRANSFER: MPNamespace<'transfer'>;

package/dist/internal/messages/transfer.js

@@ -1 +1 @@
-export const TRANSFER={name:"transfer",en:{source:"Available",target:"Selected",toTarget:"Move to selected",toSource:"Move to available",search:"Search",empty:"Nothing here"}};
+export const TRANSFER={name:"transfer",en:{source:"Available",target:"Selected",toTarget:"Move to selected",toSource:"Move to available",search:"Search",empty:"Nothing here",moved:"Moved to {list}: {count}"}};

package/dist/internal/mockup.d.ts

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