@nizivo/react 0.1.0 → 0.2.0

package/dist/kpi-tile/kpi-tile.d.ts

@@ -0,0 +1,30 @@
+import { RenderProp } from "../contracts/render.js";
+import { DataStatus } from "../_internal/data-status.js";
+import { MetricDataProps } from "../metric/metric.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/kpi-tile/kpi-tile.d.ts
+/** Figma "Tone": Surface, or Tinted as `brand` or `accent` (Card's tones of the same names). */
+export type KpiTileTone = "surface" | "brand" | "accent";
+export interface KpiTileState {
+  /** The status as rendered: `'empty'` when a ready tile has no value. */
+  status: DataStatus;
+  pending: boolean;
+  tone: KpiTileTone;
+}
+export interface KpiTileProps extends MetricDataProps, Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** The surface; group a row of related KPIs with one tint. @default 'surface' */
+  tone?: KpiTileTone;
+  /**
+   * A small chart beside the value, shown while ready, for example
+   * `<Sparkline data={series} label="Sales, last 7 days" />` from `@nizivo/charts`. Drawn at most
+   * 88 × 28 px (Figma).
+   */
+  chart?: ReactNode;
+  render?: RenderProp<KpiTileState>;
+}
+/**
+ * One number, its change and its shape. A `role="group"` named by the label (not a landmark). The
+ * Suspense fallback is the same tile with `status="loading"`: the box does not change (§16.5).
+ */
+export declare function KpiTile({ label, value, format, locale, delta, comparison, chart, tone, status, pending, empty, error, labels, render, className, ...rest }: KpiTileProps): ReactElement;
+//#endregion

package/dist/kpi-tile/kpi-tile.js

@@ -0,0 +1,48 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { dataStatusAttrs } from "../_internal/data-status.js";
+import { Metric, resolveStatus } from "../metric/metric.js";
+import { useId } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/kpi-tile/kpi-tile.tsx
+/**
+* One number, its change and its shape. A `role="group"` named by the label (not a landmark). The
+* Suspense fallback is the same tile with `status="loading"`: the box does not change (§16.5).
+*/
+function KpiTile({ label, value, format, locale, delta, comparison, chart, tone = "surface", status = "ready", pending = false, empty, error, labels, render, className, ...rest }) {
+	const labelId = useId();
+	const st = resolveStatus(status, value);
+	const busy = st === "ready" && pending;
+	return renderElement("div", render, {
+		status: st,
+		pending: busy,
+		tone
+	}, {
+		"data-slot": "kpi-tile",
+		"data-tone": tone,
+		"data-padding": "sm",
+		...dataStatusAttrs(st, busy),
+		role: "group",
+		"aria-labelledby": labelId,
+		...rest,
+		className: cx("nz-card", "nz-kpi-tile", className),
+		children: /* @__PURE__ */ jsx(Metric, {
+			labelId,
+			label,
+			value,
+			format,
+			locale,
+			delta,
+			comparison,
+			chart,
+			status,
+			pending,
+			empty,
+			error,
+			labels,
+			reserveChange: true
+		})
+	});
+}
+//#endregion
+export { KpiTile };

package/dist/locales/en-US.d.ts

@@ -0,0 +1,77 @@
+import { AlertDismissLabels } from "../alert/alert-dismiss.client.js";
+import "../alert/index.js";
+import { AppShellLabels } from "../app-shell/app-shell.js";
+import "../app-shell/index.js";
+import { AvatarGroupLabels } from "../avatar/avatar.js";
+import "../avatar/index.js";
+import { BannerDismissLabels } from "../banner/banner-dismiss.client.js";
+import "../banner/index.js";
+import { BreadcrumbLabels } from "../breadcrumb/breadcrumb.js";
+import "../breadcrumb/index.js";
+import { ButtonLabels } from "../button/button.js";
+import "../button/index.js";
+import { ChipGroupLabels } from "../chip-group/chip-group.client.js";
+import "../chip-group/index.js";
+import { DialogLabels } from "../dialog/dialog.contract.js";
+import "../dialog/index.js";
+import { DrawerLabels } from "../drawer/drawer.contract.js";
+import "../drawer/index.js";
+import { FileUploadLabels } from "../file-upload/file-upload.contract.js";
+import "../file-upload/index.js";
+import { FormLabels } from "../form/form.client.js";
+import "../form/index.js";
+import { MetricLabels } from "../metric/metric.js";
+import "../metric/index.js";
+import { MobileTabBarLabels } from "../mobile-tab-bar/mobile-tab-bar.js";
+import { MobileTabBarMoreLabels } from "../mobile-tab-bar/mobile-tab-bar-more.client.js";
+import "../mobile-tab-bar/index.js";
+import { PaginationLabels } from "../pagination/pagination.js";
+import "../pagination/index.js";
+import { PasswordInputLabels } from "../password-input/password-input.client.js";
+import "../password-input/index.js";
+import { PopoverLabels } from "../popover/popover.contract.js";
+import "../popover/index.js";
+import { RankedListLabels } from "../ranked-list/ranked-list.js";
+import "../ranked-list/index.js";
+import { SearchFieldLabels } from "../search-field/search-field.client.js";
+import "../search-field/index.js";
+import { SidebarLabels } from "../sidebar/sidebar.js";
+import "../sidebar/index.js";
+import { TableSelectionLabels } from "../table-selection/table-selection.js";
+import "../table-selection/index.js";
+import { ToasterLabels } from "../toast/toast.contract.js";
+import "../toast/index.js";
+//#region src/locales/en-US.d.ts
+/**
+ * The en-US strings of every component that takes `labels`, keyed by component: pass
+ * `labels={enUS.pagination}` or a catalogue of the same shape for another locale
+ * (`const deDE: typeof enUS = { … }`). Count-bearing strings (`avatarGroup`) may be plural
+ * objects in other locales (`PluralLabel` from `@nizivo/react/i18n`).
+ */
+export declare const enUS: {
+  alertDismiss: AlertDismissLabels;
+  appShell: AppShellLabels;
+  avatarGroup: AvatarGroupLabels;
+  bannerDismiss: BannerDismissLabels;
+  breadcrumb: BreadcrumbLabels;
+  button: ButtonLabels;
+  chipGroup: ChipGroupLabels;
+  dialog: Pick<DialogLabels, "close">;
+  drawer: Pick<DrawerLabels, "close">;
+  fileUpload: FileUploadLabels;
+  form: FormLabels;
+  kpiTile: MetricLabels;
+  metric: MetricLabels;
+  mobileTabBar: MobileTabBarLabels;
+  mobileTabBarMore: MobileTabBarMoreLabels;
+  pagination: PaginationLabels;
+  passwordInput: PasswordInputLabels;
+  popover: Pick<PopoverLabels, "close">;
+  rankedList: RankedListLabels;
+  searchField: SearchFieldLabels;
+  sidebar: SidebarLabels;
+  tableSelection: TableSelectionLabels;
+  toaster: ToasterLabels;
+  trendCard: MetricLabels;
+};
+//#endregion

package/dist/locales/en-US.js

@@ -0,0 +1,83 @@
+//#region src/locales/en-US.ts
+/**
+* The en-US strings of every component that takes `labels`, keyed by component: pass
+* `labels={enUS.pagination}` or a catalogue of the same shape for another locale
+* (`const deDE: typeof enUS = { … }`). Count-bearing strings (`avatarGroup`) may be plural
+* objects in other locales (`PluralLabel` from `@nizivo/react/i18n`).
+*/
+const enUS = {
+	alertDismiss: { dismiss: "Dismiss" },
+	appShell: { skip: "Skip to content" },
+	avatarGroup: {
+		overflow: "+{count}",
+		more: "{count} more"
+	},
+	bannerDismiss: { dismiss: "Dismiss" },
+	breadcrumb: { nav: "Breadcrumb" },
+	button: { pending: "Loading…" },
+	chipGroup: { unavailable: "Unavailable" },
+	dialog: { close: "Close" },
+	drawer: { close: "Close" },
+	fileUpload: {
+		prompt: "Drop files here or {browse}",
+		browse: "browse",
+		release: "Release to add files",
+		summary: "{complete} of {total} uploaded",
+		wrongType: "{name} is not an accepted file type.",
+		tooLarge: "{name} is larger than {max}.",
+		tooMany: "{name} was not added: choose one file.",
+		list: "Chosen files",
+		remove: "Remove {name}",
+		retry: "Retry",
+		cancel: "Cancel",
+		uploading: "Uploading {name}",
+		complete: "Uploaded",
+		failed: "Upload failed"
+	},
+	form: { summaryTitle: "There is a problem" },
+	kpiTile: {
+		loading: "Loading {label}",
+		empty: "No data",
+		error: "Could not load {label}"
+	},
+	metric: {
+		loading: "Loading {label}",
+		empty: "No data",
+		error: "Could not load {label}"
+	},
+	mobileTabBar: { nav: "Primary" },
+	mobileTabBarMore: {
+		more: "More",
+		close: "Close"
+	},
+	pagination: {
+		nav: "Pagination",
+		previous: "Previous page",
+		next: "Next page",
+		page: "Page {page}"
+	},
+	passwordInput: { toggle: "Show password" },
+	popover: { close: "Close" },
+	rankedList: {
+		loading: "Loading {label}",
+		empty: "No data",
+		error: "Could not load {label}"
+	},
+	searchField: {
+		label: "Search",
+		clear: "Clear search"
+	},
+	sidebar: { nav: "Primary" },
+	tableSelection: { selectAll: "Select all rows" },
+	toaster: {
+		region: "Notifications (F8)",
+		dismiss: "Dismiss"
+	},
+	trendCard: {
+		loading: "Loading {label}",
+		empty: "No data",
+		error: "Could not load {label}"
+	}
+};
+//#endregion
+export { enUS };

package/dist/menu/menu.contract.d.ts

@@ -1,7 +1,7 @@
 import { RenderProp } from "../contracts/render.js";
 import { ChangeDetails, OpenReason } from "../contracts/details.js";
-import { Align, Side } from "../contracts/state.js";
 import "../_internal/engine-part.js";
+import { Align, Side } from "../contracts/state.js";
 import { CSSProperties, ComponentPropsWithRef, HTMLAttributeAnchorTarget, HTMLAttributeReferrerPolicy, ReactElement, ReactNode } from "react";
 //#region src/menu/menu.contract.d.ts
 /** Logical side; the resolved physical side is `data-side` on the popup. */

package/dist/metric/index.d.ts

@@ -0,0 +1,2 @@
+import { Metric, MetricDataProps, MetricLabels, MetricProps, MetricSize, MetricState, metricLabels } from "./metric.js";
+export { Metric, type MetricDataProps, type MetricLabels, type MetricProps, type MetricSize, type MetricState, metricLabels };

package/dist/metric/index.js

@@ -0,0 +1 @@
+export { Metric, metricLabels } from "./metric.js";

package/dist/metric/metric.d.ts

@@ -0,0 +1,72 @@
+import { RenderProp } from "../contracts/render.js";
+import { DataStatus } from "../_internal/data-status.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/metric/metric.d.ts
+/** `default`: Numeric/KPI, the change on its own row (KPI Tile). `display`: Numeric/Display, the change beside the number (Revenue Card). */
+export type MetricSize = "default" | "display";
+/**
+ * Strings Metric renders (§16.4), all visually hidden or replaceable by a slot. `{label}` is replaced
+ * by the `label` prop.
+ */
+export interface MetricLabels {
+  /** Static text while `status="loading"` (§16.5: `aria-busy` plus this, no live region). @default 'Loading {label}' */
+  loading: string;
+  /** Read after the "—" when there is no value and no `empty` slot. @default 'No data' */
+  empty: string;
+  /** The InlineError message when loading failed and there is no `error` slot. @default 'Could not load {label}' */
+  error: string;
+}
+/** English defaults of Metric's strings; KpiTile and TrendCard use them too. */
+export declare const metricLabels: MetricLabels;
+export interface MetricState {
+  /** The status as rendered: `'empty'` when a ready metric has no value. */
+  status: DataStatus;
+  pending: boolean;
+  size: MetricSize;
+}
+/** The value and status props Metric, KpiTile and TrendCard share. */
+export interface MetricDataProps {
+  /** The name of the number, for example "Total sales". Also names the status texts. */
+  label: ReactNode;
+  /** The number. `null` or `undefined` (or `NaN`) with `status="ready"` renders the empty state. */
+  value?: number | null | undefined;
+  /** `Intl.NumberFormat` options for the value. @default {} */
+  format?: Intl.NumberFormatOptions | undefined;
+  /** BCP 47 tag for the value and a numeric `delta`. @default 'en-US' */
+  locale?: string | undefined;
+  /**
+   * The change. A number renders `<Delta value={delta} locale={locale} />` (a fraction: `0.124` is
+   * "+12.4%"); pass your own `<Delta … />` element for another format, a tone or an icon.
+   */
+  delta?: number | ReactElement | undefined;
+  /** Visible text after the delta, for example "vs last week". */
+  comparison?: ReactNode | undefined;
+  /** §16.5 lifecycle. @default 'ready' */
+  status?: DataStatus | undefined;
+  /** A refresh is in flight while the value shows: `data-pending` and `aria-busy`. */
+  pending?: boolean | undefined;
+  /** Replaces the "—" of the empty state. */
+  empty?: ReactNode | undefined;
+  /** Replaces the InlineError of the error state, for example one with a Retry `action`. */
+  error?: ReactNode | undefined;
+  labels?: Partial<MetricLabels> | undefined;
+}
+export interface MetricProps extends MetricDataProps, Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** @default 'default' */
+  size?: MetricSize;
+  /**
+   * A small chart at the end of the value row, for example a Sparkline; shown while ready. Its box is
+   * at most the row's (KpiTile draws it at 88 × 28, Figma's tile).
+   */
+  chart?: ReactNode;
+  /** The id of the label element, for an enclosing group's `aria-labelledby` (KpiTile sets it). */
+  labelId?: string;
+  /**
+   * Keep the change row's height when there is no `delta` and no `comparison`, so the box is the same
+   * whatever a fallback passes (KpiTile and TrendCard set it: Figma's tile and card always have it).
+   */
+  reserveChange?: boolean;
+  render?: RenderProp<MetricState>;
+}
+export declare function Metric({ label, value, format, locale, delta, comparison, status, pending, empty, error, labels, size, chart, labelId, reserveChange, render, className, ...rest }: MetricProps): ReactElement;
+//#endregion

package/dist/metric/metric.js

@@ -0,0 +1,116 @@
+import { cx } from "../_internal/cx.js";
+import { renderElement } from "../contracts/render.js";
+import { InlineError } from "../inline-error/inline-error.js";
+import { Delta } from "../delta/delta.js";
+import { dataStatusAttrs } from "../_internal/data-status.js";
+import { NumberValue } from "../number-value/number-value.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/metric/metric.tsx
+/** English defaults of Metric's strings; KpiTile and TrendCard use them too. */
+const metricLabels = {
+	loading: "Loading {label}",
+	empty: "No data",
+	error: "Could not load {label}"
+};
+/** `template` with its `{label}` replaced by the label node (which may be an element). */
+function fillLabel(template, label) {
+	const at = template.indexOf("{label}");
+	if (at < 0) return template;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		template.slice(0, at),
+		label,
+		template.slice(at + 7)
+	] });
+}
+/** The status Metric renders: a ready metric without a finite-or-infinite number is empty. */
+function resolveStatus(status, value) {
+	return status === "ready" && (value == null || Number.isNaN(value)) ? "empty" : status;
+}
+function Metric({ label, value, format, locale = "en-US", delta, comparison, status = "ready", pending = false, empty, error, labels, size = "default", chart, labelId, reserveChange = false, render, className, ...rest }) {
+	const L = {
+		...metricLabels,
+		...labels
+	};
+	const st = resolveStatus(status, value);
+	const ready = st === "ready";
+	const busy = ready && pending;
+	let shown;
+	if (st === "loading") shown = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Skeleton, {
+		shape: "block",
+		className: "nz-metric-value-skeleton"
+	}), /* @__PURE__ */ jsx("span", {
+		className: "nz-visually-hidden",
+		children: fillLabel(L.loading, label)
+	})] });
+	else if (st === "error") shown = error ?? /* @__PURE__ */ jsx(InlineError, { children: fillLabel(L.error, label) });
+	else if (st === "empty") shown = empty ?? /* @__PURE__ */ jsxs("span", {
+		className: "nz-metric-empty",
+		"data-slot": "metric-empty",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: "—"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "nz-visually-hidden",
+			children: fillLabel(L.empty, label)
+		})]
+	});
+	else shown = /* @__PURE__ */ jsx(NumberValue, {
+		className: "nz-metric-value",
+		value: value ?? 0,
+		format,
+		locale
+	});
+	const hasChange = delta !== void 0 || comparison != null;
+	let change;
+	if (hasChange || reserveChange) change = /* @__PURE__ */ jsx("div", {
+		className: "nz-metric-change",
+		"data-slot": "metric-change",
+		children: st === "loading" && hasChange ? /* @__PURE__ */ jsx(Skeleton, {
+			shape: "block",
+			className: "nz-metric-change-skeleton"
+		}) : ready && /* @__PURE__ */ jsxs(Fragment, { children: [typeof delta === "number" ? /* @__PURE__ */ jsx(Delta, {
+			value: delta,
+			locale
+		}) : delta, comparison != null && /* @__PURE__ */ jsx("span", {
+			className: "nz-metric-comparison",
+			"data-slot": "metric-comparison",
+			children: comparison
+		})] })
+	});
+	return renderElement("div", render, {
+		status: st,
+		pending: busy,
+		size
+	}, {
+		"data-slot": "metric",
+		"data-size": size,
+		...dataStatusAttrs(st, busy),
+		...rest,
+		className: cx("nz-metric", className),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "nz-metric-label",
+				"data-slot": "metric-label",
+				id: labelId,
+				children: label
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "nz-metric-value-row",
+				"data-slot": "metric-value-row",
+				children: [
+					shown,
+					size === "display" && change,
+					chart != null && ready && /* @__PURE__ */ jsx("div", {
+						className: "nz-metric-chart",
+						"data-slot": "metric-chart",
+						children: chart
+					})
+				]
+			}),
+			size === "default" && change
+		] })
+	});
+}
+//#endregion
+export { Metric, fillLabel, metricLabels, resolveStatus };

package/dist/mobile-tab-bar/index.d.ts

@@ -0,0 +1,4 @@
+import { MobileTabBarItem, MobileTabBarItemProps, MobileTabBarItemState, MobileTabBarLabels, MobileTabBarRoot, MobileTabBarRootProps } from "./mobile-tab-bar.js";
+import { MobileTabBarMore, MobileTabBarMoreLabels, MobileTabBarMoreProps } from "./mobile-tab-bar-more.client.js";
+import { mobile_tab_bar_parts_d_exports } from "./mobile-tab-bar.parts.js";
+export { mobile_tab_bar_parts_d_exports as MobileTabBar, MobileTabBarItem, type MobileTabBarItemProps, type MobileTabBarItemState, type MobileTabBarLabels, MobileTabBarMore, type MobileTabBarMoreLabels, type MobileTabBarMoreProps, MobileTabBarRoot, type MobileTabBarRootProps };

package/dist/mobile-tab-bar/index.js

@@ -0,0 +1,4 @@
+import { MobileTabBarItem, MobileTabBarRoot } from "./mobile-tab-bar.js";
+import { MobileTabBarMore } from "./mobile-tab-bar-more.client.js";
+import { mobile_tab_bar_parts_exports } from "./mobile-tab-bar.parts.js";
+export { mobile_tab_bar_parts_exports as MobileTabBar, MobileTabBarItem, MobileTabBarMore, MobileTabBarRoot };

package/dist/mobile-tab-bar/mobile-tab-bar-inset.client.js

@@ -0,0 +1,38 @@
+"use client";
+import { useLayoutEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/mobile-tab-bar/mobile-tab-bar-inset.client.tsx
+const INSET = "--nz-layout-bottom-inset";
+const MARK = "data-nz-bottom-bar";
+function MobileTabBarInset() {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const bar = ref.current?.parentElement;
+		if (bar == null || typeof ResizeObserver === "undefined") return void 0;
+		const root = document.documentElement;
+		const write = () => {
+			const height = bar.getBoundingClientRect().height;
+			if (height > 0) {
+				root.style.setProperty(INSET, `${height}px`);
+				root.setAttribute(MARK, "");
+			} else {
+				root.style.removeProperty(INSET);
+				root.removeAttribute(MARK);
+			}
+		};
+		write();
+		const observer = new ResizeObserver(write);
+		observer.observe(bar);
+		return () => {
+			observer.disconnect();
+			root.style.removeProperty(INSET);
+			root.removeAttribute(MARK);
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		hidden: true
+	});
+}
+//#endregion
+export { MobileTabBarInset };

package/dist/mobile-tab-bar/mobile-tab-bar-more.client.d.ts

@@ -0,0 +1,26 @@
+import { DrawerTriggerProps } from "../drawer/drawer.contract.js";
+import { ReactElement, ReactNode } from "react";
+//#region src/mobile-tab-bar/mobile-tab-bar-more.client.d.ts
+/** Strings this part renders (§16.4). */
+export interface MobileTabBarMoreLabels {
+  /** The button's label in the bar, and the sheet's title. @default 'More' */
+  more: string;
+  /** The sheet's close button. @default 'Close' */
+  close: string;
+}
+export interface MobileTabBarMoreProps extends Omit<DrawerTriggerProps, "render" | "children"> {
+  /**
+   * The page being shown is one of the sheet's: draws the bar's filled indicator on More. It is a
+   * button, so nothing is announced; the sheet's link carries `aria-current`. @default false
+   */
+  current?: boolean;
+  /** The glyph in the bar. Defaults to the internal `ellipsis` (Lucide's). */
+  icon?: ReactNode;
+  /** The sheet's title, when it differs from the button's label. */
+  heading?: ReactNode;
+  labels?: Partial<MobileTabBarMoreLabels>;
+  /** The sheet's content: the other destinations, usually `NavItem`s. */
+  children: ReactNode;
+}
+export declare function MobileTabBarMore({ current, icon, heading, labels: labelsProp, className, children, ...rest }: MobileTabBarMoreProps): ReactElement;
+//#endregion

package/dist/mobile-tab-bar/mobile-tab-bar-more.client.js

@@ -0,0 +1,60 @@
+"use client";
+import { cx } from "../_internal/cx.js";
+import { useLabels } from "../config/config.client.js";
+import { EllipsisGlyph } from "../_internal/glyphs.js";
+import { DrawerBody, DrawerClose, DrawerHeader, DrawerPopup, DrawerRoot, DrawerTitle, DrawerTrigger } from "../drawer/drawer.client.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/mobile-tab-bar/mobile-tab-bar-more.client.tsx
+function MobileTabBarMore({ current = false, icon, heading, labels: labelsProp, className, children, ...rest }) {
+	const labels = useLabels("mobileTabBarMore", labelsProp);
+	const [open, setOpen] = useState(false);
+	const more = labels?.more ?? "More";
+	const closeOnLink = (event) => {
+		if (event.target instanceof Element && event.target.closest("a[href]") !== null) setOpen(false);
+	};
+	return /* @__PURE__ */ jsx("li", {
+		className: "nz-mobile-tab-bar-more",
+		"data-slot": "mobile-tab-bar-more",
+		children: /* @__PURE__ */ jsxs(DrawerRoot, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsx(DrawerTrigger, {
+				...rest,
+				render: (props) => /* @__PURE__ */ jsxs("button", {
+					...props,
+					type: "button",
+					"data-slot": "mobile-tab-bar-more-trigger",
+					"data-current": current ? "" : void 0,
+					className: cx("nz-mobile-tab-bar-more-trigger", typeof props["className"] === "string" ? props["className"] : void 0, className),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "nz-mobile-tab-bar-more-indicator",
+						"data-slot": "mobile-tab-bar-more-indicator",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "nz-mobile-tab-bar-icon",
+							"aria-hidden": "true",
+							children: icon ?? /* @__PURE__ */ jsx(EllipsisGlyph, {})
+						})
+					}), /* @__PURE__ */ jsx("span", {
+						className: "nz-mobile-tab-bar-more-label",
+						"data-slot": "mobile-tab-bar-more-label",
+						children: more
+					})]
+				})
+			}), /* @__PURE__ */ jsxs(DrawerPopup, {
+				side: "bottom",
+				children: [
+					/* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: heading ?? more }) }),
+					/* @__PURE__ */ jsx(DrawerClose, { labels: { close: labels?.close ?? "Close" } }),
+					/* @__PURE__ */ jsx(DrawerBody, {
+						className: "nz-mobile-tab-bar-more-sheet",
+						onClick: closeOnLink,
+						children
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { MobileTabBarMore };

package/dist/mobile-tab-bar/mobile-tab-bar.d.ts

@@ -0,0 +1,39 @@
+import { RenderProp } from "../contracts/render.js";
+import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+//#region src/mobile-tab-bar/mobile-tab-bar.d.ts
+/** Strings this part renders (§16.4). */
+export interface MobileTabBarLabels {
+  /** The navigation landmark's name. @default 'Primary' */
+  nav: string;
+}
+export interface MobileTabBarItemState {
+  current: boolean;
+}
+export interface MobileTabBarRootProps extends ComponentPropsWithRef<"nav"> {
+  labels?: Partial<MobileTabBarLabels>;
+  /** The destinations: `MobileTabBar.Item`s, and `MobileTabBarMore` last. Five at most fit. */
+  children: ReactNode;
+}
+export interface MobileTabBarItemProps extends Omit<ComponentPropsWithRef<"a">, "children"> {
+  /** The page being shown: `aria-current="page"` and the filled indicator. @default false */
+  current?: boolean;
+  /** A decorative 20 px glyph in the indicator; it is `aria-hidden`. */
+  icon: ReactNode;
+  /**
+   * A count on the icon's corner, such as open orders. It is part of the link's text, so it is
+   * announced with the label: write it so it reads well there ("12 open").
+   */
+  count?: ReactNode;
+  /** The router's link, for example `render={<Link href="/orders" />}`. It must render an `<a>`. */
+  render?: RenderProp<MobileTabBarItemState>;
+  /** The label under the icon. */
+  children: ReactNode;
+}
+/** The `<nav>` and its list, with the bottom-inset island. */
+export declare function MobileTabBarRoot({ labels, className, children, ...rest }: MobileTabBarRootProps): ReactElement;
+/**
+ * One destination: a list item around a link, with its icon in Figma's indicator pill and its label
+ * under it. Props other than `icon`, `count` and `current` go to the link.
+ */
+export declare function MobileTabBarItem({ current, icon, count, render, className, children, ...rest }: MobileTabBarItemProps): ReactElement;
+//#endregion