@nizivo/react 0.0.0-stage → 0.2.0

package/dist/toast/toast.contract.d.ts

@@ -0,0 +1,56 @@
+import "./seam.js";
+import { RefObject } from "react";
+//#region src/toast/toast.contract.d.ts
+/** Figma "Tone". Critical is announced assertively and stays until dismissed. */
+export type ToastTone = "neutral" | "success" | "critical";
+/** How a message is spoken: `polite` waits for the reader to finish, `assertive` interrupts. */
+export type Politeness = "polite" | "assertive";
+export interface ToastAction {
+  /** The button's text, one or two words: "Undo", "View". */
+  label: string;
+  /** Runs on press; the toast then closes. */
+  onAction: () => void;
+}
+export interface ToastOptions {
+  /** @default 'neutral' */
+  tone?: ToastTone;
+  /** A second line under the message. */
+  description?: string;
+  /**
+   * One action, a real button. A toast with an action stays until it is dismissed (WCAG 2.2.1,
+   * §12.6), whatever `timeout` says.
+   */
+  action?: ToastAction;
+  /**
+   * Milliseconds before a toast without an action, and not critical, leaves. The time stops while
+   * the pointer is over the stack, while focus is in it and while the page is hidden.
+   * @default 5000
+   */
+  timeout?: number;
+  /**
+   * Updates the toast with this id in place, if it is still shown, instead of adding one:
+   * `toast('Saving…', { id: 'save' })`, then `toast('Saved', { id: 'save', tone: 'success' })`.
+   */
+  id?: string;
+  /** Called once when the toast leaves, however it left. */
+  onClose?: () => void;
+}
+/** Strings the Toaster renders (§16.4). */
+export interface ToasterLabels {
+  /** The region's accessible name, which names its shortcut. @default 'Notifications (F8)' */
+  region: string;
+  /** Each toast's close button. @default 'Dismiss' */
+  dismiss: string;
+}
+export interface ToasterProps {
+  labels?: Partial<ToasterLabels>;
+  /** Toasts shown at once, newest last. Older ones wait, their time stopped, until one leaves. @default 3 */
+  limit?: number;
+  /**
+   * The key that moves focus into the stack and, pressed again there, back to where it was (the
+   * `KeyboardEvent.key` value). @default 'F8'
+   */
+  hotkey?: string;
+  className?: string;
+}
+//#endregion

package/dist/toast/toaster.client.d.ts

@@ -0,0 +1,10 @@
+import { ToasterProps } from "./toast.contract.js";
+import { ReactElement } from "react";
+//#region src/toast/toaster.client.d.ts
+/**
+ * Shows the toasts `toast()` adds, bottom-centre, newest last, and speaks each once. F8 moves focus
+ * to the stack; Tab moves within it; Escape dismisses the focused toast; F8 again, or Escape on the
+ * stack itself, returns focus to where it was. Render one, in the root layout.
+ */
+export declare function Toaster({ labels, limit, hotkey, className }: ToasterProps): ReactElement;
+//#endregion

package/dist/toast/toaster.client.js

@@ -0,0 +1,305 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { useLabels } from "../config/config.client.js";
+import { CircleCheckGlyph, CircleXGlyph, CloseGlyph, InfoGlyph } from "../_internal/glyphs.js";
+import { Button } from "../button/button.js";
+import { markTopLayer } from "../_engines/react-aria/overlay.client.js";
+import { iconButtonElement } from "../icon-button/icon-button-static.js";
+import { useItem, useRegion } from "../_engines/react-aria/toast.client.js";
+import { attach, getServerSnapshot, getSnapshot, pause, resume, show, speakThrough, subscribe, toast } from "./store.js";
+import { useEffect, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/toast/toaster.client.tsx
+const LABELS = {
+	region: "Notifications (F8)",
+	dismiss: "Dismiss"
+};
+/** How long a spoken message stays in the announcer, as React Aria's announcer keeps it. */
+const SPOKEN_FOR = 7e3;
+const GLYPHS = {
+	neutral: InfoGlyph,
+	success: CircleCheckGlyph,
+	critical: CircleXGlyph
+};
+const popoverApi = (element) => "showPopover" in element;
+const noSubscription = () => () => {};
+/** On the page in the browser only: the queue, the portals and the announcer are client state. */
+function useHydrated() {
+	return useSyncExternalStore(noSubscription, () => true, () => false);
+}
+/** Focus back to where it was before F8, if that element is still on the page. */
+function returnFocus(returnTo) {
+	const to = returnTo.current;
+	returnTo.current = null;
+	if (to?.isConnected === true) to.focus();
+}
+/**
+* Two visually hidden live regions, polite and assertive, on the page from the Toaster's mount
+* before any message, and marked top layer so a modal's aria-hidden never silences them (O-06).
+*/
+function Announcer() {
+	const ref = useRef(null);
+	const [said, setSaid] = useState({
+		polite: "",
+		assertive: ""
+	});
+	useLayoutEffect(() => {
+		const element = ref.current;
+		return element === null ? void 0 : markTopLayer(element);
+	}, []);
+	useEffect(() => {
+		const timers = /* @__PURE__ */ new Set();
+		const later = (ms, run) => {
+			const timer = setTimeout(() => {
+				timers.delete(timer);
+				run();
+			}, ms);
+			timers.add(timer);
+		};
+		const unregister = speakThrough((text, politeness) => {
+			setSaid((current) => ({
+				...current,
+				[politeness]: ""
+			}));
+			later(100, () => setSaid((current) => ({
+				...current,
+				[politeness]: text
+			})));
+			later(SPOKEN_FOR, () => setSaid((current) => current[politeness] === text ? {
+				...current,
+				[politeness]: ""
+			} : current));
+		});
+		return () => {
+			unregister();
+			for (const timer of timers) clearTimeout(timer);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "nz-toast-announcer nz-visually-hidden",
+		"data-slot": "toast-announcer",
+		"data-nz-top-layer": "",
+		children: [/* @__PURE__ */ jsx("div", {
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			children: said.polite
+		}), /* @__PURE__ */ jsx("div", {
+			"aria-live": "assertive",
+			"aria-atomic": "true",
+			children: said.assertive
+		})]
+	});
+}
+function ToastItem({ toast, options, labels }) {
+	const ref = useRef(null);
+	const { toastProps, messageProps, descriptionProps } = useItem(toast, options, ref);
+	const { close } = options;
+	const { id } = toast;
+	useEffect(() => {
+		const element = ref.current;
+		if (element === null) return void 0;
+		const onKey = (event) => {
+			if (event.key !== "Escape" || event.isComposing) return;
+			event.preventDefault();
+			event.stopPropagation();
+			close(id);
+		};
+		element.addEventListener("keydown", onKey);
+		return () => element.removeEventListener("keydown", onKey);
+	}, [close, id]);
+	const Glyph = GLYPHS[toast.tone];
+	const closePart = {
+		"data-slot": "toast-close",
+		className: "nz-toast-close"
+	};
+	const { action } = toast;
+	return /* @__PURE__ */ jsxs("div", {
+		...toastProps,
+		ref,
+		className: "nz-toast",
+		"data-slot": "toast",
+		"data-tone": toast.tone,
+		"data-nz-scheme": "inverse",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "nz-toast-icon",
+				"data-slot": "toast-icon",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(Glyph, {})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "nz-toast-content",
+				"data-slot": "toast-content",
+				children: [/* @__PURE__ */ jsx("div", {
+					...messageProps,
+					className: "nz-toast-message",
+					"data-slot": "toast-message",
+					children: toast.message
+				}), toast.description !== void 0 && /* @__PURE__ */ jsx("div", {
+					...descriptionProps,
+					className: "nz-toast-description",
+					"data-slot": "toast-description",
+					children: toast.description
+				})]
+			}),
+			action !== void 0 && /* @__PURE__ */ jsx(Button, {
+				variant: "tertiary",
+				size: "sm",
+				className: "nz-toast-action",
+				"data-slot": "toast-action",
+				onClick: () => {
+					action.onAction();
+					options.close(toast.id);
+				},
+				children: action.label
+			}),
+			iconButtonElement({
+				label: labels.dismiss,
+				icon: /* @__PURE__ */ jsx(CloseGlyph, {}),
+				variant: "tertiary",
+				size: "sm",
+				...closePart,
+				onClick: () => options.close(toast.id)
+			})
+		]
+	});
+}
+/** The region and its toasts, once the page has hydrated. */
+function Stack({ toasts, strings, hotkey, className }) {
+	const region = useRef(null);
+	const returnTo = useRef(null);
+	const count = toasts.length;
+	const showing = useRef(count);
+	useLayoutEffect(() => {
+		showing.current = count;
+	});
+	useEffect(() => {
+		const onKey = (event) => {
+			if (event.key !== hotkey || event.altKey || event.ctrlKey || event.metaKey) return;
+			const element = region.current;
+			if (element === null || showing.current === 0) return;
+			event.preventDefault();
+			const active = document.activeElement;
+			if (active !== null && element.contains(active)) returnFocus(returnTo);
+			else {
+				returnTo.current = active instanceof HTMLElement ? active : null;
+				element.focus();
+			}
+		};
+		document.addEventListener("keydown", onKey);
+		return () => document.removeEventListener("keydown", onKey);
+	}, [hotkey]);
+	useEffect(() => {
+		const element = region.current;
+		if (element === null) return void 0;
+		const onKey = (event) => {
+			if (event.key !== "Escape" || event.target !== element) return;
+			event.preventDefault();
+			event.stopPropagation();
+			returnFocus(returnTo);
+		};
+		element.addEventListener("keydown", onKey);
+		return () => element.removeEventListener("keydown", onKey);
+	}, []);
+	const latest = toasts.at(-1)?.id;
+	useLayoutEffect(() => {
+		const element = region.current;
+		if (element === null) return;
+		element.hidden = latest === void 0;
+		if (!popoverApi(element)) return;
+		const open = element.matches(":popover-open");
+		if (latest === void 0) {
+			if (open) element.hidePopover();
+			return;
+		}
+		if (open && !element.contains(document.activeElement)) element.hidePopover();
+		if (!element.matches(":popover-open")) element.showPopover();
+	}, [latest]);
+	useLayoutEffect(() => {
+		const element = region.current;
+		return () => {
+			if (element === null) return;
+			element.hidden = true;
+			if (popoverApi(element) && element.matches(":popover-open")) element.hidePopover();
+		};
+	}, []);
+	useLayoutEffect(() => {
+		const element = region.current;
+		const root = document.documentElement;
+		if (element === null || count === 0) {
+			root.style.removeProperty("--nz-toast-inset");
+			return;
+		}
+		const measure = () => {
+			const inset = Math.max(0, window.innerHeight - element.getBoundingClientRect().top);
+			root.style.setProperty("--nz-toast-inset", `${Math.ceil(inset)}px`);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		window.addEventListener("resize", measure);
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", measure);
+			root.style.removeProperty("--nz-toast-inset");
+		};
+	}, [count]);
+	const options = {
+		toasts,
+		label: strings.region,
+		close: toast.dismiss,
+		pause: () => pause("region"),
+		resume: () => resume("region")
+	};
+	const regionProps = useRegion(options, region);
+	return /* @__PURE__ */ jsx("section", {
+		...regionProps,
+		ref: region,
+		popover: "manual",
+		hidden: count === 0,
+		className: cx("nz-toast-region", className),
+		"data-slot": "toast-region",
+		"data-nz-top-layer": "",
+		children: toasts.map((toast) => /* @__PURE__ */ jsx(ToastItem, {
+			toast,
+			options,
+			labels: strings
+		}, toast.id))
+	});
+}
+/**
+* Shows the toasts `toast()` adds, bottom-centre, newest last, and speaks each once. F8 moves focus
+* to the stack; Tab moves within it; Escape dismisses the focused toast; F8 again, or Escape on the
+* stack itself, returns focus to where it was. Render one, in the root layout.
+*/
+function Toaster({ labels, limit = 3, hotkey = "F8", className }) {
+	const toasts = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot).slice(-limit);
+	const hydrated = useHydrated();
+	const ids = toasts.map((toast) => toast.id).join(" ");
+	const strings = {
+		...LABELS,
+		...useLabels("toaster", labels)
+	};
+	useEffect(attach, []);
+	useEffect(() => show(ids === "" ? [] : ids.split(" ")), [ids]);
+	useEffect(() => {
+		const update = () => document.hidden ? pause("hidden") : resume("hidden");
+		update();
+		document.addEventListener("visibilitychange", update);
+		return () => {
+			document.removeEventListener("visibilitychange", update);
+			resume("hidden");
+		};
+	}, []);
+	if (!hydrated) return /* @__PURE__ */ jsx(Fragment, {});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [createPortal(/* @__PURE__ */ jsx(Stack, {
+		toasts,
+		strings,
+		hotkey,
+		className
+	}), document.body), createPortal(/* @__PURE__ */ jsx(Announcer, {}), document.body)] });
+}
+//#endregion
+export { Toaster };

package/dist/tooltip/index.d.ts

@@ -0,0 +1,5 @@
+import { OpenReason } from "../contracts/details.js";
+import { TooltipLabels, TooltipPopupProps, TooltipPopupState, TooltipRootProps, TooltipSide, TooltipTriggerProps, TooltipTriggerState } from "./tooltip.contract.js";
+import { TooltipPopup, TooltipRoot, TooltipTrigger } from "./tooltip.client.js";
+import { tooltip_parts_d_exports } from "./tooltip.parts.js";
+export { type OpenReason, tooltip_parts_d_exports as Tooltip, type TooltipLabels, TooltipPopup, type TooltipPopupProps, type TooltipPopupState, TooltipRoot, type TooltipRootProps, type TooltipSide, TooltipTrigger, type TooltipTriggerProps, type TooltipTriggerState };

package/dist/tooltip/index.js

@@ -0,0 +1,3 @@
+import { TooltipPopup, TooltipRoot, TooltipTrigger } from "./tooltip.client.js";
+import { tooltip_parts_exports } from "./tooltip.parts.js";
+export { tooltip_parts_exports as Tooltip, TooltipPopup, TooltipRoot, TooltipTrigger };

package/dist/tooltip/tooltip.client.d.ts

@@ -0,0 +1,12 @@
+import { TooltipPopupProps, TooltipRootProps, TooltipTriggerProps } from "./tooltip.contract.js";
+import { JSX } from "react";
+//#region src/tooltip/tooltip.client.d.ts
+export declare function TooltipRoot({ delay, content, shortcut, children, ...props }: TooltipRootProps): JSX.Element;
+/**
+ * Without `render`, its own `<button>`: `nz-hit-target` gives it the 44 px coarse-pointer hit area of
+ * every standalone pressable, and tooltip.css gives that bare button a 24 x 24 px minimum (WCAG 2.2
+ * 2.5.8; M27). A composed Button or IconButton keeps its own size and classes.
+ */
+export declare function TooltipTrigger({ className, render, ...rest }: TooltipTriggerProps): JSX.Element;
+export declare function TooltipPopup({ side, align, sideOffset, container, shortcut, className, children, ...rest }: TooltipPopupProps): JSX.Element;
+//#endregion

package/dist/tooltip/tooltip.client.js

@@ -0,0 +1,51 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { toRenderFn } from "../contracts/render.js";
+import { Kbd } from "../kbd/kbd.js";
+import { Popup, Root, Trigger } from "../_engines/react-aria/tooltip.client.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/tooltip/tooltip.client.tsx
+const renderDiv = toRenderFn(void 0, "div");
+function TooltipRoot({ delay = 400, content, shortcut, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Root, {
+		...props,
+		delay,
+		children: [children, content !== void 0 && /* @__PURE__ */ jsx(TooltipPopup, {
+			...shortcut === void 0 ? {} : { shortcut },
+			children: content
+		})]
+	});
+}
+/**
+* Without `render`, its own `<button>`: `nz-hit-target` gives it the 44 px coarse-pointer hit area of
+* every standalone pressable, and tooltip.css gives that bare button a 24 x 24 px minimum (WCAG 2.2
+* 2.5.8; M27). A composed Button or IconButton keeps its own size and classes.
+*/
+function TooltipTrigger({ className, render, ...rest }) {
+	return /* @__PURE__ */ jsx(Trigger, {
+		...rest,
+		type: rest.type ?? (render === void 0 ? "button" : void 0),
+		className: cx("nz-tooltip-trigger", render === void 0 && "nz-hit-target", className),
+		"data-slot": "tooltip-trigger",
+		render: toRenderFn(render, "button")
+	});
+}
+function TooltipPopup({ side = "top", align = "center", sideOffset = 8, container, shortcut, className, children, ...rest }) {
+	return /* @__PURE__ */ jsxs(Popup, {
+		...rest,
+		side,
+		align,
+		sideOffset,
+		container,
+		className: cx("nz-tooltip-popup", className),
+		"data-slot": "tooltip-popup",
+		"data-nz-scheme": "inverse",
+		render: renderDiv,
+		children: [children, shortcut !== void 0 && /* @__PURE__ */ jsxs(Fragment, { children: [" ", /* @__PURE__ */ jsx(Kbd, {
+			keys: shortcut,
+			className: "nz-tooltip-shortcut"
+		})] })]
+	});
+}
+//#endregion
+export { TooltipPopup, TooltipRoot, TooltipTrigger };

package/dist/tooltip/tooltip.contract.d.ts

@@ -0,0 +1,60 @@
+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 { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/tooltip/tooltip.contract.d.ts
+/** Logical side; the resolved physical side is `data-side` on the popup. */
+export type TooltipSide = "top" | "bottom" | "start" | "end";
+/** Strings the engine renders (§9.3 rule 7): React Aria's Tooltip renders none. */
+export type TooltipLabels = Record<string, never>;
+export interface TooltipRootProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  /** `details.reason` is `'unknown'` with React Aria, which reports no cause. */
+  onOpenChange?: (open: boolean, details: ChangeDetails<OpenReason>) => void;
+  /** Hover delay before opening, in ms (Figma: 400). Keyboard focus opens immediately. @default 400 */
+  delay?: number;
+  disabled?: boolean;
+  /**
+   * Convenience for the common case: renders a `Tooltip.Popup` with this content after `children`, so
+   * `<Tooltip.Root content="Export">` needs no Popup part. Leave it out to compose `Tooltip.Popup`
+   * yourself (for `side`, `align` or `sideOffset`).
+   */
+  content?: ReactNode;
+  /** A shortcut for `content`, drawn by `Kbd` (`"mod+s"` is ⌘S on Apple platforms, Ctrl+S elsewhere). */
+  shortcut?: string;
+  children: ReactNode;
+}
+export interface TooltipTriggerState {
+  open: boolean;
+}
+export interface TooltipPopupState {
+  entering: boolean;
+  exiting: boolean;
+  side: Side;
+}
+export interface TooltipTriggerProps extends Omit<ComponentPropsWithRef<"button">, "children"> {
+  /** Any focusable element, for example `render={<Button variant="tertiary">Save</Button>}`. */
+  render?: RenderProp<TooltipTriggerState>;
+  children?: ReactNode;
+}
+export interface TooltipPopupProps extends Omit<ComponentPropsWithRef<"div">, "children" | "role"> {
+  /** @default 'top' */
+  side?: TooltipSide;
+  /** @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;
+  /**
+   * A keyboard shortcut drawn after the text with `Kbd`, in the keys syntax `Kbd` takes (`"mod+k"`,
+   * `"mod+shift+d"`). It shows the Apple spelling where `ThemeScript` sets `data-nz-platform="apple"`.
+   * It is a visual hint: the app implements the shortcut itself.
+   */
+  shortcut?: string;
+  children: ReactNode;
+}
+//#endregion
+export type { OpenReason };

package/dist/tooltip/tooltip.parts.d.ts

@@ -0,0 +1,6 @@
+import { TooltipPopup, TooltipRoot, TooltipTrigger } from "./tooltip.client.js";
+declare namespace tooltip_parts_d_exports {
+  export { TooltipPopup as Popup, TooltipRoot as Root, TooltipTrigger as Trigger };
+}
+//#endregion
+export { TooltipPopup as Popup, TooltipRoot as Root, TooltipTrigger as Trigger, tooltip_parts_d_exports };

package/dist/tooltip/tooltip.parts.js

@@ -0,0 +1,10 @@
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { TooltipPopup, TooltipRoot, TooltipTrigger } from "./tooltip.client.js";
+//#region src/tooltip/tooltip.parts.ts
+var tooltip_parts_exports = /* @__PURE__ */ __exportAll({
+	Popup: () => TooltipPopup,
+	Root: () => TooltipRoot,
+	Trigger: () => TooltipTrigger
+});
+//#endregion
+export { TooltipPopup as Popup, TooltipRoot as Root, TooltipTrigger as Trigger, tooltip_parts_exports };

package/dist/top-bar/index.d.ts

@@ -0,0 +1,2 @@
+import { TopBar, TopBarProps } from "./top-bar.js";
+export { TopBar, type TopBarProps };

package/dist/top-bar/index.js

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

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

@@ -0,0 +1,17 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/top-bar/top-bar.d.ts
+export interface TopBarProps extends Omit<ComponentPropsWithRef<"header">, "title" | "children"> {
+  /** The page's name, in Heading/H3's look (Figma's Title). Not a heading element. */
+  title?: ReactNode;
+  /** In place of `title`, for example a Breadcrumb for a page deeper in the app. */
+  start?: ReactNode;
+  /** The search, usually a `SearchField` (M49: a real input). 360 px at most. */
+  search?: ReactNode;
+  /** At the end: the notifications IconButton, the account's Avatar or menu. */
+  actions?: ReactNode;
+  render?: RenderProp<Record<string, never>>;
+}
+/** The bar above the page on screens 640 px and wider (AppShell's `topBar`). */
+export declare function TopBar({ title, start, search, actions, render, className, ...rest }: TopBarProps): ReactElement;
+//#endregion

package/dist/top-bar/top-bar.js

@@ -0,0 +1,35 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/top-bar/top-bar.tsx
+/** The bar above the page on screens 640 px and wider (AppShell's `topBar`). */
+function TopBar({ title, start, search, actions, render, className, ...rest }) {
+	return renderElement("header", render, {}, {
+		"data-slot": "top-bar",
+		...rest,
+		className: cx("nz-top-bar", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "nz-top-bar-start",
+				"data-slot": "top-bar-start",
+				children: start ?? (title != null && /* @__PURE__ */ jsx("span", {
+					className: "nz-top-bar-title",
+					"data-slot": "top-bar-title",
+					children: title
+				}))
+			}),
+			search != null && /* @__PURE__ */ jsx("div", {
+				className: "nz-top-bar-search",
+				"data-slot": "top-bar-search",
+				children: search
+			}),
+			actions != null && /* @__PURE__ */ jsx("div", {
+				className: "nz-top-bar-actions",
+				"data-slot": "top-bar-actions",
+				children: actions
+			})
+		] })
+	});
+}
+//#endregion
+export { TopBar };

package/dist/trend-card/index.d.ts

@@ -0,0 +1,2 @@
+import { TrendCard, TrendCardProps, TrendCardState } from "./trend-card.js";
+export { TrendCard, type TrendCardProps, type TrendCardState };

package/dist/trend-card/index.js

@@ -0,0 +1 @@
+export { TrendCard } from "./trend-card.js";

package/dist/trend-card/trend-card.d.ts

@@ -0,0 +1,34 @@
+import { RenderProp } from "../contracts/render.js";
+import { CardTone } from "../card/card.js";
+import { DataStatus } from "../_internal/data-status.js";
+import { MetricDataProps } from "../metric/metric.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/trend-card/trend-card.d.ts
+export interface TrendCardState {
+  /** The status as rendered: `'empty'` when a ready card has no value. */
+  status: DataStatus;
+  pending: boolean;
+  tone: CardTone;
+}
+export interface TrendCardProps extends MetricDataProps, Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** Card's tone; `inverse` scopes the inverse scheme. @default 'surface' */
+  tone?: CardTone;
+  /** The control at the end of the header, for example the period `Select` or a `SegmentedControl`. */
+  action?: ReactNode;
+  /**
+   * The chart, for example `<AreaChart … />` from `@nizivo/charts`. Rendered in every status, so the
+   * box stays put: give the chart the same `status` (ChartFrame keeps its box in all four).
+   */
+  chart?: ReactNode;
+  /** The legend under the chart, for example `<Legend items={…} />`. */
+  legend?: ReactNode;
+  /** A last row, for example a link to the report. */
+  footer?: ReactNode;
+  render?: RenderProp<TrendCardState>;
+}
+/**
+ * A headline number with its change, a period control and a comparison chart. A `role="group"`
+ * named by the label. The status contract (§16.5) applies to the headline; the slots render as given.
+ */
+export declare function TrendCard({ label, value, format, locale, delta, comparison, tone, action, chart, legend, footer, status, pending, empty, error, labels, render, className, ...rest }: TrendCardProps): ReactElement;
+//#endregion