@nizivo/react 0.0.0-stage → 0.2.0

package/dist/avatar/avatar.js

@@ -0,0 +1,94 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { formatLabel } from "../i18n/format-label.js";
+import { Children, cloneElement, isValidElement } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/avatar/avatar.tsx
+/** A word's first character (a whole code point, so an astral letter is not split). */
+const letter = (word) => Array.from(word)[0] ?? "";
+/** The first and last words' first letters, upper-cased; one word gives one letter. */
+function avatarInitials(name) {
+	const words = name.trim().split(/\s+/u).filter((word) => word !== "");
+	const first = words[0];
+	if (first === void 0) return "";
+	const last = words.length > 1 ? words[words.length - 1] : void 0;
+	return (letter(first) + (last === void 0 ? "" : letter(last))).toUpperCase();
+}
+/**
+* A person's or store's photo laid over their initials, with no script: the initials are always
+* rendered, so a missing photo needs no `onError`. Known limit: a `src` that fails to load shows
+* WebKit's (Safari's) broken-image mark over the initials, with no script-free fix; pass `src` only
+* when it is known to load, or leave it out and the initials show.
+*/
+function Avatar({ name, src, srcSet, sizes, image, initials, size = "md", decorative = false, render, className, ...rest }) {
+	return renderElement("span", render, {
+		size,
+		image: src !== void 0 || image !== void 0,
+		decorative
+	}, {
+		"data-slot": "avatar",
+		"data-size": size,
+		...decorative ? { "aria-hidden": true } : {
+			role: "img",
+			"aria-label": name
+		},
+		...rest,
+		className: cx("nz-avatar", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "nz-avatar-initials",
+			"data-slot": "avatar-initials",
+			"aria-hidden": "true",
+			children: initials ?? avatarInitials(name)
+		}), image !== void 0 ? cloneElement(image, {
+			"data-slot": "avatar-image",
+			alt: "",
+			className: cx("nz-avatar-image", image.props.className)
+		}) : src !== void 0 && /* @__PURE__ */ jsx("img", {
+			className: "nz-avatar-image",
+			"data-slot": "avatar-image",
+			alt: "",
+			src,
+			srcSet,
+			sizes,
+			loading: "lazy",
+			decoding: "async"
+		})] })
+	});
+}
+/**
+* A stack of avatars and a count, announced as one item (Figma: "Maya, Jonah, Priya and 4 more"):
+* the root is `role="img"` named by the list of names, and every avatar inside is decorative.
+*/
+function AvatarGroup({ max = 3, total, size = "md", locale = "en-US", labels, render, className, children, ...rest }) {
+	const avatars = Children.toArray(children).filter((child) => isValidElement(child));
+	const shown = avatars.slice(0, Math.max(0, max));
+	const hidden = Math.max(0, (total ?? avatars.length) - shown.length);
+	const names = shown.map((avatar) => avatar.props.name);
+	if (hidden > 0) names.push(formatLabel(labels?.more ?? "{count} more", { count: hidden }, locale));
+	const label = new Intl.ListFormat(locale, {
+		style: "long",
+		type: "conjunction"
+	}).format(names);
+	return renderElement("span", render, {
+		size,
+		hidden
+	}, {
+		"data-slot": "avatar-group",
+		"data-size": size,
+		role: "img",
+		"aria-label": label,
+		...rest,
+		className: cx("nz-avatar-group", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [shown.map((avatar) => cloneElement(avatar, {
+			size,
+			decorative: true
+		})), hidden > 0 && /* @__PURE__ */ jsx("span", {
+			className: "nz-avatar-group-more",
+			"data-slot": "avatar-group-more",
+			"aria-hidden": "true",
+			children: formatLabel(labels?.overflow ?? "+{count}", { count: hidden }, locale)
+		})] })
+	});
+}
+//#endregion
+export { Avatar, AvatarGroup, avatarInitials };

package/dist/avatar/index.d.ts

@@ -0,0 +1,2 @@
+import { Avatar, AvatarGroup, AvatarGroupLabels, AvatarGroupProps, AvatarGroupState, AvatarProps, AvatarSize, AvatarState } from "./avatar.js";
+export { Avatar, AvatarGroup, type AvatarGroupLabels, type AvatarGroupProps, type AvatarGroupState, type AvatarProps, type AvatarSize, type AvatarState };

package/dist/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar, AvatarGroup } from "./avatar.js";

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/banner/banner-dismiss.client.d.ts

@@ -0,0 +1,32 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/banner/banner-dismiss.client.d.ts
+/** Strings this part renders (§16.4). */
+export interface BannerDismissLabels {
+  /** The button's accessible name. @default 'Dismiss' */
+  dismiss: string;
+}
+export interface BannerDismissProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /**
+   * Called with no arguments, so a Server Component can pass a Server Action. The Banner does not hide
+   * itself: the caller stops rendering it.
+   */
+  onDismiss?: () => void;
+  labels?: Partial<BannerDismissLabels>;
+  /** 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" />}` to add its
+   * tooltip, keeps its variant and size, and in a Banner takes the icon/secondary glyph colour, as a
+   * composed IconButton does in `Dialog.Close`.
+   */
+  render?: RenderProp<Record<string, never>>;
+}
+/**
+ * With no `render`, an IconButton (tertiary, `md`: a 20 px glyph, Figma draws 18, in a 40 px target,
+ * the height of the Banner's action) with no tooltip, as `Dialog.Close` does.
+ */
+export declare function BannerDismiss({ onDismiss, labels: labelsProp, "aria-label": ariaLabel, type, render, className, onClick, children, ...rest }: BannerDismissProps): ReactElement;
+//#endregion

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

@@ -0,0 +1,38 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { useLabels } from "../config/config.client.js";
+import { CloseGlyph } from "../_internal/glyphs.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/banner/banner-dismiss.client.tsx
+/**
+* With no `render`, an IconButton (tertiary, `md`: a 20 px glyph, Figma draws 18, in a 40 px target,
+* the height of the Banner's action) with no tooltip, as `Dialog.Close` does.
+*/
+function BannerDismiss({ onDismiss, labels: labelsProp, "aria-label": ariaLabel, type, render, className, onClick, children, ...rest }) {
+	const labels = useLabels("bannerDismiss", labelsProp);
+	const own = render === void 0;
+	return renderElement("button", render, {}, {
+		"data-slot": "banner-dismiss",
+		...own && {
+			"data-variant": "tertiary",
+			"data-size": "md"
+		},
+		...rest,
+		type: own ? type ?? "button" : void 0,
+		"aria-label": ariaLabel ?? labels?.dismiss ?? "Dismiss",
+		className: cx("nz-banner-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 { BannerDismiss };

package/dist/banner/banner.d.ts

@@ -0,0 +1,34 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/banner/banner.d.ts
+/** Figma "Tone": `brand` is Figma's Promo (handoff Q25, D-bq). */
+export type BannerTone = "brand" | "warning";
+export interface BannerState {
+  tone: BannerTone;
+}
+export interface BannerProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
+  /** @default 'brand' */
+  tone?: BannerTone;
+  /** One line, Heading/H4. The description is `children`. */
+  title?: ReactNode;
+  /**
+   * A 72 px picture before the text, such as Figma's product render on the brand banner:
+   * `<img src="…" alt="" width={72} height={72} />`. Decorative; the text carries the message.
+   */
+  media?: ReactNode;
+  /** Decorative tone glyph at 24 px, such as a triangle for `warning`; used when there is no `media`. */
+  icon?: ReactNode;
+  /** One control after the text, such as `<Button variant="primary">Add storefront</Button>`. */
+  action?: ReactNode;
+  /** `<BannerDismiss onDismiss={…} />`; leave it out for a banner that blocks work and stays. */
+  dismiss?: ReactNode;
+  /**
+   * No live role by default: a banner present on page load must not interrupt. Pass `role="status"`
+   * for one added after a user action.
+   */
+  role?: ComponentPropsWithRef<"div">["role"];
+  render?: RenderProp<BannerState>;
+}
+/** A page-wide message under the header (Figma Banner 7275:15120): one at a time. */
+export declare function Banner({ tone, title, media, icon, action, dismiss, render, className, children, ...rest }: BannerProps): ReactElement;
+//#endregion

package/dist/banner/banner.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/banner/banner.tsx
+/** A page-wide message under the header (Figma Banner 7275:15120): one at a time. */
+function Banner({ tone = "brand", title, media, icon, action, dismiss, render, className, children, ...rest }) {
+	return renderElement("div", render, { tone }, {
+		"data-slot": "banner",
+		"data-tone": tone,
+		...rest,
+		className: cx("nz-banner", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			media != null ? /* @__PURE__ */ jsx("span", {
+				className: "nz-banner-media",
+				"data-slot": "banner-media",
+				"aria-hidden": "true",
+				children: media
+			}) : icon != null && /* @__PURE__ */ jsx("span", {
+				className: "nz-banner-icon",
+				"data-slot": "banner-icon",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "nz-banner-content",
+				"data-slot": "banner-content",
+				children: [title != null && /* @__PURE__ */ jsx("div", {
+					className: "nz-banner-title",
+					"data-slot": "banner-title",
+					children: title
+				}), children != null && children !== false && children !== "" && /* @__PURE__ */ jsx("div", {
+					className: "nz-banner-description",
+					"data-slot": "banner-description",
+					children
+				})]
+			}),
+			action != null && /* @__PURE__ */ jsx("div", {
+				className: "nz-banner-action",
+				"data-slot": "banner-action",
+				children: action
+			}),
+			dismiss
+		] })
+	});
+}
+//#endregion
+export { Banner };

package/dist/banner/index.d.ts

@@ -0,0 +1,3 @@
+import { Banner, BannerProps, BannerState, BannerTone } from "./banner.js";
+import { BannerDismiss, BannerDismissLabels, BannerDismissProps } from "./banner-dismiss.client.js";
+export { Banner, BannerDismiss, type BannerDismissLabels, type BannerDismissProps, type BannerProps, type BannerState, type BannerTone };

package/dist/banner/index.js

@@ -0,0 +1,3 @@
+import { Banner } from "./banner.js";
+import { BannerDismiss } from "./banner-dismiss.client.js";
+export { Banner, BannerDismiss };

package/dist/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,46 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/breadcrumb/breadcrumb.d.ts
+/** Breadcrumb's own strings (§16.4): serialisable, English defaults. */
+export interface BreadcrumbLabels {
+  /** The landmark's name. @default 'Breadcrumb' */
+  nav: string;
+}
+export interface BreadcrumbRootProps extends ComponentPropsWithRef<"nav"> {
+  /**
+   * Replaces the chevron between levels on every `Breadcrumb.Item` that sets none. It is decorative
+   * (`aria-hidden`), so a character such as "/" is fine. It is not mirrored under `dir="rtl"`.
+   */
+  separator?: ReactNode;
+  /** An `aria-label` wins over `labels.nav`. */
+  labels?: Partial<BreadcrumbLabels>;
+  /** Must render a navigation landmark (a `<nav>`, or an element with `role="navigation"`). */
+  render?: RenderProp<Record<string, never>>;
+  /** `Breadcrumb.Item` elements, the root of the site first. */
+  children?: ReactNode;
+}
+export interface BreadcrumbItemState {
+  current: boolean;
+}
+export interface BreadcrumbItemProps extends Omit<ComponentPropsWithRef<"a">, "children"> {
+  /**
+   * The page being shown: renders text with `aria-current="page"` instead of a link (Figma: the last
+   * item, Label/M Strong). @default false
+   */
+  current?: boolean;
+  /**
+   * The router's link, for example `render={<Link href="/products" />}`. It must render an `<a>`.
+   * Ignored on the current item, which is not a link; so are the other anchor props (`href`), while
+   * `className` goes on whichever element renders.
+   */
+  render?: RenderProp<BreadcrumbItemState>;
+  /**
+   * The mark before this level (none is drawn before the first). Only the default chevron mirrors
+   * under `dir="rtl"`. @default the chevron glyph
+   */
+  separator?: ReactNode;
+  children: ReactNode;
+}
+export declare function BreadcrumbRoot({ separator, labels, render, className, children, ...rest }: BreadcrumbRootProps): ReactElement;
+export declare function BreadcrumbItem({ current, render, separator, className, children, ...rest }: BreadcrumbItemProps): ReactElement;
+//#endregion

package/dist/breadcrumb/breadcrumb.js

@@ -0,0 +1,46 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { ChevronGlyph } from "../_internal/glyphs.js";
+import { Children, cloneElement, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/breadcrumb/breadcrumb.tsx
+function BreadcrumbRoot({ separator, labels, render, className, children, ...rest }) {
+	const items = separator === void 0 ? children : Children.map(children, (child) => isValidElement(child) && child.type === BreadcrumbItem && child.props.separator === void 0 ? cloneElement(child, { separator }) : child);
+	return renderElement("nav", render, {}, {
+		"data-slot": "breadcrumb",
+		"aria-label": labels?.nav ?? "Breadcrumb",
+		...rest,
+		className: cx("nz-breadcrumb", className),
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "nz-breadcrumb-list",
+			"data-slot": "breadcrumb-list",
+			children: items
+		})
+	});
+}
+function BreadcrumbItem({ current = false, render, separator, className, children, ...rest }) {
+	const level = current ? /* @__PURE__ */ jsx("span", {
+		className: cx("nz-breadcrumb-current", className),
+		"data-slot": "breadcrumb-current",
+		"aria-current": "page",
+		children
+	}) : renderElement("a", render, { current }, {
+		"data-slot": "breadcrumb-link",
+		...rest,
+		className: cx("nz-breadcrumb-link", className),
+		children
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		className: "nz-breadcrumb-item",
+		"data-slot": "breadcrumb-item",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "nz-breadcrumb-separator",
+			"data-slot": "breadcrumb-separator",
+			"data-mirror": separator === void 0 ? "rtl" : void 0,
+			"aria-hidden": "true",
+			children: separator ?? /* @__PURE__ */ jsx(ChevronGlyph, {})
+		}), level]
+	});
+}
+//#endregion
+export { BreadcrumbItem, BreadcrumbRoot };

package/dist/breadcrumb/breadcrumb.parts.d.ts

@@ -0,0 +1,6 @@
+import { BreadcrumbItem, BreadcrumbRoot } from "./breadcrumb.js";
+declare namespace breadcrumb_parts_d_exports {
+  export { BreadcrumbItem as Item, BreadcrumbRoot as Root };
+}
+//#endregion
+export { BreadcrumbItem as Item, BreadcrumbRoot as Root, breadcrumb_parts_d_exports };

package/dist/breadcrumb/breadcrumb.parts.js

@@ -0,0 +1,9 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { BreadcrumbItem, BreadcrumbRoot } from "./breadcrumb.js";
+//#region src/breadcrumb/breadcrumb.parts.ts
+var breadcrumb_parts_exports = /* @__PURE__ */ __exportAll({
+	Item: () => BreadcrumbItem,
+	Root: () => BreadcrumbRoot
+});
+//#endregion
+export { BreadcrumbItem as Item, BreadcrumbRoot as Root, breadcrumb_parts_exports };

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbItem, BreadcrumbItemProps, BreadcrumbItemState, BreadcrumbLabels, BreadcrumbRoot, BreadcrumbRootProps } from "./breadcrumb.js";
+import { breadcrumb_parts_d_exports } from "./breadcrumb.parts.js";
+export { breadcrumb_parts_d_exports as Breadcrumb, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbItemState, type BreadcrumbLabels, BreadcrumbRoot, type BreadcrumbRootProps };

package/dist/breadcrumb/index.js

@@ -0,0 +1,3 @@
+import { BreadcrumbItem, BreadcrumbRoot } from "./breadcrumb.js";
+import { breadcrumb_parts_exports } from "./breadcrumb.parts.js";
+export { breadcrumb_parts_exports as Breadcrumb, BreadcrumbItem, BreadcrumbRoot };

package/dist/button/button.d.ts

@@ -0,0 +1,55 @@
+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: Button is a server
+   * part, so `NizivoConfig labels` does not reach it, and an app wraps Button once to pass its own.
+   * SubmitButton, its client twin, does read them (`button.pending`).
+   */
+  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,64 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement } from "react";
+//#region src/card/card.d.ts
+/**
+ * Figma "Style": Surface | Subtle | Inverse, plus the tinted surfaces of the dashboard widgets (KPI
+ * Tile "Tinted", Insight Card Brand and Accent; figma/04 §2/§3, M41): `brand` (bg/brand-subtle) and
+ * `accent` (bg/accent-subtle).
+ */
+export type CardTone = "surface" | "subtle" | "inverse" | "brand" | "accent";
+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.
+   * Every tone declares `--nz-surface`, the colour the card paints, for children to read with a
+   * fallback (`var(--nz-surface, var(--nz-bg-surface))`); on `brand` and `accent` a Delta pill
+   * inside is `bg/surface`, so it shows on the tint (M42).
+   * @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