@nizivo/react 0.0.0-stage → 0.1.0

package/dist/_engines/react-aria/tooltip.client.js

@@ -0,0 +1,72 @@
+"use client";
+import { mergeProps } from "../../contracts/merge-props.js";
+import { details } from "../../contracts/details.js";
+import { stateAttrs } from "../../contracts/state.js";
+import { defined, engineDom } from "./dom.js";
+import { EngineLocale } from "./locale.client.js";
+import { popupStyle, resolveSide, toPlacement } from "./overlay.client.js";
+import { use } from "react";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip, TooltipTrigger, TooltipTriggerStateContext, useLocale } from "react-aria-components";
+import { useFocusable } from "react-aria/useFocusable";
+import { useObjectRef } from "react-aria/useObjectRef";
+//#region src/_engines/react-aria/tooltip.client.tsx
+const Root = ({ open, defaultOpen, onOpenChange, delay, disabled, children }) => /* @__PURE__ */ jsx(EngineLocale, { children: /* @__PURE__ */ jsx(TooltipTrigger, {
+	delay,
+	...defined({
+		isOpen: open,
+		defaultOpen,
+		isDisabled: disabled
+	}),
+	onOpenChange: (isOpen) => onOpenChange?.(isOpen, details("unknown")),
+	children
+}) });
+/**
+* The trigger is the consumer's own element (often a server `<Button>`), so it takes the engine's
+* hover/focus props through `useFocusable` instead of a React Aria `Button`.
+*/
+const Trigger = ({ render, ...dom }) => {
+	const ref = useObjectRef();
+	const { focusableProps } = useFocusable({}, ref);
+	const s = { open: use(TooltipTriggerStateContext)?.isOpen ?? false };
+	return render(mergeProps(engineDom(focusableProps), { ref }, dom, stateAttrs(s)), s);
+};
+/**
+* React Aria 1.22.1 closes a tooltip "instantly" (no exit animation) when another one opens during
+* the warm-up period, as Tab moves across tooltip triggers. Its exit state is then left "exiting"
+* with no element to animate, so the next ordinary close of that tooltip (a press on its trigger,
+* after the keyboard, with no pointer move that would reopen it first) mounts an unpositioned popup
+* in `data-exiting` that never leaves. Keying the engine's Tooltip on that instant close remounts it
+* with a fresh exit state; it renders nothing in either state, so nothing visible remounts.
+*/
+function instantlyClosed(state) {
+	return state !== null && !state.isOpen && state.shouldSkipAnimation === true;
+}
+const Popup = ({ side, align, sideOffset, container, render, children, ...dom }) => {
+	const { direction } = useLocale();
+	return /* @__PURE__ */ jsx(Tooltip, {
+		placement: toPlacement(side, align),
+		offset: sideOffset,
+		...defined({ UNSTABLE_portalContainer: container ?? void 0 }),
+		render: (p, rp) => {
+			const s = {
+				entering: rp.isEntering,
+				exiting: rp.isExiting,
+				side: resolveSide(rp.placement, side, direction)
+			};
+			const engine = {
+				...engineDom(p),
+				style: popupStyle(p.style)
+			};
+			const attrs = stateAttrs({
+				open: rp.state.isOpen,
+				...s,
+				align
+			});
+			return render(mergeProps(engine, dom, attrs), s);
+		},
+		children
+	}, instantlyClosed(use(TooltipTriggerStateContext)) ? "instant" : "live");
+};
+//#endregion
+export { Popup, Root, Trigger };

package/dist/_internal/cx.js

@@ -0,0 +1,11 @@
+//#region src/_internal/cx.ts
+/** Joins class names, skipping empty values and repeated classes. Never exported from the package. */
+function cx(...parts) {
+	const classes = /* @__PURE__ */ new Set();
+	for (const part of parts) if (part) {
+		for (const name of part.split(/\s+/)) if (name !== "") classes.add(name);
+	}
+	return [...classes].join(" ");
+}
+//#endregion
+export { cx };

package/dist/_internal/engine-part.d.ts

@@ -0,0 +1 @@
+import { ComponentPropsWithRef, JSX, ReactElement, ReactNode } from "react";

package/dist/_internal/field.js

@@ -0,0 +1,20 @@
+//#region src/_internal/field.ts
+/**
+* Whether a message node renders something. `null`, `undefined`, booleans and `''` render nothing,
+* so `error={failed && 'Enter a price'}` presents no error when `failed` is false.
+*/
+function presented(node) {
+	return node != null && typeof node !== "boolean" && node !== "";
+}
+/** Joins id references for `aria-describedby`, skipping empty ones; `undefined` when none remain. */
+function joinIds(...ids) {
+	const joined = ids.filter((id) => typeof id === "string" && id !== "").join(" ");
+	return joined === "" ? void 0 : joined;
+}
+/**
+* Marks a server-safe control (NativeSelect) that Field wires as plain props when it is placed
+* directly inside, as if it were a function child: zero JS, and the label still points at it.
+*/
+const FIELD_CONTROL = Symbol.for("nizivo.field-control");
+//#endregion
+export { FIELD_CONTROL, joinIds, presented };

package/dist/_internal/glyphs.js

@@ -0,0 +1,34 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/_internal/glyphs.tsx
+function svg(name, paths) {
+	return /* @__PURE__ */ jsx("svg", {
+		className: `nz-glyph nz-glyph-${name}`,
+		viewBox: "0 0 24 24",
+		width: "1em",
+		height: "1em",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.92,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: paths
+	});
+}
+const SpinnerGlyph = () => svg("spinner", /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }));
+const ChevronsUpDownGlyph = () => svg("chevrons-up-down", /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }), /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })] }));
+const CircleXGlyph = () => svg("circle-x", /* @__PURE__ */ jsxs(Fragment, { children: [
+	/* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "12",
+		r: "10"
+	}),
+	/* @__PURE__ */ jsx("path", { d: "m15 9-6 6" }),
+	/* @__PURE__ */ jsx("path", { d: "m9 9 6 6" })
+] }));
+const CloseGlyph = () => svg("close", /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })] }));
+const CheckGlyph = () => svg("check", /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }));
+const MinusGlyph = () => svg("minus", /* @__PURE__ */ jsx("path", { d: "M5 12h14" }));
+//#endregion
+export { CheckGlyph, ChevronsUpDownGlyph, CircleXGlyph, CloseGlyph, MinusGlyph, SpinnerGlyph };

package/dist/_internal/keys.js

@@ -0,0 +1,62 @@
+//#region src/_internal/keys.ts
+/**
+* `"mod+shift+d"` → `["mod", "shift", "d"]`. The plus key is `plus`, or a `+` where a key is due:
+* `"mod++"` and `"mod+plus"` are both ⌘ and +.
+*/
+function splitKeys(keys) {
+	const parts = keys.split("+").map((part) => part.trim());
+	const out = [];
+	for (let index = 0; index < parts.length; index += 1) {
+		const part = parts[index] ?? "";
+		if (part !== "") out.push(part);
+		else if (parts[index + 1] === "") {
+			out.push("+");
+			index += 1;
+		}
+	}
+	return out;
+}
+/** Key name → its `aria-keyshortcuts` name (WAI-ARIA 1.2, UI Events `key` values). */
+const ARIA = {
+	cmd: "Meta",
+	command: "Meta",
+	meta: "Meta",
+	ctrl: "Control",
+	control: "Control",
+	alt: "Alt",
+	option: "Alt",
+	shift: "Shift",
+	enter: "Enter",
+	return: "Enter",
+	esc: "Escape",
+	escape: "Escape",
+	tab: "Tab",
+	backspace: "Backspace",
+	delete: "Delete",
+	space: "Space",
+	plus: "Plus",
+	"+": "Plus",
+	up: "ArrowUp",
+	down: "ArrowDown",
+	left: "ArrowLeft",
+	right: "ArrowRight"
+};
+/** One key's `aria-keyshortcuts` name; `mod` is the platform's command key, given by the caller. */
+function ariaName(key, mod) {
+	const lower = key.toLowerCase();
+	if (lower === "mod") return mod;
+	return ARIA[lower] ?? (key.length === 1 ? key.toUpperCase() : key);
+}
+/**
+* `"mod+b"` → `"Meta+B Control+B"`. The server does not know the platform, so `mod` lists both
+* alternatives (space-separated, as the attribute allows); one letter is uppercased.
+*/
+function ariaKeyShortcuts(keys) {
+	const parts = splitKeys(keys);
+	if (parts.length === 0) return void 0;
+	const apple = parts.map((key) => ariaName(key, "Meta")).join("+");
+	const other = parts.map((key) => ariaName(key, "Control")).join("+");
+	return apple === other ? apple : `${apple} ${other}`;
+}
+//#endregion
+export { ariaKeyShortcuts, splitKeys };

package/dist/_internal/overlay.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, ReactElement, ReactNode, RefObject } from "react";
+//#region src/_internal/overlay.d.ts
+/**
+ * Where focus goes when an overlay closes (§12.2 Focus return): `true` follows the chain (the
+ * trigger, else the parent overlay's trigger), an element ref or a function returning an element
+ * goes there first while it is on the page, and `false` leaves focus alone.
+ */
+export type ReturnFocusTarget = boolean | RefObject<HTMLElement | null> | (() => HTMLElement | null | undefined);
+//#endregion

package/dist/_virtual/_rolldown/runtime.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll };

package/dist/alert/alert-dismiss.client.d.ts

@@ -0,0 +1,32 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/alert/alert-dismiss.client.d.ts
+/** Strings this part renders (§16.4). */
+export interface AlertDismissLabels {
+  /** The button's accessible name. @default 'Dismiss' */
+  dismiss: string;
+}
+export interface AlertDismissProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /**
+   * Called with no arguments, so a Server Component can pass a Server Action. The Alert does not hide
+   * itself: the caller stops rendering it.
+   */
+  onDismiss?: () => void;
+  labels?: Partial<AlertDismissLabels>;
+  /** The close glyph, decorative. Defaults to the internal `close` glyph (Lucide's `x`). */
+  children?: ReactNode;
+  /**
+   * Your element in place of the default IconButton; it must render a `<button>`. A plain element
+   * keeps its own look. An IconButton, for example
+   * `render={<IconButton icon={<X />} label="Dismiss" variant="tertiary" size="sm" />}` to add its
+   * tooltip, keeps its variant and size, and in an Alert takes the dismiss slot's placement (made for
+   * `sm`) and icon/secondary glyph colour, as a composed IconButton does in `Dialog.Close`.
+   */
+  render?: RenderProp<Record<string, never>>;
+}
+/**
+ * With no `render`, an IconButton (tertiary, `sm`: the 16 px glyph Figma draws, in a 32 px target)
+ * with no tooltip, as `Dialog.Close` does.
+ */
+export declare function AlertDismiss({ onDismiss, labels, "aria-label": ariaLabel, type, render, className, onClick, children, ...rest }: AlertDismissProps): ReactElement;
+//#endregion

package/dist/alert/alert-dismiss.client.js

@@ -0,0 +1,36 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { CloseGlyph } from "../_internal/glyphs.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/alert/alert-dismiss.client.tsx
+/**
+* With no `render`, an IconButton (tertiary, `sm`: the 16 px glyph Figma draws, in a 32 px target)
+* with no tooltip, as `Dialog.Close` does.
+*/
+function AlertDismiss({ onDismiss, labels, "aria-label": ariaLabel, type, render, className, onClick, children, ...rest }) {
+	const own = render === void 0;
+	return renderElement("button", render, {}, {
+		"data-slot": "alert-dismiss",
+		...own && {
+			"data-variant": "tertiary",
+			"data-size": "sm"
+		},
+		...rest,
+		type: own ? type ?? "button" : void 0,
+		"aria-label": ariaLabel ?? labels?.dismiss ?? "Dismiss",
+		className: cx("nz-alert-dismiss", own && "nz-icon-button", "nz-hit-target", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) onDismiss?.();
+		},
+		children: /* @__PURE__ */ jsx("span", {
+			className: "nz-icon-button-icon",
+			"data-slot": "icon-button-icon",
+			"aria-hidden": "true",
+			children: children ?? /* @__PURE__ */ jsx(CloseGlyph, {})
+		})
+	});
+}
+//#endregion
+export { AlertDismiss };

package/dist/alert/alert.d.ts

@@ -0,0 +1,28 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/alert/alert.d.ts
+/** Figma "Tone". */
+export type AlertTone = "info" | "success" | "warning" | "critical";
+export interface AlertState {
+  tone: AlertTone;
+}
+export interface AlertProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
+  /** @default 'info' */
+  tone?: AlertTone;
+  /** One line, Label/M Strong. The description is `children`. */
+  title?: ReactNode;
+  /** Decorative tone glyph, for example `<CircleX />` for `critical`; the text carries the meaning. */
+  icon?: ReactNode;
+  /** Controls under the text, for example `<Button size="sm">Retry</Button>`. */
+  action?: ReactNode;
+  /** `<AlertDismiss onDismiss={…}>…</AlertDismiss>`; leave it out for an alert that cannot be dismissed. */
+  dismiss?: ReactNode;
+  /**
+   * There is no live role by default: an alert present on page load must not interrupt. Pass
+   * `role="status"` or `role="alert"` for one injected after a user action.
+   */
+  role?: ComponentPropsWithRef<"div">["role"];
+  render?: RenderProp<AlertState>;
+}
+export declare function Alert({ tone, title, icon, action, dismiss, render, className, children, ...rest }: AlertProps): ReactElement;
+//#endregion

package/dist/alert/alert.js

@@ -0,0 +1,44 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/alert/alert.tsx
+function Alert({ tone = "info", title, icon, action, dismiss, render, className, children, ...rest }) {
+	return renderElement("div", render, { tone }, {
+		"data-slot": "alert",
+		"data-tone": tone,
+		...rest,
+		className: cx("nz-alert", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			icon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-alert-icon",
+				"data-slot": "alert-icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "nz-alert-content",
+				"data-slot": "alert-content",
+				children: [
+					title != null && /* @__PURE__ */ jsx("div", {
+						className: "nz-alert-title",
+						"data-slot": "alert-title",
+						children: title
+					}),
+					children != null && children !== false && children !== "" && /* @__PURE__ */ jsx("div", {
+						className: "nz-alert-description",
+						"data-slot": "alert-description",
+						children
+					}),
+					action != null && /* @__PURE__ */ jsx("div", {
+						className: "nz-alert-action",
+						"data-slot": "alert-action",
+						children: action
+					})
+				]
+			}),
+			dismiss
+		] })
+	});
+}
+//#endregion
+export { Alert };

package/dist/alert/index.d.ts

@@ -0,0 +1,3 @@
+import { Alert, AlertProps, AlertState, AlertTone } from "./alert.js";
+import { AlertDismiss, AlertDismissLabels, AlertDismissProps } from "./alert-dismiss.client.js";
+export { Alert, AlertDismiss, type AlertDismissLabels, type AlertDismissProps, type AlertProps, type AlertState, type AlertTone };

package/dist/alert/index.js

@@ -0,0 +1,3 @@
+import { Alert } from "./alert.js";
+import { AlertDismiss } from "./alert-dismiss.client.js";
+export { Alert, AlertDismiss };

package/dist/augment.d.ts

@@ -0,0 +1,13 @@
+//#region src/augment.d.ts
+/** Button variants, as lowercase Figma names. Augment this interface to add one. */
+export interface ButtonVariantMap {
+  primary: true;
+  secondary: true;
+  tertiary: true;
+  critical: true;
+  accent: true;
+}
+export type ButtonVariant = keyof ButtonVariantMap;
+/** Control heights 32 / 40 / 48 px. */
+export type ControlSize = "sm" | "md" | "lg";
+//#endregion

package/dist/badge/badge.d.ts

@@ -0,0 +1,19 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/badge/badge.d.ts
+/** Figma "Tone". `brand` is the only solid fill. */
+export type BadgeTone = "neutral" | "success" | "warning" | "critical" | "info" | "brand";
+export interface BadgeState {
+  tone: BadgeTone;
+  dot: boolean;
+}
+export interface BadgeProps extends ComponentPropsWithRef<"span"> {
+  /** @default 'neutral' */
+  tone?: BadgeTone;
+  /** Figma "Dot": a decorative status dot before the label. The label carries the meaning. @default true */
+  dot?: boolean;
+  /** Composition, for example `render={<a href="/orders?status=paid" />}`. */
+  render?: RenderProp<BadgeState>;
+}
+export declare function Badge({ tone, dot, render, className, children, ...rest }: BadgeProps): ReactElement;
+//#endregion

package/dist/badge/badge.js

@@ -0,0 +1,22 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/badge/badge.tsx
+function Badge({ tone = "neutral", dot = true, render, className, children, ...rest }) {
+	return renderElement("span", render, {
+		tone,
+		dot
+	}, {
+		"data-slot": "badge",
+		"data-tone": tone,
+		...rest,
+		className: cx("nz-badge", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [dot && /* @__PURE__ */ jsx("span", {
+			className: "nz-badge-dot",
+			"data-slot": "badge-dot",
+			"aria-hidden": "true"
+		}), children] })
+	});
+}
+//#endregion
+export { Badge };

package/dist/badge/index.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeProps, BadgeState, BadgeTone } from "./badge.js";
+export { Badge, type BadgeProps, type BadgeState, type BadgeTone };

package/dist/badge/index.js

@@ -0,0 +1 @@
+export { Badge } from "./badge.js";

package/dist/button/button.d.ts

@@ -0,0 +1,54 @@
+import { RenderProp } from "../contracts/render.js";
+import { ButtonVariant, ControlSize } from "../augment.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/button/button.d.ts
+export interface ButtonState {
+  variant: ButtonVariant;
+  size: ControlSize;
+  pending: boolean;
+  disabled: boolean;
+}
+/** Button's own strings (§16.4): serialisable, English defaults. */
+export interface ButtonLabels {
+  /**
+   * The text a pending button shows in place of its label under Reduced motion, where the spinner stops
+   * (Figma: "Spinner and skeleton loops stop; a text label shows").
+   * @default 'Loading…'
+   */
+  pending: string;
+}
+export interface ButtonProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /**
+   * Figma "Variant". One primary per view; secondary for everything else; tertiary inside dense rows.
+   * @default 'secondary'
+   */
+  variant?: ButtonVariant;
+  /** 32 / 40 / 48 px. @default 'md' */
+  size?: ControlSize;
+  leadingIcon?: ReactNode;
+  trailingIcon?: ReactNode;
+  /**
+   * An action is in flight: the spinner replaces the leading icon, the label stays, and the button
+   * stays focusable with `aria-disabled` and swallows clicks. The spinner turns once per
+   * `--nz-duration-spin`; under Reduced motion it stops and `labels.pending` ("Loading…") shows in
+   * the label's place, in a button that keeps its width. The label stays in the accessible name,
+   * after that text ("Loading… Publish").
+   * @default false
+   */
+  pending?: boolean;
+  /** Replaces the internal spinner glyph. */
+  pendingIndicator?: ReactNode;
+  /** Fills the width of its container. @default false */
+  fullWidth?: boolean;
+  /** Composition, for example `render={<Link href="/orders" />}`. */
+  render?: RenderProp<ButtonState>;
+  /**
+   * Overrides Button's strings, for example `labels={{ pending: 'Wird geladen…' }}`; `pending: ''`
+   * shows no text and keeps the label visible. Translation is per instance (no global labels in 0.1.0): an app wraps Button once to
+   * pass its own.
+   */
+  labels?: Partial<ButtonLabels>;
+  children?: ReactNode;
+}
+export declare function Button({ variant, size, leadingIcon, trailingIcon, pending, pendingIndicator, fullWidth, disabled, type, render, className, onClick, labels, children, ...rest }: ButtonProps): ReactElement;
+//#endregion

package/dist/button/button.js

@@ -0,0 +1,62 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { SpinnerGlyph } from "../_internal/glyphs.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/button/button.tsx
+function Button({ variant = "secondary", size = "md", leadingIcon, trailingIcon, pending = false, pendingIndicator, fullWidth = false, disabled = false, type, render, className, onClick, labels, children, ...rest }) {
+	const native = render === void 0;
+	const empty = children == null && leadingIcon == null && trailingIcon == null && !pending;
+	return renderElement("button", render, {
+		variant,
+		size,
+		pending,
+		disabled
+	}, {
+		"data-slot": "button",
+		"data-variant": variant,
+		"data-size": size,
+		"data-pending": pending ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		"data-full-width": fullWidth ? "" : void 0,
+		...rest,
+		className: cx("nz-button nz-hit-target", className),
+		type: native ? pending ? "button" : type ?? "button" : void 0,
+		disabled: native && disabled && !pending ? true : void 0,
+		"aria-disabled": pending || !native && disabled ? true : void 0,
+		onClick: pending && onClick ? swallow : onClick,
+		children: empty ? void 0 : /* @__PURE__ */ jsxs(Fragment, { children: [
+			pending ? /* @__PURE__ */ jsx("span", {
+				className: "nz-button-icon",
+				"data-slot": "button-icon",
+				"aria-hidden": "true",
+				children: pendingIndicator ?? /* @__PURE__ */ jsx(SpinnerGlyph, {})
+			}) : leadingIcon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-button-icon",
+				"data-slot": "button-icon",
+				"aria-hidden": "true",
+				children: leadingIcon
+			}),
+			pending && labels?.pending !== "" && /* @__PURE__ */ jsx("span", {
+				className: "nz-button-pending-label",
+				"data-slot": "button-pending-label",
+				children: labels?.pending ?? "Loading…"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-button-label",
+				"data-slot": "button-label",
+				children
+			}),
+			trailingIcon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-button-icon",
+				"data-slot": "button-icon",
+				"aria-hidden": "true",
+				children: trailingIcon
+			})
+		] })
+	});
+}
+function swallow(event) {
+	event.preventDefault();
+}
+//#endregion
+export { Button };

package/dist/button/index.d.ts

@@ -0,0 +1,2 @@
+import { Button, ButtonLabels, ButtonProps, ButtonState } from "./button.js";
+export { Button, type ButtonLabels, type ButtonProps, type ButtonState };

package/dist/button/index.js

@@ -0,0 +1 @@
+export { Button } from "./button.js";

package/dist/card/card.d.ts

@@ -0,0 +1,57 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/card/card.d.ts
+/** Figma "Style": Surface | Subtle | Inverse. */
+export type CardTone = "surface" | "subtle" | "inverse";
+export type CardTitleLevel = 2 | 3 | 4 | 5 | 6;
+/** 24 px (`md`, Figma) or 20 px (`sm`). */
+export type CardPadding = "sm" | "md";
+/** 0 draws no shadow (the rest elevation); 1 draws `--nz-elevation-1`. */
+export type CardElevation = 0 | 1;
+export interface CardRootState {
+  tone: CardTone;
+  padding: CardPadding;
+  elevation: CardElevation;
+}
+export interface CardRootProps extends ComponentPropsWithRef<"div"> {
+  /**
+   * `inverse` sets `data-nz-scheme="inverse"`, so every token inside resolves in the inverse scheme.
+   * @default 'surface'
+   */
+  tone?: CardTone;
+  /** @default 'md' */
+  padding?: CardPadding;
+  /** No shadow at rest until design says otherwise (decision 8j). @default 0 */
+  elevation?: CardElevation;
+  render?: RenderProp<CardRootState>;
+}
+export interface CardHeaderProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface CardTitleProps extends ComponentPropsWithRef<"h3"> {
+  /** The heading level; its look is Heading/H4 at every level. @default 3 */
+  level?: CardTitleLevel;
+  render?: RenderProp<Record<string, never>>;
+}
+export interface CardDescriptionProps extends ComponentPropsWithRef<"p"> {
+  render?: RenderProp<Record<string, never>>;
+}
+/** Figma "Show action": the control at the end of the header, for example an IconButton. */
+export interface CardActionProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+/** Figma's "Slot" frame. */
+export interface CardBodyProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface CardFooterProps extends ComponentPropsWithRef<"div"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export declare function CardRoot({ tone, padding, elevation, render, className, ...rest }: CardRootProps): ReactElement;
+export declare function CardHeader({ render, className, ...rest }: CardHeaderProps): ReactElement;
+export declare function CardTitle({ level, render, className, ...rest }: CardTitleProps): ReactElement;
+export declare function CardDescription({ render, className, ...rest }: CardDescriptionProps): ReactElement;
+export declare function CardAction({ render, className, ...rest }: CardActionProps): ReactElement;
+export declare function CardBody({ render, className, ...rest }: CardBodyProps): ReactElement;
+export declare function CardFooter({ render, className, ...rest }: CardFooterProps): ReactElement;
+//#endregion