@nizivo/react 0.0.0-stage → 0.2.0

package/dist/pagination/pagination.d.ts

@@ -0,0 +1,74 @@
+import { RenderProp } from "../contracts/render.js";
+import { ChangeDetails } from "../contracts/details.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/pagination/pagination.d.ts
+/** 40 px (`md`) or 32 px (`sm`) squares; Figma's 36 px is off the control scale (figma/06). */
+export type PaginationSize = "sm" | "md";
+/** Pagination's own strings (§16.4): serialisable, English defaults; `{page}` is replaced. */
+export interface PaginationLabels {
+  /** The landmark's name. @default 'Pagination' */
+  nav: string;
+  /** The previous link's name (it shows only a chevron). @default 'Previous page' */
+  previous: string;
+  /** @default 'Next page' */
+  next: string;
+  /** Each page link's name; the visible number stays in it (WCAG 2.5.3). @default 'Page {page}' */
+  page: string;
+}
+/** Which control asked for the page. */
+export type PaginationChangeReason = "page" | "previous" | "next";
+/** One slot of the list: a page number or a gap. */
+export type PaginationSlot = number | "ellipsis";
+export interface PaginationLinkState {
+  /** The page this link goes to. */
+  page: number;
+  kind: "page" | "previous" | "next";
+  current: boolean;
+}
+export interface PaginationState {
+  page: number;
+  totalPages: number;
+  size: PaginationSize;
+}
+export interface PaginationProps extends Omit<ComponentPropsWithRef<"nav">, "children"> {
+  /** The page being shown, from 1. Clamped to `1…totalPages`. */
+  page: number;
+  /** At least 1. */
+  totalPages: number;
+  /** Link mode: the URL of a page, for example `?page=3` for page 3. Give it or `onPageChange`. */
+  getHref?: (page: number) => string;
+  /**
+   * Button mode, for client state with no URL: the pages, previous and next are
+   * `<button type="button">`s, and choosing another page calls this with it (the current page calls
+   * nothing). `getHref` and `renderLink` are not used. A client component passes it.
+   */
+  onPageChange?: (page: number, details: ChangeDetails<PaginationChangeReason>) => void;
+  /** Pages shown either side of the current one. @default 1 */
+  siblingCount?: number;
+  /** Pages always shown at each end. @default 1 */
+  boundaryCount?: number;
+  /**
+   * With the defaults a long list is 9 slots: 392 px at `md`, 320 px at `sm`. In a narrower container
+   * the slots wrap, so use `sm` and `siblingCount={0}` (7 slots, 248 px) there. @default 'md'
+   */
+  size?: PaginationSize;
+  /** Text before the pages, for example "Showing 1–20 of 248" (Figma); you format it. */
+  summary?: ReactNode;
+  /** Replaces the chevron of the previous link (mirrored under `dir="rtl"` only by default). */
+  previousIcon?: ReactNode;
+  nextIcon?: ReactNode;
+  /** BCP 47 tag for the page numbers. @default 'en-US' */
+  locale?: string;
+  labels?: Partial<PaginationLabels>;
+  /**
+   * The router's link for every page, previous and next link, for example
+   * `renderLink={(props) => <Link {...props} href={String(props['href'])} />}`, or an element such
+   * as `renderLink={<RouterLink />}`, which receives `href` from `getHref`. It must render an `<a>`.
+   * A previous or next link at the ends is not a link and does not use it. Link mode only.
+   */
+  renderLink?: RenderProp<PaginationLinkState>;
+  /** Composition of the `<nav>` landmark (a single-root part's `render`, §8.2). */
+  render?: RenderProp<PaginationState>;
+}
+export declare function Pagination({ page, totalPages, getHref, onPageChange, siblingCount, boundaryCount, size, summary, previousIcon, nextIcon, locale, labels, renderLink, render, className, ...rest }: PaginationProps): ReactElement;
+//#endregion

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/progress-bar/index.d.ts

@@ -0,0 +1,2 @@
+import { ProgressBar, ProgressBarProps, ProgressBarState, ProgressBarTone } from "./progress-bar.js";
+export { ProgressBar, type ProgressBarProps, type ProgressBarState, type ProgressBarTone };

package/dist/progress-bar/index.js

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