@nizivo/react 0.1.0 → 0.2.1

package/dist/pagination/pagination.js

@@ -0,0 +1,136 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { ChevronGlyph } from "../_internal/glyphs.js";
+import { details } from "../contracts/details.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/pagination/pagination.tsx
+const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, index) => from + index);
+/** The slots between previous and next, by the rule in this file's header. */
+function paginationSlots(page, totalPages, siblingCount = 1, boundaryCount = 1) {
+	const count = Math.max(1, Math.floor(totalPages));
+	const current = Math.min(count, Math.max(1, Math.floor(page)));
+	const siblings = Math.max(0, Math.floor(siblingCount));
+	const boundary = Math.max(0, Math.floor(boundaryCount));
+	const start = range(1, Math.min(boundary, count));
+	const end = range(Math.max(count - boundary + 1, boundary + 1), count);
+	const siblingsStart = Math.max(Math.min(current - siblings, count - boundary - siblings * 2 - 1), boundary + 2);
+	const siblingsEnd = Math.min(Math.max(current + siblings, boundary + siblings * 2 + 2), count - boundary - 1);
+	const slots = [...start];
+	if (siblingsStart > boundary + 2) slots.push("ellipsis");
+	else if (boundary + 1 < count - boundary) slots.push(boundary + 1);
+	slots.push(...range(siblingsStart, siblingsEnd));
+	if (siblingsEnd < count - boundary - 1) slots.push("ellipsis");
+	else if (count - boundary > boundary) slots.push(count - boundary);
+	slots.push(...end);
+	return slots.filter((slot, index) => slot === "ellipsis" || slots.indexOf(slot) === index);
+}
+function Pagination({ page, totalPages, getHref, onPageChange, siblingCount = 1, boundaryCount = 1, size = "md", summary, previousIcon, nextIcon, locale = "en-US", labels, renderLink, render, className, ...rest }) {
+	const count = Math.max(1, Math.floor(totalPages));
+	const current = Math.min(count, Math.max(1, Math.floor(page)));
+	const number = new Intl.NumberFormat(locale);
+	const pageLabel = labels?.page ?? "Page {page}";
+	const link = (target, kind, { rel, ...props }) => {
+		if (onPageChange !== void 0) return renderElement("button", void 0, void 0, {
+			type: "button",
+			...props,
+			onClick: (event) => {
+				if (target !== current) onPageChange(target, details(kind, event.nativeEvent));
+			}
+		});
+		if (getHref === void 0) throw new Error("Pagination needs getHref (links) or onPageChange");
+		return renderElement("a", renderLink, {
+			page: target,
+			kind,
+			current: kind === "page" && target === current
+		}, {
+			href: getHref(target),
+			...props,
+			rel
+		});
+	};
+	const step = (kind, icon) => {
+		const target = kind === "previous" ? current - 1 : current + 1;
+		const slot = kind === "previous" ? {
+			"data-slot": "pagination-previous",
+			className: "nz-pagination-step nz-pagination-previous"
+		} : {
+			"data-slot": "pagination-next",
+			className: "nz-pagination-step nz-pagination-next"
+		};
+		const { className: stepClass, ...slotAttribute } = slot;
+		const props = {
+			...slot,
+			"aria-label": kind === "previous" ? labels?.previous ?? "Previous page" : labels?.next ?? "Next page",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "nz-pagination-icon",
+				"data-slot": "pagination-icon",
+				"data-mirror": icon === void 0 ? "rtl" : void 0,
+				"aria-hidden": "true",
+				children: icon ?? /* @__PURE__ */ jsx(ChevronGlyph, {})
+			})
+		};
+		if ((target < 1 || target > count) && onPageChange !== void 0) return /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: stepClass,
+			...slotAttribute,
+			"aria-label": props["aria-label"],
+			disabled: true,
+			"data-disabled": "",
+			children: props.children
+		});
+		if (target < 1 || target > count) return /* @__PURE__ */ jsx("span", {
+			className: stepClass,
+			...slotAttribute,
+			role: "link",
+			"aria-label": props["aria-label"],
+			"aria-disabled": "true",
+			"data-disabled": "",
+			children: props.children
+		});
+		return link(target, kind, {
+			...props,
+			rel: kind === "previous" ? "prev" : "next"
+		});
+	};
+	const slots = paginationSlots(current, count, siblingCount, boundaryCount);
+	const firstGap = slots.indexOf("ellipsis");
+	return renderElement("nav", render, {
+		page: current,
+		totalPages: count,
+		size
+	}, {
+		"data-slot": "pagination",
+		"data-size": size,
+		"aria-label": labels?.nav ?? "Pagination",
+		...rest,
+		className: cx("nz-pagination", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [summary != null && /* @__PURE__ */ jsx("p", {
+			className: "nz-pagination-summary",
+			"data-slot": "pagination-summary",
+			children: summary
+		}), /* @__PURE__ */ jsxs("ul", {
+			className: "nz-pagination-list",
+			"data-slot": "pagination-list",
+			children: [
+				/* @__PURE__ */ jsx("li", { children: step("previous", previousIcon) }),
+				slots.map((slot, index) => slot === "ellipsis" ? /* @__PURE__ */ jsx("li", {
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "nz-pagination-ellipsis",
+						"data-slot": "pagination-ellipsis",
+						children: "…"
+					})
+				}, index === firstGap ? "gap-start" : "gap-end") : /* @__PURE__ */ jsx("li", { children: link(slot, "page", {
+					"data-slot": "pagination-page",
+					className: "nz-pagination-page",
+					"aria-label": pageLabel.replaceAll("{page}", number.format(slot)),
+					"aria-current": slot === current ? "page" : void 0,
+					children: number.format(slot)
+				}) }, slot)),
+				/* @__PURE__ */ jsx("li", { children: step("next", nextIcon) })
+			]
+		})] })
+	});
+}
+//#endregion
+export { Pagination, paginationSlots };

package/dist/password-input/index.d.ts

@@ -0,0 +1,2 @@
+import { PasswordInput, PasswordInputLabels, PasswordInputProps, PasswordInputState, PasswordInputVisibleReason } from "./password-input.client.js";
+export { PasswordInput, type PasswordInputLabels, type PasswordInputProps, type PasswordInputState, type PasswordInputVisibleReason };

package/dist/password-input/index.js

@@ -0,0 +1 @@
+export { PasswordInput } from "./password-input.client.js";

package/dist/password-input/password-input.client.d.ts

@@ -0,0 +1,52 @@
+import { RenderProp } from "../contracts/render.js";
+import { ControlSize } from "../augment.js";
+import { ChangeDetails } from "../contracts/details.js";
+import { ComponentPropsWithRef, JSX, ReactNode } from "react";
+//#region src/password-input/password-input.client.d.ts
+/** PasswordInput's own strings (§16.4): serialisable, English defaults. */
+export interface PasswordInputLabels {
+  /**
+   * The toggle's name, the same in both states: `aria-pressed` says whether the password shows.
+   * @default 'Show password'
+   */
+  toggle: string;
+}
+/** `'toggle'`: the toggle was pressed. `'submit'`: the form submitted, which hides the password. */
+export type PasswordInputVisibleReason = "toggle" | "submit";
+export interface PasswordInputState {
+  size: ControlSize;
+  /** The password shows as text. */
+  visible: boolean;
+  /** An error message is presented (the Field's, or the `invalid` prop). */
+  invalid: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+}
+export interface PasswordInputProps extends Omit<ComponentPropsWithRef<"input">, "type" | "size" | "prefix" | "children"> {
+  /** 32 / 40 / 48 px, as Input. @default 'md' */
+  size?: ControlSize;
+  /** An error message is presented for this input. Inside a Field, the Field sets it. */
+  invalid?: boolean;
+  /** The password shows as text when the input first renders. @default false */
+  defaultVisible?: boolean;
+  /** Called when the password is shown or hidden: by the toggle, or hidden by a submit. */
+  onVisibleChange?: (visible: boolean, details: ChangeDetails<PasswordInputVisibleReason>) => void;
+  /** The toggle's mark while the password is hidden. Defaults to the internal `eye` glyph. */
+  showIcon?: ReactNode;
+  /** The toggle's mark while the password shows. Defaults to the internal `eye-off` glyph. */
+  hideIcon?: ReactNode;
+  /** Overrides the toggle's name, for example `labels={{ toggle: 'Passwort anzeigen' }}`. */
+  labels?: Partial<PasswordInputLabels>;
+  /**
+   * `'current-password'` to sign in, `'new-password'` to choose one (a password manager then offers
+   * to generate one). @default 'current-password'
+   */
+  autoComplete?: ComponentPropsWithRef<"input">["autoComplete"];
+  /**
+   * Composition of the root, the bordered box. `className` and `style` go on the root too; every
+   * other prop, `ref` included, goes on the `<input>`.
+   */
+  render?: RenderProp<PasswordInputState>;
+}
+export declare function PasswordInput({ size, id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, defaultVisible, onVisibleChange, showIcon, hideIcon, labels: labelsProp, autoComplete, render, className, style, ...rest }: PasswordInputProps): JSX.Element;
+//#endregion

package/dist/password-input/password-input.client.js

@@ -0,0 +1,106 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { useLabels } from "../config/config.client.js";
+import { EyeGlyph, EyeOffGlyph } from "../_internal/glyphs.js";
+import { details } from "../contracts/details.js";
+import { stateAttrs } from "../contracts/state.js";
+import { useFieldControl } from "../field/field-scope.client.js";
+import { useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/password-input/password-input.client.tsx
+function PasswordInput({ size = "md", id, name, required, disabled, readOnly, invalid, "aria-invalid": ariaInvalid, "aria-describedby": describedBy, defaultVisible = false, onVisibleChange, showIcon, hideIcon, labels: labelsProp, autoComplete = "current-password", render, className, style, ...rest }) {
+	const labels = useLabels("passwordInput", labelsProp);
+	const field = useFieldControl({
+		id,
+		name,
+		required,
+		disabled,
+		readOnly,
+		invalid: invalid ?? (ariaInvalid === true || ariaInvalid === "true" ? true : void 0),
+		"aria-describedby": describedBy
+	});
+	const own = useId();
+	const inputId = field.id ?? own;
+	const [visible, setVisible] = useState(defaultVisible);
+	const input = useRef(null);
+	const report = useRef(onVisibleChange);
+	useEffect(() => {
+		report.current = onVisibleChange;
+	});
+	useEffect(() => {
+		const element = input.current;
+		if (!visible || element === null) return void 0;
+		const doc = element.ownerDocument;
+		const onSubmit = (event) => {
+			if (element.form === null || event.target !== element.form) return;
+			element.type = "password";
+			setVisible(false);
+			report.current?.(false, details("submit", event));
+		};
+		doc.addEventListener("submit", onSubmit, true);
+		return () => doc.removeEventListener("submit", onSubmit, true);
+	}, [visible]);
+	const state = {
+		size,
+		visible,
+		invalid: field.invalid,
+		disabled: field.disabled,
+		readOnly: field.readOnly
+	};
+	const ownProps = {
+		...field.controlProps,
+		id: inputId,
+		ref: input,
+		autoComplete,
+		spellCheck: false,
+		autoCapitalize: "off"
+	};
+	return renderElement("span", render, state, {
+		"data-slot": "password-input",
+		"data-size": size,
+		...stateAttrs({
+			invalid: state.invalid,
+			disabled: state.disabled,
+			readOnly: state.readOnly
+		}),
+		className: cx("nz-password-input nz-input", className),
+		style,
+		onMouseDown: focusInput,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+			...mergeProps(ownProps, rest),
+			type: visible ? "text" : "password",
+			className: "nz-password-input-control nz-input-control",
+			"data-slot": "password-input-control"
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "nz-password-input-toggle",
+			"data-slot": "password-input-toggle",
+			"aria-label": labels?.toggle ?? "Show password",
+			"aria-pressed": visible,
+			"aria-controls": inputId,
+			disabled: field.disabled || void 0,
+			onClick: (event) => {
+				setVisible(!visible);
+				onVisibleChange?.(!visible, details("toggle", event.nativeEvent));
+			},
+			children: /* @__PURE__ */ jsx("span", {
+				className: "nz-password-input-icon",
+				"data-slot": "password-input-icon",
+				"aria-hidden": "true",
+				children: visible ? hideIcon ?? /* @__PURE__ */ jsx(EyeOffGlyph, {}) : showIcon ?? /* @__PURE__ */ jsx(EyeGlyph, {})
+			})
+		})] })
+	});
+}
+function focusInput(event) {
+	const input = event.currentTarget.querySelector(":scope > .nz-password-input-control");
+	const target = event.target;
+	if (input === null || target === input || input.disabled) return;
+	if (target instanceof Element && target.closest(".nz-password-input-toggle") !== null) return;
+	event.preventDefault();
+	input.focus();
+}
+//#endregion
+export { PasswordInput };

package/dist/popover/index.d.ts

@@ -0,0 +1,5 @@
+import { OpenReason } from "../contracts/details.js";
+import { PopoverCloseProps, PopoverCloseState, PopoverDescriptionProps, PopoverLabels, PopoverPopupProps, PopoverPopupState, PopoverRootProps, PopoverSide, PopoverTitleLevel, PopoverTitleProps, PopoverTriggerProps, PopoverTriggerState } from "./popover.contract.js";
+import { PopoverClose, PopoverDescription, PopoverPopup, PopoverRoot, PopoverTitle, PopoverTrigger } from "./popover.client.js";
+import { popover_parts_d_exports } from "./popover.parts.js";
+export { type OpenReason, popover_parts_d_exports as Popover, PopoverClose, type PopoverCloseProps, type PopoverCloseState, PopoverDescription, type PopoverDescriptionProps, type PopoverLabels, PopoverPopup, type PopoverPopupProps, type PopoverPopupState, PopoverRoot, type PopoverRootProps, type PopoverSide, PopoverTitle, type PopoverTitleLevel, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps, type PopoverTriggerState };

package/dist/popover/index.js

@@ -0,0 +1,3 @@
+import { PopoverClose, PopoverDescription, PopoverPopup, PopoverRoot, PopoverTitle, PopoverTrigger } from "./popover.client.js";
+import { popover_parts_exports } from "./popover.parts.js";
+export { popover_parts_exports as Popover, PopoverClose, PopoverDescription, PopoverPopup, PopoverRoot, PopoverTitle, PopoverTrigger };

package/dist/popover/popover.client.d.ts

@@ -0,0 +1,20 @@
+import { PopoverCloseProps, PopoverDescriptionProps, PopoverPopupProps, PopoverRootProps, PopoverTitleProps, PopoverTriggerProps } from "./popover.contract.js";
+import { JSX } from "react";
+//#region src/popover/popover.client.d.ts
+export declare function PopoverRoot(props: PopoverRootProps): JSX.Element;
+/**
+ * Without `render`, its own `<button>`: `nz-hit-target` gives it the 44 px coarse-pointer hit area of
+ * every standalone pressable, and popover.css gives that bare button a 24 x 24 px minimum (WCAG 2.2
+ * 2.5.8, as Dialog's and Tooltip's, M27). A composed Button or IconButton keeps its own size.
+ */
+export declare function PopoverTrigger({ className, render, ...rest }: PopoverTriggerProps): JSX.Element;
+export declare function PopoverPopup({ side, align, sideOffset, container, "aria-label": label, "aria-labelledby": labelledBy, "aria-describedby": describedBy, className, style, children }: PopoverPopupProps): JSX.Element;
+export declare function PopoverTitle({ level, className, render, ...rest }: PopoverTitleProps): JSX.Element;
+export declare function PopoverDescription({ className, render, ...rest }: PopoverDescriptionProps): JSX.Element;
+/**
+ * With `render` or `children`, the consumer's button. With neither, an IconButton (tertiary, `sm`)
+ * showing the core close glyph, named by `labels.close`: the IconButton element's markup written out,
+ * as `Dialog.Close` does, so the Popover entry does not pull in IconButton's tooltip chain.
+ */
+export declare function PopoverClose({ className, render, children, labels: labelsProp, ...rest }: PopoverCloseProps): JSX.Element;
+//#endregion

package/dist/popover/popover.client.js

@@ -0,0 +1,113 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { toRenderFn } from "../contracts/render.js";
+import { useLabels } from "../config/config.client.js";
+import { CloseGlyph } from "../_internal/glyphs.js";
+import { Close, Description, Popup, Root, Title, Trigger } from "../_engines/react-aria/popover.client.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/popover/popover.client.tsx
+const renderDiv = toRenderFn(void 0, "div");
+const renderP = toRenderFn(void 0, "p");
+const TABBABLE = "a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable=\"false\"])";
+/**
+* Focus on open (§12.2): an element marked `autoFocus` keeps it; otherwise the first tabbable element
+* in the popup, passing over the default corner Close (focus starts on the content, not on the way
+* out); otherwise the engine focuses the popup's content element itself.
+*/
+function initialFocus(content) {
+	for (const element of content.querySelectorAll(TABBABLE)) if (element.tabIndex >= 0 && !element.matches(":disabled, .nz-popover-close.nz-icon-button") && element.getClientRects().length > 0) return element;
+	return null;
+}
+function PopoverRoot(props) {
+	return /* @__PURE__ */ jsx(Root, { ...props });
+}
+/**
+* Without `render`, its own `<button>`: `nz-hit-target` gives it the 44 px coarse-pointer hit area of
+* every standalone pressable, and popover.css gives that bare button a 24 x 24 px minimum (WCAG 2.2
+* 2.5.8, as Dialog's and Tooltip's, M27). A composed Button or IconButton keeps its own size.
+*/
+function PopoverTrigger({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Trigger, {
+		...rest,
+		className: cx("nz-popover-trigger", render === void 0 && "nz-hit-target", className),
+		"data-slot": "popover-trigger",
+		render: toRenderFn(render, "button")
+	});
+}
+function PopoverPopup({ side = "bottom", align = "center", sideOffset = 8, container, "aria-label": label, "aria-labelledby": labelledBy, "aria-describedby": describedBy, className, style, children }) {
+	return /* @__PURE__ */ jsx(Popup, {
+		side,
+		align,
+		sideOffset,
+		container,
+		"aria-label": label,
+		"aria-labelledby": labelledBy,
+		"aria-describedby": describedBy,
+		contentProps: {
+			className: "nz-popover-content",
+			"data-slot": "popover-content"
+		},
+		initialFocus,
+		className: cx("nz-popover-popup", className),
+		style,
+		"data-slot": "popover-popup",
+		render: renderDiv,
+		children
+	});
+}
+const HEADINGS = {
+	2: toRenderFn(void 0, "h2"),
+	3: toRenderFn(void 0, "h3"),
+	4: toRenderFn(void 0, "h4"),
+	5: toRenderFn(void 0, "h5"),
+	6: toRenderFn(void 0, "h6")
+};
+function PopoverTitle({ level = 2, className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Title, {
+		...rest,
+		level,
+		className: cx("nz-popover-title", className),
+		"data-slot": "popover-title",
+		render: render === void 0 ? HEADINGS[level] : toRenderFn(render, `h${level}`)
+	});
+}
+function PopoverDescription({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Description, {
+		...rest,
+		className: cx("nz-popover-description", className),
+		"data-slot": "popover-description",
+		render: render === void 0 ? renderP : toRenderFn(render, "p")
+	});
+}
+/**
+* With `render` or `children`, the consumer's button. With neither, an IconButton (tertiary, `sm`)
+* showing the core close glyph, named by `labels.close`: the IconButton element's markup written out,
+* as `Dialog.Close` does, so the Popover entry does not pull in IconButton's tooltip chain.
+*/
+function PopoverClose({ className, render, children, labels: labelsProp, ...rest }) {
+	const labels = useLabels("popover", labelsProp);
+	return /* @__PURE__ */ jsx(Close, {
+		...rest,
+		className: cx("nz-popover-close", className),
+		"data-slot": "popover-close",
+		render: toRenderFn(render ?? (children === void 0 ? closeIcon(rest["aria-label"] ?? labels?.close ?? "Close") : void 0), "button"),
+		children
+	});
+}
+function closeIcon(label) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "nz-icon-button nz-hit-target",
+		"data-variant": "tertiary",
+		"data-size": "sm",
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "nz-icon-button-icon",
+			"data-slot": "icon-button-icon",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(CloseGlyph, {})
+		})
+	});
+}
+//#endregion
+export { PopoverClose, PopoverDescription, PopoverPopup, PopoverRoot, PopoverTitle, PopoverTrigger };

package/dist/popover/popover.contract.d.ts

@@ -0,0 +1,88 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails, OpenReason } from "../contracts/details.js";
+import "../_internal/engine-part.js";
+import { Align, Side } from "../contracts/state.js";
+import { CSSProperties, ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/popover/popover.contract.d.ts
+/** Logical side; the resolved physical side is `data-side` on the popup. */
+export type PopoverSide = "top" | "bottom" | "start" | "end";
+export type PopoverTitleLevel = 2 | 3 | 4 | 5 | 6;
+/**
+ * Strings the Popover renders (§9.3 rule 7, §16.4). `close` is the accessible name of the default
+ * `Popover.Close` (an IconButton showing the close glyph), set through that part's `labels`.
+ * Engine-owned with React Aria (not overridable): `dismiss`, the visually hidden "Dismiss" buttons
+ * at both ends of the popup.
+ */
+export interface PopoverLabels {
+  /** @default 'Close' */
+  close: string;
+  dismiss: string;
+}
+export interface PopoverRootProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  /** `details.reason` is `'unknown'` with React Aria, which reports no cause. */
+  onOpenChange?: (open: boolean, details: ChangeDetails<OpenReason>) => void;
+  children: ReactNode;
+}
+export interface PopoverTriggerState {
+  open: boolean;
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface PopoverPopupState {
+  entering: boolean;
+  exiting: boolean;
+  side: Side;
+}
+export interface PopoverCloseState {
+  pressed: boolean;
+  focusVisible: boolean;
+  disabled: boolean;
+}
+export interface PopoverTriggerProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /** Must render a `<button>`, for example `render={<IconButton label="Notifications" … />}`. */
+  render?: RenderProp<PopoverTriggerState>;
+  children?: ReactNode;
+}
+export interface PopoverPopupProps {
+  /** @default 'bottom' */
+  side?: PopoverSide;
+  /** @default 'center' */
+  align?: Align;
+  /** Distance from the trigger in px. @default 8 */
+  sideOffset?: number;
+  /** Portal container. Defaults to the parent overlay, else `document.body` (§12.1 L2). */
+  container?: Element | null;
+  /** Names the popup when it has no `Popover.Title`. */
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}
+export interface PopoverTitleProps extends Omit<ComponentPropsWithRef<"h2">, "id"> {
+  /** @default 2 */
+  level?: PopoverTitleLevel;
+  render?: RenderProp<Record<string, never>>;
+}
+export interface PopoverDescriptionProps extends Omit<ComponentPropsWithRef<"p">, "id"> {
+  render?: RenderProp<Record<string, never>>;
+}
+export interface PopoverCloseProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /**
+   * Must render a `<button>`, for example `render={<Button size="sm">Done</Button>}`. With neither
+   * `render` nor `children`, the part is a small IconButton showing the close glyph, named by
+   * `labels.close`, which sits in the popup's top corner when it is a direct child of
+   * `Popover.Popup`.
+   */
+  render?: RenderProp<PopoverCloseState>;
+  /** Text content, rendered in a plain `<button>`; leave it out for the default IconButton. */
+  children?: ReactNode;
+  /** The default IconButton's accessible name; an `aria-label` you pass wins. */
+  labels?: Partial<Pick<PopoverLabels, "close">>;
+}
+//#endregion
+export type { OpenReason };

package/dist/popover/popover.parts.d.ts

@@ -0,0 +1,6 @@
+import { PopoverClose, PopoverDescription, PopoverPopup, PopoverRoot, PopoverTitle, PopoverTrigger } from "./popover.client.js";
+declare namespace popover_parts_d_exports {
+  export { PopoverClose as Close, PopoverDescription as Description, PopoverPopup as Popup, PopoverRoot as Root, PopoverTitle as Title, PopoverTrigger as Trigger };
+}
+//#endregion
+export { PopoverClose as Close, PopoverDescription as Description, PopoverPopup as Popup, PopoverRoot as Root, PopoverTitle as Title, PopoverTrigger as Trigger, popover_parts_d_exports };

package/dist/popover/popover.parts.js

@@ -0,0 +1,13 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { PopoverClose, PopoverDescription, PopoverPopup, PopoverRoot, PopoverTitle, PopoverTrigger } from "./popover.client.js";
+//#region src/popover/popover.parts.ts
+var popover_parts_exports = /* @__PURE__ */ __exportAll({
+	Close: () => PopoverClose,
+	Description: () => PopoverDescription,
+	Popup: () => PopoverPopup,
+	Root: () => PopoverRoot,
+	Title: () => PopoverTitle,
+	Trigger: () => PopoverTrigger
+});
+//#endregion
+export { PopoverClose as Close, PopoverDescription as Description, PopoverPopup as Popup, PopoverRoot as Root, PopoverTitle as Title, PopoverTrigger as Trigger, popover_parts_exports };

package/dist/ranked-list/index.d.ts

@@ -0,0 +1,3 @@
+import { RankedListAction, RankedListActionProps, RankedListItem, RankedListItemProps, RankedListItemState, RankedListLabels, RankedListRoot, RankedListRootProps, RankedListRootState, RankedListTitleLevel } from "./ranked-list.js";
+import { ranked_list_parts_d_exports } from "./ranked-list.parts.js";
+export { ranked_list_parts_d_exports as RankedList, RankedListAction, type RankedListActionProps, RankedListItem, type RankedListItemProps, type RankedListItemState, type RankedListLabels, RankedListRoot, type RankedListRootProps, type RankedListRootState, type RankedListTitleLevel };

package/dist/ranked-list/index.js

@@ -0,0 +1,3 @@
+import { RankedListAction, RankedListItem, RankedListRoot } from "./ranked-list.js";
+import { ranked_list_parts_exports } from "./ranked-list.parts.js";
+export { ranked_list_parts_exports as RankedList, RankedListAction, RankedListItem, RankedListRoot };

package/dist/ranked-list/ranked-list.d.ts

@@ -0,0 +1,85 @@
+import { RenderProp } from "../contracts/render.js";
+import { DataStatus } from "../_internal/data-status.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/ranked-list/ranked-list.d.ts
+/**
+ * RankedList's own strings (§16.4): serialisable, English defaults, Metric's wording. `{label}` is
+ * replaced by the `title` (left out when there is none).
+ */
+export interface RankedListLabels {
+  /** Static, visually hidden text while loading (§16.5: no live region). @default 'Loading {label}' */
+  loading: string;
+  /** Shown when there is nothing to rank and no `empty` slot. @default 'No data' */
+  empty: string;
+  /** The InlineError message on a load failure with no `error` slot. @default 'Could not load {label}' */
+  error: string;
+}
+export type RankedListTitleLevel = 2 | 3 | 4 | 5 | 6;
+export interface RankedListRootState {
+  status: DataStatus;
+  pending: boolean;
+}
+export interface RankedListRootProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
+  /** The heading ("Top channels"); it also names the list. */
+  title?: ReactNode;
+  /** The heading level; its look is Heading/H4 at every level. @default 3 */
+  titleLevel?: RankedListTitleLevel;
+  /** The header's end, for example `<RankedList.Action href="/channels">View all</RankedList.Action>`. */
+  action?: ReactNode;
+  /**
+   * The value a full bar stands for. @default the largest value among the direct
+   * `RankedList.Item` children (the leader); pass it when the items are wrapped in your own components
+   */
+  max?: number;
+  /** Every item's number format, unless the item sets its own (`Intl.NumberFormatOptions`). */
+  format?: Intl.NumberFormatOptions;
+  /** BCP 47 tag for every item's value. @default 'en-US' */
+  locale?: string;
+  /**
+   * The data lifecycle (§16.5). A ready list with no items is `empty`. @default 'ready'
+   */
+  status?: DataStatus;
+  /**
+   * A refresh is in flight while the rows show: `data-pending` and `aria-busy` (ready only, as in
+   * Metric). @default false
+   */
+  pending?: boolean;
+  /** Replaces the empty message. */
+  empty?: ReactNode;
+  /** Replaces the error message, for example an `InlineError` with a retry `action`. */
+  error?: ReactNode;
+  /**
+   * How many rows loading, empty and error reserve, so the box does not change when the data
+   * arrives. Pass the number of rows you show (Figma: 5; "max ~6 rows, then View all"). @default 5
+   */
+  rows?: number;
+  labels?: Partial<RankedListLabels>;
+  /** Composition of the root (Card's surface through the `nz-card` class). */
+  render?: RenderProp<RankedListRootState>;
+  /** `RankedList.Item` elements, the leader first. */
+  children?: ReactNode;
+}
+export interface RankedListItemState {
+  /** value ÷ max, from 0 to 1. */
+  ratio: number;
+}
+export interface RankedListItemProps extends Omit<ComponentPropsWithRef<"li">, "children"> {
+  label: ReactNode;
+  value: number;
+  /** Overrides the list's `max` for this row. */
+  max?: number | undefined;
+  /** Overrides the list's `format`. */
+  format?: Intl.NumberFormatOptions | undefined;
+  /** @default the list's `locale`, else 'en-US' */
+  locale?: string | undefined;
+  render?: RenderProp<RankedListItemState>;
+}
+export interface RankedListActionProps extends ComponentPropsWithRef<"a"> {
+  /** The router's link, for example `render={<Link href="/channels" />}`. It must render an `<a>`. */
+  render?: RenderProp<Record<string, never>>;
+}
+export declare function RankedListRoot({ title, titleLevel, action, max, format, locale, status, pending, empty, error, rows, labels, render, className, children, ...rest }: RankedListRootProps): ReactElement;
+export declare function RankedListItem({ label, value, max, format, locale, render, className, ...rest }: RankedListItemProps): ReactElement;
+/** "View all": a real link, at least 24 px tall (WCAG 2.5.8; figma/04 issue 7). */
+export declare function RankedListAction({ render, className, ...rest }: RankedListActionProps): ReactElement;
+//#endregion