@nizivo/react 0.0.0-stage → 0.2.0

package/dist/progress-bar/progress-bar.d.ts

@@ -0,0 +1,34 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/progress-bar/progress-bar.d.ts
+/** Figma "Tone" (Brand, Warning, Critical) plus `success` and `neutral`. */
+export type ProgressBarTone = "brand" | "success" | "warning" | "critical" | "neutral";
+export interface ProgressBarState {
+  tone: ProgressBarTone;
+  /** The clamped value, or `null` while indeterminate. */
+  value: number | null;
+  max: number;
+  indeterminate: boolean;
+}
+export interface ProgressBarProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** Clamped to `0…max`. @default 0 */
+  value?: number;
+  /** Must be above zero. @default 100 */
+  max?: number;
+  /** The visible name. Without it, name the bar with `aria-label` or `aria-labelledby`. */
+  label?: ReactNode;
+  /** Shows the value as a percentage beside the label (hidden from assistive technology, which reads the bar itself). @default true */
+  showValue?: boolean;
+  /** Work is under way but its amount is unknown: the bar has no value. @default false */
+  indeterminate?: boolean;
+  /** @default 'brand' */
+  tone?: ProgressBarTone;
+  /** BCP 47 tag for the percentage. @default 'en-US' */
+  locale?: string;
+  /** Replaces the shown percentage and is read instead of it, for example "3 of 5 steps". */
+  valueText?: string;
+  /** Composition of the root; the native `<progress>` inside keeps its semantics. */
+  render?: RenderProp<ProgressBarState>;
+}
+export declare function ProgressBar({ value, max, label, showValue, indeterminate, tone, locale, valueText, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, render, className, ...rest }: ProgressBarProps): ReactElement;
+//#endregion

package/dist/progress-bar/progress-bar.js

@@ -0,0 +1,55 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/progress-bar/progress-bar.tsx
+function ProgressBar({ value = 0, max = 100, label, showValue = true, indeterminate = false, tone = "brand", locale = "en-US", valueText, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, render, className, ...rest }) {
+	const labelId = useId();
+	const range = Number.isFinite(max) && max > 0 ? max : 100;
+	const current = indeterminate ? null : clamp(value, range);
+	const shown = current === null ? void 0 : valueText ?? new Intl.NumberFormat(locale, {
+		style: "percent",
+		maximumFractionDigits: 0
+	}).format(current / range);
+	const hasLabel = label != null;
+	const hasValue = showValue && shown !== void 0;
+	return renderElement("div", render, {
+		tone,
+		value: current,
+		max: range,
+		indeterminate
+	}, {
+		"data-slot": "progress-bar",
+		"data-tone": tone,
+		...rest,
+		className: cx("nz-progress-bar", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [(hasLabel || hasValue) && /* @__PURE__ */ jsxs("div", {
+			className: "nz-progress-bar-header",
+			"data-slot": "progress-bar-header",
+			children: [hasLabel && /* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: "nz-progress-bar-label",
+				"data-slot": "progress-bar-label",
+				children: label
+			}), hasValue && /* @__PURE__ */ jsx("span", {
+				className: "nz-progress-bar-value",
+				"data-slot": "progress-bar-value",
+				"aria-hidden": "true",
+				children: shown
+			})]
+		}), /* @__PURE__ */ jsx("progress", {
+			className: "nz-progress-bar-track",
+			"data-slot": "progress-bar-track",
+			max: range,
+			value: current ?? void 0,
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy ?? (hasLabel ? labelId : void 0),
+			"aria-valuetext": current === null ? void 0 : valueText
+		})] })
+	});
+}
+function clamp(value, max) {
+	return Number.isFinite(value) ? Math.min(Math.max(value, 0), max) : 0;
+}
+//#endregion
+export { ProgressBar };

package/dist/progress-ring/index.d.ts

@@ -0,0 +1,2 @@
+import { ProgressRing, ProgressRingProps, ProgressRingSize, ProgressRingState, ProgressRingTone } from "./progress-ring.js";
+export { ProgressRing, type ProgressRingProps, type ProgressRingSize, type ProgressRingState, type ProgressRingTone };

package/dist/progress-ring/index.js

@@ -0,0 +1 @@
+export { ProgressRing } from "./progress-ring.js";

package/dist/progress-ring/progress-ring.d.ts

@@ -0,0 +1,38 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/progress-ring/progress-ring.d.ts
+export type ProgressRingTone = "brand" | "success" | "warning" | "critical" | "neutral";
+/** 48 / 72 / 96 px; Figma draws only 72. */
+export type ProgressRingSize = "sm" | "md" | "lg";
+export interface ProgressRingState {
+  tone: ProgressRingTone;
+  size: ProgressRingSize;
+  /** The value clamped to `0…max`. */
+  value: number;
+  max: number;
+}
+export interface ProgressRingProps extends Omit<ComponentPropsWithRef<"div">, "role"> {
+  /** Figma "Value" (25 / 50 / 75 / 100 there). Clamped to `0…max`. */
+  value: number;
+  /** Must be above zero. @default 100 */
+  max?: number;
+  /** @default 'brand' */
+  tone?: ProgressRingTone;
+  /** @default 'md' */
+  size?: ProgressRingSize;
+  /**
+   * Exposes the ring as a `meter` (a measurement, such as a goal reached) instead of a `progressbar`
+   * (work under way). @default false
+   */
+  meter?: boolean;
+  /** BCP 47 tag for the percentage. @default 'en-US' */
+  locale?: string;
+  /** What assistive technology reads instead of the percentage. Set it whenever `children` shows something else. */
+  valueText?: string;
+  /** The centre, shown to sighted users only (the ring's children are presentational). @default the percentage */
+  children?: ReactNode;
+  /** Name the ring with `aria-label` or `aria-labelledby`. */
+  render?: RenderProp<ProgressRingState>;
+}
+export declare function ProgressRing({ value, max, tone, size, meter, locale, valueText, render, className, children, ...rest }: ProgressRingProps): ReactElement;
+//#endregion

package/dist/progress-ring/progress-ring.js

@@ -0,0 +1,67 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/progress-ring/progress-ring.tsx
+const CENTRE = 36;
+/** Figma's inner-radius ratio 0.8 at 72 px: a 7.2-unit ring on the 32.4 radius midline. */
+const STROKE = 7.2;
+const RADIUS = CENTRE - STROKE / 2;
+function ProgressRing({ value, max = 100, tone = "brand", size = "md", meter = false, locale = "en-US", valueText, render, className, children, ...rest }) {
+	const range = Number.isFinite(max) && max > 0 ? max : 100;
+	const current = Number.isFinite(value) ? Math.min(Math.max(value, 0), range) : 0;
+	const percent = new Intl.NumberFormat(locale, {
+		style: "percent",
+		maximumFractionDigits: 0
+	}).format(current / range);
+	const arc = current / range * 100;
+	return renderElement("div", render, {
+		tone,
+		size,
+		value: current,
+		max: range
+	}, {
+		role: meter ? "meter" : "progressbar",
+		"aria-valuenow": current,
+		"aria-valuemin": 0,
+		"aria-valuemax": range,
+		"aria-valuetext": valueText ?? percent,
+		"data-slot": "progress-ring",
+		"data-tone": tone,
+		"data-size": size,
+		...rest,
+		className: cx("nz-progress-ring", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("svg", {
+			className: "nz-progress-ring-svg",
+			viewBox: `0 0 72 72`,
+			"aria-hidden": "true",
+			focusable: "false",
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: "nz-progress-ring-track",
+				"data-slot": "progress-ring-track",
+				cx: CENTRE,
+				cy: CENTRE,
+				r: RADIUS,
+				fill: "none",
+				strokeWidth: STROKE
+			}), /* @__PURE__ */ jsx("circle", {
+				className: "nz-progress-ring-fill",
+				"data-slot": "progress-ring-fill",
+				cx: CENTRE,
+				cy: CENTRE,
+				r: RADIUS,
+				fill: "none",
+				strokeWidth: STROKE,
+				pathLength: 100,
+				strokeDasharray: `${arc} 100`,
+				transform: `rotate(-90 ${CENTRE} ${CENTRE})`
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "nz-progress-ring-label",
+			"data-slot": "progress-ring-label",
+			"aria-hidden": "true",
+			children: children ?? percent
+		})] })
+	});
+}
+//#endregion
+export { ProgressRing };

package/dist/radio-group/index.d.ts

@@ -0,0 +1,3 @@
+import { RadioGroup, RadioGroupChangeReason, RadioGroupProps } from "./radio-group.js";
+import { Radio, RadioProps, RadioState } from "./radio-group.client.js";
+export { Radio, RadioGroup, type RadioGroupChangeReason, type RadioGroupProps, type RadioProps, type RadioState };

package/dist/radio-group/index.js

@@ -0,0 +1,3 @@
+import { Radio } from "./radio-group.client.js";
+import { RadioGroup } from "./radio-group.js";
+export { Radio, RadioGroup };

package/dist/radio-group/radio-group.client.d.ts

@@ -0,0 +1,22 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/radio-group/radio-group.client.d.ts
+/** What a `render` function receives for the root `<label>`. */
+export interface RadioState {
+  disabled: boolean;
+}
+export interface RadioProps extends Omit<ComponentPropsWithRef<"input">, "type" | "value" | "name" | "checked" | "defaultChecked" | "required" | "readOnly" | "children" | "size"> {
+  /** Submitted under the group's name when this radio is checked. */
+  value: string;
+  /** Composition of the root `<label>`, the hit target. */
+  render?: RenderProp<RadioState>;
+  /** The label, after the circle. */
+  children?: ReactNode;
+}
+/**
+ * One option of a `RadioGroup`. `className` and `style` go on the root `<label>`; every other
+ * attribute, `ref` included, goes on the native `<input>`. Name, checked state and `required` come
+ * from the group.
+ */
+export declare function Radio({ value, disabled, render, className, style, children, ...rest }: RadioProps): ReactElement;
+//#endregion

package/dist/radio-group/radio-group.client.js

@@ -0,0 +1,70 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { mergeProps } from "../contracts/merge-props.js";
+import { renderElement } from "../contracts/render.js";
+import { details } from "../contracts/details.js";
+import { stateAttrs } from "../contracts/state.js";
+import { presented } from "../_internal/field.js";
+import { createContext, use, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/radio-group/radio-group.client.tsx
+const RadioGroupContext = createContext(null);
+/** Internal: rendered only by `RadioGroup`. Every prop but `onValueChange` is serialisable. */
+function RadioGroupScope({ name, value, defaultValue, required, onValueChange, children }) {
+	const scope = useMemo(() => ({
+		name,
+		value,
+		defaultValue,
+		required,
+		onValueChange
+	}), [
+		name,
+		value,
+		defaultValue,
+		required,
+		onValueChange
+	]);
+	return /* @__PURE__ */ jsx(RadioGroupContext, {
+		value: scope,
+		children
+	});
+}
+/**
+* One option of a `RadioGroup`. `className` and `style` go on the root `<label>`; every other
+* attribute, `ref` included, goes on the native `<input>`. Name, checked state and `required` come
+* from the group.
+*/
+function Radio({ value, disabled, render, className, style, children, ...rest }) {
+	const group = use(RadioGroupContext);
+	const controlled = group !== null && group.value !== void 0;
+	const own = {
+		name: group?.name,
+		required: group?.required === true ? true : void 0,
+		disabled,
+		checked: controlled ? group.value === value : void 0,
+		defaultChecked: !controlled && group?.defaultValue !== void 0 ? group.defaultValue === value : void 0,
+		onChange(event) {
+			if (event.currentTarget.checked) group?.onValueChange?.(value, details("input", event.nativeEvent));
+		}
+	};
+	const state = { disabled: disabled === true };
+	return renderElement("label", render, state, {
+		"data-slot": "radio",
+		...stateAttrs(state),
+		className: cx("nz-radio nz-hit-target", className),
+		style,
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("input", {
+			...mergeProps(own, rest),
+			type: "radio",
+			value,
+			className: "nz-radio-input",
+			"data-slot": "radio-input"
+		}), presented(children) && /* @__PURE__ */ jsx("span", {
+			className: "nz-radio-label",
+			"data-slot": "radio-label",
+			children
+		})] })
+	});
+}
+//#endregion
+export { Radio, RadioGroupScope };

package/dist/radio-group/radio-group.d.ts

@@ -0,0 +1,28 @@
+import { ChangeDetails } from "../contracts/details.js";
+import { Orientation } from "../contracts/state.js";
+import { FieldsetProps } from "../fieldset/fieldset.js";
+import { ReactElement, ReactNode } from "react";
+//#region src/radio-group/radio-group.d.ts
+/** Every change comes from the native `change` event of the radio that became checked. */
+export type RadioGroupChangeReason = "input";
+export interface RadioGroupProps extends Omit<FieldsetProps, "children" | "role" | "name" | "defaultValue" | "onChange"> {
+  /** The name every radio submits under. @default a generated name, unique per group */
+  name?: string;
+  /** Controlled: the checked radio's `value`, or `null` for none. */
+  value?: string | null;
+  /** Uncontrolled initial value. */
+  defaultValue?: string;
+  /** Called with the newly checked radio's `value`, after that radio's own `onChange`. */
+  onValueChange?: (value: string, details: ChangeDetails<RadioGroupChangeReason>) => void;
+  /** Layout of the radios; native arrow keys move both ways either way. @default 'vertical' */
+  orientation?: Orientation;
+  /** `Radio` elements, possibly with other content between them. */
+  children?: ReactNode;
+}
+/**
+ * A native `<fieldset role="radiogroup">` with a `<legend>` (Fieldset), plus `aria-required` and
+ * `aria-invalid`, which role `group` does not allow but `radiogroup` does (FIELD-CONTRACT.md).
+ * `required` marks the legend and makes every radio `required`; `disabled` is the fieldset's own.
+ */
+export declare function RadioGroup({ name, value, defaultValue, onValueChange, orientation, required, className, children, ...rest }: RadioGroupProps): ReactElement;
+//#endregion

package/dist/radio-group/radio-group.js

@@ -0,0 +1,35 @@
+import { cx } from "../_internal/cx.js";
+import { presented } from "../_internal/field.js";
+import { Fieldset } from "../fieldset/fieldset.js";
+import { RadioGroupScope } from "./radio-group.client.js";
+import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/radio-group/radio-group.tsx
+/**
+* A native `<fieldset role="radiogroup">` with a `<legend>` (Fieldset), plus `aria-required` and
+* `aria-invalid`, which role `group` does not allow but `radiogroup` does (FIELD-CONTRACT.md).
+* `required` marks the legend and makes every radio `required`; `disabled` is the fieldset's own.
+*/
+function RadioGroup({ name, value, defaultValue, onValueChange, orientation = "vertical", required = false, className, children, ...rest }) {
+	const generated = useId();
+	return /* @__PURE__ */ jsx(Fieldset, {
+		...rest,
+		required,
+		role: "radiogroup",
+		"aria-required": required || void 0,
+		"aria-invalid": presented(rest.error) || void 0,
+		"data-slot": "radio-group",
+		"data-orientation": orientation,
+		className: cx("nz-radio-group", className),
+		children: /* @__PURE__ */ jsx(RadioGroupScope, {
+			name: name ?? `${generated}-radio`,
+			value,
+			defaultValue,
+			required,
+			onValueChange,
+			children
+		})
+	});
+}
+//#endregion
+export { RadioGroup };

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

package/dist/ranked-list/ranked-list.js

@@ -0,0 +1,153 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { InlineError } from "../inline-error/inline-error.js";
+import { dataStatusAttrs } from "../_internal/data-status.js";
+import { NumberValue } from "../number-value/number-value.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import { Children, cloneElement, isValidElement, useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ranked-list/ranked-list.tsx
+/** Percent of the track, 0–100 with up to 3 decimals: deterministic attribute text. */
+function percent(value, max) {
+	const ratio = max > 0 && Number.isFinite(value) ? Math.min(1, Math.max(0, value / max)) : 0;
+	return `${Number((ratio * 100).toFixed(3))}%`;
+}
+function Bar({ width }) {
+	return /* @__PURE__ */ jsx("svg", {
+		className: "nz-ranked-list-bar",
+		"data-slot": "ranked-list-bar",
+		width: "100%",
+		height: "100%",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ jsx("rect", {
+			className: "nz-ranked-list-fill",
+			width,
+			height: "100%",
+			rx: "3"
+		})
+	});
+}
+/** `template` with `{label}` replaced by the title node, or dropped when there is no title. */
+function fill(template, title) {
+	const at = template.indexOf("{label}");
+	if (at < 0) return template;
+	const before = template.slice(0, at);
+	const after = template.slice(at + 7);
+	if (title == null) return `${before.trimEnd()}${after.trimStart()}`.trim();
+	if (typeof title === "string" || typeof title === "number") return `${before}${title}${after}`;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		before,
+		title,
+		after
+	] });
+}
+/** A row of the ready geometry with no content, for loading and for the reserved height. */
+function PlaceholderRow({ skeleton }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "nz-ranked-list-placeholder",
+		"data-slot": "ranked-list-placeholder",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "nz-ranked-list-row",
+			children: [skeleton && /* @__PURE__ */ jsx(Skeleton, { className: "nz-ranked-list-skeleton-label" }), skeleton && /* @__PURE__ */ jsx(Skeleton, { className: "nz-ranked-list-skeleton-value" })]
+		}), /* @__PURE__ */ jsx("span", { className: "nz-ranked-list-track" })]
+	});
+}
+function RankedListRoot({ title, titleLevel = 3, action, max, format, locale, status = "ready", pending = false, empty, error, rows = 5, labels, render, className, children, ...rest }) {
+	const titleId = `${useId()}-title`;
+	const items = Children.toArray(children);
+	const ranked = items.filter((child) => isValidElement(child) && child.type === RankedListItem);
+	const resolved = status === "ready" && items.length === 0 ? "empty" : status;
+	const leader = max ?? Math.max(0, ...ranked.map((item) => item.props.value));
+	const reserve = Array.from({ length: Math.max(0, Math.floor(rows)) }, (_, index) => index);
+	const Heading = `h${titleLevel}`;
+	let body;
+	if (resolved === "ready") body = /* @__PURE__ */ jsx("ol", {
+		className: "nz-ranked-list-list",
+		"data-slot": "ranked-list-list",
+		"aria-labelledby": title != null ? titleId : void 0,
+		children: items.map((child) => isValidElement(child) && child.type === RankedListItem ? cloneElement(child, {
+			max: child.props.max ?? leader,
+			format: child.props.format ?? format,
+			locale: child.props.locale ?? locale
+		}) : child)
+	});
+	else {
+		const message = resolved === "loading" ? /* @__PURE__ */ jsx("span", {
+			className: "nz-visually-hidden",
+			children: fill(labels?.loading ?? "Loading {label}", title)
+		}) : resolved === "error" ? error ?? /* @__PURE__ */ jsx(InlineError, { children: fill(labels?.error ?? "Could not load {label}", title) }) : empty ?? /* @__PURE__ */ jsx("p", {
+			className: "nz-ranked-list-empty",
+			children: fill(labels?.empty ?? "No data", title)
+		});
+		body = /* @__PURE__ */ jsxs("div", {
+			className: "nz-ranked-list-status",
+			"data-slot": "ranked-list-status",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "nz-ranked-list-reserve",
+				"aria-hidden": "true",
+				children: reserve.map((index) => /* @__PURE__ */ jsx(PlaceholderRow, { skeleton: resolved === "loading" }, index))
+			}), /* @__PURE__ */ jsx("div", {
+				className: "nz-ranked-list-message",
+				"data-slot": "ranked-list-message",
+				children: message
+			})]
+		});
+	}
+	const busy = resolved === "ready" && pending;
+	return renderElement("div", render, {
+		status: resolved,
+		pending: busy
+	}, {
+		"data-slot": "ranked-list",
+		...dataStatusAttrs(resolved, busy),
+		...rest,
+		className: cx("nz-card", "nz-ranked-list", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [(title != null || action != null) && /* @__PURE__ */ jsxs("div", {
+			className: "nz-ranked-list-header",
+			"data-slot": "ranked-list-header",
+			children: [title != null && /* @__PURE__ */ jsx(Heading, {
+				className: "nz-ranked-list-title",
+				"data-slot": "ranked-list-title",
+				id: titleId,
+				children: title
+			}), action]
+		}), body] })
+	});
+}
+function RankedListItem({ label, value, max, format, locale = "en-US", render, className, ...rest }) {
+	const width = percent(value, max ?? value);
+	const ratio = Number.parseFloat(width) / 100;
+	return renderElement("li", render, { ratio }, {
+		"data-slot": "ranked-list-item",
+		...rest,
+		className: cx("nz-ranked-list-item", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			className: "nz-ranked-list-row",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "nz-ranked-list-label",
+				"data-slot": "ranked-list-label",
+				children: label
+			}), /* @__PURE__ */ jsx(NumberValue, {
+				className: "nz-ranked-list-value",
+				value,
+				format: format ?? {},
+				locale
+			})]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "nz-ranked-list-track",
+			"data-slot": "ranked-list-track",
+			children: /* @__PURE__ */ jsx(Bar, { width })
+		})] })
+	});
+}
+/** "View all": a real link, at least 24 px tall (WCAG 2.5.8; figma/04 issue 7). */
+function RankedListAction({ render, className, ...rest }) {
+	return renderElement("a", render, {}, {
+		"data-slot": "ranked-list-action",
+		...rest,
+		className: cx("nz-ranked-list-action", className)
+	});
+}
+//#endregion
+export { RankedListAction, RankedListItem, RankedListRoot };

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

@@ -0,0 +1,6 @@
+import { RankedListAction, RankedListItem, RankedListRoot } from "./ranked-list.js";
+declare namespace ranked_list_parts_d_exports {
+  export { RankedListAction as Action, RankedListItem as Item, RankedListRoot as Root };
+}
+//#endregion
+export { RankedListAction as Action, RankedListItem as Item, RankedListRoot as Root, ranked_list_parts_d_exports };

package/dist/ranked-list/ranked-list.parts.js

@@ -0,0 +1,10 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { RankedListAction, RankedListItem, RankedListRoot } from "./ranked-list.js";
+//#region src/ranked-list/ranked-list.parts.ts
+var ranked_list_parts_exports = /* @__PURE__ */ __exportAll({
+	Action: () => RankedListAction,
+	Item: () => RankedListItem,
+	Root: () => RankedListRoot
+});
+//#endregion
+export { RankedListAction as Action, RankedListItem as Item, RankedListRoot as Root, ranked_list_parts_exports };

package/dist/search-field/index.d.ts

@@ -0,0 +1,2 @@
+import { SearchField, SearchFieldLabels, SearchFieldProps, SearchFieldState } from "./search-field.client.js";
+export { SearchField, type SearchFieldLabels, type SearchFieldProps, type SearchFieldState };

package/dist/search-field/index.js

@@ -0,0 +1 @@
+export { SearchField } from "./search-field.client.js";