material-plus-ui 1.5.0 → 1.7.0

package/dist/internal/i18n.d.ts

@@ -137,8 +137,17 @@ export interface MPMessages {
         /** The two header buttons that open the month grid and the year grid. */
         chooseMonth: string;
         chooseYear: string;
-        /** The footer's actions. */
+        /**
+         * The footer's actions.
+         *
+         * `today` has two coarser spellings rather than one word doing all three
+         * jobs: the shortcut lands on whatever unit the picker asks for, and a
+         * button that said *Today* on a year picker would be naming a day the
+         * control has no way to choose.
+         */
         today: string;
+        thisMonth: string;
+        thisYear: string;
         now: string;
         clear: string;
         done: string;
@@ -180,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.
      *
@@ -206,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.
      *
@@ -216,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.
      *
@@ -431,6 +610,22 @@ export interface MPMessages {
         /** What the trigger reads before anything has been chosen. */
         empty: string;
     };
+    /**
+     * The two buttons on a confirmation, and the one on an acknowledgement.
+     *
+     * A namespace of its own rather than three more entries in `common`, because
+     * `common` is the glyph labels — the × that is read out as *close* — and these
+     * are the words on the buttons themselves. A caller who wants *Delete* rather
+     * than *Confirm* passes a label; these are what is drawn when they do not.
+     */
+    confirm: {
+        /** The button that says yes. */
+        confirm: string;
+        /** The button that says no, and what a dismissal counts as. */
+        cancel: string;
+        /** The single button on an acknowledgement, which has nothing to refuse. */
+        ok: string;
+    };
 }
 /** A translation may fill in as much or as little of the table as it has. */
 export type MPPartialMessages = {

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/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/confirm.d.ts

@@ -0,0 +1,3 @@
+import type { MPNamespace } from '../i18n.js';
+/** The buttons a confirmation draws when nobody names them — see `MPMessages['confirm']`. */
+export declare const CONFIRM: MPNamespace<'confirm'>;

package/dist/internal/messages/confirm.js

@@ -0,0 +1 @@
+export const CONFIRM={name:"confirm",en:{confirm:"Confirm",cancel:"Cancel",ok:"OK"}};

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/picker.js

@@ -1 +1 @@
-export const PICKER={name:"picker",en:{previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",now:"Now",clear:"Clear",done:"Done",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End"}};
+export const PICKER={name:"picker",en:{previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",previousYears:"Previous years",nextYears:"Next years",chooseMonth:"Choose a month",chooseYear:"Choose a year",today:"Today",thisMonth:"This month",thisYear:"This year",now:"Now",clear:"Clear",done:"Done",hour:"Hour",minute:"Minute",second:"Second",meridiem:"AM/PM",start:"Start",end:"End"}};

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

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

package/dist/internal/messages/scroll.js

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

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

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

package/dist/internal/messages/sparkline.js

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

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

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

package/dist/internal/messages/tour.js

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

package/dist/internal/mockup.d.ts

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

package/dist/internal/mockup.js

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