@nizivo/react 0.0.0-stage → 0.2.0

package/dist/form/form.client.d.ts

@@ -0,0 +1,38 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/form/form.client.d.ts
+/** One Field's errors: a message, or several (the first is shown), or none. */
+export type FormErrorValue = string | readonly string[] | null | undefined;
+/**
+ * Errors keyed by the Field's `name`, as a server action returns them (Zod's
+ * `z.flattenError(error).fieldErrors`, or Conform's and TanStack Form's issues mapped to text). A
+ * nested name is one key, written as the Field's `name` is: `items.0.title`. Serialisable.
+ */
+export type FormErrors = Readonly<Record<string, FormErrorValue>>;
+/** Form's own strings (§16.4): serialisable, English defaults. */
+export interface FormLabels {
+  /** The error summary's title. @default 'There is a problem' */
+  summaryTitle: string;
+}
+export interface FormProps extends Omit<ComponentPropsWithRef<"form">, "children"> {
+  /**
+   * Errors by Field `name`, typically a server action's reply. Each one is presented by the Field
+   * with that `name` (the Field's own `error` prop wins over it) until the user edits that control.
+   * A new object (by identity) presents them all again and moves focus: to the error summary with
+   * `summary`, else to the first invalid control. The first render moves no focus.
+   */
+  errors?: FormErrors | undefined;
+  /**
+   * Renders an error summary at the start of the form while `errors` presents a message: a title
+   * and one link per error to its control, in page order. New errors focus the summary instead of
+   * the first invalid control (GOV.UK's error summary). For long forms. @default false
+   */
+  summary?: boolean;
+  /** Overrides Form's strings, for example `labels={{ summaryTitle: 'Es gibt ein Problem' }}`. */
+  labels?: Partial<FormLabels>;
+  /** Composition of the `<form>`. */
+  render?: RenderProp<Record<string, never>>;
+  children?: ReactNode;
+}
+export declare function Form({ errors, summary, labels: labelsProp, render, className, children, ...rest }: FormProps): ReactElement;
+//#endregion

package/dist/form/form.client.js

@@ -0,0 +1,127 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { Alert } from "../alert/alert.js";
+import { useLabels } from "../config/config.client.js";
+import { FormScope } from "../field/field-scope.client.js";
+import { useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/form.client.tsx
+const NONE = /* @__PURE__ */ new Set();
+function Form({ errors, summary = false, labels: labelsProp, render, className, children, ...rest }) {
+	const labels = useLabels("form", labelsProp);
+	const [edited, setEdited] = useState({
+		for: errors,
+		names: NONE
+	});
+	const hidden = edited.for === errors ? edited.names : NONE;
+	const shown = useMemo(() => {
+		const out = /* @__PURE__ */ new Map();
+		for (const [name, value] of Object.entries(errors ?? {})) {
+			const message = typeof value === "string" ? value : value?.[0];
+			if (message !== void 0 && message !== "" && !hidden.has(name)) out.set(name, message);
+		}
+		return out;
+	}, [errors, hidden]);
+	const form = useRef(null);
+	const summaryRef = useRef(null);
+	const listed = summary && shown.size > 0;
+	const [placed, setPlaced] = useState([]);
+	useLayoutEffect(() => {
+		const element = form.current;
+		if (!listed || element === null) return;
+		const next = [...shown.keys()].map((name) => [name, controlOf(element, name)]).toSorted(([, a], [, b]) => order(a, b)).map(([name, control]) => [name, control?.id || void 0]);
+		setPlaced((previous) => same(previous, next) ? previous : next);
+	}, [listed, shown]);
+	const seen = useRef(errors);
+	const moveFocus = useEffectEvent(() => {
+		const element = form.current;
+		if (element === null || shown.size === 0) return;
+		(summaryRef.current ?? firstInvalid(element))?.focus();
+	});
+	useLayoutEffect(() => {
+		if (seen.current === errors) return;
+		seen.current = errors;
+		moveFocus();
+	}, [errors]);
+	const own = {
+		"data-slot": "form",
+		className: cx("nz-form", className),
+		ref: form,
+		onInput(event) {
+			const { target } = event;
+			const name = "name" in target ? target.name : void 0;
+			if (typeof name === "string" && shown.has(name)) setEdited({
+				for: errors,
+				names: /* @__PURE__ */ new Set([...hidden, name])
+			});
+		}
+	};
+	const rank = new Map(placed.map(([name], index) => [name, index]));
+	const ids = new Map(placed);
+	const items = [...shown].toSorted(([a], [b]) => (rank.get(a) ?? rank.size) - (rank.get(b) ?? rank.size));
+	const props = {
+		...mergeProps(own, rest),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [listed && /* @__PURE__ */ jsx("div", {
+			ref: summaryRef,
+			tabIndex: -1,
+			className: "nz-form-summary",
+			"data-slot": "form-summary",
+			children: /* @__PURE__ */ jsx(Alert, {
+				tone: "critical",
+				role: "alert",
+				title: labels?.summaryTitle ?? "There is a problem",
+				children: /* @__PURE__ */ jsx("ul", {
+					className: "nz-form-summary-list",
+					"data-slot": "form-summary-list",
+					children: items.map(([name, message]) => {
+						const id = ids.get(name);
+						return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+							href: id === void 0 ? void 0 : `#${id}`,
+							className: "nz-form-summary-link",
+							"data-slot": "form-summary-link",
+							onClick: (event) => focusControl(event, name),
+							children: message
+						}) }, name);
+					})
+				})
+			})
+		}), children] })
+	};
+	return /* @__PURE__ */ jsx(FormScope, {
+		value: shown,
+		children: renderElement("form", render, {}, props)
+	});
+}
+/** The control a Field `name` names: the first of a radio group. */
+function controlOf(form, name) {
+	const item = form.elements.namedItem(name);
+	const element = item instanceof RadioNodeList ? item[0] : item;
+	return element instanceof HTMLElement ? element : void 0;
+}
+/**
+* The form's first control that presents an error (`aria-invalid="true"`), in tree order: through
+* the error prop, a Form error or a native message. Not a disabled one, nor an unfocusable root.
+*/
+function firstInvalid(form) {
+	for (const element of form.querySelectorAll("[aria-invalid=\"true\"]")) if (element.tabIndex >= 0 && !element.matches(":disabled")) return element;
+}
+/** A summary link focuses its control, which scrolls it into view, and leaves the URL as it is. */
+function focusControl(event, name) {
+	const form = event.currentTarget.closest("form");
+	const control = form === null ? void 0 : controlOf(form, name);
+	if (control === void 0) return;
+	event.preventDefault();
+	control.focus();
+}
+/** Two controls in page order; a missing one comes last. */
+function order(a, b) {
+	if (a === void 0 || b === void 0) return a === b ? 0 : a === void 0 ? 1 : -1;
+	return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+function same(a, b) {
+	return a.length === b.length && a.every(([name, id], i) => b[i]?.[0] === name && b[i]?.[1] === id);
+}
+//#endregion
+export { Form };

package/dist/form/form.d.ts

@@ -0,0 +1,36 @@
+import { RenderProp } from "../contracts/render.js";
+import { AlertTone } from "../alert/alert.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/form/form.d.ts
+/** Alert's tones. `critical` is a `role="alert"` container; the others are `role="status"`. */
+export type FormMessageTone = AlertTone;
+export interface FormMessageState {
+  tone: FormMessageTone;
+}
+export interface FormMessageProps extends Omit<ComponentPropsWithRef<"div">, "title" | "role"> {
+  /**
+   * `critical` for a failure the user must act on (network, permission, conflict): `role="alert"`.
+   * `success`, `info` and `warning` are `role="status"`, read when the reader is idle.
+   * @default 'critical'
+   */
+  tone?: FormMessageTone;
+  /** One line above the message, as Alert's `title`. */
+  title?: ReactNode;
+  /** Decorative tone glyph, as Alert's `icon`; the text carries the meaning. */
+  icon?: ReactNode;
+  /** A control under the message, for example `<Button size="sm">Retry</Button>`. */
+  action?: ReactNode;
+  /** Composition of the live container. */
+  render?: RenderProp<FormMessageState>;
+  /**
+   * The message. `null`, `false` and `''` render nothing inside the container, which stays in the
+   * page so the next message is announced: render FormMessage always, and change only this.
+   */
+  children?: ReactNode;
+}
+/**
+ * The form-level message: a live container that is always rendered, with an Alert inside it while
+ * there is a message. Field errors belong to each Field (`error`, or Form's `errors`), not here.
+ */
+export declare function FormMessage({ tone, title, icon, action, render, className, children, ...rest }: FormMessageProps): ReactElement;
+//#endregion

package/dist/form/form.js

@@ -0,0 +1,29 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Alert } from "../alert/alert.js";
+import { presented } from "../_internal/field.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/form/form.tsx
+/**
+* The form-level message: a live container that is always rendered, with an Alert inside it while
+* there is a message. Field errors belong to each Field (`error`, or Form's `errors`), not here.
+*/
+function FormMessage({ tone = "critical", title, icon, action, render, className, children, ...rest }) {
+	const shown = presented(children) || presented(title);
+	return renderElement("div", render, { tone }, {
+		"data-slot": "form-message",
+		"data-tone": tone,
+		...rest,
+		className: cx("nz-form-message", className),
+		role: tone === "critical" ? "alert" : "status",
+		children: shown ? /* @__PURE__ */ jsx(Alert, {
+			tone,
+			title,
+			icon,
+			action,
+			children
+		}) : void 0
+	});
+}
+//#endregion
+export { FormMessage };

package/dist/form/index.d.ts

@@ -0,0 +1,4 @@
+import { Form, FormErrorValue, FormErrors, FormLabels, FormProps } from "./form.client.js";
+import { SubmitButton, SubmitButtonProps } from "./submit-button.client.js";
+import { FormMessage, FormMessageProps, FormMessageState, FormMessageTone } from "./form.js";
+export { Form, type FormErrorValue, type FormErrors, type FormLabels, FormMessage, type FormMessageProps, type FormMessageState, type FormMessageTone, type FormProps, SubmitButton, type SubmitButtonProps };

package/dist/form/index.js

@@ -0,0 +1,4 @@
+import { Form } from "./form.client.js";
+import { SubmitButton } from "./submit-button.client.js";
+import { FormMessage } from "./form.js";
+export { Form, FormMessage, SubmitButton };

package/dist/form/submit-button.client.d.ts

@@ -0,0 +1,20 @@
+import { ButtonVariant } from "../augment.js";
+import { ButtonProps } from "../button/button.js";
+import { ReactElement } from "react";
+//#region src/form/submit-button.client.d.ts
+export interface SubmitButtonProps extends Omit<ButtonProps, "type"> {
+  /**
+   * The form's main action, so `primary`; Button's other variants are accepted.
+   * @default 'primary'
+   */
+  variant?: ButtonVariant;
+  /**
+   * Pending even when the form's action is not running, for example while a client handler awaits.
+   * The form's own status is read for you: only an action passed as a function (`<form action={fn}>`
+   * or Form's) reports one, never a URL.
+   * @default false
+   */
+  pending?: boolean;
+}
+export declare function SubmitButton({ variant, pending, labels: labelsProp, ...rest }: SubmitButtonProps): ReactElement;
+//#endregion

package/dist/form/submit-button.client.js

@@ -0,0 +1,19 @@
+"use client";
+import { useLabels } from "../config/config.client.js";
+import { Button } from "../button/button.js";
+import { jsx } from "react/jsx-runtime";
+import { useFormStatus } from "react-dom";
+//#region src/form/submit-button.client.tsx
+function SubmitButton({ variant = "primary", pending = false, labels: labelsProp, ...rest }) {
+	const status = useFormStatus();
+	const labels = useLabels("button", labelsProp);
+	return /* @__PURE__ */ jsx(Button, {
+		...rest,
+		...labels === void 0 ? {} : { labels },
+		variant,
+		type: "submit",
+		pending: pending || status.pending
+	});
+}
+//#endregion
+export { SubmitButton };

package/dist/grid/grid.d.ts

@@ -0,0 +1,38 @@
+import { RenderProp } from "../contracts/render.js";
+import { LayoutGap } from "../stack/stack.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/grid/grid.d.ts
+/** Columns an item spans, or `'full'` for the whole row. Clamped to the columns available. */
+export type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full";
+/**
+ * A span per breakpoint: `base` is mobile first, `sm` applies from 40rem (`--nz-sm`) and `lg` from
+ * 80rem (`--nz-lg`, provisional). An absent breakpoint keeps the one below it.
+ */
+export interface GridResponsiveSpan {
+  base?: GridSpan;
+  sm?: GridSpan;
+  lg?: GridSpan;
+}
+export interface GridState {
+  gap: LayoutGap | undefined;
+}
+export interface GridProps extends ComponentPropsWithRef<"div"> {
+  /**
+   * Space between tracks, as a `--nz-space-*` key. Absent, the responsive gutter
+   * (`--nz-grid-gutter`: 16, 20, 24 px).
+   */
+  gap?: LayoutGap;
+  render?: RenderProp<GridState>;
+}
+export interface GridItemState {
+  span: GridSpan | GridResponsiveSpan | undefined;
+}
+export interface GridItemProps extends ComponentPropsWithRef<"div"> {
+  /** @default 1 */
+  span?: GridSpan | GridResponsiveSpan;
+  render?: RenderProp<GridItemState>;
+}
+/** The page grid: `--nz-grid-columns` columns (4, 8, 12 by viewport). Items snap to spans. */
+export declare function Grid({ gap, render, className, ...rest }: GridProps): ReactElement;
+export declare function GridItem({ span, render, className, ...rest }: GridItemProps): ReactElement;
+//#endregion

package/dist/grid/grid.js

@@ -0,0 +1,28 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/grid/grid.tsx
+/** The page grid: `--nz-grid-columns` columns (4, 8, 12 by viewport). Items snap to spans. */
+function Grid({ gap, render, className, ...rest }) {
+	return renderElement("div", render, { gap }, {
+		"data-slot": "grid",
+		"data-gap": gap,
+		...rest,
+		className: cx("nz-grid", className)
+	});
+}
+function GridItem({ span, render, className, ...rest }) {
+	const spans = typeof span === "object" ? span : span === void 0 ? {} : { base: span };
+	return renderElement("div", render, { span }, {
+		"data-slot": "grid-item",
+		"data-span": attr(spans.base),
+		"data-span-sm": attr(spans.sm),
+		"data-span-lg": attr(spans.lg),
+		...rest,
+		className: cx("nz-grid-item", className)
+	});
+}
+function attr(span) {
+	return span === void 0 ? void 0 : String(span);
+}
+//#endregion
+export { Grid, GridItem };

package/dist/grid/index.d.ts

@@ -0,0 +1,2 @@
+import { Grid, GridItem, GridItemProps, GridItemState, GridProps, GridResponsiveSpan, GridSpan, GridState } from "./grid.js";
+export { Grid, GridItem, type GridItemProps, type GridItemState, type GridProps, type GridResponsiveSpan, type GridSpan, type GridState };

package/dist/grid/index.js

@@ -0,0 +1 @@
+export { Grid, GridItem } from "./grid.js";

package/dist/heading/heading.d.ts

@@ -0,0 +1,30 @@
+import { RenderProp } from "../contracts/render.js";
+import { TextTone } from "../text/text.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/heading/heading.d.ts
+/** The document outline level: `<h1>` to `<h6>`. */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** The Figma display and heading text styles. */
+export type HeadingVariant = "display-l" | "display-m" | "heading-h1" | "heading-h2" | "heading-h3" | "heading-h4";
+export interface HeadingState {
+  level: HeadingLevel;
+  variant: HeadingVariant;
+  tone: TextTone | undefined;
+}
+export interface HeadingProps extends ComponentPropsWithRef<"h2"> {
+  /** Required: the outline level decides the element, never the look. */
+  level: HeadingLevel;
+  /**
+   * The text style, independent of `level` (a page title can be an `<h1>` drawn as Heading/H3).
+   * @default the style named after the level, and `heading-h4` for levels 5 and 6 (Figma has no H5 or H6)
+   */
+  variant?: HeadingVariant;
+  /**
+   * A `text/*` colour. Absent, the colour is inherited from the surface. Deprecated value:
+   * `'accent'`, which paints `--nz-text-brand`; use `'brand'` (M42; removal deferred to 1.0).
+   */
+  tone?: TextTone;
+  render?: RenderProp<HeadingState>;
+}
+export declare function Heading({ level, variant, tone, render, className, ...rest }: HeadingProps): ReactElement;
+//#endregion

package/dist/heading/heading.js

@@ -0,0 +1,26 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+//#region src/heading/heading.tsx
+const VARIANT_OF_LEVEL = {
+	1: "heading-h1",
+	2: "heading-h2",
+	3: "heading-h3",
+	4: "heading-h4",
+	5: "heading-h4",
+	6: "heading-h4"
+};
+function Heading({ level, variant = VARIANT_OF_LEVEL[level], tone, render, className, ...rest }) {
+	return renderElement(`h${level}`, render, {
+		level,
+		variant,
+		tone
+	}, {
+		"data-slot": "heading",
+		"data-variant": variant,
+		"data-tone": tone,
+		...rest,
+		className: cx("nz-heading", className)
+	});
+}
+//#endregion
+export { Heading };

package/dist/heading/index.d.ts

@@ -0,0 +1,2 @@
+import { Heading, HeadingLevel, HeadingProps, HeadingState, HeadingVariant } from "./heading.js";
+export { Heading, type HeadingLevel, type HeadingProps, type HeadingState, type HeadingVariant };

package/dist/heading/index.js

@@ -0,0 +1 @@
+export { Heading } from "./heading.js";

package/dist/i18n/format-label.d.ts

@@ -0,0 +1,24 @@
+//#region src/i18n/format-label.d.ts
+/** The CLDR plural categories `Intl.PluralRules` can select. */
+export type PluralCategory = "zero" | "one" | "two" | "few" | "many" | "other";
+/**
+ * A label with one template per CLDR plural category of its locale, `other` required. A locale
+ * lists exactly the categories `Intl.PluralRules` has for it (en-US: `one`, `other`; pl: `one`,
+ * `few`, `many`, `other`). Exact-number keys (`'=0'`) are not supported.
+ */
+export type PluralLabel = {
+  other: string;
+} & Partial<Record<Exclude<PluralCategory, "other">, string>>;
+/** The values a label's placeholders read: `{count}` reads `count`. */
+export type LabelValues = Readonly<Record<string, string | number>>;
+/**
+ * Fills a label. A `PluralLabel` picks its template by `values.count`, through
+ * `new Intl.PluralRules(locale).select(values.count)` (`other` when the category is missing or
+ * `count` is not a number); a plain string is used as is. Each `{name}` placeholder is replaced by
+ * `values.name`: a number formatted with `Intl.NumberFormat(locale)`, a string as written. A
+ * placeholder with no value stays as written: `formatLabel('+{count}', { count: 1200 })` is
+ * `'+1,200'`.
+ * @param locale BCP 47 tag for the plural rules and the numbers. @default 'en-US'
+ */
+export declare function formatLabel(template: string | PluralLabel, values?: LabelValues, locale?: string): string;
+//#endregion

package/dist/i18n/format-label.js

@@ -0,0 +1,19 @@
+//#region src/i18n/format-label.ts
+/**
+* Fills a label. A `PluralLabel` picks its template by `values.count`, through
+* `new Intl.PluralRules(locale).select(values.count)` (`other` when the category is missing or
+* `count` is not a number); a plain string is used as is. Each `{name}` placeholder is replaced by
+* `values.name`: a number formatted with `Intl.NumberFormat(locale)`, a string as written. A
+* placeholder with no value stays as written: `formatLabel('+{count}', { count: 1200 })` is
+* `'+1,200'`.
+* @param locale BCP 47 tag for the plural rules and the numbers. @default 'en-US'
+*/
+function formatLabel(template, values = {}, locale = "en-US") {
+	const { count } = values;
+	return (typeof template === "string" ? template : (typeof count === "number" ? template[new Intl.PluralRules(locale).select(count)] : void 0) ?? template.other).replace(/\{(\w+)\}/g, (placeholder, name) => {
+		const value = Object.hasOwn(values, name) ? values[name] : void 0;
+		return typeof value === "number" ? new Intl.NumberFormat(locale).format(value) : value ?? placeholder;
+	});
+}
+//#endregion
+export { formatLabel };

package/dist/i18n/index.d.ts

@@ -0,0 +1,2 @@
+import { LabelValues, PluralCategory, PluralLabel, formatLabel } from "./format-label.js";
+export { type LabelValues, type PluralCategory, type PluralLabel, formatLabel };

package/dist/i18n/index.js

@@ -0,0 +1 @@
+export { formatLabel } from "./format-label.js";

package/dist/icon-button/icon-button-static.d.ts

@@ -0,0 +1,23 @@
+import { IconButtonStaticProps } from "./icon-button.contract.js";
+import { ReactElement } from "react";
+//#region src/icon-button/icon-button-static.d.ts
+/**
+ * A server-safe IconButton with no tooltip: the same `<button>`, classes and CSS as
+ * `<IconButton tooltip={false}>`, from a module that imports no client code.
+ *
+ * Use it only where visible text already names the action for sighted users (a column header, a
+ * labelled row) and the page should ship no JavaScript for the button: a table row action that is a
+ * link (`render={<a href="/orders/42/edit" />}`) under a header that says what it does, a submit
+ * button in a Server Action form (`type="submit"` inside `<form action={deleteProduct}>`) beside its
+ * label. Under Turbopack and `next dev`, importing `IconButton` ships its tooltip code even with
+ * `tooltip={false}` (about 20 KB gzip in production); `IconButtonStatic` ships none.
+ *
+ * An icon-only toolbar needs `IconButton`'s tooltip, so a sighted user can read what each glyph does
+ * (Figma: "Icon-only buttons have an aria-label and a Tooltip").
+ *
+ * `aria-label` is always required. You may also pass `aria-labelledby` pointing at visible text; it
+ * then names the button, with `aria-label` as the fallback. There is no `tooltip`, no `shortcut`
+ * (pass `aria-keyshortcuts` yourself, for example `"Meta+B Control+B"`) and no `label`.
+ */
+export declare function IconButtonStatic({ "aria-label": ariaLabel, label: _label, tooltip: _tooltip, shortcut: _shortcut, ...props }: IconButtonStaticProps): ReactElement;
+//#endregion

package/dist/icon-button/icon-button-static.js

@@ -0,0 +1,83 @@
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { SpinnerGlyph } from "../_internal/glyphs.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/icon-button/icon-button-static.tsx
+/**
+* A server-safe IconButton with no tooltip: the same `<button>`, classes and CSS as
+* `<IconButton tooltip={false}>`, from a module that imports no client code.
+*
+* Use it only where visible text already names the action for sighted users (a column header, a
+* labelled row) and the page should ship no JavaScript for the button: a table row action that is a
+* link (`render={<a href="/orders/42/edit" />}`) under a header that says what it does, a submit
+* button in a Server Action form (`type="submit"` inside `<form action={deleteProduct}>`) beside its
+* label. Under Turbopack and `next dev`, importing `IconButton` ships its tooltip code even with
+* `tooltip={false}` (about 20 KB gzip in production); `IconButtonStatic` ships none.
+*
+* An icon-only toolbar needs `IconButton`'s tooltip, so a sighted user can read what each glyph does
+* (Figma: "Icon-only buttons have an aria-label and a Tooltip").
+*
+* `aria-label` is always required. You may also pass `aria-labelledby` pointing at visible text; it
+* then names the button, with `aria-label` as the fallback. There is no `tooltip`, no `shortcut`
+* (pass `aria-keyshortcuts` yourself, for example `"Meta+B Control+B"`) and no `label`.
+*/
+function IconButtonStatic({ "aria-label": ariaLabel, label: _label, tooltip: _tooltip, shortcut: _shortcut, ...props }) {
+	warnUnnamed(ariaLabel, props["aria-labelledby"], "IconButtonStatic", "aria-label");
+	return iconButtonElement({
+		...props,
+		label: ariaLabel
+	});
+}
+/**
+* Renders the button. `trigger` holds the Tooltip trigger's props (handlers and ref) on IconButton's
+* client path; the consumer's handlers run before them, as everywhere (§8.2).
+*/
+function iconButtonElement({ label, icon, variant = "secondary", size = "md", pressed, pending = false, pendingIndicator, disabled = false, type, render, className, ...rest }, trigger) {
+	const native = render === void 0;
+	const props = trigger === void 0 ? rest : mergeProps(trigger, rest);
+	return renderElement("button", render, {
+		variant,
+		size,
+		pending,
+		disabled,
+		pressed
+	}, {
+		"data-slot": "icon-button",
+		"data-variant": variant,
+		"data-size": size,
+		"data-pending": pending ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		...props,
+		className: cx("nz-icon-button nz-hit-target", className),
+		type: native ? pending ? "button" : type ?? "button" : void 0,
+		disabled: native && disabled && !pending ? true : void 0,
+		"aria-label": label,
+		"aria-pressed": pressed,
+		"aria-disabled": pending || !native && disabled ? true : void 0,
+		onClick: pending && props["onClick"] !== void 0 ? swallow : props["onClick"],
+		children: /* @__PURE__ */ jsx("span", {
+			className: "nz-icon-button-icon",
+			"data-slot": "icon-button-icon",
+			"aria-hidden": "true",
+			children: pending ? pendingIndicator ?? /* @__PURE__ */ jsx(SpinnerGlyph, {}) : icon
+		})
+	});
+}
+function swallow(event) {
+	event.preventDefault();
+}
+/**
+* Development builds warn about a button nothing names; bundlers strip it from production. `prop` is
+* the prop that names it (`label` on IconButton, `aria-label` on IconButtonStatic).
+*/
+function warnUnnamed(name, labelledBy, component = "IconButton", prop = "label") {
+	if ((name ?? "").trim() !== "" || (labelledBy ?? "").trim() !== "") return;
+	let development = false;
+	try {
+		development = process.env.NODE_ENV !== "production";
+	} catch {}
+	if (development) console.warn(`Nizivo ${component}: \`${prop}\` is empty, so the button has no accessible name. Pass the action in words, for example ${prop}="Delete product".`);
+}
+//#endregion
+export { IconButtonStatic, iconButtonElement, warnUnnamed };

package/dist/icon-button/icon-button.client.js

@@ -0,0 +1,29 @@
+"use client";
+import { iconButtonElement } from "./icon-button-static.js";
+import { TooltipPopup, TooltipRoot, TooltipTrigger } from "../tooltip/tooltip.client.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/icon-button/icon-button.client.tsx
+function IconButtonTooltip({ tooltip: { side, align, delay }, shortcut, ...button }) {
+	return /* @__PURE__ */ jsxs(TooltipRoot, {
+		disabled: button.disabled === true,
+		...delay === void 0 ? {} : { delay },
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: (props) => iconButtonElement(button, triggerProps(props)) }), /* @__PURE__ */ jsx(TooltipPopup, {
+			...side === void 0 ? {} : { side },
+			...align === void 0 ? {} : { align },
+			...shortcut === void 0 ? {} : { shortcut },
+			children: button.label
+		})]
+	});
+}
+/**
+* Keeps the trigger's handlers and ref. Drops what would make the DOM differ from the server path:
+* `nz-tooltip-trigger`, its slot, `data-open` and the `tabIndex` that makes any element focusable (a
+* button or link already is; a consumer's own `tabIndex` still applies). Drops `aria-describedby` too:
+* the tooltip repeats the accessible name, so describing the button by it would say the label twice.
+*/
+function triggerProps(props) {
+	const { className: _class, "data-slot": _slot, "data-open": _open, "aria-describedby": _described, type: _type, tabIndex: _tabIndex, ...kept } = props;
+	return kept;
+}
+//#endregion
+export { IconButtonTooltip };