@nizivo/react 0.0.0-stage → 0.1.0

package/dist/field/field-static.js

@@ -0,0 +1,159 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { CircleXGlyph } from "../_internal/glyphs.js";
+import { stateAttrs } from "../contracts/state.js";
+import { joinIds, presented } from "../_internal/field.js";
+import { InlineError } from "../inline-error/inline-error.js";
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/field/field-static.tsx
+/**
+* The Field anatomy with no client code: label, control, description and error, the same HTML and
+* ids as `Field` with a function child (M31). Server-safe, and its module imports no client leaf,
+* so a page that renders only FieldStatic ships no Field JavaScript in any bundler. It provides no
+* context and no announcer, and native validation shows the browser's own bubble; the function
+* child wires the control (FIELD-CONTRACT.md "FieldStatic").
+*/
+function FieldStatic({ label, description, error, errorIcon, group = false, name, required = false, disabled = false, readOnly = false, ids, render, children, messages: _messages, validateOn: _validateOn, ...root }) {
+	const anatomy = {
+		ids: resolveIds(useId(), ids, void 0),
+		label,
+		group,
+		description,
+		error,
+		errorIcon,
+		required,
+		disabled,
+		readOnly,
+		render,
+		root
+	};
+	if (typeof children !== "function") throw new TypeError("FieldStatic: children must be a function; put an element in a Field");
+	return staticField(anatomy, name, children);
+}
+/** The ids of one Field: a directly placed control's own id, else `ids`, else generated. */
+function resolveIds(base, ids, ownId) {
+	return {
+		control: ownId ?? ids?.control ?? `${base}-control`,
+		label: ids?.label ?? `${base}-label`,
+		description: ids?.description ?? `${base}-description`,
+		error: ids?.error ?? `${base}-error`
+	};
+}
+/**
+* The zero-JS render, shared by FieldStatic and Field's function child: the control attributes and
+* the wiring go to `control`, and the anatomy renders around what it returns, with no
+* `data-validate-on` and no announcer.
+*/
+function staticField(anatomy, name, control) {
+	const { ids, label, description, required, disabled, readOnly } = anatomy;
+	const invalid = presented(anatomy.error);
+	const described = describedBy(ids, description, invalid);
+	const attributes = fieldControlProps({
+		id: ids.control,
+		name,
+		required,
+		disabled,
+		readOnly,
+		invalid,
+		describedBy: described
+	});
+	const wiring = {
+		ids,
+		labelledBy: presented(label) ? ids.label : void 0,
+		describedBy: described,
+		invalid,
+		required,
+		disabled,
+		readOnly
+	};
+	const field = {
+		...anatomy,
+		validateOn: void 0,
+		children: control(attributes, wiring)
+	};
+	return renderElement("div", anatomy.render, fieldState(field), {
+		...fieldRootProps(field),
+		"data-slot": "field",
+		className: cx("nz-field", anatomy.root.className)
+	});
+}
+/** The state a Field's `render` function receives. */
+function fieldState(anatomy) {
+	const { required, disabled, readOnly } = anatomy;
+	return {
+		invalid: presented(anatomy.error),
+		disabled,
+		required,
+		readOnly
+	};
+}
+/**
+* The root props of the one DOM shape of a Field: label, control, description, error (§10.6).
+* Every path renders it: FieldStatic and Field's function child (zero JS) and FieldScope (with its
+* native message and announcer).
+*/
+function fieldRootProps(anatomy) {
+	const { ids, label, description, error, required, disabled, readOnly, validateOn } = anatomy;
+	const invalid = presented(error);
+	return {
+		"data-slot": "field",
+		...stateAttrs({
+			invalid,
+			disabled,
+			required,
+			readOnly
+		}),
+		"data-validate-on": validateOn,
+		...anatomy.root,
+		className: cx("nz-field", anatomy.root.className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			presented(label) && /* @__PURE__ */ jsxs("label", {
+				className: "nz-field-label",
+				"data-slot": "field-label",
+				id: ids.label,
+				htmlFor: anatomy.group ? void 0 : ids.control,
+				onClick: anatomy.onLabelClick,
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "nz-field-required",
+					"data-slot": "field-required",
+					"aria-hidden": "true",
+					children: "*"
+				})]
+			}),
+			anatomy.children,
+			presented(description) && /* @__PURE__ */ jsx("div", {
+				className: "nz-field-description",
+				"data-slot": "field-description",
+				id: ids.description,
+				children: description
+			}),
+			invalid && /* @__PURE__ */ jsx(InlineError, {
+				className: "nz-field-error",
+				"data-slot": "field-error",
+				id: ids.error,
+				icon: anatomy.errorIcon ?? /* @__PURE__ */ jsx(CircleXGlyph, {}),
+				children: error
+			}),
+			anatomy.announcer
+		] })
+	};
+}
+/** `aria-describedby` of the control: description, then error (§16.1). */
+function describedBy(ids, description, invalid) {
+	return joinIds(presented(description) && ids.description, invalid && ids.error);
+}
+/** Control attributes; `false` flags and unknown values are left out, never set to `undefined`. */
+function fieldControlProps(state) {
+	return {
+		...state.id !== void 0 && { id: state.id },
+		...state.name !== void 0 && { name: state.name },
+		...state.required && { required: true },
+		...state.disabled && { disabled: true },
+		...state.readOnly && { readOnly: true },
+		...state.describedBy !== void 0 && { "aria-describedby": state.describedBy },
+		...state.invalid && { "aria-invalid": true }
+	};
+}
+//#endregion
+export { FieldStatic, describedBy, fieldControlProps, fieldRootProps, fieldState, resolveIds, staticField };

package/dist/field/field.d.ts

@@ -0,0 +1,5 @@
+import { FieldControlProps, FieldIds, FieldProps, FieldState, FieldValidateOn, FieldValidityKey } from "./field-static.js";
+import { ReactElement } from "react";
+//#region src/field/field.d.ts
+export declare function Field({ label, description, error, errorIcon, group, name, required, disabled, readOnly, ids, messages, validateOn, render, children, ...root }: FieldProps): ReactElement;
+//#endregion

package/dist/field/field.js

@@ -0,0 +1,53 @@
+import { FIELD_CONTROL, joinIds } from "../_internal/field.js";
+import { resolveIds, staticField } from "./field-static.js";
+import { FieldScope } from "./field-scope.client.js";
+import { cloneElement, isValidElement, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/field/field.tsx
+function Field({ label, description, error, errorIcon, group = false, name, required = false, disabled = false, readOnly = false, ids, messages, validateOn = "submit", render, children, ...root }) {
+	const base = useId();
+	const wired = staticControl(children) ? children : void 0;
+	const ownId = wired?.props["id"];
+	const anatomy = {
+		ids: resolveIds(base, ids, typeof ownId === "string" ? ownId : void 0),
+		label,
+		group,
+		description,
+		error,
+		errorIcon,
+		required,
+		disabled,
+		readOnly,
+		render,
+		root
+	};
+	if (typeof children === "function") return staticField(anatomy, name, children);
+	if (wired !== void 0) return staticField(anatomy, name, (control) => cloneElement(wired, fill(control, wired.props)));
+	return /* @__PURE__ */ jsx(FieldScope, {
+		anatomy: {
+			...anatomy,
+			validateOn
+		},
+		name,
+		messages,
+		children
+	});
+}
+/** A server-safe control (NativeSelect) that takes the zero-JS wiring as plain props. */
+function staticControl(children) {
+	return isValidElement(children) && typeof children.type === "function" && Object.hasOwn(children.type, FIELD_CONTROL);
+}
+/**
+* The Field's attributes a directly placed control did not set itself: the control's own props win
+* (an explicit `false` included), and `aria-describedby` is joined after the Field's ids.
+*/
+function fill(control, own) {
+	const out = {};
+	for (const [key, value] of Object.entries(control)) if (own[key] === void 0) out[key] = value;
+	const ownDescribedBy = own["aria-describedby"];
+	const described = joinIds(control["aria-describedby"], typeof ownDescribedBy === "string" ? ownDescribedBy : void 0);
+	if (described !== void 0) out["aria-describedby"] = described;
+	return out;
+}
+//#endregion
+export { Field };

package/dist/field/index.d.ts

@@ -0,0 +1,4 @@
+import { FieldControlProps, FieldIds, FieldProps, FieldState, FieldStatic, FieldStaticProps, FieldStaticWiring, FieldValidateOn, FieldValidityKey } from "./field-static.js";
+import { Field } from "./field.js";
+import { FieldControl, FieldControlElementProps, FieldControlOptions, FieldValidatable, useFieldControl } from "./field-scope.client.js";
+export { Field, type FieldControl, type FieldControlElementProps, type FieldControlOptions, type FieldControlProps, type FieldIds, type FieldProps, type FieldState, FieldStatic, type FieldStaticProps, type FieldStaticWiring, type FieldValidatable, type FieldValidateOn, type FieldValidityKey, useFieldControl };

package/dist/field/index.js

@@ -0,0 +1,4 @@
+import { FieldStatic } from "./field-static.js";
+import { useFieldControl } from "./field-scope.client.js";
+import { Field } from "./field.js";
+export { Field, FieldStatic, useFieldControl };

package/dist/fieldset/fieldset.d.ts

@@ -0,0 +1,36 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/fieldset/fieldset.d.ts
+export interface FieldsetState {
+  /** An error message is presented. */
+  invalid: boolean;
+  disabled: boolean;
+  required: boolean;
+}
+export interface FieldsetProps extends Omit<ComponentPropsWithRef<"fieldset">, "children"> {
+  /** The group's name, a native `<legend>`. */
+  legend?: ReactNode;
+  /** Help text after the group, announced on entering it through `aria-describedby`. */
+  description?: ReactNode;
+  /**
+   * The group's error, rendered through InlineError and joined to `aria-describedby`; sets
+   * `data-invalid`. Not a live region (§16.5). `null`, `false` and `''` present no error.
+   */
+  error?: ReactNode;
+  /** Replaces the internal error mark (`circle-x`). Decorative. */
+  errorIcon?: ReactNode;
+  /** Draws an `aria-hidden` mark after the legend; the controls inside carry `required`. @default false */
+  required?: boolean;
+  /** Native: disables every control inside, with no client code. @default false */
+  disabled?: boolean;
+  /** Ids replacing the generated ones. */
+  ids?: {
+    description?: string | undefined;
+    error?: string | undefined;
+  };
+  /** Composition of the root; anything but a `<fieldset>` loses native `disabled`. */
+  render?: RenderProp<FieldsetState>;
+  children?: ReactNode;
+}
+export declare function Fieldset({ legend, description, error, errorIcon, required, disabled, ids, render, "aria-describedby": ariaDescribedBy, className, children, ...rest }: FieldsetProps): ReactElement;
+//#endregion

package/dist/fieldset/fieldset.js

@@ -0,0 +1,63 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { CircleXGlyph } from "../_internal/glyphs.js";
+import { stateAttrs } from "../contracts/state.js";
+import { joinIds, presented } from "../_internal/field.js";
+import { InlineError } from "../inline-error/inline-error.js";
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/fieldset/fieldset.tsx
+function Fieldset({ legend, description, error, errorIcon, required = false, disabled = false, ids, render, "aria-describedby": ariaDescribedBy, className, children, ...rest }) {
+	const base = useId();
+	const descriptionId = ids?.description ?? `${base}-description`;
+	const errorId = ids?.error ?? `${base}-error`;
+	const hasDescription = presented(description);
+	const invalid = presented(error);
+	return renderElement("fieldset", render, {
+		invalid,
+		disabled,
+		required
+	}, {
+		"data-slot": "fieldset",
+		...stateAttrs({
+			invalid,
+			disabled,
+			required
+		}),
+		...rest,
+		className: cx("nz-fieldset", className),
+		disabled: render === void 0 && disabled ? true : void 0,
+		"aria-describedby": joinIds(hasDescription && descriptionId, invalid && errorId, ariaDescribedBy),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [presented(legend) && /* @__PURE__ */ jsxs("legend", {
+			className: "nz-fieldset-legend",
+			"data-slot": "fieldset-legend",
+			children: [legend, required && /* @__PURE__ */ jsx("span", {
+				className: "nz-fieldset-required",
+				"data-slot": "fieldset-required",
+				"aria-hidden": "true",
+				children: "*"
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "nz-fieldset-content",
+			"data-slot": "fieldset-content",
+			children: [
+				children,
+				hasDescription && /* @__PURE__ */ jsx("div", {
+					className: "nz-fieldset-description",
+					"data-slot": "fieldset-description",
+					id: descriptionId,
+					children: description
+				}),
+				invalid && /* @__PURE__ */ jsx(InlineError, {
+					className: "nz-fieldset-error",
+					"data-slot": "fieldset-error",
+					id: errorId,
+					icon: errorIcon ?? /* @__PURE__ */ jsx(CircleXGlyph, {}),
+					children: error
+				})
+			]
+		})] })
+	});
+}
+//#endregion
+export { Fieldset };

package/dist/fieldset/index.d.ts

@@ -0,0 +1,2 @@
+import { Fieldset, FieldsetProps, FieldsetState } from "./fieldset.js";
+export { Fieldset, type FieldsetProps, type FieldsetState };

package/dist/fieldset/index.js

@@ -0,0 +1 @@
+export { Fieldset } from "./fieldset.js";

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,27 @@
+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. */
+  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/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 { TooltipPopup, TooltipRoot, TooltipTrigger } from "../tooltip/tooltip.client.js";
+import { iconButtonElement } from "./icon-button-static.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 };