@nizivo/react 0.0.0-stage → 0.2.0

package/dist/switch/index.d.ts

@@ -0,0 +1,2 @@
+import { Switch, SwitchChangeReason, SwitchProps, SwitchState } from "./switch.client.js";
+export { Switch, type SwitchChangeReason, type SwitchProps, type SwitchState };

package/dist/switch/index.js

@@ -0,0 +1 @@
+export { Switch } from "./switch.client.js";

package/dist/switch/switch.client.d.ts

@@ -0,0 +1,33 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails } from "../contracts/details.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/switch/switch.client.d.ts
+/** Every change comes from the native `change` event: a click, Space, or a click on the label. */
+export type SwitchChangeReason = "input";
+/** What a `render` function receives for the root `<label>`. */
+export interface SwitchState {
+  /** An error message is presented (the Field's, or the `invalid` prop). */
+  invalid: boolean;
+  disabled: boolean;
+  required: boolean;
+}
+export interface SwitchProps extends Omit<ComponentPropsWithRef<"input">, "type" | "role" | "children" | "readOnly" | "size"> {
+  /** Controlled state: on or off. */
+  checked?: boolean;
+  /** Uncontrolled initial state. @default false */
+  defaultChecked?: boolean;
+  /** Called after the consumer's own `onChange`, unless it called `preventDefault()`. */
+  onCheckedChange?: (checked: boolean, details: ChangeDetails<SwitchChangeReason>) => void;
+  /** An error message is presented for this switch. Inside a Field, the Field decides. */
+  invalid?: boolean;
+  /** Composition of the root `<label>`, the hit target. */
+  render?: RenderProp<SwitchState>;
+  /** The label, after the track. Without one, name the switch with `aria-label`. */
+  children?: ReactNode;
+}
+/**
+ * `className` and `style` go on the root `<label>`; every other attribute, `ref` included, goes on the
+ * native `<input>`. With `name`, the form submits `value` (default `"on"`) while the switch is on.
+ */
+export declare function Switch({ id, name, required, disabled, invalid, "aria-describedby": describedBy, onCheckedChange, render, className, style, children, ...rest }: SwitchProps): ReactElement;
+//#endregion

package/dist/switch/switch.client.js

@@ -0,0 +1,63 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { details } from "../contracts/details.js";
+import { stateAttrs } from "../contracts/state.js";
+import { presented } from "../_internal/field.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/switch/switch.client.tsx
+/**
+* `className` and `style` go on the root `<label>`; every other attribute, `ref` included, goes on the
+* native `<input>`. With `name`, the form submits `value` (default `"on"`) while the switch is on.
+*/
+function Switch({ id, name, required, disabled, invalid, "aria-describedby": describedBy, onCheckedChange, render, className, style, children, ...rest }) {
+	const field = useFieldControl({
+		id,
+		name,
+		required,
+		disabled,
+		invalid,
+		"aria-describedby": describedBy
+	});
+	const { readOnly: _readOnly, ...control } = field.controlProps;
+	const own = {
+		...control,
+		onChange(event) {
+			onCheckedChange?.(event.currentTarget.checked, details("input", event.nativeEvent));
+		}
+	};
+	const state = {
+		invalid: field.invalid,
+		disabled: field.disabled,
+		required: field.required
+	};
+	return renderElement("label", render, state, {
+		"data-slot": "switch",
+		...stateAttrs(state),
+		className: cx("nz-switch nz-hit-target", className),
+		style,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("input", {
+				...mergeProps(own, rest),
+				type: "checkbox",
+				role: "switch",
+				className: "nz-switch-input",
+				"data-slot": "switch-input"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-switch-thumb",
+				"data-slot": "switch-thumb",
+				"aria-hidden": "true"
+			}),
+			presented(children) && /* @__PURE__ */ jsx("span", {
+				className: "nz-switch-label",
+				"data-slot": "switch-label",
+				children
+			})
+		] })
+	});
+}
+//#endregion
+export { Switch };

package/dist/tab-nav/index.d.ts

@@ -0,0 +1,3 @@
+import { TabNavLink, TabNavLinkProps, TabNavLinkState, TabNavRoot, TabNavRootProps } from "./tab-nav.js";
+import { tab_nav_parts_d_exports } from "./tab-nav.parts.js";
+export { tab_nav_parts_d_exports as TabNav, TabNavLink, type TabNavLinkProps, type TabNavLinkState, TabNavRoot, type TabNavRootProps };

package/dist/tab-nav/index.js

@@ -0,0 +1,3 @@
+import { TabNavLink, TabNavRoot } from "./tab-nav.js";
+import { tab_nav_parts_exports } from "./tab-nav.parts.js";
+export { tab_nav_parts_exports as TabNav, TabNavLink, TabNavRoot };

package/dist/tab-nav/tab-nav.d.ts

@@ -0,0 +1,36 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/tab-nav/tab-nav.d.ts
+export interface TabNavRootProps extends ComponentPropsWithRef<"nav"> {
+  /**
+   * Names the landmark ("Order status"). A page with more than one navigation landmark needs a
+   * name on each.
+   */
+  "aria-label"?: string;
+  /** Must render a navigation landmark (a `<nav>`, or an element with `role="navigation"`). */
+  render?: RenderProp<Record<string, never>>;
+}
+export interface TabNavLinkState {
+  current: boolean;
+}
+export interface TabNavLinkProps extends Omit<ComponentPropsWithRef<"a">, "children"> {
+  /**
+   * The link to the page being shown: sets `aria-current="page"` and draws the indicator. The page
+   * knows its own route, so it says which link is current (a router's `usePathname` needs a client
+   * component; a server page reads its params). @default false
+   */
+  current?: boolean;
+  /** A decorative glyph before the label (16 px). */
+  icon?: ReactNode;
+  /** A count after the label, such as the number of orders in a status. */
+  count?: ReactNode;
+  /**
+   * The router's link, for example `render={<Link href="/orders?status=open" />}` (Next.js, React
+   * Router, TanStack Router, Astro's plain `<a>`). It must render an `<a>`.
+   */
+  render?: RenderProp<TabNavLinkState>;
+  children: ReactNode;
+}
+export declare function TabNavRoot({ render, className, ...rest }: TabNavRootProps): ReactElement;
+export declare function TabNavLink({ current, icon, count, render, className, children, ...rest }: TabNavLinkProps): ReactElement;
+//#endregion

package/dist/tab-nav/tab-nav.js

@@ -0,0 +1,47 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/tab-nav/tab-nav.tsx
+function TabNavRoot({ render, className, ...rest }) {
+	return renderElement("nav", render, {}, {
+		"data-slot": "tab-nav",
+		...rest,
+		className: cx("nz-tab-nav", className)
+	});
+}
+function TabNavLink({ current = false, icon, count, render, className, children, ...rest }) {
+	return renderElement("a", render, { current }, {
+		"data-slot": "tab-nav-link",
+		"data-focus-inset": "",
+		...rest,
+		"aria-current": current ? "page" : rest["aria-current"],
+		className: cx("nz-tab-nav-link", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			icon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-tab-nav-icon",
+				"data-slot": "tab-nav-icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "nz-tab-nav-label",
+				"data-slot": "tab-nav-label",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "nz-tab-nav-text",
+					children
+				}), /* @__PURE__ */ jsx("span", {
+					className: "nz-tab-nav-sizer",
+					"aria-hidden": "true",
+					children
+				})]
+			}),
+			count != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-tab-nav-count",
+				"data-slot": "tab-nav-count",
+				children: count
+			})
+		] })
+	});
+}
+//#endregion
+export { TabNavLink, TabNavRoot };

package/dist/tab-nav/tab-nav.parts.d.ts

@@ -0,0 +1,6 @@
+import { TabNavLink, TabNavRoot } from "./tab-nav.js";
+declare namespace tab_nav_parts_d_exports {
+  export { TabNavLink as Link, TabNavRoot as Root };
+}
+//#endregion
+export { TabNavLink as Link, TabNavRoot as Root, tab_nav_parts_d_exports };

package/dist/tab-nav/tab-nav.parts.js

@@ -0,0 +1,9 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { TabNavLink, TabNavRoot } from "./tab-nav.js";
+//#region src/tab-nav/tab-nav.parts.ts
+var tab_nav_parts_exports = /* @__PURE__ */ __exportAll({
+	Link: () => TabNavLink,
+	Root: () => TabNavRoot
+});
+//#endregion
+export { TabNavLink as Link, TabNavRoot as Root, tab_nav_parts_exports };

package/dist/table/index.d.ts

@@ -0,0 +1,3 @@
+import { TableBody, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableCellState, TableContainer, TableContainerProps, TableFooter, TableHead, TableHeadProps, TableHeadState, TableHeader, TableRoot, TableRootProps, TableRow, TableRowLink, TableRowLinkProps, TableRowProps, TableRowState, TableSectionProps, TableSort, TableSortButton, TableSortButtonProps } from "./table.js";
+import { table_parts_d_exports } from "./table.parts.js";
+export { table_parts_d_exports as Table, TableBody, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, type TableCellState, TableContainer, type TableContainerProps, TableFooter, TableHead, type TableHeadProps, type TableHeadState, TableHeader, TableRoot, type TableRootProps, TableRow, TableRowLink, type TableRowLinkProps, type TableRowProps, type TableRowState, type TableSectionProps, type TableSort, TableSortButton, type TableSortButtonProps };

package/dist/table/index.js

@@ -0,0 +1,3 @@
+import { TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRoot, TableRow, TableRowLink, TableSortButton } from "./table.js";
+import { table_parts_exports } from "./table.parts.js";
+export { table_parts_exports as Table, TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRoot, TableRow, TableRowLink, TableSortButton };

package/dist/table/table.d.ts

@@ -0,0 +1,101 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/table/table.d.ts
+type Empty = Record<string, never>;
+export type TableSort = "ascending" | "descending";
+export interface TableContainerProps extends ComponentPropsWithRef<"div"> {
+  /**
+   * Names the container as a scrollable region and puts it in the Tab order, so a keyboard can
+   * scroll a table wider than the screen (Safari and Firefox do not focus a scroller on their own).
+   * Give it when the table can scroll sideways and its rows hold no link or control.
+   */
+  label?: string;
+  render?: RenderProp<Empty>;
+}
+export interface TableRootProps extends ComponentPropsWithRef<"table"> {
+  render?: RenderProp<Empty>;
+}
+export interface TableCaptionProps extends ComponentPropsWithRef<"caption"> {
+  /**
+   * Keeps the caption as the table's accessible name but hides it from sight, for a table whose
+   * card already shows a heading. @default false
+   */
+  visuallyHidden?: boolean;
+  render?: RenderProp<Empty>;
+}
+export interface TableSectionProps extends ComponentPropsWithRef<"tbody"> {
+  render?: RenderProp<Empty>;
+}
+export interface TableRowState {
+  selected: boolean;
+  interactive: boolean;
+}
+export interface TableRowProps extends ComponentPropsWithRef<"tr"> {
+  /** `data-selected` (never `aria-selected` inside a table, §16.2). @default false */
+  selected?: boolean;
+  /**
+   * The whole row is the hit area of its `Table.RowLink` (a stretched link) and shows Figma's hover.
+   * Other controls in the row stay above the link. @default false
+   */
+  interactive?: boolean;
+  render?: RenderProp<TableRowState>;
+}
+export interface TableHeadState {
+  sort: TableSort | undefined;
+  numeric: boolean;
+}
+export interface TableHeadProps extends ComponentPropsWithRef<"th"> {
+  /** The column's current sort: `aria-sort` and `data-sort` on the `<th>`. */
+  sort?: TableSort;
+  /** A column of numbers: end-aligned, tabular figures. @default false */
+  numeric?: boolean;
+  /** `row` for a row header in the body. @default 'col' */
+  scope?: "col" | "row" | "colgroup" | "rowgroup";
+  render?: RenderProp<TableHeadState>;
+}
+export interface TableCellState {
+  numeric: boolean;
+}
+export interface TableCellProps extends ComponentPropsWithRef<"td"> {
+  /** A number: end-aligned, tabular figures. @default false */
+  numeric?: boolean;
+  render?: RenderProp<TableCellState>;
+}
+export interface TableSortButtonProps extends ComponentPropsWithRef<"button"> {
+  /**
+   * The same page sorted by this column, for example `href="?sort=-total"`: the part renders an
+   * `<a>`, and the URL holds the state. With neither `href` nor `render` it is a
+   * `<button type="button">` for your own handler.
+   */
+  href?: string;
+  /** The router's link, for example `render={<Link href="?sort=-total" />}`. */
+  render?: RenderProp<Empty>;
+}
+export interface TableRowLinkProps extends ComponentPropsWithRef<"a"> {
+  /** The router's link, for example `render={<Link href="/orders/1042" />}`. It must render an `<a>`. */
+  render?: RenderProp<Empty>;
+}
+/** The table's box: the border, the radius and the horizontal scroll of a wide table. */
+export declare function TableContainer({ label, render, className, ...rest }: TableContainerProps): ReactElement;
+export declare function TableRoot({ render, className, ...rest }: TableRootProps): ReactElement;
+/** The table's name. Give every table one: a caption, or `aria-labelledby` to a visible heading. */
+export declare function TableCaption({ visuallyHidden, render, className, ...rest }: TableCaptionProps): ReactElement;
+export declare function TableHeader({ render, className, ...rest }: TableSectionProps): ReactElement;
+export declare function TableBody({ render, className, ...rest }: TableSectionProps): ReactElement;
+export declare function TableFooter({ render, className, ...rest }: TableSectionProps): ReactElement;
+export declare function TableRow({ selected, interactive, render, className, ...rest }: TableRowProps): ReactElement;
+export declare function TableHead({ sort, numeric, scope, render, className, ...rest }: TableHeadProps): ReactElement;
+export declare function TableCell({ numeric, render, className, ...rest }: TableCellProps): ReactElement;
+/**
+ * The column's label as a control. Its arrow follows the `sort` of the `Table.Head` it sits in
+ * (up for ascending, down for descending, both ways when unsorted) through CSS, so it needs no
+ * client code; the `<th>`'s `aria-sort` tells assistive technology the current order.
+ */
+export declare function TableSortButton({ href, render, className, children, ...rest }: TableSortButtonProps): ReactElement;
+/**
+ * A row's link, usually its first cell's text (Figma Order Row: the order number). In a row with
+ * `interactive`, it stretches over the whole row.
+ */
+export declare function TableRowLink({ render, className, ...rest }: TableRowLinkProps): ReactElement;
+//#endregion
+export {};

package/dist/table/table.js

@@ -0,0 +1,121 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { ChevronGlyph, ChevronsUpDownGlyph } from "../_internal/glyphs.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/table/table.tsx
+/** The table's box: the border, the radius and the horizontal scroll of a wide table. */
+function TableContainer({ label, render, className, ...rest }) {
+	return renderElement("div", render, {}, {
+		"data-slot": "table-container",
+		...label === void 0 ? {} : {
+			role: "region",
+			"aria-label": label,
+			tabIndex: 0
+		},
+		...rest,
+		className: cx("nz-table-container", className)
+	});
+}
+function TableRoot({ render, className, ...rest }) {
+	return renderElement("table", render, {}, {
+		"data-slot": "table",
+		...rest,
+		className: cx("nz-table", className)
+	});
+}
+/** The table's name. Give every table one: a caption, or `aria-labelledby` to a visible heading. */
+function TableCaption({ visuallyHidden = false, render, className, ...rest }) {
+	return renderElement("caption", render, {}, {
+		"data-slot": "table-caption",
+		...rest,
+		className: cx("nz-table-caption", visuallyHidden && "nz-visually-hidden", className)
+	});
+}
+function TableHeader({ render, className, ...rest }) {
+	return renderElement("thead", render, {}, {
+		"data-slot": "table-header",
+		...rest,
+		className: cx("nz-table-header", className)
+	});
+}
+function TableBody({ render, className, ...rest }) {
+	return renderElement("tbody", render, {}, {
+		"data-slot": "table-body",
+		...rest,
+		className: cx("nz-table-body", className)
+	});
+}
+function TableFooter({ render, className, ...rest }) {
+	return renderElement("tfoot", render, {}, {
+		"data-slot": "table-footer",
+		...rest,
+		className: cx("nz-table-footer", className)
+	});
+}
+function TableRow({ selected = false, interactive = false, render, className, ...rest }) {
+	return renderElement("tr", render, {
+		selected,
+		interactive
+	}, {
+		"data-slot": "table-row",
+		"data-selected": selected ? "" : void 0,
+		"data-interactive": interactive ? "" : void 0,
+		...rest,
+		className: cx("nz-table-row", className)
+	});
+}
+function TableHead({ sort, numeric = false, scope = "col", render, className, ...rest }) {
+	return renderElement("th", render, {
+		sort,
+		numeric
+	}, {
+		"data-slot": "table-head",
+		"data-sort": sort,
+		"data-numeric": numeric ? "" : void 0,
+		"aria-sort": sort,
+		scope,
+		...rest,
+		className: cx("nz-table-head", className)
+	});
+}
+function TableCell({ numeric = false, render, className, ...rest }) {
+	return renderElement("td", render, { numeric }, {
+		"data-slot": "table-cell",
+		"data-numeric": numeric ? "" : void 0,
+		...rest,
+		className: cx("nz-table-cell", className)
+	});
+}
+/**
+* The column's label as a control. Its arrow follows the `sort` of the `Table.Head` it sits in
+* (up for ascending, down for descending, both ways when unsorted) through CSS, so it needs no
+* client code; the `<th>`'s `aria-sort` tells assistive technology the current order.
+*/
+function TableSortButton({ href, render, className, children, ...rest }) {
+	return renderElement(href === void 0 ? "button" : "a", render, {}, {
+		"data-slot": "table-sort-button",
+		href,
+		type: href !== void 0 || render !== void 0 ? void 0 : "button",
+		...rest,
+		className: cx("nz-table-sort-button", "nz-hit-target", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [children, /* @__PURE__ */ jsxs("span", {
+			className: "nz-table-sort-icon",
+			"data-slot": "table-sort-icon",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx(ChevronsUpDownGlyph, {}), /* @__PURE__ */ jsx(ChevronGlyph, {})]
+		})] })
+	});
+}
+/**
+* A row's link, usually its first cell's text (Figma Order Row: the order number). In a row with
+* `interactive`, it stretches over the whole row.
+*/
+function TableRowLink({ render, className, ...rest }) {
+	return renderElement("a", render, {}, {
+		"data-slot": "table-row-link",
+		...rest,
+		className: cx("nz-table-row-link", className)
+	});
+}
+//#endregion
+export { TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRoot, TableRow, TableRowLink, TableSortButton };

package/dist/table/table.parts.d.ts

@@ -0,0 +1,6 @@
+import { TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRoot, TableRow, TableRowLink, TableSortButton } from "./table.js";
+declare namespace table_parts_d_exports {
+  export { TableBody as Body, TableCaption as Caption, TableCell as Cell, TableContainer as Container, TableFooter as Footer, TableHead as Head, TableHeader as Header, TableRoot as Root, TableRow as Row, TableRowLink as RowLink, TableSortButton as SortButton };
+}
+//#endregion
+export { TableBody as Body, TableCaption as Caption, TableCell as Cell, TableContainer as Container, TableFooter as Footer, TableHead as Head, TableHeader as Header, TableRoot as Root, TableRow as Row, TableRowLink as RowLink, TableSortButton as SortButton, table_parts_d_exports };

package/dist/table/table.parts.js

@@ -0,0 +1,18 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { TableBody, TableCaption, TableCell, TableContainer, TableFooter, TableHead, TableHeader, TableRoot, TableRow, TableRowLink, TableSortButton } from "./table.js";
+//#region src/table/table.parts.ts
+var table_parts_exports = /* @__PURE__ */ __exportAll({
+	Body: () => TableBody,
+	Caption: () => TableCaption,
+	Cell: () => TableCell,
+	Container: () => TableContainer,
+	Footer: () => TableFooter,
+	Head: () => TableHead,
+	Header: () => TableHeader,
+	Root: () => TableRoot,
+	Row: () => TableRow,
+	RowLink: () => TableRowLink,
+	SortButton: () => TableSortButton
+});
+//#endregion
+export { TableBody as Body, TableCaption as Caption, TableCell as Cell, TableContainer as Container, TableFooter as Footer, TableHead as Head, TableHeader as Header, TableRoot as Root, TableRow as Row, TableRowLink as RowLink, TableSortButton as SortButton, table_parts_exports };

package/dist/table-selection/index.d.ts

@@ -0,0 +1,3 @@
+import { TableSelection, TableSelectionProps } from "./table-selection.client.js";
+import { TableSelectAll, TableSelectAllProps, TableSelectRow, TableSelectRowProps, TableSelectionLabels } from "./table-selection.js";
+export { TableSelectAll, type TableSelectAllProps, TableSelectRow, type TableSelectRowProps, TableSelection, type TableSelectionLabels, type TableSelectionProps };

package/dist/table-selection/index.js

@@ -0,0 +1,3 @@
+import { TableSelection } from "./table-selection.client.js";
+import { TableSelectAll, TableSelectRow } from "./table-selection.js";
+export { TableSelectAll, TableSelectRow, TableSelection };

package/dist/table-selection/table-selection.client.d.ts

@@ -0,0 +1,14 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/table-selection/table-selection.client.d.ts
+export interface TableSelectionProps extends Omit<ComponentPropsWithRef<"div">, "ref"> {
+  /**
+   * The selected rows' values, after every change (and once on mount when a row is already
+   * checked, for example by the browser's form restoration). For a client owner; a Server Component
+   * reads the selection from the form.
+   */
+  onSelectionChange?: (ids: string[]) => void;
+  render?: RenderProp<Record<string, never>>;
+}
+export declare function TableSelection({ onSelectionChange, render, className, ...rest }: TableSelectionProps): ReactElement;
+//#endregion

package/dist/table-selection/table-selection.client.js

@@ -0,0 +1,84 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { useEffect, useRef } from "react";
+//#region src/table-selection/table-selection.client.tsx
+const ROW = "[data-slot=\"table-select-row-input\"]";
+const ALL = "[data-slot=\"table-select-all-input\"]";
+function TableSelection({ onSelectionChange, render, className, ...rest }) {
+	const root = useRef(null);
+	const report = useRef(onSelectionChange);
+	useEffect(() => {
+		report.current = onSelectionChange;
+	});
+	useEffect(() => {
+		const element = root.current;
+		if (element === null) return void 0;
+		const rows = () => [...element.querySelectorAll(ROW)];
+		let last = "";
+		let anchor;
+		let shift = false;
+		/** The select-all boxes follow the rows; the owner hears of a changed selection. */
+		const sync = () => {
+			const all = rows().filter((input) => !input.disabled);
+			const checked = all.filter((input) => input.checked);
+			for (const box of element.querySelectorAll(ALL)) {
+				box.checked = all.length > 0 && checked.length === all.length;
+				box.indeterminate = checked.length > 0 && checked.length < all.length;
+			}
+			const ids = rows().filter((input) => input.checked).map((input) => input.value);
+			const key = ids.join("\0");
+			if (key !== last) {
+				last = key;
+				report.current?.(ids);
+			}
+		};
+		const onClick = (event) => {
+			shift = event.shiftKey;
+		};
+		const onChange = (event) => {
+			const target = event.target;
+			if (!(target instanceof HTMLInputElement)) return;
+			if (target.matches(ALL)) {
+				for (const input of rows()) if (!input.disabled) input.checked = target.checked;
+				anchor = void 0;
+			} else if (target.matches(ROW)) {
+				const list = rows();
+				if (shift && anchor !== void 0 && anchor !== target && list.includes(anchor)) {
+					const [a, b] = [list.indexOf(anchor), list.indexOf(target)];
+					for (const input of list.slice(Math.min(a, b), Math.max(a, b) + 1)) if (!input.disabled) input.checked = target.checked;
+				}
+				anchor = target;
+			} else return;
+			shift = false;
+			sync();
+		};
+		const onKeyDown = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			const checked = rows().filter((input) => input.checked && !input.disabled);
+			if (checked.length === 0) return;
+			for (const input of checked) input.checked = false;
+			event.preventDefault();
+			event.stopPropagation();
+			anchor = void 0;
+			sync();
+		};
+		element.addEventListener("click", onClick, true);
+		element.addEventListener("change", onChange);
+		element.addEventListener("keydown", onKeyDown);
+		sync();
+		return () => {
+			element.removeEventListener("click", onClick, true);
+			element.removeEventListener("change", onChange);
+			element.removeEventListener("keydown", onKeyDown);
+		};
+	}, []);
+	return renderElement("div", render, {}, {
+		"data-slot": "table-selection",
+		ref: root,
+		...rest,
+		className: cx("nz-table-selection", className)
+	});
+}
+//#endregion
+export { TableSelection };

package/dist/table-selection/table-selection.d.ts

@@ -0,0 +1,34 @@
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/table-selection/table-selection.d.ts
+/** Row selection's own strings (§16.4): serialisable, English defaults. */
+export interface TableSelectionLabels {
+  /** The select-all checkbox's name. @default 'Select all rows' */
+  selectAll: string;
+}
+type CheckboxInputProps = Omit<ComponentPropsWithRef<"input">, "type" | "children" | "checked" | "defaultChecked">;
+export interface TableSelectAllProps extends CheckboxInputProps {
+  /** An `aria-label` wins over `labels.selectAll`. */
+  labels?: Partial<TableSelectionLabels>;
+}
+export interface TableSelectRowProps extends CheckboxInputProps {
+  /** The row's id: what a form receives under `name` when the row is selected. */
+  value: string;
+  /** The checkbox's name, unique per row, for example "Select order 1042". */
+  "aria-label": string;
+  /** @default 'ids' */
+  name?: string;
+  /** Selected when the page loads. @default false */
+  defaultChecked?: boolean;
+}
+/**
+ * The header's checkbox: checks or clears every row of its `TableSelection`, and shows the mixed
+ * state when some are selected. It submits nothing. Without `TableSelection` it does nothing.
+ */
+export declare function TableSelectAll({ labels, className, ...rest }: TableSelectAllProps): ReactElement;
+/**
+ * A row's checkbox: a native input that submits `value` under `name` with its form (pass `form` to
+ * reach a form outside the table). The row shows `bg/brand-subtle` while it is checked, through CSS.
+ */
+export declare function TableSelectRow({ name, className, ...rest }: TableSelectRowProps): ReactElement;
+//#endregion
+export {};