@openwarelabs/ui 0.14.1 → 0.16.0

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/SortableList/SortableList.d.cts

@@ -0,0 +1,7 @@
+import type { SortableListProps } from "./SortableList.types.cjs";
+export type { SortableListItemState, SortableListLabels, SortableListProps } from "./SortableList.types.cjs";
+/**
+ * A list people put in order: drag an item (by the whole row, or by its grip with `handle`) and the others move to
+ * make room, or focus it, press Space, move it with the arrow keys and press Space again. Each step is read out.
+ */
+export declare function SortableList<Item>({ items, defaultItems, onReorder, renderItem, getKey, itemLabel, label, handle, orientation, disabled, labels: labelsProp, className, ...props }: SortableListProps<Item>): import("react").JSX.Element;

package/dist/components/SortableList/SortableList.d.ts

@@ -0,0 +1,7 @@
+import type { SortableListProps } from "./SortableList.types.js";
+export type { SortableListItemState, SortableListLabels, SortableListProps } from "./SortableList.types.js";
+/**
+ * A list people put in order: drag an item (by the whole row, or by its grip with `handle`) and the others move to
+ * make room, or focus it, press Space, move it with the arrow keys and press Space again. Each step is read out.
+ */
+export declare function SortableList<Item>({ items, defaultItems, onReorder, renderItem, getKey, itemLabel, label, handle, orientation, disabled, labels: labelsProp, className, ...props }: SortableListProps<Item>): import("react").JSX.Element;

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

@@ -0,0 +1,82 @@
+import type { HTMLAttributes, Key, ReactNode } from "react";
+export interface SortableListLabels {
+    /** Read out when an item is picked up.
+     * @default (item, position, total) => `Picked up ${item}. Position ${position} of ${total}.` */
+    pickedUp?(item: string, position: number, total: number): string;
+    /** Read out at each step while it's carried.
+     * @default (item, position, total) => `${item}, position ${position} of ${total}.` */
+    moved?(item: string, position: number, total: number): string;
+    /** Read out when it's put down.
+     * @default (item, position, total) => `Dropped ${item} at position ${position} of ${total}.` */
+    dropped?(item: string, position: number, total: number): string;
+    /** Read out when Escape puts it back.
+     * @default (item, position, total) => `Cancelled. ${item} is back at position ${position} of ${total}.` */
+    cancelled?(item: string, position: number, total: number): string;
+    /** Each item's description, telling screen reader users how to move it.
+     * @default "Press Space to pick up, the arrow keys to move, Space to drop, Escape to cancel." */
+    instructions?: string;
+    /** The grip's name, before the item's own text: "Reorder Columns".
+     * @default "Reorder" */
+    handle?: string;
+}
+export interface SortableListItemState {
+    /** Where the item is in the list, from 0. */
+    index: number;
+    /** It's picked up: being dragged, or carried with the keyboard. */
+    isDragging: boolean;
+}
+export interface SortableListProps<Item> extends Omit<HTMLAttributes<HTMLOListElement>, "children" | "onChange" | "defaultValue"> {
+    /** The items in order, when you control them. */
+    items?: Item[];
+    /** The items at first, when it keeps the order itself.
+     * @default [] */
+    defaultItems?: Item[];
+    /** Called with the items in their new order, and where the moved one was and went (indexes from 0). */
+    onReorder?(items: Item[], move: {
+        from: number;
+        to: number;
+    }): void;
+    /** What each item shows. */
+    renderItem(item: Item, state: SortableListItemState): ReactNode;
+    /** Gives each item a unique key.
+     * @default (item) => item.id, or the item itself when it's a string or a number */
+    getKey?(item: Item): Key;
+    /** Names an item in what's read out as it moves ("Picked up Email"). Defaults to the item when it's a string
+     * or a number, else the text it shows. */
+    itemLabel?(item: Item): string;
+    /** Names the list for screen readers: "Column order". Required unless `aria-labelledby` points at a heading. */
+    label?: string;
+    /**
+     * Only a grip at the start of each row picks it up, rather than the whole row. Use it when rows hold their own
+     * buttons, switches or links, or on long lists people scroll by touch.
+     * @default false
+     */
+    handle?: boolean;
+    /** `horizontal` lays the items in a row that scrolls sideways; the arrow keys follow the text direction.
+     * @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** @default false */
+    disabled?: boolean;
+    /** The words it reads out, for other languages. */
+    labels?: SortableListLabels;
+}
+/** Where the items were when the drag started, along the list's axis, in viewport pixels. Internal. */
+export interface SortableGeometry {
+    lo: number[];
+    hi: number[];
+    /** -1 when the list runs backwards on screen: a row in right-to-left text. */
+    dir: number;
+    /** How far the others move to make room: the picked-up item's size and the gap after it. */
+    step: number;
+    scroller: Element;
+    scroll: number;
+}
+/** A drag in progress, by pointer or keyboard. Internal. */
+export interface SortableDrag {
+    from: number;
+    to: number;
+    /** How far a dragged item has followed the pointer. */
+    offset: number;
+    keyboard: boolean;
+    geo: SortableGeometry;
+}

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

@@ -0,0 +1,82 @@
+import type { HTMLAttributes, Key, ReactNode } from "react";
+export interface SortableListLabels {
+    /** Read out when an item is picked up.
+     * @default (item, position, total) => `Picked up ${item}. Position ${position} of ${total}.` */
+    pickedUp?(item: string, position: number, total: number): string;
+    /** Read out at each step while it's carried.
+     * @default (item, position, total) => `${item}, position ${position} of ${total}.` */
+    moved?(item: string, position: number, total: number): string;
+    /** Read out when it's put down.
+     * @default (item, position, total) => `Dropped ${item} at position ${position} of ${total}.` */
+    dropped?(item: string, position: number, total: number): string;
+    /** Read out when Escape puts it back.
+     * @default (item, position, total) => `Cancelled. ${item} is back at position ${position} of ${total}.` */
+    cancelled?(item: string, position: number, total: number): string;
+    /** Each item's description, telling screen reader users how to move it.
+     * @default "Press Space to pick up, the arrow keys to move, Space to drop, Escape to cancel." */
+    instructions?: string;
+    /** The grip's name, before the item's own text: "Reorder Columns".
+     * @default "Reorder" */
+    handle?: string;
+}
+export interface SortableListItemState {
+    /** Where the item is in the list, from 0. */
+    index: number;
+    /** It's picked up: being dragged, or carried with the keyboard. */
+    isDragging: boolean;
+}
+export interface SortableListProps<Item> extends Omit<HTMLAttributes<HTMLOListElement>, "children" | "onChange" | "defaultValue"> {
+    /** The items in order, when you control them. */
+    items?: Item[];
+    /** The items at first, when it keeps the order itself.
+     * @default [] */
+    defaultItems?: Item[];
+    /** Called with the items in their new order, and where the moved one was and went (indexes from 0). */
+    onReorder?(items: Item[], move: {
+        from: number;
+        to: number;
+    }): void;
+    /** What each item shows. */
+    renderItem(item: Item, state: SortableListItemState): ReactNode;
+    /** Gives each item a unique key.
+     * @default (item) => item.id, or the item itself when it's a string or a number */
+    getKey?(item: Item): Key;
+    /** Names an item in what's read out as it moves ("Picked up Email"). Defaults to the item when it's a string
+     * or a number, else the text it shows. */
+    itemLabel?(item: Item): string;
+    /** Names the list for screen readers: "Column order". Required unless `aria-labelledby` points at a heading. */
+    label?: string;
+    /**
+     * Only a grip at the start of each row picks it up, rather than the whole row. Use it when rows hold their own
+     * buttons, switches or links, or on long lists people scroll by touch.
+     * @default false
+     */
+    handle?: boolean;
+    /** `horizontal` lays the items in a row that scrolls sideways; the arrow keys follow the text direction.
+     * @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** @default false */
+    disabled?: boolean;
+    /** The words it reads out, for other languages. */
+    labels?: SortableListLabels;
+}
+/** Where the items were when the drag started, along the list's axis, in viewport pixels. Internal. */
+export interface SortableGeometry {
+    lo: number[];
+    hi: number[];
+    /** -1 when the list runs backwards on screen: a row in right-to-left text. */
+    dir: number;
+    /** How far the others move to make room: the picked-up item's size and the gap after it. */
+    step: number;
+    scroller: Element;
+    scroll: number;
+}
+/** A drag in progress, by pointer or keyboard. Internal. */
+export interface SortableDrag {
+    from: number;
+    to: number;
+    /** How far a dragged item has followed the pointer. */
+    offset: number;
+    keyboard: boolean;
+    geo: SortableGeometry;
+}

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;
+}