@openwarelabs/ui 0.15.0 → 0.16.0

package/dist/components/NotificationCenter/NotificationCenter.types.d.ts

@@ -0,0 +1,129 @@
+import type { MouseEvent, ReactElement, ReactNode } from "react";
+export interface NotificationItem {
+    /** Unique among the items. */
+    id: string;
+    /** What happened, in a line: "Clara mentioned you in Pricing". It names the item for screen readers. */
+    title: ReactNode;
+    /** A second line: a quote, or where it happened. */
+    description?: ReactNode;
+    /** When it happened: a Date or an ISO string. It shows as "5 min ago", with the full date on hover. */
+    time: Date | string;
+    /** Seen already. Unread items are bold, with a dot and a hidden "Unread" for screen readers. */
+    read?: boolean;
+    /** Who it's from, usually an `<Avatar>`. Hidden from screen readers: say who in the title. */
+    avatar?: ReactNode;
+    /** A 16px icon on a round tile, for things no person did (a deploy, a reminder), when there's no avatar. */
+    icon?: ReactNode;
+    /** Makes the item a link to what it's about. Without it, the item is a button. */
+    href?: string;
+    /** A button or two beside the item, such as Accept and Decline. They sit outside the item's own link. */
+    actions?: ReactNode;
+    /** The heading it's listed under. Set it to group by your own sections; it wins over `groupByDay`. */
+    group?: string;
+}
+export interface NotificationLabels {
+    /** The popover's heading and name. @default "Notifications" */
+    title?: string;
+    /** The bell's name with the count. @default (unread) => unread ? `Notifications, ${unread} unread` : "Notifications" */
+    trigger?(unread: number): string;
+    /** @default "Mark all as read" */
+    markAllRead?: string;
+    /** The tab list's name. @default "Show" */
+    filter?: string;
+    /** @default "All" */
+    all?: string;
+    /** @default "Unread" */
+    unreadTab?: string;
+    /** Read before each unread item. @default "Unread" */
+    unread?: string;
+    /** The ✕ on each item, followed by its title. @default "Dismiss" */
+    dismiss?: string;
+    /** Said once when new ones arrive while it's closed. @default (count) => count === 1 ? "1 new notification" : `${count} new notifications` */
+    announce?(count: number): string;
+    /** @default "Today" */
+    today?: string;
+    /** @default "Yesterday" */
+    yesterday?: string;
+    /** @default "Earlier" */
+    earlier?: string;
+    /** The empty list's title. @default "You're all caught up" */
+    empty?: string;
+    /** The empty Unread tab's title. @default "No unread notifications" */
+    emptyUnread?: string;
+}
+export interface NotificationListProps {
+    /** The notifications, newest first. */
+    items: NotificationItem[];
+    /** Called with an unread item's id when it's opened. */
+    onRead?(id: string): void;
+    /** Shows a ✕ on each item that calls this with its id; remove the item from `items`. */
+    onDismiss?(id: string): void;
+    /** Called when an item is clicked, before its link is followed. */
+    onItemClick?(item: NotificationItem, event: MouseEvent<HTMLElement>): void;
+    /** Lists the items under Today, Yesterday and Earlier. An item's own `group` wins.
+     * @default false */
+    groupByDay?: boolean;
+    /** What shows when there are no items.
+     * @default an EmptyState saying "You're all caught up" */
+    empty?: ReactNode;
+    /** The locale for "5 min ago" and dates. Defaults to the browser's. */
+    locale?: string;
+    /** The words it uses, for other languages. */
+    labels?: NotificationLabels;
+    /** Names the list for screen readers, when it has no heading of its own. */
+    "aria-label"?: string;
+    className?: string;
+}
+export interface NotificationCenterProps extends Omit<NotificationListProps, "aria-label"> {
+    /** Called when "Mark all as read" is pressed; mark every item read. */
+    onReadAll?(): void;
+    /** Shown, when you control it. */
+    open?: boolean;
+    /** Shown at first, when it controls itself. Opened on load, it doesn't pull focus into it.
+     * @default false */
+    defaultOpen?: boolean;
+    /** Called when it opens or closes. */
+    onOpenChange?(open: boolean): void;
+    /** All and Unread tabs above the list.
+     * @default true */
+    tabs?: boolean;
+    /** The tab showing, when you control it. */
+    filter?: NotificationFilter;
+    /** The tab it starts on, when it controls itself.
+     * @default "all" */
+    defaultFilter?: NotificationFilter;
+    /** Called when the tab changes. */
+    onFilterChange?(filter: NotificationFilter): void;
+    /** Under the list, such as a "View all" link to a full page. */
+    footer?: ReactNode;
+    /** The badge shows "9+" above this.
+     * @default 9 */
+    maxCount?: number;
+    /** Your own button in place of the bell. Give it an aria-label with the unread count. */
+    trigger?: ReactElement;
+    /** Pixels, or any CSS width. It never gets wider than the window, less a margin.
+     * @default 380 */
+    width?: number | string;
+}
+/** Which items a NotificationCenter lists. */
+export type NotificationFilter = "all" | "unread";
+/** Internal: a run of items under one heading. */
+export interface NotificationGroup {
+    key: string;
+    label?: string;
+    items: NotificationItem[];
+}
+/** Internal: one row of the list. */
+export interface NotificationRowProps {
+    item: NotificationItem;
+    /** "5 min ago", or the date when it's older than a week. */
+    relative: string;
+    /** The full date and time, for the hover title. */
+    full: string;
+    /** The machine-readable time, for `<time dateTime>`. */
+    iso?: string;
+    labels: NotificationLabels;
+    onRead?(id: string): void;
+    onDismiss?(id: string): void;
+    onItemClick?(item: NotificationItem, event: MouseEvent<HTMLElement>): void;
+}

package/dist/components/QRCode/QRCode.d.cts

@@ -0,0 +1,18 @@
+import type { QRCodeDataURLOptions, QRCodeProps } from "./QRCode.types.cjs";
+export type { QRCodeDataURLOptions, QRCodeProps, QRLevel, QROptions } from "./QRCode.types.cjs";
+export { encodeQR } from "./qr.cjs";
+/**
+ * A QR code, drawn as one SVG path: for sharing a link, setting up two-factor authentication or pairing a device.
+ * The encoder is built in. It's near black on near white in both themes, because scanners need a light ground.
+ */
+export declare const QRCode: import("react").ForwardRefExoticComponent<QRCodeProps & import("react").RefAttributes<SVGSVGElement>>;
+/**
+ * The SVG markup of a rendered QR code, with its colours written in, ready to save as a .svg file. Pass the element
+ * from the QRCode's ref.
+ */
+export declare function qrCodeToSVG(svg: SVGSVGElement): string;
+/**
+ * A rendered QR code as an image data URL, PNG by default, for a download link or a canvas. `scale` multiplies its
+ * size for a sharper image. A logo from another origin that doesn't allow CORS is left out; the code still scans.
+ */
+export declare function qrCodeToDataURL(svg: SVGSVGElement, { type, scale }?: QRCodeDataURLOptions): Promise<string>;

package/dist/components/QRCode/QRCode.d.ts

@@ -0,0 +1,18 @@
+import type { QRCodeDataURLOptions, QRCodeProps } from "./QRCode.types.js";
+export type { QRCodeDataURLOptions, QRCodeProps, QRLevel, QROptions } from "./QRCode.types.js";
+export { encodeQR } from "./qr.js";
+/**
+ * A QR code, drawn as one SVG path: for sharing a link, setting up two-factor authentication or pairing a device.
+ * The encoder is built in. It's near black on near white in both themes, because scanners need a light ground.
+ */
+export declare const QRCode: import("react").ForwardRefExoticComponent<QRCodeProps & import("react").RefAttributes<SVGSVGElement>>;
+/**
+ * The SVG markup of a rendered QR code, with its colours written in, ready to save as a .svg file. Pass the element
+ * from the QRCode's ref.
+ */
+export declare function qrCodeToSVG(svg: SVGSVGElement): string;
+/**
+ * A rendered QR code as an image data URL, PNG by default, for a download link or a canvas. `scale` multiplies its
+ * size for a sharper image. A logo from another origin that doesn't allow CORS is left out; the code still scans.
+ */
+export declare function qrCodeToDataURL(svg: SVGSVGElement, { type, scale }?: QRCodeDataURLOptions): Promise<string>;

package/dist/components/QRCode/QRCode.types.d.cts

@@ -0,0 +1,53 @@
+import type { ComponentPropsWithoutRef } from "react";
+/** How much of the code can be damaged or covered and still scan: about 7% (L), 15% (M), 25% (Q) or 30% (H). Higher levels make a denser code. */
+export type QRLevel = "L" | "M" | "Q" | "H";
+export interface QROptions {
+    /** The error correction level.
+     * @default "M" */
+    level?: QRLevel;
+    /** The smallest version (1–40) to use, so codes for texts of different lengths can share a size. A longer text still gets a bigger version.
+     * @default 1 */
+    minVersion?: number;
+    /** Forces one of the eight masks (0–7) instead of the one with the lowest penalty. For testing; leave it out. */
+    mask?: number;
+}
+export interface QRCodeProps extends Omit<ComponentPropsWithoutRef<"svg">, "color" | "children"> {
+    /** The text to encode: a link, an `otpauth://` URI, any text. Encoded as UTF-8, or more densely when it's only digits or upper-case letters. */
+    value: string;
+    /** The width and height, in pixels. It shrinks to fit a narrower container.
+     * @default 160 */
+    size?: number;
+    /** The error correction level: how much of the code can be damaged and still scan. `image` raises it to H.
+     * @default "M" */
+    level?: QRLevel;
+    /** The smallest version (1–40), so codes for different texts can share the same grid. */
+    minVersion?: number;
+    /** The quiet zone around the code, in modules. Scanners need about 4; go lower only when the code sits on a plain light ground.
+     * @default 4 */
+    margin?: number;
+    /** The colour of the dark modules: any CSS colour or token, like `"var(--ow-text)"`. Keep it dark and the background light: most scanners can't read inverted codes.
+     * @default "var(--ow-gray-950)", near black in both themes */
+    color?: string;
+    /** The colour behind the modules and in the quiet zone. It stays light in the dark theme, because scanners need a light ground and strong contrast.
+     * @default "var(--ow-gray-50)", near white in both themes */
+    background?: string;
+    /** The accessible name: "QR code for openware.dev". Say where it leads or what it's for.
+     * @default "QR code for" and the link's host, or the text when it's short; otherwise "QR code" */
+    label?: string;
+    /** A logo for the centre, by URL. The modules under it are cleared and the level is raised to H, so the code still scans. */
+    image?: string;
+    /** The logo's width as a share of the code's, up to 0.3.
+     * @default 0.22 */
+    imageSize?: number;
+    /** Draws each run of dark modules with rounded ends. Still scans, but square modules are the safest.
+     * @default false */
+    rounded?: boolean;
+}
+export interface QRCodeDataURLOptions {
+    /** The image format, such as `"image/jpeg"`.
+     * @default "image/png" */
+    type?: string;
+    /** Multiplies the code's size in pixels, for a sharper image.
+     * @default 4 */
+    scale?: number;
+}

package/dist/components/QRCode/QRCode.types.d.ts

@@ -0,0 +1,53 @@
+import type { ComponentPropsWithoutRef } from "react";
+/** How much of the code can be damaged or covered and still scan: about 7% (L), 15% (M), 25% (Q) or 30% (H). Higher levels make a denser code. */
+export type QRLevel = "L" | "M" | "Q" | "H";
+export interface QROptions {
+    /** The error correction level.
+     * @default "M" */
+    level?: QRLevel;
+    /** The smallest version (1–40) to use, so codes for texts of different lengths can share a size. A longer text still gets a bigger version.
+     * @default 1 */
+    minVersion?: number;
+    /** Forces one of the eight masks (0–7) instead of the one with the lowest penalty. For testing; leave it out. */
+    mask?: number;
+}
+export interface QRCodeProps extends Omit<ComponentPropsWithoutRef<"svg">, "color" | "children"> {
+    /** The text to encode: a link, an `otpauth://` URI, any text. Encoded as UTF-8, or more densely when it's only digits or upper-case letters. */
+    value: string;
+    /** The width and height, in pixels. It shrinks to fit a narrower container.
+     * @default 160 */
+    size?: number;
+    /** The error correction level: how much of the code can be damaged and still scan. `image` raises it to H.
+     * @default "M" */
+    level?: QRLevel;
+    /** The smallest version (1–40), so codes for different texts can share the same grid. */
+    minVersion?: number;
+    /** The quiet zone around the code, in modules. Scanners need about 4; go lower only when the code sits on a plain light ground.
+     * @default 4 */
+    margin?: number;
+    /** The colour of the dark modules: any CSS colour or token, like `"var(--ow-text)"`. Keep it dark and the background light: most scanners can't read inverted codes.
+     * @default "var(--ow-gray-950)", near black in both themes */
+    color?: string;
+    /** The colour behind the modules and in the quiet zone. It stays light in the dark theme, because scanners need a light ground and strong contrast.
+     * @default "var(--ow-gray-50)", near white in both themes */
+    background?: string;
+    /** The accessible name: "QR code for openware.dev". Say where it leads or what it's for.
+     * @default "QR code for" and the link's host, or the text when it's short; otherwise "QR code" */
+    label?: string;
+    /** A logo for the centre, by URL. The modules under it are cleared and the level is raised to H, so the code still scans. */
+    image?: string;
+    /** The logo's width as a share of the code's, up to 0.3.
+     * @default 0.22 */
+    imageSize?: number;
+    /** Draws each run of dark modules with rounded ends. Still scans, but square modules are the safest.
+     * @default false */
+    rounded?: boolean;
+}
+export interface QRCodeDataURLOptions {
+    /** The image format, such as `"image/jpeg"`.
+     * @default "image/png" */
+    type?: string;
+    /** Multiplies the code's size in pixels, for a sharper image.
+     * @default 4 */
+    scale?: number;
+}

package/dist/components/QRCode/qr.d.cts

@@ -0,0 +1,8 @@
+import type { QROptions } from "./QRCode.types.cjs";
+/**
+ * Encodes text as a QR code and returns its modules, row by row: `true` is dark. There is no quiet zone around it. Text
+ * of only digits, or only `0–9 A–Z $%*+-./:` and space, uses the denser numeric or alphanumeric mode; anything else is
+ * UTF-8 bytes. Picks the smallest version that fits, from `minVersion`, and throws a RangeError when the text is too
+ * long even for version 40.
+ */
+export declare function encodeQR(text: string, { level, minVersion, mask: forcedMask }?: QROptions): boolean[][];

package/dist/components/QRCode/qr.d.ts

@@ -0,0 +1,8 @@
+import type { QROptions } from "./QRCode.types.js";
+/**
+ * Encodes text as a QR code and returns its modules, row by row: `true` is dark. There is no quiet zone around it. Text
+ * of only digits, or only `0–9 A–Z $%*+-./:` and space, uses the denser numeric or alphanumeric mode; anything else is
+ * UTF-8 bytes. Picks the smallest version that fits, from `minVersion`, and throws a RangeError when the text is too
+ * long even for version 40.
+ */
+export declare function encodeQR(text: string, { level, minVersion, mask: forcedMask }?: QROptions): boolean[][];

package/dist/components/SignaturePad/SignaturePad.d.cts

@@ -0,0 +1,8 @@
+import type { SignaturePadHandle, SignaturePadProps } from "./SignaturePad.types.cjs";
+export type { SignaturePadHandle, SignaturePadLabels, SignaturePadProps } from "./SignaturePad.types.cjs";
+/**
+ * A box to sign in with a mouse, a finger or a pen, for forms and onboarding. Strokes follow the pen's pressure and are
+ * smoothed into curves; Undo takes back the last one. "Type instead" sets a typed name in a script face, for people who
+ * can't draw. The value is a PNG (or SVG) data URL, sent with a form under its `name`.
+ */
+export declare const SignaturePad: import("react").ForwardRefExoticComponent<SignaturePadProps & import("react").RefAttributes<SignaturePadHandle>>;

package/dist/components/SignaturePad/SignaturePad.d.ts

@@ -0,0 +1,8 @@
+import type { SignaturePadHandle, SignaturePadProps } from "./SignaturePad.types.js";
+export type { SignaturePadHandle, SignaturePadLabels, SignaturePadProps } from "./SignaturePad.types.js";
+/**
+ * A box to sign in with a mouse, a finger or a pen, for forms and onboarding. Strokes follow the pen's pressure and are
+ * smoothed into curves; Undo takes back the last one. "Type instead" sets a typed name in a script face, for people who
+ * can't draw. The value is a PNG (or SVG) data URL, sent with a form under its `name`.
+ */
+export declare const SignaturePad: import("react").ForwardRefExoticComponent<SignaturePadProps & import("react").RefAttributes<SignaturePadHandle>>;

package/dist/components/SignaturePad/SignaturePad.types.d.cts

@@ -0,0 +1,102 @@
+export interface SignaturePadLabels {
+    /** The prompt on the empty pad.
+     * @default "Sign here" */
+    signHere?: string;
+    /** @default "Clear" */
+    clear?: string;
+    /** Takes back the last stroke.
+     * @default "Undo" */
+    undo?: string;
+    /** Switches to typing a name, for people who can't draw (with a keyboard, say).
+     * @default "Type instead" */
+    typeInstead?: string;
+    /** Switches back to drawing.
+     * @default "Draw instead" */
+    drawInstead?: string;
+    /** The typed name's placeholder, and its label when there's no Field.
+     * @default "Type your name" */
+    typeName?: string;
+    /** Reads out the pad, which is an image, for screen readers.
+     * @default (signed) => signed ? "Signature, signed" : "Signature, empty" */
+    state?(signed: boolean): string;
+}
+export interface SignaturePadProps {
+    /**
+     * The signature, when you control it: a data URL, "data:image/png;base64,…" (or "data:image/svg+xml,…" with
+     * `format="svg"`), ready for an <img src>. "" is no signature. A value that didn't come from the pad, such as a saved
+     * one, is drawn in, to show or sign over.
+     */
+    value?: string;
+    /** The signature at first, when uncontrolled.
+     * @default "" */
+    defaultValue?: string;
+    /** Called with the new data URL when a stroke ends, a stroke is undone, the typed name changes, or it's cleared (""). */
+    onChange?(value: string): void;
+    /** What the value holds: a PNG at twice the pad's size, or an SVG of the strokes (each at its average width).
+     * @default "png" */
+    format?: "png" | "svg";
+    /** The form field name: the data URL is sent under it (nothing when it's empty). */
+    name?: string;
+    /** Asks for a signature before the form can be sent. Needs a `name`. */
+    required?: boolean;
+    /** Marks it invalid, with an error colour; Field sets this. */
+    isInvalid?: boolean;
+    /** The ink on screen, as any CSS colour (a token too). It's also the exported ink when set.
+     * @default the text colour, so it follows the theme */
+    penColor?: string;
+    /** The ink in the exported value when there's no `penColor`, so a signature drawn in dark mode isn't saved white.
+     * @default "#111111" */
+    exportColor?: string;
+    /** A colour to fill the exported image's background with. Without it, the export is transparent, and a saved
+     * signature shown in the pad is re-inked in the pen colour, so it reads in either theme.
+     * @default undefined */
+    background?: string;
+    /** The stroke width in pixels. A pen's pressure makes it thinner or up to 1.6 times thicker.
+     * @default 2.5 */
+    penWidth?: number;
+    /** The drawing area's height, in pixels or any CSS length.
+     * @default 160 */
+    height?: number | string;
+    /** Offers "Type instead": a text box whose name is set in a script face as the signature.
+     * @default true */
+    allowTyping?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** Shows the signature without the buttons, and nothing can be drawn.
+     * @default false */
+    readOnly?: boolean;
+    /** Called when Clear is pressed. */
+    onClear?(): void;
+    /** The words it uses, for other languages. */
+    labels?: SignaturePadLabels;
+    /** Names the pad for screen readers when there's no Field label, ahead of its state: "Your signature". */
+    "aria-label"?: string;
+    /** Names the pad by another element's id, such as a Field's label; Field sets this. */
+    "aria-labelledby"?: string;
+    /** Ids of the hint or error that describe it; Field sets this. */
+    "aria-describedby"?: string;
+    /** The id of the pad (or of the text box, when typing), so a Field's label points at it; Field sets this. */
+    id?: string;
+    className?: string;
+}
+/** What a ref to a SignaturePad can do. */
+export interface SignaturePadHandle {
+    /** Empties the pad (and calls onChange with ""). */
+    clear(): void;
+    /** The signature as a data URL, in `format` or the one given; "" when it's empty. */
+    toDataURL(format?: "png" | "svg"): string;
+    /** True when nothing has been drawn or typed. */
+    isEmpty(): boolean;
+}
+/** One sampled point of a stroke: where it is, in pixels, and its width as a share of penWidth. Internal. */
+export interface SignaturePoint {
+    x: number;
+    y: number;
+    w: number;
+}
+/** What paints the pad, on screen or into an export. Internal. */
+export interface SignaturePaint {
+    width: number;
+    height: number;
+    color: string;
+}

package/dist/components/SignaturePad/SignaturePad.types.d.ts

@@ -0,0 +1,102 @@
+export interface SignaturePadLabels {
+    /** The prompt on the empty pad.
+     * @default "Sign here" */
+    signHere?: string;
+    /** @default "Clear" */
+    clear?: string;
+    /** Takes back the last stroke.
+     * @default "Undo" */
+    undo?: string;
+    /** Switches to typing a name, for people who can't draw (with a keyboard, say).
+     * @default "Type instead" */
+    typeInstead?: string;
+    /** Switches back to drawing.
+     * @default "Draw instead" */
+    drawInstead?: string;
+    /** The typed name's placeholder, and its label when there's no Field.
+     * @default "Type your name" */
+    typeName?: string;
+    /** Reads out the pad, which is an image, for screen readers.
+     * @default (signed) => signed ? "Signature, signed" : "Signature, empty" */
+    state?(signed: boolean): string;
+}
+export interface SignaturePadProps {
+    /**
+     * The signature, when you control it: a data URL, "data:image/png;base64,…" (or "data:image/svg+xml,…" with
+     * `format="svg"`), ready for an <img src>. "" is no signature. A value that didn't come from the pad, such as a saved
+     * one, is drawn in, to show or sign over.
+     */
+    value?: string;
+    /** The signature at first, when uncontrolled.
+     * @default "" */
+    defaultValue?: string;
+    /** Called with the new data URL when a stroke ends, a stroke is undone, the typed name changes, or it's cleared (""). */
+    onChange?(value: string): void;
+    /** What the value holds: a PNG at twice the pad's size, or an SVG of the strokes (each at its average width).
+     * @default "png" */
+    format?: "png" | "svg";
+    /** The form field name: the data URL is sent under it (nothing when it's empty). */
+    name?: string;
+    /** Asks for a signature before the form can be sent. Needs a `name`. */
+    required?: boolean;
+    /** Marks it invalid, with an error colour; Field sets this. */
+    isInvalid?: boolean;
+    /** The ink on screen, as any CSS colour (a token too). It's also the exported ink when set.
+     * @default the text colour, so it follows the theme */
+    penColor?: string;
+    /** The ink in the exported value when there's no `penColor`, so a signature drawn in dark mode isn't saved white.
+     * @default "#111111" */
+    exportColor?: string;
+    /** A colour to fill the exported image's background with. Without it, the export is transparent, and a saved
+     * signature shown in the pad is re-inked in the pen colour, so it reads in either theme.
+     * @default undefined */
+    background?: string;
+    /** The stroke width in pixels. A pen's pressure makes it thinner or up to 1.6 times thicker.
+     * @default 2.5 */
+    penWidth?: number;
+    /** The drawing area's height, in pixels or any CSS length.
+     * @default 160 */
+    height?: number | string;
+    /** Offers "Type instead": a text box whose name is set in a script face as the signature.
+     * @default true */
+    allowTyping?: boolean;
+    /** @default false */
+    disabled?: boolean;
+    /** Shows the signature without the buttons, and nothing can be drawn.
+     * @default false */
+    readOnly?: boolean;
+    /** Called when Clear is pressed. */
+    onClear?(): void;
+    /** The words it uses, for other languages. */
+    labels?: SignaturePadLabels;
+    /** Names the pad for screen readers when there's no Field label, ahead of its state: "Your signature". */
+    "aria-label"?: string;
+    /** Names the pad by another element's id, such as a Field's label; Field sets this. */
+    "aria-labelledby"?: string;
+    /** Ids of the hint or error that describe it; Field sets this. */
+    "aria-describedby"?: string;
+    /** The id of the pad (or of the text box, when typing), so a Field's label points at it; Field sets this. */
+    id?: string;
+    className?: string;
+}
+/** What a ref to a SignaturePad can do. */
+export interface SignaturePadHandle {
+    /** Empties the pad (and calls onChange with ""). */
+    clear(): void;
+    /** The signature as a data URL, in `format` or the one given; "" when it's empty. */
+    toDataURL(format?: "png" | "svg"): string;
+    /** True when nothing has been drawn or typed. */
+    isEmpty(): boolean;
+}
+/** One sampled point of a stroke: where it is, in pixels, and its width as a share of penWidth. Internal. */
+export interface SignaturePoint {
+    x: number;
+    y: number;
+    w: number;
+}
+/** What paints the pad, on screen or into an export. Internal. */
+export interface SignaturePaint {
+    width: number;
+    height: number;
+    color: string;
+}

package/dist/components/TransferList/TransferList.d.cts

@@ -0,0 +1,7 @@
+import type { TransferListProps } from "./TransferList.types.cjs";
+export type { TransferListOption, TransferListProps } from "./TransferList.types.cjs";
+/**
+ * Two lists side by side, the available items and the chosen ones, with buttons between them that move the selected
+ * items across: permissions, the columns a table shows, a team's members. Double-click or Enter moves an item too.
+ */
+export declare const TransferList: import("react").ForwardRefExoticComponent<TransferListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/TransferList/TransferList.d.ts

@@ -0,0 +1,7 @@
+import type { TransferListProps } from "./TransferList.types.js";
+export type { TransferListOption, TransferListProps } from "./TransferList.types.js";
+/**
+ * Two lists side by side, the available items and the chosen ones, with buttons between them that move the selected
+ * items across: permissions, the columns a table shows, a team's members. Double-click or Enter moves an item too.
+ */
+export declare const TransferList: import("react").ForwardRefExoticComponent<TransferListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/TransferList/TransferList.types.d.cts

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+export interface TransferListOption {
+    /** What goes in the value when it's chosen. Unique among the options. */
+    value: string;
+    /** The text in the list, matched by the search and read out when it moves. */
+    label: string;
+    /** A muted line under the label; matched by the search when it's a string. */
+    description?: ReactNode;
+    /** Stays on its side: it can't be selected or moved. */
+    disabled?: boolean;
+    /** A heading to show it under. Options with the same group are listed together, groups in the order they first appear. */
+    group?: string;
+}
+/** One side of the transfer list. Internal. */
+export type TransferListSide = "source" | "target";
+export interface TransferListProps {
+    /** Everything that can be chosen. The available side lists them in this order. */
+    options: TransferListOption[];
+    /** The chosen values, in order, when you control them. */
+    value?: string[];
+    /** The chosen values at first, when it controls them itself.
+     * @default [] */
+    defaultValue?: string[];
+    /** Called with the chosen values when they move or are reordered. Moved values join the end. */
+    onChange?(value: string[]): void;
+    /** The heading over the available list, which also names it.
+     * @default "Available" */
+    sourceLabel?: string;
+    /** The heading over the chosen list, which also names it.
+     * @default "Selected" */
+    targetLabel?: string;
+    /** A search box over each list that filters it by label and description.
+     * @default false */
+    searchable?: boolean;
+    /** Adds buttons that move every item (that the search shows) from one side to the other.
+     * @default false */
+    showMoveAll?: boolean;
+    /** Adds Move up and Move down buttons under the chosen list (and Alt+Up/Down in it), for an order that matters.
+     * The chosen list is then shown without group headings, in the value's order.
+     * @default false */
+    orderable?: boolean;
+    /** Submits each chosen value under this name, in a hidden input, so a Form or a plain form sends them as a list. */
+    name?: string;
+    /** Fades both lists and the buttons, and takes them out of the tab order.
+     * @default false */
+    disabled?: boolean;
+    /** The lists' height, e.g. 320 or "40vh"; they scroll past it.
+     * @default 280 */
+    height?: number | string;
+    id?: string;
+    /** The words it uses, for other languages. `to` is the side's label. */
+    labels?: {
+        /** The count under each heading. @default (selected, total) => `${selected} of ${total} selected` */
+        count?(selected: number, total: number): string;
+        /** The button that moves the selected items. @default (count, to) => `Move 2 selected to ${to}`, or `Move selected to ${to}` with none */
+        moveSelected?(count: number, to: string): string;
+        /** The button that moves them all, with `showMoveAll`. @default (to) => `Move all to ${to}` */
+        moveAll?(to: string): string;
+        /** Read out after a move. @default (names, to) => `Moved Ada and Grace to ${to}`, or `Moved 7 items to ${to}` past five */
+        moved?(names: string[], to: string): string;
+        /** With `orderable`. @default "Move up" */
+        moveUp?: string;
+        /** With `orderable`. @default "Move down" */
+        moveDown?: string;
+        /** Read out after reordering. @default (names, direction) => `Moved Ada up` */
+        reordered?(names: string[], direction: "up" | "down"): string;
+        /** Names a side's search box. @default (side) => `Search ${side}` */
+        search?(side: string): string;
+        /** Shown in an empty list. @default "No items" */
+        empty?: ReactNode;
+        /** Shown when the search matches nothing. @default "No matches" */
+        noMatches?: ReactNode;
+    };
+    className?: string;
+}