@0001-labs/design-system-1 0.3.0-alpha.13 → 0.3.0-alpha.15

package/dist/react/notice.d.ts

@@ -0,0 +1,45 @@
+/** An inline notice in React: the words stay in the light DOM, so they render
+ * on the server and read in tests; ds-notice draws them and is the live region.
+ * Browser-only registration of ds-notice stays in the product's runtime entry. */
+import { type HTMLAttributes, type ReactNode } from "react";
+import type { Notice as NoticeElement, NoticeTone } from "../2-core/ds-notice";
+export type { NoticeTone } from "../2-core/ds-notice";
+export type NoticeProps = Omit<HTMLAttributes<NoticeElement>, "title"> & {
+    /** The mark's colour and icon; danger also colours the words. Neutral by default. */
+    tone?: NoticeTone;
+    /** A title on the first line. */
+    heading?: ReactNode;
+    /** The text; `children` take its place when given. */
+    text?: ReactNode;
+    /** An icon from the library in place of the tone's own. */
+    icon?: string;
+    /** Buttons or links on the row under the words. */
+    actions?: ReactNode;
+    /** Show the close button. On by default when `onDismiss` is given. */
+    dismissible?: boolean;
+    /** A strip across the top of its positioning context instead of a block in the flow. */
+    banner?: boolean;
+    /** The close button was pressed. The product removes the notice; without
+     * this callback the element hides itself. */
+    onDismiss?: () => void;
+};
+export declare const Notice: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<NoticeElement>, "title"> & {
+    /** The mark's colour and icon; danger also colours the words. Neutral by default. */
+    tone?: NoticeTone;
+    /** A title on the first line. */
+    heading?: ReactNode;
+    /** The text; `children` take its place when given. */
+    text?: ReactNode;
+    /** An icon from the library in place of the tone's own. */
+    icon?: string;
+    /** Buttons or links on the row under the words. */
+    actions?: ReactNode;
+    /** Show the close button. On by default when `onDismiss` is given. */
+    dismissible?: boolean;
+    /** A strip across the top of its positioning context instead of a block in the flow. */
+    banner?: boolean;
+    /** The close button was pressed. The product removes the notice; without
+     * this callback the element hides itself. */
+    onDismiss?: () => void;
+} & import("react").RefAttributes<NoticeElement>>;
+//# sourceMappingURL=notice.d.ts.map

package/dist/react/notice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"notice.d.ts","sourceRoot":"","sources":["../../DS1/react/notice.ts"],"names":[],"mappings":"AAAA;;kFAEkF;AAClF,OAAO,EAAsE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChI,OAAO,KAAK,EAAE,MAAM,IAAI,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAE/E,YAAY,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACtD,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC,GAAG;IACvE,qFAAqF;IACrF,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,iCAAiC;IACjC,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wFAAwF;IACxF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;iDAC6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAMF,eAAO,MAAM,MAAM;IAvBjB,qFAAqF;WAC9E,UAAU;IACjB,iCAAiC;cACvB,SAAS;IACnB,sDAAsD;WAC/C,SAAS;IAChB,2DAA2D;WACpD,MAAM;IACb,mDAAmD;cACzC,SAAS;IACnB,sEAAsE;kBACxD,OAAO;IACrB,wFAAwF;aAC/E,OAAO;IAChB;iDAC6C;gBACjC,MAAM,IAAI;iDAkCtB,CAAC"}

package/dist/react/notice.js

@@ -0,0 +1,34 @@
+/** An inline notice in React: the words stay in the light DOM, so they render
+ * on the server and read in tests; ds-notice draws them and is the live region.
+ * Browser-only registration of ds-notice stays in the product's runtime entry. */
+import { createElement as h, forwardRef, useEffect, useLayoutEffect, useRef } from "react";
+const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const title = (content) => content == null || content === false || content === "" ? null : h("span", { slot: "heading" }, content);
+export const Notice = forwardRef(function Notice({ tone, heading, text, icon, actions, dismissible, banner, onDismiss, children, ...props }, ref) {
+    const host = useRef(null);
+    useCommitEffect(() => {
+        const element = host.current;
+        if (!element || !onDismiss)
+            return;
+        const dismiss = (event) => {
+            if (event.target !== element)
+                return;
+            event.preventDefault();
+            onDismiss();
+        };
+        element.addEventListener("ds-notice-dismiss", dismiss);
+        return () => element.removeEventListener("ds-notice-dismiss", dismiss);
+    });
+    // The live region is in the markup from the first render, on the server too.
+    return h("ds-notice", {
+        role: tone === "danger" ? "alert" : "status",
+        ...props, tone, icon, banner: banner || undefined, dismissible: (dismissible ?? Boolean(onDismiss)) || undefined,
+        ref: (element) => {
+            host.current = element;
+            if (typeof ref === "function")
+                ref(element);
+            else if (ref)
+                ref.current = element;
+        },
+    }, title(heading), children ?? text, actions == null || actions === false ? null : h("div", { slot: "actions", style: { display: "contents" } }, actions));
+});

package/dist/react/page.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes } from "react";
+import type { Page as PageElement } from "../4-page/ds-page";
+export type PageProps = HTMLAttributes<PageElement> & Partial<Pick<PageElement, "layout" | "divided" | "measure" | "fill" | "view">>;
+/**
+ * A standard page. Typed so a React product needs no `IntrinsicElements`
+ * entry of its own for `ds-page`; `measure` is a count of squares.
+ * Browser-only registration stays in the product's runtime entry for SSR.
+ */
+export declare const Page: import("react").ForwardRefExoticComponent<HTMLAttributes<PageElement> & Partial<Pick<PageElement, "fill" | "view" | "layout" | "divided" | "measure">> & import("react").RefAttributes<PageElement>>;
+//# sourceMappingURL=page.d.ts.map

package/dist/react/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../DS1/react/page.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,IAAI,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE7D,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,WAAW,CAAC,GACjD,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;AACjF;;;;GAIG;AACH,eAAO,MAAM,IAAI,sMAEf,CAAC"}

package/dist/react/page.js

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from "react";
+/**
+ * A standard page. Typed so a React product needs no `IntrinsicElements`
+ * entry of its own for `ds-page`; `measure` is a count of squares.
+ * Browser-only registration stays in the product's runtime entry for SSR.
+ */
+export const Page = forwardRef(function Page(props, ref) {
+    return createElement("ds-page", { ...props, ref });
+});

package/dist/react/progress.d.ts

@@ -0,0 +1,107 @@
+/** Progress in React. A value against its range puts its role and values in
+ * the markup from the first render, on the server too, written in the
+ * language. Steps arrive as a property, with what belongs under each step in
+ * a vertical sequence slotted from the light DOM. Dots are a group whose
+ * picks come back as `onSelect`. Register ds-progress in the browser before
+ * hydration. */
+import { type HTMLAttributes, type ReactNode } from "react";
+import type { Progress as ProgressElement, Step } from "../2-core/ds-progress";
+import { type FigureFormat } from "../2-core/figures";
+export type { Step, StepState } from "../2-core/ds-progress";
+export type ProgressProps = Omit<HTMLAttributes<ProgressElement>, "title" | "children" | "onSelect"> & {
+    /** The value. Past `max`, it is over. */
+    value?: number;
+    /** The start of the range, 0 by default. */
+    min?: number;
+    /** The end of the range, 1 by default. */
+    max?: number;
+    /** Draw the range in this many squares instead of a bar. */
+    squares?: number;
+    /** Show it as over whatever its value. */
+    over?: boolean;
+    /** What the value says, in place of "7 of 10". */
+    valuetext?: string;
+    /** How the value and the range are written in the words. */
+    format?: FigureFormat;
+    /** The ISO 4217 code for money. */
+    currency?: string;
+    /** The money is counted in the currency's minor unit. */
+    minor?: boolean;
+    /** Money in whole units only. */
+    whole?: boolean;
+    /** Decimals in the words. */
+    digits?: number;
+    /** Write the words in this language rather than the current one. */
+    language?: string;
+    /** A sequence: the steps in order, names or `{ label, state, href }`. */
+    steps?: Step[];
+    /** The number of the current step, counted from 1. */
+    current?: number;
+    /** One step to a row, with `bodies` under them. */
+    vertical?: boolean;
+    /** In a vertical sequence, what belongs under each step, by its place in `steps`. */
+    bodies?: ReactNode[];
+    /** A dot for each of this many pages. */
+    dots?: number;
+    /** The current dot, from 0. */
+    active?: number;
+    /** Draw the last dot as an end marker. */
+    end?: boolean;
+    /** Each dot's name, with `{index}` for its number from 1. */
+    dotLabel?: string;
+    /** A person picked a dot. */
+    onSelect?: (index: number, previous: number) => void;
+    /** The element's name for assistive technology. */
+    label?: string;
+    /** Show the words as written, never looked up. On by default: React writes its own words. */
+    literal?: boolean;
+};
+export declare const Progress: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<ProgressElement>, "title" | "children" | "onSelect"> & {
+    /** The value. Past `max`, it is over. */
+    value?: number;
+    /** The start of the range, 0 by default. */
+    min?: number;
+    /** The end of the range, 1 by default. */
+    max?: number;
+    /** Draw the range in this many squares instead of a bar. */
+    squares?: number;
+    /** Show it as over whatever its value. */
+    over?: boolean;
+    /** What the value says, in place of "7 of 10". */
+    valuetext?: string;
+    /** How the value and the range are written in the words. */
+    format?: FigureFormat;
+    /** The ISO 4217 code for money. */
+    currency?: string;
+    /** The money is counted in the currency's minor unit. */
+    minor?: boolean;
+    /** Money in whole units only. */
+    whole?: boolean;
+    /** Decimals in the words. */
+    digits?: number;
+    /** Write the words in this language rather than the current one. */
+    language?: string;
+    /** A sequence: the steps in order, names or `{ label, state, href }`. */
+    steps?: Step[];
+    /** The number of the current step, counted from 1. */
+    current?: number;
+    /** One step to a row, with `bodies` under them. */
+    vertical?: boolean;
+    /** In a vertical sequence, what belongs under each step, by its place in `steps`. */
+    bodies?: ReactNode[];
+    /** A dot for each of this many pages. */
+    dots?: number;
+    /** The current dot, from 0. */
+    active?: number;
+    /** Draw the last dot as an end marker. */
+    end?: boolean;
+    /** Each dot's name, with `{index}` for its number from 1. */
+    dotLabel?: string;
+    /** A person picked a dot. */
+    onSelect?: (index: number, previous: number) => void;
+    /** The element's name for assistive technology. */
+    label?: string;
+    /** Show the words as written, never looked up. On by default: React writes its own words. */
+    literal?: boolean;
+} & import("react").RefAttributes<ProgressElement>>;
+//# sourceMappingURL=progress.d.ts.map

package/dist/react/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../DS1/react/progress.ts"],"names":[],"mappings":"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"}

package/dist/react/progress.js

@@ -0,0 +1,47 @@
+/** Progress in React. A value against its range puts its role and values in
+ * the markup from the first render, on the server too, written in the
+ * language. Steps arrive as a property, with what belongs under each step in
+ * a vertical sequence slotted from the light DOM. Dots are a group whose
+ * picks come back as `onSelect`. Register ds-progress in the browser before
+ * hydration. */
+import { createElement as h, forwardRef, useEffect, useLayoutEffect, useRef } from "react";
+import { meterAria } from "../2-core/figures";
+const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export const Progress = forwardRef(function Progress({ value, min = 0, max = 1, squares, over, valuetext, format, currency, minor, whole, digits, language, steps, current, vertical, bodies, dots, active, end, dotLabel, onSelect, label, literal = true, ...props }, ref) {
+    const host = useRef(null);
+    useCommitEffect(() => {
+        const element = host.current;
+        if (!element || !onSelect)
+            return;
+        const select = (event) => {
+            if (event.target !== element)
+                return;
+            const { index, previous } = event.detail;
+            onSelect(index, previous);
+        };
+        element.addEventListener("select", select);
+        return () => element.removeEventListener("select", select);
+    });
+    const attach = (element) => {
+        host.current = element;
+        if (typeof ref === "function")
+            ref(element);
+        else if (ref)
+            ref.current = element;
+    };
+    if (steps) {
+        return h("ds-progress", { ...props, steps, current, vertical: vertical || undefined, label, literal: literal || undefined, ref: attach }, vertical ? bodies?.map((body, index) => body == null || body === false
+            ? null
+            : h("div", { key: index, slot: `step-${index + 1}`, style: { display: "contents" } }, body)) : null);
+    }
+    if (dots !== undefined) {
+        return h("ds-progress", { role: "group", "aria-label": label, ...props, dots, active, end: end || undefined, "dot-label": dotLabel, label, literal: literal || undefined, ref: attach });
+    }
+    const aria = meterAria(value ?? 0, min, max, { over, format, currency, minor, whole, digits, language });
+    return h("ds-progress", {
+        role: "meter", "aria-valuenow": aria.now, "aria-valuemin": aria.min, "aria-valuemax": aria.max,
+        "aria-valuetext": valuetext || aria.text, "aria-label": label,
+        ...props, value: value ?? 0, min, max, squares, over: over || undefined, label, valuetext, format, currency,
+        minor: minor || undefined, whole: whole || undefined, digits, literal: literal || undefined, ref: attach,
+    });
+});

package/dist/react/sidebar.d.ts

@@ -0,0 +1,54 @@
+/** A sidebar in React: the rows go to ds-sidebar as a property, its events come
+ * back as callbacks; `tree` makes it a tree of nested things. Browser-only
+ * registration of ds-sidebar stays in the product's runtime entry; on the
+ * server the element renders empty and fills on load. */
+import { type HTMLAttributes } from "react";
+import type { Sidebar as SidebarElement, SidebarItem, SidebarMoveDetail } from "../3-unit/ds-sidebar";
+export type { SidebarItem, SidebarMoveDetail };
+export type SidebarProps = Omit<HTMLAttributes<SidebarElement>, "onSelect" | "onToggle"> & {
+    /** The visible rows, in order; leave out the children of a closed row. */
+    items: SidebarItem[];
+    /** The navigation's or the tree's accessible name. */
+    label?: string;
+    /** The empty state's words. */
+    empty?: string;
+    /** A tree of nested things instead of navigation. */
+    tree?: boolean;
+    disclosurePosition?: "start" | "end";
+    expandIcon?: string;
+    collapseIcon?: string;
+    reorderable?: boolean;
+    onMove?: (move: SidebarMoveDetail) => void;
+    /** A row asks to open (`true`) or close. */
+    onToggle?: (id: string, expanded: boolean) => void;
+    /** A click, Space or Enter chose a tree row. */
+    onSelect?: (id: string) => void;
+    /** A row was pressed (navigation), or Enter or a double click opened one (a tree). */
+    onActivate?: (id: string) => void;
+    /** A row's own action was pressed. */
+    onAction?: (id: string, action: string) => void;
+};
+export declare const Sidebar: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<SidebarElement>, "onToggle" | "onSelect"> & {
+    /** The visible rows, in order; leave out the children of a closed row. */
+    items: SidebarItem[];
+    /** The navigation's or the tree's accessible name. */
+    label?: string;
+    /** The empty state's words. */
+    empty?: string;
+    /** A tree of nested things instead of navigation. */
+    tree?: boolean;
+    disclosurePosition?: "start" | "end";
+    expandIcon?: string;
+    collapseIcon?: string;
+    reorderable?: boolean;
+    onMove?: (move: SidebarMoveDetail) => void;
+    /** A row asks to open (`true`) or close. */
+    onToggle?: (id: string, expanded: boolean) => void;
+    /** A click, Space or Enter chose a tree row. */
+    onSelect?: (id: string) => void;
+    /** A row was pressed (navigation), or Enter or a double click opened one (a tree). */
+    onActivate?: (id: string) => void;
+    /** A row's own action was pressed. */
+    onAction?: (id: string, action: string) => void;
+} & import("react").RefAttributes<SidebarElement>>;
+//# sourceMappingURL=sidebar.d.ts.map

package/dist/react/sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../DS1/react/sidebar.ts"],"names":[],"mappings":"AAAA;;;yDAGyD;AACzD,OAAO,EAAsE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAChH,OAAO,KAAK,EAAE,OAAO,IAAI,cAAc,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEtG,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC;AAE/C,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IACzF,0EAA0E;IAC1E,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kBAAkB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC3C,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,gDAAgD;IAChD,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,sFAAsF;IACtF,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD,CAAC;AAIF,eAAO,MAAM,OAAO;IAxBlB,0EAA0E;WACnE,WAAW,EAAE;IACpB,sDAAsD;YAC9C,MAAM;IACd,+BAA+B;YACvB,MAAM;IACd,qDAAqD;WAC9C,OAAO;yBACO,OAAO,GAAG,KAAK;iBAAe,MAAM;mBAC1C,MAAM;kBACP,OAAO;aACZ,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI;IAC1C,4CAA4C;eACjC,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI;IAClD,gDAAgD;eACrC,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;IAC/B,sFAAsF;iBACzE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;IACjC,sCAAsC;eAC3B,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI;kDAyC/C,CAAC"}

package/dist/react/sidebar.js

@@ -0,0 +1,48 @@
+/** A sidebar in React: the rows go to ds-sidebar as a property, its events come
+ * back as callbacks; `tree` makes it a tree of nested things. Browser-only
+ * registration of ds-sidebar stays in the product's runtime entry; on the
+ * server the element renders empty and fills on load. */
+import { createElement as h, forwardRef, useEffect, useLayoutEffect, useRef } from "react";
+const useCommitEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export const Sidebar = forwardRef(function Sidebar({ items, label, empty, tree, expandIcon, collapseIcon, disclosurePosition, reorderable, onMove, onToggle, onSelect, onActivate, onAction, ...props }, ref) {
+    const host = useRef(null);
+    useCommitEffect(() => {
+        const element = host.current;
+        if (!element)
+            return;
+        element.items = items;
+        element.disclosurePosition = disclosurePosition;
+        element.expandIcon = expandIcon;
+        element.collapseIcon = collapseIcon;
+        element.reorderable = Boolean(reorderable);
+    }, [items, expandIcon, collapseIcon, disclosurePosition, reorderable]);
+    useCommitEffect(() => {
+        const element = host.current;
+        if (!element)
+            return;
+        const detail = (event) => event.detail;
+        const toggle = (event) => { const d = detail(event); onToggle?.(d.id, Boolean(d.expanded)); };
+        const select = (event) => onSelect?.(detail(event).id);
+        const activate = (event) => onActivate?.(detail(event).id);
+        const action = (event) => { const d = detail(event); onAction?.(d.id, d.action ?? ""); };
+        const move = (event) => onMove?.(event.detail);
+        element.addEventListener("sidebar-move", move);
+        element.addEventListener("sidebar-toggle", toggle);
+        element.addEventListener("sidebar-select", select);
+        element.addEventListener("sidebar-activate", activate);
+        element.addEventListener("sidebar-action", action);
+        return () => {
+            element.removeEventListener("sidebar-move", move);
+            element.removeEventListener("sidebar-toggle", toggle);
+            element.removeEventListener("sidebar-select", select);
+            element.removeEventListener("sidebar-activate", activate);
+            element.removeEventListener("sidebar-action", action);
+        };
+    });
+    return h("ds-sidebar", { ...props, label, empty, tree: tree || undefined,
+        ref: (element) => { host.current = element; if (typeof ref === "function")
+            ref(element);
+        else if (ref)
+            ref.current = element; },
+    });
+});

package/dist/react/stat.d.ts

@@ -0,0 +1,78 @@
+/** A stat in React: the label, the figure and the caption stay in the light
+ * DOM, the figure already written in the language, so they render on the
+ * server and read in tests; ds-stat draws them and the change. Browser-only
+ * registration of ds-stat stays in the product's runtime entry. */
+import { type HTMLAttributes, type ReactNode } from "react";
+import type { Stat as StatElement, StatTone } from "../2-core/ds-stat";
+import { type FigureFormat } from "../2-core/figures";
+export type { StatTone } from "../2-core/ds-stat";
+export type { FigureFormat } from "../2-core/figures";
+export type StatProps = Omit<HTMLAttributes<StatElement>, "title"> & {
+    /** What the figure is. */
+    label?: ReactNode;
+    /** The figure, written as `format` says in the current language (or `language`). */
+    value?: number;
+    /** Words or markup in place of the value ("Incomplete"). */
+    figure?: ReactNode;
+    /** How the value is written: number (the default), compact, percent (a fraction) or money. */
+    format?: FigureFormat;
+    /** The ISO 4217 code for money. */
+    currency?: string;
+    /** The money is counted in the currency's minor unit. */
+    minor?: boolean;
+    /** Money in whole units only. */
+    whole?: boolean;
+    /** Decimals, at least and at most. */
+    digits?: number;
+    /** A change, written with its sign and an up or down icon at the start of the caption. */
+    change?: number;
+    /** How the change is written; the value's format by default. */
+    changeFormat?: FigureFormat;
+    /** The change in that colour, where the page knows which way is bad. */
+    changeTone?: StatTone;
+    /** A line under the figure. */
+    caption?: ReactNode;
+    /** An icon from the library on its own square before the label. */
+    icon?: string;
+    /** The figure in that colour. */
+    tone?: StatTone;
+    /** Each digit in a cell of one width, for a face whose digits differ in width. */
+    cells?: boolean;
+    /** Write the figure in this language rather than the current one, as a server answering a request does. */
+    language?: string;
+};
+export declare const Stat: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<StatElement>, "title"> & {
+    /** What the figure is. */
+    label?: ReactNode;
+    /** The figure, written as `format` says in the current language (or `language`). */
+    value?: number;
+    /** Words or markup in place of the value ("Incomplete"). */
+    figure?: ReactNode;
+    /** How the value is written: number (the default), compact, percent (a fraction) or money. */
+    format?: FigureFormat;
+    /** The ISO 4217 code for money. */
+    currency?: string;
+    /** The money is counted in the currency's minor unit. */
+    minor?: boolean;
+    /** Money in whole units only. */
+    whole?: boolean;
+    /** Decimals, at least and at most. */
+    digits?: number;
+    /** A change, written with its sign and an up or down icon at the start of the caption. */
+    change?: number;
+    /** How the change is written; the value's format by default. */
+    changeFormat?: FigureFormat;
+    /** The change in that colour, where the page knows which way is bad. */
+    changeTone?: StatTone;
+    /** A line under the figure. */
+    caption?: ReactNode;
+    /** An icon from the library on its own square before the label. */
+    icon?: string;
+    /** The figure in that colour. */
+    tone?: StatTone;
+    /** Each digit in a cell of one width, for a face whose digits differ in width. */
+    cells?: boolean;
+    /** Write the figure in this language rather than the current one, as a server answering a request does. */
+    language?: string;
+} & import("react").RefAttributes<StatElement>>;
+//# sourceMappingURL=stat.d.ts.map

package/dist/react/stat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../DS1/react/stat.ts"],"names":[],"mappings":"AAAA;;;mEAGmE;AACnE,OAAO,EAAsD,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChH,OAAO,KAAK,EAAE,IAAI,IAAI,WAAW,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAA6B,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjF,YAAY,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACtD,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,GAAG;IACnE,0BAA0B;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4DAA4D;IAC5D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yDAAyD;IACzD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,wEAAwE;IACxE,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,kFAAkF;IAClF,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2GAA2G;IAC3G,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAiBF,eAAO,MAAM,IAAI;IAjDf,0BAA0B;YAClB,SAAS;IACjB,oFAAoF;YAC5E,MAAM;IACd,4DAA4D;aACnD,SAAS;IAClB,8FAA8F;aACrF,YAAY;IACrB,mCAAmC;eACxB,MAAM;IACjB,yDAAyD;YACjD,OAAO;IACf,iCAAiC;YACzB,OAAO;IACf,sCAAsC;aAC7B,MAAM;IACf,0FAA0F;aACjF,MAAM;IACf,gEAAgE;mBACjD,YAAY;IAC3B,wEAAwE;iBAC3D,QAAQ;IACrB,+BAA+B;cACrB,SAAS;IACnB,mEAAmE;WAC5D,MAAM;IACb,iCAAiC;WAC1B,QAAQ;IACf,kFAAkF;YAC1E,OAAO;IACf,2GAA2G;eAChG,MAAM;+CA8BjB,CAAC"}

package/dist/react/stat.js

@@ -0,0 +1,25 @@
+/** A stat in React: the label, the figure and the caption stay in the light
+ * DOM, the figure already written in the language, so they render on the
+ * server and read in tests; ds-stat draws them and the change. Browser-only
+ * registration of ds-stat stays in the product's runtime entry. */
+import { createElement as h, forwardRef } from "react";
+import { figureCells, formatFigure } from "../2-core/figures";
+const hiddenWords = { position: "absolute", width: "1px", height: "1px", overflow: "hidden", clipPath: "inset(50%)", whiteSpace: "nowrap" };
+const digitCell = { display: "inline-block", width: "var(--ds-stat-digit, 1ch)", textAlign: "center" };
+const slot = (name, content) => content == null || content === false || content === "" ? null : h("span", { slot: name }, content);
+/** The figure as text, or its digits in cells of one width with the whole read once. */
+function drawn(text, cells) {
+    if (!cells)
+        return text;
+    return [
+        h("span", { key: "words", style: hiddenWords }, text),
+        h("span", { key: "cells", "aria-hidden": "true" }, figureCells(text).map((cell, index) => cell.digit ? h("span", { key: index, style: digitCell }, cell.text) : cell.text)),
+    ];
+}
+export const Stat = forwardRef(function Stat({ label, value, figure, format, currency, minor, whole, digits, change, changeFormat, changeTone, caption, icon, tone, cells, language, children, ...props }, ref) {
+    const text = figure ?? (typeof value === "number" ? formatFigure(value, { format, currency, minor, whole, digits, language }) : null);
+    return h("ds-stat", {
+        ...props, format, currency, minor: minor || undefined, whole: whole || undefined, digits, change,
+        "change-format": changeFormat, "change-tone": changeTone, icon, tone, cells: cells || undefined, ref,
+    }, slot("label", label), slot("figure", typeof text === "string" ? drawn(text, cells) : text), children, slot("caption", caption));
+});

package/dist/react/toast.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from "react";
+import type { Toaster as ToasterElement, ToastId, ToastOptions, ToastPosition, ToastPromiseMessages } from "../2-core/ds-toast";
+/** Show a toast, as Sonner's `toast()`. Returns its id. */
+export declare const toast: ((title: string, options?: ToastOptions) => ToastId) & {
+    message: (title: string, options?: ToastOptions) => ToastId;
+    success: (title: string, options?: ToastOptions) => ToastId;
+    info: (title: string, options?: ToastOptions) => ToastId;
+    warning: (title: string, options?: ToastOptions) => ToastId;
+    error: (title: string, options?: ToastOptions) => ToastId;
+    loading: (title: string, options?: ToastOptions) => ToastId;
+    promise<T>(promise: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>): ToastId;
+    dismiss(id?: ToastId): ToastId | undefined;
+};
+export type ToasterProps = HTMLAttributes<ToasterElement> & {
+    position?: ToastPosition;
+    expand?: boolean;
+    visibleToasts?: number;
+    duration?: number;
+    closeButton?: boolean;
+    richColors?: boolean;
+    contained?: boolean;
+    label?: string;
+    closeLabel?: string;
+};
+export declare const Toaster: import("react").ForwardRefExoticComponent<HTMLAttributes<ToasterElement> & {
+    position?: ToastPosition;
+    expand?: boolean;
+    visibleToasts?: number;
+    duration?: number;
+    closeButton?: boolean;
+    richColors?: boolean;
+    contained?: boolean;
+    label?: string;
+    closeLabel?: string;
+} & import("react").RefAttributes<ToasterElement>>;
+export type { ToastButton, ToastData, ToastId, ToastOptions, ToastPosition, ToastPromiseMessages, ToastType } from "../2-core/ds-toast";
+//# sourceMappingURL=toast.d.ts.map

package/dist/react/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../DS1/react/toast.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAClF,OAAO,KAAK,EAAE,OAAO,IAAI,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAuChI,2DAA2D;AAC3D,eAAO,MAAM,KAAK,WACR,MAAM,YAAY,YAAY,KAAG,OAAO;qBAE7B,MAAM,YAAY,YAAY,KAAG,OAAO;qBACxC,MAAM,YAAY,YAAY,KAAG,OAAO;kBAC3C,MAAM,YAAY,YAAY,KAAG,OAAO;qBACrC,MAAM,YAAY,YAAY,KAAG,OAAO;mBAC1C,MAAM,YAAY,YAAY,KAAG,OAAO;qBACtC,MAAM,YAAY,YAAY,KAAG,OAAO;YACjD,CAAC,WAAW,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC,CAAC,CAAC,YAAY,oBAAoB,CAAC,CAAC,CAAC,GAAG,OAAO;iBAKnF,OAAO,GAAG,OAAO,GAAG,SAAS;CAK7C,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAC1D,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,OAAO;eAVP,aAAa;aACf,OAAO;oBACA,MAAM;eACX,MAAM;kBACH,OAAO;iBACR,OAAO;gBACR,OAAO;YACX,MAAM;iBACD,MAAM;kDASnB,CAAC;AACH,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/react/toast.js

@@ -0,0 +1,55 @@
+import { createElement, forwardRef, useEffect } from "react";
+let runtime;
+let loading;
+const waiting = [];
+let lastId = 0;
+function load() {
+    if (runtime || loading || typeof window === "undefined")
+        return;
+    loading = import("../2-core/ds-toast").then(module => {
+        runtime = module.toast;
+        for (const call of waiting.splice(0))
+            call(runtime);
+    }, () => { loading = undefined; });
+}
+function run(call) {
+    if (runtime) {
+        call(runtime);
+        return;
+    }
+    if (typeof window === "undefined")
+        return;
+    waiting.push(call);
+    load();
+}
+function show(kind, title, options) {
+    const id = options?.id ?? `toast-${++lastId}`;
+    run(toast => (kind ? toast[kind] : toast)(title, { ...options, id }));
+    return id;
+}
+/** Show a toast, as Sonner's `toast()`. Returns its id. */
+export const toast = Object.assign((title, options) => show(undefined, title, options), {
+    message: (title, options) => show("message", title, options),
+    success: (title, options) => show("success", title, options),
+    info: (title, options) => show("info", title, options),
+    warning: (title, options) => show("warning", title, options),
+    error: (title, options) => show("error", title, options),
+    loading: (title, options) => show("loading", title, options),
+    promise(promise, messages) {
+        const id = messages.id ?? `toast-${++lastId}`;
+        run(toast => toast.promise(promise, { ...messages, id }));
+        return id;
+    },
+    dismiss(id) {
+        run(toast => toast.dismiss(id));
+        return id;
+    },
+});
+export const Toaster = forwardRef(function Toaster({ visibleToasts, closeButton, richColors, closeLabel, expand, contained, ...props }, ref) {
+    useEffect(load, []);
+    return createElement("ds-toast", {
+        ...props, ref,
+        "visible-toasts": visibleToasts, "close-label": closeLabel,
+        expand: expand || undefined, "close-button": closeButton || undefined, "rich-colors": richColors || undefined, contained: contained || undefined,
+    });
+});